Video: Adding master elements

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.

Adding master elements

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."

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.