Home
Photoshop
Web Layout
A Simple Layout
Level: Experienced Software:
Photoshop
This is a pretty difficult tutorial and expects you to know the basics+ of photoshop as every step is not written in great amounts of detail.
1. Firstly, start with a canvas size of 800 x 600 with a soft gray colour E6E6E6. You then want to make a smaller rectangle, that has been brought in left and right about 50 pixels or so, which then needs to be filled F8F8F8 (soft white)
2. Next, we need to add some bars. Make a rectangle shape on a new layer, about 200 pixels wide or something similar, and around 20-27 high. Give it a very soft gradient overlay, the darkest colour being at the bottom, and then a stroke which is a little darker. You will want to make a few of these and position them around your canvas to start to structure your layout. Next, you will need to use a too like.. rectangular marquee tool or the pencil tool to join a couple of the boxes up (with the same colour as the stroke on the gradient boxes) to make them look like content boxes.
3. Next, you will need to make little navigation tiles. Grab your rounded rectangle tool, and on a new layer - make a rectangle shape with a corner 'radius' of 10px. Then, cut off the top part. Next, click Layer > Layer style > Blending options - and add the settings located below (click to enlarge)
5. Place these all across your header, you should be able to fit about 7 on. Then, add some text and a little icon. The icon i have used is a little orb (click image below to see how i made it) These can be placed at various places throughout your layout. click the nail of the layout to see what you should have so far.
6. Ok, next lets create that complex header which is really simple to do! Make a new image, (this is basically the same as Electric Metal Tutorial) 700 px x 700 px. Fill the background black. Click Filter > Render > Lens Flair - With the default settings, do this 5 times... put one in the top left, top right, bottom left, bottom right and the middle. Next, you want to chrome it (Filter > Sketch > Chrome) and then colorize it (CTRL + U) check the colorize box and give it a fairly high saturation... Next, duplicate the layer and click Filter > Distort > Wave and make it crazy!! Put the blending options to overlay, and then repeat this step a few more times until you get a nice background.
7. The next step is a fairly simple one. Basically, just add circles, patterns and lines all over! You can make your own, do them with the brush tool or even download some - This isn't a major step, i just like to add it because it looks like the banner graphic is more heavy. After that, you might want to add some scan lines. For this type of simple, light, uncomplexed layout - scanlines everywhere look really cool
8. Right, Next we can go ahead and put in your site name on the header. This isn't the easiest part, but looks really good! Start off with a font, i used Trek, which can be downloaded here. Ok, so.. Set it to about size 50 on 'smooth' and then apply the following blending options (Layer > Layer style > Blending options)
9. Nice 'ey? Ok, now you can duplicate the layer (CTRL + J) rasterize it, (Layer > Rasterize > Layer ) delete it all (CTRL + A) then DELETE (on your keyboard) and then paste in your logo!
10. Ok, now i guess its time to add the highlight on the header. On a new layer, grab a marking tool you like.. pen tool, lasso tool, paintbrush.. any. (i used the pen tool). Now, make a selection that's a bit squiggly. (like a curvy S shape) that goes all across your header, up the site and over the top. Its not really a good idea letting it go out of the header, as your going to be highlighting things that shouldn't be highlighted. Right, now add a layer mask (2nd button from the left on the bottom of your layers palate) then grab your gradient tool. Set it to black vs white, and drag from the top of your highlight to the bottom. You might take a few tries at this - its not the easiest thing to master. (If the gradient is hiding the wrong part, click Reverse on your toolbar at the top)
11. We are almost there actually, lets get in a bit more detail to get rid of the boredom! Apply the pattern below places around your layout. You can manually draw the graphic on, or make one similar and define it as your own pattern.
12. The Bitdust font (click here to download) perfectly fits the layouts look and feel, this looks great when you add your © notice, along with your heading titles. I suggest you do this in size 8 and a dark gray. Finally, on a new layer... make 2 white boxes for your content to go - This is done by making a selection with the marquee tool, and then filling it (ALT + Backspace)
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials