In this tutorial, you will learn how to create a portfolio website template specifically designed for publishing graphic artwork (for web designers, designers, or photographers). Portfolio design will be created in vintage style.
And now, before we start the lesson, look at the result.
. Document creation
Open Photoshop. Note that the author uses the CS6 version, but you can accomplish this lesson using earlier versions. Now go to the menu File – Create (File> New). Enter the document name, its width and height, and then click on the OK button.
Your document will automatically open after these actions. Press the key combination Ctrl + R, to show rulers for guides. Now go to the menu File – Save As (File> Save as) to save the file.
Creating a background
Activate the tool Fill (Paint Bucket Tool) to change the foreground color to # e3dfc6, Now click the tool to fill the background.
Use the tool Rectangle selection (Rectangular Marquee Tool) to create a gray stripe with color # 706d5c and with a size of 1000 x 52 pix.
Pull back from the right bar of 117 pixels and create another 1000 x 5 pixel bar.
Note: To make your work easier, use guides. They are very easy to create. Click on the ruler and without releasing the cursor, drag it into the document. Release the mouse button where you want to leave the guide.
Create a new group and name it – the links. Activate the tool Text(Text tool) to create labels for links in the menu. Font, use Helvetica Neue LT Std, with color # 706d5c and size 20px.
To simulate the guidance of the active link-inscription, the author created a red rectangle with color # d7281e, but only under one of the links (by the way, you can apply a color to the rectangle to your taste).
Use the tool Rectangle selection(Rectangular Marquee Tool) to create a rectangle. Fill it with background color # e3dfc6 and position below the red rectangle.
To search for the logo, the author used the Shutterstock paid resource. You can of course use your logo. Open it in Photoshop and drag it into the document with the portfolio or press the key combination Ctrl + C, to copy the logo and go to the main document, paste it using the key combination Ctrl + V.
Use the tool Ellipse (Elipse tool) to create a circle with the same size as your logo. For the circle, use the same color used for the background. # e3dfc6.
Place the circle layer in the layers palette under the logo, and press the key combination Ctrl + T, to activate Free transformation (Free Transform). In the top settings menu, instead of the value 100%, put 110% and press the key ENTER.
Go to the menu Layers – Layer Style – Stroke (Layer> Layer Style> Stroke), then increase the stroke size to 5 and change the color to # 706d5c.
To finish working with the logo, create a new layer and tool. Rectangle selection(Rectangular Marquee Tool) create a selection with a height of 117 pixels. Using tool Fill(Paint Bucket Tool) fill the selection with the background color # e3dfc6. This layer must be below the logo in the layers palette.
Ok, below you see the result of the finished title along with the logo.
Content of the left side
Activate the tool Text(Text tool) to create an inscription on the left side of the portfolio. The author used the following two colors for the text: gray # 706d5c and red # d7281e. The inscription will be with the same font as used for the menu, but with a size of 90pt.
Also create a text block below the main text using Times New Roman and Tahoma fonts with a size of 12 pt.
The content of the right side
To search for a vector image, the author once again used the paid resource Shutterstock, and of course you choose an image that suits your portfolio. Copy and paste it into your document. Change the height and size relative to the number of lines of text.
Here is the result at the moment.
Now you need to create a separator bar under the content. Duplicate the 1000×5 pixel bar we created earlier, then place it under the content.
The author again used his first vector document and copied a small rocket with a circle from it, then inserted this image into the center of the document with the portfolio, as shown in the screenshot below.
Remember the method of how to place an element in the center of the image. To do this, press the key combination Cltr + A, a selection will appear around the entire document. Now activate the tool Move (Move tool) and click on the icon Alignment centers on horizontals (Align the centers on the horizontal direction), which is in the options bar at the top of the program.
Now add two layer styles to the logo: Color overlay (Color overlay) by putting color # e3dfc6 and Stroke (Stroke) with a value of 5 pix.
Result at the moment.
To create a footer, duplicate the first gray bar created earlier. Use the tool Move(Move tool) to move the copy to the bottom of your document. Also duplicate the red logo and place it at the bottom of the portfolio. Add layer styles to the logo Stroke (Stroke) with a value of 5 pixels and color # e3dfc6.
Use the tool Text(Text Tool) to create a copyright of your site to the left of the logo. The author used gray # 706d5c and red # d7281e for the inscription, as well as fonts Times and Myriad.
On the right side of the logo, re-create the menu with the links in the top one, as well as create labels for social networking links. Do not forget to leave some space to insert icons for social networks near their inscriptions.
Download Twitter, Facebook and Dribbble icons. Reduce the loaded icons relative to their text. Add each icon in the layer styles Color overlay (Color overlay) by putting color # 706d5c.
We are already done with the template! As the author and promised it was not at all difficult. Below you can see some ideas for creating other portfolio pages.