Hey there! Today we're gonna fire up Photoshop once again and focus on making ourselves a nice, simple, yet attractive portfolio layout!
Now before I do start the tutorial, i'd like to say that you could most probably easily create most of this layout in HTML.
However, i'm here to bring you Photoshop tutorials, to get you working in Photoshop, to get you to get new ideas and what not. So yes, it's possible to do this layout in HTML, but you can think of it this way. By creating it in Photoshop, you can easily change colours, see what fits what, basically experiment - quickly and easily! That's why i'm writing tutorials, so you can experiment and come up with your own ideas.
Okay that's that done, now let's hit Photoshop.
Start off by creating a new canvas, 800x600 pixels. I like to use this size for layouts as it will probably fit everyone's screens.
Go ahead and fill in the layer with a nice, warm red: #630505
Create a new layer and name it layoutbg. Select the rectangular marquee tool and use these settings.
Fill in the selection in white and deselect. Now place it in the centre of the canvas, fire up blending options and add a drop shadow.
We're gonna start bringing in the elements in now, create a new layer, name it logo. Select the rectangular marquee tool and use these settings.
Fill in the select with a light grey, i used #e8e8e8. Deselect and bring it to the centre of the canvas, then move it up till it is exactly 10 pixels from the TOP of the layoutbg. It should also be 10 pixels from the left and right, too. Take a look at mine.
Create a new layer, name it menu, and select the rectangular marquee tool, use these settings.
Fill the layer in the same colour as the logo, i used #e8e8e8. Deselect, move it to the centre and bring so that it is 5 pixels UNDER the logo layer. Look at mine.
Create a new layer, name it content. select the rectangular marquee tool, and use these settings.
Fill in the same colour again, deselect, centre and move it 5 pixels UNDER the menu layer. Look at mine.
Create a new layer, name it links. Again, select the rectangular marquee tool, and you guessed it, use these settings.
Fill it in, deselect, centre it, nudge it 5 pixels UNDER the content layer. Look at mine.
You'll be glad to know that we're finished with the layout elements hahaha! Now we'll start giving this fella some style hmm?
Select your links layer, and go to blending options, we're gonna give it a gentle lil stroke.
Now copy the layer style and paste it to your content, menu, and logo layers. You should have something which looks like this, hopefully.
We're gonna work on the logo now. I've simply used a sample picture from Windows Vista. You can download it here.
Open up the picture, now select it all (Ctrl+A) and copy it (Ctrl+C). Now go to your logo layer, and Ctrl+Click it in the layers palette. This should create a selection of your logo layer.
Now paste (Ctrl+V) your picture, it should be perfectly inside the logo layer now. You'll need to resize it (if you wish). Hit Ctrl+T and, while holding SHIFT, grab a corner and scale it down to your liking. You can then use the move tool (V) and move the picture around in the logo frame.
You can now add your little details to your logo:- Website name, tag line. We're done with the logo now, this is what i got after i resized, moved and added text.
Now we're gonna work on that menu. Nothing much going on here, i decided to keep it simple, you can make it more complex if you like.
Hit the text tool and start typing your menu links, i used the font SILKSCREEN. I left 5 spaces between each links, and centred them. I coloured the links in a lighter red #a34242
Now let's seperate those links. Create a new layer and name it sep. Zoom in to the menu, and get ahold of your pencil tool, set it to a 1 pixel brush.
Create a line, leaving 1 pixel from the top and bottom of the menu. Now duplicate (Ctrl+J) that layer and move it 1 pixel to the right of this one. I coloured my duplicate white so that you can see it.
Stay zoomed in, go to blending options for your original sep layer, we'll add a colour overlay.
Use these settings.
Then do the same for the duplicated layer and use these settings.
Merge the two layers (Ctrl+E), and add a layer mask to this layer.
Select the gradient tool, and set your foreground colour to white. Use these settings.
Now you should still be zoomed in, memorise the location of your sep layer, and fill in the layer mask with black. You'll now have it hidden. Use the gradient tool, and now with your gradient, click around the centre of the sep layer and drag your gradient up to about the height of the menu layer. You should now have faded edges on your sep layer.
You can apply the mask once you're happy with it, now duplicate your sep layers as many times as you need it to seperate your links. This is what i did, you can use this to get an idea of what to do.
It's up to you now, you can fill in the the content area if you wish to make it look good and to get an idea of what it could look like, or you can skip it. This is my content area.
Actually, there's not much more to explain on the links area either! I just put two headlines saying "quick affiliates" and "advertisements" and created some fake affiliate links, please note Aqua Hosting is fictional haha! Don't go looking for this host.
Well that's basically it! Rather easy for something which looks nice and clean, actually, we'll add a last finishing touch.
Create a new canvas, with a transparent background, size 4x4 pixels, not a layer!
Zoom in to the max, select your pencil tool with a 1 pixel brush size. Now draw this (if you can't see, it's a diagonal line in the centre of the canvas)
Go to Edit > Define Pattern. Give your pattern a name and close this canvas.
Now go to your background layer, and just above it create a new layer called "bglines". Set the opacity to 10%.
Now grab your paint bucket tool, and at the top select pattern, then select your pattern.
Now click inside the canvas, and voila! You've got a nice sleek background!
Ahh! While writing this tutorial i totally forgot about this next step! It is optional but it will make everything look sleeker.
Look at all the corners of your logo, menu, content, and links… What do you see? Do you see that there's a little pixel missing at each corner? That's one of the problems of stroke, so we're gonna remedy this right now!
Create a new layer, set your foreground colour to #dad9d9 and pickup your pencil tool, set it to a 1 pixel brush. Now zoom in on the edges of the logo and go to the left corner. You'll see the missing pixel, simply click on it with your pencil tool to fix it. Here's the corner without and with the pixel. Just do this for all corners, and you're done!
Without
With
This is my final result.
It was a rather simple layout to do, but i hope that you enjoyed it and that it can get you experimenting! See you for more adventures! Haha.
