In this tutorial series we’ll be setting up a Photoshop web design layout from scratch. In Part 1, we’ll be going over the first 2 steps which will include setting up our Photoshop document and then laying down the basic elements that make up the Header, Menu, and Footer areas.
At the end of this tutorial series, you will have a Photoshop web design layout that looks like this:
For a larger preview, click the above image and you’ll be taken to my Flickr account where you’ll have the option to view the image at its native size, 1100 x 800.
Step 1 – Setting up your document
In this step we want to setup our document by laying out Guides to show us where to put all of the elements of our web layout. There are many ways to do this.
Open up a Photoshop document and set it up as I have.
Also, make sure your rulers are visible and set to pixels. Hitting command+R (ctrl+R on a PC) will show and hide the rulers. Right-Clicking the ruler area will bring up the option to change to pixels.
Now we’re going to put in many Guides to create the foundation for our layout. To create a new Guide and place it exactly where we want it, you need to go to View > New Guide.
You are going to create a total of 8 Guides in this step. Create them as I have.
This is what your canvas should look like now.
If you don’t see your Guides, you may have them hidden. Hitting command+H (ctrl+H on a PC) will show and hide your Guides. This is a very useful command because obviously sometimes you want to see your Guides and sometimes you don’t.
In order to create a more clear visualization of what we’re doing here, this is what the Guides look like in relation to what we’ll be creating later. Take note of I what call each section in the image below. I’m going to use those names to reference the different sections in the next step.
Step 2 – Putting down the basic elements
Now, we’re going to set up the main elements that will layout the Header and Footer. In this step, we’ll be working with solid color blocks. This way you can see the transition in the next step when we start applying subtle gradients and shading.
Using the Rectangular Marquee Tool (M), make a selection the entire width of the canvas in the Header section. Create a new layer in the Layers Palette. Set your foreground color to a dark grey (#2c2c2c). Hit option+backspace (alt+backspace on a PC) to fill in the selection with dark grey on the new layer.
Do the same thing for the Menu. Make a selection the height of the menu and the width of the canvas. Create a new layer and fill in the Menu with red (#b60d0d).
Create a selection of the Menu Shadow area that’s the width of the canvas, create a new layer, and fill it with white (#ffffff). Obviously, it won’t show on our white background, but we’re going to come back to it later.
Next, we’re going to use the same concept for filling in the footer sections. Remember to put each element on its own layer. Fill in the Footer Shadow with white (#ffffff). Fill in the Footer Top Border with red (#b60d0d). Fill in the Footer with dark grey (#2c2c2c).
As this lengthy tutorial moves forward, your Layers Palette will become very full. Remember to practice keeping all of your layers extremely organized in the Layers Palette. For clarity in this tutorial it might be a good idea to try and keep your Layers Palette organized exactly how I do, and that’s why in most of the screenshots from here on I’ll include the Layers Palette.
Here is what you should have now.
Now, let’s organize our Layers Palette a little more in order to get ready for the upcoming steps. We’re going to create some folders in the Layers Palette and move some of the layers around.
If you’ve never organized your layers before, it’s really easy. You simply click the little folder icon at the bottom of the Layers Palette to create a new layer group. Then you can drag layers and other layer groups into that layer group. To rename a layer or a layer group, you simply double click the text and it will become editable.
Organize your layers like I did below.
In the next part, Part 2, we’ll be continuing on to polish up the Header, Menu, and Footer.
Related posts:
6 Responses
@Jason, i took the time to go through here, really good job but then, i expected you to hint us on your grid and your calculation of the grid.
i would normally do some calculations after deciding whether to use a 12 grid or 16 grid pattern but then again i ensure they are equal firstly before merging them.
I hope to catch up on the part #2 of this tutorial anyways.
Thanks.
@Abdulhakim
This tutorial really is meant to be for beginners, and it’s a very complicated process from start to finish, so my goal was try and compact it all…
As far as actually figuring out the size of everything, I don’t generally calculate everything in the manner of calculating off of a grid system.
My methods for this aren’t necessarily text book methods, so that’s another reason why I didn’t include them. I’ve made so many websites, I pretty much have standard dimensions for different things in my mind depending on what kind of site I’m doing. Also, sometimes dragging around the guides until things look visually correct is just the natural process of a visual designer. While sometimes we need to make things symmetrical and work out mathematically, other things just need to “look right.” And I don’t believe there is any formula for that
Dear Author http://www.psdpenguin.com !
I agree with told all above.
I want to quote your post in my blog. It can?
And you et an account on Twitter?
@squireller
Sure. You can do that. You should come back and post a link to your blog. I’d be curious to see what you’re writing about.
And yes, I actually just set up a Twitter account the other day. I haven’t actually done anything with it yet, but I plan to start posting updates for everything on it soon. Here it is:
http://twitter.com/jasonbobich
Trackbacks/Pings