Create Stylish Photography Web Design Layout in Photoshop
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
You can click on the image below to see the web design photographers layout in full scale.
PSD Template: http://freebiesbug.com/psd-freebies/bootstrap-3-grid-system-psd/
Fonts : Segoe UI Regular
Icons : www.FlatIcons.com
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.
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.
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” .
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%.
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.
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.
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.
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 .
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.