PS web design tutorial I-create a stylish and colorful WordPress layout in Photoshop

As the coders, the basis of the artist is weak. We can refer to some mature web page PS tutorials to improve our design capabilities. To apply a sentence, "Three Hundred Tang poems are carefully read, and no poems are written ".

This series of tutorials come from the PS tutorials on the Internet, both of which are foreign and all in English. I try to translate these excellent tutorials. Due to the limited translation capabilities, the translation details are still to be elaborated.

 

Conventions:

1. The software in this article is Photoshop cs5

2. The original tutorial was in English. On the basis of the re-creation, I cut the Chinese version of the diagram again.

3. Some operations in the original text do not provide parameters. I tested some parameters repeatedly and displayed them in red. Some Incorrect parameters are displayed in red.

For example: (231,), indicating that the coordinates in the upper left corner of the rectangle are (), in width, and 77 in height.

For example: (90,22) indicates that the coordinates in the upper left corner of the rectangle are (90,22 ).

4. At the end of the tutorial, I will attach my own experiences. Some are Optimization of some steps in the tutorial.

 

Next, this tutorial is used. Use sentence-by-Sentence Translation.

 

Hello and welcome to another tutorial here on trendytuts.com. for today I will create a trendy and colorful WordPress layout in Photoshop. if you're thinking to redesign your blog, you can follow this tutorial. I will try to explain step by step how you can create a similar WordPress layout in Photoshop.

Hello everyone, welcome to trendytuts.com to visit this tutorial. Today I will use Photoshop to create a stylish and colorful WordPress layout. If you want to redesign your blog, follow this tutorial. In Photoshop, you can create a similar WordPress layout.

 

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML.

Note that in this tutorial, I will only explain how to design the layout in Photoshop, but I will not explain how to convert the PSD to XHTML.

 

To create this tutorial I have used:

• The basic tools from Photoshop (rectangle tool-mostly)

• Some vector icons from our free pack

In this tutorial, I used:

Basic Photoshop tools (mostly rectangular tools)

Some of our free vector icons

 

Let's start the tutorial. Open phootshop and create a new document. dimensions: 1020 x 1710px

Let's start the tutorial. Open Photoshop and create a new document. Dimension: 1020 x 1710px

 

Select paint bucket tool and fill your document with # d9cb9e.

Select the paint bucket tool and fill your document with # d9cb9e.

 

Step 1-creating the top area

Select rectangle tool create this 2 rectangles. for the rectangle on the back I have used this color: # d9b94c and for the top one I have used this color: # fed95d, then with type tool I will write "trendytuts" and I will apply this layer styles:

Step 1: Create a top area

Select the rectangle tool to create two rectangles. Rectangle behind (90,22, 231,77), color: # d9b94c; rectangle before (, 38, 231,77), color: # fed95d. Use a text tool to write "trendytuts", and then apply the layer style as follows:

 

Here's my result for logo:

This is my logo:

 

Next on the right side I will create the search bar. select rectangle tool and create 2 similar shapes. dimensions 324x24px. for the back one I have used this color: #455352 and for the top one, this color: #738483.

Next, I will create a search bar on the right. Select the rectangle tool to create two rectangles. The size is 324x34px. The rectangle behind the rectangle (530,54), color: #455352; the rectangle before the rectangle (738483), color.

 

Having rectangle tool selected I will create again 2 more shapes. dimensions: 51x34px. for the back shape I have used this color: #962418 and for the top one, this color: # dc3522. with type tool I will add some text, and here is my result for the search bar

Use the rectangle tool to create two rectangles with the size: 51x34px. Rectangle behind (962418), color: #; rectangle before (, 60), color: # dc3522. Use a text tool to add some text. below is what I do in the search bar.

 

Step 2-creating the navigation

First I select rectangle tool and I will create this 2 shapes. dimensions: 949x54px. for the back shape I have used this color: #738483 and for the top one: #374140. for the top one I will apply this layer styles:

Step 2 -- create navigation

First, I select the rectangle tool to create two rectangles. Size: 949x54px. The rectangle behind the image (43,155); color: #738483; the rectangle before the image (36,162); color: #374140. Apply a layer style to the front rectangle: color in the image: #858585.

 

Next I will select rectangle tool and I will create this red shape: # dc3522

Next I will select the rectangle tool to create a red rectangle (86,170,136, 68), color: # dc3522.

 

Then I will select pen tool and I will create this triangle (in order to create a nice 3D effect for our red shape). Color use for this triangle: #962418

Then, select the pen tool to create a right triangle with color: #962418 (to make our red rectangle have a good 3D effect ).

As shown in:

 

With type tool I will add the links for navigation. Here is my final result:

Use the text tool to add the text of the navigation link. Is the final result:

 

Step 3-creating the featured Area

First I will select rectangle tool and I will create this 2 shapes. the first one (the bluish one) it will be used for featured area and the second one (white one) will be used later for the content area.

Step 3-create a special region

First, I will select the rectangle tool and create two rectangles. The first (the light blue (#3e5662) will be used in the feature area (60,260,925,328), and the second (the white one (# dfdccd) will be used in the content area (60,588,925,973) later ).

 

Next on the top of our bluish shape I will create another one. Dimensions 925x328, color: #567989, I will apply this layer styles, also:

Next, on the light blue rectangle on the top, I want to create another rectangle (37,283) with a size of 925x328, color: #567989. I will add the following layer mixed Style

 

You shoshould have something like this:

You should do the following:

 

Next on the left side I will add an image and with ellipse tool I will create 3 circles at the bottom. basically we will integrate a jquery slideshow when we will code this template in XHTML. I remember you that you can download this template and you will be able to acces the PSD to XHTML tutorial only if you will become a premium member.

Next, add an image on the left and create three circles at the bottom using the elliptic tool. Basically, when we encode this template to XHTML, we will use jquery for slide display. I allow you to download this template. When you become a senior member, you can get a tutorial on converting the PSD template to XHTML.

 

Because this will be a Wordpress blog, we will need to create a sidebar also. we will create them as usual, on the right side. select rectangle tool and create a similar shape. dimensions: 275x400px, color: # b1ac2a, then apply this layer styles:

Because this is a Wordpress blog, we need to create a sidebar. We will create them on the right as usual. Select the rectangle tool to create a rectangle (665,226) with the size: 275x400px and color: # b1ac2a. Apply the layer style. The color in the image is # e4e041.

 

My result so far:

Results so far:

 

Next with pen tool I will create a triangle to have a nice 3D look. I have used this color: # define f1b

Next, use the pen tool to draw a triangle in order to have a good 3D appearance. Color: # 127f1b

 

I will select rectangle tool and I will create a yellow rectangle. Color: # fed95d

I used the rectangle tool to create a yellow rectangle (650,244,283, 45), color: # fed95d

 

And again with pen tool I will make a triangle to create a nice 3D look. Color used: # 9d873e

And use the pen tool to draw a triangle again to achieve a good 3D appearance. Color: # 9d873e

 

With type tool I will add the text and some banner ads (because this area is for advertisment)

My final result for featured area:

Use text tools to add text and some banner ads (because this area is for ads)

The final characteristic areas are as follows:

 

Step 4-creating the content area

First I will select rectangle tool and I will create this shape. dimensions: 925x0000px, color: # ece9df

Step 4-create a content area

First, I will select the rectangular tool to create a rectangle (37,626 ). Size: 925x0000px, color: # ece9df

 

With rectangle tool I will create this red shape. dimensions: 606x45px, color: # dc3522

Use the rectangle tool to create a red rectangle (17,654 ). Size: 606x45px, color: # dc3522

 

As usual, I will select pen tool and I will create again a nice 3D look. Color used for this shape: # 9a291c, then with type tool I will add the title:

I used the pen tool to create a new 3D appearance. Color: # 9a291c, and then use the text tool to add the title:

 

With rectangle tool I will create another one rectangle over the red shape. dimension: 178x39px, color: #374140

Use a rectangle tool to create another rectangle (426,669) before a red rectangle ). Shape: 178x39px, color: #374140. And add the corresponding text.

 

Then I will add an image and with type tool I will add some text

Then I will add the image and use the text tool to add the text

 

At the bottom of the article with rectangle tool I will create a shape and with pen tool I will create again a nice 3D look. Over this button with type tool I will write "see more"

At the bottom of the area, create a rectangle (530,988, 37), color: # dc3523, and use the pen tool to draw the shadow. Color: # 9a231b to achieve a good 3D appearance. On this button, use a text tool to write "see more"

 

On the right side I will create a sidebar again. I will use the same steps used to create the sidebar on featured area. I will use again rectangle tool (to create the horizontal and vertical rectangles) and with pen tool I will create again a nice 3D look.

Create a sidebar on the right. The steps are the same as creating the sidebar on the Feature Area. Use the rectangle tool again (to create a vertical rectangle (665,626,275,440), color: # d9b94c, stroke: # e4e041; and horizontal rectangle (650,654,283, 45), color: #918d22 .) And use the pen tool to create a 3D appearance, color: # 5e5a1a.

 

With some image and type tool I will add the content for the sidebar.

Some images and text will be added to the sidebar of the content area.

 

In the same way I will create another post on our WordPress layout and at the bottom I will create a pagination

Here is my final result for the content area:

Create another content area on the layout and create a page at the bottom in the same way (the color of the page: # d9b94c, #374140 ). Add a triangle shadow on the left of the sidebar on the right. Color: #737029.

Here is the final result of my content region:

 

Step 4-creating the footer

Well to create the footer it's quite easy. first I will add the logo (I have duplicated it) then on the right side, using rectangle tool I will create 2 shapes and using some icons from the free pack I will add a Twitter and an RSS icon.

Here is my final result for footer

Step 4-create a footer

It is easy to create a footer. First, I will add the logo (the logo previously made above), create two rectangles on the right side using the rectangle tool (copy the two rectangles in the logo area directly, and then move them to the appropriate position on the right side, change the width to 250%, followed by the rectangle color: #3e5662; front: #557989 .) And use some icons from the free package, I add a Twitter and RSS icon.

Here is my final footer

 

The final layout is as follows:

 

TIPS:

1. Adjust the size and position of the rectangle accurately in PS.

This is a confusing place. It seems that the size of the rectangle cannot be adjusted accurately in PS. In the free deformation tool, the width and height are adjusted in the form of percentages. In fact, this is to let it hide, In the width and height of the text box directly enter the exact value, but to carry the unit PX. If there is only a number, no unit, and the default unit is percentage, this is a tragedy.

For example, if you want to precisely adjust the rectangle (,), you can adjust the rectangle as shown below.

 

2. Simplified logo creation for this tutorial

In this tutorial, the logo is made of two rectangles (in this tutorial, there are several places for two similar rectangles ). In fact, you only need a rectangle and add a projection to achieve the same effect.

A. Use a rectangle tool to add a rectangle (, 38,). Color: # fed95d

B. Add the following style to the rectangle and the color of the projection: # d9b94c

The finished product is as follows: is it the same as the logo in the tutorial after adding the text.

 

3. Create a triangular shadow

In the teaching process, the shadows of triangles are repeatedly mentioned to achieve a good 3D effect. In the teaching process, triangle shadows are basically made using pen tools. This is a question of the benevolent and wise. Some people are very familiar with pen tools and do not feel any difficulty at all. Some people (I am also) cannot use the pen tool, and I will find another convenient triangle shadow.

A. For example, use the rectangle tool to create two rectangles.

B. Click the red layer in front of the dot, CTRL + J, and copy the layer.

C. Change the copied layers freely, as shown in:

D. Move the changed layer to the back of the black layer and change it to a dark red color. As shown in:

It is comparable to the shadow effect in the tutorial.