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.


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.


3/43

Page 3of 43

Add this Blending Option:

Gradient Overlay

#192028 #2a3642


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


5/43

Page 5of 43


Drop Shadow


6/43

Page 6of 43

Gradient Overlay

#c5c5c5 #d7d7d7 #ffffff


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/43

Page 8of 43

Select Text Tool(T):


9/43

Page 9of 43

Lets create a hover/active state to our navigation.


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.


11/43

Page 11of 43


Stroke


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:


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.


14/43

Page 14of 43

Select Text Tool(T), put up your site message.


15/43


16/43

Page 16of 43

Now Open up the Imac.psd file. Place it as shown in the screenshot below.


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.


18/43


19/43


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.


21/43

Page 21of 43


Gradient Overlay

#dcdcdc #ffffff


22/43

Page 22of 43

Stroke


23/43

Page 23of 43

Select Text Tool(T) and add text to buttons.


24/43

Page 24of 43


Drop Shadow


25/43

Page 25of 43

Gradient Overlay

#1d1d1d #4e4e4e


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)


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.


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.


29/43

Page 29of 43


Drop Shadow

Ctrl + click to the layer to make a selection.


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.


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.


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).


My Portfolio

Create a folder and name it to my_portfolio, put all your portfolio related layers there.



33/43

Page 33of 43

Apply this Blending Option to the image.

Stroke


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.



35/43

Page 35of 43

Now were done in our main area lets proceed to footer.


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.


Gradient Overlay

#2a3642 #192028


37/43

Page 37of 43

Make a selection in to the remaining white space.


Inner Glow


38/43

Page 38of 43

Gradient Overlay

#2a3642 #192028 Check Reverse

Stroke

#192028


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


40/43


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.


Header: #ffffff Paragraph: #cacaca Links: #0cb0ca


42/43


43/43

web design template.docx

Documents

Transcript of web design template.docx