By Colleen Wheeler | Tuesday, June 12, 2012
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.
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: Fundamentals•Illustrator Insider Training: Type and Text
By Crystal McCullough | Monday, October 25, 2010
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.
• 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
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.
See part one, Sketching.
By Crystal McCullough | Friday, October 22, 2010
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.
• Sketching an initial idea
• Creating a base ink drawing
• Printing and enhancing a drawing
By Mordy Golding | Monday, September 27, 2010
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.
• 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
Click on any one of the following images to view the trailer for that course:
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.
You can change your email preferences at any time. We will never sell your email. More info
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.