Fireworks CS4 Basics Tutorial

This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website.

This tutorial will take you through the making of a website design using fireworks including how to do a logo design in Fireworks.

View the tutorial here.

Create Vector and Bitmap Graphics online for free

 Have you ever wanted to create vector or bitmap graphics but did’t have all of the expensive programs to work in? Well I got wind of this website/project called Aviary which allows you to do just that. 

Create graphics online for free

Aviary has created applications mimicking all of the popular graphics programs out there today. I will list the different programs, what they do and some examples of work created by people. I find it quite amazing what you can do with these programs — and they are all free.  Aviary uses names of bird species for each of their programs.

Image Editor (Similar to Photoshop, Paint Shop, Gimp, etc.) which is called Pheonix and is depicted by a very nice Peonix icon. Pheonix has all of the basic things you need to edit an image which include: clone tool, magic wand, filters, selection tools, smudge, layers and image resizing.

To Give Pheonix (image editor) a try click here.

Here are some of the popular images that I really like. These were created in Pheonix by regular users:

 

Apple Created with the Pheonix Editor
Apple Created with the Pheonix Editor

 

Flower graphic created with Pheonix
Flower graphic created with Pheonix

 

Very cool. Also created in Pheonix

 

 

Vector Editor (similar to Illustrator, CorelDraw, Signlab, etc) which is called Raven and is depicted by a Black Raven icon. Raven has some of the basic things you need to edit an image. Raven is new, so more features will be coming out. Some of the existing features include: pen tool, pencil tool, brush tool, basic vector object tool, gradient editor, layers and smart selection. They also have a simple bitmap to vector tool.

To give Raven (vector editor) a try click here.

Here are some of the popular vector drawings that I really like. These were created in Raven by regular users:

Great vector illustration created with Raven
Great vector illustration created with Raven

 

Beautiful tree with a river and coy fish created in Raven
Beautiful tree with a river and coy fish created in Raven

 

Visual laboratory (not much like it on the market) which is called Peacock and is depicted by the Peacock bird. Peacock enables you to create amazing images with the use of filters, images and other mathematical effects. This application can be daunting at first, so be sure to watch the video on how to use it first.

To give Peacock (color chooser) a try click here.

Here are some stunning images created using Peacock:

Effect created using Peacock
Effect created using Peacock

 

 

 

 

 

 

 

 

 

Created in Peacock
Created in Peacock

 

Color chooser and mixer (not much like it on the market) which is called Toucan and is depicted by the colorful Toucan bird. Toucan enables you to create correct color compositions and includes and complimentary, split, etc, color mixer/chooser. You really have to mess around with it to get what it does. It is important for any kind of graphic design when having to choose a number of colors and make them harmonic.

To give Toucan (color chooser) a try click here.

Many more. In addition to the above 4 applications they are supposed to be coming out with many more useful ones. This is a list of the ones I think are quite useful:

       Desktop Publishing (InDesign, Quark Express, etc) called Owl.

       Painting Simulator (Corel Paint, Photoshop, etc) called Pigeon — haha.

       Smart Image resizer (Genuine Fractals) called Woodpecker.

       3D Modeler (3DS Max, Maya, Blender, Sketchup) called Hummingbird.

       Font Creator (TypeTool, FontForge) called Ibis. (This one is particularly exciting to me).

There are more, see them all here.

Cloning Basics

Photoshop Cloning

This tutorial will give you an idea of how to productively clone an object out of an image.

Some people might wonder why it is called cloning. This is because you are creating a part of the image
that was not there from other parts of the image. In this tutorial I will tell you some of the basics. Please bear with me, it is difficult to show you in detail every step without overbloating the post with images.

Level: Intermediate (can be useful for advanced Photoshop users)

Photoshop Version: CS4 (Can apply to Earlier versions up to Photoshop 6)

Tutorial:

In this image is a bug that we are going to remove. We are going to clone it out by placing pieces of the image over it until it is gone. Each person using Photoshop will have their own way of doing this — so take note: this is my way of doing this particular action.

The first thing we want to do is to clone out the major part of the image by using a piece of the image, here we select a square part of the petal.

Next, go to [Layer->New->Layer via Copy] to copy the selected square to a new layer above the background image.
Next, drag the copied layer over the part of the bug as shown here.
Select the eraser tool and select a brush with a very blurry edge.

Then erase a little bit all the way around the piece of the petal.

Next, while holding down the [Alt] key, drag the image piece to cover up different places of the bug as shown below. (Don’t worry if it goes over the edge of the petal — in the next step we will clean this up.

From the last step you will have made numerous layers when you were copying the piece to cover up the bug, now you will need to merge all of the layers above the background layer as shown here.

Once you have merged all of the layers, select the eraser tool. Select a brush with a slightly blurred edge. go around the edge of the shape with the brush, cleaning up any part where the color blured over the edge.
After that, using the clone tool, clone out the major parts of the bug that can be easilty cloned. Use a sensible brush size with a bit of blur when cloning.

Next, zoom up to the detailed part on the bottom side of the bug. Clone out the leftover parts of the bug with a small brush. You can be kind of sloppy here because we will be doing some cleanup work on this part later.

Then merge both layers as shown below.

Select the Polygonal Lasso Tool.

Select the area around the petal and the leaf.


Feather the selection with a 15 pixel radius.

Quality Image Cutouts

Level: Intermediate (useful for advanced users)

Description:

Have you ever tried to cut an image out of it’s background using Photoshop only to be dissapointed in the fact that it does no look good in its new background?

This is one way to do photoshop masking.

Here I go over 3 simple steps to make your cutout more realistic. This lesson was created for lower level users as well as advanced users. The technique used here to make the first selection is only used to keep the learning gradient easy. Advanced users would replace the selection steps shown below with what they know of with regard to making a selection.

Photoshop Version: CS2 (Can apply to Earlier versions up to Photoshop 7)

How to:

First select the polygonal lasso tool. Click and drag around the outside of the image you want to cutout.

  

Next use the lasso tool to cutout the inside parts of the image. You do this by holding [Alt/Option] and click with the lasso, then continue until you have covered the part you want to cutout. For this image you will need to cutout 2 places — the hole for the top ring and the hole for the bottom ring.

Next go to [Select->Modify->Smooth] and enter in a radius of 2 pixels. The radius is how much to smooth the selection. If the selection you made earlier is very jagged you might want to experiment with higher radius levels to smooth out the selection.

Next go to [Select->Feather] and enter in a radius of 1. This will blur the edges of the selection a bit and give it a more real look.

  

Next go to [Select->Modify->Contract] and enter in an amount of one pixel. This makes the selection a little tighter which also helps in making a nice cutout.

  

After you have done these steps, just copy and paste the part of the image you have now cutout.

The final image cutout looks like this:
Note: The grid you see in the back is used to denote transparency (Or Seethroughness) in Photoshop.

Creating a glass button

Make a glass looking button. This is a similar style to the Windows Vista Task bar.

Level: Intermediate

Photoshop Version: CS2 (Can be done in Earlier versions up to Photoshop CS)

How to:

First create a blank photoshop document using these settings: Width: 4 inches, Height: 1 inch, DPI: 300.

    

Select the rounded rectangle tool as shown here:

Draw a rounded rectangle in a similar fashion to this. I used a Corner Radius of .125 in. You can change the radius as you like. More radius makes the corner more rounded, less radius makes the corner sharper.

Change the foreground color to white and draw another rounded rectangle as you see here. You can change the radius for this as well. To make a more glossy look, decrease the radius, to make a duller shine, increase the radius. You can make many different variations of glass buttons using this technique. There are many other techniques as well for creating glass buttons. This is one of them.

    

Next, change the opacity of the white rectangle you just made to 17 percent. You can adjust the percentage as you would like. The higher the percent the more you give the feeling of a strong light pointing at the button, the less the percent, it gives the appearance of a dull light.

    

Next, select the Elliptical Marquee Tool.

Using the Elliptical Marquee tool, make a shape similar to this and fill it with a color you desire. Experiment with different colors, to get different effects.

    

Next, go to [Filter->Blur->Gaussian Blur] and use the settings shown here. You can adjust them as you like.

Next with the blue layer selected press “Command T” or go to [Edit->Free Tranform] and while holding “Alt/Option” drag until the tranform bounding box reaches the edges of the button.

Next, while holding command click on the black rectangle layer. This will select the black rounded rectangle. Then select the blue layer. Once you have done this press “Command + Shift + i” or go to [Select->Inverse]. This will reverse the selection, so it is now selecting the opposite to what was selected before.

    

Press “Delete” or go to [Edit->Clear].

Your glass button is now complete.

You can also try putting a very transparent image above the black and below the blue. This gives a reflection effect which is really quite innovative.

Here you can see the final button: