We start designing the top level (main) navigation of the site. We're starting with the desktop size screen (at an admittedly arbitrary width) but we're not worried that the navigation will have any problem adapting to a small screen.

We decide that icons are a pretty cool thing to use to visually distinguish nav links from each other. The last designed used images, but we'll be smart and use an icon font. We'll get more into that in the next video.

Organization of the Photoshop layers starts to happen. This is something we'll have to stay on top of throughout the design process to keep our Photoshop sanity!

The shadowed top navigation links are somewhat inspired by my Kindle Fire. The browser on that has tabs which have a very strong shadow beneath them onto the next tab. It doesn't look "real", but I like it.


  1. User Avatar
    Permalink to comment#

    I was going to say the same thing – copy layer style from one layer, select multiple other layers in one go and hit paste layer style :)

  2. User Avatar
    Permalink to comment#

    I like to use the Smart Object feature in PS for things like the navigation tabs or buttons. You create one tab, convert it to a smart object, then duplicate the smart object. The really nice thing about this route, is that when you change some layer styles of the smart object, all other duplicated layers inherit that change. No need to copy and paste layer styles on every update.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.