Time requirement for Photoshop Vs Illustrator for mobile app

Question

First of all I am not a designer but a developer, please bear with me if this an amateurish question.

I am looking to get some graphics done for a mobile app. I want to get vector graphics done so that it is scalable to different size for different purposes (app store, the phone, web etc.).

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

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

Answer 1

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.

Answer 2

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.

Answer 3

Almost impossible to answer.

As with any software, speed at which things get done is completely dependent upon the user's proficiency with the application.

Inherently there is no reason Illustrator work would take longer than Photoshop work. In fact, many projects are just the opposite due to the object-based nature of vector content.

Answer 4

Photoshop

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.

I also find Illustrator's styling abilities far less capable than Photoshop's Layer Styles and Smart Filters (for Smart Objects).

Basically, it's the wrong tool for the job.

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.

Use Photoshop!

Answer 5

Come on guys... let's stop our tribal squabbling and answer the actual question that was asked... ;-)

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.

(the question people don't ask enough) Is UI design work always about using Illustrator (or inkscape, coreldraw...) and/or Photoshop (or gimp, photopaint...)?

No, consider Fireworks. It's an underrated option that in many ways offers the best of both vector and raster, and has features like master pages that are particularly suited to UI and web design.

Answer 6

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!)

+1 point for Team Photoshop ;)