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.

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.

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.

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.

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.

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

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.

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

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

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.

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.

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

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

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

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.

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

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.

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.

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

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.

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.

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.

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:”.

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

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.

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.

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.

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

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.

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.

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

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.

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

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

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.

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

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.

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

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.

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.

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

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.

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

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

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.

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

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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

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.

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

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

Final Result

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

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.