Well you've seen these blog buttons absolutely everywhere, they've proliferated like crazy ever since, well, blogging became a craze. There's no set way to create them, or how to create them. For an example of how Modbloggers
, including myself
have stretched that idea, you only have to head over to Modbuttons
Some bloggers insist that the standard blog button size is 80 pixels wide by15 pixels high, though I have yet to see anything on the "officialness" of such claim if even a thing exists. To satisfy people though, for this tutorial we will start with 80x15 pixels. In this tutorial, you will learn to make a very stimple, low filesize
button. It assumes moderate understanding of your Windows interface (ie, must know when an item is selected, how to use menubars etc - should already know this if you got here!), but this will be simple enough for anyone.
First, open up Adobe Photoshop
. Technically you an use any drawing program you like to do this, from Paintshop Pro to Corel - even Microsoft Paint if you are so inclined. I am using Adobe Photoshop CS2 here; this should downgrade easily enough. You can always ask me for help if it does not.
In Photoshop, select File>New. Enter 80 pixels for the width, and 15 pixels for the height, and have a resolution of 72 pixels/inch. Ensure you are using RGB Color. Make the background white or transparent.
You should now have a small box on your screen. Zoom in by pressing CTRL and the add or plus symbol until you are about 700% zoomed in. This will make it easier to draw.
Go to Layer and select New > - from that pop-out menu, select "New Layer". Call this layer, Border.
Press CTRL+A, or go to the Select menu and select "All" from the drop down menu. You should see a moving dashed line surround your entire canvass. When you have this, click Edit and select Stroke.
A box should appear entitled "Stroke". Make the width 1px, and the color white. To make the color white if it isn't already, click on the coloured box next to the title "color". The "Color Picker" will appear. On the colour map that appears, either select the top most left corner, or type 255 in each of the R, G, and B boxes in the first column of radio buttons (Under H S B)
When you've selected white, ensure the Blending is set to Normal, and click ok. You should now have a border which is white. If you chose a white background, and even if you chose transparent, it may be a tad hard to see. Don't fret - we'll sort this out.
From the tools vertical toolbar (has many little icons on it, like T for text - which we will use soon, and pictures of brushes and cursors and so on), select the icon called Magic Wand, located underneath the feather picture, second column of the toolbar, second row. Alternatively, you may press W on the keyboard.
With the wand selected, your cursor should turn to a little, well, wand looking icon with a sort of starburst on top (Don't ask me where they came up with the idea for that, seems to suit), click in the dead centre of your canvas. (Note
that the "border" layer must be selected
. It should be, but to check, select Window, go down the drop down list to Layers and click till you see a box appear with Layers. Ensure "border" is highlighted.)
You should see the selection rectangle occur, but as a smaller rectangle. This is because we've selected the region inside the border. With this still selected, go to Layer>New>New Layer and enter "Fill" for the layer name. When this is created, the layer called Fill is now the current layer, and the selection rectangle is active on this layer.
Go to Edit> Fill. A box will appear, that should say Use: Foreground Color. Now you can keep this selected if you know your Foreground Color is not white. To know this, you must look on the tools toolbar, to where there are two squares, with one overlapping the other. If the first square, that overlaps the second is white, you may not use this. If it isn't white, you may press Ok in the Fill box to get a fill of that colour. If you have white, click on Foreground Color in the Use: dropdown and go to the option that says Color... and click.
With any luck, you will get the Color Picker again. Select a colour you want your button to be. I chose a blue, with R: 0, G:80, and B:135. Press ok when you have chose your colour.
The Color Picker will close, and return to the Fill box. Press Ok again.
You should now have a nice filled box with a white border. This is good.
Now we will add some text, which may be the username of your blog or website or even a saying or the like, but first, we need what is called a pixel font. A simple definition of a pixel font is a font that can be very small and readable at the same time. For more information on pixel fonts and where to download pixel for free, view Jennifer Apple's Tutorial
, download and install one of your liking. I'm using FFF Harmony, found for free at FontsForFlash.
Click on the the screen. Up the top of Photoshop resides the "Option Bar" (If it is not there, press Escape. Click Window, go to Options and Click. Then select the Text tool again and click on the screen). The Option Bar displays the font name and type, it's size and if it is anti-aliased (smoothed) or not. At small sizes, we do not wish our font to be smoothed.
From the font name drop down, select the font you downloaded, or select Arial. Set the font size to the size it's recommended for (if a pixel font), or select 9pt if the font is Arial (could use sansserif as well). Make sure the font type is Regular or Normal, and that anti-aliasing is set to "None", and the color is set to one that is visible on your Fill layer - I have set mine to white for my navy blue. Click on the box again and type your desired text.
Once done return to the options bar and select the large tick symbol on the top, far-right.
You should now have your basuc blog button. You may export it for use on your website.
To do so, click File>Save and save your file as a Photoshop Document. Once done click File>Save for Web. On the right hand, select GIF from the first column, first row, drop down box, and since I am using only two colors, I set this accordingly in the Colors box. Once done click save, and save to somewhere safe. My button was only 164bytes, which is pretty good.
You have now, hopefully created a button. This one's very basic, try experimenting with different colours of fills and strokes and text. Don't be afraid to ask questions if you are stuck.(Note: Due to hosting issues, images have been removed. Sorry for the inconvienience - Mo).