Design a trendy business & finance layout
Today 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.
Apply for a VIP account to download this PSD layout
I will start this tutorial by creating a new document:
With Rectangular Marquee Tool, I will create a selection like in the following image
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.
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:
I will select Rectangle Tool, and I will create a thin shape, with the following color: #5ea5c5
I will create some shapes with Rounded Rectangle Tool.
I will select the top shape and I will go to Edit > transform > warp. From the drop down menu I will select Arch.
You can set the bend to 10
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:
This is my result so far.
I will select the layer with the big buttons from the bottom, and above it I will make a selection with Rectangular Marquee Tool
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
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.
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)
Now for this layer I will add the following layer styles
This is my result so far
On the bottom of each button I will create another small button with Rounded Rectangle Tool
Then I will add the following layer styles
This is how my buttons looks like
On the header I will add some text and some images
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
I will go to Filter > Blur > Gaussian Blur and I will use the following settings
I will lower the opacity value for this layer to 60 %, and this is my result
With the same technique I will place another balloon on my header of the website
Now I will add some text with Horizontal Type Tool. Please click on the following image to see the full size business layout
I will provide you two sets of icons together with this layered PSD layout. Here are the icons screenshots
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.
Between the texts I will create same small lines. This is my final result. I hope you like it
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
Responses to “Design a trendy business & finance layout”
Trackbacks
- Tuto 2.0 – Creando un diseño web para negocios | PHOTOSHOPEA
- 160+ Mega Web Design Tutorial Roundup | tripwire magazine















































Very cool.
i like your tutorials. Very well explained.
This tut is great. i wish i had discovered your website a few years ago. What i have learned in a few weeks from here i never accomplish to learn from other blogs.
I love your blog format. Great tutorials, and great resources. have you ever though it will be good for you if you add also a shop with more premium resources ?
I found your sets f gradients, and styles very useful. i could buy some more if ou are able to make it for me.
I am sure the graphic community will be thankful if you offer such great resources for such small prices.
please consider my idea. keep up the good work my friend
Awesome web layouts with nice step by step tutorial
Thanks a lot for your time & Kind effort for always making such a amazing tutorials
I learn lot’s of new technique because of your amazing tutorials
your all web layouts tutorials & designing are No 1
How much I thanks to you genus you are Big Assets for me
your all tutorials are valuable for me
Thanks a lot
keep up good work
God bless you
looks really nice, thanks for tut..
Were i have photoshop cs2 and it dosn’t have the warp tool does this plugin come later on in photoshop products
Thanks
very nice. it gave me a tremdndous confidence to make a web layout. thank you very very very much.
Warp tool is available only from cs2. I don’t know why but on some versions of CS2 i do not have it too
thanks… very good a+
amazing… thanks!
love the balloons
Hmm, never thought of that before, maybe I should have a deeper research on Finance Layout.
I wish I could met someone like you along time ago, nice tut bro…
Thanks for the great inpirations…….,good job, keep it up……brow……