Web 2.0 Professional Template

In this tutorial, we will learn how to create a web 2.0 style template. Since this is a learning lesson, we will have to deal with a very large number of PhotoShop functions. It may seem that this lesson is very large, but this is all due to the fact that everything is very detailed.

I guarantee that you will find the lesson easy and do everything as described here, just need to try!

This is what you should do at the end.

Lesson details:
Program: Adobe Photoshop
Version: CS4
Difficulty: Medium
Estimated lead time: approximately two hours

Materials for the lesson:

Step 1. In order for everything to be smooth and correct, we will use the 960s Mesh System (http://960.gs/),
When you upload files, open “960_grid_24_col.psd”.
We start by creating a layer with a background from the background, right-clicking on the background> From the background …,
name this layer “bg”.

Step 2. Since we will use the guides, we need to activate the display function Rulers (Ctrl + R) or View> Rulers.

Step 3. Set the border for the header area, draw a horizontal guide: Browse> New Guide, Position: 100.

Step 4. Create a title. Create a rectangular selection of 1020x100px. Click Shift + Backspace, to fill the color of this selection (you can choose any color).

Apply for this layer Layer Style> Gradient Overlay with the following settings:

Name this layer “header_bg”.

Step 5. Write the name of the website using the following settings:
Typeface: Rockwell
Font size: 30px
Inscription: Regular
Smoothing method: smooth
Color: Color does not matter, as we will apply a gradient overlay.

Apply to text layer Layer Style> Gradient Overlay with the following parameters:

Align our header with the background: select the layer with the header and the layer “header_bg” and click “Alignment centers vertically “.

Step 6. Write the titles of the navigation menu with the following settings:
Typeface: Arial
Font size: 20px
Inscription: Regular
Smoothing method: smooth
Color: #ffffff

Using the Tool Rounded Rectangle (U), create a shape approximately 65x35px in size and with a rounding radius of 5px,
(as long as you can fill it with any color).

Apply Layer Style> Gradient Overlay and Layer Style> Stroke

Before moving on to the next step, make sure that your layers are arranged exactly as shown in the image.

Step 7. It’s time to create an area for posting content. Set the horizontal guide, at a distance of 430px from the previous one.

Create a 1020x430px selection. and fill it with any color

Apply to this layer Layer Style> Gradient Overlay

Now let’s create a gloss effect! create a selection of 1020x120px, fill it with any color.

Layer Style> Gradient Overlay

Reduce the transparency of this layer to 40%.

Step 8. Let’s add some details! Using the Tool Rectangular area (M) create a selection of 1px, place it as shown below:

Select foreground color # acd86e, click on Shift + Backspace, to fill the selection.

You got great details.

We have created secondary elements. Make sure they have names, and group them together.

Step 9. In order to be very precise, draw two new guides, as shown below.

Write some greeting words using the following settings:
Typeface: Rockwell
Font size: 40px
Inscription: Regular
Smoothing method: Sharp
Color classification: # f4f4f4

I personally wrote: “Here is our brand new work. Oh Welcome! ”But we have to highlight the word“ Welcome! ”
Apply Layer Style> Gradient Overlay with the following settings

Now position the two horizontal guides as shown below.

Before proceeding to the next step, make sure that your text layers are arranged exactly as shown in the image.

Step 10. Let’s start by creating a selection of 250x150px (fill in any color), this will be our frame for the image

Name this layer “pic_holder” and align it as shown in the image above.
Apply Layer Style> Stroke

Let’s insert an image into our project, File> Place … and select an image. Name the layer “pic”, place it above the “pic_holder” layer. Right click on the “pic” layer Create Clipping Mask.

Step 11. Create a reflection for the image in the frame, duplicate the two layers “pic” and “pic_holder”.

Duplicate the two selected layers, Editing> Free Transform, and put “-” before the height value.

After selecting two duplicated layers, right click on the layer and select Convert to smart object; name this layer “shadow”. Place this layer below all as shown below.

Select the “shadow” layer and add layer mask .

Choose linear Gradient (G) Black to white, swipe from bottom to top.

You should have something similar!

Step 12. We have to add a description to our image. Create a 240x25px selection, and fill this selection: # 1a1919. This will be the background of the description.

Write some description with these character settings:
Typeface: Arial
Font size: 15px
Inscription: Regular
Smoothing method: No
Color classification: # 82aa48

Make sure the layers are the same as in the image below.

Step 13. Insert another image and apply the same style to it as to the previous image (Copy Layer Style> Paste Layer Style) and align it with the right side.

Make the central image a bit larger, so make the selection 340x200px in size, align it as shown below, and fill it with any color.

Apply to it Layer Style> Stroke, applying the following settings:

This is what should happen!

Make sure your layers are grouped. I personally created three separate groups (For the first, second and third images, respectively). That’s what happened with me.

Step 14. Let’s create a scroll button! Let’s start by creating an 50x50px ellipse using the Tool Oval area (M), and fill it with any color.

Add a Layer Style as shown below.

Using the Tool Arbitrary shape (U), create an arrow by applying the following settings to the layer:

You should have something like this:

Do not forget about the alignment of the guides.

Make a copy of the button and transfer it to the right side.

Step 15. Let’s take the main area. To begin, create a selection of 1020x815px

Choose in the color palette # e8e8e8 and press Shift + Backspace.

Using Area Tool (horizontal line), create a selection of 1 pixels, place it as shown in the image and fill it with white (#ffffff).

You should have a beautiful edging!

Step 16. We need to set upper boundaries in our area for content. Therefore, we will install a horizontal guide with a position of 50px.
Download the icon set: Basic Set – Pixel Mixer and after loading place it as shown in the image.

Position the new horizontal guide at a distance of 20px. Create a caption for the image using the following settings:
Typeface: Rockwell
Font size: 29px
Inscription: Regular
Smoothing method: No
Color classification: # 81aa48

Create two more guides.

Write text with parameters:
Typeface: Arial
Font size: 15px
Inscription: Regular
Smoothing method: No
Color classification: # 2f3235

Create 3 more horizontal guides.

Step 17. It’s time to create a button “read more“. Using the Tool Rounded Rectangle (U) create a rectangle with the size of 100x30px and a rounding radius of 5px. Fill it with any color.

Apply to the Layer Style layer.

Using the Tool Ellipse (U) Create a 15x15px shape and fill it with the color: # 4d4d4d. For vertical alignment, we use the function Alignment centers vertically, To do this, select a layer with a rectangle and a circle.

Type the “+” sign, fill it with white (#ffffff) and place it as shown below.

Write “read more” with the following settings:
Font type: Tahoma
Font size: 12px
Inscription: Regular
Smoothing method: No
Color: #ffffff

Apply to text Layer style> Shadow.

Step 18. To create a vertical dividing line, we will use the Tool. Line (U). Create two vertical lines next to each other, fill
their colors respectively: #ffffff – # b3b3b3.

Align the lines as shown below.

Do not forget about the structure of the organization of their layers.

Step 19. Make three copies of what we created in the previous two steps. This is what should happen!

Step 20. Let’s create a separator. Position the new horizontal guide 50px from the edge of the created “read more” button.

Tool Oval area (M)

Select foreground color black (# 000000), click Shift + Backspace. Name this layer “separator_bg”.

Make this image blurred. Filter> Blur> Gaussian Blur with a radius of 3px.

Select the layer “separator_bg” to make a rectangular selection, as shown below and remove the excess.

Add layer mask to the delimited layer. Tool Gradient (G) – black-white-black

Stretch with a linear gradient from the right to the left end of the separator.

Reduce the layer opacity to 50%.

Using the Tool Line (U), create two horizontal lines, place them next to each other, above the separator (“separator_bg”).
Fill them with # b3b3b3 – #ffffff respectively and add the same layer mask like the delimited layer.

Step 21 Let’s start working with the bottom part, position the horizontal guide 50px from our separator.

Add a header with these parameters:
Typeface: Rockwell
Font size: 30px
Inscription: Regular
Smoothing method: smooth
Color classification: # 81aa48

Position the two guides as shown in the image below:

Write text with these parameters:
Typeface: Arial
Font size: 14px
Inscription: Regular
Smoothing method: No
Color classification: # 505150

Place another guide at a distance of 160px

Step 22 Write a different title and text for it, using the same parameters that we used in the previous step.

Type a quote using the following font options:
Typeface: Arial
Font size: 200px
Inscription: Regular
Smoothing method: smooth
Color classification: # 505150

Reduce layer opacity to 50%

Write the words of the wise or your statement using the following settings:
Typeface: Arial
Font size: 14px
Inscription: Italic
Smoothing method: smooth
Color classification: # 81aa48

Step 23 Create a vertical separator bar: create two vertical lines next to each other, and fill them with the following colors: #ffffff – # b3b3b3.

Keep track of the location and organization of layers. Here’s what it looks like from me.

Step 24 Write another name as well as on the left (for example, I wrote “Our Team”).

Using Rectangle tool (U) create a 90x90px rectangle, and fill it with any color. Name this layer “photo1_holder”. This will be the frame for the photo of the team member. Apply Layer Style> Stroke. Use the following style settings.

Place a photo of the participant and name the layer “photo1”. Make sure the “photo1″ layer is above the “photo1_holder” layer. Right-click on the “photo1″ layer – Create clipping mask. You need something like that!

Step 25. Write a text about the participant using the following parameters:
Typeface: Arial
Font size: 14px
Inscription: Regular
Smoothing method: smooth
Color classification: # 7ba344

We will create the social group icon on our own! Let’s begin by writing the “t” character with the following font options:
Typeface: Pico Black
Font size: 30px
Inscription: Regular
Smoothing method: smooth
Color classification: # 2fcfff

Apply Layer Style> Stroke

Type “in”:
Typeface: Myriad Pro
Font size: 30px
Inscription: Bold
Smoothing method: smooth
Color classification: # 0081ac

Type “f”:
Font type: Klavika
Font size: 30px
Inscription: Bold
Smoothing method: smooth
Color classification: # 395796

Step 26. Create a copy of the photo of the participant. Select a layer with a photo. Layer> New Corrective Layer> Black and White.
Make sure the mark is “Use Previous Layer to create a clipping mask. “

Type the same text (social group icon) using the same parameters for the text, but changing the color: # 505150.

Thus, the photo and text will look black and white! Make two more copies of the black-and-white image and the gray text, place them in the same way as shown below:

Once you are done with the alignment, make four separate groups containing the participant’s photo and the text layers of our social group icon,
distribute them as follows.

That’s what happened with me!

Step 27. Before we get to work with the main content area, we will set some more boundaries. Create another pair of horizontal guides. Look at the image.

Make a selection of 940x70px in size, align it as shown below.

Fill the selection with any color and apply Layer Style> Gradient Overlay, Gradient blending options are shown below.

Create a 70x45px rectangle. Arrange it and apply the Layer Style as shown in the image. Name this layer “tw_bg”

Hide the “tw_bg” layer so that it does not interfere with your work. Create another 10x43px rectangle. Next go Editing> Transform> Slope. Set the following parameters:
X: 40px
Y: 1253px
V: -39

Name this layer “effect” and make the “tw_bg” layer visible.

Copy the “tw_bg” layer style and apply it to the “effect” layer.

Type “t” with the following font options:
Font type: Pico-Black
Font size: 35px
Inscription: Regular
Smoothing method: smooth
Color: will not matter, we are going to apply Layer Style> Gradient Overlay

Gradient overlay options

Step 28. Repeat step 20 to create a delimiter or copy it. Place it as shown below:

We need to make our rectangle of irregular shape. To do this, select the “tw_bg” layer and add a mask. Select the part of the rectangle you want to delete, select the foreground color to black (# 000000),
click on Shift + Backspace, to fill the selection.

Step 29. Write some text that explains with these font parameters:
Typeface: Arial
Font size: 15px
Inscription: Regular
Smoothing method: smooth
Color classification: # 222222

To align the text exactly to the green background layer, click Align Center Vertically

Step 30. Repeat step 27 to create something like the one below. Also create a rectangle, fill it with color # 334814 and reduce the layer opacity to 40%.

Apply to the rectangle more Layer style with the parameters below:

Now fill the inclined rectangle with a darker color: # 2a6788.

Write “t”:
Font type: Pico-Black
Font size: 35px
Inscription: Regular
Smoothing method: smooth
Color classification: # 2fcfff

Apply Layer Style> Stroke:

Watch for grouping layers for comfortable work with them.

Make a copy of the layer of the rectangle with the letter “t” and change the color of the overlap with the gradient to # 0080ab, and here with this color # 00526d fill the inclined rectangle.

Write the word “in” with these parameters:
Typeface: Myriad Pro
Font size: 35px
Inscription: Bold
Smoothing method: smooth
Color: White (#ffffff)

Create a third copy of the rectangle layer, change Gradient overlay (for a large rectangle): # 395796, and # 263e6f for the inclined.

Write “f” with these font parameters:
Font type: Klavika
Font size: 35px
Inscription: Bold
Smoothing method: smooth
Color: White (#ffffff)

Make the last copy. The color for the gradient of a large rectangle is # e8e8e8, for the inclined one: #cdcdcd.

Write the word “fr” with these parameters:
Font type: Frutiger Black
Font size: 35px
Inscription: Bold
Smoothing method: smooth
Color: f: # 0079d2 – r: # ff3093

Place each of the images in a separate group. Select all groups with these layers and click Distribute Left Edges (see below)

Step 32 Create a 1020x460px selection and fill it with any color (for now).

Apply to this layer Layer Style> Gradient Overlay, using the following settings:

You should have something like this:

Using the Tool Region (horizontal row) Create a selection with a height of 1 pixels and fill it with white (#ffffff).

Step 33 Create two guides, as in the image below:

Write a title with these font options:
Typeface: Rockwell
Font size: 30px
Inscription: Regular
Smoothing method: crisp
Color classification: # 7ea547

Write a subtitle with these font options:
Typeface: Arial
Font size: 15px
Inscription: Regular
Smoothing method: No
Color classification: # d3d3d3

Using Line tool (U) Create two horizontal lines next to each other, and fill them with these colors respectively: # 151515 – # 2f2f2f.

Arrange them as shown below!

Step 34 Create two guides, as in the image below:

Using the Tool Rounded Rectangle (U), create two rectangles 210x25px, corner rounding radius – 5 pixels, fill with color – # 141313,
Layer Style> Inner Shadow:

Write any text in these two rectangles:
Typeface: Arial
Font size: 15px
Inscription: Regular
Smoothing method: No
Color classification: # 7ea547

Create another rectangle just like above, but this time, its height will be: 110px. Also write text in it with the same font parameters. Make a copy of the button we created in step 17. Align it as shown in the image.

Step 35 Write another heading, place it to the right.

Apply fantasy and write some text under the heading.

Make two copies of the text.

Step 36 Repeat the previous steps, fill the entire right side with content.

Now your bottom should look like this:

Step 37. And so, we are almost done. Create another guide at a distance of 50 pixels from the edge of the button.

Create two horizontal lines and fill them accordingly: # 181818 – # 2f2f2f.

Write the copyright text:
Typeface: Arial
Font size: 15px
Inscription: Regular
Smoothing method: No
Color: White (#ffffff) – # 82aa48

Using the same font properties, write the navigation text:

Continue to monitor how the layers and groups are arranged; in me they look like this.

Conclusion
That’s all! We created a professional looking web 2.0 style template. You can see that the techniques used here are simple, but they lead to good results.

Like this post? Please share to your friends: