Now there are two ways you can get gradient text. One method is to create a gradient, add it to Swatches Panel and then use it to colorize your text. The other method is to create outlines out of text and then use the Gradient tool to use the gradient on the text. Each method has its pros and cons. While the in the first method the text is always editable, you have no control over the gradient after it is applied. On the other hand in the second method, once you create outlines the text becomes un-editable, but you can modify the gradient as you wish.

In this tutorial, I will explain both the methods and you can choose whichever suits you best.

Method I

1. Create a new document/ open an existing one in Adobe Illustrator CS5. Choose the Type Tool (T), draw an area type box and type in some text.

2. Undock the Swatches Panel. If you cannot find the Swatches Panel, go to Window > Swatches.

3. Now using the Rectangle Tool (M), draw a rectangle that is of same size of the area type box or longer. The reason behind this is, the gradient will be repeated to fill the text. So longer the text, more repetitions. Since you won’t have any control over the gradient, once you add it to Swatches Panel and apply it to the text, you need to be careful while creating one. In case you want to modify the gradient later, you need to modify it in the Gradients Panel and then again add it to the Swatches Panel.

4. To create a gradient, open the Gradient Panel. If you cannot see the Gradient Panel, go to Window > Gradient. Create a gradient using two or more colors. This is what I created for this example.

5. Now select the rectangle and drag and drop it into the Swatches Panel.

6. Then select the text (using the Selection Tool (V)), make sure Fill is on foreground and click on the newly added pattern in the Swatches Panel. Your text will now be filled with the gradient.

Method II

1. Type some text in a Type box. Then with the Selection tool (V) selected, single click over the text to select and then right click. From the menu, choose Create Outlines.

2. Now select the built in gradients or create a new gradient. With the outlined text selected, single click in the small gradient preview in the Gradient Panel to apply.

3. Now if you want to change the direction of the gradient, you can do that. Choose the Gradient tool (G) in the Toolbox and drag into the direction to change the gradient stroke.

TIP: Once you create an outline from the text, you can ungroup the text and colorize them with gradient, individually.

You must have seen text on a 3D object is conformed so well on the object that makes it look so real. In this tutorial, we will learn how to do that. Look at this image;

1. Create a new document.

2. In the Symbols panel, from the drop down, choose ‘Open Symbol Library’ and then choose the first symbol – ‘Cube’.

To place it on your document, just drag and drop over it.

3. I don’t like the blue, red and yellow colors in the cube, so I am going to change them. To be able to edit the symbol, we first need to unlink the symbol. Do either of the following,

- In the Symbols panel, from the drop down choose ‘Break link to Symbol’.

- Right click the symbol (in this case, the cube) and choose ‘Break link to Symbol’.

Now your symbol is broken down into fully editable paths. You can modify the symbol any way you like. We will just change the color here. So open out the Swatches panel, choose a color (I choose a shade of dark gray). Here’s how our cube would look;

4. Now we will create the text, that is to be placed on the cube. Go to the Type Tool (T) in the Tools panel (on the left of the window). Draw a Type box. Start entering text.

I have added a tab in between the two sentences so that they are placed correctly on the cube.

5. Next we will use the pen tool to create an outline of the cube, where we want to place the text. Select the Pen tool (P), with Fill as None, and select the portion of cube where we want to place the text, as shown in the image below:

6. Using the black arrow tool (Selection Tool (V)), carefully select and drag the outlined shape onto the text.

7. We need to make sure the oulined shape is always on the top, so with the shape selected go to Object > Arrange > Bring to Front.

8. Now select the shape and the text box, then again go to Object > Envelope Distort > Make with Top Object.

And see the text is now changed to conform to the shape we created.

9. Now drag this text box, to the cube.

Oh! the text is not visible since it is black in color and our cube too is of a darker shade. Do not worry, as our text is still editable. Just select the entire cube using the Selection tool and go to Object > Envelope Distort > Edit Contents. Choose the Type tool and click inside the text. Change the text color to white and I would also like to reduce the text to fewer lines to make it more visible. After making any modifications, click on the Selection tool and click somewhere else on the art board.

In this article we will create a clean, elegant, gradient typography as shown below:

Follow these steps:

1. Launch Photoshop CS4.

2. Set the Background color (small overlapped square) in the Tools panel (docked to the left of the main window by default) is set to black. By default the Foreground color is black and background in white. Click on the double arrow sign next to the boxes to interchange the colors.

But you can click on any of the boxes and choose a new color for foreground and background.

3. Key in CTRL + N or Go to File > New. In the New dialog box, specify the dimensions as Width – 300px and Height – 200px. Choose the Background Contents to Background color.

4. New document with a black background (or a background you have chosen).

5. To create a gradient effect on the background we can use two tools:

a. The Gradient tool

b. The Brush tool

In this example we will use the regular brush tool to create a light gradient to the document. Create a new layer by clicking on the Create a new layer icon in the Layers Panel.

Double click on the text Layer 1 and rename it to ‘Light Layer’. Keep the layer highlighted and follow the next step.

6. Set the background color to white. Choose the brush tool from the Tools Panel. In the Options bar at the top of the window, open the Brush Preset Picker by clicking on the small downward arrow and choose Soft Mechanical 500 pixels brush. Increase its Master diameter to around 615 px to get a better effect.

7. Now hold down the brush on the document, in the center or upwards, to adjust the angle of light as you want. Then reduce the opacity of the layer to get a subtle effect. See image below:

8. The background is now ready and it is time to add text to it. The text too will have a gradient effect. Choose the Horizontal Type tool from the Tools Panel and click on the document. Choose the font and other details in the Options bar. Start typing the text; in this case, we will just type ‘Some Text’.

9. Now we would like to center the text; horizontally as well as vertically. For that, key in CTRL + A (to select all) or choose Select > All.

10. With the ‘Some Text’ as the active layer in the Layers Panel, go to Layers > Align Layers to Selection > Horizontal Centers. This would center the text horizontally in the middle of your document. Similarly to vertically center the text, go to Layers > Align Layers to Selection > Vertical Centers.

11. Now it is time to add the gradient and effects to the text. Double click the ‘Some Text’ layer to open the Layer Style dialog box. Click on Gradient Overlay.

Click on the Gradient box to open the Gradient Editor as shown below:

Choose the gradient by clicking on the small arrows and choose a gradient as shown above, which is white at the top and darkens to gray in the bottom of the text. Click OK in both the dialog boxes to exit. The gradient text is visible now.

Next we will add a shadow to the text to give it a raising effect. Again double click on the ‘Some Text’ layer and in the Layer Style window and click on Drop shadow. Choose the options as shown in the image given below:

Click OK to exit and we are done! The final document would look like this:

To change the background color and font color of a div on mouse hover, use this CSS code.

<style type=”text/css” >

.title_div{

                background-color:black;

                color:white;

}

.title_div:hover{

                                background-color:green;

                                color:black;

}

</style>

<body>

        <div class=” title_div”>

                        On mouse over div becomes green and text turns black.

        </div>

</body>

The same can be done in Microsoft Expression Web in very simple steps.

1. Go to the Apply/Manage Styles task pane and choose ‘New Style’. In the New Style dialog box, enter the Selector as .title_div and set the background color to black and font color to white.

            

2. Click OK to save. Then position your cursor into the div and right click on the style in the Apply Styles task pane and select Apply Style from the menu or simply double click on the style, to apply it to the div.
3. Now create another style called .title_div:hover (a pseudo-class to catch the event hover/mouseover) and set the background color to green and font color to black.

             

4. Save your document and preview in the browser.