Template 2

-Ok well I got a couple of requests to make anew template tutorial since all my settings went haywire on my other tutorial and this one is going to be much simpler and easier to understand with only a basic layout also. So open Photoshop and create a new document and make it 800x800 or any size that u wish and make it white.800x600 also fits good. Also remember to push d to reset all your colours.

-Before I actually start im going to say some stuff. When im making a layout I draw it all out instead of starting the graphics off the bat so the plan is going to be drawing it out first. Another thing is if you don’t want to use my settings and make your own effects u can but for those who r total newbs ill put my settings and when your done it shud look basically like mine. And also remember to name all your layers so you don’t loose track of them.

-so to start off create a new layer and call it Header were going to draw in a background with the rectangular marquee tool and set it to a size u like then push Edit-Fill-foreground colour (which should be black) then deselect by pushing ctrl+d and move it if u wish and that the header shape.

-Create another new layer and call it nav bar. Then draw it under the header and fill it with a yellow or sumthing different. Heres a trick I learned from another tutorial if u overlap the nav on the banner then control click the banner layer and grab the rectangular marquee tool and right click the banner itself and select, select inverse and it puts it exactly together without overlapping or just control click the banner layer and hit delete and that should work just fine too J. This trick comes in handy a lot especially the way you don’t have to zoom in. So after you got it positioned good you should have something like this now.


-Create a new layer and call it Content box. Draw it out on your layout however big you want it im using a fixed size at 400x575 which is a good size. Then go Edit-Fill with a yellow also now move it to where it fits good and go to the next step.
-Create another new layer called Small content box draw it out how ever big but im using fixed size at 250x300 fill with yellow also, move it to your desired location, deselect and you should now have something like this.


-Now were gonna start to work with the stuff so im gonna work on the banner first. So ctrl+click the banner layer and bring in another picture that u want im using this one I made in photoshop earlier. To put it in photoshop open that specific file and drag right onto the layout file your working on and that’s it J then put it in the dotted lines around the banner then place it there and do the select inverse trick and after u push select inverse push delete and it shud have taken the yellow banner. You can also merge the two layers if u wish.
-Well keep working with that after but for now select the nav bar layer and change the blending options and these r the ones I used. and after all the blending option pictures I will show u what I got so far.





-Click on the content box layer and add watever settings u wish but here r the ones im using.







Ok now that’s looking good so we wanna do the same thing to the small content box so right click the content box layer a choose copy layer style and paste it on the small content box and we got a basic look of a site going on no this is what I got so far. (remember it looks crappy zoomed out so when you zoom in everything goes with it)

-So that is pretty much a basic layout but for other parts visit my rollover tutorial for your nav bar but to finish the tut off simply add text and headers for the content boxes which I will show you now.

-go to your top layer then push create new layer call it separators. Now grab the paintbrush tool and with the settings of 1 px black hold shift and make a line across the content where you want it like so and after doing that for both content boxes you should have something like this.

And that is for this tut. Like I said earlier this is just a basic tutorial so you gotta add stuff to it and with a little tweaking out I got this.and i also forgot to mention at the start of the tut before anything if u want a background color do that first

looks pretty good. ill submit.

thx and toii ws the main reson i made this and he ahsnt even looked at it yet :(

OMG that's alot of work..............................

yeah...

that's all i'm going to say.

damn that's a long process the end result is nice though.

nice tut :D

this is what i came up with

http://rpg.fremmich.dk/images/firsttemplate.jpg

its for a danish site so dont mention the words

I NEED HELP HOW DO I PUT DIS LAYOUT ON MA SITE? I MADE IT BUT I DONNO HOW TO PUT IT ON MA SITE CAN ANYONE HELP ME PLZ IM DESPERATE.. :unsure: :( :(

do you have a host for a site?

great tut man thnx..

petruzzi

:huh:

Rofl :blink:

lol what is that word :huh:

lol :rickjames: His own

:unsure: still dont get it :huh:

me neither :mellow:

<_< :huh: :blink:

LMAO. it looks like he regested just to say that here. <_<

haha :lol:

LOL we are the spamers :P :D

nice i used it for a site i made...

I will put a links when the site is ready(p.s. its a dutch site)

cool :)

How old is this topic, over a year? and people are still posting.

yeah its on good tutorials so there are frequent visitors

:spam: :stupid:

petruzzi

Well as long as we get more active posters...its ok with me :P