Photoshop Trick for CSS Sprites: Rollover Color with Missing Fonts
As a web developer working with designers who provide me with a plethora of assets, I often find myself in situations where I need to create rollover states in Photoshop for text assets whose fonts I don’t have installed on my computer.
How often have you seen the dreaded:
“The following fonts are missing…Font substitution will occur”
dialog when trying to simply change the color of the font in your design? This usually occurs when you’re creating an image sprite using those fancy-schmancy non-web fonts designers love so much.
So instead I use the Fahrner Image Replacement and a well-designed image sprite to accomplish my top level navigation systems. It requires extra effort on my part and isn’t as flexible as using the aforementioned techniques, BUT in my experience its a more bulletproof solution.
Now back to the situation at hand: I have this great-looking font in my PSD but don’t have it on my computer. I need to make rollovers for all these navigation states and I can’t click into the text without altering its appearance. What’s a developer to do? Here are the required steps:
- Duplicate the Photoshop layer and position according to the sprite design
- In the layers panel, double click on the layer to bring up the Layer Style dialog box
- In the left column of the Layer Style dialog, select Color Overlay and change to the desired color
- Lather, Rinse, Repeat for as many elements needed to complete the navigation
- Save out PNG or GIF (depending on file size)
- Style using CSS to create the rollover effect