Flash Components      Flash Menu      Flash Gallery      Flash Slideshow      FLV Player      Flash Form      MP3 Player      PhotoFlow      Flash CMS      3D Wall      Flash Scroller

Flash / AS

Silverlight

WPF

ASP.net / PHP

Photoshop

Forums

Blog

About

 


FlashComponents
  Galleries
  Slideshows
  Menus
  Design & Effects
  Audio & Video
  User Interface
  Templates

 

 

 

 

 
Tag
Your Site With Graffiti
         by Angela Taylor aka Kitiara

Graffiti is a great text effect to use in images, and is relatively simple to create. Although the principle can be applied to pretty much any font, the first thing you’ll probably want to do is find a graffiti style. Try looking on http://www.1001freefonts.com - they have a large selection that are free to download.

Creating Graffiti

  1. Open a new image. This example uses a 400 x 200 px canvas, but depending on the amount of text you want to write, you can make this bigger or smaller. As long as it is in RGB mode, then it doesn’t matter. Set the background to white, and foreground colour of the palette to black. Click on the Type tool, and type in your tag using your graffiti-esque font. The effect works better on larger text, so try and keep the style chunky.

[ type in the text ]

  1. Whilst you can make the text a solid colour, you can get a very good effect by using a gradient fill. Photoshop comes with a lot of these already, but you can always make your own if you don’t like any of the premade ones.
     

To make your selection, hold down the left mouse button on the paint bucket in the toolbar until a small popup appears, from which you can choose ‘Gradient Tool’. A new menu will appear in the top menu bar, allowing you to choose which colour gradient you want. Another drop down shows you the options you have - pick something bright and bold as your fill.

[ choosing the gradient ]
 

  1. Once you’ve chosen your gradient, go back to the Rectangular Marquee tool. Move the cursor to the Layers panel, and hold down the Ctrl button on the keyboard. Whilst the button is pressed, click on the text layer. A highlight should appear round the edge of your word.

[ highlight the text ]
 

Get the Fill tool back - your gradient choice should still be there. Without losing the selection, make a new layer above the text, and hide the copy. In the new layer, apply your gradient vertically. Don’t click elsewhere yet. We still need the selection, so don’t lose it.

[ the text with gradient ]
 

  1. Make another layer on top of the gradient. Pick a darkish grey as your foreground colour, and go to ‘Edit’ > ‘Stroke’ from the menu bar. Give the stroke a 2 px width, and ensure that it goes outside the selection.

    You can leave this as it is, or make it a little softer by applying a Gaussian Blur filter to the layer. A setting of between 0.5 and 1 produces a good result. You can lose the selection now, and merge these two layers together to form the basic graffiti tag. Now it’s up to you as to whether you stop here, or carry on to add a shadow underneath it.

  1. To add the shadow, repeat the selection method on the newly merged layer. Go to ‘Select’ > ‘Modify’ and choose ‘Expand’ from the menu. We need to make the selection bigger than our original text, so expand by 2 or 3 pixels. Create another layer and fill it with black. You’ll need to swap the Fill tool back from gradient to regular. Again, this actually produces quite a nice effect, which you can use elsewhere. Add the Gaussian Blur to this layer too to smooth it out a little.

[ creating the shadow ]
 

  1. Now you just need to piece the layers together. Erase your initial text layer, as you don’t need it anymore. Move the shadow underneath the gradient filled text, and we have our shadow. Nudge the shadow layer a little down and to the left to give it a more 3D look. Merge your two layers when you’re happy with the positioning.

The finished tag will now look something like this:

[ finished graffiti ]

Kitiara
nowingsnohalo



 


kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs! Flash Effect Components

Flash Templates
CSS Templates
Dreamweaver Templates

flash menus, buttons and components
Digicrafts Components The best flash components ever!
Entheos Flash Website Templates Buy and sell FLAs at Ultrashock!
Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com Purchase & Download Flash Components
flash components  Learn how to advertise on kirupa.com