Professional Web Layouts (Part 3)
My most complex of the three tutorials so far. This
is beyond the other two. Instead of just telling you
what to do, i will show various options on what to do.
So of course, making it very long. Ok, so open a new
image with a white background. The size should be around
750 x 400 or so. Create a new layer and make a selection
from top to bottom. And covering most of the width, fill
it in with a bright grey. Around the hex code of E8E8E8.
Then deselect it pressing ctrl + d. Now, right click the
layer and choose blending options. Check the stroke
option and make a 1px stroke with a color of 4D5A6A
Create a new layer. Get the selection tool and make a
selection like below. Dont Make it too big. But make
shure that the selection is touching the blue line, but
not overlapping it. If your not that good, you should
zoom in and make shure its like mine.
Then, once you got the selection right, fill it in
with the same blue color (4D5A6A).
Open the blending options for that layer, and exactly
like before, add a 1px stroke with a blue stroke of
4D5A6A. Now, for a nice effect, zoom in the to max, get
out your pencil tool, set it at 1px, and change the dark
blue to a light blue color (around 66788E). Then add a
2px line in the bar that you made. Just make a strait
line by dragging a line across the dark blue area. To
make the line strait, hold shift. Then, add another line
right on top of that one.
Now, you should make a pattern with horizontical
scanlines.
Just make the pattern, stop after
the tutorial tells you to close the image without
saving. Ctrl + click on your layer with the blue bar (to
bring up it's selection). Create a new layer, and add
the pattern you made to that selection by going to Edit
-> Fill, and choose the pattern you made. Right-click on
the scan lines layer and choose blending options, choose
gradient overlay. Make a gradient where one side of the
gradient is the same color as the bar (4D5A6A). And on
the other side, make the color lighter.
Or, if you dont like that, you can also switch the
colors, you can move the color's to the opposite sides,
or move one half way or so. Whatever you like. Here's
what i'll choose.
Create another new layer. But move it below your blue
bar's layer. then make a selection not too tall (make
shure it's touching, not overlapping, the blue lines on
the outside), and fill it in with a very bright grey.
Then right click on it's layer, choose stroke, add a 1px
blue stroke like before. But now, also add a Inner glow
with a nice blue tint like below.
One you do that, save that style for later use.
Next, what you can do, is get the Polygonal Lasso Tool,
and about half way, make a selection like below, and
holding shift, you can get strait lines.
And pressing the "delete" key get rids of that
selected part. So do it.
Or, Instead of just using the polygonal lasso tool,
to be more professional, you can use the pen tool by
zooming in a bit and make round corners. You can learn
about the pen tool with
this tutorial
Then, you can turn the path into a selection and press
the "delete" key to get rid of that selection.
Next, we create a new layer. And make a selection
touching the blue lines, make this selection taller than
the others and fill it in with the same bright grey you
used on the other white section. Then add the same layer
style on it.
Again, you can use the polygonal lasso tool to cut
out a shape like below.
and get results like below
Or, you can add a cury line with the pen tool like below.
Turn the path into a selection, delete the selection, and get these results
Next thing were going to do is create a new layer,
and place it under the layer with the big white area you
just made. Create a selection covering the empty area
you just deleted and fill it in with the dark blue we
have been using (4D5A6A). So it looks like below.
Then add a 1px stroke with the dark blue. And just
like the very first thing we did, get the pencil tool
set at 1px, and add a 2px line near the top with a
bright blue.
And again like before, ctrl + click on the layer to
bring its selection, then add some vertical scanlines on
a new layer, and add a gradient overlay that you like.
Heres what i chose, i used a very bright blue on the
bottom.
Lets move on to a sub-content area. Create a new
layer and make a rectiangle selection. Fill it in with
white or bright grey, then add the style you made for
the other two bright grey areas. Like below.
Create another new layer and zoom in and make a
selection on the top of that rectiangle, and fill it in
with the dark blue we've been using.And just like
before, add a 2px thick line across the blue area and
add a 1px blue stroke, then add some scanlines on a new
layer and adding a gradient overlay. You should already
get the hang of doing the scanlines and gradient overlay
quickly. Also, make shure it's big enough for the title
you want to put thier (if you want to put a title their)
Now we go back to the blending options of the blue
area we just made and add a drop shadow.
And now, you can add the menu or stuff wherever you
want, maybe a few extra effect like more scanlines at
some parts.
But of course, you wont forget to add a banner right? to show your real skill.
|
