Another lesson in portfolio creation, friends, as more and more beginners regularly try to create their first website design. Today we will create an elegant portfolio layout in Photoshop.
- Download the archive with materials for the lesson
- Download PSD file
We begin our lesson on creating a model of an elegant portfolio!
Step 1
Create a new document and set the following dimensions for it: Width (Width) 980, Height (Height) 1606 pixels. Next, completely fill the canvas with the color # F1F1F1.
Step 2
Take Tool Rectangular area
(Rectangular marquee tool (M)) and select a rectangle 50 pixels high from the very top edge of the canvas; this will be your site header (header). Fill it with color # 212121.
Step 3
On the left side we will create our text logo. To do this, use the font Pacifico, size 39 points, color #ffffff.
Step 4
Next, double-click on the layer with the logo and in the dialog box that opens, select the item Shadow (Drop shadow).
Characteristics for the shadows (Drop shadow) should be the following:
- Blend mode (Blend mode): Multiply (Multiply)
- Colour (Color): # 000000
- Opacity (Opacity): 75%
- Angle (Angle): 138
- Check the checkbox Global coverage (Use Global Light)
- Distance (Distance): 5
- Swipe (Spread): 0
- The size (Size): 5
Step 5
On the right side we will draw our navigation menu. For it, use the font Arial Bold, size 14 points, color #ffffff.
Step 6
Next, double click on the layer with navigation and in the opened dialog box select the item Shadow (Drop shadow).
Characteristics for the shadows (Drop shadow) set the same as for the logo:
- Blend mode (Blend mode): Multiply (Multiply)
- Colour (Color): # 000000
- Opacity (Opacity): 75%
- Angle (Angle): 138
- Check the checkbox Global coverage (Use Global Light)
- Distance (Distance): 5
- Swipe (Spread): 0
- The size (Size): 5
Step 7
Now, create a new layer and name it, for example, “slide-bg” (slide background). Fill it with # F46554.
Step 8
Take the tool Area (horizontal line) (Single Row Marquee Tool (M)), draw a line on the border between the site header (header) and the “slide-bg” layer (slide background) and fill the created selection with # fa9588 color.
Step 9
Now, add the text to our homepage. For the main text we use the font League Gothic, size 83 points, color #FFFFFF, for text lower take the font Pacifico, size 42 points, color #FFFF.
Step 10
Apply Layer style (layer style) and put a tick next to the item Shadow (Drop shadow).
Characteristics for the shadows (Drop shadow) should be the following:
- Blend mode (Blend mode): Multiplication (Multiply)
- Colour (Color): # cf4a3a
- Opacity (Opacity): 75%
- Angle (Angle): 138
- Check the checkbox Global coverage (Use Global Light)
- Distance (Distance): 1
- Swipe (Spread): 0
- The size (Size): 1
Step 11
At this stage, we must place our images (take those that were used in previous lessons). Place them so that one of them is above the others (see screenshot below).
Step 12
For images from the portfolio is applicable Layer style (layer style) and choose already familiar to us. Shadow (Drop shadow).
Settings for the shadows (Drop shadow) set such:
- Blend mode (Blend mode): Multiplication (Multiply)
- Colour (Color): # 000000
- Opacity (Opacity): 75%
- Angle (Angle): 138
- Check the checkbox Global coverage (Use Global Light)
- Distance (Distance): 11
- Swipe (Spread): 0
- The size (Size): 29
Step 13
Take the tool Rectangular area (Rectangular marquee tool (M)) and create a selection about the size as shown in the screenshot below.
Step 14
Create a new layer, name it, for example, website-black and fill it with color # 212121.
Step 15
For the website black layer, apply layer style (layer style) and select first Shadow (drop shadow) and then Stroke (Stroke).
Characteristics for the shadows (Drop shadow) should be the following:
- Blend mode (Blend mode): Multiplication (Multiply)
- Colour (Color): # 8E8D8D
- Opacity (Opacity): 75%
- Angle (Angle): -90
- Uncheck the checkbox Global coverage (Use Global Light)
- Distance (Distance): 5
- Swipe (Spread): 0
- The size (Size): 5
Characteristics for Strokes (Stroke) should be the following:
- The size (Size): 3
- Location (Position): Inside (Inside)
- Blend mode (Blending Mode): Normal (Normal)
- Opacity (Opacity): 100%
- Type of fillings(Fill type): Colour(Color)
- Colour (Color): # 323232
Step 16
Next, we use the icons that we downloaded earlier. For headings next to the icons, use the PT Sans font, size 20 points, color #FFFFFF.
Step 17
For text layer, apply Layer style (layer style).
Settings for the shadows (Drop shadow) should be the following:
- Blend mode (Blend mode): Multiplication (Multiply)
- Colour (Color): # 000000
- Opacity (Opacity): 75%
- Angle (Angle): 138
- Check the checkbox Global coverage (Use Global Light)
- Distance (Distance): 5
- Swipe (Spread): 0
- The size (Size): 5
Step 18
Also, we need to add some text (translator’s note: can use for this the text generator lorem ipsum). As a result, you should have something similar to the screenshot below.
Step 19
After the website-black layer, create a new layer and draw a rectangle on it using the same tool. Rectangular area (Rectangular marquee tool (M)) and fill it with white (#FFFFFF).
Step 20
Next through Layer style (layer style) add stroke (stroke).
Parameters for Strokes (Stroke) should be the following:
- The size (Size): 1
- Location (Position): Inside (Inside)
- Blend mode (Blending Mode): Normal (Normal)
- Opacity (Opacity): 100%
- Type of fillings (Fill type): Colour(Color)
- Colour (Color): #dddddd
Step 21
Now, activate the tool Ellipse
(Ellipse Tool (U)) and holding down the SHIFT key, draw a circle, name this layer avatar-holder.
Select the image you want to use (for example, your photo) and place it above the avatar-holder layer.
Step 22
Right-click on the image and select in the menu that appears. Create clipping mask (create clipping mask) or simply press the key combination Ctrl + Alt + G.
Step 23
You should have something like this.
Step 24
Next, add a couple of lines of text. For it, use the PT Sans font, size 14 points, color black (# 000000).
Step 25
Now, we need to create a form for posting. Take the tool Rounded Rectangle
(Rounded Rectangle Tool (U)) and set a rounding radius of 5 pixels. Fill the shape with white (#FFFFFF).
Step 26
Take a picture from this tutorial (http://sanjaykhemlani.com/create-coming-soon-page-with-countdown-timer/) and place it above the rectangle layer. Next, right-click on it and select Create clipping mask
(create clipping mask).
Step 27
Now, using Layer style (layer style) apply Stroke (stroke) to our rectangle layer.
Parameters for Strokes (Stroke) install the following:
- The size (Size): 1
- Location (Position): Inside (Inside)
- Blend mode (Blending Mode): Normal (Normal)
- Opacity (Opacity): 100%
- Type of fillings(Fill type): Colour(Color)
- Colour (Color): #ededed
Step 28
Combine a layer with a rectangle and a layer with an image (Ctrl + G) and duplicate it twice. Then simply change the images and arrange the groups as shown in the screenshot below. For headings, use the PT Sans Bold font, size 14 points, color black (# 000000), for the category take the font PT Sans Italic, color # 868686.
Step 29
Next, we will draw the basement of the site (footer) using the same tool Rectangular area (rectangular marquee tool (M)) and fill it with the color # 212121. Now, draw the bottom of the footer and fill it with the color # 000000. Make sure you do it on a new layer. In fact, the basement should be divided into three columns.
Step 30
In the first column we add some text. For the title, take the PT Sans Bold font, size 14 points, color #FFFFFF. For the text itself, the PT Sans Regular font, size 12 points.
Step 31
For the next column, we will create a user image. Take the tool Ellipse (Ellipse Tool (U)), draw a circle and fill it with white (#FFFFFF).
Step 32
Next, add a photo and right-click on it. In the window that appears, select Create clipping mask (create clipping mask).
Step 33
Now, using Layer style (layer style) is applicable Stroke (stroke) to our user image layer.
Parameters for Strokes (Stroke) install the following:
- The size (Size): 3
- Location (Position): Inside (Inside)
- Blend mode (Blending Mode): Normal (Normal)
- Opacity (Opacity): 100%
- Fill Type (Fill type): Colour (Color)
- Colour (Color): #ffffff
Step 34
Group the layer with the circle and the layer with the image (Ctrl + G) and duplicate it three times. Then change the image. And you should get this second column:
Step 35
In the third column, we will have a newsletter section. Take the tool Rounded Rectangle (Rounded Rectangle Tool (U)) and set a radius of rounding 10 pixels. Fill the shape with black (# 000000).
Step 36
Create a similar rectangle with rounded corners on the new layer and cut off the left side from it by approximately 2/3. Fill the remaining right side with color # F46554. This will be our submit button.
Step 37
Via Layer style (layer style) add our button Internal glow (Inner Glow), Gradient overlay (Gradient Overlay) and Stroke (Stroke).
Internal glow (Inner Glow)
- Mode overlay(Blending mode): Screen (screen)
- Opacity (opacity): 75%
- Colour (Color): # f56856
- Method (Technique): Soft (Softer)
- Around the edges (Edge)
- The size (Size): 4
Gradient overlay (Gradient Overlay)
- For gradient, use colors from # d1220b k # ab1502
Stroke (Stroke)
- The size (Size): 1
- Location (Position): Inside (Inside)
- Blend mode (Blending Mode): Normal (Normal)
- Opacity (Opacity): 100%
- Type of fillings(Fill type): Colour (Color)
- Colour (Color): # 8f1202
Step 38
Here is such a button. You also need to add text in the input field. Font take PT Sans, size 13 points, color #FFFFFF.
Step 39
For the button itself, you also need to add text (for example, Submit), take the same font as in the previous step.
Step 40
For the button text, add Shadow (Drop shadow)
Settings for the shadows (Drop shadow) should be the following:
- Blend mode (Blend mode): Multiplication (Multiply)
- Colour (Color): # 000000
- Opacity (Opacity): 75%
- Angle (Angle): 90
- Uncheck the checkbox Global coverage (Use Global Light)
- Distance (Distance): 1
- Swipe (Spread): 0
- The size (Size): 1
Step 41
This is how our footer should be. In addition to all this, you can also add a text logo at the bottom left, and icons from various social networks on the right edge.
And here is our final result!
Our elegant portfolio layout is complete. We used various basic techniques and different approaches when working on it. I hope you have found something new for yourself while working on this layout and can use it in your personal projects.
