The Classic Round Mound Button

Create a 400 x 400 document and with the circle tool, create a circle.

Change the fill to a radial gradient and make the gradient similar to mine.

Hit the “V” letter on your keyboard to select the pointer tool. (Or just click on the black arrow in the vertical toolbar.) Position the gradeint as I have done at the left.

Next, right click on the button you have made so far, and select Convert to Bitmap. (Or you can click Ctrl + Alt + Shift + Z.) Now, with the eliptical marquee tool, make a circle (by holding down the Shift key) that is smaller than the button itself. Then go to Modify – Transform – Rotate 180. (You can see how big my eliptical marquee circle was in the picture at the right.) Hint: You can move the marquee circle around by pressing the arrow buttons on your keyboard.

Spoono.com

The Classic Gel Button

Start off by selecting the rectangle tool.

Use your mouse to drag a rectangular shape of your desired size. On the properties tab, change the rectangle roundness to 100.

In the properties window, click on the dropdown menu that says solid, and Choose Gradient > Linear.

You will see your rectangle change from a solid color to a gradient. On your image you now have 2 anchor points that you can adjust to tell the gradient where to start and end.

Move them from the right/left and place them in the center of your rectangle, going from tom to bottom. You will see your gradient change.

Click on the colored box in your properties tab, and then click on the two color icons and change them to a light blue/dark blue.

Press Ctrl+C to copy your rectangle, and then Ctrl+V to paste it. This will create a duplicate layer of your rectangle button, we are going to use this layer to add some reflection. On this layer, click on the colored box again, this change both of the color to white. Then click on the opacity button, as shown below, and bring the left side of the gradient down to an opacity of 0.

Your image should look something like this,

Change the scale of this gradient by click on one of the squares towards the bottom of your image and dragging upwards.

Duplicate your bottom layer once more using the same method above. Make sure you change back to your initial gradient layer before you copy and past. On your first gradient layer, choose Filter > Blur > Gaussian blur.

In your layer window, change the opacity of this layer down to 60, as shown below.

Your all done, here is how mine turned out.

Voidix.com

Blue Tech Nav

For this tutorial I decided to make a good looking link menu with web 2.0 flavor. I used web 2.0 colors like gray, blue (some kind of light blue).

The final result looks like this:

1. Create a new document, any size, I use 800×600 pixels. Then select the rectangle tool (or press U) and draw a rectangle, 5(w)x28(h) pixels. Select the rectangle and set background to Gradient -> Linear. Put the background line the way I did on the picture below and use the same colors. Set border to Pencil -> 1-Pixel-Soft, and set border color to #0099FF, Tip size to 1.

2. Select the rectangle tool again and draw a rectangle, 160(w)x27(h) pixels. Place it to the right side of the first, 5px wide rectangle, with 1px space between them. Set its background to Gradient -> Linear, put the background line like I did on the picture below and set the colors shown below.

3. Select the rectangle tool again and draw one more rectangle, 160(w)x1(h) pixels. Set its background color (solid) to #CCCCCC. Place this rectangle just below the big gray rectangle.

4. Draw another rectangle, 1(w)x28(h) pixels and set its color to #EAEAEA. Place this rectangle to the right of the big gray one.

5. Now, copy & paste the whole “navigation link” a few time and place the copies one below of the other. Write some text on these links. The font I used is Arial, size is 16 and the color is #000000 (black).

Now, we have to create an example of over link. Choose one “navigation link” and select its gray rectangle. Edit its gradient background (click on the background icon) to these colors:

6. This is the last step. In this step you just have to change the colors of two rectangles. See the picture below.

Here’s the final result again:

TechSymptom.com

Turn a Photo Into a Cool Pencil Drawing

This tutorial demonstrates how to convert an image to a pencil drawing.

Step 1

Paste an image on your canvas.

Step 2

With the image selected click on Filters>Others>Find Edges. The image is darkened with the lines highlighted.

Step 3

Go to the Properties window below the screen and click on Blend Mode and select Difference.

Step 4

Click on Filters>Sharpen>Sharpen. The lines appear a little darker.

Entheosweb.com

Awesome Slick Button by Kenetix

This tutorial assumes you know the basics of Photoshop or Fireworks, only the concept will be taught here.

Step 1
Draw a rectangle with rounded corners, set the outline to #999999.

Step 2
Add a gradient to the box just like the diagram. Colors used in this are #CCCCCC, #999999, and #FFFFFF(white).

Step 3
Add a drop shadow to the box at 315 degrees (pointing to south east. The drop shadow should look like the image below.

Step 4
Draw another rectangle with a gradient like in the diagram below. Image colors are #CCCCCC and #999999.

Step 5
This part gets a little tricky. Basically you set the bottom and right borders of the newly drawn rectangle to white, and the top and left borders to black. You may want to add a slight inner shadow (#333333 @ 315 degrees) to the box to make it look like it juts inwards. It should look like the diagram below

Step 6
Just like the diagram, draw a white box over the second box, set the size to 4 pixels shorter in width and height than the existing box.

Step 7
Reduce the opacity of the white box to 50% and slice the bottom half of the box off like the diagram below.

If you feel the glass looks a little too bright, you may reduce it more to 30% and it will look similar to:

Step 8
You’re done. Play with it a little more and you will get something like:

Kenetix.net

Simple Sprite Animations

This tutorial describes the creation of sprite animations from a sprite sheet, using Fireworks MX. The skills demonstrated here though can be adapted in other programs.

The first step in this tutorial is to chose a sprite sheet which we would like to use. For this tutorial I have chosen a basic animation that involves a spiny shell simply spinning on the spot. The sprite sheet for this animation is shown below.

Note: It is important that when you chose sprite sheets that background for the sheet is transparent. This makes it a lot easier when it comes to cutting out each individual frame. If you have a sprite sheet without transparency then you may have to do editing on the background depending on how you want he result to be.

To create a sprite animation we need each one of these pictures to be in its own frame. So firstly I used the Marquee tool to select the area of the first shell.

I then cut the shell out using Ctrl + X and then pasted it again using Ctrl + V. The shell should then have the dotted line around it if the marquee tool is still selected. This now only selects the shell and not the box that you drew before with the marquee tool. By cutting and pasting you have now put that shell on its own layer. If you then cut the shell out again and use the Ctrl + N to create a new document the settings as shown below should match the same size as the shell. Ensure that the settings are the same as shown below and click OK.

Fireworks MX cleverly matches the Canvas size to the most recently added object to the clipboard. When doing more complex sprites the canvas size may have to be constantly adjusted based on the size of the picture. In this example we are lucky as the first picture is the biggest of the sprites and since we want the animation to move on the spot there is no need for canvas size to change. Use Ctrl + S to save your work so far and call it whatever you want.

At the moment we have one frame worth of animation. To add extra frame we can use the add frame function on the Frame toolbar. If your frame toolbar is currently hidden then select Frame under the Windows on the taskbar. Then add a new frame using the add frame button on the frame taskbar. Click the button five times to add five frames.

Then return to the sprite sheet and use to technique as mentioned before to cut each frame and paste in each respective frame. To move from frame to frame double click on frame you want to go to in the Frames taskbar or use the navigation under the work area. Also when you return to your sprite sheet be careful and make sure that you are working on the layer with the sprites and not a blank layer which was created as a result of cutting and pasting.

If you have completed all of these steps then you should have a small animation which plays. No to get that as an animated gif. Go to file then export preview. Select Animated GIF under Format on the drop down menu and select alpha transparency.

This will ensure that the file is a GIF that animates and will be transparent. If you then click on the animations tab you can select the speed of the animation. The greater the values you enter per each frame the slower the animation. Once you have finished choosing your settings click export and then your done. My end result can be seen below.

Simple Gel Button in Fireworks

STEP ONE

Now, first open Fireworks and create a New document.
STEP TWO

Then select the Rectangle tool and draw a rectangle like 140 pixels of width and 25 pixels of height. Set the rectangle roundness to 40. Then set Gradient background -> Linear and place it from the top to bottom, like on the picture below (with the colors shown below). The color of border should be #990000.

STEP THREE

Now, when you’ve done the proccess above, create another rectangle with 25 pixels of height and 1 pixel of width. Now, place that rectangle about 25 pixels to right from the left button’s border.

Final result:

You can try to combine with other colors, too.

Professional Fireworks Navbar

STEP ONE

Start with a New document, I usually start with 800 X 600 pixels and select the Rectangle tool.

STEP TWO

Now, draw a rectangle – 405 pixels of width and 25 pixels of height. Border should be 2 pixels, 1-pixel-soft style and the color #FFFFFF. Set background to Gradient -> Linear with the colors marked on the picture below and place the background like on the picture below, too.

STEP THREE

After you’ve done that, select the rectangle and set roundness to 60. Select the rectangle again and add the glow effect on the properties panel and change the numbers just like on the picture below.

STEP FOUR

Now, we’re ready to make borders on the navigation rectangle. Select the Line tool (press N) and draw a line – 22 pixels of height and 1 pixel of width. Background is transparent and the border color is #2C4052 and set border to 1; 1-pixel hard. Now, copy-paste that line and just change the border color to #7F99A9, and place the second line next to the first. See the picture below (zoomed to 800%).

STEP FIVE

Select those two lines and place them on the navigation rectangle. See the picture below.

STEP SIX

Copy and paste those two lines as many times as you want and place them on the navigation rectangle so you’ll have “sections”.

STEP SEVEN

After that, select the Star tool (it’s in the same item place where’s the Rectangle tool and others) and create a Star. Click the Points spot (and hold it) and rotate untill you have 3 points so you have a triangle.

STEP EIGHT

After you’ve created a triangle, select the triangle and rotate it for 180 degrees (go to Modify on the top -> Transform -> Rotate 180 degrees). Select the triangle and set background to #FFFFFF and it’s size should be 7 pixels of width and 3 pixels of height. Now, move that triangle on the top of the first section of the navigation rectangle and you have something like I do on the picture below.

The navigation’s done and place any text you want in those sections.

Software used: Fireworks MX 2004.

Create A Nifty Mail Icon

Create a New document and select the rectangle tool. Draw a rectangle, 80 pixels of width and 40 pixels of height. Set the rectangle roundness to 30.

STEP TWO

We have to set background for the rectangle. Select Gradient -> Linear and set colors like they are marked on the image below. Also, place the background line like it’s shown on the image below.

STEP THREE

Now, set background to 1, 1-pixel Soft style, with #666666 color.

STEP FOUR

Select the rectangle tool and draw a rectangle, 1 pixel of width and 40 pixels of height. Set backgound to Gradient -> Linear and set the colors that are marked on the image below. Place the background line like it’s placed on the image below. Image is zoomed 400%.

STEP FIVE

Copy the second, 1 pixel wide rectangle, and select the first one. After you selected the first small rectangle, go to Modify -> Transform -> Numeric Transform and select Rotate option. Set rotation angle to 55. Now, select the second small, 1 pixel wide rectangle, and go to Modify -> Transform -> Numeric Transform and select Rotate option. Here you must set rotation angle to 305.

(zoomed 400%)

STEP SIX

Place each of the two small rectangles, like I placed them on the picture below, over the first, big, rectangle. Image is zoomed 400%.

STEP SEVEN

Select the Ellipse tool and draw a small ellipse, 8 pixels of width and 8 pixels of height. Set it’s background to #E66F02. In the Properties window go to Effects -> Bevel and Emboss -> Inset Emboss and set values like they’re shown on the image below.

STEP EIGHT

Now, place the small ellipse over the first biggest rectangle, like it’s shown on the image below. Image is zoomed 400%.

The step above was the final step. That’s all and the mail icon is done. Below are my mail icons.

Used software: Fireworks MX 2004

Windows XP Style Button

In this tutorial I’m going to show you how to create a button in windows XP style. After you started with New document, follow the steps below.

STEP ONE

Select the rectangle tool and draw a rectangle, 150 pixels of width and 25 pixels of height. Now, set the rectangle roundness to 80 and set Gradient -> Linear background. Also, set border to 1, 1-Pixel soft style, #666666 color. Then, set texture to Line-Diag 1, in the properties panel, and amount of texture to 15. See the image below and set the background line like it’s shown on the image, with the marked colors.

STEP TWO

Select the rectangle tool and draw another rectangle, 48 pixels of width and 25 pixels of height and set the rectangle roundness to 80. Set the second rectangle’s border to 1, 1-Pixel Soft style and #666666 color. Now, select the rectangle tool and draw a rectangle, any size. Now, place the third rectangle over the second, like it’s shown on the image below, zoomed 400%.

STEP THREE

Now, select both, the second and third rectangle and go to Modify -> Combine Paths -> Punch. Now, we have to set background for the rectangle we made with the Punch command. Set Gradient -> Linear background and set the colors and the background line like they’re marked on the image below. Set texture in the properties panel to Line-Diag 1 and amount of texture to 9.

STEP FOUR

Select the green rectangle and place it over the gray one. Check the image below. Also, that was the final step and the button is done.

Used software: Fireworks MX 2004