Total Followers 132,503
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.
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.
Get The Only Freelancer crash course you will ever need to read!
Monday, January 23rd, 2012 13:11
can you supply the PSD file for download?
Saturday, July 9th, 2011 22:15
Is there no PSD to go along with the tutorial?
Friday, July 8th, 2011 22:46
Very informative. Do you have suggestions for a good CMS for Social Networking ?
Tuesday, May 3rd, 2011 00:20
Incredible tutorial.
How can I get access to the psd file?
Thanks!
Monday, May 2nd, 2011 17:35
Nice tutorial – can you supply the PSD file for download?
Tuesday, April 26th, 2011 13:04
Very informative tutorial and also the look is clean and awesome. I want to convert it to HTML. Can anyone help me how can I convert it to HTML?
Friday, April 22nd, 2011 08:55
Well It would be Interesting to get the same on in html5 Css3, would be waiting for such a tutorial
Thursday, April 21st, 2011 11:30
Great blog post and very comprehensive. It’s those little photoshop techniques that just add that extra little quality into a design – and sometimes we forget how easy they are. Very inspiring – both on the techniques and on instructive blogging…
Wednesday, April 20th, 2011 16:28
Well written, informative article. Well done to you for your commitment and attention to detail.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
David
Saturday, July 9th, 2011 22:15
Is there no PSD to go along with the tutorial?
Azzax
Friday, April 22nd, 2011 08:55
Well It would be Interesting to get the same on in html5 Css3, would be waiting for such a tutorial
AndyJ
Thursday, April 21st, 2011 11:30
Great blog post and very comprehensive. It’s those little photoshop techniques that just add that extra little quality into a design – and sometimes we forget how easy they are. Very inspiring – both on the techniques and on instructive blogging…
Sumon
Tuesday, April 26th, 2011 13:04
Very informative tutorial and also the look is clean and awesome. I want to convert it to HTML. Can anyone help me how can I convert it to HTML?
Mustified
Thursday, April 21st, 2011 04:02
Long but nice tutorial !
Jon
Monday, May 2nd, 2011 17:35
Nice tutorial – can you supply the PSD file for download?
Katie McMillan
Wednesday, April 20th, 2011 16:28
Well written, informative article. Well done to you for your commitment and attention to detail.
Serdar
Monday, January 23rd, 2012 13:11
can you supply the PSD file for download?
Sven
Friday, July 8th, 2011 22:46
Very informative. Do you have suggestions for a good CMS for Social Networking ?
Rean John Uehara
Saturday, July 9th, 2011 06:13
Hi, I heard Buddypress is a good way to start. :)
Alvaro
Tuesday, May 3rd, 2011 00:20
Incredible tutorial.
How can I get access to the psd file?
Thanks!