spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

HOME | EXPERTS | GRAPHICS| column 21

Rough it Up 2: PhotoShop Outline

 

Arial Black with noise added to a 2 pixel edge. Add Noise filter: Amount 400; Distribution Gaussian; Monochramatic On.

This entire tutorial could be filled with methods and ideas to use PhotoShop for rough graphics. It is ideally suited to this application. I will cover the basics, though, and encourage you to experiment with different brushes and filters to acheive unique effects. The possibilites are endless.

Let's start with one of the most important steps to many rough techniqes—selecting an outline. We will use the outline selection to apply filters and actions to just the outer portions of objects with any shape, including text.

There are "rough" fonts available, but often you want a clear, easy to read font, perhaps matching your main font, but with an extra touch. In the following samples I have used Arial Black, a very traditonal font, but you will see it take on many faces.

 

 

Anti-aliasing grays excluded from selection.

Left: Selection borders showing in regular mode. Right: Same selection with Quick Mask turned on.

Top: Final selection for outline. Bottom: Same selection with Quick Mask turned on.

Select an Outline
Create a new document and type in text. In this case, Arial Black, with crisp anti-aliasing, size 60pt and center justification. Render the layer.

Selecting an outline takes a few steps, but will look more difficult than it is. Follow step-by step and it will make sense.

Double click the Magic Wand tool to open the Magic Wand options window. Set Tolerance to 1 and turn off Anti-alias for accurate selection.

Click the Magic Wand in the area outside the text to select the background. Although we want an area selected for a text outline, we will get a more accurate selection by choosing the backgound. The text anti-aliasing adds a few levels of gray. Choose Select>Similar from the Main Menu. This will select the areas inside text characters. See the illustration here and note how the selection is excluding the anti-aliasing pixels.

Choose Select>Modify>Expand and type in the width you desire for your outline, in this case 2. I have included an illustration of the selection, and one of the same letter, but with the Quick Mask turned on (located in the bottom area of the toolbox and shown here). When you are working with outline selections, it can be difficult to keep track of what is selected. Toggle Quick mask on and off to confirm, keeping in mind that the colored area represents the area NOT selected (the color indicates the masked or protected area).

Finally, to create the outline, you must remove the background area from the selection. Choose the Magic Wand. Hold the Alt (Option) key down and click on the background. Repeat for areas inside the letters. Check results with the Quick Mask. The last two images here show the outline area selected. In the first, the selection boundaries illustrate the outline area, or the area that can be edited. In the second, the Quick Mask illustrates that only the outline area is unprotected from editing. Both give the same message but the mask view is often easier to see.

A simple technique that takes a lot of words to explain. Now that we have the outline area selected, we can add rough edges to it.

 

 

 

 

Next page

Rough it Up Tutorial Index

Rough it Up Start
PhotoShop Outline
PhotoShop Rough Edges
Wild Edges with CorelDraw
Coloring Outside the Lines
Fireworks Rough Edges
Rough Text with PaintShop Pro
PhotoShop Background Textures
Seamless Tiles in PaintShop Pro
Gallery and Resources

Front page2345678910

Developer News
Google to Shake Up Browsers With Own Launch
Mozilla's Ubquity Mashup: For The Masses?
iPhone Users Just Want to Have Fun



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency
Intel eBook: Managing the Evolving Data Center
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Symantec eBook: The Guide to E-Mail Archiving and Management
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization
HP Webcast: Disaster Recovery Planning
Go Parallel Video: Performance and Threading Tools for Game Developers
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control
IBM Energy Efficiency eKIT: Learn How to Reduce Costs
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
HP Demo: StorageWorks EVA4400
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
The Partial Function Application in JavaScript · Creating Dynamic RSS Feeds with Ajax · Performance Optimizations for High Speed JavaScript
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Cablevision Deploys More Hotspots for Commuters · Dell Joins the Netbook Movement with its Inspiron Mini 9 · It's Official: Dell Enters the Netbook Fray


URL: http://www.webreference.com/graphics/
Created: Mar. 1, 2000
Revised: Mar. 2, 2000