Design a website layout in photoshop – PORTFOLIA

advertisement

In this photoshop tutorial we will learn to design a clean website layout. 960 grid system is what we are going to use in this tutorial and lots of photoshop techniques will be dealt as we go through. Before starting, here is final preview of the photoshop layout.

 

 

 

 

Enter your email and download it now!

Enter your email address and the download link will be sent right to your inbox.



Final Image

Step 1: Add the 960 grid

Alignment is essential for any sort of design. We will use 960s Grid system which you can download it from here. Once file is downloaded open 960_grid_12_col.psd which is within photoshop folder. Usually the document size is 1080 X 1080 px but we need 1200 X 1100 px for our template. To change the template size go to Image -> Canvas size, input 180 width and 80 height and select top arrow. This will make the template 1200 X 1100 px. To fill the background layer with white color, select background layer, press Shift + backspace and fill it with white.

Add the 960 grid

Step 2: Folder structure

I like to maintain structure while designing anything and like you to do so. Divide this design into 3 part (Header, Body and Footer). To implement this create three folder with name Header, Body and Footer in layer palette. We will work on each section step by step: first on header, then body and finally on footer.

Folder structure

Head Section

Step 3: Add gradient background on header

Before adding gradient background we will add guide lines. Click View -> New Guide, select horizontal and input 100 for position. Repeat same step to add guide line of 140px and 180px.

Add gradient on header

To add gradient background on header section create a new layer called Header bg. Using marquee tool create a selection of 1200x140px then click Shift+Backspace and fill it with any color. Then right click the Header bg layer and select blending options. Apply following settings for gradient overlay according to the following image.

Add gradient on header
Add gradient on header

Step 4: Add two pixel lines

About 80px from top add we will add two one pixel lines. Create a new layer called Line 1px dark, select marquee tool and select 940 x 1 px as shown in the image below.

Add two pixel lines

Fill the layer with #A54E0F, repeat same for other 1px line, call it Line 1px dark and fill it with #E37D1E.

Add two pixel lines

Step 5: Clean up time

Its good habit to start organizing your file right from the beginning. If you have been working on the same folder (Header bg) all layer we created till now should be in it. Even if you didn’t no need to worry. Lock your Background layer.

Clean up time

Using marquee tool drag selection from outside of the document so that three layer Header bg, Line 1px light and Line 1px dark are selected. Now in layer palette drag the selected layers to Background folder. From now onwards I will not explain this step to organize file instead just refer to Step 5.

Clean up time
Clean up time

Step 6: Insert your logo

Type in PORTFOLIA just above 1px lines, right click the portfolia layer and add blending option with the following settings.

Insert your logo
Insert your logo
Insert your logo

Now we will add fade light behind logo to do so create a new layer call Fade, set Layer mode to Overlay. Using Rectangle Marquee Tool select a rectangle just to cover the logo then choose a soft brush of 175px and set the color to #FFFFFF. Click on the layer few times to give it a fade effect. You should have a light effect behind the logo.

Insert your logo
Insert your logo

Step 7: Call to action button

Select Rounded rectangle tool and set radius to 15px. Drag to create a 225 x 30 px round rectangle, name it Orange rectangle. Add layer style with the following settings.

Call to action button
Call to action button
Call to action button
Call to action button

We need to add white/grey gradient round rectangle on right hand side of call to action button. We cannot use rectangle tool in this situation so we will use pen tool to create our custom round rectangle. Select pen tool draw semi circle shape as shown below.

Call to action button

Add following layer settings to the layer.

Call to action button
Call to action button

Write a phone number and give a outler glow in the layer style setting.

Call to action button

Add call us text and use following setting.

Call to action button

We are almost finished with call to action button :) but need last bit to be added. Add two 1px lines between call us text and phone number.

Call to action button

Create a folder called “Call to action button” and follow step 5

Step 8: Add navigation

Select round rectangle tool with radius set to 10px. Draw round rectangle of 100 x 40px dimensional.

Add navigation

Add text to navigation menu.

  • Font-family: Verdana
  • Font-size: 14pt
  • Font-style: Regular
  • Font-color: #FFFFFF
Add navigation

Lets add some shadow below menus to do so create a new layer called Nav bottom shadow. With the help of rectangle tool draw a rectangle of 1200x40px and add drop shadow with the following settings

Add navigation

We are done with Header section so place all the layers and folders inside Header folder except Background layer.

Body Section

Step 9: Image slider

Download three images from SXC

Place the downloaded images on the document. Resize the Sunflower and coriander image to 300x200px and place it on the middle of the document. Resize other 2 images to 240x158px and place it left and right of the document. After aligning images, blur the two small images. Go to Filter-> Blur-> Motion Blur. Set the angle to 180 and distance to 6px.

Now its turn for shadows. Using Rectangle tool create a rectangle of 300 x 120px and fill it with #000000 (black) color.

Add navigation

Then right click on the rectangle and select perspective.

Add navigation

Drag the anchor from one of the top end to make it similar to image below. Now go to Filter-> Blur-> Motion Blur. Set the angle to 180 and distance to 6px. Then go to Filter-> Blur-> Gaussian Blur, set the radius to 5.5 px. During blurring the image a pop up window will ask to rasterize the shape first, click ok.

Add navigation

Move the layer behind the image and it should look like the image below.

Add navigation

Repeat same steps with smaller rectangle for other two images.

Step 10: Slider bar

Draw a slider bar for the slider by using a Rounded rectangle tool with radius set to 20px. Again using Rounded rectangle tool with radius set to 8px draw a rectangle of 70 x 26px. Apply following blending option settings to the slider.

Slider bar
Slider bar
Slider bar

Time to add some slider grip to the slider button. Using Rectangle marquee tool draw a 1 x 13px and fill it with white. Next apply gradient overlay setting to the layer, name it 1px gradient line. Replicate the layer 4 times and move copied layer to adjecent sides.

Slider bar
Slider bar
Slider bar

Step 11: Content area

Add two new guides at 480 and 520 px. Then download icons from Pixel-mixer basic set and Pixel-mixer basic set 2. Drop setting tool icon from basic set 2 from the downloaded icon.

Slider bar

Write some text for the title with following settings

  • Font: Arial
  • Font size:18px
  • Color: #E5932A
  • Font style: Italic

Do similar for main text with following settings

  • Font: Arial
  • Font size:13px
  • Color: #79807C
  • Font style: Regular

Repeat this step with different text and icons. Then it should look like the following image.

Slider bar

Time to organize file again. Create folder call “Main content” and repeat Step 5.

Step 12: Testimonial

Add two new guides at 620 and 660 px. Using Rounded rectangle tool create rectangle with radius set to 10px (Width: 940px and height: 140px). Apply following setting to the layer.

Slider bar
Slider bar
Slider bar

Using pen tool add two points on the rectangle then using direct selection tool drag the right point as show on below image to create kind of arrow.

Slider bar
Slider bar

For quote sign type ” with following settings

  • Font: Arial
  • Font size:80px
  • Color: #6E6C6C
  • Font style: Italic

Do similar for main testimonial with following settings

  • Font: Arial
  • Font size:13px
  • Color: #79807C
  • Font style: Italic

Then add name with same settings except Font style: Regular and for the website link use Color: #E5932A.

Slider bar

Step 13: Footer

Draw a rectangle by using a Rounded rectangle tool with radius set to 8px of 920 x 170px and color #E37DLE. Apply following stroke option settings to the rectangle. Name this layer “Box frame”.

Footer

Now at the bottom of the round rectangle create a rectangle of 940 x 60px (name this layer “Front shape” and apply gradient overlay as shown in image below.

Footer
Footer

It should look like this.

Footer

After creating basic framework for footer, add shadow underneath the framework. To do so draw rectangle of 850 x 70 px name it Shadow. Click Edit -> Free Transform then Right click on the rectangle and select Perspective. Drag the top point on one side of the rectangle towards another point till it looks like the image below.

Footer

Go to Filter -> Blur -> Motion Blur and apply following settings.

Footer

Again go to Filter -> Blur -> Gaussian Blur

Footer

Move the Shadow layer underneath other footer layer.

Footer

To add in bit 3d effect add new layer “Box angled shape left” of 26 x 60px color it with #B16117. Click Edit -> Free Transform then Right click the rectangle and select Skew. Holding Alt key drag the top right point in upward direction.

Footer

Move the layer just below the gradient rectangle. Do same for the right side except drag the top left point in upward direction.

Footer

For the scrolling thumbnails start by adding a new rounded rectangle (name it Image shape) of 175x100px fill it with #FFFFFF and apply 1px stroke of #985414. Download image MAM Chihuly Show 5 from SXC and place it above Image shape layer. Select the image layer then go to Layer -> Create clipping mask, this will mask the image with the rectangle layer below it. Adjust the image as needed. To show a uplift effect on the thumbnail add a Shadow layer and using Ellipse Tool create a small ellipse and go to Filter -> Gaussian blur with Raidus 1.3px you should now have a thumbnail image with shadow like the image below.

Footer

Repeat same steps to create two more thumbnail images.

Footer

Last step :) of this tutorial is to add arrows for the thumbnails. Create a circle (name it Arrow circle left) of 19 x 19px, apply following setting to the layer.

Footer
Footer
Footer
Footer

Above the circle layer add new layer and call it “Arrow left”. Add a small arrow and apply stroke setting as shown below.

Footer

Last but not the least do not forget to organize your layers. This is how mine looks like.

Footer

Conclusion

Using simple techniques we can achieve fresh and creative templates. Here is the final image how the template should look like. If you have any queries pour in your precious comments below, till then cheers from my side.

Final Template
Cut down your exam stress by using our latest actualtests sat practice and high quality realtests act prep and certkiller ccna pdf dumps.

About the Author:

Web designer / developer keen and passionate about designing and developing websites.
  • http://www.faqpal.com FAQPAL

    Wow, looks fantastic.

  • http://www.samirtuladhar.com Samir

    @FAQPAL Thanks for appreciating.

  • Chris

    Hi, great tutorial, I really like the design. If I was going to create a site using a similar theme. What would you recommend I use to create the sliders?

  • http://www.samirtuladhar.com Samir

    @Chris You can use Image flow or Slider Gallery

  • Chris

    @Samir
    Thanks for the reply, I will now create something based on this idea, and code it. Trying out both of those!

  • http://www.samirtuladhar.com Samir

    @Chris My pleasure. Let me know if you have any problem in future.

  • john

    hi samir, in whole tutorial you talk about selecting pixels. how could we get to know about exact pixel size of any rectangle. plz reply thanks

  • http://www.webtutsandseo.com piyashrija

    thanks for the tutorial its awesome

  • http://www.samirtuladhar.com Samir

    @John For rectangle tool, after creating a rectangle go to Edit- Free transform or CTRL + T and on the top menu bar you should see Width and Height menu. It is set to 100% as default but you can change it into pixel. Like set it to W: 100px and H: 100px. You can do same for Rectangle marquee tool.

    Hope this explains what you were looking for.

  • Chris

    @john, You could also create the rectangle with the rectangle tool.

    Then rasterize the layer(right click on the shape in the layers panel and choose rasterise).

    Then you can change the size of the rectangle to fit on your grid correctly, also by using Control+T, and then using control + arrows to nudge it into the correct spot. Also, if you google the 960gs (grid system) you can download a photoshop psd, which saves you time on making a grid everytime.

  • Lalit Singh Bist

    Dude,

    Am just learning photoshop. this is a great tutorial.thank you for sharing!

  • http://www.graphstock.com Graphstock

    This website looks very good. i like the color combination a lot

  • http://www.kiararealty.com.my Kent Tan

    Wow. Nice tutorial. Interesting to see how the 960 grid layout is used in design. Read about it but never had hands on experience before

  • http://www.rehabilitasyonturkiye.com rehabilitasyon

    I was just starting, I thank you very useful help

  • http://business.all.co.uk Jerry

    Very nice post. Thanks so much!

  • http://free-wordpress-blog.com/lokal Henry

    Well that really helped me a lot with my work. Thanks a million!

  • http://www.htmlartists.com/ HTML Artists

    thanks for sharing

  • Pingback: June’s Fresh Photoshop Web Layout TutorialsFree web resources – Net-Kit.com

  • http://infopitcher.com Infopitcher

    clean step by step tutorial.
    Nice post.Keep posting.

  • http://www.freecssmenus.co.uk John Ryan

    A very professional looking website. With the step by step guide it looks so easy to achieve. Many Thanks

  • http://mattcardle.webs.com Matt Cardle

    I am very impressed how the shadows were created on the 3 main photos:

    1. Perspective transform
    2. Motion Blur
    3. Gaussian Blur

    I’ve been trying to achieve this by slowly erasing the edges of a black box which can become very uneven.

    This is so much easier!!! Many Thanks!

  • Pingback: 60+最新網頁布局設計photoshop教程 | MING's Blog

  • Pingback: 50 Free PSD website templates for free download

  • Pingback: 70 plantillas PSD geniales para diseño web | CreativaSfera

  • Pingback: 67 Web Layout Design Photoshop Tutorials

  • Pingback: Create your Own Propaganda Inspired Gig Poster - Photoshop tutorial

  • Pingback: 60 the Latest page layout design photoshop tutorial Web Page Design | Web Page Design Templates | Html5 Template

  • http://www.freetemplatesonline.com/ Stacy

    cool and easy to follow tutorial! thanks