Beyond Logo Menu

Future of designing: Photoshop vs. Illustrator

Written by: Wayne Dorrington

Published on: January 19, 2015

Filed under:

Designers design websites with Photoshop and that’s the way its always been. As a tool for editing images and laying out digital designs, its long been the champion of designers, with a user interface that has been refined through years of feedback and testing.

I personally briefly strayed off the tracks in my early career with Corel Draw (yeah, I know) – but came back into the fold pretty sharpish.

Oddly though, Photoshop wasn’t meant to design websites – it was originally intended purely as a photo-editing tool (hence the name). It’s sister program, Fireworks, was created for web design, with dedicated tools specifically for the job.

But as commonly happens, tradition outweighs progress and designers already used to working with Photoshop refused (for the most part) to convert.

Photoshop, is a pixel-based design package. If you think of any digital photo you may have seen and zoomed into, by enlarging it enough, you begin to see its square pixels. Websites are designed, measured and constructed using such pixels, and that’s traditionally why Photoshop has been favoured by designers and developers alike.

But now requirements are changing for designing a web property. No longer are websites static entities, ruled by the maximum pixel widths of the most common screen sizes.

Now, websites are created not by screen size, but by experience. For example – will the site be used on a mobile? Will it be used out in the street, versus and home on a desktop? All of these factors have resulted in responsive design, where commonly one single design is created to work for all of these scenarios, responding to the changes of its viewing format on the fly.

The designing of this now makes the process a little more complicated. A designer must factor in not only the visual experience, but also how that will translate for all responsive views – commonly from Desktop, to tablet, all the way down to lower-resolution smartphones.

In Photoshop, the most common way of doing this is by having to create multiple copies of the same design, showing it in the most common devices (Desktop, tablet, smartphone). There are a few tools built in to help make this replication more efficient (eg smart objects and Generate) but generally it add time to the process, largely because by using Photoshop, you are mainly working in pixel design and often resizing a graphic in Photoshop can mean finding a larger one to replace it with, or deleting the object and starting again at a larger size.

Because Responsive websites reply on constant resizing of graphics to suit the device screen size, pixelated graphics have limitations, particularly when you want them to remain crisp and clean at all times. You can fix this by creating multiple sizes of the same graphics, and scripting the correct sized one to appear for the right job – but that means having to re-load graphics as this happens.

Currently, developers favour the use of SVG graphics for responsive design. SVG graphics are vector-based, meaning that one graphic can be resized from anything between a postage stamp to a billboard.

Vector graphics can have lower file sizes, be controlled more readily by the code, and most importantly, have one instance that works over all responsive scenarios.

But here’s where things begin to become interesting, as Photoshop, the traditional tool for designing websites, isn’t natively a vector-based program.

For this, designers use Illustrator, a mainly vector-based application for designing or illustrating. Its been around for as long as Photoshop, is made by the same company, and is very similar to use.

So should we begin to design websites of the future purely in Illustrator?

The designing of this now makes the process a little more complicated. A designer must factor in not only the visual experience, but also how that will translate for all responsive views – commonly from Desktop, to tablet, all the way down to lower-resolution smartphones.

Photoshop

Pros

  • Commonly used by designers and developers
  • Can handle vector images
  • Can handle pixel images
  • Many effects processes
  • Good layer control within files
  • Designs can be exported ready for developers
  • Developers familiar with the program
  • Extensive photography editing tools

 

Cons

  • Resizing elements is time consuming (pixel-based)
  • Exporting to vector formats require planning
  • Cannot create complex vector elements
  • Elements not created in vector cannot be converted

 

photoshop

Photoshop creates graphics based on breaking it down into pixels

Illustrator

Pros

  • Commonly used by designers
  • Can handle vector images
  • Can handle pixel images
  • Designs can be exported ready for developers
  • No photography editing tools
  • Images and elements can be ‘linked’ so they can be updated externally and then ‘refresh’ within the design as they change
  • Resizing of any element or the whole design is much easier
  • Exports directly to SVG and vector formats

 

Cons

  • Developers not as familiar with it as Photoshop
  • Not as much effects control as Photoshop
  • CPU intensive when exporting anything other than vector
  • Layers structure not as intuitive

 

Illustrator example

Illustrator creates graphics using vector lines and curves

Conclusions

Photoshop is not, nor will it ever be a redundant program. Besides graphics, it now also incorporates video editing, animation and 3D Design. For website design it will be the strong leader for the foreseeable future.

But with the current trend for flat, minimal responsive web design, its looking more and more as if Illustrator should be considered a viable option, especially as developers favour vector output such as SVG.

Are you a designer or developer? What do you think about this discussion? Let us know on our social channels.