tutorialninja

highly detailed awsome red layout

Monday ~ April 04, 2007 by admin Posted in Photoshop, layouts

heres a tutorial for creating a awesome layout, its broken up into a few stages:
header (this covers the header, logo and basic navigation)
content boxes (this covers the creation of the first content box)
content creation (this covers using the boxes to finish the layout)

this .psd will be the basis of future developments, after this I will show you how to code it in html/css. after that a basic front end will be added, after that an ajax shoutbox and after that an admin backend.
hopefully this set of tutorials will put us on the map and give you a better understanding of how website development occurs!

heres what you’ll be creating:

1. create a new document roughly (I messed mine up Rolling Eyes ) 1024px x 400px. remember, when creating if you need more space just go to image>canvas size and make it bigger! Give it a #F7F7F7 background

2. create a new document that is 3 x 3 pixels, and use your pencil tool set to 1px and solid and black (#000000) to create something like this:

note: thats blown up. (zoom 1600%) - I suggest you zoom for accuracy (ctrl + +)

on this document hit edit>define pattern choose a name and hit ok

3. close that, bring up your original psd, and on a new layer bring up your paint bucket, however, select pattern from the dropdown at the top (currently reads foreground) then select the pattern we just created. now click on the layer to fill with your pattern!
lower this layers opacity to about 16%
a segment of mine:

4. new layer, bring up your rectangular marquee, and set the style to fixed size (Currently reads normal) make sure the width covers 100% and the height is around 100px (the standard is 112px and mine is 103px - I guessed it Razz) drag this selection to the top of your page (hint: hold shift while dragging to move in a straight line) get it to cover the top 100px. fill your newly found selection with white (#FFFFFF)
a sideways (you can see all the height, but only part of the width - done to save bandwidth)

5. bring up blending options for this layer (layer>layer style> blending option)
apply this drop shadow:

then this gradient overlay:

the colors I used are: #A51D07 and #A51D07

I now have something like this (another section):

6. now, deselect about half of this layer (so about 50px high), again drag this to the top.
on a new layer fill this selection with white (#FFFFFF) change this layer to soft light and about 23% opacity.
heres one I made earlier:

7. surprise! new document (now might be a good time to save the current one) make it 50 x 50 px with a transparent background
make a selection and fill white to get something like I ‘ve created.
OR. take the one I made, i don’t mind on this one Smile. Its a .png so its got a transparent bg, right click and hit download.

edit>define pattern then give it a name and hit ok

8. open up your main document again, and create a new layer. make a selection that is equal to your overall header, (ctrl+click on the original header layer to get the selection fast) and fill it with your new pattern. change this layers opacity to 14%

9. bring up your text tool, and on the bottom left of your header click, then type in your site name or whatever. highlight the typed text and change it to font ITC Franklin Gothic, 60px, bold (to view character options window>character)

10. apply these blending options to this text:

#F1AD09 to #F7E905

#080808 0%, #FFFFFF 30%, #525251 56%, #FFFFFF 83%, #050505 100%
i suggest you simply select the copper gradient and just change the colors.

11. create a new layer, ctrl click the text layer below to grab the selection, and on the new layer fill with the first pattern you made:

lower the opacity of this layer to 25%

12. create a new text layer on the left just above your original text. type in your slogan. highlight the text and change it too ITC Franklyn Gothic, 12px, white (#FFFFFF) and bold.

13. bring up your rounded rectangle tool and change the radius to 10px change it to fixed size, 350 x 40 px
draw it on the right hand side like shown:

14. rasterize this layer (layer>rasterize>layer) and delete the section below the header. lower the opacity on this layer to 71%

15. bring up blending options for this layer and apply a regular gradient overlay: #D3D0D0 to #FFFFFF but put the middle point at 25%.

16. in the middle of this hit the text tool, select the center option before you start typing. type what you wish, I used a lowercase l as the separator between each link. I used ITC Franklin Gothic, 12px, #333333, NOT BOLD.

17. your headers done! (told you this was highly detailed;)
what i did next was to hide all layers that were not necessary (navigation and logo) and copy the entire header with copy merged (shift+c+ctrl) i then pasted this and using free transform (edit>free transform) changed the height and width to 20% of the original. this gave me something like this:

18. I typed some text in using ITC Franklyn Gothic (it always pays to only use 1 or 2 fonts, one for headers, one for content) 12px and #FFFFFF.

19. I then pasted in a icon I created earlier (I’ll link to a tutorial for this when I create it)

I pasted it in to get this:

at this point I put them in a layer set (click the folder icon at the bottom of the layer window, and just drag the layers in!) for organizational uses.

by now overall you should have something like this (I dragged my new layer set to a suitable place, drag the layer set to move all layers at once):

20. bring up your rectangular marquee tool and create a selection below your header, mine is 205 x 108 px. on a new layer fill it with #A91E08.

21. ctrl+click on this layer and reduce it by 1px (select>modify>contract>1px) and on a new layer fill with your second pattern

lower opacity to 14%

22. ctrl+click like you did in 21 on the same layer as in 21 (not the one just created), again reduce by 1px. this time on a new layer fill it with white.
then bring up blending options and apply a gradient overlay. #D3D0D0 to #FFFFFF but put the middle point at 25%.

change the opacity of this layer to 71%

you should now have this:

now add all this into a new layer set, I modified the names of my layers for easy understanding:

apologies: i added in a content layer;) also, there is a layer set for the star icon, you guys simply have one merged layer.

now! duplicate this content box a few times (layer>duplicate layer set), you’ll need to modify it a bit for the width, this can easily be done by simply ctrl clicking the layer that needs to be made bigger and then creating a larger expansion and filling it with the paint tool.

fonts: I used verdana, 10px, #333333 with some text bold!

congratulations! your done! I hope you enjoyed this tutorial, making it was! Very Happy

note: feel free to use this on your own personal site feel free. you MUST keep the copyright
design by tutorialninja.com copyright 2007

no business sites though! and don’t distribute this tutorial without explicit permission from me first, I worked incredibly hard to make this, and if i don’t get recognition I don’t get traffic and therefore have no incentive to write more tutorials!

thanks guys! best of luck!

“Comments”

John Joseph 24/04/07 - 8:09 pm

Nice tutorial. I enjoyed it. Simple to understand and fast. Thanks!

Joe 09/05/07 - 1:37 pm

Hello, are you going to post a download of this?

Leave a Reply

You must be logged in to post a comment.