#007: Photoshopping Icons and Text Into Navigation

(Updated on )

We start dropping the text into the main navigation, just to see how it will fit, work on sizing, colors, etc. Some of the text is fitting pretty tight but that’s OK, we’ll make room, especially once it turns into HTML/CSS and adjustments are even easier.

We use the same Gotham Rounded for the text. Might as well continue the “Brand” font into navigation (that feels very appropriate).

“Active” navigation simply gets a darker color and reversed text.

We look at my favorite icon font, Pictos, but decide to go with Entypo instead just to switch things up a little. Here’s a bunch of more we could have also chosen.

We use the software Font Explorer X to activate the font and explore it. We click “information” to get a grid of all the characters in which to copy from (and easily paste into Photoshop).