Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Designing Websites In Photoshop Illustrator?

So you have done some initial sketches for the look of your new design. Now it’s time to develop these ideas. So let’s jump into Photoshop. Stop! Wait just a minute. What about Illustrator? That can do web-design stuff too, can’t it?

Screenshot of Illustrator

For the “its time to develop these sketches”-stage of designing a site it’s worth giving Illustrator a try. You’d be surprised. Sure you can create precise finished results in Photoshop; yet Illustrator excels at generating loads of designs quickly. Comparing designs is easy — just spread them out all over your canvas. It’s faster to move things around. It’s easier to resize things. It’s not that Illustrator is better. It’s just different.

The designs you’ve done now might not be polished to perfection, but you can certainly tell which are worth developing and which you need to chuck. After all, it doesn’t matter how much time you spend polishing a bad design — it just never becomes a good design.

If we take the analogy of polishing a step further, when polishing a stone1 you start with a very coarse paper or grit and work your way gradually to a very fine paper or grit. In the same way you don’t just jump from rough idea to final polish. It doesn’t give good results.

For that final polish, Photoshop (in my opinion) cannot be beaten. However for the stage between initial sketches and finishing touches Illustrator is a worthy tool and worth a try if you haven’t already.

Editor’s note Link

This post is one of the finalists of our guest author contest2. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.

Footnotes Link

  1. 1
  2. 2
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Andy Brown has a boring name but tries not to do boring design. He enjoys writing and designing. He works for a lovely company near Birmingham in the UK.

  1. 1

    Comments so far:

    “i do things this way so any other way is WRONG”

    you can create great looking websites using a range of programs, you could even do it in ms paint if you spent long enough on it!

    just because its not something you are used to or have spent long enough working with doesnt make it wrong

    a bit more open mindedness would be nice

  2. 2

    could have been an intersting article.. i did some website layouts with illustrator before and it has it’s pros and cons… but this article is far too short…


  3. 3

    Why not Illustrator? Because the web is pixel based, and any designer worth a damn likes to make sure that everything is pixel perfect, including anti-alaising etc.

    The amount of times website designs have been provided in vector format to me are low, but every single time they are I have to spend hours nudging vectors so they align properly with a pixel grid and don’t look amateurish in finish because the anti-alias is over the edge of the container box. Not to mention the far bigger problem that vector designs tend to be at too high a DPI, and the design that gets handed over won’t work on the web because 6pt text isn’t readable on the web. So many scaling issues because someone worked in inches instead of pixels. Rescaling is NOT a bonus, it means ragged edges with the anti-alias creeping over box boundries.

    Use vectors for illustrative decoration, by all means – but for the design layout itself do everyone a favour and use a bitmap program.

  4. 6

    I left a comment, but after submit the page refreshed with no feedback whatsoever and my comment is nowhere. That’s annoying.

  5. 7

    Designing websites in Photoshop Illustrator Fireworks! Why should you design in Illustrator, if you can use Fireworks?

  6. 8

    Resizing things in Illustrator is easier? Easier than ctrl+T?

    This article sounds like it was written a Print designer who has started doing web but can’t let go of DPI and point sized text.

    Why would you want to start designing in one program and have to migrate to another half way through? There may be good reasons for this but this article doesn’t explain it.

  7. 9


    Nice idea Andy. I’m not going to join the crowds and complain about length, i know how short the guest entries were meant to be.

    The issue I have with designing websites in Illustrator is that (as you mentioned) it’s not precise. I’d rather stay on paper than do mockups in Illustrator ;) I don’t think there needs to be a step between sketches photoshop – but i guess it’s totally a question of preference.. whatever works for you ;)

  8. 10

    I think illustrator is great for designing. It’s quick and easy especially for coming up with layouts and ideas. However i wouldn’t cut up the vector image, becuase it’s not pixel perfect. I will use something like GIMP (free) or photoshop to produce all the images.


  9. 11

    I agree with Maurits – Fireworks is the tool of choice for me. I have colleagues who use Photoshop and Illustrator, and generally find that Illustrator has a really round-about way of doing things that are just one or two clicks away in Fireworks. Photoshop allows advanced bitmap effects, but the way it tries to do vectors and geometric shapes is just laughable.

    Fireworks’ hybrid bitmap/vector approach has proven to be extremely useful and I personally wouldn’t use anything else.

  10. 12

    “could have been an intersting article”

    Well said. It would have been interesting to develop this idea. Hope to see more about this subject in the future. Personally I use Corel Draw for webdesign.

    What do the rest of you think are the benefits and drawback of this method?

  11. 13

    bruno byington

    August 14, 2008 1:17 am

    yeah could have really been an intersting article but the limit is just a problem but then again. Fairplay.

    I started doing my Screen Design at the start (when I got to graphic design) only in Illustrator. I was basically always backed away from photoshop because in Illustrator (Vector-typically) you coudl just go ahead drag out a rectangle and transform it as you like without loosing information or getting it pixel fucked.

    Now in Photoshop you can do this too but first had to really spend hours with it to just get a feeling for the software when it comes to Screen Design.

    I dont do my Screen Design in only Photoshop or only Illustrator. I do the basics in Illustrator like a navigation and as soon as I know my dimensions and am actually happy with color scheme, size and design I move to Photoshop. You can do way more things when it gets to Effects in Photoshop. you can do all sort of drop shadows and so on inside and around elements where Illustrator just cant top it.

    Hope it kind of helps

    to smashing:
    The link to the companys Site is wrong. well its a dead link folks. I found this one:

    – to the site: the design is horrible and if the mockup is done in Illustrator, then it is badly done in Illustrator. You can also actually design good Sites with Illustrator. Sorry if this critisism is kind of too harsh. Dont want to hurt anyone here.


  12. 14

    I don’t think it’s a great idea. No other software can replace Photoshop, when it comes to creating web layouts. Illustrator is for all your great vector designs!! agree?? :D

  13. 15

    If you want pixel perfect sites that are uber professional, never design your end visual in Illustrator, or Fireworks, (this is good for beginners though).

    Your article has a great point though, as it’s seems as though you’re essentially designing visual represented wireframes here. I did exactly the same thing a couple of years ago, (only in grey scale though) and found Illustrator to be far quicker at doing wireframes. However, if you try doing wireframes in Adobe Indesign, you’ll be flying. It’s even quicker.

    I’ve always tried to separate out the elements of user experience design from the ‘art direction’ or ‘look & feel’ of the site. In my experience it makes for a better process.

    Thanks for the article!

  14. 16

    @ Matt Wilcox: wtf, he’s not saying you put this design on the web, he’s saying Illustrator is a good tool to do layouts, have a clear view of what you’re doing and easy resizes. Whatever you make in Illustrator is clearly not for web, it’s for comparing purposes and rough sketching. The canvas alone is a handy ‘tool’ to put everything in perspective.

    From now on; please read before you burn.

  15. 17

    Fireworks is the choice. I do every high and low project, from prototyping to final design in Fireworks.

    Recently I worked with a third party design agency and they did every web project in Illustrator. The result was a muddy pixel imperfect mess that I had to redo all over in Fireworks. Simple things like drawing a 1px line in Illustrator is hopeless, as it turns into an antialias hell when you export the design in the final process.

  16. 18

    Bjørn Johansen

    August 14, 2008 1:26 am

    You should have a look at the «pixel preview» in Illustrator ;-)
    Fixes all the concerns you mentioned.

  17. 19

    Ever heard of Fireworks???

  18. 20

    Mário Santos

    August 14, 2008 1:30 am

    Really good article, and i must say that i make all my site (in work and home) with illustrator, simply because can easly be dimensioned and it integrates easly in flash. For more art’works i use photoshop or gimp importations into illustrator.

  19. 21

    You should know by now there is something called ‘Fireworks’ that combines both worlds, Photoshop and Illustrator. It’s actually the only program of the three that is actually developed for the web and nothing else. Photoshop and Illustrator server totally different purposes. So please update your article and stop ignoring Fireworks.

  20. 22

    Daniel Sherson

    August 14, 2008 1:38 am

    I use illustrator. I find layers fiddly and perfer things to select when I click on them. It’s easier to line things up, use shapes, type, etc. I even find gradients simpler.

    I use photoshop to photo-shop (and paint, and sometimes illustrate – oddly enough).

    As for pixel perfection you just need to set it up right:
    1: use pixels for dimensions. (file:document setup / file:new…)
    2: set raster resolution to 72dpi (effect:document raster effect settings…)
    3: pixel preview (option-command-y / view:pixel preview)
    4: (optional) use smart guides (command-u / view:smart guides).
    5: save for web (command-option-shift-s / file:save for web and devices)
    this makes it pretty much the same as fireworks (but without all the cheesy button styles)


↑ Back to top