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.
Once I have my page structure organized on my mockup here inside of Photoshop, the second thing that I always do is start to add what I call master elements into my design. So the things that I consider to be master elements are things that don't change in the design, no matter what page I am currently viewing. So that would be stuff like the logo, the footer, the page background, the overall background of the site, that kind of thing. So that's what we're going to be building in this movie. The first thing I need to do is I need to load up the swatches that I've created for this project, and I can do that by opening up the Swatches panel. So I will drag this out so you can see it.
And once I have the Swatches panel open, I'll go to the Swatches panel menu. I'm going to choose Load Swatches. And inside of your chapter 8 exercise files folder should be something called robots_swatches.ase. And when I open those up, those should place right there at the bottom of your Swatches panel. You could have also chosen to replace the swatches with those swatches that I just loaded in. If you had done that though, it would have gotten rid of all these other swatches, and you wouldn't be able to use them. So I am just going to keep these right here, and you can notice when you mouse over them, it says Robot Grey, Robot Orange, Robot Dark Grey, Robot Yellow, and Robot Blue.
So we're going to use all of the robot swatches to apply color to different parts of our design. So the first thing I am going to do is apply the background color to the overall design. I am going to do that by selecting the background layer, and I am going to come in the Swatches panel and I am going to select Robot Blue, and then I am just going to hit Option+Delete or Alt+Backspace on my keyboard, and that's going to fill that particular portion of my screen with that color. Once I have that applied, I want to add a little bit of texture to this as well. In order to do that, I am going to run a filter. So I will do Filter > Noise > Add Noise and I'm going to use 2% Gaussian noise, and Monochromatic, and hit OK, which gives it a little bit of a more organic feel.
So I've got that in place. That's the first master element, because that's something that's definitely not going to change. That is the overall background of the design. Next up, I'm going to change this, this big rectangle right here. And instead of trying to find out where that rectangle is in my design, all I am going to do is turn on Auto Select inside of my Options bar up here, and I am just going to click on that to find it. And it actually got tucked away inside of my Footer, and that's okay. I am going to move that out of there though. There we go. So there is my page background.
And so now I'm going to change the way this appears. So in order to do that, I am just going to come up, pick another swatch. In this case, I want it to be the Robot Yellow swatch. And with that layer selected, I should be able to Alt+Backspace or Option+Delete to fill that in. You could have also double-clicked on the layer thumbnail and then simply selected the swatch from the Swatches panel and hit OK. Either way is fine. Now, I want to add a border to the outside of this, so I am going to access my Shape tools and then I'm going to add a stroke of white. So I will pick a color here, add a white stroke, hit OK. And I'm going to use 10 points for this, and you will just see it's kind of a nice border inside.
If the stroke is on the outside or in the center, you can change that by coming in and changing the alignment to the inside. Here is center, so that kind of jumps outside. And then if you do outside, it goes all the way outside. You can see that kind of exceeds my margins, and I don't really want that to happen, so I am going to go back to the inside to keep it inside. Now, I will collapse that back, and we can continue going. There is my page background. I am actually going to drag it beneath the Footer. I want both of those on top of each other, like so. I am also going to add a drop shadow to this to add a little bit of depth to my design.
So I will double-click out to the right- hand side of that and I'm going to choose Drop Shadow. And once I have Drop Shadow selected, I'm going to set my Size to somewhere around 8, and I'll change my Distance to 0, and I will decrease the Opacity level to something like 55. Hit OK. Now, you see it adds the layer style there. Collapse that up. If I click on the background, you will be able to see it a little bit easier, and let's go up to View and also turn off Extras.
That way it hides the guides for us for a moment, so you can actually see that it's kind of protruding out a little bit. It's got that little shadow behind it. I am going to go back and turn my Extras back on, View > Extras, turn those back, and there we go. Now, in my Header, up here at the top, this is the next master element. So I am going to find the Logo Placeholder, and basically what I am going to do, I am going to use this as a guide of where I'm going to put my logo. And I'm going to go File > Place, and inside of my exercise files folder I have something called robot_toys, and so I am going to hit Place.
And once it does that, it's going to ask me if I want to place the PDF. I do indeed, so I'll hit OK. Once it places that in there, I'm simply going to align the bounding box of this object to the Logo Placeholder at the top. And once I get that lined up, something kind of like that, I will hit Enter or Return to commit, and now I can throw away the original Logo Placeholder. So now my robot logo is right there in the center, at the top of my page, right where it needs to be, and I can collapse the Header group back up.
Now, there's only one other master element that I have to put in here, and that's the navigation system--the links that go across the top to let me click to go from page to page-- and we'll be covering that in its own movie, called "Creating navigation."
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.