11 Illustrator tips for web designers who prefer Photoshop

Peter Vukovic

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:

  1. Open on Edit menu
  2. Select Units from Preferences submenu
  3. 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:

  1. Select an object
  2. Open the Transform panel (Window > Transform)
  3. 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

  1. Open View Menu
  2. 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:

  1. Open Window menu, then select New Window. Illustrator will create a new tab with the same document in view.
  2. 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.
  3. 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:

Using symbols in Adobe Illustrator from Adobe TV.

To use an existing symbol:

  1. Open the Symbols panel from Window menu
  2. Drag the chosen symbol to you artwork

To create a new symbol:

  1. Create the artwork for the symbol
  2. Open the Symbols panel from Window menu
  3. Drag the artwork to the panel
  4. Click OK on the dialog box to confirm

To edit a symbol:

  1. Open the Symbols panel from Window menu
  2. Double click the Symbol to enter edit mode
  3. 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:

Using 9-slice scaling options with symbols from Adobe TV.

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:

  1. Create a rectangle or any other object with sharp corners
  2. In Effects menu, choose Stylize > Rounded Corners
  3. Enter corner radius and hit Preview to see how it looks
  4. Click OK to apply the effect

To change a rounded corner effect:

  1. Select an object with rounded corners
  2. Open Appearance panel from the Window menu
  3. 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:

  1. Place the pattern image on your artwork
  2. Click Embed in the top ribbon (important – won’t work without this!)
  3. Drag the pattern to the swatches palette
  4. 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:

  1. Select the image or object you want to wrap text around
  2. Open Object menu, select Text Wrap > Make
  3. To set the wrapping distance, open the Text Wrap menu again and select Text Wrap options
  4. 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:

Mastering the Appearance Panel from Adobe TV.

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.

What do you prefer: Illustrator or Photoshop?

The author

Peter Vukovic
Peter Vukovic

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency. He is a proud member of the 99designs community. You can view his 99designs profile here.

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%