Archive for June, 2012

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

Published by | Tuesday, June 12th, 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.

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: Fundamentals
 Illustrator Insider Training: Type and Text

Harnessing the productivity of Lotus Notes

Published by | Tuesday, June 12th, 2012

If you’ve been interested in learning Lotus Notes but haven’t been quite sure where to begin, Up and Running with Lotus Notes offers an introduction to the features of Lotus Notes and how to use them, including discussion of the integrated email, database, calendar, and address book features.

In this movie from chapter two of the course, author Jess Stratton digs into the integrated email feature and shows you how to customize your Lotus Notes email inbox to display and sort emails to coincide with your workflow preferences.

Feeling comfortable with email, but looking for a way to speed up your Lotus Notes productivity? Here’s a quick list of Jess’s favorite Lotus Notes keyboard shortcuts:

 Insert key allows you to toggle between read and unread marking for messages

 Ctrl+m creates a blank new e-mail

 Enter closes the open document you’re working on and opens the next document in  your view

 F1 gives you targeted and context-relevant help

 F5 locks your Notes client so you can rest assured your data is safe when you step away from your desk

 

Whether you just started using Notes for a new job or have been using it for years but never knew how to harness its full potential, this course teaches you the basics you’ll need to use the Sidebar, keep track of calendars and to do’s, and take advantage of Sametime instant messaging and other Notes applications.

 

Interested in more?
• The full Up and Running with Lotus Notes course on lynda.com
• All business courses on lynda.com

Suggested courses to watch next:
Time Management Fundamentals
Excel 2010 Essential Training
Word 2010 Essential Training
Effective Meetings

InDesign Secrets: Adding diacritics with Dynamic Spelling

Published by | Thursday, June 7th, 2012

In this week’s InDesign Secrets episode, Anne-Marie Concepción reveals a secret for letting InDesign find the right diacritical marks for you, rather than having to track them down in the Glyphs panel (Type > Glyphs). If you select the words or phrases requiring diacritics and then change them to their language of origin, then you can get InDesign to supply the right marks via Dynamic Spelling.

For instance, let’s say I had the phrase in the figure below and wanted to add all the correct diacritics (one diaeresis, one cedilla, and one acute accent mark) to the French words in my sentence. First, I’d need to turn on Dynamic Spelling (Edit > Spelling > Dynamic Spelling), then select the text in question, set the dictionary to French rather than English, and then when I right-click on any word in my paragraph, I can choose the correct spelling with diacritics already applied. Note that because I’ve told InDesign to check the spelling of the second paragraph against the French dictionary, all the English words are marked as misspelled with the red squiggly underline. You can ignore that for the purposes of getting InDesign to give up the glyphs.

In the movie, Anne-Marie also has a tip for tricking InDesign when both the accented and unaccented versions of a word are technically correct.

Meanwhile, Anne-Marie’s partner in InDesign secrecy, David Blatner, has an exclusive movie for members of lynda.com this week on how to use a single celled table to apply custom formatting. If you want to see more table tricks in InDesign, you can check out Diane Burn’s entire course on InDesign tables.

David and Anne-Marie will be back in two weeks with more InDesign Secrets.

Interested in more?
• The entire InDesign Secrets bi-weekly series
• Courses by David Blatner and Anne-Marie Concepcion on lynda.com
• All lynda.com InDesign courses

Suggested courses to watch next:
• InDesign CS6 New Features
 InDesign CS6 Essential Training
InDesign Tables in Depth

Deke’s Techniques: Changing proportions selectively with Liquify in Photoshop

Published by | Tuesday, June 5th, 2012

This week’s free Deke’s Techniques episode demonstrates a (fairly ridiculous) method for shrinking a model’s head while leaving his body in standard proportion. Although, at first glance, this seems like another wacky manifestation of Deke’s fertile imagination (or homage to David Byrne’s Stop Making Sense big white suit), there are legitimate reasons (and skills) involved in learning how to transform one part of an image while matching the remaining parts.

Ultimately, Deke shows you how to take the normally proportioned model on the left, shrink his head, and realign his shoulders to match. Using a combination of layer mechanics, the Free Transform command, and of course the tricky, but oh-so-useful Liquify command, the effect is seamless:

The fact is, reducing one part of an image while making the remaining part match up is an exercise in careful use of the Liquify command. In this tutorial, Deke will show you how to work within the Liquify dialog box so that you can accurately see how the edges are going to match up between the layers. In order to keep the suit’s pinstripes aligned, you need to know how to employ the power that resides within the Liquify dialog box. It’s not a quick process, but the result is both whimsical and demonstrative of real Photoshop skill.

If you’re feeling contrary, and you’re a member of lynda.com, Deke also has a member-exclusive new movie this week for increasing the size of a model’s head.

Deke will be back with another free technique next week.

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

Suggested courses to watch next:
• Photoshop CS6 One-on-One: Fundamentals
• Photoshop CS6: New Features
 Photoshop for Photographers: Portrait Retouching

 

Writing easier code using the jQuery JavaScript library

Published by | Monday, June 4th, 2012

In a nutshell, jQuery is a JavaScript library that helps you get things done. It simplifies the process of accessing the DOM (Document Object Model) and supports older browsers. Let’s take a look at a simple example—say that you have an H2 in your page with an ID of ‘cathead’ and you’ve written it out like this.

 <h2 id="cathead">Consumer Widget</h2> 

If you wanted to modify the code to signify a color change when a person clicks on it, you could set up the code like this with JavaScript:


document.getElementById('cathead').onclick=function () {
  this.style.color='red';
} 

The first step the JavaScript takes is to search the DOM for an element with an ID of  ‘cathead’ and then bind an onclick event to it. It then uses the style property to change the color of the element to red. Pretty basic stuff. To do the same thing in jQuery, you’d write something like this:


$('#cathead').click(function() {
  $(this).css("color","red");
});

Other than this code being a lot shorter, the first thing that jQuery does is simplify the process of accessing the DOM. If you look at the two different code examples, you’ll see that jQuery uses the $() variable to gain quick access to elements. The great thing about jQuery is that you can use the $() to access any CSS property, not just IDs.

Let’s look at what happens if we make ‘cathead’ a class instead of an ID element because we have a bunch of headlines that we want to apply the color change to:


<h2 class="cathead">Consumer Widget</h2>
<h2 class="cathead">Another Widget</h2>

jQuery would do it like this:


$('.cathead').click(function() {
  $(this).css("color","red");
}); 

So, with jQuery, instead of selecting an ID, you pass along a class you want to select. You may be thinking that you could just as easily do the same thing by using JavaScript’s getElementByClassName—and you’d be right… sometimes. One main stumbling block is that the getElementsByClassName method is not available in a lot of versions of Internet Explorer, so—plain and simple—some browsers don’t support it. Plus, the getElementsByClassName method returns an array that you have to iterate through in order to modify each instance of the class, which means your code ends up being longer (a lot longer). jQuery on the other hand uses its own methods that are backwards compatible with older browsers and allows you to select the DOM in a variety of ways.

Here’s another example of why I prefer jQuery: While JavaScript has several methods for selecting elements, including the aforementioned getElementById(), getElementsByClassName(), getElementsByTagName() (you can find how well they’re supported in here: http://www.quirksmode.org/dom/w3c_core.html#gettingelements), jQuery only has one.

And that’s not where the magic ends. You can easily select every other element by doing something like this:


<h2 class="cathead">Consumer Widget</h2>
<h2 class="cathead">Another Widget</h2>
<h2 class="cathead">One More Widget</h2>
<h2 class="cathead">Last Widget</h2>
<script>
  $('.cathead:even').css("color","red");
</script>

or you can use its cousin…


$('.cathead:odd').css("color","red");

…which makes it trivial to do zebra striping table rows. Plus, jQuery has methods for animation, and easily building overlays, tabs, and other UI elements.

After you get started with JavaScript, jQuery is an excellent next library to learn. If you’re just getting started, I recommend you check out this week’s episode of View Source where I show you how to use some basic jQuery to build a simple toggle tooltip.

Interested in more?
• The full View Source weekly series on lynda.com
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:
• Create an HTML5 Video Gallery with jQuery
Create an Interactive Map with jQuery
Create an HTML5 Video Gallery with jQuery
Create a Rotating Carousel with jQuery