Smiley Helper » Adobe Photoshop » Layout Tutorials

Adobe Photoshop » Layout Tutorials » Blue and Brown Layout

Blue and Brown Layout

For this layout we're going to make a blue and brown graphic with buttons and a logo, slice it up, and then code it. :)

1. Open a pretty big canvas, depending on how big/wide you want your layout to be. The height doesn't matter as much because we don't need much of the middle due to our later slicing, but I'm using 800 x 600 px.

Make a new layer and create a rectangle in dark brown (624e3d) on the canvas from top to bottom that allows a little space on the sides. Double click the layer and add a 1px black border to the layer style and a 90 degree angle drop shadow (if these show on the top and bottom, use the free transform tool afterward to drag the top and bottom of the rectangle off the screen).

2. Make a new layer and draw 4 equal-sized white rectangles at the top for link buttons (or draw however many buttons you need for your links). Double click the layer to get to the layer style. Add a color overlay with 37c0ec, add a basic black to white gradient set on soft light, and add a 1px black stroke.

3. Make a new layer, opacity 40%, and draw two white rounded rectangles, one for the logo and one for the content (see picture for detail). Make another new layer (opacity 20%) and draw floral shapes with the custom shape tool on your link buttons.

4. Make two new layers both 40% opacity and draw a straight line on one between your two rectangles (it's just a little extra decoration, so if you really want you can skip it) and another floral shape on the other. Make a new layer with some plain white text in Georgia size 18pt for your copyright at the bottom.

5. Now we're going to add the logo and the links. Use 36pt white Georgia for the links and 48pt for the logo. Starting with the logo, type it how you want and then add these layer styles (the blue in the gradient is 18a1cd):

And then for the links, just type them with spaces in between and add this layer style:

6. Now all that's left is to slice and code the layout. Grab the slice tool and select a box around each separate component- each link, the logo with the top curve of the box, the box itself, and the copyright with the bottom curve of the box. Then zoom in and use the slice select tool to make sure all the slices are lined up correctly and don't fall short or overlap. It should look like this:

When you go to save, go to save for web and save as if it is a single image (make sure all the slices are selected). They will automatically save as separate images, most likely in a new folder called 'images.' Click here to see the finished layout. Here is the code you can use for this layout (but replace the image names with your own):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Welcome to My Website!</title>

<style type="text/css">

body {
text-align: center;
font: 12px helvetica;
}

#container {
margin: 0px auto 0px auto;
width: 800px;
background-image: url('background image');
}

#content {
float: left;
text-align: left;
padding-left: 50px;
padding-right: 50px;
background-image: url('background image');
}

</style>

</head>

<body>

<div id="container">

<a href="#"><img src="link one" style="border: 0px" alt="" /></a><a href="#"><img source="link two" style="border: 0px" alt="" /></a><a href="#"><img src="link three" style="border: 0px" alt="" /></a><a href="#"><img src="link four" style="border: 0px" alt="" /></a><img src="logo image" style="margin-top: -3px" alt="" />

<div id="content">

<h2>Page Name</h2>

text here

</div>

<img src="copyright image" alt="" style="margin-bottom: -3px" /> </div>

</body>
</html>

Navigation

Affiliates

Blue and Brown Layout