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.
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.
Open your Photoshop, select your canvas and set the size to 980px by 1392px.
Fill the background with the wood texture that you saved before we start. Duplicate (CTRL + J to duplicate) the layer to fill those background.
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.
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.
Go to Filter > Blur > Gaussian Blur and select 3.7% hit ok afterwards.
Hit Right Click > Stroke on the body layer and set your foreground color to #bf3d2b, size is 1px and hit OK.
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.
Type in the text, I use League Gothic 45pt. The first word was filled with #333333, while the second one is #bf3d2b.
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.
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.
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.
Here is the complete logo. Let’s move on to navigation, I use Arial Bold # 484848, all capital letters.
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.
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.
Moving on the content section, we filled the middle part with # b5804d and set the opacity to 59%.
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.
You should have the same as above.
Select Rounded Rectangle Tool (U) and set the radius to 3px and draw the shape on the top left of the content section.
Right click on that layer and select drop shadow, foreground is #adadad, distance and size is 1px.
On stroke, foreground is #9b9b9b and size is 1px.
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.
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.
Here is the finish design for that, pretty cool huh?
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.
Move it a little, remove the bottom part using Marquee Tool (M) and you should have something like this.
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!
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.
For the middle footer, put the twitter bird. Add some text and underline for the link.
Twitter bird drop shadow is #939393 and distance, size is 5px.
Duplicate the twitter bird, and add more text / tweets.
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.