Hey everyone, I apologize for how long it has been since the last tutorial, and I thank all those who signed up for the 2Photoshop feed and stayed patient! I am currently finished with school for the year and am planning to post more tutorials and articles in the next couple months!

With that being said, today we will be making a simple portfolio layout:

STEP 1: Open a new document 1024×768 px

I find that this size is good for starting a website design, however if you have other preferences feel free to change it.

Now fill your background or first layer with dark gray, I used #1e1e1e

STEP 2: Add pattern to background

Create a new layer, go to Edit>Fill and Use: Pattern. A basic pixel pattern often helps a layout look more interesting and dynamic. If you are unsure of how to do this please refer to one of the many tutorials on the subject, Pixel Pattern Technique.

I filled my layer with this pattern:

…which should give you a background that looks like:

STEP 3: Add top gradient

Create a new layer and select the gradient tool. Make sure your foreground color is black (#000000) and select the second available gradient in the drop down gradients.

Click at the top of your document, hold down and hold shift, move your mouse down around 1/5 into the document and let go. Then set the opacity of the gradient layer to 90%. Now you should have something like this:

STEP 4: Make content shapes

Select the Rectangular Marquee tool in your tools window

With the shape tool make 2 black wide rectangular shapes, they will be your navigation and footer areas. You want to make the navigation shape slightly larger than the footer since it should to be more dominant. Then make a larger gray rectangle for the content, use the color: #7e7e7e, and change the opacity of the shape to 30%. You can change the opacity through the layers pallet. You should now have something like this:

If you want to move the shapes around to match my result you can do so simply with the move tool.

STEP 5: Distort shapes

To add a little style and make your design more dynamic, we will distort the shapes. One by one, select each of the 3 shapes you have made, and go to Edit>Transform>Distort. Move the corners a little on each side to make it look more interesting, but make sure you do not distort so much that the shapes no longer overlap, make only subtle changes. Here is how my shapes turned out, since they are vector shapes, you can go back and distort again if you are unhappy and the quality of the pixels will not change.

Now duplicate the gray content shape, by selecting the layer of the shape and go to Layer>Duplicate Layer (ctrl+J). Change the opacity of the duplicated shape layer to 100% and its color to the color of your background, #1e1e1e. You can change the color of the shape by double clicking on the color block of the layer in the layers pallet.Lastly, in the layers pallet move this duplicated shape layer so it is just under the two black shape layers. This will ensure that the pixel pattern will not be visible behind the content.

STEP 6: Add navigation bar & links

Create a new layer and using the Rectangular Marquee tool, select a long and skinny rectangle in the lower half of your black navigation shape and overlapping on its right like so:

Then fill layer by going to Edit>Fill and choose any color. Make sure your shape is 3 pixels in height, if it is too large or small you can use the Rectangular Marquee tool to add or cut away from the shape.

Now select the Horizontal type tool and click on the left side of the navigation bar above the line you just filled in. Using the font “Verdana” bold and white, with size of 11, type out the six links you want to use. Between each link use 11 spaces. (You can move the text or change the spaces accordingly as you see fit)

To add arrows, select the Pen tool and create a small arrow shape pointing up, and hold the Shift key while you do it to ensure proper dimensions, make this shape on the left side of the navigation and right above the bar you just filled in. You want to align this shape in the middle under your text link. It does not matter what color this shape is.

(Zoomed in 300%)

In this tutorial, we have 6 total links in the navigation bar so we need 6 arrow shapes. Select the arrow shape layer in your layers pallet, duplicate it, select the move tool and move it to be in the middle right under the next link. Repeat this until you have an arrow under each link:

STEP 7: Stylize navigation

In the layers pallet, select ALL the arrow shapes as well as the filled in navigation line (hold Shift while you select the layers) and merge them into one layer by going to Layer>Merge Layers (ctrl+E). Now, while you have this layer selected, go to Layer>Layer Style>Gradient Overlay.

Change the angle of the gradient to 0, and click the gradient image to edit the colors. To make a rainbow gradient place these colors as I have done below:

You can use your color picker to pick the colors, but if you want the exact same result as I did, here are the details I used (NOTE: if you used different text for links you would probably want to play around with location of the colors to align properly):

Red #ef4833 Location: 0

Orange #f7911e Location: 11

Yellow #fff335 Location: 21

Green #49b749 Location: 40

Blue #00b4e5 Location: 58

Dark Blue #355ba9 Location: 76

Pink #c5197e Location: 100

Also, make sure to save this gradient so you never have to do this again by simply clicking “New” in the same window. Once you have done this, click OK, and once again OK. You should now have something like this: