Total Followers 132,503
Let us start the week with another PSD tutorial here at 1stwebdesigner! We will create a Product layout using Photoshop in a step-by-step manner. Techniques will be discussed in this tutorial which include the use of proper spacing, typography, and colors. Keep in mind that these techniques can also benefit you when you’re working on other designs in the future, so keep your mind focused and do not skip a single word!
Here is what we will be making, click on the image for a full preview:
Before we get started, download first 960grid system for easy Guideline creation.
Open 960_download\templates\photoshop\960_grid_12_col.psd
We also need to make sure that our Rulers and Guides are visible by pressing
CTRL + SHIFT + C to change the canvas size.
Rename layer1 folder (group) Header, create a new layer and name it header_bg (Create groups for every major section for example you should group: Header, Navigation, Footer layers together to help stay better organized).
Create a new guideline go to View > New Guide and set the position to 100px, orientation to horizontal.
Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot below and fill it with #191919
Create a folder inside Header group and name it Logo, put all your logo related layers there.
Select Text Tool (T) and put up your Site Name and Slogan.
Separator line: Select Line Tool(U) color #414141.
Create a new group and name it Navigation, put all your navigation related layers there.
Select Text Tool (T) and add the following text: HOME, PRODUCTS, SUPPORT, ABOUT, and CONTACT.
Create a layer and name it Hover.
Select the Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #282828
Create another layer at the top of the Hover group. Follow as shown in the screenshot below and fill it with #dfce3e
Create a new group and name it Featured_Section, put all your Featured-related layers there.
Create another layer and name it img_holder.
Select the Rectangular Marquee Tool (M), make a selection as shown in the screenshot below and fill it with #414141.
Add this Blending Option
Stroke
Open up the 3dbox generator you have downloaded. Create another layer at the top of img_holder and name it img.
Alt + Click between the two layers to link the img to img_holder.
Below the img_holder create another layer name it shadow.
Select the Rectangular Marquee Tool(U), make a selection as shown in the screenshot below and fill it with #000000.
Ctrl + T to transform. Now, Left Click and choose perspective.
Go to Filter > Blur > Gaussian Blur.
Select the Text Tool (T), Grab some lorem ipsum text. Follow the text format as shown in the screenshot below.
Select the Elliptical Marquee Tool (M), make 4 small circles as shown in the screenshot bellow and fill it with #b2b2b2. For the hover fill it with #1b1b1b.
Create a new group and name it button, put all your button-related layers there.
Select Rounded Rectangle Tool (U), set the Radius to 5px. Create a layer named btn_bg.
Add this Blending Option
Inner Shadow
Gradient Overlay
Stroke
Select Text Tool (T)
Create another layer at the top of btn_bg and name it shine.
Now let’s make a shadow on our button. Repeat the same step as we did on our slide show shadow.
When you’re done duplicate Button folder and place give it a 20px distance.
Create a folder named Features, put all your features-related layers there.
Open up the icons you have downloaded. Grab 6 icons that you like.
Place it as shown in this screenshot below and follow the text format.
Create a new group and name it news_letter, place all your newsletter-related layers there.
Create another layer named news_bg
Select the Rectangular Marquee Tool (M), and make a selection as shown in the screenshot below.
Select the Gradient Tool (G), set it to Pattern.
Add this Blending Option
Gradient Overlay
CTRL+ T to transform, right-click and choose warp.
It’s up to you how you do the warping. In the image below I curve a little at the top left and a tiny curve on the right side and bottom.
Create another folder below new_bg and name it Shadow
Select Pen Tool(P), make a shape as shown below and fill it white #000000.
Go to Filter > Blur > Gaussian Blur.
Set the shadow layer opacity to 50%.
Now Select Text Tool (T), follow the text format as shown in the screenshot below.
Create a folder named About_us, place all your about us related layers there.
Now Select Text Tool (T), follow the text format as shown in the screenshot below.
Create a new group and name it Footer, put all your footer related layers there.
Create a guideline 990px, horizontal.
Make a selection as shown in the screen shot below and fill it with #282828.
Create a folder named Latest News.
Select Text Tool (T), follow the text format as shown in the screenshot below.
Create a folder and name it Recent_tweets.
Select Text Tool (T), follow the text format as shown in the screen shot below.
Create a folder and name it Get Connected.
Open up the social icons you have downloaded and grab Facebook, Twitter and Email.
Select Text Tool (T), follow the text format as shown below.
Select Rectangle Tool (U), set the color to #191919 and place it as shown in the screenshot below.
I also added copyright text and some footer links using Text Tool (T) 11pt color #9d9d9d
Done! I hope you learned something new here. Don’t forget to comment and suggest better ways on how to do things! If you have a tutorial request, or a question feel free to leave them as a comment below. Thanks!
Get The Only Freelancer crash course you will ever need to read!
Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. Other than that he loves Coffee and his Girl.
Monday, April 9th, 2012 15:42
Hey, great tutorial! I only got 1 question: where can I get the patterns (stripes) of the paper?
Tuesday, January 31st, 2012 20:38
Hi there! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no backup. Do you have any solutions to stop hackers?
Wednesday, January 11th, 2012 16:08
Really very easy to follow.. thanks for share it
Tuesday, December 20th, 2011 20:09
We are in the process of setting up landing pages as well. Does this process have any good search engine optimization value? If so I would like to apply this method to at least one of our landing pages.
Friday, December 2nd, 2011 13:10
the shadow is fffaake, not real and the perspective too =)
Thursday, December 1st, 2011 17:45
Glad to found such step by step landing page design process in photoshop, I learn a lot from this post, thanks for your hard work.
Friday, August 19th, 2011 01:42
Wonderful Tutorial. I have seen those cool graphic boxes all over the web and NOW I know how they did it. I like the graphic landing page idea too. Does having the landing page mostly be in photoshop lower your SEO for the page or do you not really care if it is a landing page and they would not have found the landing page without already finding your site?
Thank you.
Tuesday, June 14th, 2011 18:56
Those light blue, almost teal-like horizontal stripes were a little confusing at first, but then they grew on me. I like the diversity.
Saturday, June 11th, 2011 02:56
where to get the pattern?
Sunday, April 17th, 2011 06:33
Nice tut … very clean and easy to follow …
Using the 960 to layout the page is definitely a plus …
Thanks for the learn
Thursday, March 17th, 2011 11:25
very easy to follow.. thx a lot
Sunday, February 13th, 2011 22:03
Not bad, but could be better: I would suggest you to take care of vertical rhythm.
Friday, February 11th, 2011 19:13
Good Tutorial and nice layout!
I would also recommend reading this article as a landing page should be a page within 500pixel height, etc…
http://bit.ly/9h9eB7
Monday, April 18th, 2011 15:14
What I pulled form your page was that important things should be above the fold, not that everything has to be within 500px. A whole page that’s only 500px tall is shooting yourself in the foot.
Friday, February 11th, 2011 01:45
waiting for the psd-html tutorial – cheers!
Wednesday, February 9th, 2011 13:25
Sleek Design… Thanks for sharing!
Tuesday, February 8th, 2011 07:49
Excellent Tutorial and can’t wait to the XHTML/CSS tutorial on it.
Monday, February 7th, 2011 20:41
Very good tutorial, it woul be nice to see a PSD to HTML+CSS version of it!
Monday, February 7th, 2011 18:54
@David what did you mean by system x? Didn’t quite get you, though I am glad you enjoyed tutorial, Michael did good work once again :)
Tuesday, February 8th, 2011 09:46
960 Grid System sorry xD
Monday, February 7th, 2011 15:32
I like the result, it is clean and elegant.
But why use the system x?, I greatly limiting design, though falicite things for the code.
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 Mejias
Monday, February 7th, 2011 15:32
I like the result, it is clean and elegant.
But why use the system x?, I greatly limiting design, though falicite things for the code.
Tutsnow
Wednesday, February 9th, 2011 13:25
Sleek Design… Thanks for sharing!
Pushpinder Bagga
Friday, February 11th, 2011 01:45
waiting for the psd-html tutorial – cheers!
djavupixel
Friday, February 11th, 2011 19:13
Good Tutorial and nice layout!
I would also recommend reading this article as a landing page should be a page within 500pixel height, etc…
http://bit.ly/9h9eB7
benj
Monday, April 18th, 2011 15:14
What I pulled form your page was that important things should be above the fold, not that everything has to be within 500px. A whole page that’s only 500px tall is shooting yourself in the foot.
Diti
Sunday, February 13th, 2011 22:03
Not bad, but could be better: I would suggest you to take care of vertical rhythm.
Dainis Graveris
Monday, February 7th, 2011 18:54
@David what did you mean by system x? Didn’t quite get you, though I am glad you enjoyed tutorial, Michael did good work once again :)
David Mejias
Tuesday, February 8th, 2011 09:46
960 Grid System sorry xD
Theo
Monday, February 7th, 2011 20:41
Very good tutorial, it woul be nice to see a PSD to HTML+CSS version of it!
Dainis Graveris
Tuesday, February 8th, 2011 01:32
@Theo and probably you soon will see :)
Theo
Tuesday, February 8th, 2011 20:56
Looking forward to it, thanks!
Mitesh
Tuesday, February 8th, 2011 07:49
Excellent Tutorial and can’t wait to the XHTML/CSS tutorial on it.
Flt Lft
Thursday, March 17th, 2011 11:25
very easy to follow.. thx a lot
omagus
Thursday, April 7th, 2011 07:24
clean and elegant..!
i like it..!
Bart
Tuesday, December 20th, 2011 20:09
We are in the process of setting up landing pages as well. Does this process have any good search engine optimization value? If so I would like to apply this method to at least one of our landing pages.
Matt
Wednesday, January 11th, 2012 16:08
Really very easy to follow.. thanks for share it
Stan
Tuesday, January 31st, 2012 20:38
Hi there! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no backup. Do you have any solutions to stop hackers?
Mitch
Monday, April 9th, 2012 15:42
Hey, great tutorial! I only got 1 question: where can I get the patterns (stripes) of the paper?
wick
Friday, December 2nd, 2011 13:10
the shadow is fffaake, not real and the perspective too =)
Sam
Thursday, December 1st, 2011 17:45
Glad to found such step by step landing page design process in photoshop, I learn a lot from this post, thanks for your hard work.
Edward
Sunday, April 17th, 2011 06:33
Nice tut … very clean and easy to follow …
Using the 960 to layout the page is definitely a plus …
Thanks for the learn
ad
Saturday, June 11th, 2011 02:56
where to get the pattern?
Ken Jansen
Friday, August 19th, 2011 01:42
Wonderful Tutorial. I have seen those cool graphic boxes all over the web and NOW I know how they did it. I like the graphic landing page idea too. Does having the landing page mostly be in photoshop lower your SEO for the page or do you not really care if it is a landing page and they would not have found the landing page without already finding your site?
Thank you.
Adcuda
Tuesday, June 14th, 2011 18:56
Those light blue, almost teal-like horizontal stripes were a little confusing at first, but then they grew on me. I like the diversity.