TrueSong Media

I know I know… I haven’t posted in what may seem like forever. If you still care what I have to post… hop on over to TrueSong Media.

Cutout an Image from its Backround with the Magic Wand tool

To successfully extract an object from its background, we will learn several techniques in this lesson: using the magic wand, adding to the selection, contracting the marquee, and using the eraser tool.

We start off with this laptop image that had been enhanced using the Levels filter as described in the previous lesson.

In this lesson, we will extract the laptop from its background and end up with the following…

An object without its background is useful for purposes such as in banner ads or websites. If you want to go through this lesson with the above “before” image, just right-click on the image and save to disk.

Step 1: Using the Magic Wand

With the image selected in Fireworks, select the magic wand tool and set its edge to Anti-alias and tolerance 5.

When we click the white area with the magic wand, it is not selecting the entire portion of the wall. The tolerance of the wand is set too low. It is too sensitive and is detecting the fine color change in the gradient light of the wall.

Step 2: Adjusting the Tolerance

Do Ctrl-D to de-select our selection. Increase the tolerance higher to 40 so that it is not so sensitive to color changes. And use the magic wand again to pick out the wall.

Generally, you want to set the tolerance to be as low as possible and yet still pick out the area that we want.

Step 3: Delete the selection

With the selection made as shown above, press the delete key. Do Ctrl-D to de-select. We have deleted the background wall.

Step 4: Adding to Selection

Use the magic wand tool to do the same for the right wall. This time, it selected only part of the right wall.

We can add to the current selection by holding down the shift key and clicking with the magic wand. This is the new extended selection…

Step 5: Zoom In to Check Our Selection

Before we delete this selection, zoom in close to take a better look.

See how our selection is selecting part of the edge of the laptop. It is selecting too much because the magic wand tolerance is set too high. Ctrl-D to de-select and zoom back out to 100%.

Step 6: Decrease the Tolerance

Decrease the tolerance to 10 and try again. This time, the selection pieces are much smaller. So you may have to Shift-click a few times to get the full wall as shown.

If it misses some spots in between, it will be okay. We will clean those up later.

Step 7: Contracting the Marquee

After zooming in to check on our selection…

we see that it is still cutting into the laptop (but not as much as before).

To avoid cutting into the object, choose Select -> Contract Marquee and contract the selection by 1 pixel in our case. See how it is no longer cutting into the object.

At the edges, it is usually better to leave a bit more background than to cut into the object. It the extracted image looks like it has jagged edges, it is usually a sign that the selection had cut into the object.

Press Delete, de-select with Ctrl-D, and zoom back to 100%.

Step 8: Deleting the Pedestal

Deleting the pedestal is a bit more difficult. It is hard to get a good selection due to its varied shadings. As you can see from the below selection. Part of the brown near the edge of the laptop is not getting selected.

Step 9: Eraser Tool

Instead we will use the eraser tool to clear out an area around the base of the laptop. Zoom in and use an circular eraser head size 8. Set it to a fairly soft edge at 75. You can see the how an edge setting of 0 differs from an edge setting of 100 in the below picture.

Step 10: Erase Around the Edges

After erasing all the way around the edge, you can pick out the pedestal with the magic wand by setting a very high tolerance of 119. It won’t catch any of the laptop pixels because the laptop had been disconnected from the pedestal by our erased area.

Step 11: Delete the Pedestal

Delete the pedestal selection. De-select the marquee. And use the eraser to erase any pieces that are left over.

Step 12: Catching Missed Spot with Red Background

Although the above looks decent, we can not see the tiny pieces that we might have missed due to the transparent background. So we draw a rectangle with a constrasting red color over our entire canvas.

Move the rectangle layer underneath the Bitmap layer. Now you can clearly see the missed spots.

Another way to see the missed spots is to select the red area with a magic wand set to zero tolerance. It will detect areas that are not pure red.

De-select any selections. (In order to delete properly, you must not have any selection active.) Select the Bitmap layer and start cleaning up with the eraser.

Step 13: Deleting the Red Background

After the magic wand detects no stray marks, you can then drag the rectangle layer to the trash can to delete it.

Step 14: Trim the Excess Canvas

Trim off excess canvas with Modify -> Canvas -> Trim Canvas and we get our extracted laptop. Save it as JPG since photographs are often better saved in this format. Note that the JPG will have a white background because JPG does not support transparancy.

Link

Line Edged Frame in Fireworks MX 2004

This image effect comes under the category of Alien-Skin> Edges. It has a few Edge options such as dots, lines, lumpy, pixels, rough and torn paper. Choose images which have dark colored edges, so that the edge effects will be crisp. Here is a step-by-step tutorial to give this line edged frame to your picture. For this, you need to have Fireworks MX 2004 installed in your system.

Step 1
Open a new page and paste an image on the canvas.

Step 2
Select the image and click on Filters>Alien Skin Splat LE>Edges as you see in the image below.

Step 3
The Alien Skin window below will be displayed. Select Halftone Lines option from Edge Mode.

Step 4
Adjust the Edge Width, Margin and Feature Size sliders. I’ve given the values : Edge Width – 42, Margin – 0, Feature size – 63, Direction – 317. If you need a transparent fill for the image then you can check the option Transparent Fill, which will deselect the color option and the image has a white background.

The Random Seed value can also be adjusted. You can view the changes in the image simultaneously on the right side preview area.

Step 5
Below is the picture with a line edged frame and a transparent fill!

When the Transparent Fill option is not checked, the color option is made active so that you can select a color. I’ve selected blue, and here is what I get!

Entheosweb

Twist and Fade Filter – tutorial by Voidix.com

In this tutorial we are going to use Fireworks’ twist and fade filter to create some fun abstract effects. You can use this filter to create very different effects, in this tutorial I was working towards a 3d-cone shaped logo. Start off by creating a new file, and drawing a circle using your ellipse tools.

Change the fill mode to gradient, and gradient mode to radial.

You can color your sphere with whatever colors you want, I used orange and yellow. Be sure to center the lighter of the two colors to create a rounded effect. Next add a light dropshadow.

Adjust the scale of your sphere depending on how large you want your abstract effect to be. You created a vector image when using your ellipse tool, which means you can resize the shape to any dimension without loosing quality. To adjust the size simply choose Modify > Transform > Free Transform, and pull the anchor points outward.

Click on your resized sphere, and choose Commands > Creative > Twist and Fade.

This will bring up a new window with 4 different adjustment options. The steps will dictate how long your faded image’s trail is, the spacing will dictate how far apart each duplicate image is, the rotation adjusts the direction of the “twist” and the opacity will change how faded each duplicate image is. For an example , here are the settings that I used.

Press apply, and watch your image come to life! Here is an example of a logo that I created.

Voidix.com

Metalic Nav Menu by Oman3d.com

Metallic Navigation Menu – By Conceptoo

1- Open Macromedia Fireworks MX 2004.

2- For the sake of this tutorial, create a new canvas with the width of 600px and the height of 300px.

3- We will use the pen tool to make the shapes of the navigation menu. Select the pen tool .

4- With the shift key pressed, use the pen tool to draw shapes like the ones in the image bellow. Try to experiment your skills with the pen tool, that will help you in handling it in a better way.

5- Select all the shapes that make the navigation menu, fill them with a gray color. And then from the Properties inspector, go to Effects > Bevel and Emboss > Inner Bevel.

6- Change the numbers of the Inner Bevel properties so that they match the image bellow.

7- With all the shapes selected go to the properties inspector select Effects > Shadow and Glow > Inner Glow.

8- Change the numbers of the Inner Glow properties so that they match the image bellow.

This is what we have till now. To make it more realistic, we will add some screws to the metal plates.

9- First we must know how to make the screws. You can make the screws using the pencil tool, and drawing 4 pixels. Like the image bellow.

There is one dark pixel ( darker then the color of the button ), and 3 white pixels. Make the screws with the pencil tool as shown in the enlarged image above. Then copy and past the screws so that you get the output shown bellow.

10- Now add the text you want. And then you can slice it using the slice tool, or export it as an image to your HTML editor and use Hot Spots add the links to the navigation menu. This is the final Result.

For any Questions please feel free to post them Oman3D.com Forum.

Oman3d.com

Add Scanlines to an Image

You want to start out by opening the image that you want to add the scanline to, I chose the Lightforce wallpaper and scaled it down to 300×225.

Next, create a new layer above the background n the layers from palette. Then go to the solid palette and change the Textture to “Line-Horiz 4″ and set it up similar to the image on the left with opacity near 60%.

Rectangle tool from the toolbar and draw a rectangle over the entire image on the new layer. Finally, on the Layer palette, change the opacity of the layer which contains the scanlines to 25% and you’re done

 

Spoono.com

Metal Buttons

Use your rectangle tool to make any shape that you would like to make into a metal button. I applied a roundness of 100 to mine, but you can do whatever suits you.

In the properties window, click on the dropdown menu entitled “solid” and change it to Gradient > Linear

Click on the colored box in your properties tab to change the color of your gradient. Click on the color icons to the left and right, changing the left to a light gray, and the right to a dark gray.

You will see two anchor points added to your rectangle, to change the direction of the gradient, drag the points to the position shown below.

In the properties window, click the + sign to add a filter. Choose Shadow and Glow > Drop Shadow.

You should have something similar to mine

Now lets make this look a little more metallic. Go back to your gradient colors by clicking on the colored box in your properties window next to the paint bucket symbol. Place your mouse below the gradient, and you will see a + sign appear. Click here allows you to add a new gradient point. Click to add, and change the color to white. Drag your new icon to the position shown below, or to a place that gives you a nice metallic. shine on your button.

Change the border to 1 pixel, and the color to dark gray.

Click on your rectangle tool again, and make a new shape. Make it slightly smaller than your previous rectangle, similar to mine.

Change the gradient anchor points, as we did earlier, this time place the white color towards the bottom.This contrast will help give the illusion of depth.

Add some text and your all done, here is how mine turned out.

Voidix.com

Decent Tabbed Windows

Start off by starting a new image, 300×200 in size with white background. Next, draw a fairly large rectangle that takes up most of the image. Put a light gray background on it. You also want a 1 Pixel hard black border around it. Then create a new layer and using the rounded rectangle tool, put three equally sized rounded rectangles for the tabs on the top. Choose a slightly darker gray for it.

Using the Layer’s tab, gray the layer with the three rectangles behind the layer with the large, gray rectangle so they start looking like tabs. Then using any font, and black color, place the text on top of the tabs. I used BitDust2 font, size 16, all caps. It should look similar to the picture on the left.

Great, at this point select Edit – Select All then press Edit – Copy. Now go to the frames tab, which should be on the same pallete as the Layers tab. Press the Add Frame Button then press Edit – Paste which puts the same thing on this frame. Do the same thing again for Frame 3. Each frame represents each time each tab is on the top.

Alright, now go back to the First frame. Ctrl+Left Click the first left tab and the large rectangle, then select Modify Combin- e – Union. It might change the interior color to white, but you can change it back to gray using the color tab. Then click on the second frame and do this same step with the middle tab, and then do it again for the third frame using the third tab.

If you want you can go to the Effects tab and add an inner bevel to each of the tabs as well as the main tab with the rectangle; I used 2, Flat, Highlighted for the big rectangle with 75% opacity and 2, Flat, Raised for the little tabs with 75% opacity. Thats it folks. If you have any questions, please post them.

 

Spoono.com

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