Total Followers 132,503
Good day! Today we will be designing a modern business template in Adobe Photoshop.. This template will contain a header, slide show, service area, video, about us, testimonials, and footer. What you will be learning from this tutorial are how to achieve that 3D looking interface in just a few simple steps, creating patterns, combining textures, colors, alignments and many more. So get ready and let’s get started!
Here is what we will be making, click on the image for full preview:
Start by creating a 1400px x 1700px document in Photoshop.
Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.
The total width of this site will be 960px. So, let’s create our 1st guide by going to View – New Guide, set the value to 220px. Repeat the step of create a guide but now change the value to 1180px, this will make a total of 960px to the center of our canvas.
What we’re trying to achieve here is a 3D like surface to hold our slider preview and on top of it will be our logo, navigation and RSS feed.
To start using Rectangle Tool(U) create a 100% by 960px shape, color #092f56. Next, using Ruler Tool(I) measure 140px staring from the bottom of the shape towards top and drag a guide from the ruler.
Next add a 1px line, color #062340 just 1px above the guide.
Using Rectangular Marquee Tool(M) create a selection as shown in the screen shot below. Set the Foreground color to #000 and select Linear Gradient Foreground to Transparent then, fill the selection with it. Once you have fill it set the Blend Mode to Multiply, Opacity to 30%.
Select Rectangle Tool(U) and create a 100% by 45px shape. Place it as shown in the screenshot below.
Apply this Blending Option
Result
Next you need to extract the paper texture that you have downloaded. Select Paper 9 and place it into our canvas as shown in the screenshot below.
Set the Blend Mode to Multiply and Opacity to 30%. Later on when we finished putting all the content for header and slider we will be adding highlights to our base background.
Our header will contain Logo, Navigation and RSS Feed.
I used a font called Snickles you can get it on Font Squirrel. Now type in your website name using the font settings below.
Font Settings
Apply this Blending Option
Result
Using Rounded Rectangle Tool(U) set the Radius to 20px. Create a 580px by 50px shape as shown in the screenshot below.
Apply this Blending Option
Result
Using Text Tool(T) add site links Home, Blog, About Us, Free Consultation and Contact Us. Distance with each links will be 41px so go ahead and measure it with Ruler Tool(I)
Font Settings
Duplicate the text and exclude the Home link in a separate text layer. Place it under the original text layer and move it 1px above using arrow up key and lastly change the color to #d38904. For the other links place it below the original text layer and move it 1px below and change the color to #ffe91e. You may now have an embossed looking links.
We will be adding dividers. Using Line Tool(U) with a fill color #fee79e create a 1px line and place it as shown in the screenshot below.
Below all the text layers create a 70px by 30px shape, color #ee9e0d using Rounded Rectangle Tool(U) and place it as shown in the screenshot below.
Apply this Blending Option
Result
Download RSS button from the resource and place it as shown in the screenshot below and add a text using Text Tool(T)
Font Settings
Apply this Blending Option
Result
Our slider will contain text title & description, button and a browser display.
Using Text Tool(T) place a dummy text using the text format provided below.
Title
Description
Using Rounded Rectangle Tool(U) create a 150px by 35px shape.
Apply this Blending Option
Result
Label it with View Details using Text Tool(T)
Description
Result
First using Rectangle Tool create a 450px by 250px shape.
Select Rounded Rectangle Tool(U), set the Radius to 5px. Create a 450px by 20px and fill the rounded corners in the bottom.
Apply this Blending Option
Result
Open up the web ui elements. Cut out the buttons and resize it to fit to the shape that we have created. Refer to the screenshot below.
Next create a new layer below the white shape we have created. Select Elliptical Marquee Tool(M) and create a selection as shown in the screenshot then fill it with #000. Go to Filter – Blur – Gaussian Blur – 2 and change the layer Opacity to 50%
Using Ellipse Tool(U) create a 14px by 14px shape. Place it on the center as shown in the screenshot below.
1st Shape
2nd & 3rd Shape
Result
Select Dodge Tool(O) set Exposure to 10%, also set the Dodge size to 200px.
Duplicate the base layer shape and rasterize it. Using Dodge Tool(O) lighten up the area as shown in the screenshot below.
Result
To create a pattern create a new 15px by 15px transparent document. Using Pencil Tool(B) create a pattern the same on the screenshot below.
Go to Edit – Define Pattern, name it zigzag. Now, create a 100% by 150px shape using Rectangle Tool(U). Select Paint Bucket Tool(G) and change Foreground to Pattern from the dropdown list. Create a selection at the very bottom of the shape and fill it with pattern that we made.
Apply this Blending Option
Result
Using Text Tool(T) add a dummy text.
Font Settings
Create a 210px by 50px shape using Rounded Rectangle Tool(U), apply the same Gradient Overlay and Inner Shadow.
Apply this Blending Option
Label it with CONSULT NOW using Text Tool(T).
Font Settings
Result
Service area is divided into 4 columns. Each column has a size of 210px by 125px. The distance of each column will be 40px. Create this guide by measuring using Ruler Tool(I).
Open up the icons set that you have downloaded from the resource and place it as shown in the screen shot below. Next label each Icon using Text Tool(T).
Font Settings
Using Line Tool(U) color #bfbfbf, #f8f8f create lines as shown in the screenshot below.
Once you are done, merge all the line shape and mask it by clicking the mask icon from the layers panel. Using Brush Tool paint every edges of the line. You should have similar to the screenshot below.
Using Text Tool(T) add a header text.
Font Settings
Using Rectangle Tool(U) create a 460px by 255px shape, color #dddddd.
Apply this Blending Option
Place some sample play button at the center of the shape.
Result
Header font is the same, for the paragraph use the font settings below.
Font Settings
For the thumbnail in the testimonials area create a shape 70px by 70px and apply the same blending option as we did in our video tour. Change the stroke size to 3px. For the quotation follow the font settings below.
Font Settings
Result
Our footer will contain Quick Links, Latest Posts, Latest Tweets, We Socialize, and Copyright. The width of this will be the same to our 4 columns as we did in the services area.
To start let’s create the base background first. At the very bottom of the canvas create a 100% by 45px shape, color #04203b using Rectangle Tool(U). On top of it create another shape size 100% by 450px shape, color #052342. Duplicate the paper texture we made on our header and slideshow area then place it below to our footer.
The header title will be place 30px below the shape. Each link will have a distance of 15px from the dividers. Divider color will be #265686
Header
Links
For the latest post still the same text format as we did in Quick links.
Date
Text
Link
Place the Icons you have downloaded from the resource accordingly as shown in the screenshot above.
Apply this Blending Option
I hope you enjoyed and learned something from this tutorial. Don’t forget to comment, share and subscribe. Thank you! :)
Get The Only Freelancer crash course you will ever need to read!
Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. Other than that he loves Coffee and his Girl.
Friday, November 25th, 2011 14:46
Very Nice design tutorial I always welcome to great idea, colors. Definitely It will helpful for designs.
Thanks for Great Tutorial Michael John Burns
Thursday, November 24th, 2011 11:04
Very glossy & standard. I think, its easy to create such template following the tutorial. Also thanks for providing resource to practice this.
Thursday, November 24th, 2011 01:12
Very nice design right here! I love designing websites with colors and ideas. Great job. One thing I would do is maybe add some glow to the footer as well. Looks glowy all around. But that’s just a preference :).
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Samuel
Thursday, November 24th, 2011 01:12
Very nice design right here! I love designing websites with colors and ideas. Great job. One thing I would do is maybe add some glow to the footer as well. Looks glowy all around. But that’s just a preference :).
Farid
Thursday, November 24th, 2011 11:04
Very glossy & standard. I think, its easy to create such template following the tutorial. Also thanks for providing resource to practice this.
Sukhwinder Singh
Friday, November 25th, 2011 14:46
Very Nice design tutorial I always welcome to great idea, colors. Definitely It will helpful for designs.
Thanks for Great Tutorial Michael John Burns