Tutorial: Creating a Blog Header and Blog Button using Pixlr

 

After I have
picked a color pallet and gathered some images, the first thing I
design is the header. In my opinion it is THE most important design
element on your blog. It is the first thing everyone looks at on your
blog. Having a nicely designed header gives your blog a more
professional, or attractive look.
I know some
of you may have read that looks don’t always matter when it comes to
SEO (search engine optimization), and that it is all about content etc. Well, I am here to tell
you this is not 100% true. I work for a company that rates web pages
that show up in Google, and looks do matter!
That all
being said, be sure that your header makes sense to you, and
represents you. You don’t want to confuse your readers. It wouldn’t
make sense if you had a very girly header, yet are not a very girly
person yourself.
The next
important design element is the blog button. This is your online
business card that you pass out to bring people back to you.
Therefore it is important that it represents you, is attractive, and
easy to read.
This lesson
will cover some tips for good header and button design, as well as go
through step by step how to create your own in pixlr.
 
Tips For
Header Design
  1. Keep it simple. An over designed header can be very
    distracting.
  2. Make sure that it is easy to read.
  3. Consider a tag line. A simple sentence that represents
    what your blog is about. This will bring more clarity to your blog.
    If you wish to attract sponsors and/or companies, they will
    appreciate this. It will save them time when they are trying to
    figure out if you are the right match for them.
  4. Strive for a balanced look. It seems like a small
    thing, but if you place too much on one side, it will give your
    entire blog a lopsided feel.
  5. All these tips can be broken! Just be sure to consider
    them.
  6. Keep trying out new things until you reach a design
    that you are happy with. When I design for clients, it is not
    uncommon to end up with multiple headers until we find the design
    that ‘clicks’ with the blog owner.
Tips For
Blog Button Design
  1. Again, keep it simple.
  2. Make sure it is easy to read. If a reader can’t read
    it, then it is unlikely they are going to click on it when they see
    it in a sidebar.
  3. Consider making multiple sizes. Bloggers have various
    sized sidebars, therefore will want various sized buttons.
  4. Make sure it matches your blog design.
Designing
Your Header In pixlr
Before
opening up pixlr, the first thing we need to decide the size of your
header.
Width:
The width of your header image is also the width of your blog. I
recommend a width between 1000px and 1200px. These sizes will fit in
most screens. I usually choose 1000px for a two column (post and 1
sidebar) template, and go with a wider size for anything with 3
columns.
Height:
This varies a lot, and is really dependent on your individual style.
I would say that the most common size is 300px to 400px. I would not
suggest anything larger than 400px, as your header image will take up
too much space. Most readers like to be able to start reading
something before they have to scroll down.
For
this tutorial, I am going to make a header size of 1000px by 300px.
Okay, lets get started.
  1. Head over to pixlr.com
    and choose the advanced editor. Then choose Open Image, and open up
    all the images, including your color-palette that you have chosen.
  1. Next go up to File and select New Image. A small box
    will pop up asking which size. Type in your desired size into the
    box, tick of the box that says Transparent and hit OK.
  1. Adding Text to Your Header
To
add text to your image, there is a box in the toolbar with the letter
A (called the Type Tool). Choose this and click on your image
anywhere. This will bring up a box that will allow you to type in, as
well as let you choose which font and which size you would like. The
font(s) that you have installed on your computer from the previous
lesson should show up in the list.
I
suggest that you only type one word at a time. Once you have typed in
your word, chosen the font and size hit the OK button. Repeat this
process until you have all the words.
Now
each word will be on its own layer. You will now be able to pick up
each word and move and place them individually. To do this, select
the Move Tool, then go over to your Layers box and choose the word
you would like to move around.
Try
different things with you text. Move them around. If you would like
to change the size, choose the Type Tool, then click on the layer you
want to edit, and click on the corresponding text in the image. This
should bring up the Text box for you to make adjustments.
  1. Changing the Color of Your Text. Using Your Color
    Pallet
Remember
that color pallet you chose, well it is now time to make use of it.
Click on the image of your color pallet to bring it forward. Next you
are going to choose the Colorpicker Tool. Then click on one of the
colors in the image.
At
the bottom of your Tool Box, you see the color box has changed to the
color you have clicked on. Double click on the color box. A new box
will open that has a color wheel on it. This is where we can find the
color codes. I have circled the color code in the image below. Make
note of the color codes of all the colors you would like to use and
save it somewhere. We will be using these codes a lot.
Next,
head back over to your header image. Choose the Type Tool and choose
the layer with the text you would like to change and click on it. In
the box that comes up, there is a color box. Click on this and it
will bring up the color wheel again. Type in the color code you would
like to use and hit OK. Repeat on all the words until you are happy.
  1. Adding Your Images
Open
up the image you would like to use. For mine, I have chosen a graphic
of a dragon fly, however it is not a color I would like to use. Pixlr
does not have an easy way to edit images, but it is possible, and
with a little patience you can do it.
First
choose the Wand Tool and select the bits of the image you would like
to change. Once you have done this you are going to choose the Brush
Tool and paint over the selected areas the color you would like. In
my example I have took my pink dragon fly and turned it a dark brown.
To
select multiple areas, hold down the shift button while selecting. To
deselect once you are finished painting an area, go up to Edit –
Deselect All.
 
Once
you have edited your image, you will want to move it over to your
header. First of all you need to select what you want to move to your
header. This can be done with either the Wand Tool, Marquee Tool or
Lasso Tool. Select your image then go to Edit- Copy.
Open
up your header and paste the new image. Chances are that it is not
going to be the right size. To adjust the size, make sure that your
image layer is selected then go to Edit – Free Transform. You will
now be able to adjust the size. Once you have your image the right
size, hit enter.
Important-
After you hit enter, your image will be formatted to this size. This
means that it will become fuzzy if you decide it needs to be larger.
So, just to be safe, keep the image a larger size, then scale it down
once you know for sure what size it needs to be.
Now
if you are like me, and are using a jpeg image, you probably have
some white space around your image which is covering up other parts
of your design.
 
This
is easy to fix. Make sure the image layer is selected, then choose
the Wand Tool and select the white areas and hit Delete. Then head
back up to Edit- Deselect All.
Jpeg
files will always have some sort of background to them. PNG files
support transparency. So you ever have something that you need to
save that has a transparent part to it be sure to save in Jpeg. I
always save in PNG for design work, as it tends to keep a better
quality at a smaller file size than Jpeg.
Once
you have your final design done head up to File – Save. In the box
that comes up be sure to give your header a name and choose PNG as
the format. Save it to your computer.
Here
is my finished result. Notice how I have already broken on of my tips
and not included a tag line. I think the title of my blog is enough
explanation.
Video Tutorial for pixlr:

Video Tutorials for photoshop:

1. You Color Pallet and Editing Colors on Images

2. Creating Your Header in Photoshop

 

Designing
Your Blog Button
A
lot of the above steps are the same. The only difference now is the
size. Here I opened a new image and chose a size of 150px x 150x,
then followed the above steps and come up with this button:
I
suggest that if you are going to have a white background that you add
a boarder around the outside. This will ensure that your button looks
good on all sorts of pages and not just floating in the sidebar.
Again
Pixlr does not have an easy way of doing this, however it is not
difficult either.
First
of all, color your background layer using the Paint Bucket Tool.
Next,
go up to Layer – New Layer.
Then
choose the Drawing tool, choose the Rectangle Tool and a fill color
of white. Then draw a white box. You can adjust its placement after
it is drawn with the Move Tool or your arrows on your keyboard.
Again,
save this image to your computer.
 
Other popular blog button sizse:
200×200
200×150
125×125 (this size is pretty much garunteed to fit in anyone’s sidebar.)

Video Tutorial for pixlr:

 

 

1 Comment

  1. Adorei seu Blog ele é AWESOME

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>