Filed under

design

 

TIP: My PNG images appear lighter on the web than in Photoshop. Why?

 

Here is a problem that I have had for some time with Photoshop. When I design something in PS and hit "Save for Web & Devices" to export web safe portable network graphics (PNG) file then it always appears lighter (washed out) on the web than I originally see it in Photoshop. For example, notice the difference when viewing the gradient in PS (left) and on the web browser (right).

Gamma_sketches

It came out that it's a simple color balance issue. When an image is created in RGB, PS embeds a color profile to the document to keep colors correct in color managed applications. But, the Internet isn't color managed so when image is saved for web the color profile is stripped and the colors shift slightly.

All browsers assume an RGB image is sRGB and many formats like GIF and PNG don't support color spaces. This problem only affects those viewing the image on a Mac, not Windows since Windows, and browsers on Windows aren't as picky about color balance (gamma 1.8 vs gamma 2.2), and they are much more forgiving when using sRGB.

 

Solve it

Knowing that above, I now needed to get my Photoshop showing the same colors as they appear on web browsers on a Mac (PC was okay, they just come a little darker then).  

Firstly, to be safe I needed to change PS color settings from Edit > Color Settings and changed my RGB working space to "sRGB IEC61966-2.1". 

Secondly, I made sure I was working on Macintosh RGB proof color space by View > Proof Setup > and select Macintosh RGB or Monitor RGB when I work on a Mac. That way I create artwork correctly from the beginning. And that should do the trick!

menuRGB_sketches

 

Good luck!

 

Tip: You can toggle between Windows and Macintosh proofing views by pressing "Command" + "Y". 

Note: If you work on a Mac but have your monitor calibrated to 2.2 Television Gamma, then you probably don't experience that problem.

 

 

 

Filed under  //   design   tip  

Comments [0]

Focus

It's not good enough anymore to be "pretty good" at everything. We think the ever increasing clutter on the web requires one to focus and quit everything else. In 2010 you should be most of something: most friendly, most accessible; most flexible. 

Now it makes sense to have wider knowledge but concentrate that wisdom. It used to be common, however, that web design companies knew something and tried to apply that to every task in hand. It was acceptable that one template of a website could be used for any type of business. Is it now? 

Web pages are starting to act more like web applications. And applications are used by people and need to be designed for people because people get lost. That is why we do interfaces and the strategy behind them. We decided not to follow temporary trends, instead, we do something because it makes sense. We know that to become really good, we have to live and breath it. 

CA (short for CannedApps) is proud to announce that we have finally retouched our logo to make it suitable for our philosophy. We feel the outcome is now stronger, more focused and more memorable. Everything that doesn't need to be there has been removed. We love it!

cagreenlogo

We spent hours digging in color combination books to find the perfect hue for green. Our inspiration incidentally came from "green screens" used in video and animation industry. The web is but a canvas to our imagination. What to wish for in 2010? To make what people want, without giving up. And to never stop learning. Better user experiences for everyone!

Filed under  //   cannedapps   design  

Comments [0]