|
STEPS
|
CLICK TO ENLARGE SCREENSHOTS
|
HEADER
1- best way to begin on these website layouts are to start working on it piece
by piece. so we will begin with the header. create a new layer that is 750x200.
|
|
2- to begin, i am going to split the header into different sections. one will be
the navigation menu and one will be a banner image.
|
|
3- for the banner image i am going to use some photos and just crop, and add basic effects to them. the photos will be taken from a free stock photo site such as the stock.xchng. i am going to be using This Photo and going to add some color changes to it using the HUE SATURATION option like this.
|
|
4- i am going to add some kind of logo+company name now next to the banner image. to make that curve brush stroke, just use the PEN tool and create a vector path in the shape you like. here is how it looks so far.
|
|
5- now it is time to work on the menu. since this is not a real site, i will use
"fake" links. after you are done, rasterize all the shapes, and crop the entire
header. here is how it looks at this point.
|
|
BODY
6- we are now done with the header for now, lets begin on the body. open up another
new image, CTRL-N, and set it too 750x 600 and drag the contents of the header
onto this new layer.
|
|
7- now once again i am going to fill up the site with "fake" content since this
is not a "real" site. the content i use will just be randomly taken from websites
around the internet. now this part is the most subjective part, becuase it is up
to you what you want to put here and how you want your content area to look like.
i will just do it the way i think is easiest for you to understand, then from
there it is in your hands. so first thing i did was create a section to the left
right under the logo for recent news additions and added some news content i got
off of google news. also add a lil footer at the bottom of the page just for kicks.
should look something like this.
|
|
8- next i am going to add some nice bold text as a slogan on the right side under
the menu area. also added a shadow effect and outer glow. should look like this.
|
|
9- next i am going to add the main text right under that slogan we had. and below
the body text just throw in some small images. you are done after adding all the
content. this is how mines turned out. if anyone wants to actually USE this
template for their sites, CONTACT ME FIRST and let me know and we can work
something out. otherwise just use it as inspiration for a new project, quite simple! to
implement the website, open it up in Adobe ImageReady and slice it up properly.
|
|
