Snickles: Create A Modern Business Template In Adobe Photoshop

Posted in Tutorials, Web Interface2 years ago • Written by 3 Comments

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:

Resources for this tutorial

Step 1: Setting up the Document

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.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

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.

Step 2: Working on Base Background for Header and Slider

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

  • Dorp Shadow: #000

  • Inner Shadow: #0f3b69

  • Gradient Overlay: #051f3a, #082c50

  • Stroke: #06213a

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.

Step 3: Working on Header

Our header will contain Logo, Navigation and RSS Feed.

Logo

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

  • Font Name: Snickles
  • Weight: Normal
  • Size: 60pt

Apply this Blending Option

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #c0c0c0, #ffffff

Result

Navigation

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

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #fea201, #fccf6a

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

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 12pt
  • Color: #fff, #ac5b00

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

  • Dorp Shadow: #fff

  • Inner Shadow: #000

Result

RSS Feed

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

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fff

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

Result

Step 4: Working on Slider

Our slider will contain text title & description, button and a browser display.

Text Title & Description

Using Text Tool(T) place a dummy text using the text format provided below.

Title

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 24pt
  • Color: #fff

Description

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #dddddd

Button

Using Rounded Rectangle Tool(U) create a 150px by 35px shape.

Apply this Blending Option

  • Dorp Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

Result

Label it with View Details using Text Tool(T)

Description

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 14pt
  • Color: #fff, #02b0f3

Result

Display

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

  • Drop Shadow: #404040

  • Inner Shadow: #fff

  • Gradient Overlay: #f38600, #fed676

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%

Controls

Using Ellipse Tool(U) create a 14px by 14px shape. Place it on the center as shown in the screenshot below.

1st Shape

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #03b8ff, #89e3fe

2nd & 3rd Shape

  • Dorp Shadow: #fff

  • Inner Shadow: #000

  • Color Overlay: #051f3a

Result

Highlights

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

Step 5: Working on Consult Area

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

  • Drop Shadow: #bfbfbf

  • Gradient Overlay: #f5f4f4, #fdfdfd

Result

Using Text Tool(T) add a dummy text.

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Light Condensed
  • Size: 20pt
  • Color: #444444

Button

Create a 210px by 50px shape using Rounded Rectangle Tool(U), apply the same Gradient Overlay and Inner Shadow.

Apply this Blending Option

  • Stroke: #cf8606

Label it with CONSULT NOW using Text Tool(T).

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Roman
  • Size: 18pt
  • Color: #fff, #cf8606

Result

Step 6: Working on Services

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

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 18pt
  • Color: #444444

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.

Step 7: Working on Video Tour

Using Text Tool(T) add a header text.

Font Settings

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 22pt
  • Color: #444444

Using Rectangle Tool(U) create a 460px by 255px shape, color #dddddd.

Apply this Blending Option

  • Outer Glow: #bfbfbf

  • Stroke: #fff

Place some sample play button at the center of the shape.

Result

Step 8: Working on About Us and Testimonials

Header font is the same, for the paragraph use the font settings below.

Font Settings

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #444444

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

  • Font Name: Arial
  • Weight: Regular
  • Size: 215pt
  • Color: #dad9d9

Result

Step 9: Working on Footer

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.

Quick Links

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

  • Font Name: Helvetica Neue
  • Weight: Condensed
  • Size: 18pt
  • Color: #fff

Links

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fff

Latest Posts

For the latest post still the same text format as we did in Quick links.

Date

  • Font Name: Arial
  • Weight: Regular
  • Size: 11pt
  • Color: #8496a9

Latest Tweets

Text

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #8496a9

Link

  • Font Name: Arial
  • Weight: Regular
  • Size: 12pt
  • Color: #fcc757

We Socialize

Place the Icons you have downloaded from the resource accordingly as shown in the screenshot above.

Apply this Blending Option

  • Drop Shadow: #000

  • Inner Shadow: #fff

  • Gradient Overlay: #03b8ff, #89e3fe

Copyright

Here is our Final Result!


PSD Download

I hope you enjoyed and learned something from this tutorial. Don’t forget to comment, share and subscribe. Thank you! :)

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

37 Written ArticlesWebsiteGoogle+

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. See his works at burnstudio. Other than that he loves Coffee and his Girl.

3 Comments
  • Samuel

    Thursday, November 24th, 2011 01:12

    1

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

    0
  • Farid

    Thursday, November 24th, 2011 11:04

    2

    Very glossy & standard. I think, its easy to create such template following the tutorial. Also thanks for providing resource to practice this.

    0
  • Sukhwinder Singh

    Friday, November 25th, 2011 14:46

    3

    Very Nice design tutorial I always welcome to great idea, colors. Definitely It will helpful for designs.

    Thanks for Great Tutorial Michael John Burns

    0
  • Sukhwinder Singh

    Friday, November 25th, 2011 14:46

    3

    Very Nice design tutorial I always welcome to great idea, colors. Definitely It will helpful for designs.

    Thanks for Great Tutorial Michael John Burns

    0
  • Farid

    Thursday, November 24th, 2011 11:04

    2

    Very glossy & standard. I think, its easy to create such template following the tutorial. Also thanks for providing resource to practice this.

    0
  • Samuel

    Thursday, November 24th, 2011 01:12

    1

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

    0

Comments are closed.

54.211.153.104 - unknown - unknown - US