Creating Web Graphics with Illustrator

My latest video training title from Lynda.com was released today. It's called "Illustrator CS3 for the Web" and it primarily covers using Illustrator to create pixel-based web graphics and designs.



In the title, I specifically cover things like understanding Illustrator's antialiasing and Pixel Preview settings (and how to avoid the fat gray lines), understanding web slicing "the Illustrator way" and using Illustrator alongside applications like Photoshop and Dreamweaver. If you're already a subscriber to Lynda.com, the title is already available to you. If you aren't a subscriber, you can get a free 7-day trial by clicking on the link in the sidebar on the right.

Any feedback is welcome :)

5-city seminar tour teaches Dreamweaver and CSS

Even though this doesn't fall specifically under the topic of Illustrator, I thought it would be relevant to you folks, especially considering how many of you are designers and how many of you publish web content.

MOGO Media and Adobe have announced a 5-city seminar tour entitled "Getting Started with Dreamweaver and CSS" which is a one-day web publishing workshop to help designers fully grasp the concepts of modern web publishing. In truth, I used to be a GoLive user and was comfortable only on a superficial level with web publishing in general. I thought I understood what CSS was as I had drawn comparisons to what I thought was similar functionality within print-based programs like InDesign. When I tried my hand at Dreamweaver, there was a huge disconnect and I just couldn't seem to "get it".

Then I tripped on some information on CSS and realized that I really only had half the equation. While InDesign styles map to the CSS style attributes, I was missing out on the CSS layout part of the process. Then, when I truly understood what the word "cascade" really meant, it all clicked and Dreamweaver suddenly came to life before my eyes. It is for this reason that I worked closely with Brian Wood, who is the instructor for the seminar series, to help develop content that I think will really help designers understand web publishing on a totally different level.

The seminar only costs $49 for the day and will appear in the following cities:

- Los Angeles, May 29
- New York City, June 4
- Washington DC, June 17
- Chicago, June 24
- Boston, June 26

You can get more information and register at www.mogoseminars.com.

GoLive Go No More...

I enjoy reading about history -- I revel in how things have developed over time. How civilizations have come to power, and have fallen. However, these epic events of the past usually take hundreds if not thousands of years to develop.

The world of technology obviously moves at a much faster pace. In my own "short" career in the field of computer publishing and design, I have also seen the rise and fall of companies and products. And now, history counts yet another fallen product.

Adobe GoLive has now gone the way of the Syquest drive. It is now in heaven along with FreeHand and LiveMotion.

We will miss you GoLive.

(via)

Now Showing: Adobe TV on Adobe Media Player

Today, Adobe announced the launch of Adobe Media Player -- a media viewer that has pretty much the same basic functionality found in iTunes, only the content is Flash Video based and the quality is wonderful. Adobe Media Player itself is an AIR application, so it runs on your desktop (both Mac and Windows) and you can subscribe to your favorite content. I already wasted some time this morning just perusing through all of the channels :)

And speaking of channels, it appears Adobe decided to get their own. Also announced today is Adobe TV. You can view Adobe TV at the website in your browser, or subscribe to the content from the Adobe Media Player as well.

Please excuse the slight delay...

Hi folks -- I just wanted to quickly jump online and give you all an update -- I know it has been a while since I've posted something. I also have tons of great email questions that I've received which I haven't had a chance to respond to yet (sorry! -- I'll get to them soon, I promise!). Things have been a bit crazy and I haven't had the time to sit down and share with you all. I recently got back from Photoshop World in Orlando (fun!) and I'm currently in the recording studio doing a title on using Illustrator specifically for Web design. And between the upcoming conferences in Boston, Toronto, Nashville -- the traveling doesn't let up much.

I have some great stuff in the works, which I hope to get up here soon, but I do have a request for you -- my faithful readers. I've gotten the OK from my publisher to update the Real World Illustrator book for the next version of Illustrator. First, I've been approved to print the entire book in color! Hooray! I'm excited about how cool the entire book will look in color, and also how I can rewrite some of the areas to really take advantage of that. What would be really helpful from you folks is, what do you want to see in the next version of the book? Is there a specific topic that you'd like to see more content on? Is the book too basic? Should I focus on more advanced stuff? Let me know your thoughts and I'll do my best to make the book fit more closely with that you -- the readers -- actually want.

kuler just got a whole lot cooler

Earlier this week, Adobe has updated their online color-based community called kuler.

The most impressive addition is kuler's ability to now automatically extract a color theme from a photograph -- you can upload any photo you'd like and choose a "mood" (colorful, bright, muted, etc.). There are some other little tweaks and welcome adjustments, such as a new Random search option.

Of document sizes and crop areas: A bedtime story about Save for Web & Devices

I've often seen questions about Illustrator CS3 and the Save for Web & Devices feature. One common question is, "Why do my colors look rich and vibrant in my Illustrator document, but less-than desirable in Save for Web?" I won't answer that question in this post (but it has to do with the fact that CS3 now defaults to using the sRGB color space when exporting from Save for Web), but I'd like to deal with yet another question that I see frequently.

You may find that at times, when trying to use Save for Web & Devices, you'll get an error dialog that says "The image exceeds the size Save for Web was designed for. You may experience out of memory errors and slow performance. Are you sure you want to continue?"



This "issue" is caused by some new behavior that was introduced in Illustrator CS3 around the implementation of document size settings and how crop areas work. Let's take a closer look inside, shall we? Then we'll see how easy it is to fix this little problem.

In a previous post, I spoke about some of the changes to the settings in Document Setup as they pertain to NDPs (New Document Profiles). Specifically for new documents created with the Web profile, it's important to realize that Illustrator creates a document size of 14400 x 14400 pixels in size, and creates a crop area at the size you specified in the dialog (i.e. 800x600). I also mentioned that the profile specified in the file's metadata "tells" Illustrator to honor the crop area size as the document size, so things like printing and zooming to fit in window function as one would expect.

But this really is an important concept to understand. If you create a new 800x600 Illustrator document, using the Web NDP, and you zoom out to like 4%, you'll see the huge document size, and the crop area in the center.



By default, the Save for Web & Devices feature uses your crop area as the boundary for your artwork. This is actually a great feature, as you can easily dial in a specific size for your web graphic and get exactly what you expect (without this, you can often get image sizes that are one pixel off, or have extra white lines, etc). With the new crop area functionality in Illustrator CS3, you can create multiple crop areas, making it easier to quickly export multiple web graphics from a single Illustrator document. For example, I often have several web banners set up in a single Illustrator file, with multiple crop areas defined for each banner (only one crop area can be active at any one time, though).

So to come full circle on all of this, when you create a document that is 800x600, a document size of 14400x14400 is created, a crop area of 800x600 is created, Illustrator considers the crop area as if it were really the document size, and when you export your artwork using Save for Web & Devices, the artwork is cropped exactly to your 800x600 crop area.

HOWEVER, there is a setting in Save for Web & Devices that can change all of this Well Thought Out Logic.

When you open Save for Web & Devices, there's a group of three panels on the far right, beneath all of the image format and optimization settings. These panels, Color Table, Image Size, and Layers, provide additional functionality, which can be very useful. But for the sake of this post, we'll focus on the Image Size panel.



In this panel, you can see the exact size of your final image and even change it. I often do this because Illustrator artwork is of course, scalable to any size. So if I need to create a graphic set to a specific size, I can do that MUCH faster here in the Image Size panel than actually resizing the art on my Illustrator artboard for each size I need. You can just dial in the settings (and remember to hit the Apply button). But there's also an all-important setting here -- a box labeled "Clip to Artboard". This setting, when checked, instructs Illustrator to ignore the crop area size in your document, and instead uses your document size as the final size for your web graphic. So going back to what we now know about how Illustrator sets up a Web document, let's see what this means.

Using the same settings in my example above, if you turn on the Clip to Artboard setting in the Image Size panel, you're telling Illustrator not to export an image of 800x600 pixels, but rather an image of 14400 x 14400 pixels. That's just "slightly" larger in size, right? Since web graphics are never that large, Save for Web was never designed to work with images at that size and hence, the error dialog appears. So if you're getting the error, it simply means that the Clip to Artboard setting is checked on. This could happen quite easily, because the settings in Save for Web & Devices are "sticky" -- meaning settings stay as you set them, even as you move from one document to another.

So the question is, how to fix this problem? Well, obviously, the solution is to open Save for Web & Devices, click on the Image Size panel, and uncheck the Clip to Artboard option. However, there are times when Save for Web & Devices won't even open, as it will close the window immediately after you dismiss the error dialog. The solution then is to first choose File > Document setup, and specify a much smaller Width and Height for your artboard (something like 1200x1200 for example). Once you do that, you'll be able to open the Save for Web & Devices feature without error, and you can then uncheck the Clip to Artboard option.