Easy way to Learn Web Design

Create Stylish Photography Web Design Layout in Photoshop

Photographer Web Design Layout

In this Photoshop tutorial, you will learn how to create stylish web design PSD layout that is colourful-themed and perfect for a web portfolio for photographs. It very pretty simple tutorial that describe some great techniques to adapt into your current web design workflow. Lets start to Create Stylish Photography Web Design Layout in Photoshop

Preview

You can click on the image below to see the web design photographers layout in full scale.

Photographer design layout

Tutorial Resources

PSD Template: http://freebiesbug.com/psd-freebies/bootstrap-3-grid-system-psd/
Fonts : Segoe UI Regular
Icons : www.FlatIcons.com

Level Required

Program : Photoshop CS5, CS6
Estimated Completion Time: 1 Hour
Skill Level : Intermediate

Step by step tutorial to create web design layout

Step 1. Setup Photoshop Document

Create a new layer in Photoshop (Ctrl/Cmd + N) with dimensions of 1400x3000px. We are creating this layout for big screens.

Photographer Layout tutorial-Step1

Step 2. Incorporate the Bootstrap Grid System

I am designing my layout on the 12-column Bootstrap Grid System. You can download the free PSD template from their website. Once you have finished downloading the PSD template, open the PSD named “BootstrapGridLG” in Photoshop and drag the grid layer onto our canvas. Place it in centre. Remember to keep this grid layer as the topmost layer in the Layers Panel, as this will help in alignment of elements on this layout.

Photographer Layout tutorial-Step2

Step3. Make Layout structure and background

Hide grid layer temporarily and create a new layer beneath it. Fill background layer with white.

Step4. Let’s start design the Home screen

Select Marque tool. From top tool set check style “fixed size” with width 1400px and height 550px. Place your mouse on the top edge of your layout and click once. This will make the box of dashed lines with width 1400/ 550. Fill this selection with black color . Rename this layer to “home screen background” .

Photography web Layout tutorial-Step4

Step5. Add theme image in layout

Add theme image and place it on top of black background layer. Place the mouse in between these two layers. Press Alt button and mask the image with that black background box. Put grid layer on top and reduce alpha to 10%.

Web design Layout tutorial-Step5

Step 6. Add the Navigation

Select the Horizontal Type Tool (T) and set the Font option to Segoe UI Regular. (or your preferred font). Set font size to 14px . Also set the text color to a white color (#ffffff). Then create links for your webpage with equal space and place it at the centre of the layout. The space between the links should be equal.

Select Single Row marque tool. Place the mouse below the links with little margin and click there. And fill the selection with white color. This tool will make horizontal line with one pixel height. Reduce the alpha of this horizontal line to 10%.

Step 7. Add the Site Name or Artist Name

Unhide our grid layer. Select the Horizontal Type Tool (T) and set the Font option to Segoe UI Bold (or your preferred font). Also set the text color to a white color (#FFFFFF). Then type “Philip Johns Photography” (or any site name you would like) at the center of the layout. I have set the font size to 50px. You can set it as per your design. Place Site name in the center of layout both vertically and horizontally. Add one line description below the heading. I have mention “Specialist in Photography” and set the font size to 30px.

Step 8 : Design “About Me” Section.

We are designing “About me” section now. This section will describe about website or artist with his image. With rectangular Marque Tool (Press M) create box with height 400px. Fill this box with light grey color (#f0f0f0).
Select the Horizontal Type Tool (T) and set the Font option to Segoe UI Regular (or your preferred font). Set the font size to 45px and type “ABOUT ME”. Also set the text color to #a11f5b. Select ruler tool give margin 50px from top and bottom of heading.

Step 9 : Add paragraph and author image in about me section.

Unhide the grid layer and select the Horizontal type tool. Create paragraph and write 5-6 lines about company description. Set the font size of this paragraph to 20px and color to black(#000).

Step 10. Create “Portfolio” Section.

Hide Grid layer. Select rectangular marque tool and create box with height 500px. Fill this rectangular box with color # ab366c. Select Horizontal Type Tool (T) and write heading “Portfolio” with font size 45px. Set the color of heading to white. Give margin of 50px from top and bottom of heading Add 1-2 line to describe the heading.

Step 11. Add your creatives in Portfolio

Select the rectangular marque tool. Create one box with width 250px and height 250px. Rename this layer with box. Give white color stroke to this box. Set the strike size to 10px. And opacity 21%. Make 4 copies of this layer. Place 1st box in extreme left and 4th box at right position. Select all four boxes and select tool from top named “Distribute right edges” from top. And then select align top edges from top panel.

step16

Step 12. Add more boxes for your creatives

Add more boxes in Portfolio section. For this increase the height of background layer and make more copies of the box and place it at bottom.

step19

Step13. Add Zoom Icons in boxes

Download Zoom Icon of your choice and place it centre of each box. The best method is keep icon on the box and select icon and box. After selecting both elements check top panel and press “Align Vertical Center” and “Align Horizontal” from the given options.

step20

Step 14. Design “Services” Section for your portfolio

Select Rectangular Marque Tool (Press M) and create box with height of 500px. Fill the rectangle with light grey color (#f0f0f0). Write heading “Services” or whatever you want. Set the font size to 45px. Give margin 50px from top and bottom of heading. Set the color of your heading to # a11f5b.

Step 15. Align box in one line with Distribute Horizontal Space tool

Step 15. Select text and box layers and make it group. Name this group as “text and box”. Make multiple copies of these groups . Keep one copy at left side and other on right side. Place rest of the copies in between. Now select all groups with name “text and box” . Select option “Distribute Horizontal Space ” from top options panel and select “Align Top edges” option to align it from top. Change the text and place icons or images in the box. We have added one icon in all boxes. You can change it as per your need. You can place icon or image .

step24

Step 16. Now design the last section “Contact Us”.

Now, we will design Contact Us section. For this again select the rectangular marque tool and create box with height 500px. Fill box with color # ab366c. Create heading with similar font size and space as we have given in section “Portfolio” and “Services”.
Create testimonial section on left side with Horizontal Type Tool.
Design form with Submit button on right side.

Step 17. Place social icons

Place social icons at bottom with equal space. Select all icons and choose option “Distribute Horizontal Centre” from top. It will set equal space automatically between all icons.

Step 18. Write Copyright Info

With text type tool write copyright text. Set font size to 20px and color to # ab366c.

Step 19. Now the template is ready. You can place images, icons as per your requirement.

Photographer design layout

1 Comment
  1. VPS server says

    Many photography websites use very clean and simple designs to keep the visitor s attention on the photos. This tutorial shows you how to create an elegant photography site where the design will stay out of the way of the photos.

Leave A Reply

Your email address will not be published.