Why I think Illustrator is better than Photoshop for mock-up design
Posted: Mon Mar 31, 11:25 PM – Filed under: Personal, Design
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.
— Paul Kelley
Comment
Portfolio Update » « Amazing Lighting
I completely agree that Illustrator is easier to design in. Photoshop forces you to put everything on separate layers, so even the simple act of moving an object requires that you first see where you are on your layers palette. I like the flexibility of being able to design on one layer, and then separate everything once I’m finished. Great article!
— Sarah · Apr 1, 10:47 AM · #
Thanks for following up on this Paul – your article is a damned good argument for those of us so used to Photoshop… I believe I’ll be putting efforts into doing my next mockup in Illustrator…
— Marc Amos · Apr 1, 11:55 AM · #
Great article Paul! As a developer, I’ve only ever used Photoshop on those rare occasions when I need to slice up a design for buildout. On those even RARER occasions where i’ve tried (and failed miserably) to design my OWN site, i’ve always just used Photoshop because – well, I guess I didn’t think I had an alternative. I’ll definitely check out Illustrator the next time!
— Michael Witwicki · Apr 18, 08:14 AM · #
Interesting article, but you sound like you are not familiar with photoshop. There are lots of shortcuts and ways to achive everything you are talking about above in PS (you can click points on vector shapes using the Direct Selection Tool; you can apply a quick mask to a layer; etc).
It seems like you are going round-about in the ways you work with the app.
— Joe · May 8, 09:30 AM · #
@Joe, I am familiar with Photoshop, but I’m much faster, and more comfortable in Illustrator, Photoshop shortcuts or not. I feel much less constricted in Illustrator. Like I said, it’s all a matter of preference.
— Paul · May 8, 02:10 PM · #