6 Answers
6

I have been an avid Illustrator user for over 5 years now, and I have used it in a couple of large scale mobile projects (one of them was for the European carrier Orange). While there is no arguing that the rasterization engine of Illsutrator is inferior to the one that comes with Photoshop, the answer to your question depends largely on how you are proficient with the tool you'll end up using.

I can build a whole view in less than one hour in Illustrator (including shadows, insets, textures and other polish). That would take me at least 3 hours in Photoshop because my brain is wired to manipulating objects and artboards. I have hard time organizing my comps using Photoshop layers and I horribly miss the nimbleness of Illustrator (moving/resizing/aligning objects, changing whole color palettes, rounding corners, applying and editing strokes, etc).

If you are new to graphic design, I suggest sticking with Photoshop as it is less quirky as far as exporting rasters goes. Unless you know your way around Illustrator and are well aware of its limitations, I do not recommend it as your primary tool.

As you can see, the question brings up silly software debates about which is better.

Neither is better than the other. They're just different tools for different jobs. Most UI designers use both and will happily switch between the two as they see fit.

One option for a workflow is to design the initial images in a vector format, then import into a raster tool to produce the different sizes needed, and tweaking the images for each size required in the raster file.

For instance, a retina icon may use an entirely different texture pattern than a non-retina icon.

A quality graphic designer will use whatever tools make sense for the job just as a quality carpenter would. And like a carpenter, they are charging for the finished product/service, not based on the particular tool they are using.

I tend to agree that a qualified designer can handle both. To eliminate the apparent argument in the other answer.... by "mathematical" I am referring to how the gradient is created. AI grads are always smooth because they are plotted from a to b to c. PS grads are pixel fills. Upon scaling, the math is recalculated but pixels are simply resized. That's the difference. And honestly ONLY Photoshop CS6 offers true vector objects with vector fills and strokes. All other PS versions offer vector containers (or edges) with raster interiors.
–
ScottApr 24 '12 at 16:59

I think we all agree that scaling a raster image is a bad idea. I think Scott's point was that AI doesn't always have the best default 'export to raster'. There are many times when a person wants to purposefully add noise to gradients, for instance, where you'd have to switch over to a raster tool to do that. I'd still use Illustrator if it made sense, but may do the final rasterization in something like PhotoShop to "tweak by eye" as needed. To each their own, of course.
–
DA01Apr 24 '12 at 17:06

1

I seem to have more answers to the question, "Which tool to use" than the one I asked, "Should I be billed more/less based on the tool used". But I think this answer comes close. Thanks!
–
dangytaggartApr 25 '12 at 16:10

Thank you Scott. Based on your feedback, if the designer is equally proficient in both, I am assuming it should not take much longer to design vector graphics and that I should be charged the same irrespective of the software used.
–
dangytaggartApr 24 '12 at 4:47

3

No. Vector graphics are more of a premium. Any designer proficient in both, will rightfully charge more for vector artwork. It's inherently more versatile and takes a special skill set to construct. When I quote, vector artwork is always quoted higher due to the nature of the work. It has nothing to do with time spent. It's not the grunt labor of doing the work which costs. It's KNOWING HOW to do the work which costs. I'd guess 100% of designers know Photoshop... 60% of those know Illustrator, 40% of those know Illustrator well. Quality vector art is not as prolific.
–
ScottApr 24 '12 at 6:41

I disagree that there's any particular cost difference between raster art and vector art nor is there any particular percentage breakdown of skill sets of particular software. Any skilled graphic designer should be able to pick up nearly any raster or vector illustration software and be up to speed with it quickly.
–
DA01Apr 24 '12 at 15:51

Graphics built in Photoshop can be all vector, so a well constructed Photoshop file can scale to any size (exact multiples will be better quality though — like going from a non-Retina iOS size to a Retina size). If your reasoning is future-proofing and editablilty, Illustrator offers no benefit at all.

When briefing a designer for artwork built in Photoshop, I'd ask for these requirements:

Use all vector shapes with Layer Styles for bitmap effects.

If a bitmap must be used, create a bitmap at the largest exact pixel size and convert it to a Smart Object.

When exporting the images, there's a few different approaches. My favourite is to lay everything up in a separate document as a sprite sheet (all elements layed out as a flat page), and use slices. This means everything has a file name and can be exported with one Save For Web command from Photoshop. Not many designers work like that, but it's a good way to go. It automates all exporting, so you can make changes then rebuild all images in one shot.

Illustrator

As for Illustrator… I believe some designers use it for iOS/Android/etc graphics, but I think it's a really painful way to go. It's ok for a few simple icons, but Illustrator's rendering is inferior (no dithering on gradients) and it's just the wrong tool for the job.

Here's an example showing Illustrator vs Photoshop for a simple gradient. Note the banding in Illustrator. The image portion at the bottom has been zoomed to 200% and has increased contrast, to make the differences more apparent.

Edit: I did some more tests, and I would now strongly recommend not using Illustrator CS5 for exporting production assets. Here are the tests:Illustrator and app design

If you downvoted my answer, please read the linked article. I think it's very relevant to the question, because it doesn't matter how much shorter or longer it would take to build in Illustrator: It's not the right tool for the job.

Time

Using the right tool will be quicker. I say this as someone who's used both apps daily since Photoshop 2 and Illustrator 3. Illustrator is awesome, but not if the end goal is a bunch of bitmap UI images.

REALLY disagree there. Photoshop creates vector containers and NOT vector elements. There is a world of difference. Simply save your Photoshop "vectors" as a PDF and open in a vector app such as Illustrator. The difference should be immediately apparent. In addition, Illustrator's rendering is in no way "inferior" to Photoshop. You don't need dithering for vector gradients they are plotted mathematically and are a world apart from a raster gradient. Illustrator is ABSOLUTELY a better tool to use than Photoshop.
–
ScottApr 24 '12 at 8:14

1

No offense Marc, but it sounds as though you aren't as proficient with Illustrator. What you are posting are common misconceptions not facts. Again, Illustrator doesn't need to dither... it's math, not pixels. And no image you post here will matter. It'll be a low resolution web image, completely defeating any true scrutiny. ONLY Photoshop CS6 has REAL vector shapes. No other version does - they are merely vector containers with raster fills. Re-scaling a raster fill is no different than re-scaling any raster image.
–
ScottApr 24 '12 at 8:32

1

Lets not let this erupt into an argument because both parties seem to have hugely strong views. @Scott - just downvote his answer if you disagree; and Marc, let it lie and they OP will decide on this answer's fate.
–
Dan HanlyApr 24 '12 at 10:37

1

Scott & Daniel: It doesn't matter if the original is a vector, once you export from Illustrator (or Photoshop), it's a bitmap. The bitmap is what's used in the mobile app, which is what the original question relates to. You can scale that to inspect the result. If you don't get that, I can't help you. Dithered gradients are really important to the quality of exported bitmaps.
–
Marc EdwardsApr 24 '12 at 12:05

2

Scott, I'm not sure what this 'mathematically based' argument is. ALL software is mathematically based. You keep saying the images don't matter because it's math. Alas, it's DESIGN, and all that does matter is the final image. I'm not taking a side on which software is 'better' but the arguments seem a little silly.
–
DA01Apr 24 '12 at 15:56

Generally speaking does it take more time to do it in Illustrator than on Photoshop?

It can do, in a way that isn't true going the other way. Any professional will use whatever tools are best for the task in hand. But...

If you demand a vector image, you're saying that, if the designer's process for this task involves raster graphics (for example, if this design involves photographs, raster effects, or any of the many tactile effects that are easy in raster and tough in vector), there must be a stage of either vectorising a raster graphic, or creating in vector a graphic of a type that would be easier in raster. This is occasionally trivial and easy, but more often it's skill intensive and time consuming to do well. How time consuming is rarely possible to predict at the start.

If you demand a raster image, you're saying that, if the designer's process for this task involves vector graphics, there must be a rasterisation stage. This is usually straightforward. If it's an effect that is better done in vector, they'll do it in vector then rasterize it. This rarely involves anything more complex than smoothing over and touching up elements that the software's automatic rasterization borked up slightly.

Do I have to account for more time if I require it to be done on Illustrator?

Any time you put down a restriction or requirement on the tools any professional can use, that will limit their flexibility and on average will increase the time it takes.

Will forcing Illustrator ever speed a task up? No, because if Illustrator is the most suitable tool for the task, and you put no restrictions on what tools can be used, they'll use Illustrator anyway, because it's the most suitable tool for the task.

Will forcing Illustrator slow a task down? It might, it might not. Because it might slow things down, and won't speed things up, in your estimates you need to factor in some additional time - not because of anything about Illustrator, but because you're placing a restriction in order to get a specific end result.

It would be the same for any professional. If you hired a plumber and told them they could only use hammers, they'd charge more even if the task looked like it only needed hammers, to factor in the risk of encountering something unexpected where a hammer wasn't the best tool.

(the implied question) Will demanding vector graphics cost more?

Generally speaking, yes.

As you know, vector graphics have certain advantages over raster graphics which means - all other things being equal - they are often more valuable to a client, and almost never less valuable (because rasterization is usually easy). In economic terms:

More versatile end result = higher demand

Possibility that the process will require an additional skill-intensive stage = job that needs a higher time estimate + possibility of an extra mandatory skill type being required = scarcer supply

Higher demand + scarcer supply = higher price

There are always exceptions. Some people might always design in vector so they wouldn't charge more: but their prices may be higher on average. Sometimes, some straightforward tasks can be predicted to be done purely in vector: but you'll need a really really clear brief and some negotiation. Some designers are desperate for cash but remember the golden rule of design pricing.

In general, on average, briefs with "Must be vector" in the specification list will have higher prices on average than briefs that don't.

(the question nobody asked) Which is better, raster or vector?

Which is better, screwdrivers or hammers? It depends on the needs of the task.

Thank you @user568458! Exactly what I needed to know.
–
dangytaggartApr 27 '12 at 19:38

"Which is better, raster or vector?" — If you're designing for mobile apps (as asked), then you're probably building bitmaps as the result and probably using vectors as the source, in both Illustrator and Photoshop. It's not a case of one or the other: iOS uses bitmaps for assets almost exclusively (except for things drawn in code). I'd expect any decent designer to use vectors in AI, PS or FW for mobile app design.
–
Marc EdwardsApr 28 '12 at 3:00

Marc Edwards is correct. Scott seems to be getting a little confused — sure, vector graphics are created mathematically, but to use them in an app they have to be converted to raster graphics (usually in the form of a PNG). It is very clear to see, thanks to Marc's excellent example, that Photoshop produces the best possible quality raster graphics. The dithering that Photoshop applies to its gradients improves them greatly.

Photoshop is definitely the best way to go for mobile app design. Illustrator has its strengths, but app design is not one of them. Photoshop offers vector graphics while designing which makes converting between 1x and 2x a breeze (especially with the right actions!)

I think Scott is missing the point that if you export from Illustrator (to use the UI element in your app), then it has to be rasterised. There's no way around that — your exported PNG images will use Illustrator's rendering engine for exporting, and your gradients won't be dithered (amongst other things). iOS and Android use PNGs for their UI elements almost exclusively, so that's how all assets need to be provided.
–
Marc EdwardsApr 24 '12 at 13:30

It's not entirely true that images need to be converted to raster PRIOR to implementing in the app. Lots of software can use SVG and other vector based UI formats.
–
DA01Apr 24 '12 at 15:49

I am not confused or mistaken at all. I simply am highly proficient with Illustrator and therefore don't fall into the novice thinking that Photoshop is the be-all-end-all. It is not.
–
ScottApr 24 '12 at 16:53

1

I don't think you are confused or mistaken, either, but I do think you are missing the point that Marc is trying to make in that exporting as a raster image out of something like AI gives the artist limited options to tweak as needed. Whereas a raster tool let's you do that prior to export. Different strokes/different folks.
–
DA01Apr 24 '12 at 17:10

@Scott — How do you prepare your final image assets for development? Do you export them as PNGs in 1x and 2x?
–
Daniel CooperApr 24 '12 at 23:46