Basecamp

Freshbooks

MailChimp

Journal

Apr 01 2008

Why I think Illustrator Is Better Thank Photoshop for Mock-Up Design

Posted by: Paul Kelley

This article was sparked by a question put forth by Marc Amos, “If you were given only these options, which would you prefer to use to create website mock-ups: Photoshop or Illustrator? Why?” I was shocked by the resulting answers; more people used Photoshop over Illustrator, 2 to 1.

Let me say first and foremost, that I was an art student. I graduated with a Bachelor’s Degree in Fine Arts with a concentration in Graphic Design. I mention this because it is what started me on the path of using Illustrator over Photoshop. As an art student, during the time of Photoshop 5.5, Illustrator was a superior program when it came to creating and laying out text. At that point, Photoshop hadn’t implemented vector-based text yet and print projects, large or small, web design, and illustration, simply looked better in Illustrator.

In the time that has passed since then, Photoshop has closed the gap when it comes to text, but Illustrator still has many advantages:

Multiple looks in one document

My favorite advantage is the ability to easily have multiple looks and pages in one document. When I open a new Illustrator document, I don’t set a document size, and I always “Hide the Artboard” and “Hide Page Tiling.” This gives me a blank slate to start with. It doesn’t matter what size my design will be, or how many I put into this document, because by using the Crop Area tool I select a section of the document I want to save as a jpg. This comes in handy for quick mock-up reviews over email or on the web. Comparing designs and moving elements between designs also becomes easier when you have multiple looks in one document. Having extra space to work with also leaves room for color studies off to the side that you can reference quickly.

Everything gets done faster in Illustrator

Illustrator cuts one, sometimes two steps out of almost every process. For example, creating, transforming or adding styles to a box are all an easier process. To transform a created box, all you have to do is click it and drag an anchor point. In Photoshop, you have to select the layer, click edit, click transform, and THEN change the box. Adding elements, removing elements, changing elements; all of this is done faster in Illustrator.

Also, add Clipping Masks to the list of things that are easier and cleaner to do. Instead of having an extra layer just for a clipping mask like in Photoshop, both elements can exist on the same layer in Illustrator. Creating complex clipping masks is also easier. For example, if you wanted to silhouette a bagel. Creating a circle isn’t enough. You need a circle in the middle of the circle that you will also see through. This is where the magic Pathfinder tool comes in. You can select two objects and either add them together to create one object, or use one object to cut a whole in the other. Pathfinder has many different tools, but these two are the ones I use most often.

Creating groups of objects is also easier in Illustrator. Items can be grouped on the same layer, instead of linking multiple layers or creating a folder with the layers inside. With the release of CS3, working with groups became even easier. Double clicking a group of objects brings you inside the group to work on each item individually, instead of having to ungroup them. If you have a picture that is being masked by a clipping mask, all you have to do is double click it and you’ll be able to move the image around inside the mask. If it’s more than just an image, if it has an object over it, you can move those independently under the mask.

Also new to Illustrator CS3 is the Recolor Artwork tool. If you have a design with a lot of objects of all different colors, you don’t have to individually select every object of similar color. Now all you have to do is select everything, open the Recolor Artwork tool, select the color out of the list of existing colors in your document, and change it to something else. Everything that was blue, is now purple, in less than 5 seconds.

Effects aren’t just for Photoshop anymore

In the latest versions of Illustrator, effects, filters and styles were successfully integrated into the program. If you need to blur an object, add a drop shadow or add a filter, all of these things can be done in Illustrator with little to no effort. You can add a drop shadow to a group of items while each object still individually exists and remains editable on it’s own. Warping text or objects is also easy in Illustrator. When you warp an object, you can apply the transformation to it, but keep its anchor points as if it was still it’s original shape, or you can Expand the object, and it automatically creates the new anchor points that form the newly transformed object.

Illustrator isn’t just for designing a mock-up

It’s rather easy to develop a mock-up in Illustrator; I believe it’s faster, actually The aforementioned Crop Area tool makes cutting up a design easy. If it was properly designed, meaning things were separated on layers, then it’s easy to turn off the unnecessary layers, create a crop box and save the image in the appropriate format. Another nice thing I like about the Crop Area tool is that you are creating a window to see through, rather than cropping the entire document. Personally, I feel uncomfortable cropping an entire document just to make an image.

What I find to be the biggest complaint from developers, about Illustrator, is that when the design is brought over to Photoshop for development, everything isn’t pixel perfect. Colors get that one pixel bleed where you’re not sure if that area is supposed to be color one or color two. This isn’t an Illustrator or a Photoshop problem; it’s an Adobe problem. From some reason, maybe someone out there knows it, you can’t just copy something from Illustrator into Photoshop without experiencing this problem. So all you developers out there, don’t hold it against Illustrator. The easy answer is to design and slice-up images in ONE program. If a designer and a developer both use the same program, it makes life easier for everyone.

It just takes some getting used to

So that’s a basic rundown of why I think Illustrator is better to design in than Photoshop. If you’re a developer, maybe this will shine a little light on why designers like Illustrator so much. If this has given you enough reason to try designing in Illustrator, give it an honest effort. It’s obviously going to take some getting used to. I think that after a while of working in it, you’ll get the hang of it and prefer it. If not, I’m sure it’s for good reasons. It’s all a matter of preference.

Tagged under: Design

This post currently has 1 comments.

Comments

Hello blogger, i must say you have high quality articles here.
Your website should go viral. You need initial traffic only.

How to get it? Search for; Mertiso’s tips go viral

avatar image

Said 83Cora,
on August 13, 2017 at 7:00:05 AM

Please Leave a Comment

<strong> & <em> are allowed. Email addresses and URLs will create links automatically. You're welcome!

asterisk Required