Menu Search
Jump to the content X

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

↑ 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

    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

    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

    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

    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)

  21. 23

    «pixel preview»

    does anyone know if Corel has this feature Like illustrator?


  22. 24

    #1 – agree!

    But SM…. PLEEEASE upload articles that are longer then 200 words o0
    If the guest writer tell us about the try to use illsutrator, then he should tell us why and how!

  23. 25

    For those who say Illustrator is good just for vectors: You may work with pixel grid, align to pixels etc. in Illustrator. You may even turn on Pixel Preview so you see all vectors “pixelised” as you would see in Photoshop.

  24. 26

    why don’t i use fireworks? because I don’t own it. and as near as i can tell (i last used fireworks at MX2004) illustrator set up like I mentioned above works the same.

  25. 27

    I agree with the statement that “Illustrator is DIFFERENT”. Its name tells you most of its purpose. A friend of mine makes all her print works and also designs layouts using it, but that’s the way she does it – by illustrating. I’ve been working with PS for my entire life. I tried AI and I simply couldn’t do basic things. Maybe if I spent more time with it.. Anyway, it looked like it doesn’t serve me well ’cause I don’t illustrate, I photoshop ;-) If I ever need wavy shapes, I’m pretty satisfied with the pen tool in PS, but I can understand drawing a whole picture as if you were using a pencil goes much more easier in AI. So it depends on the techniques you use, I believe.

  26. 28

    Well actually in the near future Illustrator might actually the design tool of the future, maby when SVG is better developed people will be able to create more vector scalable websites.

  27. 29

    Thankyou someone else who has discorvered the power of illustrator for web design…I have used illustrator for designing websites for a few years, its amazing to get quick results and throw some ideas around. Good article.

  28. 30

    I use illustrator for webdesign, since i discover the crop tool…. i can slice everything with the crop tool (more faster than photoshop) , for me works fine, and my websites are very pro! I only use photoshop for making background textures and extra stuff…

    the pixels are perfect, the resolution is perfect, the anti-alias is perfect. no complains at all…. You just have to put the options that @Daniel Sherson mentioned.

  29. 31

    only once so far I designed in Illustrator, just because the client wanted to .ai and .eps file. Honestly it wasn’t bad, Illustrator has it’s own pros especially with minimalistic and simple web designs. In the future I plan to try Fireworks more thoroughly.

  30. 32

    Could have been a nice article but it’s way too short… Don’t remember what the limit was in the contest rules but undoubtedly it was, too, way to short…

    Any way it look like a lot of people doesn’t understand the concept of “coarse paper” nor know about illustrator…

  31. 33

    Wow, some strong, opposing opinions in here. All good though, I am motivated to check out fireworks AND Illustrator now. :)

  32. 34

    The article title doesn’t really work in Google reader, I sat there wondering what Photoshop Illustrator was before clicking through to the article!

  33. 35

    I always design WEB page in Illustrator in combination with photoshop…. EASY.. :)

  34. 36

    I love Fireworks and use(d) it extensively, but Adobe only now came out with Fireworks in CS3.3
    Unfortunately my work bought CS3 when it came out, and isn’t really willing to spend more cash because I like using Fireworks more than Photoshop for web layouts.

    With Daniel’s settings I might just start using Illustrator for the rapid prototyping stuff.

  35. 37

    100% agree with using Illustrator, not only for wireframes but also for production. For those complaining that you cannot make accurate pixel level images in Illustrator then follow the tips of Daniel Sherson (above). As far as I’m aware I’m at no disadvantage in not using Photoshop. Can anyone point anything out that Photoshop can do that Illustator can’t (pertinent to web design obviously)?

  36. 38

    Why use Illustrator when there are Shapes in Photoshop that in my case are all you need to make a mockup of a website.

    98% of my designs are shape based, because it’s easy to change color, apply gradient layer styles(with taste of course), masks, etc…I find Illustrator’s color and gradient panel quite irritating. And of course the control points of Photoshop’s shapes are much easier to work with.

    Fireworks – I tried that, not quite what I needed. Somehow I got lost in it all the time :) But one excellent thing in fireworks are the patterns which are really easy to apply. And there are a lot of standard stripe patterns etc.

    Of course everyone has their own tools – which is good, some distinction :)

  37. 39

    I use Illustrator quite a lot for the numerous iterations of websites. It’s really easy to add gradients, resize, change the shapes and dimensions of more complex shapes.

    You can also do some pretty neat tricks when it comes to gradients, and it is true that a lot of product designers use Illustrator because it gives a better look and feel than photoshop.

    Don’t knock the man, give it a try and you’ll probably be surprised.

  38. 40


  39. 41

    I use Illustrator for my line work in logos. While you can do some of the styling in Illustrator, my brain isn’t yet as cofortable in it as it is with Photoshop. I really *want* to use Illustrator for more layout elements, as Bruno said to avoid pixel-f*ck situations – smart objects seem to be the great middle ground for this. Lately I’ve been taking my sketches into photoshop with “quick and dirty” in mind to get the styles close to what I want, then starting a fresh document and mixing Illustrator / Photoshop to create the final polished artwork. I won’t worry about things being pixel perfect until I’ve gotten that rough comp approved as the direction the client ultimately wants to go.

    I suspect with the amount of “this article could have been more amazing” comments you might be taking a crack at doing another in the future. Some things which would be of benefit to me in that:
    -How to setup the document so that you are working with equivelent scale between .psd and .ai
    -How to isolate / select elements for export as smart objects
    -How to setup the pasteboard to be multi-page as some of your screenshots showed

  40. 42

    I don’t mean any offensive by this, but what’s the deal with the recent crappy articles?

    Smashing Magazine used to have maybe one post per day, always of the absolute highest quality, but in the past few days there has been a huge number of articles, most of which aren’t worth clicking.

    Quality over quantity, please. :(

  41. 43

    Jon-Paul LeClair

    August 14, 2008 3:50 am

    I ALWAYS do my mockups in Illustrator. Easier to line things up, I also have PhotoShop effects which I can apply. If I need PhotoShop elements, I’ll place/link them. Once I’m done I’ll open the Illustrator file in PhotoShop and do my slicing for the web. The best of both worlds.

    I know alot of people and Adobe suggest using FireWorks for layout but it’s too clunky for me to get around.

  42. 44

    i don’t understand the aim of this kind of article, sorry…

  43. 45

    I totally agree and have been doing this for a while. It’s idea, then Illustrator, then Photoshop, the Coda/CSSEdit. Great workflow that has all the speed and advantages of vectors, but lets you create those 1px tweaks that we all love.

  44. 46

    It’s funny how someone actually manages to write about “why we don’t use a program, intended for print-design, to make rasterized web designs” hmm..

  45. 47

    I know someone who isn’t winning an Apple Air.

  46. 48

    photoshop or fireworks – illustrator os for illusrations and logo’s, use applications for what they were made for. Photoshop for designs, Fireworks for web site mock ups, saves you hours by being able to link navigations between pages etc…

  47. 49

    @Matt Wilcox: All is said… I totally agree and I will refuse to code an webdesign made with Illustrator…

    Illustrator = logotypes, pdf generation and print
    photoshop = web, photography (among some more)

  48. 50

    I would like to comment on the above who have said Illustrator is not pixel perfect – it is if you know what your doing. The reason graphics do not appear pixel perfect or blurred when exporting out of illustrator is because the vector graphics and not sitting on an exact pixel co-ordinate. i.e. If a point is sitting at say 10.00 it will be pixel perfect, but if it sitting at 10.2 then it will blur. Its simply a case of setting up your canvas and grids correctly in the first place.

    We have just finished building a huge website in Illustrator and the graphics online are pin-sharp. However our next project website we are now building in photoshop. I am not defending illustrator just pointing out its all about using the right tool for the right job.

  49. 51

    From my experience taking an Illustrator design and turning it into HTML and individual images is a pain in the arse. You can’t export small segments or elements of the design down to the pixel like you can in Photoshop.

  50. 52

    Wow, a LOT of comments on this short, yet insightful article. I see a lot of strong opinions in multiple directions. I am part of a web design company, and we have some guys who like working in illustrator, and some in photoshop; and thanks to CS3, without much effort, we can go seamlessly between the two. I have tested fireworks and found it to be effective, but haven’t used it enough to get used to it yet. I personally use illustrator for most of my web design, and, as was mentioned above, if you use the right settings, and thanks to the crop area tool, you can “Save for Web” with pixel perfection!

    I believe it’s the individual designer’s preferences and tastes, but let’s just make sure we stay open to the opinions of others and not think ours is the only right way (as was already mentioned).

    Also, @Nick, there is an article contest going on, and whoever can get the best reviews for their article will win a nice prize, hence of the short articles. Great comments guys,



↑ Back to top