Ai vs Ps: Improve Your Workflow

About a year ago I made the switch from mocking up my designs in Photoshop to using Illustrator instead. After listening to UI designer Jeremy Miller of Radolo talk on this topic, I walked away with one thing: “Learn to Love Illustrator.” And that I did.

Illustrator provides a more flexible work flow than Photoshop. Ever since Responsive Design entered the picture, the need to have different resolution sizes of mock ups increased. By working with a more modular workflow, making dramatic changes across all screen sizes becomes quicker and more efficient.

There are more benefits of using illustrator than just having pixel perfect designs and the ability to use multiple artboards. I’m going to focus on a few of my favorite features of Illustrator and how they help improve your workflow.

1. Symbol Libraries:

Being able to create your own symbol libraries allows you to be able to insert icons at the click of the button. My symbol libraries include most of the elements I’m going to be reusing, whether that be in a specific project or for future projects.

With each new page you create, using your symbol library to drag and drop elements into place saves a lot of time. Especially the fact that if you need to make a change to a symbol, you can make those changes across the board at one time.

My favorite thing to do with this feature is to save entire regions as symbols. If there’s a contact form that is going to appear more than once in a design, I make it a symbol. Same thing goes for headers/ navigation and footers. Just like that you’ve saved yourself a lot of time by not laying out those sections more than once!

When you’re done with one project, you can save out your symbol library and import it into future projects to reuse.

1. Select object/region (this case I’m using a contact form)
2. In the Symbols viewport, click the New Symbol icon
3. Select the type of symbol, Align to pixel grid and name it.
4. Drag and drop the symbol onto artboard and position.

2. The Eyedropper:

The eyedropper is quite possibly my favorite tool to use in Illustrator. And I promise you one thing: as soon as you get used to working with it, you won’t want to work without it! When I’m using this tool I find that using the shortcuts really useful so that I can switch between the selection tool (shortcut: V) and the eyedropper (I).

You use the eyedropper in order to style an element the exact same way as a pre-existing styled element. Using the selection tool (V), select the element that you want to change the styling of. Then use the eyedropper (I) and simply click the element that has the desired styling. You can select multiple elements at the same time to quicken the process.

This comes in handy if you are styling typography, shapes, lines/strokes, icons, ect.

3. Character & Paragraph Styles:

The useful thing with being able to set your own character and paragraph styles is that you can quickly modify the layout of your text throughout your document. For instance, apply a paragraph style to the body of your design. If you decide later that you want to change fonts, everywhere that paragraph style was used will automatically change.

Once you’ve created all your paragraph styles, you’re all ready to implement into your CSS— from your body tag to your header tags.

Ultimately, being able to quickly modify your layout without a lot of effort is key in this rapidly changing field. I leave you designers with the same challenge Jeremy Miller left, learn to love Illustrator. Challenge yourself to put aside your Photoshop workflow and evolve into a quicker, more modular designer.

When it comes to Ai vs Ps, the winner, with respect to front end design, is Ai.