Soushi | Tutorials

Hey there! So today we're back in business with a new web layout tutorial. This time we're gonna be working on a nice and colourful layout, moving on from the dark themed layouts. This one looks nice and fresh and could easily theme a little blog or personal site.

Ah yes, something i'd like to mention. I mainly create web layout tutorials, and tutorials in general so that people can get working with Photoshop, get some ideas, inspiration etc. That means that i'm not really going to teach you how to get these layouts to work. This is a Photoshop Tutorial site. So if you can't code these layouts at the end of making it, then sorry but i can't help you. I'm actually not the best coder there is, i get along so coming here for help isn't the wisest idea! As i said before, if you think it's useless to create something then not use it, then so be it. What about all those tutorials teaching you to create a company's logo or something? You're going to put a trademark logo in your website's header? No, you've read that tutorial so that you could see the process of it being made, how to create certain effects, etc. That's what tutorials are about.

Anyway, that's that sorted, let's get started shall we?

1. As always, let's give ourselves some space and create a new document; 800x600.
2. Fill in your background with white or black, you can name this layer Background if you wish, hit the blending options for that layer. We'll add a nice gradient.

   

   

3. Create a new layer, name it Content and grab the rounded rectangle tool, use these settings.
   
4. Now click on the canvas to bring up the shape. now right click inside the shape and in the menu select Make Selection.
   While on the Content layer, fill in this selection with white. Deselect.
5. Now still working on your Content layer, hit CTRL+A to select the whole canvas.
   Press CTRL+X to cut the shape we just created, and now hit CTRL+V to paste it back in.
   The shape should now be perfectly centred.
6. Get a hold of your rectangular marquee tool. now we want to square off the 3 edges we don't want, to do that we create a selection and then fill this selection in with white.

   

   So create a selection like this: That's the bottom left corner of the shape, drag the selection right to the bottom like i did.
   Now fill in the selection with white, and we get:

   

7. Now do this for the Top Right and Bottom Right corners too. Make sure you fill in the bottom too. You should now have something which looks like this:

   

8. Go to the blending options for the Content layer and use these.
   

   

   

9. Okay, duplicate the Content layer and name it "Content Back". place it under the Content layer in the layers palette.

   

10. Go to the blending options for the Content Back layer and use the following.

    

    

    

11. Get your Move Tool, now hold Shift. Press the Up arrow on your Keyboard 4 times to nudge it up 40 pixels
12. Hold Shift again, and now hit the Left arrow once to nudge it left 10 pixels. Release Shift and press the Left arrow five more times to nudge it a further 5 pixels. Now, you'll have this.

    

13. You can see that the edges at the bottom left and top right are missing, on your Content back layer just grab your rectangular marquee tool and create selections and fill these in with white so that that all edges are aligned.
    Create selections like these, note how they are within the strokes of the Content and Content Back layers.
    
    To get something like:

    

14. Get your move tool again, and select your Content Layer. Holding Shift nudge it down (down arrow) 30 pixels. (3 times on your down arrow key.) Do these same for the Content Back layer. We'll now have some space at the top for the navigation.
    Before we get on to that, select everything: CTRL+A and go to Image> Crop. Deselect. Just so the gradients are correct.
15. On to the navigation now, create a new layer and name it Menu. Get your rounded rectangle tool and use the following settings.
    
16. Click on the canvas to bring up the shape, right click inside the shape and choose Make Selection.
    Fill this in with white.
17. Now, as we did with the Content layer, we're gonna square off the two bottom edges. So grab your rectangular marquee tool and square 'em off.
    
18. Now judge this down so that it's comfortable sitting on the Content Back layer as so.
    
19. Duplicate this layer. Grab your move tool, hold shift and nudge it 9 times to the right. Then release shift and nudge it two more pixels. You'll get this.
    
20. Now duplicate this layer and nudge it again. For the purpose of the tutorial we're gonna create 5 links so get duplicating! You'll end up with something which looks close to this. Note: Move them all around left or right if they overlap the edge.
    
21. Go back to the first menu link we created, should be called the Menu layer. Go to blending options.
    

    

22. Now right click your Menu layer in the layers palette and choose Copy Layer style. Now right click and Paste Layer Style on all the other menu links. Now we'll change all the gradient colours, so go back to the second link and use this, then the third gradient for the third link, etc. You get the idea.
    

    

    

    

23. You'll now have a nice colourful menu!
    
24. Actually we're soon done, just one more thing and then it's the detail work.
    Create a new layer and name it Text Area. Grab your rectangular tool and create a selection like. I didn't mention a width or height because it's up to you how wide you want the Text area to be really, i left space at the top and some to the left for additional things:
    
25. Fill this selection in with White. Now add a layer mask to this layer with the layer mask icon in the layers palette.
26. Set your foreground colour to Black, get the gradient tool and use these.
    
27. On your layer mask, hold Shift and drag a gradient like this. (Click at the top and drag towards the bottom).
    
    You can play around for different types of fades, how much you want to chop off etc.
    This is what i got.
    
28. You now have your layout done. However there's a little thing that still wrong, have you noticed? No? Look at the Right, Top corner of the Content layer.
    
    Hmm? What? Yes, it's rounded. We're gonna square it off. Yeah we're squary people. Create a new layer, and name it, uh Square? Set your foreground colour to #3baaff
29. Zoom in on the evil corner, take your rectangular marquee tool and create a seleciton like this.
    
30. Fill it in with that blue we used, deselect. Set your foreground to white. Grab your pencil tool. Use a 1pixel brush size.
31. Now simply draw the missing stroke like this.
    
32. Zoom out, and admire the squariness!
    
33. Now you're basically done. All that's left to do is add your links, your content, a logo some stuff on the side if you left some room. And polish up a little if you need to!This is my final result. Note it's a little larger than the one we made in the tutorial because i created a new one for the purpose of the tutorial. Note if you want to enlarge the width of the site it's very simple, use the squaring off technique used on the corners to add extra width to the Content and Conten Back layer, and it'll make it larger to your needs.
    Click for Full View
    
    As you can see i added the logo, some add to favourites links, some example text, lines in the background etc. I also added some stuff to the left. If you want to know how to do the Email Us letter than just let me know i'll add it to the tutorial, although it's very simple and done in a few steps.

    I hope you enjoyed the tutorial and that it can give you some new ideas and inspiration!