Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
Creating navigation for web sites is one of the most important aspects of the web site itself. A navigation system has to be engaging and functional at the same time, and therefore you have to pay special attention to how you design yours. Most navigational systems on web sites have either a horizontal or a vertical orientation. The style of your design will dictate which way your navigation goes. For this project, I am going to do a very simple navigation that goes across the top, like this. I'm going to ensure that the fonts that I use for this navigation are easy to read and that I use a big enough font size for people to be able to click on it, whether it's with a mouse or with a finger on a touch device.
That's something you have to be very, very careful with these days. You don't know how your audience is accessing your content. They could be accessing it on a phone, on a tablet, or on a desktop computer. You just don't know these days, so you have to make sure everything is both click- and touch-friendly. When you're designing navigation, you should also keep in mind something I call the three-click rule. Everyone should be able to get pretty much anywhere on your site within three basic clicks. So basically, don't overcomplicate your navigation system. The main navigation of a site should contain the main top-level pages that people should have access to, directly from the start.
So in this case I have four basic pages that they need to get a hold of: the Home page, the About page, the Store, and the Contact page. So I need to put those as top-level navigation items going all the way across the top here. So I'll do that by inserting some text. I'll grab my Text tool, and I am simply going to click and start typing some text. I first need to make some changes to the text that I'm using though. I want to make sure that I am using Courier New or Courier; either one will work. I'm going to use a bold font, and I am going crank up the size to something like 18 pt.
That may be too small, but for now it'll work. I'm also going to make sure that I am using white as my color. Now I am simply going to type out, in all caps, "HOME," I am going to type two spaces, and then I am going to type a bullet, two spaces, and I'll type the word "ABOUT" in all caps. If these are too small, as these appear to be, I can simply come up and change the size, something like 24 pixels, which looks a lot better.
And I'll grab my Move tool and I will just move them into place, somewhere like this. I want to create navigation on the right side as well, so I'll just use Command+J or Ctrl+J to duplicate those layers. Then I'll use my arrow key to move them over, and then I can simply grab my Type tool with the letter T, highlight the text, and type out "STORE," space, space, bullet point, "CONTACT." There we go.
So now I have my navigation in place--HOME, ABOUT, STORE and CONTACT--each one corresponding to HOME, ABOUT, STORE and CONTACT in my Page structure. So I've pretty much got everything I need right here. Now if there's going to be other pages, you could of course build the navigation component to accommodate those. You could also insert some sort of dropdown component if you wanted to, but you would have to have that hidden initially, because only the top level-pages should be displayed when a user initially sees this. They should be able to get to the four most important parts of this side right from here-- HOME, ABOUT, STORE, and CONTACT, which is what I outlined in my page structure originally.
So now that I have got that done I'm ready to put these inside of my header group, but I am going to rename them first. So right here I am going to come over and HOME and ABOUT, that becomes something called Left Nav. STORE and CONTACT becomes Right Nav. Now, why am I renaming them like this? I am renaming them like this because when I hand this off to a developer, it's not going to be called HOME, ABOUT, STORE, and CONTACT as you see here. He is going to use some sort of CSS class to determine which one goes where. And in this case I am sort of telling him, I'd like for it to be called Left Nav and Right Nav.
That way when he designs this, we could actually put any type of text up here and it would still fit the format. So I will select that, drag them both down into the header, and now I have my final master element in place and that's the navigation that goes all the way across the top. You could also add a footer navigation, which is common practice in most web sites, but for this one, I am just going to leave that alone. Once you have all of your master elements in place in your design, it's time to continue aggregating content and finishing off your mockup.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.