Loading ...In this tutorial il show you how to make a really simple clean business layout.
Create a new document 1000×960 pixels with a white background, at the very top of the canvas create a rectangle the width of the canvas and about 80 or so pixels in height, fill with the color #e9eacf. Do the same again but make the rectangle 3 times as big, fill with the color #62c0e6. You should have something like this.
Using the rectangular marquee tool create a selection as seen in the image below.
Make sure the rectangle comes level with the 1st color. Fill the selection with any color then add these layer styles.
Do the same again only create a rectangle on the blue color. Make sure the rectangle is the same height as the blue line and the same width as the rectangle created above.
Fill the selection with any color then add this layer style.
You should have some thing like this.
On the white part of the canvas do the same again, make the rectangle quite big this time, but still keep it the same width as the others. We need to make this one fairly big this time as were going to be blending it in with the white background. Fill the selection with any color.
Add these layer styles.
Create a new layer UNDERNEATH all your boxes, select the rectangular marquee tool and create a selection as tall as you want, but the same width as your other boxes.
Fill this selection with the color black, then goto “filter > blur > guassian blur” blur by 2pixels, set layer opacity to 35%. Add a layer mask to the layer, using a linear gradient drag from the bottom where your rectangle ends, upwards. This should blend in the drop shadow.
On the blue rectangle, select the pen tool and create a shape like this.
Fill the selection with the color white then set layer opacity to 5%.
Duplicate the layer and shift it upwards abit. When the shape goes over the blue line you may need to cut the top off so you dont see it on the top rectangle.
Duplicate the shapes twice more, then flip or rotate them to create a look your happy with, heres mine.
Once you are happy with the look, go ahead and add your website title, slogan and logo. Add these at the top in the 1st rectangle, also add your navigation to the right side.
Now find yourself an image of a laptop, remove the background from the laptop then stick it into the blue area of the layout on the right.
Now the laptop could do with having a reflection of itself, just to add a little bit of detail to the whole thing. Duplicate your laptop layer, move the duplicated layer underneath its orginal. DONT flip it just move it downwards untill the bottom half is identical.
Add a layer mask to the duplicate layer, then add a layer mask. Drag a linear gradient over the bottom of the front of the laptop, once your happy right click your layer mask and goto “apply mask”. then do the same for the side of the laptop. Now find yourself some an image of a butterfly, remove the background then add it also to the blue part of the layout.
On the left side of the blue rectangle add some text about your business.
The next part in the tutorial is too fill the white content with information about your business, the reason why i havent gone into great detail is because ive only used text and a couple of images and the tools ive used are only the text tool.
Once you’ve added your content you should have something like this.
40 Responses to “Business Layout #3”
Flipsyde Says:
The logo’s not very appropriate, isn’t it ? But it’s a beautiful design :)
ADMIN Says:
just space filling :)
Alien among us Says:
Wow. Real Nice tut. Thanks.
xphunt3r Says:
I really like this web template and ready to try out now. Thanks for creating such great photoshop tutorial
york Says:
I like it
hippoman Says:
Good job!
tinusk Says:
Well done.
Ejaz Says:
Great Tutorial!
psaddict Says:
Added to http://www.psaddict.com
business analysis Says:
The logo’s not very appropriate, isn’t it ? But it’s a beautiful design :)
Houdini Says:
Thiis is excellent stuff, but what should I save i as and how do I use it in my web page?
ADMIN Says:
you need to hard code it in HTML/CSS for it to work as a webpage
Houdini Says:
Thank you so much for your reply.
I know HTML/CSS (not such a pro in Photoshop), however, this is a complete interface design; how would I actually approach hard coding it in HTML/CSS. I really would like to use this design. I have completed it but don’t know what to do next. I hope you don’t think I’m dumb, it’s just that is style of designing is much different from the traditional notepad designing that I’m accustomed to.
ADMIN Says:
check out my next tutorial when its released, it will give you a good insight to wahts involved
james Says:
Nice tutorial!
tamtam Says:
cool….
Azhar Says:
very cool
Thanks
Learner Says:
Nice info. thanks :)
Jovan Says:
Can we put: copyright(c) Jovan | All rights reserved Designed and developed by Mihailo webb design
ADMIN Says:
if its identical to mine THEN NO YOU CANT.
Jovan Says:
I AM AN IDIOT SORRY FOR POSTING SUCH STUPID IMATURE STUFF ON YOUR WEBSITE.
-edited by admin-
Dont use stupid language like that in your comments, or il just ban you sitewide. choice is yours
alfares050 Says:
Thank you
d3nika Says:
hi…great tutorial…I only have one request: the shadows on the side, I can’t make them look like yours and I followed the tutor on the letter… did you skip a step??…can you give a more detailed example plssss…
thanx in advance
Jim Blake Says:
I like it
Business Cards Says:
This is a really nice layout. The colors are very cool and pleasing to the eyes. The layout is neat and simple. Thanks for sharing this tutorial!
taha Says:
hey thnx excellent tutorial i am going to use this for a project for school. but just like d3nika i have problems with the shadows on the side. sry i am not very good in photoshop.. i created the layer mask but the gradiant step wont make the drop shadow effect… can u help plz? thnx again
taha Says:
i just figured it out just:
1. create a layer underneath the layers on which u applied a gradient
2. make a selection as described above
3. deselect
4. add layer mask
5. finally use a white-to-black gradient and apply from top(!) to bottom
hope it helps ;)
taha Says:
forgot the gaussian blur step my bad.. just do that after step 3.
Leave a Reply
Trackbacks
search
Learn more about advertising with us.
write for us
Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More
Learn more about advertising with us.
Recent Comments
copyright
The effects and techniques demonstrated in tutorials on hv-designs.co.uk can be used in whatever manner you wish without attribution. The text, images and tutorials themselves are all copyright © hv-designs.
usage
You cannot copy whole tutorials, either in English or translated to another language unless permission is given by the tutorial author.
friends online