Corporate Business - Design a Modern & Stunning Web Layout
-
Upload
victor-chang -
Category
Documents
-
view
213 -
download
0
Transcript of Corporate Business - Design a Modern & Stunning Web Layout
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
1/35
Corporate Business Design a Modern & Stunning Web Layout
Posted in: Tutorials Written by: Stelian Subotin March 29th, 2011
In this tutorial were going to create a clean and professional business layout inPhotoshop. It has a great mix of colors and elements and is great for business
owners and service providers. This tutorial, though long, is very detailed. Onlyworked with Photoshop a bit? Or maybe youre just starting to design web layoutsusing Photoshop, no matter what your skill level if you carefully follow each of thesteps at the end youll have something a finished layout similar to mine.
Preview of Final Result
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
2/35
Resources
Step 1
Open Photoshop and create a new document that is 1200 x 1200 pixels, 72 dpi,and RGB Color. Fill the layer with white. (Ctrl+Backspace or Delete)
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
3/35
Step 2
Now create a rectangle for the header and fill it with a white-grey color, then use thecolors on the image for the Gradient Overlay. Our search and logo will eventuallybe part of the header.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 3 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
4/35
Step 3
Create a new rectangle above the previous one, with attributes as shown below.The following drop shadow effect creates a look of a 1 pixel stroke which doesincrease the look of that simple bar. Note: this step creates a horizontal line.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 4 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
5/35
Step 4
Now add the Gradient Overlay layer style with the hex codes indicated.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 5 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
6/35
Step 5
Add a white 1 pixel stroke. The following stroke of 1 pixel will divide the grey shadoweffect. Itll eventually work as a divider.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 6 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
7/35
Step 6
Make one more rectangle in the middle-right zone, and fill it with white and add a 1px stroke as indicated it will be our search box.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 7 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
8/35
Step 7
One more rectangle should be created and filled with blue. Set the inner shadow asindicated below, this will be our search button. This blue works great in combinationwith grey, white and light-grey. Blue will be the major contrasting color we use as wework through this template.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 8 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
9/35
Step 8
Add the Gradient Overlay details to the button with the details from image.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 9 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
10/35
Step 9
Add a 1 px stroke to the button with the color indicated. Take a look at the first andthe final result of the button so you can see the difference all these details made.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 0 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
11/35
Step 10
Now add this drop shadow effect for the text placed in the search box, using PTSans Bold. This will be the final step in creating your search button. You may wantto try other fonts, but the PT Sans Bold is really good for this small button.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 1 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
12/35
Step 11
Make another fill under the header section, this will be the navigation area. Here wewill place the navigation links of our template.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 2 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
13/35
Step 12
Write your navigation links using a dark-grey color, then add a white drop shadoweffect. The effect used for the navigation links is the same used for the searchbutton.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 3 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
14/35
Step 13
With 1px vertical line, make divisions between each links. The lines should be blackand will really increase the beauty of the navigation area.
Step 14
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 4 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
15/35
Over the home section, make a fill with the blue and then add a Gradient Overlaystyle as indicated.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 5 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
16/35
Step 15
Copy the Home link, this time color it white and add a drop shadow effect.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 6 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
17/35
Step 16
Create a big, grey zone under the navigation, it should be about 30% of the layout.This will be the background for the featured area.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 7 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
18/35
Step 17
Now create a big, white rectangle and add some shadow with the details shown. Abig stock image, a big headline and some text with another great button will beadded.
Step 18
Add a any dummy image you want to that featured area. Be sure it covers more than80% of the area. The one I chose is from a stock website.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 8 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
19/35
Step 19
Add some text to it, use the PT SANS Bold font and make the font big.
Step 20
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 1 9 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
20/35
The remaining area should be filled with grey, in it well place some text. This isreally a secondary area which describes the image, the services, the company itself,or whatever youd like.
Step 21
Place some blue-colored text which will be the title of the information below. Use thedetails in the image for Drop Shadow style.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 0 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
21/35
Step 22
Add some dummy text. This could be some important information or whatever youdlike.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 1 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
22/35
Step 23
Create another grey area under the featured zone, where we will add some text andicons later. Add the details as stated on the image. Mostly, the icons will promote theservices offered by the company behind the website.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 2 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
23/35
Step 24
Continue by adding a Gradient Overlay style for the last rectangle we have createdin the anterior steps.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 3 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
24/35
Step 25
Now we are adding titles and icons, as well as some divisions. The icons can befound in the resource list at the beginning of the tutorial. Be sure to choose youricons and text thoughtfully.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 4 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
25/35
Step 26
At the border of both zones, create a small circle and fill it with dark brown color. Addsome inner shadow as stated on the image.
Step 27
Continue by adding a drop shadow layer style. It is another small detail, but it really
makes that button zone minimalistic, nice-looking and well designed.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 5 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
26/35
Step 28
To finish, add a Gradient Overlay effect.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 6 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
27/35
Step 29
By using the Custom Shape Tool (U), create an arrow in both circles. Now add thedetails shown on the screenshot.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 7 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
28/35
Step 30
Continue by adding some Color Overlay for the arrow. It should also be a blue colorbecause otherwise, it will not fit the contrast and the colors used on the wholetemplate.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 8 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
29/35
Step 31
Add a video screenshot in the free space and place a title for it. For this template, Ihave used a simple screenshot of a YouTube widget.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 2 9 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
30/35
Step 32
Add the text Product Highlights and Case Studies. Let the text under the ProductHighlights be links so you could showcase some friends websites or resources youadmire/promote.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 3 0 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
31/35
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
32/35
Step 34
Dont forget to make a relevant/small footer for our template. If you have paidattention, you should know how to create the same effect as below.
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 3 2 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
33/35
All done! If you have questions or suggestions, feel free to drop a comment. I hopeyou enjoyed this whole tutorial!
For Further Reading:
MyProfile How to Design a Social Network Page
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &
1 s t w e b d e s i g n e r . c o m / / b u s i n e s s - l a y o u t - t u 3 3 / 3 5
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
34/35
-
8/7/2019 Corporate Business - Design a Modern & Stunning Web Layout
35/35
4
Articles
Visit Stelian Subotin's Website | Follow Stelian Subotin On Twitter
Stelian Subotin is an enthusiast and design fan from Republic of Moldova. Right nowhe is working on his new design-related blog called Rocket Graphics. VisitRocketGraphs or follow his twitter account @rocketgraphs.
Why Become Premium?
You will get exclusive premium high-quality icons!You will have access to all our tutorial full PSD's as well as premium tutorials!You will get countless discount codes from many companies!You will get premium Wordpress themes (new each month)!
..and much more just for 9.95$! Read more now!
2 0 1 1 / 4 / 2 0 C o r p o r a t e B u s i n e s s - D e s i g n a M o d e r n &