Making a simple layout
The old tutorial is really out of date and the layout was ugly so here is a new one, to make a simple and minimalist layout. Open a new file. 800*600px is enough, if you need a wider layout, choose the width you need. Let's fill it with a solid color. Click on Create new fill layer 
in the Layers window and select "Solid Color".
Create a new layer 
and make a big selection with the selection tool 
, for example, 750*600px. And fill it with white. We have this so far.
Now, double click on your white layer to go to the Layer Style. We're going to add some drop shadow, check "Drop Shadow". I set the distance to 0, and the size to 8px. (View settings)
Now let's add some header. You can use an image, but in this tutorial, I will simply add a gradient. Make a selection let's say 730*200px. I chose 730px because my white layer's width is 750px, and I want a 10px margin on both sides. 750-2*10 = 730! Yipee. Now that you have your selection, click on in the Layers window and this time, select "Gradient". I'm staying in the orange tone. The top should be slightly darker. Colors I've used: #ffcc66 and #ffffcc.
It is plain like this so let's add some deco. Make a selection, but this time, it needs to be thin, so 730*10px is enough. Position it at the top of your gradient, make sure it is well aligned then click in the Layers window and select "Pattern". I will use some diagonal line pattern. Once you have applied the pattern, right click on the layer, it should be named "Pattern fill" and select "Rasterize". Then, double click on it to go to the layer style and check "Color overlay". I chose this color: #ffcc99.
Repeat this step with a thinner selection, 730*5px and position it at the bottom of the gradient. Fill it with an other pattern, I've chosen the same diagonal lines but with more space between the lines. Once again, right click and rasterize, then double click and choose "Color overlay". I've used this color: #ffcc99.
Now, we're going to add a top navigation. Make a selection again, this time 730*40px. Position it below the thin line under the header then click on in the Layers window and select "Gradient". I used these colors: #ffcc99 and #FFFFFF (white). It should fade to white from the top. Here is our menu! :) And your layers palette should look like this (see layer palette).
It's time to add your website title! I used the font Print Clearly. Position it anywhere you want, I will put it at the top left corner. Then, make a selection like on the right screenshot. Create a new layer and fill it with white.
Then, make an other selection that should be as wide as your website title and press delete or go to [ Edit > Clear ]. Then set the opacity of this layer to 30%.
Now, add your links in the menu. I used the font Decker and this color: #ff9966. You can add some decoration between the links, for example, custom shapes. I'll put little stars because it's cute. XD
We will want to use CSS Rollovers so, duplicate your links text layer (right click and select "Duplicate Layer"). Then hide the original one and add some new style to the copy (double click on it to go to the layer style). I added white "Outer Glow". (see settings) When it's done, hide the copy and set the original text link layer to visible.
Now your layer is ready to be cut. This is a very basic layout so it can be cut in three parts only! :) We won't even need to use slices. I've added guides to show you how we'll cut it. Note: we can even cut out the extra parts on the sides. We don't need them. See second screenshot.
We're going to cut the layout the old way, not using slices. Save your .psd files with layers. Now flatten your image, go to [ Layer > Flatten Image ]. Select your header according to the guides. Copy it and paste it in a new file. Make sure you have flattened your layers! Ctrl + C then Ctrl + N then Ctrl + V (copy, new document, paste). Save this new file as header.jpg!
Repeat this step for the menu and background. In your menu.jpg file, go to [ Image > Canvas Size ] Check "relative" and add 40px to its height (see settings), so that we can paste the other menu background, when the mouse is over a link. Now, return to the unflattened version of your layout. Hide the text link original layer and set the copy to visible. (The text links with the outer glow) Flatten your layers once again and select the menu, copy it and paste it in menu.jpg!
We should have these files: header.jpg, menu.jpg, background.jpg
Ready to read the coding part? :)
Simple layout PSD file (51.5 KB, 379 hits)
Sponsors
6 Responses to “Making a simple layout”
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)
You tutorial has helped me a lot, mainly because I'd had already made my layout but I wasn't sure how to embed the links and all into html/css. Thanks
Perfect tutorial!
Now I know a loooot more about PS :)
Thank you, very very much!
I'm loving your work.
Congrats ;D
xoxo
Im a little confused on the cut the part after the css rollovers. What tool do we use to cut besides the slice too??
UHHH. where do you go to do this? right bakc PLEASE(;
Thank yuh[=
omg ; this helps a ton ! i just thought i could slip by rasterizing or whatever ; then i screwed up =/ i have to start allll over . but i have this page bookmarkeddd (:
thank you so much your tutorials are so helpful