Business Website Design in Photoshop: Tutorial
Design a Clean and Professional Business Layout
Today I would like to show you how to design a clean and solid fictional business layout. Following the steps in this tutorial you will be able to learn how to use guides, how to create a detailed background, how to create professional buttons and also some typography techniques. Creating a clean business website design is easy. Hope you will find this tutorial useful and techniques shown in this tutorial will help you to gain more designing skills and will help in your future projects.
Tutorial Resources
- Icons: 108 Mono Icons: Huge Set of Minimal Icons
- Fonts: Bebas Neue
- Photo: Interior Design
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 1020 px with a white background.
Step 2: Add guides
Now add guidelines View > New Guide… vertical at 120 px, 440 px, 760 px, and 1080 px. Also add horizontal guidelines at 60 px, 95 px, 385 px and 420 px, 750 px and 970 px.
Step 3: Background
Double click on locked Background layer and name it “Grey”. After that set foreground color to bright grey (#F2F2F2) and using Paint Bucket Tool 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.
After that create a new layer (Layer > New > Layer…) and name it “Dark grey”. Change foreground color to dark grey (#272727) and pick Rectangular Marquee Tool (M). Then select areas between the guidelines as shown on the picture below and fill them with dark grey.
Now go to Filter > Noise > Add Noise… and set Amount to 0,8%, Distribution to Uniform and check Monochromatic option.
Now create a new layer (Layer > New > Layer…) and name it “Gradient”. Then choose Gradient Tool (G) and set your gradient colors from blue (#2D648F) to brighter blue (#428DC8). After that using Rectangular Marquee Tool (M) select area between the second and the fourth guideline from the top and fill your “Gradient” layer dragging from bottom to top (hold CTRL while dragging).
Go to Filter > Noise > Add Noise… and set Amount to 1%, Distribution to Uniform and check Monochromatic.
Create a new layer above all others go to Layer > New > Layer… and name it “Stripes”. Change foreground color to white (#FFFFFF) and pick Brush Tool (B), load Basic brushes and choose Soft Mechanical 300 px size brush. Then draw a blurred circle on the gradient. An example shown on the picture below.
Now pick Rectangular Marquee Tool (M) and select half of the drawn circle. Then delete the selection and click CTRL+T and set Rotation to 35 degrees. After that change layer blending mode to Overlay and reduce Opacity to 15%.
While Stripes layer is active click CTRL+J to make a copy. Then make some copies and move them to different places. An example shown on the picture below.
Now hold CTRL button, select all stripe layers and click right mouse button, then select Merge Layers. After that change blending mode to Overlay.
Hold CTRL button and click on Gradient layer thumbnail to make selection. Then click on Stripes layer to make it active, then click Shift+CTRL+I and delete selected area.
Create a new layer go to Layer > New > Layer… and name it “Whiteline”. Then pick Pencil Tool (B) and holding CTRL button draw horizontal 1 px size white (#FFFFFF) line. Then zoom your document and place white line below the first guideline on the top. After that reduce line layer Opacity to 25%.
Step 4: Header
Now minimize Background group by clicking small grey triangle next to the group name. After that create a new group (Layer > New > Group…) and name it “Header”. Make sure that Header group is above the Background group. After that download Mono Icons and drag bag32.png file to your Photoshop window. After that drag this icon to your business layout using Move Tool (V). Place it in “Header” group. Double click on its name and rename it to “Briefcase”.
Now click right mouse button on Briefcase layer name and select Blending Options… and apply following options.
Pick Horizontal Type Tool (T), then select Bebas Neue font, change size to 24 px and write your business title.
Now click right mouse button on Briefcase layer and select Copy Layer Style, then click right mouse button on your title layer and choose Paste Layer Style.
Set foreground color to grey (#F6F6F6) and pick Horizontal Type Tool (T), choose 13 px size Arial font and write your top navigation links, for example Home, About, Blog, etc.
Now click right mouse button on your navigation layer and select Blending Options… after that apply Drop Shadow option as shown on the picture below.
Step 5: Introduction
Minimize Header group by clicking a small grey triangle next to the Header group name and create a new group (Layer > New > Group…) and name it “Intro”. Place this group below the Header group. Then create a new layer inside the Intro group, go to Layer > New > Layer… and name it “Video box”. After that set foreground color to #EBF4F4 and pick Rounded Rectangle Tool (U), set Radius to 4 px and draw quite big box between the second and the third horizontal guidelines. An example shown on the picture below.
Now click right mouse button on the Video box layer and select Blending Options… after that apply Drop Shadow option.
Now pick your picture for video box (photo used in this tutorial is from sxc.hu) and drag it to your document using Move Tool (V). Then place it above Video box layer and resize it to fit previous layer’s size (CTRL+T). After that hold CTRL button and select Video box layer thumbnail to make selection. When you have selection go to Select > Modify > Contract… and enter 8 pixels. Then click on your picture layer to make it active and go to Select > Inverse, now delete selected area.
Create a new layer Shift+CTRL+N and name it Light. Place it above picture layer. Now set foreground color to white (#FFFFFF) and choose Brush Tool (B). Then load Basic Brushes set and pick Soft Mechanical 150 px size brush. After that click once in the center of the picture.
Now set Light layer’s blending mode to Overlay.
Create a new layer called Video button (Shift+CTRL+N). Then pick Rounded Rectangle Tool (U) and set radius to 3 px. Now draw a button in the center of our video object. An example shown on the picture below.
Now click right mouse button on Video button layer and select Blending Options… after that apply following options.
Now pick Custom Shape Tool (U) and load Arrows set. Then choose Arrow 9 shape and draw it above your Video button layer.
Now click right mouse button on arrow layer and select Rasterize Layer. After that choose Rectangular Marquee Tool (M) and select rectangle on the arrow, then delete it.
Now find your Briefcase layer and click right mouse button on it, then select Copy Layer Style, and after that click right mouse button on your triangle layer and choose Paste Layer Style. Now click twice on triangle layer name and change it to Play.
Change foreground color to dark grey (#262626) and pick Horizontal Type Tool (T), then choose Bebas Neue font (you can download it for free from Font Squirrel), set size to 43 px and write your heading.
Now click right mouse button on heading layer and select Blending Options… after that apply following options.
Now choose 14 px size Arial font and write short introduction message. After that click right mouse button on this text layer and select Blending Options… and apply Drop Shadow option.
Now create a new group called Buttons, go to Layer > New > Group… then create a new layer inside the Buttons group (Shift+CTRL+N) and name it Button. Then pick Rounded Rectangle Tool (U), radius set to 4 px and draw a button. An example shown on the picture below.
Now find Video button layer and click right mouse button on it and select Copy Layer Style after that go back and click right mouse button on just created button and select Paste Layer Style.
Now pick Horizontal Type Tool (T), choose 30 px size Bebas Neue font and write “Take a Tour” on the button. After that find Play (triangle) layer and click right mouse button on it and select Copy Layer Style then click right mouse button on your “Take a Tour” layer and select Paste Layer Style.
Create another analogical button using above shown actions with “Signup” text.
Step 6: Services
Minimize Intro group and go to Layer > New > Group… create a new group called Services, and one more group inside the Services group called Column. Then download Mono Icons and pick star32.png icon, then drag it to your document using Move Tool (V) and click right mouse button on it and select Blending Options… after that apply following options.
Now set foreground color to grey (#333333) and pick Horizontal Type Tool (T), choose 16 px size Arial font and write small headline. Then reduce size to 13 px and write short service description. After that click right mouse button on text layer and select Blending Options… and apply Drop Shadow option.
Now minimize Column group and click right mouse button on its name and select Duplicate Group… then move your duplicated group to the right. After that change the icon, paste layer style from the first one and also change description text. Then make more group duplications until you have all services covered.
Step 7: Footer
Minimize Services group and create a new group below the Services group. Go to Layer > New > Group…and name it Footer. Pick Horizontal Type Tool (T), choose Bebas Neue 30 px size font and write “Latest from the blog” or something similar. After that paste layer style that was used on Play, Take a Tour or Signup layers.
Now change foreground color to grey (#A5A5A5) and choose Arial 13 px size font. Then write your blog post title. After that click right mouse button on blog post title layer and select Blending Options… after that apply Drop Shadow option as shown on the picture below.
Now using the same color and font write few dots to make a line. Also apply drop shadow option.
Now repeat above shown actions until you have 3-4 post titles.
Using the same techniques create analogical columns for archives, stay in touch, about us. You can create a groups inside the Footer group for Blog, Archives, Stay in touch and About to stay organized. An example shown on the picture below.
Now create a new layer called Black line (Shift+CTRL+N) after that set foreground color to black (#000000) and pick Pencil Tool (B), then draw 1 px size horizontal line above the last horizontal guideline. An example show on the picture below.
Now reduce Black line layer’s Opacity to 20%.
Now create another layer (Shift+CTRL+N) called White line, then change foreground color to white (#FFFFFF) and draw 1 px size horizontal white line below the last horizontal guideline. After that reduce layer’s opacity to 5%.
Change foreground color to grey (#A5A5A5), then pick Horizontal Type Tool (T) after that choose 13 px size Arial font and write your copyright. Later apply drop shadow option as used for previous text like blog post titles or dots.
Final Result
Source files
- Business.psd (13.3 MB)
Journey Digital Media would like to thank our author: Tomas Laurinavičius for putting this amazing business website design tutorial for Photoshop together. He did a great job. After completing the tutorial we would love to see what you have done with our tutorial.
Author: Tomas Laurinavičius
Tomas Laurinavičius is a blogger and designer from Lithuania. He’s interested in web design, Photoshop and WordPress design. You can follow him on Twitter or add him as a friend on Facebook. Get in touch with him if you have interesting projects you want to collaborate on.
23 Responses to “Business Website Design in Photoshop: Tutorial”
Trackbacks/Pingbacks
- - January 14, 2011
- - January 14, 2011
- - February 18, 2011
- - March 3, 2011
- - June 10, 2011
- - June 10, 2011
- - June 11, 2011
- - June 13, 2011
- - July 1, 2011
- - January 27, 2012
- - February 14, 2012
Great Post! Thanks for sharing……..
You are welcome. Come by again.
10/10 from start to finish. Outstanding tutorial, thank you.
Thank you. Tomas did a fantastic job and putting this tutorial together for us. Hope you enjoyed it.
I love to do a design by following your tutorial. nice post man keep it up !
Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!
I’m glad that this tutorial finally got published. Thank you for kind words I really appreciate them.
Good one tomas
Nice tuts !
Thanks for the compliment and for posting it on your website.
thank!!!
Great tutorial. But, 1 little problem: can’t see all of pictures!