In 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
Create a new document, with the following details: 1024×1110 pixels. This is the first step in creating our layout.
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
Add some dummy text in the header of the blue block, then add a white square box with the details indicated.
Add an image in that square box you have recently created.
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.
Now we must create 3 divisions, with the same styled text, and add 3 small, pixel-perfect icons.
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.
Add the same rectangle, with the same stroke effect, then add some dummy text under it.
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).
Make a copy of the latest rectangle and divisions and just change the text typed from “Talent” to “Assets”.
Make a small rectangle button and add a Gradient Overlay effect with the images stated on the image
Now add the stroke effect, with the color shown on the screenshot.
Copy that rectangle button created in the last 2 steps, then add some text for the both buttons.
For now, to increase the look of the zone shown on the image, we add 2 small icons for the “Assets” and “Talent” section.
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.
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.
Continue by adding a small grey bar then add a “Gradient Overlay” with the colors indicated on the screenshot.
Add dark grey-colored navigation and add some white dark shadow effect.
For each element of the navigation, add some small pixel-perfect icons
Create (by using the Pen Tool) a simple form which will be used for submitting text.
Add some dummy grey text, the posting time, and add 2 small icons + text which is identical to the color of the icon placed.
Create another, smaller bar, and add the followed “Drop Shadow” effect.
Add some 1 pixel stroke, with the color indicated on the image.
Add some grey text into the bar you’ve created last.
Create a small dark-blue colored rectangle, and add some Inner Shadow effect.
Continue by adding a “Gradient Overlay” effect, with the colors shown.
Latest step in order to create the button – add the indicated stroke effect.
Add some text, then add the indicated effect on the image.
Near the button created last, make a blue-colored square box.
Add some “Gradient Overlay” effect for the latest rectangle created.
Finish it by adding some 1 pixel stroke effect.
To increase the beauty of the grey rectangle, we have to add a small, but high-quality icon.
Now create a corner-rounded input field, with the details shown on the image, then add a vector “search” button.
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.
Now copy paste the area created in the previous step, by this, finishing the 2/3 part of our template.
Take a look at the theme progress so far
Create a grey bar, located on the top of the “sidebar”. Add the “Google Ads” text, because under it, a banner will be placed.
Make a gray overlay, then add the same photo, name, and information. Now add a blue rectangle with the “Inner Shadow” effect
Add some “Gradient Overlay” effect for the last rectangle.
Now make 3 divisions on the latest rectangle, and add three different icons, for each division created.
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.
Finish the template by making 2 more divisions (with text and icons), along the first div created.