Portfolio Design in Photoshop

Now that we have auxiliary lines, we can start working directly with the design. Create a new group called Top Nav, click Layer – New – Group (Layer – New-Group) or just click on the group icon in the lower part of the panel with layers.

Choose a tool Horizontal Text (Horizontal Type Tool) (T), select the Montserrat font, set the size to 20px and the color to blue # 075dfb, and type the name of your portfolio. Place it right next to the first vertical auxiliary line, leaving some space on top, in my case it is 40px.

After that, copy the layer by pressing Cmd / Ctrl + J, and move it to the right side of the document. Using the same tool, change the link to the links that you want to place in your portfolio. My example you see below.

Step 3

Collapse the Top Nav group by clicking the little arrow next to the group name, and create a new group called Featured.

Select Layer – New – Group (Layer – New – Group) or just click on the group icon at the bottom of the panel with layers. After that select the tool Rectangle (Rectangle tool) (U) and between the first and last auxiliary lines, draw a rectangle of 1000x574px.

Using the tool Move (Move tool) (V), move our shape 40px down from the navigation line so that there is enough space between them and it all looks balanced.

And now, on top of the rectangle, we need to put the real work. I used one of my previous snapshots on the Dribbble: Snapshot with the device. Select the image you like and drag it into Photoshop. Make sure the image is large enough to close the rectangle without scaling.

After dragging the image into Photoshop, position the layer with it over the layer with the rectangle, and holding Alt, move the mouse over the layer thumbnail, and you will see an arrow by pressing which you will create Clipping Mask in such a way that all objects inside the clipping mask will be located inside the part with the rectangle.

Fine! Now we need to create a shadow on the image so that the text that we place on top is readable.

Create a new Shadow layer by pressing Shift + Cmd / Ctrl + N, and create a clipping mask for it, as we did before. After that, select the tool Gradient (Gradient Tool) (G), and select from black to transparent. The gradient settings are shown below.

Holding Shift, drag the gradient from the bottom of the image to the top, and reduce the opacity to 65%.

A title is needed for our work. Choose a tool Horizontal text (Horizontal Type Tool) (T) and use the Montserrat font again, set the size to 40px, color #FFFFFF and write what you think will characterize your work in 3-5 words. Do not forget to leave space near your text so that everything looks balanced. For consistency, I left 40px on the left and bottom.

We need a “call to action” button so that the visitor can delve into our work. Choose a tool Rectangle (Rectangle Tool) (T) and draw a rectangle of size 212x46px. Place it on the right side of our image, as always leaving a space of 40px around (30px below, since we need to align it horizontally with the name).

Finally, select the tool again. Horizontal Text (Horizotal Type Tool) (T), set the color to black # 000000, and the size to 14px, and write what you would like on your button. Place the inscription inside the white rectangle and center it horizontally and vertically.

Step 4

Let’s add more of your artwork so that visitors can feel your style. Hide the Featured group by clicking the small arrow next to its name and create the group Work.

For examples of work, I used some of my pictures with Dribbble. After you drag your images into Photoshop, convert them into smart objects by right-clicking on the image and selecting Convert to smart object (Convert to Smart Object).

After that, hold down Cmd / Ctrl + T to resize images to 313×235 px and place in columns of two. Leave a space of 40px at the top and bottom, and 30px on the sides and between the images.

Step 5

We are done with the work. Quick, isn’t it? Hide the Work group and create a new Footer group. Take the tool Rectangle (Rectangle Tool) (U) and draw a large rectangle with the color # 075dfb, previously used by us so that it covers the entire bottom of the document. This will be the background for the lower header. Next, using the tool Move (Move Tool) (V) position it 40px below our images.

And now we need to fill our bottom header. Select tool again Horizontal Text (Horizontal Type Tool) (T), set the size to 16px and choose the color to white, write in BLOG and write below in links to blog posts. Arrange these inscriptions, leaving 70px above, making our lower header stronger and more independent.

After that, add more information that may be useful to visitors. I, for example, added links to social networks and the address. Make sure you leave enough space on the sides so that everything looks balanced.

We again need to create an action button so that the visitor can perform this action. Open the Featured group and find the layers with the button, hold down Cmd / Ctrl, click on the layers with the rectangle and text, and then Cmd / Ctrl + J to copy them. Move them to the Footer group and position them over the background. Use the previously created text, place it on a new button and edit it, and you’re done.

Finally, we need to add copyright in order to protect our work. Just use the previously created text, duplicate it, and change the copyright to anything. Place the text at 60px below the last text, and that’s it.


Hope you enjoyed this tutorial.

Author: photoshopstar

Like this post? Please share to your friends: