Design Layout

Hey! Today is tutorial day. What we're gonna do today is pretty simple yet again, but you'll have created a nice and sleek web layout at the end of it all! So let's not waste more time, and get right into it!

As usual if you've read my other layout tutorials, we'll start with a new canvas, 800x600. Fill your background layer with a nice dark grey #121212. Create a new layer and name it layoutbg. Select the rounded rectangle tool and use these settings

Now click on your canvas to bring up the shape, and now right click inside it and select "Make Selection". Fill in the selection with a lighter grey #2a2a2a and deselect. Move it in the centre of the canvas so we're nice and comfortable.

Go to blending options and use these settings.

Create a new layer and name it content. Select the rounded rectangle tool and use these settings.

Click inside the canvas to bring up the shape and then right click inside it and choose "Make Selection". Fill it in with any colour and deselect. Go to the blending options for your content layer and use these settings.

Move the content layer to the centre of the layoutbg, and then judge it down so that it 10 pixels UP from the bottom of the layoutbg, here is a screenshot.

Create a new layer and name it button. Select the rounded rectangle tool and use these settings.

Click on the canvas, right click inside the shape, select "Make Selection", fill it in with white, deselect and move it to the top of the layoutbg layer. Now grab your rectangular marquee tool, create a selection and chop off the top of the button layer so that you have a straight edge at the top. Here is what you should have.

Go to the blending options for the button layer and use these settings.

You should have something which looks like this now!

Create a new layer, name it blob. Make white your foreground colour, and select the brush tool. Use a 100 pixel soft round brush.

Now Ctrl+Click the button layer, this will select it. Now you want to click once with your brush tool on your blob layer so that you have about a 1/4 or less of the brush inside of the button. It's up to your liking how much you want inside, but this is how i did mine. Deselect once you're done.

Now create a new group (little folder icon next to the new layer icon in the layers palette) and move the button and blob layers inside.

Now duplicate the group, and nudge it right a few times. What we're creating is the menu links, so you can create as many as you like but with a buttons 100 pixels wide i found 5 looks best, here's my result.

Now we're simply going to create the text for the links. I used the font Eras Bold ITC at a size of 12pt.

I used these blending options.

This is what i ended up with.

Now we're going to give a glow to the menu buttons, so create a new layer and name it glow. Place this layer behind the button groups. Set your foreground colour to #0653b2, select the brush tool and use a 35px round soft brush. Now, holding shift, draw a little line from left to right, which is a little less than the width of the button (Look at the screenshot below to get an idea of the length to draw it). Nudge it down behind the first button to fir your liking. Generally the higher it is the more the glow is strong.

Then simply duplicate them and nudge them to the right behind the other buttons (old shift and press the right arrow key while having the move tool selected to move the layer right 10 pixels)

This is what you should end up with after you've moved them behind the buttons, duplicated them and nudged them to the other buttons.

Now for the logo i simply used a custom shape, this is where you use what ever you like. I used these blending options for the logo.

For the logo text, i used the same settings as the menu links. Simply right click the layer and choose copy layer style then paste it on your logo text layer. Here's my logo.

Now we're just going to adjust the background, so create a new 4x4px canvas, not layer. Now grab your pencil tool, with a 1 pixel brush size, set your foreground colour to white, zoom in to the maximum and draw this.

Go to Edit > Define Pattern, and close this canvas. Go back to your layout, create a new layer, and place it just above the background layer, set the opacity to 10%.

Grab your Paint Bucket tool and select Patterns in the drop down menu at the top left, select your new pattern and past it on the canvas. You now have a nice background!

That's basically it! Now just add a little copyright/information line at the bottom and if you'd like you can also add some some fake content to see what it'd look like.

I added a plain box to the right which i created with the rounded rectangle tool and added some images, text. Here's my result!

I hope you enjoyed the tutorial and that it'll get you experimenting and what not! See you soon!