create your own

Making Number Buttons The Easy Way

73
rate or flag this page

By Squimpleton

If - like me - you don't like using plain text for your numbered lists, you've probably thought about using graphics. For those who do not wish to make their own, there are plenty of free buttons - including number buttons - to download online.

However for those who are looking to create their own, whether for pride or simply because they cannot find what they are looking for, I shall offer a nice simple tutorial on how to make buttons.

First off: Picking an image editor

If you're still trying to use Paint for your buttons, please do stop. Unless you happen to be a master of Paint manipulation chances are buttons will look too "childish". Maybe some day I'll make a lesson on how to make web-worthy buttons with Paint, but for now I'll be assuming you have a more current program.

What programs are good?

  • Fireworks - this is the program that I'll be using in my examples.

  • Photoshop

  • Gimp - it's free

  • PhotoStudio


Click thumbnail to view full-size
Picking dimensions. Click on the photo to enlarge. Click on the other thumbnail below to switch to pick number 2 for step 5.
Picking dimensions. Click on the photo to enlarge. Click on the other thumbnail below to switch to pick number 2 for step 5.

Two: Picking a dimension

Unless you're trying to get a very unique (and strange) button, you will probably use standard dimensions. Number bullets should be no smaller than 15 x 15 pixels in my eyes. Personally I like 25 x 25 px but even these feel too big at times.

Why is the resolution in your picture 72?

That's the resolution all of my screenshots because that is the resolution the computer takes them in. Personally I find them to look very nice. However if you want a higher resolution go for it - but don't go overboard.


Three: Using a sample number as your guideline

See the key to making nice numbers is to write one using regular text, make an outline of it using the pen tool, and change that outline at will. So let's set it up. A slideshow is available for eye cand...I mean visual aid.

What is going on in the slideshow below?

  1. That's me picking the Text button. This will allow me to write a number on the canvas

  2. That is me picking a (random) font. If you have a specific image in mind, pick a font that's close to it. However if you just want to be creative, pick a random font. I like to close my eyes and scroll the mouse up and down and then click without looking. How more random can you get?

  3. I picked a font. Since my picture is 25 x 25 I decided a 25px font. However no one says you have to use the same number. Actually I probably would have been better off using a 30 since the Mangal font is rather small.

  4. I wrote the number 1. Most people use number buttons for list so 1 is a good starting point. The color of the number doesn't matter as you'll eventually get rid of it. I only have red because fireworks picked it for me.

  5. (switch to the next picture in the slideshow below to see). Most current editors have "layers" and often you can see a list of layers on the side and have the option to "lock" a layer. That means the layer won't be editable no matter what you do. While this isn't really necessary I like to have it on because nothing is more frustrating than accidentally changing layers while doing work.

Steps 1 - 4. Click on the picture to enlarge. Press the arrow to see step 5's picture.
Steps 1 - 4. Click on the picture to enlarge. Press the arrow to see step 5's picture.


Click to enlarge
Click to enlarge
Top layer is the pen tool. The bottom is the original background. Since the new image was made over the old one, it covers it up. However if you missed a spot it could still show up.
Top layer is the pen tool. The bottom is the original background. Since the new image was made over the old one, it covers it up. However if you missed a spot it could still show up.
Making the background layer invisible is a good thing to do if you didn't do an exact outline and some of the old number might still show up. While some may delete the old layer, I like to keep it just in case I need it for reference.
Making the background layer invisible is a good thing to do if you didn't do an exact outline and some of the old number might still show up. While some may delete the old layer, I like to keep it just in case I need it for reference.

Four: Making an outline.

This part is easy. Grab the pen tool (not the brush tool and not the pencil tool).

Why the pen tool?

Pen allows you to use a series of lines and curves to make a single image. While this may sound like the same thing the brush does, unlike brush and pencil, each click is its own point. That means if you make a mistake you can go back easily. Also if you use the same point to start as to end, you will be easily able to fill in your drawing.

(See picture 1 if what I say sounds like gibberish)

Why is your number 1 black?

Since I connected the image I was able to fill in my drawing with any color I wanted. I chose black beause it's a simple color to work with (picture 2). The reason why the red doesn't show up is because I covered it when I was doing the outline. Also I then made the old layer invisible (last picture)


See the editing yourself

Freeform Tool
Freeform Tool

Five: Adding originality to your drawing.

Simple little tweakings can change your image. However how you change it is up to you. I will merely explain the two tools you will use to do this task:

  • Freeform tool
  • Subselection Tool (aka "white arrow")

Freeform Tool

Freeform is actually the harder of the two if you don't know how to use it well as it can have many uses. I will only talk about one - the abilty to deviate a line.

First you click on the you wish to move off. - then you just drag it. See the picture if you need to know what I mean by "move off". It actually just creates a sort of triangle. In other words if you didn't add special lines while in the pen tool you have the opportunity to do so now

White Arrow Tool

This tool will simply move the vertex of two adjacent lines. The vertex is that round thing that connects two lines to each other. If you move it, both of these adjacent lines will become larger or smaller according to where you move it. See the 2nd picture of the slideshow to find out what I mean.

What do you do now?

Play around with both of these tools until you have something that is uniquely you - but still looks like what it is supposed to be (in this case, a 1)


Click thumbnail to view full-size
Picking a canvas color
Picking a canvas color

Six: Going beyond single-color pictures

Hey, if you want your picture to only have one color - and only in one shade - then your work is done. However if you want to have more, you may still want to read on. Once again there are 3 pictures to the right to aid you. They are all clickable to enlarge, and you can change pics via the thumbnails.

You may need to pick a canvas background.

Using the "invisible" canvas is great for most occasions. It'll auto-blend with the background. In my case I'll pick white because Hubpages changes invisible to black - which I don't want right now.

Adding more colors to your image.

I would suggest using the Gradient Option. Go to your image's fill-in (bucket) and select Gradient. Then pick a type of gradient. I like ripples because it kind of randomizes the effect and I love random things. However if you want a specific color on one side, and a different color on the other side, Bars might be better. If you want a contour, Contour would be better (duh). Just play around. If you don't know what to pick, just pick a random one. You can change it later after all.

Now that you have a style, you will need to pick colors. I went with a pink theme so I chose a main pink. I then added an orange just for contrast. However I didn't want the gradient to be pink to orange. I wanted it pink to pink, then an immediate change to orange. That's why I have two shades of pink so far apart, and an orange really close. The white is just for glare effect. You don't have to pick as many colors as I have. Two colors are enough for a gradient and usually enough for a nice picture. However using 3 or more can give you more control on the color manipulation.

The results

You went on a journey with me, don't you want to see what the result is?

Now that your picture is over, make more pictures using the same styles you chose. I made a picture for "2" in the same style, see? Same colors, Same gradient type, similar way of shaping the numbers. This allows for a theme to go through your numbers.

Web Graphics 1 - Icons, Buttons, & Parts Web Graphics 1 - Icons, Buttons, & Parts
Price: $4.96
List Price: $19.99

Thank you for reading! Leave any comments here.

RSS for comments on this Hub

ProCW profile image

ProCW  says:
17 months ago

Very interesting hub Squimp. Nice information. Nice original graphics. A+. :)

ProCW

Squimpleton profile image

Squimpleton  says:
17 months ago

Thank you :) I try.

Submit a Comment

Members and Guests

Sign in or sign up and post using a hubpages account.


optional


  • No HTML is allowed in comments, but URLs will be hyperlinked
  • Comments are not for promoting your hubs or other sites

working