Simple Portfolio Layout in Adobe Photoshop & CSS - Part 1

Welcome to the first tutorial of the desigN² website. In this first part of the tutorial I will teach you how to create a simple portfolio layout in Adobe Photoshop. In the second part I will teach you how to code the layout into CSS and HTML.

At first, open Photoshop and create a new document. Whenever I create a website layout, I use 1050px by 1050px as my width and height.


Choose two colors, and create a nice gradient as your background. If you can't find the 'Gradient Tool', click and hold the 'Paint Bucket Tool' icon on your toolbar. I used the colors #161616 & #969696



Now create a new layer, and rename it to 'content'. In this layer we will create the white content box. I always use the rulers (ctrl + r) to define the size. In my example the content box is 750px in height, and the width is 950px. I used the 'Rounded Rectangle Tool' with a radius of 10px for the content box. I also used the option 'Paths', because when you have your content box drawn out, you can right click it, click 'Make Selection', and fill it with a white color.



In the blending options (right click your 'content' layer) I gave the content box a 2px black stroke.



When you're done with your content (you can always experiment!) create a new layer and call it 'menu'. Now ctrl + click the layer thumbnail of the 'content' layer. This will load the selection of the 'content' layer. With your 'menu' layer active, use the 'Rectangular Marquee Tool' and the Alt key to contract the bottom of the selection. (While having the 'Rectangular Marquee Tool' active, push the Alt key, and your mouse will change.) You can always use a ruler to indicate how far you want to contract the selection. (See the picture below for reference if you don't know what I mean.)


Fill the selection with any color (make sure the 'menu' layer is selected!) and get to the blending options (right click the 'menu' layer). Give it a 2px black stroke and a gradient overlay. I used the colors #5d0000 & #a50000.


Create a new layer, and call this one 'footer'. Do the same thing as with the 'menu' layer, only this time contract the selection from the top. Again fill it with a color (make sure the 'footer' layer is selected!).

You don't have to create a new blending option for the 'footer' layer. Right click the 'menu' layer and click 'Copy Layer Style'. Then right click the 'footer' layer and click 'Paste Layer Style'. Now you're going to edit the blending options of the layer (right click the 'footer' layer). The only thing you need to change is the gradient overlay. Click on the reverse button next to the colors. That's it.



With the text tool, type an interesting 'My Portfolio'. Position it anywhere you like it, I placed it in the upper left corner of the content box. You can also type a slogan if you like to.


Type the menu items above the 'menu' layer. It doesn't matter if they're not aligned right, because they're only to show you how it will look, and we will not use them during the coding process.


Also type a small copyright text in the footer. It isn't necessary, but sometimes you have content on your site that you created, and it can (not will!) prevent people from copying it because you use copyright. Also type your name, e-mail and your phone number.


Go to the website Lorem Ipsum and generate 1 paragraph. Copy the text and paste it into Photoshop. This will be your content text.


I used a photo of the website to display recent work, but you can use something you created and paste it there. Type something like 'Recent Work:' or 'Latest Work:'.


Save the file as a .psd file. Save it into a folder that you can locate easily for the second part of this tutorial.


Greetz!

Nick Post
ADMINISTRATOR