Have you have noticed that after a recent browser upgrade a few of the sites you worked on now display graphics that don't quite match. The reason for this is that most likely you are assigning a specific color profile inside your image editor that until recently most browsers have ignored. I have debated making this a quick tip or a full in depth article on color profiles. There is just too much to cover right now, so I am just going to keep it simple and show you how to fix a simple common problem.
Safari got things kicked off by supporting color profiles, no surprise there. Most people might not realize it but Firefox 3 launched with color profile support but it was disabled by default due to performance issues. Fast forward to FF version 3.5 and you now have default color profiles supported by two great browsers.
So, this is good right? Pretty colors are nice. For photos it's a great thing, but for web design things can get a little more complicated unless you know what to look for.
Gradient backgrounds and large background images are pretty popular in web design right now. Typical usage is adding the background image in the css and then setting the background color to match the color of the image to appear seamless. The problem lies in the difference between the hex color and the image with the embedded color profile. If your background image uses an embedded color profile it may look great in Firefox or Safari, but open up Internet Explorer or any browser that does not support color profiles and you will see a color difference resulting in an ugly edge around your images.
In example above the background was exported with an embedded color profile. The site was then built and tested in FireFox 3.5 and a matching background hex color was chosen. However when the image's color profile is ignored by Internet Explored it no longer matches the rest of the background.
If you find a site where your colors once matched and now they don't, or if your colors match in one browser but not another you need re-open your original image and re-save it without the "embed color profile" option checked. or use a background that covers the complete background of the site. The image to the right shows where the color profile option is located inside of Photoshop CS3's save for web dialog box.
I am not saying to never use embedded color profiles, they look great and can be used with success if you know what to look for. I am just trying to provide you with a quick fix if you see mismatched images on your site.
Not sure what settings you used on the images on your sites? Just visit any sites you might have worked on in FF3.5 or Safari and take a look around. You will notice pretty quick if you have color matching issues.
So it's been a while since I had wrote a blog post so I thought I would finally take some time and let you know what I have been up to lately. I have been crazy busy to say the least and a lot of exciting projects...read more
I recently ran into a problem where I wanted to use box-shadow to create a divider between a header and the content of a site. The div I was putting the shadow on was set to 100% width so the background...read more
I was recently contacted by a college student and asked to answer a few questions for a class project. I figured since I already had it typed up I would share it on my site....read more
I recently designed my first car wrap for a client. It was a fun project and I was anxious to see the final result. I was a little nervous since I had never designed on before and the design was fairly complex....read more
I am currently available to do freelance projects. However I am not available to do freelance work for other agencies. If you would like to consider me for your next project please contact me and tell me a little about your project. If you still need a little persuading take a look at my work.