web design template.docx
-
Upload
felix-santos -
Category
Documents
-
view
221 -
download
0
Transcript of web design template.docx
-
8/12/2019 web design template.docx
1/43
Page 1of 43
Step 1: Working with Site Structure
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.
Step 2: Working with Header
Rename the layer1 folder to Header and rename layer 1 to header_bg (put everything in separate folder
like Header, Navigation, Footer to help to be organized better).
Create new guideline go to View > New Guide and set the position to 150 px, orientation to horizontal.
-
8/12/2019 web design template.docx
2/43
Page 2of 43
Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with
any color.
-
8/12/2019 web design template.docx
3/43
Page 3of 43
Add this Blending Option:
Gradient Overlay
#192028 #2a3642
-
8/12/2019 web design template.docx
4/43
Page 4of 43
Step 3: Working with Logo
Create a folder inside header folder and name it to Logo, put all your logo related layers there.
Create another guideline 50px from the top.
Now Select Text Tool(T) and put up your Site Name and Slogan.
Site Name: any color Slogan: #cacaca
-
8/12/2019 web design template.docx
5/43
Page 5of 43
Add this Blending Option:
Drop Shadow
-
8/12/2019 web design template.docx
6/43
Page 6of 43
Gradient Overlay
#c5c5c5 #d7d7d7 #ffffff
-
8/12/2019 web design template.docx
7/43
Page 7of 43
You must have something like this in the result:
Step 4: Working with Navigation
Create a folder and name it to Navigation, put all your navigation related layers there.
Create another guideline 5px from the top.
Select Rectangular Marquee Tool(U) Make a selection from left to right based on our 5px guideline Fill it with a color #02abc6
-
8/12/2019 web design template.docx
8/43
Page 8of 43
Select Text Tool(T):
-
8/12/2019 web design template.docx
9/43
Page 9of 43
Lets create a hover/active state to our navigation.
-
8/12/2019 web design template.docx
10/43
Page 10of 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.
Step 5: Working with Featured Section
Create a folder and name it to Featured_Section, put all your Featured related layers there.
Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with
#cccdcd.
-
8/12/2019 web design template.docx
11/43
Page 11of 43
Add this Blending Option:
Stroke
-
8/12/2019 web design template.docx
12/43
Page 12of 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:
-
8/12/2019 web design template.docx
13/43
Page 13of 43
Select Radial Gradient(G) Foreground color to #e5e5e5 Background color to #ffffff
Drag the gradient starting from the middle all the way to the right.
-
8/12/2019 web design template.docx
14/43
Page 14of 43
Select Text Tool(T), put up your site message.
-
8/12/2019 web design template.docx
15/43
-
8/12/2019 web design template.docx
16/43
Page 16of 43
Now Open up the Imac.psd file. Place it as shown in the screenshot below.
-
8/12/2019 web design template.docx
17/43
Page 17of 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.
-
8/12/2019 web design template.docx
18/43
-
8/12/2019 web design template.docx
19/43
-
8/12/2019 web design template.docx
20/43
Page 20of 43
Step 6: Working with Read more Buttons
Create a folder and name it to buttons, put all your read more buttons related layers there.
Select Rounded Rectangle Tool(M), place it as shown in the screenshot below.
-
8/12/2019 web design template.docx
21/43
Page 21of 43
Add this Blending Option:
Gradient Overlay
#dcdcdc #ffffff
-
8/12/2019 web design template.docx
22/43
Page 22of 43
Stroke
-
8/12/2019 web design template.docx
23/43
Page 23of 43
Select Text Tool(T) and add text to buttons.
-
8/12/2019 web design template.docx
24/43
Page 24of 43
Add this Blending Option:
Drop Shadow
-
8/12/2019 web design template.docx
25/43
Page 25of 43
Gradient Overlay
#1d1d1d #4e4e4e
-
8/12/2019 web design template.docx
26/43
Page 26of 43
With the help of drop shadow and gradient overlay this effect will make our text look embedded.
Step 7: Working with Testimonials
Create a folder and name it to testimonials, put all your testimonials buttons related layers there.
Select Rounded Rectangle Tool(U)
-
8/12/2019 web design template.docx
27/43
Page 27of 43
Set the radius to 10pxApply 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.
-
8/12/2019 web design template.docx
28/43
Page 28of 43
Step 8: Working with Hire Me Button
Create a folder inside testimonials folder and name it to hire_btn, put all your hire button related layersthere.
Select Rounded Rectangle Tool(U), set the radius to 10px and color to #141a20. Place it as shown in the
screenshot.
-
8/12/2019 web design template.docx
29/43
Page 29of 43
Add this Blending Option:
Drop Shadow
Ctrl + click to the layer to make a selection.
-
8/12/2019 web design template.docx
30/43
Page 30of 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.
-
8/12/2019 web design template.docx
31/43
Page 31of 43
Step 9: Working with Main Area(What I Do, My Portfolio, I Socialize)
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.
-
8/12/2019 web design template.docx
32/43
Page 32of 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):
-
8/12/2019 web design template.docx
33/43
Page 33of 43
Apply this Blending Option to the image.
Stroke
-
8/12/2019 web design template.docx
34/43
Page 34of 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):
-
8/12/2019 web design template.docx
35/43
Page 35of 43
Now were done in our main area lets proceed to footer.
-
8/12/2019 web design template.docx
36/43
Page 36of 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.
Add this Blending Option:
Gradient Overlay
#2a3642 #192028
-
8/12/2019 web design template.docx
37/43
Page 37of 43
Make a selection in to the remaining white space.
Add this Blending Option:
Inner Glow
-
8/12/2019 web design template.docx
38/43
Page 38of 43
Gradient Overlay
#2a3642 #192028 Check Reverse
Stroke
#192028
-
8/12/2019 web design template.docx
39/43
Page 39of 43
Quick Links
Create another folder inside footer and name it to Quick Links.
Select Text Tool(T)
Header: #ffffff Links: #0cb0ca
-
8/12/2019 web design template.docx
40/43
-
8/12/2019 web design template.docx
41/43
Page 41of 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
-
8/12/2019 web design template.docx
42/43
-
8/12/2019 web design template.docx
43/43