April 14th, 2009 in Photoshop Tutorials by Richard Carpenter
Business Layout #5 Tutorial
5 Votes, Rating: 4.6
Loading ...
Hello welcome to another tutorial by hv-designs, today we’ll be making a sleek business layout.
Create a new document size 900 x 900 pixels. Select the gradient tool with a linear gradient, select the colors #224371 and #4b86c4. Drag the linear gradient from the top of your canvas to half way down. The look your going for is something like this.
Select the rounded rectangle tool with a radius of 10pixels, draw out a navigation sized rectangle and fill with any color. Place the rectangle at the top of your canvas so only the bottom corners are showing.
Press CTRL + A on the keyboard then goto “image > crop”. This will have now chopped off the top corners of your rectangle. Next, add these layers to the navigation rectangle.
You should have something like this.
Add your navigation labels to your navigation, inbetween each link add a divider using the two 1px line method.
Find yourself a picture of the world, google is a good place to start, preferbly find one with a white background as it will be easier to hide. Copy and paste your world map onto your canvas, resize if you have to. Place the map underneath your navigation, set layer blending mode to multiply and opacity to 75%.
Add your website title and slogan over the map.
Next we need to create a diagonal line pattern, create a new document 25 x 25 pixels. Select the pen tool with a 1 pixel sized brush, zoom in as far as possilable and copy the pattern below.
Once finished goto “edit > define pattern”. Head back over to our orginal design and select the rounded rectangle tool. Draw out a simple box for our little login fields. Dont fill the rectangle with a color instead select the pen tool, then right click and goto “make selection”. Select the paint bucket tool at the very top in the menu change “forground” to “pattern”. Select your pattern from the drop down box.
Add a white color overlay to your lines then set opacity to 10%.
Download this icon pack from “WEFUNCTION” Select the padlock icon and place it onto your lined rectangled. Begin to draft out a simple members login form.
Continue to build up the content on the right side of template. Adding icons and minor details as you go along.
On the left side of the template draw out a big rectangle using the rounded rectangle tool.
Add these layer styles to your content box to complete the effect.
Head over to google again and find yourself some business images, if you prefer use your favourite stock website. Find yourself 3 different business type images. Make the 3 images all the same size then drag them onto your canvas. Place the 3 images next to each other horizontally. Merge all 3 business image layers together as one. Make a layer selection by click on the business images layer whilst holding down on the CTRL key. Copy the image to the clipboard then delete the layer. Make another selection by clicking on your big content box layer whilst holding down the CTRL key. Goto “edit > paste into”. Your image will now be able to move around within the boudries of the big content box. Duplicate the business images another 2 times and place them on top of each. Merge the business image layers as one then add a “layer mask”. Drag a linear gradient from left to right.
Fill your content box with some business jargon, you can use the blue circles in the wefunction icon pack as bullet points.
Underneath your content box add some more business jargon in the form of paragraphs, underneath the paragraphs add a simple texted footer.
Also included in the wefunction icon pack were a set of payment icons, bunch them up together and add them above your footer info.
Create a new layer underneath ALL your footer content, select the eliptical marquee tool OR the circle tool and make a selection like this.
Fill the selection with white then goto “filter > blur > guassian blur”, blur by about 48pixels. Set layer blending mode to overlay.
Thats it all done, heres the final result.
Hope you enjoyed this tutorial, please dont forget to subscribe via RSS and twitter. Thank You.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
52 Responses to “Business Layout #5 Tutorial”