Design 002

Color Spaces, Color Banding, SVG

(1/3) Why does my Photoshop design look different on my laptop compared with my phone?

have always been curious as to why when I exported videos or images it would look different when viewing the exported image on my phone, when compared to the image displayed on my laptop.

Today, while seeking to get to the bottom of why my models aren’t loading into Three.JS, I came across an e-book.

Included in this e-book is a sandbox example which had the term I came across the term sRGB (in line 62 of the code), which is something I saw in Photoshop before so I thought I might as well do some investigation into what it truly means.

Sandbox example from e-book

I initially didn’t think much of it.

Until I read this article, which talked about color spaces, and sRGB being one. I’d recommend checking out the article, or at least having a quick skim through it to get the gist of it, if you find yourself in the same boat I was in. I would give footnotes about it here, but I’d more than likely be robbing the writer of potential views.

(2/3) Color Banding

I then proceeded to go onto Photoshop to test out my new knowledge concerning color spaces and created a new file, and in the settings saw ‘bit’, which is another thing that I was always curious about, but never really looked into. So I decided to continue in my pursuit of knowledge and took a look into it’s meaning.

A ‘bit’, as this article puts it, is:

“…is a computer term for data storage. It can only contain two values, typically 0 or 1. 8-bit simply means the data chunk is 8 bits in total (or 2 to the power of 8, as each bit can be either ‘1’ or ‘0’). This allows for numeric values ranging from 0 to 255.

Similarly 16-bit means the data size is 16 bits in total. (or 2 to the power of 16) This allows for numeric values ranging from 0 to 65535.”

This is directly linked to color banding in that the higher the bit rate and depth, the less banding you will get and vice versa.
But like in a large number of cases — WAV vs MP3 (music); PNG vs JPG (images) — the better the quality, the larger the file because it has to store more information, which is something to be considered when making decisions concerning your work.

I’ll link the article again here, so you can check it out for more detail, and also to help you understand when you should consider using the higher bit rate as opposed to the lower one.

(3/3) Quality of Exported Graphics Goes Down when Size is Scaled Up

I used to export a large PNG file for the graphics that I needed to be able to use at varying sizes. I had a high-quality looking graphic, but PNGs are already notoriously large files, and what you get in quality you pay for in storage space.

I then came across SVGs, but only seeing them used in HTML, I believed that maybe they were used only for websites. However, after a little bit of Googling, I came to understand their three-dimensionality in terms of use-cases.

The most important take-away for me was that their quality was independent of size, being that it is a “Scalable Vector Graphic”, and it doesn’t take up as much space as say a PNG would.
To get a broader and deeper understanding of what SVGs are truly capable of, click here to check out an article that helped educate me on the matter.