How to create a text gradient in fireworks

Enter your text

In my last post, I explained you how to create a text gradient in Fireworks. We will now use a different technic to obtain the same result.

Here is the step by step tutorial:

First, select New in Files and enter 400px in width and 300px in height.
Select text tool or press T and type any text:

Enter your text

Select the pen tool…

… and draw a path as shown below:

Enter your text

Select your path and apply a gradient:

Enter your text

you should obtain something similar to this:

Enter your text

Tilt the line in a vertical position:

Enter your text

Click on the background color of your path. You should see two cursors with two different colors. Select one of the cursor and pick the color of the text with the eyedropper:

Enter your text

Click once again on the background color of your path and select the same cursor. Now, select the Sys Color Picker.

Enter your text

Move up the cursor to a slightly lighter color:

Enter your text

Do the same with the second cursor but move the cursor up to a very light color.

Enter your text
We will now cut and paste the path inside the text:

Select your path and press Ctrl+X to cut it

Select your text and press Shift+Ctrl+V to paste your path into it

Here is the result:
Enter your text
You can now modify your path gradient to get a better result or modify the shape of your path (with the Subselection Tool (A)).

And my final result:
Enter your text
Tip:
To give more depth to the text you can add a gradient (with a darker color on top)

Fireworks Tutorial: creating a reflected text

To add a reflection to your logos, headers or titles is a great way to give depths to your webpages. As you will see, it is much more easier to do this with Fireworks than with Photoshop.

The final result:

And the easy step by step tutorial to obtain a reflection:

First, open a new document in Fireworks and put in some text:

Duplicate your text (Ctrl+C and Ctrl+V).

Right-button and select Convert To Symbol or press F8.

Right-button on your second text and select Transform > Flip Vertical:

Enter in the menu Commands > Creative > Fade image. Select the option as shown below and press OK:

Here is what you should have:

Go in the Layers Panel on your left and select the black square (see image below):

You should now see a black line:

Dragg it up and lengthen it:

Here you are! Easy, no?

Improve Images: Erase wrinkles in Photoshop

Ever wonder how professionals touch up photos to embellish actors and models for a magazine cover or advertising? It is what will see today in this tutorial.

I will take for example one of my photo (Brad Pitt would have been a better model. Sorry for that girls!). My wife took it in a morning just after I woke up. As you can see below (left photo) I have some very ugly and big wrinkles below my eyes. On the right, I erased them in Photoshop. Better, isn’t it?

Final result

Let’s see how I have done that.

Open Photoshop and load the photo you wish to touch up.

Select the “Rubber Stamp” on the left side panel.
Set you “Rubber Stamp” brush size and type as you wish in the “Options Palette” (a fuzzy brush would be best for this kind of work):

While holding ALT key, select (left button) a point of origin (preferably the area you wish to copy).

Release the ALT key and click the mouse to begin cloning nearby pixels to cover those ugly wrinkles.

That’s it! This is a very fastidious work, so don’t expect to do it in a few seconds. You will need to repeat steps 3 and 4 many times before the wrinkles disappear completely. Don’t forget you can always come back to a previous state with the right side panel “History”. I would also recommend you save your original image in case you spoiled it with photoshop.

Fx.Slide

Fx.SlideDownload

Introduction

Here goes a nice introduction

Vertical

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Horizontal

Horizontal CSS Menu with mouseover effect.

This is a clean, professional looking horizontal CSS menu. I added a mouseover effect to it. You can copy everything or use it as a reference to another horizontal CSS Menu. I have tested this menu in IE5+, Firefox, Opera and Safari.

Preview:

See Demo >>

Download Files:

Download (5 KiB, 2,028 hits)

How to create a nice header in Fireworks

What you will need for this tutorial:

Obviously, you will need Fireworks (you can download a free trial here)
You will need an image. You can choose one from Flickr: Creative Commons. Here’s the image I chose for the EDU template (visit the page):
Finally, you will need the background image below. Right-click on the image and click “Save Image As” to save it on your computer (or get the sample Fireworks file for this tutorial, at the bottom of this post):

Note: We’re going to use the Pen Tool (P) in this tutorial. I am not going to explain how to use it. That’s not the purpose of this tutorial. Instead, I invite you to watch this video on YouTube.com. The author explains (in Italian) how to use the pen tool. The video is pretty self-explanatory so you don’t need to understand what he says.

The Tutorial - Part I:

Open the background image in Fireworks. Image size is 960×213px.
Place two guides: one guide at 15px from the left and the other one at 15px from the right.
First, Select the rounded rectangle shape and draw a rectangle in your page. Don’t bother with the size at the moment.
Open the “Auto Shape Properties” panel (in the right sidebar or in the “Window” menu) and change the values as shown below.
Place the shape at 8px from the top (use the “Properties” panel at the bottom to do that).
We will draw the search box at the bottom of the rectangle. Select the pen tool (P) and only draw the left side at the moment. See example below:
Now, duplicate your image (ctrl+alt+D) . Right-click on it and select Transform -> Flip Horizontal. You should get something similar to this:
Select the three shapes (Tip: hold Shift and left-click on each of the shapes to select them. See screenshot above). Go to the menu Modify -> Combine Paths -> Union. This will join all the shapes together to create the header:
We will now add a gradient to our header. Make sure your shape is selected. Select Gradient -> Linear in the “Properties” panel at the bottom.
The colors we’re going to use for the header are #66C110 (for the upper left corner) and #8FF434 (bottom color):
We will draw a new gradient (see example below) with the pen tool (P). We will use same colors as previously but different direction (see the black line on the screenshot below). Duplicate it twice (ctrl+alt+D):
Hold Shift and left-click on each of the three gradients to select them all and cut (ctrl+X). Now select the header and hold ctrl+shift+V to paste the gradients into your header.
In the “Properties” panel, add a white border (1px will be enough).
Add new Filter. Select Shadow and Glow -> Drop Shadow. Put 0 for distance, set opacity to 80% and 2 for softness. Here’s the end result:

You can create a more fancy header if you wish. I want to keep it simple for this tutorial.

The Tutorial - Part II:

In the second part, we will cut out the photo with the pen tool and paste it into our header. That’s maybe the most difficult part, so let’s get into it.

Open your photo in Fireworks.
Select the pen tool (P) and draw a path around the outside of the kids:
Select the Pointer Tool (V) and right-click on the path. Choose “Convert path to marquee” and then feather in the list. Set it to 4 and hit OK:
Right-click on the image and select “New Bitmap Via Copy”. It will create a new image in your “Layers” panel:

TIP: you can use the eraser tool (E) to finalize the photo with “edge” set to 40 and “transparency” set to 20%.
Copy the photo (ctrl+C) and go back to your header. Paste it there (ctrl+V) and resize it (ctrl+T) to fit into your header:
Cut the photo (ctrl+X) and hold ctrl+shift+V to paste the photo into the header.
Last, create a search field and button and you will be done.

TIP: you can easily ungroup the photo from your header by right-clicking on it and choose “Ungroup” (ctrl+shift+G).

Slice the image:

To slice your image, select the slice tool (k). Make a rectangle the size of your header.
Go to the “Optimize” panel and choose JPEG: Better Quality in the first list. Right-click on your slice and click Export Selected Slice. Name your image “header.jpg” and save it in your folder.

(Since, in our case, the image is exactly the size of our file, there wouldn’t be no point to use the slice tool. Instead, we could just go to File -> Image Preview and export our image. I just show how to slice an image for the purposes of this tutorial).
Done!