Create a Clean Business Web Layout in Photoshop



In today’s tutorial I would like to show you how to design a clean and solid fictional business layout. Following the steps in this tutorial you will learn how to use guides, how to create a detailed background using patterns and filters, how to create transparent buttons, 3D elements and how to stylize web typography. Hope you will find this tutorial useful and techniques shown in this tutorial will help you in future projects.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
business.zip (3 MB)

Tutorial Resources

Icons: Vector Social Media Icons

Fonts: Bebas Neue and Arial

Artwork: Create a Cosmic Scene with Photoshop and Cinema 4D

Patterns: 20 Seamless Photoshop Grid Patterns

Preview

Click on the image below to see the work in full scale.

business preview

Step 1: Create a new document

Start by creating a new document CTRL+N. Then make the document 1200 px by 1200 px with a white background.

step01 create new document1

Step 2: Add guides

Now add guidelines View > New Guide… vertical at 120 px, 420 px and 1080 px. Also add horizontal guidelines at 100 px and 1100 px.

step02 add guidelines1

Step 3: Background

Double click on locked Background layer and name it “Grey”. After that set foreground color to bright grey (#EEEEEE) and using Paint Bucket Tool (G) fill your background with set color. Then create a new group called “Background” (Layer > New > Group…) and move “Grey” layer to a group. Now go to Filter > Noise > Add Noise… and set Amount to 1%, Distribution set to Uniform and check Monochromatic option if unchecked.

step03 add noise1

Now create a new layer (Shift+Ctrl+N) and name it “Grid”, place it above the layer called “Grey”. Download grid patterns from PremiumPixels.com. Set foreground color to black #000000 and pick Paint Bucket Tool (G) after that choose Pattern, then load them and select grid5 pattern. Fill your document with selected pattern.

step03 grid

Now reduce grid’s Opacity to 4%. An example shown on the picture below.

step03 grid opacity

Create a new layer (Shift+Ctrl+N) called “Top” and pick Rectangular Marquee Tool (M), then make your document smaller by clicking Ctrl+(minus button). After that make selection of top area between the first horizontal guideline and fill your selection with dark grey (#4F4F4F). An example shown on the picture below.

step03 top

Now click right mouse button on “Top” layer and select Blending Options… after that apply Gradient Overlay option.

step03 top gradient overlay

Next go to Filter > Noise > Add Noise… and set Amount to 0,8%, Distribution to Uniform and check Monochromatic.

step03 top with noise and style

Click Ctrl+J while customized “Top” layer is selected to make a copy, then click twice on its name and change it to “Bottom”. After that grab Move Tool (V) and drag “Bottom” layer to the bottom. An example shown on the picture below.

step03 bottom

Create a new layer (Shift+Ctrl+N) called “Left shadow” and place it under the “Top” and “Bottom” layers, then pick Brush Tool (B). After that load Basic Brushes set and choose Soft Mechanical 35 pixels size brush. Then set foreground color to black (#000000) and draw vertical line (hold Shift button while drawing) on the second vertical guideline. An example shown on the picture below.

step03 left shadow

Now pick Rectangular Marquee Tool (M) and select right side from the guideline. An example shown on the picture below.

step03 left shadow selection

Now delete selected area and reduce “Left shadow” layer’s Opacity to 8%.

step03 left shadow opacity

Click Ctrl+J on “Left shadow” layer to make a copy and place your copy on the third vertical guideline. Now click twice on copied layer and rename it to “Right shadow”, after that click Ctrl+T and set width (W) to -100%.

step03 right shadow

Step 4: Header

Finally we’ve finished our background. Now minimize “Background” group by clicking a small grey arrow next to the group’s name and create a new group (Layer > New > Group…) called “Header”. Place your new group above the “Background” group. After that set foreground color to blue (#00B4FF), then pick Horizontal Type Tool (T), choose Bebas Neue 30 px size font and write your business name.

step04 business name

Now click right mouse button on business name layer and select Blending Options… after that apply following options.

step04 business name drop shadow

step04 business name gradient overlay

step04 business name with style

Now change foreground color to grey (#EEEEEE) and pick Horizontal Type Tool (T) again. After that choose Arial 12 px size font and write your slogan. Then click right mouse button on your business name layer and select Copy Layer Style, next click right mouse button on slogan layer and select Paste Layer Style.

step04 business slogan

Step 5: Sidebar

Minimize “Header” group by clicking a small grey arrow next to the group name and create a new group (Layer > New > Layer…) called “Sidebar”. After that create another group inside the “Sidebar” group called “Button”. Now create a new layer (Shift+Ctrl+N) named “Button”. Then set foreground color to black (#000000) and grab Rounded Rectangle Tool (U), set Radius to 5 px and draw a button as shown on the example below.

step05 button shape

Now reduce “Button” layer’s Opacity to 10%.

step05 button opacity

Change foreground color to grey (#ECECEC) and grab Horizontal Type Tool (T), choose Bebas Neue 30 px size font and write “Home”. After that click right mouse button on just created layer and select Blending Options… then apply drop shadow option.

step05 home drop shadow

step05 home

Now change foreground color to dark grey (#C1C1C1) and using Horizontal Type Tool (T) write “01″. Then click right mouse button on it and select Blending Options… after that apply drop shadow option.

step05 01 drop shadow

step05 01 with style

Now minimize “Button” group by clicking a small grey arrow next to the group name. After that click right mouse button on group’s name and select Duplicate Group… then change the text and the number. Make 4 more button groups as shown on the picture below.

step05 buttons

Create a new group (Layer > New > Group…) called “Social media”. After that set foreground color to (#66717E). Then pick Horizontal Type Tool (T), choose Bebas Neue 30 px size font and write something like “Connect with company:”.

step05 connect

Now click right mouse button on text layer and select Blending Options… after that apply gradient overlay option.

step05 connect drop shadow

Now download social media icons from IconDock. Choose six favorite icons and drag them to your document. Then using Move Tool (V) drag them to your “Social media” group and place as shown on the picture below.

step05 icons

Change foreground color to grey (#6D6D6D) and pick Horizontal Type Tool (T). Then choose Arial 14 px size font and write the names of the social networks. An example shown on the picture below.

step05 social networks

Now minimize “Social media” group and create a new group (Layer > New > Group…) called “Map”. After that set foreground color to (#66717E). Then pick Horizontal Type Tool (T), choose Bebas Neue 30 px size font and write something like “How to find our company:”. After that click right mouse button on “Connect with company:” text layer and select Copy Layer Style, then click right mouse button on just created text layer and select Paste Layer Style.

step05 find

Change foreground color to grey (#6D6D6D) and pick Horizontal Type Tool (T). Then choose Arial 14 px size font and write the address of your company (address in the example is not real).

step05 address

Now go to Google Maps and enter your company address, after that click print screen button (PrtSc) in your browser and create a new layer called “Map”. Then click Ctrl+V to paste your printed screen.

step05 google maps

Now pick Rectangular Marquee Tool (M) and select desired area of the printed map. After that go to Select > Inverse and delete selected area. An example shown on the picture below.

step05 map

Now click right mouse button on “Map” layer and select Blending Options… after that apply following option.

step05 map blending options

step05 map with style

Step 6: Content

Minimize “Map” and then “Sidebar” groups by clicking a small grey arrow next to the group’s name. Then create a new group (Layer > New > Group…) called “Content”. After that create a new layer called “Ribbon” and using Rectangle Tool (U) draw a rectangle shape as shown on the example below.

step06 rectangle

Now grab Custom Shape Tool (U) and load “Arrows” set. Then choose “Arrow 12″ shape and draw it as shown on the example below.

step06 draw an arrow

Click Ctrl+T while arrow layer is selected and set width (W) to -100%.

step06 rotate an arrow

Hold Ctrl button and click on arrow layer thumbnail to make a selection, after that click on “Ribbon” layer to make it active and delete selected area. Also delete arrow layer.

step06 delete selected area

Now click right mouse button on “Ribbon” layer and select Blending Options… after that apply following options.

step06 ribbon drop shadow

step06 ribbon gradient overlay

step06 ribbon with style

Create a new layer and place it under the “Ribbon” layer. Then change foreground color to dark grey (#505050) and pick Rectangle Tool (U). After that draw a small shape as shown on the picture below.

step06 shape

Now click Ctrl+T and set rotation to 45 degrees. After that click right mouse button on shape layer and select “Rasterize Layer”.

step06 rotate shape

Now move your shape as shown on the example. Then pick Rectangular Marquee Tool (M) and select area as shown on the picture below. After that delete selected area. Finally click Ctrl+D to deselect.

step06 ribbon shadow

Change foreground color to grey (#EEEEEE) and pick Horizontal Type Tool (T). After that choose Bebas Neue 72 px size font and write “Our company” or something similar.

step06 our company

Now expand “Header” group by clicking a small grey arrow next to the group name and click right mouse button on text layer and select “Copy Layer Style”. After that go back and click right mouse button on “Our company” text layer and select “Paste Layer Style”.

step06 our company with style

Now create a new group inside the “Content” group. Go to Layer > New > Group… and name it “Video”. Then set foreground color to grey (#EEEEEE). After that pick Rounded Rectangle Tool (U), set Radius to 5 px and draw a rounded rectangle shape as shown on the picture below.

step06 video rounded rectangle

Now click right mouse button on your rounded rectangle shape layer and select Blending Options… after that apply outer glow option.

step06 rounded rectangle outer glow

Now go to “Create a Cosmic Scene with Photoshop and Cinema 4D” tutorial by Ionut Ciursa and download the final result image. Then drag this picture to your Photoshop window and then using Move Tool (V) drag to your current document. After that click Ctrl+T and set the width and height to 40%.

step06 video picture

Now hold Ctrl button and click on rounded rectangle shape thumbnail to make a selection. After that go to Select > Modify > Contract… and enter 6 pixels. Then click Shift+Ctrl+I and delete selected area.

step06 edited video picture

Again choose Rounded Rectangle Tool (U), set Radius to 5 px and draw a shape as shown on the example.

step06 play button

Next click right mouse button on this shape layer and select Blending Options… after that apply following options.

step06 play button inner shadow

step06 play button gradient overlay

step06 play button stroke

step06 play button with style

Now create a new layer (Shift+Ctrl+N) called “Play”. Then change foreground color to white (#FFFFFF) and choose Custom Shape Tool (U). After that load “Arrows” set, select “Arrow 9″ shape and draw an arrow.

step06 play

Now click right mouse button on arrow shape and select “Rasterize Layer”. After that pick Rectangular Marquee Tool (M) and select the rectangular part of the shape and delete it.

step06 play shape

We’ve done with the video part. Now minimize “Video” group by clicking a small grey arrow next to the group name. Then set foreground color to grey (#6D6D6D). After that choose Horizontal Type Tool (T), Arial 14 px size font and write something about your company.

step06 about company

Now copy the “Ribbon” layer and its shadow (grey triangle shape) by clicking Ctrl+J while mentioned layers are selected. Then copy a text on the ribbon and change it to “Our staff” or something similar.

step06 our staff

Now create a new group (Layer > New > Group…) and name it “Staff”. Make sure that “Staff” group is inside the group called “Content”. After that create on more group inside the “”Staff” (Layer > New > Group…) called “Member”. Then change foreground color to grey (#EFEFEF), pick Rectangle Tool (U) and draw a small square (hold Shift) as shown on the example.

step06 square

Now click right mouse button on square shape layer and select Blending Options… after that apply outer glow option.

step06 square outer glow

step06 square with style

Now pick your staff member photo and drag it to your Photoshop window. After that using Move Tool (V) drag it to your current document. Then click Ctrl+T and resize your photo to fit in just created square.

step06 member photo

Now hold Ctrl button and click on square layer thumbnail to make selection. After that go to Select > Modify > Contract… and enter 5 pixels. Then click Shift+Ctrl+I and delete selected area. Finally click Ctrl+D to deselect.

step06 member photo edited

Change foreground color to dark grey (#515151) and pick Horizontal Type Tool (T). Then choose Arial 18 px size font and write your staff member name and the position.

step06 staff member

Now change foreground color to (#6D6D6D) and write something about your staff member using same tool.

step06 about staff member

Now minimize “Member” group by clicking a small grey arrow next to the group name. After that click right mouse button on “Member” group and select Duplicate Group… then move duplicated group to the right and make two more duplicated groups and move to bottom.

step06 staff members

Change foreground color to black (#000000) and minimize “Staff” group. After that pick Rounded Rectangle Tool (U), set Radius to 5 px and draw a button as shown on the example.

step06 learn more button

Now reduce button’s Opacity to 10%. After that change foreground color to (#ECECEC) and select Horizontal Type Tool (T). Then choose 30 px size Bebas Neue font and write “Learn more” or something similar in the center of the button.

step06 learn more

Now click right mouse button on “Learn more” text layer and select Blending Options… then apply drop shadow option.

step06 learn more drop shdow

step06 learn more with style

Step 7: Footer

Minimize “Content” group by clicking a small grey arrow next to the group name and create a new group (Layer > New > Group…) called “Footer”. After that change foreground color to white (#FFFFFF) and select Horizontal Type Tool (T). Then choose 13 px size Arial font and write your copyright.

step07 copyright

Finally click right mouse button on copyright text layer and select Blending Options… then apply drop shadow option.

step07 copyright drop shadow

Congratulations! We’ve finally finished our business web layout.

Final Result

Click on the image below to see the work in full scale.

business preview

We’re done! In this tutorial you have seen how to create 3D elements, how to use shadows, gradients, patterns, styles and much more. Hope you understood all the steps. If you have any questions or you have something to say please express your opinion in comments below.

Unlock the key of your success for testking HP0-J40 exams & pmp dumps by using our latest mcitp dumps and HP0-S25 prep resources and testking sscp.



Comments
  1. Great post for the photoshop users.Thanks

  2. nice to learn step by step

  3. Great tutorial! Looks professional. Thanks for sharing!

  4. Excellent! Very nice work!

  5. Thanks for this productive article, this will help me in my Freelance projects.

  6. Awesome tutorial and really nice clean layout, thanks

  7. Hi, am new to web design & photoshop, am unable to follow as from step 3 :(

  8. i’m newer to html – question: how to make workable links? is that through mapping?

  9. Man i found this hard to follow and frustrating when it came to grouping the button layers ..i gave up

  10. Great simple and easy to follow tutorial, this is the kind of layout we will use for are new design, thanks for sharing.

  11. First, really great tutorial :)
    I would like to know what to do after you finish the image, how to integrate everything in you html ???

  12. Thanks for this I learn t so many thinks with this tut !!

  13. Fantastic website you have here but I was curious if you knew of any forums that cover the same topics talked about here? I’d really love to be a part of online community where I can get comments from other experienced people that share the same interest. If you have any recommendations, please let me know. Thanks a lot!

  14. Great read. I also think it could be a bit longer ;)

  15. muy buen tutorial