Border Patrol: Framing your artwork

My buddy David Blatner recently blogged about creating interesting frames and mattes in InDesign (mainly using the Custom Stroke Style feature). Naturally, someone also pointed out that Illustrator, with its ability to add multiple strokes, can also create some interesting frames as well. In reality though, when it comes to frames or borders, there's something even more powerful in Illustrator: Pattern Brushes.

But before we get there, let's first explore a few ways to easily add some interesting border effects to placed images in Illustrator. Yes, we'll use the Appearance panel to do so, and naturally, we'll save our appearances as Graphic Styles, so that we can easily apply them to photos and artwork at will.

As you may know, Illustrator can apply fill and stroke attributes to vector paths, but an image in Illustrator isn't a vector path at all. As such, we'll need to employ a few "tricks" to allow us to accomplish our goal. I've actually covered parts of this concept in a previous post, but in this technique, we'll take things a step further. To make this tutorial even better, I'm going to use images of David Blatner that somehow ended up in my iPhoto library :)



1. Place an image into your document.

2. First, we'll add the inner glow that appears within the border. With the image selected, click the Add New Fill button in the Appearance panel. Specify a fill of White.

3. At this point, we don't see anything happening because we've applied a fill to an image object. We need to generate a path so that Illustrator has somewhere to apply the fill. With the white fill highlighted in the Appearance panel, click on the Add New Effect button at the bottom of the Appearance panel and choose Path > Outline Object. Now, the white fill, which appears above the pixels in the object's stacking order, should be visible.

4. Obviously, the white fill hides the photo, so in this step, we'll fix that. With the white fill still targeted, click once again on the Add New Effect button and choose Stylize > Inner Glow. Specify Multiply for the Mode, change the color to Black, set the Opacity to 50% and the Blur to 3 pt. Use the Edge method and click OK to apply the effect. You should now see the lovely inner glow, but the white fill still obscures the view of the image. Click on the word Opacity that is listed in the white fill and change its Blend Mode to Multiply. At this point, the white disappears, leaving the photo and the inner glow intact.

5. Add a new fill to the image, once again specifying a color of white. This will be the white matte that appears between the frame and the photograph. With the new fill targeted, click on the Add New Effect button and choose Convert To Shape > Rectangle. Use the Relative option and specify both Extra Width and Height to 12 pt. At this point, the fill appears ABOVE the image pixels, so drag the fill down so that it appears beneath the Image Pixels in the Appearance panel.

6. With the bottom fill targeted (the one we just created in step 5), click on the Duplicate Selected Item button at the bottom of the Appearance panel. You now have two white fills that have a Convert To Shape effect applied to them. Target the bottom-most fill and change its color to a gradient. I loaded Illustrator's Metals collection of gradients and chose Polished Brass, but you're free to choose whatever works best for you. With the fill still targeted, click on the word Rectangle to edit the Convert to Shape effect. Change the Extra Width and Height values both to 24 pt and click OK.

7. Because I wanted a beveled edge to my frame, I added a 3D effect as well. With the bottom-most fill still targeted, click the Add New Effect button and choose 3D > Extrude & Bevel. From the Position popup menu, choose Front to view your fill head on. Specify Rounded for the Bevel and click OK. Your Appearance panel should match the screenshot above.

8. With the image selected, click the New Graphic Style button in the Graphic Styles panel. You've now defined a complex border that you can apply to any artwork, and any placed image. Joy!

EXPLORING THE PATTERN BRUSH

OK, adding fills and strokes and changing their appearances may be great, but they are obviously limited. Customized borders are certainly more complex and have to incorporate intricate artwork. This process is usually a tedious one and requires a lot of work, especially considering that each time you change the size of your frame, you need to adjust your artwork. That is, if you don't use Pattern Brushes. And don't get caught up in the name "brush" -- because you can apply a pattern brush to any path.

Admittedly, defining a pattern brush isn't a piece of cake. A pattern brush is made up of anywhere from 1 to 5 different pattern swatches. But if built right, you can end up with a border or a frame that can be scaled or adjusted to any size or shape instantly. If you need some help, Illustrator does its part by providing you with a few you can use. NINETY of them, actually. You can access these directly from the Brushes panel -- just click on the Brush Libraries Menu button at the bottom of the Brushes panel and choose Borders.



Using a few of the sample pattern brushes that Illustrator ships with, I was able to create a few interesting frames for my collection of David Blatner photos.



Of course, the reason why Illustrator ships with so many sample brushes is so that you can reverse engineer them, learn how they were created, and make your own. It's easy to reverse engineer a pattern brush. Once you've added a pattern brush to your Brushes panel, drag the brush out to a blank area on your artboard. Illustrator will create all of the pattern tiles that were used to define that brush. You can then see the pattern tiles, mess with them on your own, and create your own.

To modify the settings of a pattern brush, simply double click on the brush in the Brushes panel to open the Pattern Brush Options dialog box. What makes a pattern brush special is the fact that it can be made up of up to 5 different pattern tiles, which are used automatically, depending on the geometry of the path (inside corners, start, end, etc), and that it can automatically adjust itself to fit your path. You'll even find that pattern brushes automatically bend to fit the contours of curved paths (try them on circles and ovals!).



I've personally used pattern brushes to help apparel designers create lace trimmings, zippers, and other elements. Remember that you can use pattern brushes on both open and closed paths.

There is one thing to note. It isn't easy to apply pattern brushes to images. You can technically apply them by adding a stroke and then choosing the Outline Object effect for that stroke, but the borders don't "clip" to the image. An apparent bug in Illustrator also make it impossible to add a pattern brush to a mask, so if your image is masked, that won't work either (as you soon as you apply the brush, the mask contents are revealed). In my examples above, I actually created a separate rectangle shape and applied the pattern brush to the rectangle, not to the image itself.

CMYK + RGB: Can't We All Just Get Along?

There are plenty of articles out there that discuss CMYK and RGB in general. At this point, I'm assuming you already know what the differences are between them, and you also know when to use each one. The point of this article though, is what happens when you end up working with both in Illustrator.



In the days of Illustrator 8, one was able to combine both RGB and CMYK artwork within the same document. Many printers took issue with this as they would often receive RGB artwork (containing bright and vibrant colors), but when they delivered the print job, the client would complain that the colors shifted, as we know happens with the lower-gamut CMYK colorspace. The bigger issue was that it was possible to have colors within a single document across the two colorspaces, causing odd shifts of color on the same page.

When Illustrator 9 came out, Adobe implemented a new behavior, that matched Photoshop's model: all documents can be EITHER defined in the CMYK or the RGB colorspace, but a single document couldn't contain artwork from BOTH colorspaces. The one exception to this rule is obviously placed-linked content. One could still place an RGB image into a CMYK document, as the image is just a link. However, as soon as you would embed the image, the image would be converted to CMYK to match the document.

In fact, Illustrator does that across the board. If you have two files open on your screen - one RGB and one CMYK - and you copy some art from the RGB file and paste it into the CMYK file, as soon as you paste the art into the CMYK document, Illustrator converts the RGB colors to CMYK colors.

Just about everyone knows that when you create a new document, you can choose RGB or CMYK at the start. Most also know that at any time, you can choose File > Document Color Mode and CHANGE your document from one color space to another (this is akin to choosing Image > Mode in Photoshop). And you might do so when you get an RGB file (for example, from a client, from a file that you've used to create some web graphic, or from a stock photo house, like iStockPhoto for example). You might think that you need the art for print and so changing the document color mode to CMYK will make everything peachy. Well, maybe not. As we always do here at the Real World Illustrator blog, let's take a closer look...

When you launch Illustrator, and no documents are open, you'll notice that the panels are empty. There are no colors in the Swatches panel, no symbols, no brushes, etc.



When you create a new document - in this case, an RGB document, as I'll use the Web profile - the panels are suddenly populated with content. Lovely color, symbols, etc. Where does all of that content come from? The answer is: from the NDP (New Document Profile) that you chose when you created the file. So in this case, it all came from the RGB-based Web NDP.



It's essential to understand this because of this all important fact: In Illustrator, the DOCUMENT is limited to a single color space, but the PANELS are not. A single panel in Illustrator can contain both CMYK and RGB content. For example, there's nothing preventing you from opening a new CMYK document, but then defining a new RGB swatch in that document. Each time you apply that swatch to an object on your artboard, Illustrator will automatically convert that object to CMYK. In other words, you'll get an RGB to CMYK color conversion.

It's easy to see this for yourself: just create a new CMYK document, and then create a new swatch. Set its color mode to RGB and set its value to 0,0,0 (black) and then apply that color to any object in your document. If you take a look at the color panel, you'll see that object's CMYK values aren't 100k -- they are a mix of CMYK percentages that would make any printer go mad (the exact values will differ depending on your color management settings).

In addition, color swatches themselves can only define a swatch using ONE color mode. You can't have a single swatch that contains 2 definitions (for example, 100k in CMYK and 0,0,0 in RGB). In fact, there's only one kind of swatch that exists in Illustrator today that can contain 2 color definitions, and that's a Book Color. Book Colors contain both CMYK and LAB color definitions and serve up the one you need based on your settings (see this article for more details).

So now let's put these two all-important facts together: New documents get their default swatches from a specific NDP, which you choose when you first create your file. In addition, while documents are restricted to a single colorspace, panels (and the content within them) are not restricted at all. So what happens when you start with an RGB document and you then choose File > Document Color Mode to change it to CMYK? The ARTBOARD changes to CMYK, but all of the CONTENT in your document's panels (Swatches, Symbols, Brushes, etc.) are still RGB. Those haven't changed at all. Which means as you continue working, each time you apply a color from a swatch, you're getting an RGB to CMYK conversion with all those messy values.



So what do you do? Well, there's the hard way, and the easy way. Naturally, I prefer the easy way - which is to simply avoid converting the document color space entirely. If you have artwork that was created in an RGB document and you need to repurpose it for print, copy and paste the content into a new CMYK file. In that way, all the content in your new CMYK document will be CMYK. Alternatively, there's the hard way - which is to delete all of your swatches and symbols in your existing RGB file, and to load the CMYK ones. You can do this by choosing Window > Swatch Libraries > Default Swatches, and opening your CMYK library of choice.

At the end of the day, I'm hoping that at some point, Illustrator will allow us to create "smart swatches" like Book Color swatches, which would allow us to define a single color both in CMYK and RGB breakdowns. Then, depending on what color mode we choose, Illustrator just serves up the right one. In this way, colors would never go through color conversions, and we'd have much more control over how our art can be repurposed for different needs. In theory, such a capability would allow us to create artwork that would internally know how to adjust itself for both print and web workflows. Until then, we have to struggle with these nagging issues.

Illustrator CS4 for the Web now available at Lynda.com

...And the hits just keep on coming...

Today, Lynda.com released my latest video training title: Illustrator CS4 for the Web. I'm particularly excited about this title because in the past, I've done separate web titles for using Illustrator and Flash together as well as using Illustrator to create pixel-based web content. In this new title, I've decided to cover ALL web topics together. So the video covers using Illustrator as it is used for general web content.



If you're already a Lynda.com subscriber, you can view the video title here. If you aren't a subscriber, you can get a free 7-day trial by clicking here.

Kuler Essential Training now live at Lynda.com

Many of you are already familiar with Kuler - Adobe's online color community. Over the past few months, Adobe has added more and more functionality to Kuler, including the ability to extract color themes from photographs (your own or even from Flickr). In fact, there's a whole lot going on in Kuler, which prompted me to sit down and record a video title that covers its functionality both within the website as well as other ways you can access it (like from within Adobe applications or even with Widgets and AIR applications).



If you're already a Lynda.com subscriber, you can view the video title here. If you aren't a subscriber, you can get a free 7-day trial by clicking here.

Enjoy!

TUTORIAL: Recoloring Artwork

One of the more powerful features to have been introduced to Illustrator as of late is the Recolor Artwork feature. When it was introduced in CS3, it was called "Live Color" but thankfully, Adobe dropped that name and now officially refer to it by its more descriptive name: Recolor Artwork. Granted, the feature itself is incredibly complex, but that's because it just does so much, You can't really demo it unless you have a specific task you're looking to accomplish.

On the User to User Forum, someone asked specifically how to accomplish a task, which was really a perfect example for showing one specific part of the Recolor Artwork feature. So I recorded a quick little movie, which I think can help people get a better idea of what the feature does and how to use it -- at least for this one specific task.

Because the Recolor Artwork feature works only on selected artwork, I also added a bit on defining a custom action to help automate the process of unlocking and selecting the art.


Recoloring Artwork in Illustrator CS4 from Mordy Golding on Vimeo.

What the video doesn't show is how to re-lock all of the art once the color edits have been made. To address that you'd actually choose View > New View when you first open the document. Then, after you've completed the color edit, simply choose View > New View 1 (or whatever you've named your view).

As an aside, this tutorial will work in CS3 as well.

Enjoy!

InDesign "hiding" in Mac OS X fixed!

Adobe has confirmed that the frustrating issue of InDesign not being able to be hidden (or not being able to come back after it was hidden successfully without a painful Force Quit) no longer exists when running under the latest release of Apple’s OS, Leopard 10.5.6.

Read the full report here (via InDesign Secrets)

Crop This: More Useful Trim Marks in Illustrator

A while back, I posted a few scripts from Shane Stanley, which added some important functionality to the multiple artboards feature in Illustrator.

Most folks are also familiar with the fact that multiple artboards were once called "crop areas" back in Illustrator CS3. But there's also another feature in Illustrator that helps you define cropping areas, with drawn objects. In previous versions of Illustrator, this command, Create Trim Marks, was found in the Filter menu.

But alas, in Illustrator CS4, the Filter menu has been removed altogether, and the Trim Marks function was moved into the Effect menu. As such, the command is now a live effect, and must be expanded if you want to edit the marks that are drawn.

But let's be honest here -- the trim marks that Illustrator have always created aren't very useful. They are large, and they are offset quite a ways off from the selected artwork that is used to define them. Chances are, if you've used the Create Trim Marks feature before, you've also manually adjusted them afterwards.

I asked Shane if he thought it would be difficult to add some functionality to his already-wonderful Artboard Coordinates script to also have it create custom trim marks. His response came in the form of an email that read: "you mean like this?" and there was a script attached :)

And so now, I pass on the golden prize to you -- a script that not only takes multiple artboards to a new level, but that also creates customized trim marks. All you need to do is select an object and click on the Trim Marks button and a dialog box appears asking you for the desired length, offset, and weight of the strokes, and even offers an option to create dashed lines to indicate folds. You can also choose to place the marks on a specific layer.

Download the script here, and don't forget to thank Shane. Please note: This is an AppleScript, and as such, is a Mac-only application.

P.S. I wrote this post using some new blogging software that I was introduced to, called blogo. I've tried a few editors in the past and haven't come across one that I've really liked, but this one seems pretty cool so far. Hopefully it will mean I'll be blogging more often without the hassle. If you do blog on your own, you should check it out.

Finger on the Pulse: Color Analysis comes to Adobe Kuler

I've always said that one of the most exciting things about Adobe's online color community, Kuler, was that it was built as an RIA -- a Rich Internet Application. Sure, if you look at kuler as simply a way to generate a quick color theme here or there, it works great. But that doesn't tap into the power that the internet brings to the table.

A while back, Adobe update kuler to enable you to extract color themes from photographs. You could either upload your own, or you could extract inspiration from images from Flickr. That stuff was nice, but now, Adobe has started to add the "real stuff" -- a new feature called "Community Pulse" has now been added to kuler, in Beta form. If you log into kuler, you'll find Pulse between the Community and Links buttons along the left side of the screen.



So what is Community Pulse? It's a visual analysis tool that allows you to view color usage. You can almost think of it as Google Analytics for Color. Community Pulse can tell you what colors are popular, where they are popular, and when they are popular. It can also be used to compare color usage across the globe. For example, in the screenshot above, I've asked Community Pulse to display the differences in color usage between the USA and Japan. Specifically, I asked it to show me results of colors tagged with the word "hot", and from the looks of it, it's seems apparent that designers in the US consider blue to be hot.

As Community Pulse is in beta, there aren't as many options available to search on yet, but I'm hoping that eventually, we'll be able to search with our own custom tags and date ranges, etc. I'll be honest, when I first started playing with this cool feature, I was expecting to see a whole lot more green being used, what with the whole global environmental and "green" mindset thing, but that doesn't seem to be the case at all.

I wonder what other people will be able to extract from this incredibly helpful tool -- play around with Community Pulse yourself and let me know what your own data analysis reveals!