Our website will be down for scheduled maintenance on Thursday, October 23, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Colleen Wheeler | Tuesday, June 12, 2012

Deke's Techniques: Adding photographic texture to vector type in Illustrator

This week’s Deke’s Techniques video demonstrates the relatively simple, but oh-so-useful method for filling your Illustrator type with a photographic image. The steps are straightforward, but you’ll need Illustrator CS5 or better in order to use the handy (and crucial to this technique) Draw Inside mode. With Draw Inside mode active, it’s just a matter of selecting the text you’d like to alter and placing your photographic texture of choice inside the type.

If you want a stroke or a drop shadow, you’ll need to use the Layers panel to select your text independent from your image texture, then skillfully navigate the Appearance panel in order to add stroke and drop-shadow effects to the appropriate object inside of Illustrator. (Rookie’s note from a fellow Illustrator rookie: Make sure you choose the Stylize menu item from the top of the Effects menu, not the second half.) The final result is this formerly boring text on the left turned into the editable, tweakable barn-stormin’ effect on the right.

Example of photographic texture added to type in Photoshop.

For members of lynda.com, Deke’s also has another member-exclusive video this week called Adding strokes behind photo type that shows you how to create a double stroke around this effect. It sounds simple, but it’s Illustrator, so you’ll be happy Deke is by your side with answers to the oddly complicated nuances you’ll encounter when tackling this technique.

See you back here next week when Deke returns with another quick and useful technique!

Interested in more? • The entire Deke’s Techniques weekly series on lynda.com• All Illustrator courses on lynda.com • All Design courses on lynda.com • All courses by Deke McClelland on lynda.com

Suggested courses to watch next:• Illustrator CS6 One-on-One: Fundamentals • Illustrator CS5 One-on-One: FundamentalsIllustrator Insider Training: Type and Text

By Crystal McCullough | Monday, October 25, 2010

Illustrator CS5 One-on-One: Advanced preview—Phase three: Adding contrast and color

Phase three: Adding contrast and color

In this exclusive preview of his upcoming Illustrator CS5 One-on-One: Advanced course, lynda.com author Deke McClelland shares six phases in the creation of an authentic five-by-three-foot pirate flag. In today’s episode, Deke uses Photoshop to make the base line art into three colors: rich black, blood red, and page white, with no dust or scratch in between. Look for the full course to be released in its entirety later this year. Phase four will be online tomorrow.

Topics include:

• Editing artwork and filling in missing details • Flipping a drawing to reveal its defects • Reforming artwork with the Liquify command

Part one: Sketching Part two: Editing scanned line art

By Crystal McCullough | Monday, October 25, 2010

Illustrator CS5 One-on-One: Advanced preview—Phase two: editing scanned line art

Phase two: Editing a scan to perfection

In this exclusive preview of his upcoming Illustrator CS5 One-on-One: Advanced course, lynda.com author Deke McClelland shares six phases in the creation of an authentic five-by-three-foot pirate flag. In today’s episode, Deke uses Photoshop to adjust, distort, and otherwise refine an ink drawing into a work of compositional perfection. Look for the full course to be released in its entirety later this year. Phase three will be online tomorrow.

Topics include:

• Editing artwork and filling in missing details • Flipping a drawing to reveal its defects • Reforming artwork with the Liquify command

See part one, Sketching.

By Crystal McCullough | Friday, October 22, 2010

Illustrator CS5 One-on-One: Advanced preview—Phase one: sketching

Phase one: Sketching the pirate flag

In this exclusive preview of his upcoming Illustrator CS5 One-on-One: Advanced course, lynda.com author Deke McClelland shares six phases in the creation of an authentic five-by-three-foot pirate flag. In today’s episode, Deke creates, scans, and edits the original sketches to create a base piece of artwork in Photoshop. Look for the full course to be released in its entirety later this year. Phase two will be online Monday.

Topics include:

• Sketching an initial idea • Creating a base ink drawing • Printing and enhancing a drawing

By Mordy Golding | Monday, September 27, 2010

The benefits of Illustrator CS5 for web and interactive designers

When it comes to creating graphics for the many different screen sizes in use today, designers and developers have a variety of choices at their fingertips, including Photoshop and Fireworks. More and more however, designers are looking to Illustrator, as well. With the Illustrator CS5 release, Adobe added finer control over antialiasing, which results in great-looking pixel-perfect artwork. With its vector-based editing environment and ability to integrate with virtually any other Adobe application, Illustrator offers a wide range of benefits for web and interactive designers.

In the past, the titles I recorded covering the use of Illustrator for web design were filled with workarounds to address the shortcomings of using Illustrator for that kind of work. With the new features that Adobe added to Illustrator CS5 however, I was able to refocus the majority of my latest course—Illustrator CS5 for Web and Interactive Design—on workflow. The course covers how to best use the creative toolset and powerful production tools in Illustrator to crank out high-quality pixel- and vector-based web content quickly and efficiently. For example, the title has dedicated chapters focused on using Illustrator hand-in-hand with other applications including Photoshop, Fireworks, Dreamweaver, Flash Professional, and Flash Catalyst.

With the public interest in mobile apps, many designers are tasked with creating content for all kinds of screen sizes, and also for generating the numerous icon sizes. Through the generosity of the fabulous visual designer Jon Hicks, I’ve included his template for designing icons for Apple’s iOS in the course.

If you’re a web designer or even a developer who likes to dabble in the world of design, you’ll find a tremendous amount of relevant information in Illustrator CS5 for Web and Interactive Design. If you’re a relatively new user of Illustrator in general, I’d recommend the Illustrator CS5 Essential Training course.

A bright future for Illustrator in web design

Adobe recently released extended functionality for Illustrator via the HTML5 Pack for Illustrator CS5 technology preview (you can download it on Adobe Labs). This pack adds the following six capabilities to Illustrator CS5:

• Designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to “reskin” or modify the art. You can even create global variables.

• Create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.

• Select an object on the Illustrator artboard and then choose Object > HTML5 Canvas > Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control the elements via JavaScript.

• Define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.

• Select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position, and Dimensions.

• Select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What’s really cool is that you can include styles even if they aren’t applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.

With the current trends in the world of web and interactive design, it’s obvious that Illustrator is going to play a large role in future web workflows. Adobe added powerful SVG support to Illustrator nearly 10 years ago, and today’s renewed interest is driving the product even further with support for the HTML5 Canvas tag and CSS3.

In the coming weeks, I will be recording an additional chapter of videos covering the new features included in the HTML5 Pack for Illustrator CS5. These videos will then be added to Illustrator CS5 for Web and Interactive Design course. Stay tuned for information on when that will be available.

By Crystal McCullough | Thursday, April 29, 2010

10 lynda.com Adobe CS5 Essential Training courses released today

Click on any one of the following images to view the trailer for that course:Illustrator CS5 Essential Training Course TrailerDreamweaver CS5 Essential Training Course TrailerAfter Effects CS5 Essential Training Course TrailerEncore CS5 Essential Training Course TrailerFireworks CS5 Essential Training Course TrailerFlash Professional CS5 Essential Training Course TrailerInDesign CS5 Essential Training Course TrailerPremiere Pro CS5 Essential Training Course TrailerSoundbooth CS5 Essential Training Course TrailerPhotoshop CS5 Essential Training Course Trailer

We’ve very excited to release 10 more courses into the Online Training Library® covering the products in Adobe Creative Suite 5: Illustrator CS5 Essential Training, Dreamweaver CS5 Essential Training, After Effects CS5 Essential Training, Encore CS5 Essential Training, Fireworks CS5 Essential Training, Flash Professional CS5 Essential Training, InDesign CS5 Essential Training, Premiere Pro CS5 Essential Training, Soundbooth CS5 Essential Training, and Photoshop CS5 Essential Training.

Following the product announcement on April 12, lynda.com released 10 Adobe CS5 New Features training courses, one Essential Training course, and a Creative Techniques course. There are now over 100 hours of Adobe CS5 training available in the Online Training Library®, with more being released in the coming weeks.

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.