Every time I visit
websites, it is either the header or the background that always gets my
attention. I am always startled by their beauty, their “effects”, and how they
were created. I also believe that the header can give the greatest
impact on the viewer. Since then, I have dreamt of making such header or
background that can put the viewer in awe.
Luckily, a prospective
client before trusted me to practice on the website he was building. His
priority was that I be able to make compelling articles aside from maintaining
the site. But since he allowed me to build the site from the very foundation
which is its layout, I really got so obsessed on making a good header. I have
attempted thrice in creating a header in photoshop. And the third and last one
was inspired by a website that I was able to search in the internet.
Following is my step
by step procedure in creating the header. Enjoy the crazy things that a newbie
can do in order to come up to a design she wanted to imitate.
The website of the
client was intended for business. So I decided to create a business header
inspired by this post - http://www.designinterviews.com/news/101-Header-Tutorials-58780.html
This is it- my business header:
For a newbie like me,
and considering the effort I exerted to come up to this kind of header, this is
for me the most beautiful header in the world wide web. ;)
To do this, follow
these steps:
1.
Open your
photoshop and create a new file. Set dimensions to 900 px X 150 px. Well, I am
not sure if this is the ideal size. But I found it fitted on that website so I
used it.
Gather
your images to use. I acknowledge the owners of the photos I used here. I found
them “free” from google search. To avoid copyright issues use your own images,
or purchase legally, or just be aware of copyrights.
1.
I used
three images. Put them in photoshop and edit to get rid of unwanted backgrounds
using the magic wand tool. Click on the magic wand tool, then on the image
(make sure that image is not locked), and then hit the backspace key.
Drag and drop the image to
the background layer. Press ctrl t to fit the image to the background.
Create another layer, drag
and drop such that it appears between the image and the background layers. At
the top left menu, click on layer then select the new fill layer and gradient.
. Create a new layer above the background and below the photo.
Ideally, it should be creating a rectangle using the rectangle tool and then
give a two layer styles - a pattern overlay that will look like a sheet of
paper and a drop shadow. Unfortunately, I was not successful in using the
rectangle tool. So instead, i looked for a notebook image and put it in the
photoshop and fit in the background.
Then,
create a new layer again and use the pen tool to make a "wave". Just
drag and drop. Like all the other tools, photoshop requires practice for you to
be able to effectively use all its tools. With the pen tool, i also found it
hard to use it.
 |
| The pen tool
5.
The pen tool shape should be duplicated. But I wasn’t able to do
that. I just decided it still looks nice without duplicating that layer.
6.
Make a logo by creating a circle at the left side of the header
using the ellipse tool. Well, just as usual, I failed in manipulating the tool
bar so I was able to make an oval instead. Give it a drop shadow layer style
and another stroke layer style.
7.
Finally, do the texts for logo. I used Eccentric Std.
And here is the finish product:
Ok, laugh. I still didn’t make it
this time. But I tell you, it’s worth a try. And aside from studying the basics
first before you try complicated designs like this, practice works a lot. Keep
on practicing and keep on learning.
I hope you enjoyed and learned
from this tutorial. And I bet you’ll be waiting for more tutorials from a
newbie like me. ;) Watch out for a video tutorial from me. Who knows, you might
find it more enjoyable.
Keep reading. :)
|
No comments:
Post a Comment