Web design tutorials and guides


Some words about Illustrator

By on May 19, 2015



I know, I know, who needs a vector illustration program like Illustrator when you’ve got Photoshop, Paintshop Pro, Fireworks or some other raster image editing program. We can design anything we need for the Web using one of them. I thought the same thing until I got the opportunity to play with Adobe’s latest release of Illustrator. Wow, is all I can say. This program has been injected with some powerful programming steroids.Adobe-Illustrator-CS

Adobe Integration

Adobe has done a wonderful job of integrating Illustrator with Photoshop, GoLive and LiveMotion. These Adobe products all share a common user interface. This really speeds up the learning process. Illustrator CS and Photoshop also share common Web optimization controls, tools and palettes. You can now place Illustrator CS files in GoLive, Adobe’s Web page creator. When you do this GoLive calls on Illustrator to convert the graphic to .gif, .jpeg, .png, Flash (.swf) or .svg formats. This incredible integration will reduce your learning curve, streamline the creative process and speed up your production output.

Adobe Illustrator’s common user interface


ai_iconVector to Pixel to Vector

Previously Illustrator focused primarily on print media. But release 9 is a full-fledged design tool for Web graphic creation. First of all its vector graphic toolset is superb. You can create anything you can imagine. One problem web designers face when creating a vector graphic is imagining how it will look when it’s converted to a raster image. You can now save your imagination for creating. Simply select – View – Pixel Preview – and there it is. No more, saving, cutting and pasting graphics into Photoshop, or elsewhere. A great time saver.

Staying Alive

Have you ever created some text on a button shape and needed to change the size of the text knowing you would also have to adjust the button proportionally? Then Adobe’s creation of ‘Live Shapes’ will make your day. By creating dynamic relationships between button shapes and text you can edit the text at anytime and have your shape reflect it automatically. You can also move one object and the other moves right with it, without having to group them

Shadows, Glows and Transparency

Just like in Photoshop you can now instantly add drop shadow and glow effects to web graphics. You can also apply a number of transparency effects to an object or series of objects. You can create ghosted type, fades, soft shadows and sophisticated blending of layers and objects. Transparency settings can be set to individual text characters, words, paragraphs or an entire block of text. ‘Live feathering’ is a great new feature that allows designers to soften the transition between objects in the foreground and the background layer. You also have opacity masks and layer masks. Just as you can export .PSD files you can also import Photoshop layers into Illustrator objects preserving all masks and transparency.

Add effects to vector art!

Layers, Layers, and More Layers
If every graphic program these days are layer happy then Illustrator’s layer palette should be called exuberant. The palette resembles Photoshop CS in appearance but it has been improved upon. For one you can organize your layers by nesting them. You can also have sub layers within sub layers and still more. Each layer of course has its own thumbnail image. One of my favorite tools is ‘Release to Layers.’ You now have the power to export a graphic on one layer to multiple layers. For example you can export a series of graphics along a path into Flash or Live Motion as frames to create quick animations. Illustrator will export files in Flash (.SWF) or in the new SVG (Scalable Vector Graphics) format. You can of course save a file as a Photoshop (.psd) with all layers (including editable text) and effects intact.