Affordable Website Design - www.affordable-website-design.me.uk or www.awdesign.me.ukClick Here to email Affordable Website Design

Jelly Text
Free Articles and Tutorials for Web Designers
www.affordable-website-design.me.uk or www.awdesign.me.uk

GraphicsFactory GraphicsFactory

Tutorial: Jelly Text Effect
Software: Adobe Photoshop 6.0
Difficulty: Beginner

This Adobe web tutorial will show you how to create jelly style text effects to add some cool effects to your text.

Step 1: Fire up Adobe Photoshop and go to File + New to create a new file image. Set the width and the height to the settings that you want. Remember to make the file image big enough to place your text onto it.

(Step 1 diagram)

New file image

Step 2: Now you will need to select the type tool by clicking the T icon >> Type tool icon and then click onto the blank file image and start typing your text. I chose to type 'Jelly' with the verdana font and used the color black - #000000. Note: It doesn't really matter what color you use for your text or what font you use for that matter.

(Step 2 diagram)

Start typing text

Step 3: Now go to the layers palette and click on Add a layer style >> Add Layer style icon and then click on Drop Shadow from the drop-down menu. A Drop Shadow box will now appear - make your settings the same as the ones shown in the 'Step 3 diagram' below and then click OK.

(Step 3 diagram)

Drop Shadow

The color used is green #50DF30

Step 4: Now go back to the layers palette and click on Add a layer style >> Add Layer style icon and then click on Inner Glow from the drop-down menu. An Inner Glow box will now appear - make your settings the same as the ones shown in the 'Step 4 diagram' below and then click on OK.

(Step 4 diagram)

Inner Glow

The color used is green #6FF74F
The quality used is 'Contour'

Step 5: Again go back to the layers palette and click on Add a layer style >> Add Layer style icon and then click on Bevel and Emboss from the drop-down menu. A Bevel and Emboss box will now appear - make your settings the same as the ones shown in the 'Step 5 diagram' below and then click on OK.

(Step 5 diagram)

Bevel and Emboss

Step 6: Again go back to the layers palette and click on Add a layer style >> Add Layer style icon and then click on Blending Options from the drop-down menu. The Blending Options box will now appear - turn to your left and click on the Contour tab. See below.

Contour tab >> Contour tab

Now the contour box will appear to your right. Make your settings the same as the ones shown in the 'Step 6 diagram' below and then click on OK.

(Step 6 diagram)

Contour Elements

Contour used Half Round

Step 7: Again go back to the layers palette and click on Add a layer style >> Add Layer style icon and then click on Satin from the drop-down menu. A Satin box will now appear - make your settings the same as the ones shown in the 'Step 7 diagram' below and then click on OK.

(Step 7 diagram)

Satin layer style

Color used green #B0F74F
Contour used Gaussian

Step 8: Finally go back to the layers palette and click on Add a layer style >> Add Layer style icon and then click on Color Overlay from the drop-down menu. A Color Overlay box will now appear - make your settings the same as the ones shown in the 'Step 8 diagram' below and then click on OK.

(Step 8 diagram)

Color Overlay

Color used green #9FFF00

Now to finish it off go to Layer + Flatten Image and then save it to your hard-drive.

The finished Jelly Text Effect should look like the below diagram.

The finished tutorial result

You can also add things like an inner shadow or a border etc. Once you are comfortable with this tutorial try some different layer effects.

I hope this tutorial was of help.

Article copyright @ webdevstore.com

<< Tutorials           Top of Page           Articles >>


© July 2003 Affordable Website Design - All rights Reserved
Add to Favourites       link To AWD       Disclaimer       Privacy       Tell A Friend