I'm really bored, so I'm going to do a tutorial on how to make those flashy buttons on my sidebar!!! WOOHOO.

First of, I'll run you by the things you should need:

• ***EXCESS OF TIME. REALLY.
• ***PHOTOSHOP/ILLUSTRATOR/FLASH/GIMP(worse-case)
• ***IMAGINATION + ORIGINALITY(I'm a hypocrite. See the links.)

Okay so for starters, you open your Image manipulating software.
I highly recommend photoshop or flash, whichever you're comfortable with.

For now it's just a matter of designing your button. For a grungy sort of feel, you can do like what I did. Brushes, diagonal lines, brushes, erasing.

TIP#1. GRADIENTS. USE GRADIENTS. Because then when your button lights (you get a "WEEEEE" feeling) up it'll look more real because then there's a change in tone. More later.


Remember, don't use weird colours like red and blue together. Get a theme straight for your blog and work with shadows and highlights, like the darker parts and lighter parts of your button. Don't have too large a change in colour.
For this gradient I have only two stops, two different shades of yellow.

TIP#2&3. BORDERS and BRUSHES!


It'll be good that you add a border to your image, be it via styling in your HTML, or directly on the image itself.

BORDER/STROKE in Photoshop

Double Click Layer to stroke > Select Stroke from the Style list

For the links in my sidebar I used dry media brushes, and a combination of erasing and brushing. How you wish to decorate your link is to your own liking, but adhere to the colour scheme you have decided for your blog. Mine is yellow and black. Can see right?! HAHA.
Whatever the case, for Photoshop users, if you're going to doodle some stuff on your link button to beautify it, be sure to do it on a new layer, so if you screw up you can just delete the ruined layer and start on a new one.

NEWLAYER in Photoshop

WINDOWS: CTRL+SHIFT+N, then ENTER.
MAC: CMD+OPTN+N, then RETURN.

TIP#4. ADDITIONAL BACKGROUND STUFF, but remember, in many occasions, less is more.


If you're going to put any thing in the background in your link, try not to make the background elements to distracting, try to make them as inconspicuous as you can while still retaining the asthetic qualities. Again, whatever you want to add, do it on new layers.

The diagonal strips are done using a pen tool, stroked on with a basic brush, then cloned many times over with equal spacing.

Flash users will have to save images as GIF and PNG files, because only those files are able to contain transparency data, and also the file sizes are smaller, so as to ensure quicker loading on your blog or whatever.

Exporting images from flash

File > Export > Export Image...

Then a window should pop out asking you what you want to export the file as. Choose either PNG or GIF from the drop down menu at the bottom of the window. Then click Save

WAH THIS IS TAKING TOO LONG. I give up. HAHA. SEE YAH!

Labels: picture