How to Create Simple and Professional Looks Financial Website Layout

Author: | Posted in Photoshop, Website Design 1 Comment

How to Create Simple and Professional Looks Financial Website Layout

Website designing always a tricky job and this is depends on client or company decision maker to final design for make live for visitors and related audience, we always try to create trendy and modern layout because mostly clients and company like to in-front as best business, product or services provider and we also make an effort accordingly. In this Adobe Photoshop CS6 tutorial I will show you how to create simple and professional looks financial website layout and also will give free PSD source file but on request bases because we are not offering this layout for commercial use but if anyone need we can talk on this, Let’s Get Started

Tutorial Details

  • Program: Adobe Photoshop
  • Version: CS6
  • Difficulty: Beginner, Intermediate
  • Estimated Completion Time: 3 Hours

Tutorial Assets

The following assets were used during the production of this tutorial.

Step 1 : Preparing the document

Start by creating a 1280px x 1469px document in Photoshop.

Start by creating a document

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

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

Also one important thing when using Ruler Tool is the Info(Information) Panel. This is very useful when you are measuring using the ruler as 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.

Ruler Tool for Info

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 160px. Repeat the step of create a guide but now change the value to 1120px, this will make a total of 960px to the center of our canvas.

New Guide

Now, prepare rule guide for grid template. let’s create our first guide by going to View – New Guide, set the value to 170px. Repeat the step of create a guide but now change the value to 1110px.

Ruler Guide for Grid

you will get result so far

Prepared Document

Step 2 : Setting the grid template into document

Open 960gs psd template that we have download before, open file 960_grid_12_col.psd

Open 960gs psd template

Next , Preparing grid for canvas

  1. Click Background Layer, then hold shift button, then click 12 Col Grid
  2. Right click then choose Duplicate Layer. you will get copy each layer from Background Layer and 12 Col Grid by name Background Layer copy and 12 Col Grid copy
  3. Select Background Layer copy and 12 Col Grid copy (do like step 1)
  4. right click choose Merge Layer
  5. Done, you get new layer by name 12 Col Grid copy

Preparing grid for canvas

Next, Put grid template into document. Select 12 Col Grid copy layer, press Ctrl + A, you will see all area will be selected, then press Ctrl + C.

12 Col Grid copy layer

Now, Go to your first document, press Ctrl + V

first document placing grid

you have gotten new layer by name layer 1. Now go to Layer – Rename Layer, change layer name to “grid

change layer name to grid

Move grid layer to the top by press Up arrow key,until it covers all white space in document

Move grid layer to the top

Now you will see, grid layer doesn’t cover bottom area, But don’t worry. Select grid layer in the layer window, then press Ctrl + t, put your pointer in the center square of transform, click and hold then drag to bottom , until it covers white space in canvas, then Enter

pointer in the center square

the canvas should looks like this now

2-prepared-grid

Now select grid layer, reduce opacity to 23%, and click lock icon to lock layer

grid layer reduce opacity

Done, your canvas is ready for now

Done your canvas

Step 3 : Creating header background

Create a new group (Layer > New > Group) and name it “header“.

Select the Rectangle Tool (U) and create a rectangle with the dimensions 1280px by 104px and the color #23383d. Name this layer “header bg” and place it at the top of your document.

Right-click on the “header bg” layer and select Convert to Smart Object. Go to Filter > Noise > Add Noise and use the settings from the image below

Rectangle Tool and create a rectangle

Right-click on the “header bg” and select blending option. Apply this Blending Option to layer

  • Inner shadow

header bg inner shadow

  • Gradient overlay

Gradient overlay

There is not a lot of contrast between the header background and the main background, so we will add a few separators and gradients to define each section better.

Select the Line Tool (U) and set the Weight to 1px. Hold down the Shift key and create a horizontal line at the bottom of your header using the color #162326. Name this layer “1px line”.

Right-click on the “1px line” and select blending option. Apply this Blending Option to layer

  • Drop Shadow

line drop shadow

The result you get so far

The result you get so far

Step 4 : Creating Logo

For logo , we are going to use “dolar coins” icon from brankic1979. After download the package, extract it and open brankic1979-icon-set.psd. Select “dolar coins” layer, click and drag it to your document, place it inside “header” folder

Creating Logo

we are going to change this icon color. Right-click “dolar coins” layer, choose blending option , and apply this blending option

change color icon

we are going to adjust icon position. Create 2 new ruler guides. First, Go to View – New Guide, choose horizontal, set the value to 40px. Second, Go to View – New Guide, choose vertical, set the value to 174px. These rule guide for help you adjust icon position.

Now, place the icon 174 px from left and 40px from top.

place the logo icon

Select “dolar coins” layer, press Ctrl + t, press shift and hold, drag right bottom icon to right, adjust dimension to width 34px and height 25px.

dimension logo icon

For the logo I used a font name bebas new. Select the Type Tool (T) and write “blog financial” using the font bebas new with the color #ffffff, style sharp and the size 80px. Put it on 220px from left, and 40px from top. Right-click “blog financial” layer, apply this blending option

  • Drop Shadow

logo style

the result you get so far

with logo

Step 5 : Creating Navigation

Create new group inside “header” group, (Layer > New > Group) and name it “navtop

top navigation folder

For the navigation I used the font PT Sans Narrow that can also be found on Google Fonts. Select Text Tool (T), PT Sans Narrow, size 14pt, sharp, color #fff and add this navigation links home, about, service, portfolio, contact.

Top Navigations

For the active navigation, Select Rounded regtagle Tool (U), set radius 5px,color #fff. create shape behind “home” menu, then reduce opacity to 15%

Rounded regtagle Tool for Home Navigation

here result of navigation

here result of navigation

Step 6 : Creating slider box

Create a new group (Layer > New > Group) and name it “slider“, put it on the top of ‘navtop‘ group.

slider group

Select regtagle tool (U), set height 411px , width 1280, color #4d7b85, and name it ‘bg_slider_textured‘.

bgslider

Next, we are going to use 11 light subtle patterns to get textured background. Apply this setting for ‘bg_slider_textured‘ layer.

bgslider pattern

Now create light effect in textured slider background. select Ellipse tool (U), color #fff, convert it to be smart object. Select Filter > Blur > Gaussian blur, then apply this setting

bgslider light

Change ‘bg_slider_textured’ layer style to overlay, change opacity 23%

bgslider light done

Now, we are going to create slider content box. Select rectagle tool (U), create box, width 940px, height 413px, color #ffffff 155px distance from header, then apply blending option setting bellow

bgslider box setting

bgslider box final

Step 7 : Creating slider content

Select rectagle tool (U), create box, set height 411px , width 1280, color #000000, and name it ‘bg_slider_content’.

slider content

Open image ‘woman on the phone photo‘, place it in the top of ‘bg_slider_content’ layer, convert it to smart object, re-size it using transform tool (Ctrl + T), then push enter button

slider image place

Now, we are going to put the image inside ‘bg_slider_conten’.Select image layer , Right Click > Create Clipping Mask. you can adjust position by press arrow key to fit image inside the box

Create Clipping Mask

Create box using rectagle tools (U), width 346px, height 211px, color #000000, 137px from top image border. Reduce Fill to 60%.

slider content box

Create tex box , select Horizontal type tool (T), click then hold and drag it until you get enough area to write the text.

For title you can write ‘Best on the Solution’, font Pt Sans Narrow, 30px, style sharp , color #ffffff.

For content you can write “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet arcu sit amet elit tristique semper id malesuada est. Duis vitae nisi ut orci tempor fermentum. Nullam vitae tellus id felis tincidunt rhoncus. Sed sed quam in lacus pretium vehicula. Integer in augue eu nunc rutrum volutpat at non ante.

  • Font Arial
  • Font Size – 12px
  • Font Style – sharp
  • color #ffffff

slider content words

Now we are going to create bullet for slider . select Ellipse tools (U), create 4 circle, height 15px, width 15px, put on right bottom of slider content, change opacity to 50%, name each layer from left to right, eclipse1, eclipse2, eclipse3, eclipse4

Change opacity eclipse3 layer to 100%

slider ellipse

Select line tool (U), create 1px line, color #3b5e66. name it this layer ‘div1‘. put this line in bottom of ‘bg_slider_textured’ layer.

create line once again, Select line tool (U), create 1px line, color #ffffff. name it this layer ‘div2′. put this line in bottom of ‘div1‘ layer.

div1 and div2

here the result so far

here the result so far

Step 8 : Creating content area

Create a new group (Layer > New > Group) and name it “content”, put it on the top of ‘background’ layer.

create group

Create box for content background, select rectagle tool (U), draw box height 548px , width 1280px, color #f2f2f2, name this layer ‘bg_content’. Next apply this blending option.

blending

Now, we get looks like this so far

content textured

Next, we are going to create the content. Create a new group (Layer > New > Group) and name it “content_block” inside ‘content’ group ,

content block group

Create box for image frame. Select Rectangle tool (U), draw box , height 145px , width 220px, color #ffffff, 626px from top (you can use guide line rule for help), name it ‘frame’. then apply this blending to

stroke

Create box for image area. Select Rectangle tool (U), draw box , height 126px , width 197px, color #000000, name it ‘img_area’.

image frame

Next we are going to place image inside it. Open image ‘smartphone‘ photo, place it in the top of ‘img_area’ layer, convert it to smart object, resize it using transform tool (Ctrl + T), then push enter button

image transform

Right click on the image layer, Select Creating Clipping Mask. it will put image inside ‘image_area’ layer

image clipping

Now add shadow for image framebox. Select Rectangle tool (U), draw box in the bottom of ‘frame‘ layer, Height 10px, width 206px’ color #000000, Convert it to be smart object, name it ‘shadow’. Select filter blur > Gaussian Blur, apply this setting

image blur

Select ‘shadow‘ layer , then select menu edit > transform > Warp. Click and hold two warp point in bottom, drag it above, like image bellow

Warp

Reduce opacity of ‘Shadow‘ layer to 40%, and we get this result

with shadow

Next we are going create the title. Select Horizontal type tool (T), Type title ‘8 things you should do before invest your money‘, font Pt Sans Narrow, size 18px, color #4d7b85

create the title

Next we are going create the content. Select Horizontal type tool (T), Grab some text from lorem ipsum,

  • Font – Arial
  • Font Size – 12px
  • Color #a1a1a1

content

Apply this blending option to title and content.

text style

Here the final title and text content

final title and text content

Next we are going add ‘read more’ button. Select Rounded Rectangle Tool (U), create object , height 92px, width 36px, color #c9f24b, than apply this blending option

  • stroke

button stroke

  • Inner Glow

button inner glow

  • Gradient Overlay

button gradient overlay

  • Outer Glow

button outer glow

And we get final button like image bellow

final button like image bellow

Next, Select horizontal type tool (T), type ‘Read More’, font PT Sans Narrow, Bold, size 12px, color #ffffff, put in middle of button, then apply this blending

readmore button

Duplicate content_block group three times, arrange it, so we get the result looks like bellow

content area

Step 9 : Creating About Us area

Here, We are going to create ‘About us’ area , which containing ‘Who we are’ section, ‘Testimonial’ Section, and ‘Get Update From Us’ Section. For making it easy, we are going to Create a new group (Layer > New > Group) and name it ‘About_us’. Inside ‘About_Us’ group, we create 3 new groups, name it like each section that we are going to create.

groups

Next, we are going create background for ‘about us’ area. Select Rectangle tool (U), create a box, width 1280px, height 333px, color #4d7b85. Apply this blending for this layer

background blending

we get textured background looks like bellow

textured background

Next we are going to create divider for ‘about us’ area. Select Line Tool (U), draw line 1px, solid, color #2c474c.Put it on the top of ‘About Us’ area. Apply this blending option for line.

line blending

We will get line looks like this

line blend

Duplicate this line, and put it on bottom of ‘About us‘ area

line blend bottom

Next, we are going to create ‘Who we are‘ area. Inside ‘who we are’ group, Select Horizontal type tool (T), write ‘Who we are’, font PT Sans Narrow, size 18px, color #ffffff, sharp. Apply this blending options

textstyle

Create frame for image, Select Rectangle tool (U), draw box width 138px, height 114px, color #23383d, name this layer ‘who-frame’. Apply this blending option

who frame

Reduce fill ‘who-frame‘ layer to 49%, you should get the result like picture bellow

whoframe final

Next, we are going to create image area for ‘who we are’ area. Select rectangle tool (U), draw box , width 122px height 98px, color #000000

image area

Open and place ‘businessman photo‘, Choose Edit > Free Transform (Ctrl + T) to resize and adjust photo dimension

image resize

Select ‘businessman photo’ that we have re-sized before, Right Click > Create Clipping Mask. It will put image inside box

who final

Next, we are going to write description for image. Select Horizontal type tool (T), write some part of ‘lorem ipsum’ text, using font arial , size 12px, color #ffffff, then apply this setting

desc blending

After that you can see the result bellow

desc final

Now, we are going to create ‘See how we works’ button. Select rectangle tool (U), draw box, width 141px, height 39px, color #23383d, put it on the bottom of description text

base button

Apply this blending for button layer

  • Stroke

button stroke

  • Inner Glow

button Inner Glow

  • gradient overlay

button gradient overlay

Select Horizontal type tool (U), type ‘See how we works’, choose font Arial, size 12px, color #ffffff. The result you can see bellow

who done

Next we are going to create testimonial area. Select Horizontal type tool (T), write text inside ‘testimonial’ group, and style it looks like image bellow

test

Next we are going to create client photo. follow this step bellow

  1. Create circle using elipse tool (U), fill with color #fff
  2. Place ‘Woman going up’ photo , convert it into smart object, resize it using Ctrl + T
  3. Right click on ‘Woman going up’ photo , choose Create Clipping Mask

image test

Next we are going to work on ‘get update‘ section. Select Horizontal type tool (T), write text inside ‘get-update‘ group, looks like image bellow

update text

Work with subscription form

  1. Select rectangle tool(U), create box width 220px, height 35px, color #23383d
  2. Write text ‘type your search here’, choose font arial, size 10px, style italic, color #ffffff

update form

Next we are going to create ‘Send me update’ button

  1. Select Rectangle tool (U), create box, width 110px, height 39px, color #23383d
  2. Select Horizontal type tool (T), Write ‘Send me update’, choose font PT sans narrow , size 14px, color #ffffff, place it in the center of button box, add dropshadow looks like image bellow
  3. Apply blending option setting for button looks like image bellow

update button

Step 10 : Creating Footer

Now , we are going to final step of this tutorial, creating footer. Here , we are going to do 4 easy steps:

  1. Create a new group (Layer > New > Group) bellow ‘about_us’, name it ‘footer’
  2. Select Rectangle tool (U), create box, width 1280px, height 74px, color #23383d.
  3. In left area of footer, Select horizontal type tool (T), write ‘yourwebsite.com- your slogan here’, add break (Shift + Enter), then write ‘Copyright 2012′. Next add drop shadow setting looks like in the image
  4. Add social media icon, for example facebook, twitter & rss icon in the right area of footer

footer

Final Image

Include a final image at the end of the tutorial.

Final Image

Comments
  1. Posted by Harsh

Add Your Comment