In this entry-level web design lesson, you will learn how to create a web portfolio layout that has a fixed wooden background. We will also use additional brushes to place accents in the design.
Final result:
Resources
Wood texture
Myriad Pro Font
Brushes FlightOfGrey
Social Network Icons
Step 1 – Creating a Document
Create a new document with dimensions of 1024 x 912 pixels
Step 2 – Adding Background
Add a wooden texture to the background. I used this wood grain texture. Resize the texture using Transform (Free Transform (Ctrl + T)), so that the texture is the size of the canvas.
Step 3 – Creating a background for the title
Create a new layer. Using tool Rectangular area
(Rectangle Marquee Tool (M)) create a selection and fill it with black (# 000000).
Step 4
Using the tool Polygonal Lasso
(Polygonal Lasso Tool (L)), make an uneven organic selection at the bottom of the header background to create ribbed edges. After you have made the selection, go to the menu Editing> Clear (Edit> Clear).
Step 5
Set the opacity of this layer to 85% to see the wood texture behind the header background.
Step 6 – Creating a site logo
For the name of the site we can use a simple text logo. I used the Myriad Pro font with white color (#FFFFFF) for the first half of the title and with green (# 93B19D) for the second half. Place the logo in the upper left corner of the canvas with the tool Move
(Move Tool (V)).
Step 7 – Adding Navigation
Now add some links to the right side of our header with the tool Horizontal text
(Horizontal Type Tool (T)). For the “Home” link, set the color (# D9D5BB), and for the rest (#DDCFAB). Place them as shown in the picture:
Step 8 – Creating an Active Navigation Link
The link “Home” will serve our layout as an active link that indicates the current page of the site where the user is located. Add a stroke behind it to give the link an even more active look. To do this, download the DeviantArt FlightOfGrey Stroke Brush Set Brush Set and install it. Of course, you can use your own brushes.
If you use the above brushes, look similar to the one shown in the image below. Create a layer under the link text layer, and then using the tool Brush
(Brush Tool (B)) with bluish color (# 355D63), draw the active link (see below).
Step 9 – Creating a Block Introduction
Take the same tool Brush (Brush Tool (B)) and select another brush from the same set. Set the Size (Master Diameter) to about 300px. Make sure the foreground color is black (# 000000). You can trim excess splashes with the tool. Lasso
(Lasso Tool (L)) and going to the menu Editing> Clear (Edit> Clear). You should have something like this:
Step 10
Now for the current layer add Color overlay (Color overlay) in layer styles
Step 11
Install a font similar to Helvetica to add the text “Introduction” and use the tool Horizontal text (Horizontal Type Tool (T)), with off-white color (# F1E6D8). You should have the following:
Step 12
It’s time to use the tool. Brush (Brush Tool (B)) again. Take the third brush from the FlightOfGrey set, make sure the foreground color is set to black (# 000000) and set the Size (Master Diameter) of the brush to about 400 px. On the new layer, draw a spot as follows:
Step 13
It turned out a little lighter than we would like. Therefore duplicate the layer several times (Ctrl + J) to darken the stain. Write a text inside this spot (I used a classic font).
Step 14 – Creating a Slider
The right side of the “Introduction” block will be a good place for the slider. I created a thumbnail image with a size of about 420 x 165 px, and then added External glow (Outer Glow) and Stroke (Stroke) in layer style. You can use the following settings in the layer style:
Step 15 – Adding Social Network Icons
So, it’s time to add social icons. Using the same brush that we used for the back of the heading in the “Introduction” box, add a black stroke, as shown in the figure below, using the brush a little more than before.
Step 16
In this step, add the icons themselves. You end up with something like the following:
Step 17 – Creating the “Latest Projects” Block
Make an area for the “Last projects” block under the “Introduction” block. To do this, use the tool to select Rectangular area (Rectangle Marquee Tool (M)). Create a rectangle similar to the following, and fill it with black (# 000000). Reduce the layer opacity to 85%.
Step 18
Add to layer External glow (Outer Glow) in layer style:
Step 19
Invent and create block contents similar to the following image. Sketch inside the block make 220px by 160px. The title color should be # C3E2E0, and the text description is white (#FFFFFF).
Step 20
The miniature looks a bit dull and boring, so let’s add Inner shadow (Inner Glow) and Stroke (Stroke) in the styles of the layer (use the settings as shown below) to give the sketches of the layer of the latest designs a border and some inner shadow.
Step 21
Now make two more blocks, duplicating the layers of the first, and then move the duplicated layers to the right with the tool Move (Move Tool (V)). This is what should happen:
Step 22 – Completing the creation of a simple footer
The final step is to add copyright, which is presented as a simple text footer. To make the text a little more noticeable on this wooden background, you can use the tool. Clarifier
(Dodge Tool (O)) to make the area brighter. The final version of the design with footer:
