Here’s a crazy idea – design your next web project in Illustrator.
If you’re a mainstream web designer, chances are you’re not reacting very well to this proposal. Illustrator simply cannot do all the stuff that Photoshop can, right?
Well, not quite so.
Although Photoshop emerged as de-facto web design tool, Illustrator is more than capable of supporting your needs. Because of its layout tools, it’s often a better and more appropriate program for web design.
Since most web design specialists are not willing to wander around Illustrator searching for proof, I’ve created a list of web-related functions you need to know to start experimenting with web design in Illustrator.
Try some of these and I guarantee you’ll start using Illustrator as a standard tool in your web design workflow.
1. First things first: Set all units to Pixels
By default, Illustrator uses metric units for object dimensions and points for type. These are great settings for most design cases but for web design, you’ll probably want to see pixels all over. So before you begin working on anything else, make sure your units are properly set.
To set units to Pixels:
- Open on Edit menu
- Select Units from Preferences submenu
- Set all options to “pixels”
2. Create documents with a Web document profile
When you’re eager to get started on your new design, it’s easy to skim through the New document window and miss some important details – such as telling Illustrator you plan to work on a web design so you don’t end up with CMYK colors and blurry object edges. Just make sure to pick “Web” profile setting in the New Document window and you’ll be good to go.
3. Turn on pixel-grid alignment for objects
This feature is a life saver if you’ve ever had a problem with blurry shape edges in Photoshop.
Pixel-grid alignment will adjust straight horizontal and vertical segments of the object so they perfectly match the pixel grid, while keeping curved and slanted segments anti-aliased. This results in crisp looking, pixel-perfect shapes —something you definitely want in web design.
The top button has pixel grid alignment enabled which results in crisp borders at all times.
To enable pixel grid alignment on object level:
- Select an object
- Open the Transform panel (Window > Transform)
- Check the “Align to pixel grid” option at the bottom of the panel (if you don’t see it, double click the panel to show options)
Note: Align to pixel grid is turned on by default for all new objects created using Web document profile. However, if you’re pasting objects from other Illustrator files, you need to manually set pixel alignment for them.
4. Enable Pixel-Preview
Pixel-Preview feature will make Illustrator behave just like Photoshop when zooming your artwork above 100% – instead of getting perfect vectors every time, you’ll actually see the pixels as if you are working with a bitmap image.
With pixel preview on, you’ll feel like you’re inside Photoshop.
Just think how great this is – you have all the power of vector graphics in your hands, while being able to see what pixel-level result looks like
Neat, isn’t it?
To enable or disable Pixel Preview
- Open View Menu
- Select “Pixel Preview”
5. Use Artwork windows
Imagine you have two video cameras pointed at your design.
One camera is at a normal zoom level, showing 100% of your artwork. Another camera is at a 400% zoom level and is pointed at one specific icon you’ve been working on.
Similar to a surgeon, you use the zoomed camera to make tiny, pixel-level changes to the icon while occasionally glancing at the 100% zoom camera to see how it actually looks at its real size.
Artwork Windows are fantastic when you need to work on small-scale items such as icons – you don’t have to keep zooming in and out to check how things look like.
This is what Artwork windows are all about – they allow you to view your design simultaneously at different zoom levels, color settings and other variations. For web design work, this comes in handy especially when you’re working on pixel-level details.
To use Artwork windows:
- Open Window menu, then select New Window. Illustrator will create a new tab with the same document in view.
- Go to Window menu again, select Arrange > Float All in Window. This will allow you to resize and position windows next to each other the way you see fit.
- Experiment with different Zoom levels in the windows and start making some changes to see how this works
6. Use symbols to quickly create buttons, icons and more
How many times have you created the same (or nearly the same) button, icon or widget in Photoshop? If you’re into web design, you’re probably doing it every day.
Illustrator helps you save time and avoids this repetitive work by using Symbols.
Essentially, symbols are an infinite stash of ready-made design elements which can be added to artwork with a simple drag and drop, then change if necessary. This is perfect for buttons, icons and other standardized objects which do not have to be created from scratch.
But there is another reason symbols are powerful and it’s called instancing.
In addition to being handy, symbols allow you to easily update repetitive design elements.
Basically, whenever you make changes to the original symbol, those changes get immediately reflected in all instances of the symbol found your artwork. You want larger buttons across the site? Just change the symbol. You want different looking form fields on all pages? Just change the symbol. You get the idea.
Tip: if you don’t want this to happen to a certain instance of as symbol, right-click on the object in your artwork then select “Break link to symbol.” This will exclude it from automatic updates.
Here’s a good video explaining how to use and manage symbols:
To use an existing symbol:
- Open the Symbols panel from Window menu
- Drag the chosen symbol to you artwork
To create a new symbol:
- Create the artwork for the symbol
- Open the Symbols panel from Window menu
- Drag the artwork to the panel
- Click OK on the dialog box to confirm
To edit a symbol:
- Open the Symbols panel from Window menu
- Double click the Symbol to enter edit mode
- When finished, double click anywhere outside the symbol artwork to exit edit mode
7. Extend objects easily with 9-slice scaling
This is an advanced feature of symbols which allows you to define which parts of an object gets stretched during scaling and which parts are kept the same.
Left: example of a button stretched with and without 9-slice scaling set up. Right: setting up 9-slice scaling involves moving 4 guidelines which tells Illustrator which parts of the object is protected and which parts can be scaled.
A practical example is a button with rounded corners – if you want to make it longer, you cannot simply stretch it horizontally because that would distort the whole object. Instead, you have to manually move the shape points. With 9-slice scaling, stretching works the way you intend.
To really understand how it works, listen to this great video tutorial from Adobe TV to quickly get up to speed:
8. Rounded corners everywhere!
You can create a rectangle with rounded corners in Photoshop but Illustrator allows you to apply non-destructive rounded corners effect to pretty much any object. What’s a non-destructive effect? It means you can turn it on, off or change its settings without affecting the underlying original object.
Virtually any type of object can have round corners effect applied and adjusted whenever needed.
To apply a rounded corner effect:
- Create a rectangle or any other object with sharp corners
- In Effects menu, choose Stylize > Rounded Corners
- Enter corner radius and hit Preview to see how it looks
- Click OK to apply the effect
To change a rounded corner effect:
- Select an object with rounded corners
- Open Appearance panel from the Window menu
- Locate the rounded corners effect and double click to change its settings or click the eye icon to turn it on or off
9. Create quick bitmap pattern fills
Subtle background patterns are a big hit in web design but many designers think you cannot apply them easily in Illustrator.
It’s not intuitive, I have to admit but the solution is an easy one.
To create a bitmap patern:
- Place the pattern image on your artwork
- Click Embed in the top ribbon (important – won’t work without this!)
- Drag the pattern to the swatches palette
- Apply the swatch to any object to fill it with the pattern
10. Float text around images and objects automatically
Photoshop is notorious for having very rudimentary text editing capabilities. If you want to wrap text around an image, you have to create two or three different text frames and imitate the effect.
Luckily, Illustrator has you covered on this.
To wrap the text around an image:
- Select the image or object you want to wrap text around
- Open Object menu, select Text Wrap > Make
- To set the wrapping distance, open the Text Wrap menu again and select Text Wrap options
- Move the image over the text to see the wrapping effect
11. Create rich visuals with object Appearance settings
In Illustrator, object Appearance panel works much like Layer effects in Photoshop – you can add multiple fills and strokes to an object, then play with their transfer modes, opacities and effects to get interesting results.
This text is just one vector shape object styled through appearance panel and effects.
The playground is pretty big – from drop shadows, blurs and glows to texturing, distortions and 3D. You can recreate most of the effects from Photoshop this way while still working with vector graphics.
The Appearance panel is powerful and fun – I suggest you try it out immediately or watch the tutorial below to understand how it works:
Are you ready start experimenting with Illustrator?
Designing web sites and user interfaces with Photoshop is now the norm and most designers are happy with this solution.
But just because Photoshop became so ubiquitous doesn’t mean Illustrator has nothing to offer – quite the contrary. With tools such as pixel-grid alignment, text wrapping and object appearances it makes a strong case for itself.
When you combine this with a powerful layout and vector drawing tools, image slicing and export, Illustrator is definitely an obvious choice for web designers who want to design sites rapidly.