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. brendan
    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. alettieri
    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.