«

[Duncan Idaho]

Some of you fellow Abandonia fans requested that I make a userbar tutorial, I just couldn't refuse.
Here I will teach you how to make an Abandonia Reloaded Userbar. Your going to need Macromedia Fireworks 8 to do this. You can get the trial version at http://macromedia.com . Your going to be redirected to the adobe site, adove bought macromedia. Then your going to need the "Visitor" font, it is a requirment of all "Official" userbars. http://www.webpagepublicity.com/free-fonts...TT2%20-BRK-.ttf

1. Fire up Fire works and select "New Document".
2. Set the "Width" to 350 PX, and the "Height" to 19 PX. Select "Transparent" for the Canvas Color. Thats the standard canvas size for a user bar.

*NOTE* Transparent is not select in this picture, make sure you select it.

3. Your work area should now look like this.


4. The next step would be to open all the panels you will be using. For this usebar, you only need two. Those are "Layers" and "Assets". The Assets panel lets you quickly edit an Image by adding things such as gradients and shadows. The program comes with a few pre-made, later on you can learn to make your own.


5. Now you need your Layers. In the "Layers" panel there is a button that looks like a folder with a blue + sign on it. Click that until you have 8 Layers.

6. Now you need some graphics to work with. Here are a few that I like.




7. Now you need a work space to edit your graphics in. Go up to FILE->NEW. Set the canvas Width to 350 PX and the Heigth to 350 PX, set color to transparent. Now you have a nice little area to edit in.

8. Before you add images, you need a background. Select the rectangle tool and drag a rectangle over the canvas. It doesnt have to be a perfect fit. I actualy prefer it to be a few pixels larger. Then you can go to the Assets tab and select a style for your rectangle. Mess around with them for a bit to find one you like. (When I say "Bit", I mean for as long as you like. Not the quantum, indivisable, unit of information, that is the result of a choice between to alternatives in logic or numbers)


9. Now we can add graphics :brain:. Import the Abandonia reloaded graphic into your graphics work space. (The 350 by 350PX area we made earlyer). If it asks you to resample, say yes. I doubt you want a picture in the middle of your userbar that has abunch of white in the middle of it, lets remove that. Select the "Magick Wand" tool or press W.



10. To make the wand do what we want, we have to change its properties. Set "Tolerance" to 32, "Edge" to hard, and check the box next to "Live Marguee". Now select the large white areas on the abandonia graphic and press delete.


*NOTE* CONTINUED IN NEXT POST*

[Duncan Idaho]

11. Now add a graphic of your choice to LAYER 4, using the magick wand to edit it. We dont want to touch LAYER 3 yet, thats why we skipped over it.

*NOTE* This picture doesnt show the background, I tend to hide the layers Im not working with. You do that by clicking the Eye ball looking button next to the layer.

12. Now skip to LAYER 6. Select the rectangle tool, give it a black stroke and no fill. Draw a box around the canvas. Make the box 350PX by 19PX.


*NOTE* You can change the size of the box by selecting it and changing its width and heigth in properties. After you do that you can use the arrow keys to fit it to your canvas.


13. Time for LAYER 3. Select LAYER 3, then select the line tool. Draw horizontal across the canvas. I like to seperate them with two taps up or down on the arrow pad. (Er...pad? Isnt that on a game console? Oh well.)



*NOTE* CONTINUED IN NEXT POST

[Duncan Idaho]

14. Select all of the lines. See that little grey and white box in properties? Its for transparency, set that to 20.
Most people make these lines verticle, but I like my own style.


15. Lets brand this sucker . Select the text tool. Set it to visitor font. Make the letters white, make the border black, deselect Auto-Kern, no Anit-Alias.


16. For the 3D effect. Select the "Elipse" tool. click at the top left corner of the canvas, drag to the bottom right corner. Than use the arrow keys to raise the circle up so that only half of it shows. Set the transparancy to 35.


18. Now save your Userbar as a PNG.

Your done! :brain: Congrats on your first Userbar.(I think) k:. After about 5 Userbars, and messing with the settings, you'll get the hang of it, and make your own style.

Here's my finished version. Post yours, I would like to see them.


To add user bars to your sig just add the HTML between

[IMG] and [/IMG]