Design Simple and Elegant Business Web Template in Photoshop

Filed Under: Articles, Freebies, Photoshop Sources, Themes / Template, Tip and Tutor, Web Designs by fandy February 7, 2011, 06:01

elegant_web_template

This is the first tutorial that I made, and it was not as easy as I imagined. It is easier to design the template itself rather than explains the process steps. But I want to share, share my knowledge while learning to be better.

Perhaps the explanation of this tutorial will you get a lot of shortcomings, please tell me for a better in future.

In this tutorial I give you the basic steps in designing a business website in Photoshop, one of the first things they teach you when you get an online web design degree.  This is a simple layout, but elegant design. Here I use Adobe Photoshop CS5 and use standard style effects, mostly using the Drop Shadow. Not much use outside sources and little icons.

Starting

Before starting the tutorial maybe could be useful to take a look the final result, click the image below to preview in full scale.

elegant_web_layout-600

Well let’s get started …!

Step 1 – Set up the document

Open a new document in Photoshop and name it “elegant_web_layout” or whatever you like, set 1000x1000px, resolution 72 pixel/inch, RGB color of 8 bit.

new_document

Now we have one empty layer, name the layer “background”. Then set the foreground color #212121, [Alt]+[Del] to fill the layer with foreground color, after that press [X] to switch Background and Foreground colors.

Step 2 – The Background

You can activate the Rules [Ctrl]+[R]. Set two vertical guides to limit the layout wide View -> New Guide… Set with Vertical orientation 20px and 980px, or drag the guides directly from the Rules.

guide

Now we have one dark background, we need give it some texture. Select Filter -> Noise -> Add Noise,set (Amount: 0.6°, Distribution: Uniform, Monochrome: on). Why uniform? The Uniform option spreads the noise more evenly than the Gaussian option.

addnoise

Step 3 – Header and Logo

Set 3 new guides (Horizontal: 30px, 120px, and 150px) for header and menus. In Layer panel make New Group, name it “Header”. Before we create the logo let give a spot light. Create new layer name it “spot light” Create one shape layer with Ellipse Tool,

ellipse_spot_light

Move and resize the ellipse [Ctrl]+[T] or Edit -> Free Transform set (X: 260px, Y: 0px, Width: 180px and Height: 100px). Select menu Filter -> Blur -> Lens Blur… Set the Iris (Shape: Triangle, Radius: 64, Blade Curvature: 100, Rotation: 0), after that resize again with set (X: 260px, T: 30px, W: 480px, H: 240px), apply the “spot light” layer blend mode as Soft Light, set the Opacity 60%.

spot_light

Logo

Now we have to create new logo or place any logo you have. Here I give the name for the ‘company Golden Soft Co.’, create New Group inside group layer “Header”, name it “logo”.

Now use horizontal Type Tool [U], create 4 text string (Century Gothic, #fefefe) with fonts size (65pt) for the logo ‘G’ and ‘S’, (30pt) for company name ‘Golden Soft Co.’, (12pt) for slogan ‘Success And Efficiency For Your Company’ as shown in the picture.

logo_type

Give some gold effect on logo, Rasterize and Merge the “G” and “S” type layer, select menu Layer -> Merge Layers and name the layer as “GS”.

Add the layer Drop Shadow style, set (Blend Mode: Multiply, color: #000000, Opacity: 75%, Angle: 120°, Distance: 5px, Spread: 0%, Size: 5px).

Add Inner Shadow style. Set the structure same as Drop Shadow style except the (opacity: 30%, choke: 0%).

Add Gradient Overlay style, set (Blend Mode: Normal, Opacity: 100%, Style: Reflected, Align with layer: check on, Angle: -128°, Scale: 150%). Click on the gradient to open gradient editor, in Gradient Editor add 5 color stop at 5 locations 1.(location: 0%, color: #aa8630)- 2.(location: 26%, color: #f4da70)- 3.(location: 46%, color: #b4934c)- 4.(location: 78%, color: #75530c)- 5.(location: 99%, color: #533a06) as shown in the picture.

logo_style

And add Drop Shadow style for the company name and the slogan same as the logo but set the Distance and Size of Shadow are 2px.

Navigation Menu

Before, set the foreground color #b78b16 and background color #ffffff, add New Group layer name it “navigation”. Create Shape Layer using Rectangle Tool [U] with size of (height: 30px, width: 960px) or drag over the two Horizontal guides as shown in the picture and name the layer as “nav_bg”

nav_bg

Now add Gradient Overlay style effect on “nav_bg”, set (Blend Mode: Multiply, Opacity: 100%, Style: Linear, Align with layer: check on, Angle: 90°, Scale: 100%). Click the gradient to open gradient editor, in Gradient Editor set the left (location: 0%, color: #bebebe), and the right one (location: 100%, color: #ffffff).

nav_bg_style

Use Line tool (weight: 1px), draw the line at top “nav_bg”, give the layer line name “nav_line”, add the layer Drop Shadow style, set Structure (Blend Mode: Linear Light, color: #000000, Opacity: 100%, Angle: 90°, Distance: 1px, Spread: 0%, Size: 4px).

nav_bg_line_top

Add text string for the navigation menu items, using (Arial, 12pt, #222222), All Caps, and give words-spacing about 30px or 7 times spacing. Add Drop Shadow style (Blend Mode: Screen, Color: #7c6018, Opacity: 75%, Angel: 120°, Distance: 1px, Spread: 0%, Size: 0px).

Draw line to spread between menu items (height: 30px, color: #222222), Add Drop Shadow style same as menu items style except Angel set it 180°.

menu_items

Now we add some extended menu at right top (Arial, 12pt, #909090) and add Drop Shadow style with set (Blend Mode: Multiply, Color: #000000, Opacity: 75%, Angel: 120°, Distance: 1px, Spread: 0%, Size: 1px).

Search Form

Add New Group layer inside “Header” group layer, add new 2 vertical guides (40px and 960px), draw shape layer using Rectangle Tool [U] (color: #1a1a1a, Width: 240px, Height: 24px, position X: 855px, Y: 87,5px) name the layer “search box”. Add Stroke style (Size: 1px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type Color: #909090).

Type text string “Search” over left box (Arial, 12pt, #909090), and add magnifying glass icon for search button on right side box using Type Tool (Webdings, 24pt, color #909090), type text “L”, rotate 45°.

search

Before continue to next step, we have made vertical guide at 40px, move the logo by select the logo Group layer, move 20px to right as shown in the picture below.

header_view

Step 4 – Big Banner Box

New guide (Horizontal, 500px), draw shape layer (width: 960px, height: 350px, color: #000000) change the layer blend mode (Screen), add Stoke style (Size: 10px, Position: Inside, Blend mode: Normal, Opacity: 50%, Fill Type color: #141414).

banner_box

Create 2 lines as long box size, below the box, each lines color #0F0F0F and #282828 as shown in the picture

line_box

Give some dark shadow below “border2”, duplicate layer “border2” or create new line, then add Drop Shadow style (Blend Mode: Multiply, Color: #000000, Opacity: 75%, Angel: 90°, Distance: 2px, Spread: 0%, Size: 4px, Contour: Cone). Right-click on the copy layer “border2 copy” and select Rasterize Layer. Use Eraser Tool [E] (size: 400px, Hardness: 0%) then erase the layer at left side and right side about 100px center mouse position at each sides or as shown in the picture and drag to outside of the canvas.

line_box_shadows

Add a image over “banner box”, the image size must be bigger than 960x500px, the order of the layer of image must be over the “banner box” layer.

Right-click on the image layer, select Create Clipping Mask. The result shown in the picture below

banner_box_overview

Step 5 – The Main Contents

Here we are using 960 grid system, with 12 column based, where each columns have 60px width, 20px column margins, 10px outer margins. You can also use this 960 grid template for guide.

Before continue adding the main contents, better we split the width being 3 columns, each columns have width 300px (2 for main content, 1 for sidebar) by add 6 new guides (Vertical, 30px – 330px, 350px – 650px, 670px – 970px).

new6_guides

Add New Group layer “main contents”, add new text for content heading (Arial, regular, 24pt, #a67e14), you can add some icons on left of heading text.

Add the heading layer a Drop Shadow style (Blend Mode: Multiply, Color #000000, Opacity 75%, Angel: -90 Degree, Distance: 1px, Spread: 0%, Size: 1px) .

Add a underline for heading text, using Line Tool [U] draw new line (width: 600px, height: 1px) at 20px below heading text. Add Drop Shadow style (Blend Mode: Normal, Color: #0f0f0f, Opacity: 100%, Angel: 90°, Distance: 1px, Spread: 0%, Size: 0px).

Add content text, use horizontal Tool Type (Arial, 12pt, leading 20pt, #c0c0c0), type space (width: 620px) add some text (use lorem ipsum generator) and add text links “more detail” (Arial 12pt, bold, #a67e14).

contents

Add sub-content / left and right contents use the same technique as main content but the font size for heading are 18pt, text space for each sub-content are 300px. As shown in the picture

contents_overview

Step 6 – Sidebar

Add 2 New Groups “sidebar1” and “sidebar2”, use Rectangle Tool [U], draw 2 boxes on right one column with each sizes (300x200px, #000000) and (300x140px), add the layer Stroke style (size: 1px, position: Inside, Blend Mode: Normal, Opacity: 100%, Fill color: #282828).

Add text string for the heading (Arial 18pt, Regular, #808080), 10px margin inside the box. The line borders and the content use same technique as used for main content as shown in the picture.

sidebar

Step 7 – The Footer

Add New Group layer “Footer”, add New Guide (Horizontal 920px). Use Rectangle Tool [U], draw it at the bottom (1000x80px, #191919).

Multiple Select lines border for banner, Right-click and select Duplicate Layers… than reorder the layers into the “footer” group then move them to the position (Y: 920px) as latest guide we have made press [Shift] +[down].

footer_border

Multiple select the all borders layers in “footer” group, select menu Edit – Transform – Flip Vertical. Resize the layers “border1 copy” and “border2 copy” (width: 1000px). Select layer “border2 shadows copy” change the layer Drop Shadow style (Angle: -90°).

Use Type Tool, add text menu (Arial, Regular, 12pt, #3d3d3d), add Drop Shadow style (Blend Mode: Normal, Color: #000000, Opacity: 100%, Angel: 120°, Distance: 1px, Spread: 0%, Size: 1px).

At the end add copyright text string (Arial, 11pt, #7d7d7d).

footer

Finishing and Download

Congrats, we have designed an elegant and cool web template for great company. You can download the complete Photoshop (psd) layered template and available also light version. Click the images below to preview in full scales and click download link to download the templates. This template is released under Creative Common License (CC 3.0 Attribution) and also for commercial use.

You already have good design for your website next what you have to do after is find out the best web hosting company for your website, if you are a newbie you can choose some reliable cheap web hosting service provider with low budget.

elegant_web_layout-250 elegant_web_layout_light-250

AttachmentSizeHitsdescription
elegant_web_layout.zip 2.24MB 2063 dark color, business web template
click the attachment link to download the file


AttachmentSizeHitsdescription
elegant_web_layout_light.zip 2.40MB 1476 light gray, business web template
click the attachment link to download the file


Written by fandy

a web and graphic designer whose love art and design and like to share knowledge, resources and inspirations. English not my mother language so don't blame me, I just do the best to sharing, just give me suggestion to fix it. If love my work, you can support me and follow me on Twitter


Share This :

I PROUDLY PRESENT

YOUR COMMENTS! I LOVE 'EM

Zulfa February 7, 2011,21:03

Very nice tutorial and beautiful template design. Thank you.

kayla February 7, 2011,21:45

Great Tutorial!!

Elegant Business Web Template | Designer Freelance March 2, 2011,23:32

[...] Visit Website [...]

Highly Useful Web Design Layout Tutorials In Photoshop March 3, 2011,00:34

[...] Creating Romantic Dating Agency Layout Photoshop8 ) Create Beautiful Elegant Portfolio Photoshop9) Design Simple and Elegant Business Web Template In Photoshop10) How to Create a Advanced Dark Web Layout11) Create a Dark Blog Layout in Photoshop12) How to [...]

February’s Fresh Photoshop Web Layout Tutorials March 28, 2011,03:05

[...] 5. Design Simple and Elegant Business Web Template in Photoshop [...]

30 Collections of Creatively New Photoshop Tutorials | blueblots.com April 11, 2011,17:15

[...] Design Simple and Elegant Business Web Template in Photoshop [...]

29 Creative and New Photoshop Tutorials | Blograzzi April 11, 2011,20:39

[...] 14. Design Simple and Elegant Business Web Template in Photoshop [...]

Late Night Stop February 2011 Best Photoshop Tutorials ! May 2, 2011,19:35

[...] Design Simple and Elegant Business Web Template in Photoshop [...]

Great Looking Photoshop Web Design Tutorials ( .PSD ) September 1, 2011,20:55

[...] Tutorial Link For Design Simple and Elegant Business Web Template in Photoshop [...]

February’s Fresh Photoshop Web Layout Tutorials « JHAMP September 16, 2011,17:07

[...] 5. Design Simple and Elegant Business Web Template in Photoshop [...]

Creatively New Photoshop Tutorials | VaparuN | Wp Experts November 29, 2011,13:38

[...] Design Unadorned and Elegant Business Web Template in Photoshop [...]

2011 Yılının En iyi Photoshop Eğitim Dersleri | Tasarım Lazım December 28, 2011,06:26

[...] View Tutorial [...]

12+ Tutorials – How To Design The Web Template | Allxnet March 10, 2012,04:17

[...] Perhaps the explanation of this tutorial will you get a lot of shortcomings, please tell me for a better in future. Continue:… http://www.artfans.info [...]

25 Web Design Tutorials In Photoshop | Bashooka April 12, 2012,19:57

[...] Link : Design Simple and Elegant Business Web Template in Photoshop [...]

350 Best Photoshop Tutorials | CrazyEgg.net August 6, 2012,06:46

[...] Tutorial Link For Design Simple and Elegant Business Web Template in Photoshop [...]

Masud July 22, 2013,19:27

I will try to do it myself. Helpful for newbie like me. Thanks for this kind of unique tutorial and tips.

ashok kumar jena August 21, 2013,00:16

this is nice tutorial.i just want to be expert of photoshop
so plz help me

350 Best Photoshop Tutorials September 19, 2013,12:35

[...] Tutorial Link For Design Simple and Elegant Business Web Template in Photoshop [...]

25 Photoshop Web Design Tutorials September 22, 2013,11:01

[...] Tutorial Link For Design Simple and Elegant Business Web Template in Photoshop [...]

LEAVE A COMMENT

AND MAKE ME HAPPY

Your email address will not be published. Required fields are marked *

Name*

Email*

Website

Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Community News

Recent Comments

    • Shawn Rubel : Thanks guys, easy to follow tips that will come in handy for... more
    • Shawn Rubel : Derek, if you've got the time, it would be nice to see a ... more
    • Shawn Rubel : Great stuff, I'm always trying to follow these aspects whene... more
    • Dani : Trimakasih Pak.. Izin unduh ya... more
    • Dani : Motif-motif batiknya bagus sekali Pak. Mksh sudah mempostin... more

Powered by:

Content Distribution Network

Twitter: ArtfanDesign