33000 Premium resources for designers

Design a trendy business & finance layout

in Tutorials, Web layouts by Razvan on June 25th, 200914 Comments

corporate-layout-entrepeneur-layout1Today I will create another business layout tutorial. Whether you are a single entrepreneur involved in financing and accounting, small business company committed to consulting, management or marketing, or a member of school of business, you will definitely love the following layout.

Preview full size layout

Apply for a VIP account to download this PSD layout


I will start this tutorial by creating a new document:

128

With Rectangular Marquee Tool, I will create a selection like in the following image

225

I will select Gradient Tool and I will use a gradient from our hug pack with 27.000 gradients. If you are not already a VIP member I recommend you to apply, because it will make your life easier as a web developer. If you are not a VIP member you can use the following colors.

318

On the top of the layout I will add some clouds. You can use some stock images with clouds I have released a few weeks ago: Clouds images
Or you can load the following clouds brushes: Photoshop Clouds Brushes

Create a new layer (press CTRL+SHIFT+ALT+N) and add the brushes or the stock image with clouds. This is my result so far:

416

I will select Rectangle Tool, and I will create a thin shape, with the following color: #5ea5c5

58

I will create some shapes with Rounded Rectangle Tool.

68

I will select the top shape and I will go to Edit > transform > warp. From the drop down menu I will select Arch.

78

You can set the bend to 10

89

I will select the other shapes from the bottom (hold down CTRL and click on each layer you want to select in your layer palette), then Press on CTRL+E to merge all the layers into a single one.
I will go one more time to Edit > Transform > Warp. This time I will use the following settings:

98

This is my result so far.

108

I will select the layer with the big buttons from the bottom, and above it I will make a selection with Rectangular Marquee Tool

1111

Be sure you have the proper layer selected in your layer palette, then press on the Delete key from your keyboard. Then you can press on CTRL+D to deselect

129

With Rounded Rectangle Tool, I will create one more time some shapes on the bottom part of the buttons. I will make them with a red. You can use any color you want.

137

I will select these last red shapes, and with the previous curved shape (the one we have deleted the bottom part). I will merge one more time all the layers into a single one (select all the layers in your layer palette, then press on CTRL+E)

147

Now for this layer I will add the following layer styles

157

167

178

185

This is my result so far

196

On the bottom of each button I will create another small button with Rounded Rectangle Tool

206

Then I will add the following layer styles

2111

226

235

245

This is how my buttons looks like

255

On the header I will add some text and some images

265

I will duplicate the image with the balloon, and I will place it like in the following image. You can resize also the layer with the balloon

274

I will go to Filter > Blur > Gaussian Blur and I will use the following settings

283

I will lower the opacity value for this layer to 60 %, and this is my result

292

With the same technique I will place another balloon on my header of the website

302

Now I will add some text with Horizontal Type Tool. Please click on the following image to see the full size business layout

319

I will provide you two sets of icons together with this layered PSD layout. Here are the icons screenshots

32-financial-icons

33-blue-icons-business

Both sets are in vector file format (.eps 8, and .ai for cs4)
Open the eps files in Photoshop, and with Rectangular Marquee Tool, make selection over each icon you want to use. Then press on CTRL+C to copy the icon, then go back to the layer and click CTRL+V to paste the icons inside the layout. Repeat the steps until you have the following result like mine. Click on the following image to see the full size result.

342

Between the texts I will create same small lines. This is my final result. I hope you like it

352

If you want to download this PSD layout please apply for a VIP account, and you will be able to download all the layouts from each tutorial, together will all our other premium resources. With other words, for a small fee you can download all from Grafpedia

Download Demo

Responses to “Design a trendy business & finance layout”

Trackbacks

  1. Tuto 2.0 – Creando un diseño web para negocios | PHOTOSHOPEA
  2. 160+ Mega Web Design Tutorial Roundup | tripwire magazine

Leave a reply