Académique Documents
Professionnel Documents
Culture Documents
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 viewed, do that by pressing CTRL + R (View Rulers) CTRL + ; (View Guides) CTRL + SHIFT + C to change the canvas size.
Page 1 of 43
Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with any color.
Page 2 of 43
Page 3 of 43
Page 4 of 43
Page 5 of 43
Page 6 of 43
Page 7 of 43
Page 8 of 43
Select Pen Tool(P). Create an arrow-head shape and place it as shown in the screenshot below.
Were finished with our header section, so now lets proceed with featured section.
Page 10 of 43
Page 11 of 43
Create another layer and name it to middle_light. Set the opacity to 50%. Select Rectangular Marquee Tool(U). Make a selection as shown in the screenshot below:
Page 12 of 43
Drag the gradient starting from the middle all the way to the right.
Page 13 of 43
Page 15 of 43
Now Open up the Imac.psd file. Place it as shown in the screenshot below.
Page 16 of 43
Below the Imac layer Create a new layer and name it Shadow. Select Elliptical Marquee Tool(U). Make a selection as shown in the screen shot below and fill it with a color #000000. Remember that while holding shift key you can create multiple selections.
Page 17 of 43
Page 18 of 43
Page 19 of 43
Page 20 of 43
Page 21 of 43
Stroke
Page 22 of 43
Page 23 of 43
Page 24 of 43
Page 25 of 43
With the help of drop shadow and gradient overlay this effect will make our text look embedded.
Create a folder and name it to testimonials, put all your testimonials buttons related layers there. Select Rounded Rectangle Tool(U) Page 26 of 43
Apply the same layer style as we did into our header and place Place it as shown in the screenshot. Select Text Tool(T), add up your testimonials.
Page 27 of 43
Page 28 of 43
Page 29 of 43
Go to Select > Modify > Contract. Set it to 3px. Create another layer and name it to button , and fill it with any color. Apply the same layer and text style as we did to our button in featured area.
Page 30 of 43
Create a folder and name it to main_area, put all your main area related layers there. What I Do Create another folder inside main_area and name it to What I Do. Page 31 of 43
Now Open icons that you have downloaded and grab 3 icons that will fit to (What I Do, My Portfolio, I Socialize). Select Text Tool(T):
My Portfolio Create a folder and name it to my_portfolio, put all your portfolio related layers there. Select Text Tool(T): Page 32 of 43
Page 33 of 43
I Socialize Create a folder and name it to i_socialize, put all your I Socialize related layers there. Open up social icons and place it as shown in the screen shot. Select Text Tool(T):
Page 34 of 43
Page 35 of 43
Step 10: Working with Footer(Quick Links, Latest From The Blog, Contact Me)
Create a folder and name it to footer, put all your footer related layers there. Go to View > New Guide. Set it to 965px Horizontal. Repeat the step. Set it to 1158px Horizontal Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot and fill it with any color.
Page 36 of 43
Make a selection in to the remaining white space. Add this Blending Option: Inner Glow
Page 37 of 43
Page 38 of 43
Quick Links Create another folder inside footer and name it to Quick Links. Select Text Tool(T) Header: #ffffff Links: #0cb0ca
Page 39 of 43
Latest From The Blog Create another folder inside footer and name it to Latest_blog Select Text Tool(T): Header: #ffffff Links: #0cb0ca
Page 40 of 43
Contact Me Create another folder inside footer and name it to Contact_me Open up social media icons and grab an icon for email and rss. Select Text Tool(T): Header: #ffffff Paragraph: #cacaca Links: #0cb0ca
Page 41 of 43
The last thing to do is add up your Copyright. Select Text Tool(T). Arial 11pt
Finally were done! Hope you learn something on this tutorial and hope you like it. If you have any question or tutorial request drop some comments below. Thanks!
Page 42 of 43
Page 43 of 43