March 17th, 2009 in Photoshop Tutorials by Richard Carpenter
Car Layout #4
14 Votes, Rating: 4.64
Loading ...
Good morning everyone, in todays tutorial were going to be making a stylish car layout, although the layout isnt particularly car “related” it does featured some awsome content box styling.
Enough talk lets get started, create a new document 850×830pixels with any background color. Set #3b3b3b as your forground color and #181818 as your background color, select the gradient tool and with a radial gradient start from the top in the middle of your canvas and drag downwards towards the bottom of your canvas.
In the top left hand corner of the canvas add your website title and slogan.
The layer styles for the website title are as follows.
Inbetween the website title and slogan add a small 1 pixel line about 2 pixels wide in the color #ff0e00. Then add this outer glow.
Select the rounded rectangle tool with a radius of 10px, draw out a navigation size rectangle underneath your website title and slogan.
Add these layer styles to your navigation bar.
Now set your navigations layer opacity to 25%. Hold down the CTRL key on the keyboard and click the little thumbnail in your layers pallette on the navigation layer, create a new layer directly above and select the new layer but leave the selection active. Goto “select > modify > contract” contract the selection by 6pixels then press ok. Fill the active selection with the color black.
Right-click your navigation layer and goto “copy layer styles” right click your new layer which holds the black rounded rectangle and goto “paste layer styles”. Set opacity of the new layer back to 100%. You should have something like this.
Add your navigation text to your nav bar then select the rectangular marquee tool draw a white box across your navigation that covers the navigation only half way down.
Hold down the CTRL key and click on your navigation layer make sure the navigation layer isn’t selected, goto “select > inverse” then hit the delete key. Set white rectangles layer opacity to about 4%. Your navigation should now look like this.
Using the rounded rectangle tool and create a big rectangle underneath your navigation. Follow the same steps and layer styles as we did for our navigation.
Find yourself an image you see fit for your featured content area, im using a merc-brabus. Copy your desired image to your clipboard. Create a new layer above your featured content box, click your inner content box layer whilst holding the ctrl key on the keyboard to load a selection. Click your newly created layer and goto “edit > paste into” Your image should now be moveable inside the inner rectangle. If your image doesnt fill the whole width of the rectangle then resize the images background to fit doesnt mater if its slightly bigger. Hold ctrl and click on your inner content box once more to load the selection, click your pasted image layer and goto “select > inverse” then hit the delete key on the keyboard. Press CTRL+D to deselect the selection. Load the inner content box selection once more, select your pasted image layer and goto “select > modify > contract” and contract your pasted image by 6 pixels, inverse the selection and hit the delete key.
Add this stroke layer style to your pasted image, then add some featured content text.
Create more content boxes using the methods explained in creating the navigation.
For the content in each content box, create a black rounded rectangle with this gradient stroke.
Add your content box titles, after each title, add the little red light that we made in the header.
Add your example content and footer information and your done.
Hope you enjoyed this tutorial, dont forget to subscribe to our RSS feeds and Twitter. Many thanks for reading, look forward to your comments.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
38 Responses to “Car Layout #4”