Final Product What You’ll Be Creating (Click to view full-size image)
In this tutorial we will create a web portfolio layout using Photoshop; everything will be done from scratch and some icons, and images from different resources. I hope you’re ready because these will definitely a great learning experience for all the newbie’s out there.
We will base our design from latest design trends in web design to avoid the worst web design trends with a use of images from famous Photoshop tutorials or articles that we will use.
Tutorial Assets
Before we start, we need to download everything that we need. The following resources were used during this tutorial:
- Leonidas Image (One of the artworks in King Leonidas of 300 Illustration Artworks and Fan Arts)
- League Gothic font
- Jigosoar Icons
- Twitter bird
- Elegant Themes social media icons
Once you installed the font in your computer, and saved all the images in a folder we can move on to the very first step.
Let’s begin.
Step 1
Open your Photoshop, select your canvas and set the size to 980px by 1392px.
Step 2
Fill the background with the wood texture that you saved before we start. Duplicate (CTRL + J to duplicate) the layer to fill those background.
Step 3
We will create the logo, on the very top left of your canvas draw a rectangle using Marquee Tool (M) and fill it with #bf3d2b, name this layer body.
Step 4
Duplicate the body layer name this one body-shadow. Fill it with # 484848, move body-shadow below by pressing the arrow down key. Next, CTRL + T right click select warp and drag the bottom up. See the image above.
Step 5
Go to Filter > Blur > Gaussian Blur and select 3.7% hit ok afterwards.
Step 6
Hit Right Click > Stroke on the body layer and set your foreground color to #bf3d2b, size is 1px and hit OK.
Step 7
Change the Opacity to 39% and this is what you should have.
Now, we created a new layer named inner-body and fill it with #ffffff.
Step 8
Type in the text, I use League Gothic 45pt. The first word was filled with #333333, while the second one is #bf3d2b.
Step 9
Next, grab your pen tool and draw a line above the logo. After that, right click > stroke, select brush and hit ok. Make sure you’re brush is set to 1px. Name this string.
Step 10
We will add a shadow, same with what we did with body-shadow duplicate the layer, move it below and hit Filter > Blur > Guassian Blur, same 3.7%. Make sure you name this string-shadow.
Step 11
For the life of me, I can’t find the same nail head image. Since I used this image on a client site before, I stock all the images that I used and re-use (a tip from a web designer). Go find some in Google, search for “nail head” anything will do though.
Make sure you cut everything and leave the head, place it in the middle of the string so it will look like its hanging. Create a nail shadow, same for the nail shadow, I bet you know by now how to do it.
Step 12
Here is the complete logo. Let’s move on to navigation, I use Arial Bold # 484848, all capital letters.
Step 13
For the navigation text drop shadow, set your foreground to #FFFFFF, distance and size to 1px. This will create a sunken effect on the text.
Step 14
I added a couple of text navigation, for the drop shadow effect right click on the homepage layer and select copy layer, now select the other layer and right click paste layer. This way you won’t have to do the drop shadow for each text, saves you time!
For the icons, I pick some of them from Jigosoar Icons (link is added in the tutorial assets above). You can pick whatever you think that fits them.
Step 15
Moving on the content section, we filled the middle part with # b5804d and set the opacity to 59%.
Step 16
On the very top of the content between the filled color and wood texture meet, select Single Row Marquee Tool (M) and draw the line. Create a new layer, name line-light fill the line using a brush foreground is #ffffff and another layer name line-dark foreground color for that is # ad8151.
Step 17
You should have the same as above.
Step 18
Select Rounded Rectangle Tool (U) and set the radius to 3px and draw the shape on the top left of the content section.
Step 19
Right click on that layer and select drop shadow, foreground is #adadad, distance and size is 1px.
Step 20
On stroke, foreground is #9b9b9b and size is 1px.
Step 21
Now duplicate (CTRL + J) the layer 2 times, select the two and move it below the first layer. Move them by 2px by pressing the down arrow keys on your keyboard.
Step 22
What we did is resize the last two layers, by pressing CTRL + T and resizing it from right to left by 1px, same with the left side.
Step 23
Here is the finish design for that, pretty cool huh?
Step 24
Grab the Leonidas image (That image is part of “King Leonidas of 300 Illustration Artworks and Fan Arts“) and set him at the center of the body background (just like the image below) and press CTRL + SHIFT + I and DEL to remove the excess of the image.
Step 25
Move it a little, remove the bottom part using Marquee Tool (M) and you should have something like this.
Step 26
Let’s add some text. The title is League Gothic 27pt, foreground is #bf3d2b. For the body text, Arial regular 12pt #333333.
That’s it! All you have to do is group the body layer CTRL + G and duplicate that folder (Right Click > Duplicate folder), insert the images that we downloaded and align them properly. When you’re done, let’s do the footer!
Step 27
For the footer, it is really simple. We added text on the left side, I use League Gothic for the title and arial for the body text. Color is #333333 and it has the drop shadow of the navigation, so copy the layer style and paste layer style on the title layer.
For the social media icons we use elegant themes social icons, we just align them properly. You can add as many as you want.
Step 28
For the middle footer, put the twitter bird. Add some text and underline for the link.
Step 29
Twitter bird drop shadow is #939393 and distance, size is 5px.
Step 30
Duplicate the twitter bird, and add more text / tweets.
Final Image
There you have it! Our Awesome Web Portfolio Layout using our best friend Photoshop, I hope you learned a few tricks and use it to be a better designer with better layout.
If you think you can do better or upgrade the layout, I am interested to see what you come up with. Please leave a link in the comments so we can see.
I was thinking of converting to HTML5 / CSS, if the demands are high enough I will post the second part.
Source File: Web Portfolio Layout (PSD)
You may want to play with the settings, tweak some designs or recreate something out of this so here’s the source file for this tutorial.
