MyProfile – How to Design a Social Network Page

n this tutorial we are going to discuss and use Photoshop techniques and design a beautiful, attractive, stunning and well-designed social network page. This tutorial is perfect for people who are designing their own social network. At the end of this tutorial, you will have the confidence to show the world an awesome page.

Final Result Preview

Step 1

Create a new document, with the following details: 1024×1110 pixels. This is the first step in creating our layout.

Step 2

Add a simple, lighty-grey color on the background created. After this add a blue colored block, in the left side of the layout.It will be 1 of the 3 parts we will divide our theme into. Add a “Drop Shadow” effect with the following color: #0f4a68

Step 3

Add some dummy text in the header of the blue block, then add a white square box with the details indicated.

Step 4

Add an image in that square box you have recently created.

Step 5

Create a dark-blue small rectangle, then add a 1 px white line in the both ends of that rectangle. Add some more text in that rectangle, then add a simple white text called “Homepage” under that rectangle block.

Step 6

Now we must create 3 divisions, with the same styled text, and add 3 small, pixel-perfect icons.

Step 7

Add a dark-blue rectangle then add some white stroke to it (as shown in the image). Add the “You May Want to Contact Me” text with the same style and font. Add a light-blue square box and some contact details with the white-colored text.

Step 8

Add the same rectangle, with the same stroke effect, then add some dummy text under it.

Step 9

For the latest rectangle you have created, make a 1px line division, then add the “Talent” text and the number of points achieved (ex: 1234).

Step 10

Make a copy of the latest rectangle and divisions and just change the text typed from “Talent” to “Assets”.

Step 11

Make a small rectangle button and add a Gradient Overlay effect with the images stated on the image

Step 12

Now add the stroke effect, with the color shown on the screenshot.

Step 13

Copy that rectangle button created in the last 2 steps, then add some text for the both buttons.

Step 14

For now, to increase the look of the zone shown on the image, we add 2 small icons for the “Assets” and “Talent” section.

Step 15

Now you have to create another rectangle with the white stroke which is identical to the previous ones, just it doesn’t require any divisions. With a small white-colored font, add the basic copyright information.

Step 16

We have finished the 1/3 of our template, now, create a grey color which is about 3/5 of the whole space (as shown on image), then add the drop shadow effect.

Step 17

Continue by adding a small grey bar then add a “Gradient Overlay” with the colors indicated on the screenshot.

Step 18

Add dark grey-colored navigation and add some white dark shadow effect.

Step 19

For each element of the navigation, add some small pixel-perfect icons

Step 20

Create (by using the Pen Tool) a simple form which will be used for submitting text.

Step 21

Add some dummy grey text, the posting time, and add 2 small icons + text which is identical to the color of the icon placed.

Step 22

Create another, smaller bar, and add the followed “Drop Shadow” effect.

Step 23

Add some 1 pixel stroke, with the color indicated on the image.

Step 24

Add some grey text into the bar you’ve created last.

Step 25

Create a small dark-blue colored rectangle, and add some Inner Shadow effect.

Step 26

Continue by adding a “Gradient Overlay” effect, with the colors shown.

Step 27

Latest step in order to create the button – add the indicated stroke effect.

Step 28

Add some text, then add the indicated effect on the image.

Step 29

Near the button created last, make a blue-colored square box.

Step 30

Add some “Gradient Overlay” effect for the latest rectangle created.

Step 31

Finish it by adding some 1 pixel stroke effect.

Step 32

To increase the beauty of the grey rectangle, we have to add a small, but high-quality icon.

Step 33

Step 34

Now create a corner-rounded input field, with the details shown on the image, then add a vector “search” button.

Step 35

Add a square image which is in size about 75×75 pixels. Now add the name of the person who has posted news, and also the time when the data was posted. Under this information, add some dummy text.

Step 36

Now copy paste the area created in the previous step, by this, finishing the 2/3 part of our template.

Theme Overlook

Take a look at the theme progress so far

Step 37

Create a grey bar, located on the top of the “sidebar”. Add the “Google Ads” text, because under it, a banner will be placed.

Step 38

Make a gray overlay, then add the same photo, name, and information. Now add a blue rectangle with the “Inner Shadow” effect

Step 39

Add some “Gradient Overlay” effect for the last rectangle.

Step 40

Now make 3 divisions on the latest rectangle, and add three different icons, for each division created.

Step 41

Add a 1 pixel white colored line, which will be a division between elements. Under the div line, add some dummy text which is supposed to be data, information etc.

Step 42

Finish the template by making 2 more divisions (with text and icons), along the first div created.