Sunday, October 21, 2007

On the Right Path


Here's how easy it is (using Adobe Fireworks) to make your text follow the path you want ! You'll need a line of text and a simple path for the text to be attached to.

It's as easy as this: Select the path and the text and hit CTRL+SHIFT+Y. When you do this, you'll see the path vanish and the text will move to the position where the line was. Actually, the line (your path) is still there. It's simply no longer a visible line. You can still manipulate the vector line and you can still edit the text.

If you're the type who prefers to use the menu's to get to the functions you want, you'll find this one resides on the TEXT menu. As done before, select your text and your vector line, then click Text>Attach To Path as shown below!



I take requests, so if you're trying to figure out how to make something work, feel free to request it here!

Enjoy!

Monday, October 8, 2007

Photo Realistic Water Droplets



In this tutorial for Adobe Fireworks (all versions) I'm going to take you step by step in the process of creating very realistic looking water droplets without ever getting wet!

This tutorial relies on two vector ovals and some simple gradient fill styles to trick the eye into seeing water! First, let me point out that I've never seen a perfectly round drop of water. I'm sure they exist, but I've yet to see one!

Start by creating a new image in Adobe Fireworks with a size of about 400 x 400 pixels. Set the background color to a light blue... Then, using the Vector Oval Tool I want you to draw two circles, like the ones below. Draw a medium grey oval and a white oval inside it. Yours doesn't have to be exactly like mine, every water droplet should be different!



Next, we'll use the Subselection Tool (shown below) to adjust the shape of the two ovals you've created. Remember that we don't want perfect circles for these water droplets!



The subselection tool allows you to manipulate vector objects... giving you the ability to re-shape them! Just click the shape you want to manipulate and then grab the blue selection handles and drag them around like I've done below.



Do the same thing for the white oval (which is the highlight for the water droplet), but shape this oval to match the upper edge contour of the grey oval. Don't be afraid to play around with it, you can always UNDO (CTRL+Z) as needed until you get it right (as shown below) .



Now we need to add some depth to the water droplet. We'll do this by adding a dark grey Inner Glow to the grey oval. Click once on the grey oval then use the Live Filter Tool to perform this simple task (seen below):



This filter results in the following effect: Make note of the properties of the inner glow. The color of the inner glow is dark grey (NOT BLACK) and the distance and opacity settings should be set to something close to what is shown below!



Continuing on, we're now going to change the solid white oval shape to having a Linear Gradient fill style. This will create the illusion that light is reflecting off the water droplet. Click the white oval shape once to select it, then change the Fill Style to Gradient>Linear. See the illustration below! Please look closely at the direction the gradient fill flows. Going from WHITE at the upper left of the shape, moving to grey at the lower right of the shape. This is the direction the light is shining from.


Now we need to allow the simulated light pass through the water droplet. To do this, we'll change the fill style on the grey oval shape to a Radial Gradient. This is done the same as above, only this time, select Gradient > Radial. The center color should be white, and the edge color should be the color of the grey oval. This is done as shown below.



We are very nearly done! The next step is to add a Drop Shadow to the water droplet. Using the Live Filter > Shadow and Glow > Drop Shadow just as was done a few steps above where you added the Inner Glow. Your water droplet should look something like this:



And finally, select the entire water droplet (drag the mouse around it while holding the left button). Hit CTRL+G this groups the two shapes together into one vector layer. All you need to do now is change the shape's OPACITY so it's transparent enough to see through! Be sure you have selected the shape, then adjust the opacity value. This step is shown below, as is the final product. I've added text to the image so you can see through it.



Sunday, October 7, 2007

The Eyes Have It


Let me show you how to selectively filter an image to produce a stunning black & white photo with the eye retaining it's color (as shown above). This is a beautiful effect that is very easy to accomplish in Adobe Fireworks (or photoshop)!

For this tutorial, click the image below and save it to your computer, or copy the image and paste it in a new Fireworks (or photoshop) project.




There are only a few steps required, using the Polygon Lasso Tool (show below) to select the portion of the eye you wish to work with. Begin tracing out the iris, staying as close to the edge as possible. If you need to, you can zoom in to 300% to get a better trace.





To use this tool, just click where you want to start selecting the outline of the iris (above), then move to another point, continuing until you've gone around the entire iris. When you have made the full circle, the selection will be closed and should look something like this:



The next step will be to invert the selection. As you might have guessed, the eye is to stay in-color, so we need to select everything EXCEPT the eye! To invert the selection, type CTRL+SHIFT+I. (hold down control and shift keys and press the "i" key once). The selection will now be inverted...

To remove the color from the selected image, you'll want to use the Hue/Saturation Filter found on the Filters Menu as shown below:



This brings up the Hue/Saturation dialog box (as seen below). Make sure the Colorize check box is checked and slide the Saturation slider all the way to the left, or just type a zero in the box:




Click OK and you're done! The image is now black & white, except for the iris, which remains in color! This effect looks great for all eye colors! The final image:

The pixels of this digital photo were captured on a Canon EOS Digital Rebel XTi, also known as the Canon 400D. Settings were ISO 200 with an F5 aperture and a shutter speed of 1/60th of a second. I was using a Canon "Nifty-Fifty" lens with a Canon EF II 12mm Extension Tube bringing this image close to 1:4 macro.

Thursday, October 4, 2007

Pixel Capture using the Canon 400D



The very first time I took the Canon Digital Rebel XTi 400D out for a spin, I had the kit lens attached. The kit lens is a 18-55 EF-S mount lens that came with the camera body. It's a decent lens with a nice bit of versatility.

This shot was almost an afterthought really. I've hardly given these pixels a second look since that day. Every now and then, I look through my library of images, looking for something to tweak, alter or otherwise play with in Adobe Photoshop or Fireworks. For about a week now, this shot has been drawing my attention, but I don't know why. There was a hint of shake to the photo, so I didn't like it all that much. I guess it has grown on me. It may be that the colors are just popping out against the mild bokeh of the background...

Wait, what?! What is bokeh? Bokeh is a Japanese word which simply enough means "blur". This effect is desirable when taking certain types of pictures. We'll go into detail about bokeh sometime soon!