PS teaches you to design personal works with stylish timeline pages

First up Effect chart:

It's very stylish, isn't it, eh, let's start now.

Step 1

To create a new file, the parameters are as shown:

Step 2

Create a new guide to balance the vision. Position: horizontal 60px, vertical respectively is 20px,,50px,115px,230px,550px,570px,875px and 1180px, here is recommended that schoolmates use the artifact "guideguide", the concrete use the work moves: PS Reference line plug-in guideguide download and use instructions, very convenient.

Step 3

In order to ensure our design and orderly professional, we first create 3 layer groups, respectively named: Left column, Introduction, works. Usually do not pay attention to the norms of the students, gifted brother specifically to you and your team recommended "PS Etiquette Handbook"! Web designers must cultivate the skills of internal strength, but also an indispensable web design guide.

This is the end of your preparations.

Step 4

The sidebar shows us how to contact and navigate, let's build it.

Select the Rectangle tool, change the foreground color to #11171c, draw a 230x1320px rectangle in the layer group on the left column, move to the left edge, and close to the fourth guide line, as shown:

Step 5

Create a new layer group in the layer group on the left column, positioned above the rectangle, named Contour.

Then use the Ellipse tool, hold SHIFT, draw the 100x100px of the size, and move to the middle of the third guide line on the left, close to the horizontal guide, as shown:

Step 6

Now, listen to the command ^_^, find out the most handsome and bleached head of the computer, drag it in, press ALT, click the Circle, as a clipping mask, and move it to the right (see face) position.

Step 7

Change the foreground color to #FFFFFF, select the Type tool, choose the installed font, size 16pt, write your English name, move to the position of 25px under the Avatar, and make sure it is in the middle of the third guide line.

Step 8

Now add a personal introduction for yourself, the author uses a font size of 14pt, from the name of 20px, so that the interface seems to have a sense of breath.

Step 9

Great, now continue to create a new layer group under the layer group on the left column, named Social media. Drag the icon in the clip into the group, double click on the layer, color overlay--Select white. Copy the layer style to another icon.

The icon spacing adjusts to 10px, the entire icon's Layer group distance introduction 20px

Step 10

Select the line tool, the foreground color is white, the size is 1px, draw a line at 50px below the icon, length: From Edge to fourth guide line

For visual subtleties, adjust the opacity of the layer to 10%.

Step 11

Continue to create a new layer group named navigation. Drag the vector icon of the footage in, resize it to 13*16px, and name the icon work.

Double-click the layer, Color overlay: #d35136, Position: 40px below the line, close to the first vertical guide line.

Step 12

Use the 14pt size of text, write the work, or work, Position: The second guide line, horizontal direction and the icon alignment.

The foreground color changes to #424a51, continues the type tool type, the content rejoice, the size 14pt, the line spacing is set to 24pt, after completing this directory layer to move from "works" The 24px Place

Step 13

When clicked, we need to make the link brighter, so change the lastest text color to white.

Step 14

Drag the contact icon in, turn into a smart object, resize into 16x16px, color overlay #27b599, position in the directory 30px, close to the first guide line.

Step 15

Repeat the last step. The only difference is that the "about" text color is changed to #424a51

Step 16

Finally, the contact method is created. Icon dragged in, resize into 16x13px, color overlay #088ecc, the other ibid, the difference is "contact" the color of the words #424a51

Step 17

Now do the profile page and go back to the profile layer group.

Change the foreground color to #f7f7f7, creating a rectangle of size 320x1320px, close to the left and fifth guides.

Step 18

Change the foreground color to #e7e7e8, create a straight line, size 1px, place at the bottom, length to the fifth guide line, see figure:

Step 19

Now create the timeline, using the line tool, draw a vertical bar, size 3px, named timeline, Position: From left column 24px, top 30px

Step 20

The foreground color changes to #d35136, draws a circle, the size 11x11px, the position: from the left column and the top are 20px, see figure:

Step 21

Add a style to a circle layer with the following parameters:

Step 22

The foreground color is changed to #11171c, typing, rejoice, according to the author's example. Size 14pt, bold, Position: from the round and top are 20px.

Well, by this time you may notice the rhythm of the whole design, and how to balance the elements of the page is very important, this is the purpose of this tutorial.

Step 23

The front color changes to #5e5e5e, the color fades makes the page has the level sense, the reading is more easy.

Text changed to normal, not bold, the content of the introduction, spacing 18pt.

Enter two times, introduce customers, paste labels, bold text, so as to highlight, spacing ditto, as shown:

Step 24

Copy the circle, repeat the steps, and the position of the circle depends on the length of the later content.

Step 25

Last area, back to work layer group

Create a 610x400px size rectangle, the color can be put aside, position: close to the sixth Guide line and eighth, from the top of 20px

Step 26

Drag the material notebook PSD into the same shape as the rectangular cut template, adjust to the appropriate size.

Step 27

Copy the rectangle, move to the 20px from the first rectangle, and so on, plus the pictures in the footage, repeat the steps of the mask.

Step 28

Repeat the operations in the Introduction section, and remember to align.

Step 29

Drag the vector material refresh icon in, color overlay #a0a2a4, size 20x20px, Position: 20px from below the picture,

Step 30

Last step.

Typing, size 14pt, bold, input loading ... Move to the 10px from the icon, horizontally aligned. Then move the two layers together until you are in the middle of the guide line.

Now a work set timeline of the effect map has been completed, you can always hand over to the web designer, in the browser to implement it.

Category:

• PS Getting Started Tutorial