Designing Websites In Photoshop Illustrator?

Advertisement

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 stone 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

This post is one of the finalists of our guest author contest. 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.


↑ Back to top

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

    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…

    rbtb

    0
  2. 2

    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.

    9
  3. 5

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

    0
  4. 6

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

    0
  5. 7

    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.

    0
  6. 8

    Hey.

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

    0
  7. 9

    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.

    Daniel

    0
  8. 10

    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.

    0
  9. 11

    “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?

    0
  10. 12

    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:
    http://www.themcollective.com/

    - 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.

    Cheers

    0
  11. 13

    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

    2
  12. 14

    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!

    -2
  13. 15

    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

    6
  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.

    0
  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.

    1
  16. 18

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

    0
  17. 19

    Ever heard of Fireworks???

    1
  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.

    0
  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.

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

    3
  21. 23

    «pixel preview»

    does anyone know if Corel has this feature Like illustrator?

    Thanks

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

    0
  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.

    0
  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.

    0
  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.

    0
  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.

    0
  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.

    0
  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.

    0
  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.

    0
  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…

    0
  31. 33

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

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

    0
  33. 35

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

    0
  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.

    0
  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)?

    0
  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 :)

    0
  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.

    0
  38. 40

    Fireworks!!!!

    0
  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

    0
  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. :(

    1
  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.

    0
  42. 44

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

    0
  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.

    0
  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..

    0
  45. 47

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

    0
  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…

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

    0
  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.

    0
  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.

    0
  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,

    -Joshua

    0
  51. 53

    This is a really bad article, I know it’s probably for the competition but it is detrimental to Smashing Magazine! Because it’s on Smashing it looks like they’re presenting it as a proper article. Also the reputation of Smashing gives the article credability when it deserves none.

    The whole premise of this claim is that it’s easier to look at your designs in illustrator!

    (1) I don’t see how it’s easier at all unless you’re not very good in Photoshop.
    (2) It’s not really a very good reason to switch to using illustrator.

    It’s easier to resize and fast to move stuff!? These extravagent claims aren’t even supported in the article.

    A bad workman blames his tools.

    1
  52. 54

    when i got to the SM home page and saw this blurb, i thought wow, this is the winner. but it falls completely short in being anything actually informative. i wanted screen shots and examples of how they used illustrator or examples of how a site could benefit from illustrator, not a metaphor about polishing stone.

    0
  53. 55

    Guys, this is extremely interesting discussion for me as a web design amateur. Could someone actually write some overview of “best practices” how a web can be done? I always thought I have to do a design in Illustrator and then when I am happy with it (proporstions, colors, fonts), redo it in HTML+CSS. I always thought Photoshop is more for editing something rather than starting with white canvas. Am I completely wrong? Thanks very much.

    0
  54. 56

    Michael Thompson

    August 14, 2008 5:32 am

    Anyone still building designs in Photoshop needs to be taken out back and shot — it’s not 1997 anymore, and you can be pixel-precise in Illustrator with a slew of other, better tools meant for building designs.

    0
  55. 57

    Designing web pages in Illustrator seemed like a very foreign concept to me until I saw one of our new designers do it and see how wonderfully efficient he is. His documents looked much like the canvas screenshot in this article.

    The problem is that I’m just not familiar with Illustrator as a tool – a problem I’m working on. I understand photoshop very well, so the likelihood of me trying this out is very slim unless I’m absolutely forced to do it.

    So I can see why there are some negative comments here – for people used to using other non-vector-based tools, saying “You can do this in Illustrator, too” seems strange. But I can understand Andy Brown, too, wanting to wave his hand up in the air a little bit in and say, “Hey, this tool actually has a lot of value for what all you people do for a living!”.

    I appreciate him doing it – and perhaps we will begin to see a few more illustrator tutorial and tip sites to balance out the immense multitude of photoshop ones out there.

    1
  56. 58

    I have used Photoshop, Illustrator and Fireworks. I prefer Fireworks.
    But it all depends on what look you are trying to accomplish.

    0
  57. 59

    ahum… fireworks…

    0
  58. 60

    I think this article turned out to be a great article with the comments. Could have been posed as more of a discussion starter though.

    0
  59. 61

    Personally I prefer a mixture of Photoshop, Illustrator and Fireworks.

    For quick prototyping I’ll knock something up in Fireworks, refine in Photoshop and then create details or graphical features in Illustrator.

    The question ‘Why use Illustrator instead of Photoshop’ seems a bit silly to me. You wouldn’t use a screwdriver to hammer a nail in, but you might use a screwdriver *and* a hammer to build a bookshelf. A good designer/developer/craftsman asses the tools available to him and decides which is going to be the most efficient for the job in hand.

    As for the quality of the article, it could have been interesting if the author had actually gone into any sort of detail, instead we get little more than a twitter.

    0
  60. 62

    Uh…that’s it?? I thought there would be an in-depth look at how to do this in Illustrator. Did I miss something?

    0
  61. 63

    @Michael Thompson

    Pfff…don’t be ridiculous.

    0
  62. 64

    An Illustrator tutorial might of went somewhere with this one, or maybe the file used to create the screenshots and some explanations on how it was created. Currently I use Illustrator to resize vector art for designs created in Photoshop, that’s about it. This article is no incentive to have to learn a new tool, it could of been though. Starter templates or something would of been usable maybe. Nice try.

    0
  63. 65

    …mmh illustrator maybe good for flash design, but if you use illustrator to get faster to resize move etc… USE FIREWORKS !!! :) it’s made for this :p

    0
  64. 66

    “However, if you try doing wireframes in Adobe Indesign, you’ll be flying. It’s even quicker.”
    +1 on this, Indesign is great for doing wireframes quickly on multiple pages, then just export to a pdf.

    I can’t really follow the logic of designing webpages in illustrator, especially if you’re going to bring it into photoshop eventually. The only positive is that you can select all elements with the same color. PS offers far more design flexibility within one program. Many developers expect .psd files anyways.

    Would anyone care to post some examples of websites they’ve designed primarily in illustrator? I’d be interested to see the type and quality of these designs.

    0
  65. 67

    Hey !

    what about FLASH ??

    does anyone use it?

    0
  66. 68

    Yeah. It’s called Fireworks.

    And to the poster who uses Corel Draw – They still make that program?

    0
  67. 69

    Yeah, kind of like this article; it was over in a flash.

    0
  68. 70

    Michael Thompson –
    You know nothing.

    -1
  69. 71

    I am sure Illustrator is useful for site ideas but I use Photoshop to design sites because of layer comps (which I find very useful) and pixel perfection. I suppose Illustrator may be useful for different “sketches” or comps.. but yes this article is too short. What are more pros v. cons of using either?

    0
  70. 72

    Should have been a list post, “10 reasons to use Illustrator instead of Photoshop for your web designs” or similar. That way we’d have more content and more ideas. Could have been a good post, but sadly underwhelming due to lack of meat :o)

    0
  71. 73

    It’s not that Illustrator is better. It’s just different.

    0
  72. 74

    Aren´t there other tools for specifically designing websites? I’m talking about tools like Azure, or ConceptDraw, even Visio or Omnigraffle. They are more for doing the wireframes, conceptual UI, site layout/map, etc. What are your best tools for prototyping a user interface for a complex site, so the client can visualize it before it’s built, and perhaps even for including sample data? THAT would make a good article.

    0
  73. 75

    If you are using illustrator CS3 and have the welcome screen activated, just click “Web Document” under the “Create New” section and illustrator will present you with a dialog that will let you select the document size (in pixels) and all the other options that Daniel listed.

    0
  74. 76

    I switched to Illustrator a couple of years ago. I find it easier to get nice clean lines, and position things more accurately. If you start designing the site with the preview mode set to Pixel Preview it’s very simple to ensure the pixels are aligned correctly.

    Can’t really comment on Fireworks as it’s a long time since I’ve used it, but I love designing in Illustrator and I’m sticking to it.

    I do think you should use whatever method or program works best for you though, and that there is no correct program to use.

    0
  75. 77

    @Drewl

    I read it. But anyone who works in a small to medium agency, and works on projects with short deadlines, will also know that once you’ve got a look & feel down, that’s the program it stays in. You’re not going to re-create all of those elements again in a bitmap package if they exist already in vector. I say start as you mean to go on.

    Unless you are certain you have the time and budget to re-do the thing from scratch again…

    0
  76. 78

    Doesn’t anyone use MS Paint to make websites anymore?

    0
  77. 80

    k I agree that illustrator is not the final tool for webdesign as it’s a vector illustration tool BUT there are some things that I use it for:

    Creating icons in illustrator and bringing them into photoshop as smart objects – makes sense as you can resize them and modify them quickly over multiple documents

    Creating or modifying logos – smart objects

    Doing any type treatments that photoshop can’t handle.

    I would steer away from actual layouts though.

    0
  78. 81

    I agree with the lack of direction/shortness of this article but it has sparked a very interesting dialog in the comments. Personally I am more comfortable working in Illustrator than I am with Photoshop or Fireworks, that is why I use it for web-design. Whatever tool you can get results with quickly and efficiently, that is the right tool for the job.

    0
  79. 82

    People saying Illustrator is a tool for print design are stuck in the dark ages. In the last few years it has become as much a web design tool as a print design tool.

    Look in your menus people. Turn on Pixel Preview. You can see everything in raster while you work. Turn on snap to pixels and you won’t get blur-inducing anti-aliasing. Set your rulers to pixels and it will be every bit as pixel accurate as photoshop.

    This article fell down by not completing the loop and saying HOW you can work in Illustrator to produce sites. In the end it’s just another tool. People use what they prefer. Illustrator is now a viable option. If you take the time to learn about the web-production focused enhancements Adobe has made in the last few versions.

    0
  80. 83

    What you can say me about the HTML exportation?

    0
  81. 84

    We’ve been designing website in Illustrator for years at our studio. It’s a lot faster to edit and update layouts; I highly suggest it. In fact, I’ve been meaning to post a detailed blog about it for quite some time… this just might be the time to do it. http://www.MercuryState.com

    0
  82. 85

    I’m a professional web designer and I always use illustrator to mock my designs and create complex vector elements for it and I am just as good with Photoshop.
    It comes to a surprise to me that so many people are so furious about this article – most don’t seem to know Illustrator enough to make the comments.
    Also, I didn’t see anyone mention the fact that you can paste an Illustrator image into Photoshop as a smart object and then have all the benefits of both.
    I can create my vector files much much quicker with illustrator, then paste it into photoshop and do whatever other effects on it that illustrator lacks.
    I have just created an entire social networking site with all its graphics/icons/logo and everything using Illustrator and Photoshop and I couldn’t have done it without illustrator.

    0
  83. 86

    Don’t ever mention using fireworks to create web pages! If you dont know css/html you shouldn’t be making web pages in the first place.

    1
  84. 87

    I always start w/ Illustrator, it goes fast and you can get the ball rolling, then once yr at a point where you want to move further w/ a design, you can export and save as a layer PSD. so great!

    0
  85. 88

    I agree with Nick ^^. The quality of the articles recently (including this one) is leading smashing magazine down the crapper. Hope they can pull out of this new trend.

    0
  86. 89

    @ Joshua – forgot about the contest. Still, I think several articles shouldn’t even qualify for being a finalist. However, it can’t be a contest without some poor entries.

    0
  87. 90

    yeah

    WHAT ABOUT FLASH?

    0
  88. 91

    Daniel van Ginkel

    August 14, 2008 9:31 am

    I’ve designed almost every website I make, correction… EVERY website in illustrator or indesign. Illustrator is just so good to use.

    Too bad you didn’t tell us about anything else. It’s like saying you can drive a car to go to work but you can also take a bus and then not telling us where to get in the bus and how the buis works.

    So far all these articles dissappoint me.

    0
  89. 92

    I prefer designing in Illustrator over Photoshop. Once the design is finalized I choose Export>PSD. If you organize everything well with layers and groups the design converts flawlessly and is easily editable (for the last minute client changes) in Photoshop. I have also noticed a slight difference in quality if its exported at 300dpi and then converted to 72dpi once in Photoshop.

    0
  90. 93

    too short….do some more research then try again.

    i swear ive read an article like this before…except longer

    0
  91. 94

    You’re absolutely correct. I’ve been using Illustrator to conceptualize rough layout designs and even build vector outline shapes for later enhancement in Photoshop for years. While Fireworks is a powerful tool, the UI is clunky for many conceptual approaches and Illustrator is great for focusing on the layout before getting to the details.

    0
  92. 95

    I totally agree with you!

    0
  93. 96

    Fireworks! You might as well use Microsoft Paint if you are using illustrator or photoshop for webdesign. If you want precise design, use fireworks.

    -1
  94. 97

    Where is the article? All I see is a title and a preface …

    -1
  95. 98

    Teach us how to fish, don’t just wiggle that salmon in front of my face and lick your lips.

    How?
    What?
    Tips.
    Bait…

    1
  96. 99

    Fireworks people. It was designed for designing and slicing / exporting web graphics. Photoshop was built to modify photos (for print) and it’s great for that purpose. I set up layouts in Fireworks, and usually use Photoshop to enhance any key elements / imagery.

    Illustrator? Logos. Vector images….illustrating

    0
  97. 100

    I aways start my projects on illustrator, but i usually work with the photoshop in parallel, using it in pos production. Illustrator is 90% of my work life :P

    I feel more control of color and forms, and any ajustments are done more easily.

    0
  98. 101

    “It’s not that Illustrator is better. It’s just different.”

    … Different … As in “meant for drawing illustrations”… I couldn’t agree more with Mike. Use Fireworks! Do you know how much work it is for a production crew to build out a site that has been comp’ed in illustrator? Especially when things aren’t on exact pixels? Especially when It is a single artboard with stuff scattered all over the place with no central coordinate system…

    I missed the August 5th deadline, but I might still submit my article anyway… “Top 10 mis-uses of Adobe Illustrator.” How to get your web designer to design with something actually useful to the site builders

    0
  99. 102

    Ive always use illustrator for designing websites, its faster, lighter and easier to work with exact pixels and geometric forms, and yes, you can compare your layouts on the same canvas!!
    once the design and layout its done, i use photoshop for the final touch, backgrounds and fine details.

    0
  100. 103

    Just read through the rest of the comments – surprised nobody mentioned the “multi page” and “shared layers” feature of fireworks – Which is in my humble opinion a considerably better workflow than using illustrator with a giant artboard and no common coordinate system between pages.

    Especially when it comes time to batch produce elements of the site design from different sections – I.E. If you have a “hero spot” with different images – you can batch export that “slice” from every single page as a unique image.

    Its incredibly handy.

    0
  101. 104

    Having used all three (PS, Illy and Fireworks), I use prefer illy because of the freedom and speed it gives me to layout and design. PS is good for finishing and fireworks is great for slicing up for build.

    Horses for courses. Ultimately, it’s the end result that matters. And all three will get the same results if your design is strong enough.

    4
  102. 105

    I prefer to start out my initial designs in PowerPoint – not only is it powerful but it’s easy to use and when it’s time to present the design to the client it’s already in a presentation. Once it’s time to build though a little extra horse power is needed so I drop it into Publisher to put on that extra polish.

    -27
  103. 106

    Comment 15 – “Mortens” note about having to redo stuff is a key item for any web design/development team to consider regarding workflow and speed. I can’t tell you how many times I’ve had to “redo” stuff that was comp’ed in illustrator CMYK documents because artwork placement was off, and colors were in a different space…

    The issue that all designers should consider is that if you really want to control the final output of your design – designing your site in illustrator will give you a false sense of how “real web sites” will render at least three key items:
    1. Font Rendering, Kerning, Aliasing, Weight
    2. Anti Aliasing of line art and shapes
    3. Color Rendering

    So you are essentially designing in an “artwork” application that will ultimately need adjustment in final build – and thus creating an extra step in your workflow… and an extra cost in build time and review. It’s just a bad idea all around from the guy who writes the checks, to the designer who is super picky about having builds be exact replications of their ideas.

    The problem with Illustrator’s “pixel preview” and “snap to pixel” is that if the designer doesn’t start with the document that way – then it is impossible to get those elements to snap to real pixels. I.E. If the line is on 10.93 pixels, and you turn on pixel snapping – it will move to 11.93 pixels… or 9.93 pixels…

    And then there’s a whole separate issue about overlapping shapes with clipping masks that don’t let you “click through” the masked area to the shape below… Not sure how this one made it through usability testing.

    3
  104. 107

    I’ve had colleages bag me about using Fireworks, but now they use it as well. Haha

    Fireworks ftmfw!

    0
  105. 108

    Just to add to the din of the other voices clamoring “Fireworks!”, I’ll add my two cents. This is an excerpt from an article I wrote on my website, MagnateInteractive.com:

    “…Hand-in-hand with reusable assets is using the right software for a given task. Before being introduced to the proper way to use Fireworks I did all my website layouts using Illustrator, with further refinements in Photoshop. But Fireworks combines vector and raster methodologies, meaning that unless I have serious image editing to do in Photoshop, I really only need to have one program open for wireframe roughing, planning content flow, creating image slices, and all but the most involved photo retouching. Complex gradients, patterns, and shape editing are a breeze in Fireworks, and I believe that no matter how fast a web designer is at the Illustrator-Photoshop-Shuffle, using a single program designed to efficiently do both is an order of magnitude faster.”

    1
  106. 109

    To everyone who’s laughing with Coreldraw I can say it’s still alive and kickin’ I’ve been using Coreldraw since version 3 and I must say Illustrator can’t beat it! Of course, many of you love Illustrator so much and will laugh with me because ‘Coreldraw is so unprofessional’ but you probably haven’t had a look at it recently. It has much better bezier node editing features, the layout is more customizable and usable. Coreldraw used to be the underdog, and still is, but it’s an awesome program and I miss it on a daily base (I’m using Illustrator at this moment because we bought the Adobe Suite at work).

    1
  107. 110

    @tantalic – Best comment yet. Although a real designer would use Keynote. :)

    2
  108. 111

    Tantalic exclusively uses Powerpoint because Keynote Files have issues with Subversion.

    0
  109. 112

    How about firework?

    -1
  110. 113

    Aargh!!! Stop writing words for the sake of writing words!

    0
  111. 114

    Yeah i use flash for web layout design

    -4
  112. 115

    For those who didnt read the article, this psot is an eye opener, letting people know that they can design in illustrator, it even says in the post

    ” 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.”

    its jsut one of those things, its a technique that could be used to create quick mockups and layout,

    any way i was nodding my head after i read it

    1
  113. 116

    I’ve been using illustrator to do weblayouts for years now, and love it. I’ve always found the font tools in photoshop to be slow, tedious and downright annoying. While illustrator’s type tools are fantastic. Furthermore, the pixel ‘issue’ disappears when you use pixel view and snap to pixel.

    2
  114. 117

    I come from a print background so I am very comfortable with Illustrator and Photoshop. As a few have mentioned before I use both, each have a distinct purpose. I usually use Illustrator for the original client comps simply because when printed out they look much cleaner. As for the bitmap images that must be used I use high resolution photoshop files and import them into Illustrator. When it comes time to produce though, it all gets done in Photoshop. I’ve tried to use Fireworks more than a few but I have just never “got it.” I can’t discount Fireworks though, just look at the work that Jon Hicks does with it.

    0
  115. 118

    I recently had to create a mock-up for a website redesign, and for the first time decided to use Illustrator. “I was pleasently pleased with the whole process”. I found Illustrator to be faster and simpler to use than Photoshop. I guess what I liked the most was being able to quickly drag an element to and from the pasteboard, also the fact that resizing vector graphics does not cause fuzzy images.

    After the mock-up was approved we were able to cut the graphics out of Illustrator and get accurate measurements for our CSS.

    I will certainly use Illustrator for web design again.

    3
  116. 119

    And why not use open source software such as Inkscape? I do all my website mockups in Inkscape — costs no money and works just fine.

    I can also store all my source files in a Git repository and have a Makefile make the final images for the website straight from the mockup.

    1
  117. 120

    Why should you design in Illustrator, if you can use Fireworks? True, seems like a print designer wrote this article… Is this Smashing Magazine or a student blog?

    -7
  118. 121

    Its obvious that you don’t know much about Illustrator if you think that you shouldn’t use it for designing in web… there is a pixel preview and you have to make sure that you snap to pixels

    1
  119. 122

    Some webdesign with illustrator.
    Flairbartender.nl
    Cult.nl

    0
  120. 123

    Illustrator is usually better for the whole process in my opinion.
    But as mentioned, it has it´s cons.
    None of the solutions really blow me away though.

    0
  121. 124

    Well I designed the last webpage whole in illustrator. The next thing was plain html and then css over it from scratch. The images for download buttons and other visuals were imported from ai file to photoshop and then saved for web to reduce the size. I really do not see a big problem with using a vector program, if nothing else I can move and swap things faster then in photoshop and also cmd+alt+y gives you a pixel preview for everyone that says you can not see it properly.

    0
  122. 125

    The only viable debate is between Fireworks and Photoshop and then it just comes down to preference.

    This article shouldn’t have even made it onto Smashing.

    You only need to look at http://www.the-media-collective.com/index.php to see that the writer has no authority on web design.

    0
  123. 126

    this a good example where the most interesting is not the article but the comments!

    1
  124. 127

    All applications mentioned CAN produce good pixel accurate results if you know how to configure them to do so.

    I myself used to use photoshop and illustrator but then I discovered Fireworks. The best of both worlds in an app specifically designed to create graphics for pixel based medium [monitors].

    All the tools are easir to use /quicker to get at and very rarely do I miss any of the things I thought I needed in photoshop…and most of these are in firworks anyway…just in a slightly different way.

    Bring on CS4 with its in context symbol editing, type styles, new font engine and xhtmt/css export for quick prototyping. GIVE IT A TRY..oh but don’t try to print anything from it…it sux for this

    0
  125. 128

    I always use Illustrator to design websites, but thats because I am better in Illustrator than Photoshop :)

    0
  126. 129

    I think it’s hilarious that people are claiming Fireworks is more “precise” than Photoshop. Yeh, ok how’s that…

    Listen – if you’re good at what you do – you use the tool that works best for you. If Illustrator is the tool you can work best with – great. If it’s Photoshop, even better. If it’s Fireworks – fine. Doesn’t make one or the other “better”.

    I don’t hate Fireworks – I just don’t think it’s the right tool. Plus I find most people who use fireworks to be hacks who can’t do their own coding. Fireworks is just a step above Paint Shop Pro in my opinion.

    Photoshop is a great tool – you can do vector artwork. You can do photo compositing/editing/retouching. You can design page layouts. Logos. Not to mention I find it’s tools to be more intuitive than either fireworks OR illustrator.

    But, again – that’s my opinion. Doesn’t make it the right one.

    0
  127. 130

    #123 – Bring on CS4 with its in context symbol editing, type styles, new font engine and xhtmt/css export for quick prototyping.

    What? Are you serious? Never, ever use any applications xhtml/css export engine (image ready, or fireworks – ANY). They are inaccurate – write nasty code and are pretty much worthless even for “quick prototyping”. What’s the point of having a prototype that writes shit code that won’t look the same way as if you handcoded and sliced it to begin with?

    0
  128. 131

    PIXEL PERFECT = Simply go to View > Select pixel preview and hey presto pixel perfect resolution preview and as long as you set your units to pixels and keep all elements on a round number (ie: X= 118px not x= 118.327px) and the object is also a full round number it all works brilliantly.

    And its so much quicker to move things around I abandoned photoshop to layout web pages years ago, don’t get me wrong a lot of the pages I design have got lots of linked psd’s to ensure I get the right effect for backgrounds, buttons etc – but illustrator is far better for the web layout

    I only wished illustrator handled images like indesign does but you cant have everything I guess

    0
  129. 132

    i’m using fireworks and Ilustrator when i need vector graphics. Thanks to Adobe it’s so easy to work with vectors in FW. I think – Photoshop is for hard photo editing, this is not for web design (layouts, rapid prototypes etc.) No element libraries in PS! :)

    -1
  130. 133

    Photoshop is the primary web design tool. I’ll possibly make a genarlised statement but from my experience the majority of people who prefer Fireworks like it because it creates the html for them because they can’t write html/css themself which is extremely bad practise.

    0
  131. 134

    I do all my designs in Adobe InDesign

    0
  132. 135

    I’m sorry but this article was useless. There was more idea and explanation in the title more then the article. I’m not one to complain but really it was just a waste of time. I’m one who doesn’t use Illustrator and would of loved to seen why the writer thought this way.

    1
  133. 136

    Fireworks is the best for webdesigning ;)

    0
  134. 138

    I’m also a big fan of Illustrator for web design. If you set up your workspace in pixels as previously mentioned, it can be a very powerful tool. I still use Photoshop and Fireworks to finish, but always start with Illustrator.

    0
  135. 139

    What’s with the recent updates lately? They seem very short and weak.

    Did this magazine get a new webmaster or a new management or something?

    I am very disappointed, this was my top website.

    What is happening?

    1
  136. 140

    Gonna join in w/ the fireworks fanboys. It was crap when i first picked it up 8 years ago, but it has matured a lot, especially with the concept of Pages. Handles type like a dead wildebeest (read: it basically doesn’t), but all you need is Helvetica anyway, right ;-)?

    0
  137. 141

    Edouard Duplessis

    August 15, 2008 11:10 am

    soooooooooo true

    0
  138. 142

    Thankyou Matt Wilcox, yes any designer worth a damn knows pixel perfect cannot be created in illustrator. Infact you have to clean most conversions you make in illustrator up before you take it into photoshop.

    0
  139. 143

    I design all websites in Illustrator – it’s allway better to have the vectorways for scale after ideas changing. If you work with the Pixeloption in Illustrator – you get a good result after export it to PSD. And you can use all psd-filters in Illustrator and much more.

    0
  140. 144

    Illustrator for Web design ? No way… Often designers are using tools not because this the best tools for a specific purpose, but just because years of experience on it. And some people are very conservative.

    As others says the best tool for web design is Fireworks. This is the only professional software done for the web design in mind. It’s such a pain to do web design with Photoshop (sometimes I must do it because the is a client request or a developper request and it’s a (poor) standard but it’s such a big waste of time when you have to deal with ton of photoshop layers) and have lot of text inside your pages.

    Fireworks CS4 will be awesome (and yes finally we will be able to import an EXPORT without artefacts the infamous photoshop files resquested by web dinausors).

    Just check the Lynda.com videos :
    http://movielibrary.lynda.com/html/modPage.asp?ID=590

    There will be an other contender : Microsoft Expression Design. Beautuiful creative vector paint. But for the moment you are not able to import Photoshop layer files, saddly so as said right now it’s still a Photoshop world conformism.

    I’m glad to see that the vast majority here thinks that Photoshop is not the solution for web design.

    1
  141. 145

    One thing that is important to remember is that not all website designs are equal. I primarily use Illustrator because I am familiar with the tools and can do things twice as fat as in photoshop…but not everything. I find myself selecting between photoshop and illustrator based on my initial concept. For designs that will require lots of special effects that are more laborious to do in Ill, I choose photoshop. If its a vector heavy/image light design photoshop will take much longer.
    Bottom line: If you know how to use both tools reasonably well you can save yourself a ton of time and effort by choosing the right application for the job, and knowing when to export. :)

    0
  142. 146

    Illustrator is great for wireframing and IA even if your knowledge of the software is limited. To an experienced user it is a good flexible web design tool.

    Keep in mind the various futures of the web, and the benefits of vector flexibilty. Consider the path MS is taking with their MS Expression range, WPF, XAML and so forth… also Flash and the developments of Adobe Air products.

    With the loss of Macromedia, perhaps Photoshop and Fireworks will be merged into a single App, with their strong points merged. Maybe InDesign will develop into a decent multipurpose print and web design package in the future… combining graphics from Photoshop, vectors from Illustrator, it’s own superb layout & type abilties, perhaps slices from Firework, interactions and animations from Flash and while combining these, also allowing for flexible output.

    I’m rambling, I know, but don’t allow yourself to get too caught up in one way of working. The Internet Industry is not a good place to damn alternative options without proper consideration and analysis.

    0
  143. 147

    What’s even worse is this so-called article was a finalist in their guest author contest. Maybe you have to be smashed to understand it.

    -1
  144. 148

    Photoshop is the king of photomanipulation and photocreation. Illustrator is the king of “from nothing” creation. I work for a webdesign corp. and I use Illustrator to create the layouts of complex sites. It’s brilliant. I have a lot of space to move my elements and to combine these ellements. The selection process it’s simple.

    1
  145. 149

    If you’re on this track then why not use InDesign? If you want a program with precision and more robust guides/grid setup…

    It’s all going to funnel through Photoshop in the end to slice the graphics appropriately and separate the images for content purposes.

    0
  146. 150

    to each their own

    0
  147. 151

    Hey. I think AI does a great job to in doing up any type of design and being able to compare it next to each other kinda like you do when you put then up next to each other on a wall or on the desk. The fella who mentioned below about AI not being worth a crap in pixel based artwork. That is true about AI being vector based but they do have the feature of turn the document into pixel based. Very simple to do, it’s just a simple thing to do to help not have the problems mentioned below. One day, adobe should just combine the two programs and make an ultimate application. Great post but short.

    0
  148. 152

    i agree with ian weller, just use inkscape :) a really really good piece of software. plus it’s open source (thus free). great to make fast realistic mockups of websites.

    or simply good ‘ol paper and pencil.

    what’s the point of drawing sites at a pixel level? why waste time? remember YAGNI: it’ll change anyway.

    and then you will have to pass it all to xhtml/css.

    0
  149. 153

    thats’s right! Fireworks rocks!

    0
  150. 154

    One word: Fireworks!!!!!!

    0
  151. 155

    I would never use it for splicing.

    design mockups (which is what this article is about) is a much quicker and more efficient way to work. Then take that stuff into photoshop for splicing and converting to web. I design mostly in illustrator, photoshop is really just used for photo editing.

    1
  152. 156

    Hi everybody, i use both illustrator and photoshop to create webdesign.
    I use Illustrator to do compositions just has InDesign does it for the print, every photo or pixel based work has to be done in photoshop. I Think illustrator is the best for working with text and structure elements or patterns, but Photoshop has a realy better pixel rendering algorithm and just render what you design. In the other hand, you dont mess with layer in Illustrator : you just have to deal with objects and designing vector-based forms is realy simple and intuitive…

    I think both are complementary and it would be interesting to just do a survey to know witch is the most used application to design web pages.

    0
  153. 157

    yo peeps, I always work with illustrator for webdesign. I read that illustrtor isn’t webbased, cause of the pixel thing. But if you’r clever you can work around, for example you can use the view in pixels in combination with snap to grid (make the grid 1px) and outside strokes. And I think that if you work like that it’s even better than photoshop, at least it works for me. Just sharing my thoughts…

    0
  154. 158
  155. 159

    the thing is.. illustrator is fast, and for some things much more easier than photoshop.. but its not pixel perfect so you end up redoing whole design in photoshop anyway.. but for creative ideas why not..

    0
  156. 160

    As said above many times – why faff around in Illustrator? Firworks by far offers the best and quickest and most efficent way to knock up web layouts.

    0
  157. 161

    @ Richy S 130 – then in your experience you’ve only been exposed to people who haven’t got the necessary skills. Stop talking nonsense.

    0
  158. 162

    is this a *smashing* article?

    0
  159. 163

    Fireworks does everything I need and more.

    Bit of a short article.

    0
  160. 164

    I use Photoshop to design my websites to get them pixel perfect. I heard today that there is some web bureau in sweden that uses Indesign to design websites. Why?

    0
  161. 165

    CorelDRAW does it Better 8)

    0
  162. 166

    Um yeah, why use illustrator or photoshop…when Fireworks is designed specifically for web prototyping, layout and graphic creation. I’ve been a professional web designer for over 4 years and fireworks, hands down, is the best tool (for me) for web site design. I use Photoshop/Illustrator only when needed to do specific raster/vector work, but never overall site conceptualization.

    Absolutely wrong in my case.

    0
  163. 167

    Why not Fireworks??

    Fireworks is better than Ilustrator to design websites

    0
  164. 168

    I use illustrator for all my website designs; it is flexible, you can change anything, transport material. It is a breeze to take that small box out of there and cut it so it will be an transparent png.

    Sure there are still some things that photoshop is necessary for but i will probably keep on doing most of my site designs in illustrator.

    I am missing .ico in illustrator :( bigtime

    0
  165. 169

    I use Illustrator, when I´m finished I go to Photoshop and cut my images! :) So it´s perfekt.

    1
  166. 170

    For those interested in true Illustrator-based web design, contact Matthew Almand. His designs are 100% pure Illustrator. When I work with him on projects, it drives me nuts. I’m completely a Photoshop-technique web designer.

    0
  167. 171

    Illustrator is better than Photoshop

    0
  168. 172

    Daniel, that’s what you get as a 1px line when you check the list:
    http://mt14.quickshareit.com/share/1pxaabd5.png

    0
  169. 173

    Fireworks, guys!
    Amen!

    0
  170. 174

    Fireworks has these two worlds: Photoshop and Illustrator. long live to Adobe!

    0
  171. 175

    Well, for those of you thinking Fireworks is the wrong tool for the web, PLEASE, just go to Adobe’s site and read about its features. Do not hate it just because you don’t know it.

    1
  172. 176

    Fireworks works way better for me then illustrator of photoshop for designing websites.
    I tend to use Fireworks in a combo with either programs. But the main focus is on Fireworks for sure. If it was only that you can make dif pages in one document. But thats just 1 asset thats WAY better. Fireworks is not the best program in the world for fixing pics tho… but thats why its a good combo with Photoshop.

    go Fireworks! :)

    0
  173. 177

    There is another tutorial I came across at http://blog.rampprojects.com/?p=290

    It also has a link to download a vector’d ‘Safari Browser’ file.
    Seems to be in the same category as this one. The tutorial talks about how best to set-up illustrator for web comps.

    I think you could make a strong case for using illustrator for the heavy ‘visual’ lifting, maybe not the actual production. Hell, I dunno-

    0
  174. 178

    Photoshop people:
    Resizing elements in PS is a pain, especially when your assets are bitmaps, remember pixels?

    The advantage of Illustrator is that you can quickly make a sketch in no time and play with endless possibilities. Doing this kind of work in PS takes you about twice as long.

    Usually I prototype in AI and export to PSD and then apply final touches like saturation and other PS specific things.

    Tried Fireworks, but what I hate about it is that it does not accept ASE (color swatches for color sensitive situations), its symbols library can’t be used in other apps, does not play well with AI files.

    Illustrator is a much more flexible and robust application than PS for this kind of work.

    1
  175. 179

    For anyone reading this article:

    DO NOT SLICE graphics and type with Illustrator!

    The copy looks thinner and shaded when slicing with AI.

    You are better off exporting to PSD and then slicing from there.

    Beware: You need to remove things you don’t need in the PSD file, like crop marks, guides, invisible layers. If it does not let you export you need to copy and paste the layers’ contents to another layer.

    Even with AI quirks I love making graphics in AI and then to PS.

    1
  176. 180

    I’ve been using Illustrator to do web concepts for the last 4 years. I love the fact that you can have so many pages come together in one file – everything is reusable- everything is manageable – everything is scaleable and easily changeable. Whenever I need textures or things that photoshop excels in – i’ll bring it over but for the most part – i use Illustrator 80% of the time when designing for the web. It’s about time other folks realized the power behind Illy – it’s a fantastic program.

    BTW – photoshop rocks too don’t get me wrong – I use it a LOT – i just think it’s about time Illy get’s a little more recognition.

    0
  177. 181

    I have read your comments and came to one conclusion: for the web-page design use the program you master best – whether be it Photoshop, Illustrator, Corel Draw, or Fireworks. :)
    Considering that you have no practical designs on which you worked with above mentioned programs available, I would kindly ask you to attach to your comment a link leading to the web page you have designed and add which program you have used to do it.

    0
  178. 182

    I only just discovered this article. It didn’t tell me much, but the comments have been way useful. That’s what makes blogging so great.

    I’ve learned quite a bit about Illustrator and how to set it up to create pixel perfect websites. It made me laugh heaps when it was clearly explained how to do this but the Photoshop devotees still claimed it was impossible.

    What also made me laugh is how much this sounded like a Mac vs Windows vs Linux argument.

    The Photoshop folks are like the Mac users, totally unable to accept that anything could be equal or better.

    The Fireworks folks are like the Linux users, trying to convince the world that if only we’d take a look at it we’d see it is the best.

    And the Illustrator folks are like the Windows users, trying to get the other two to accept that their tool does actually do the job well.

    I’m a relative newbie to web design. No one told me which app to use and I didn’t have any print background to bias me, but I naturally gravitated to Illustrator because it is much more intuitive for layout, and web design is a layout process.

    For those chanting Fireworks, I’m sure you are right; however, for many folks, they’ve already got the other two, which often cost them an arm and a leg, and do the job just fine, so can’t justify spending another arm or leg. And if you designer on a tight budget trying to choose a CS version, Fireworks is the first to go, since you know you can do anything with Illustrator and Photoshop, so Fireworks just becomes a duplication.

    PS For those asking about InDesign, I have CS3 and it doesn’t support pixel based design nor “Save for web”, which makes it not so good for web design work.

    1
  179. 183

    Hey Matt, I’ve just started my first website design that will be handed over to a web developer to cut up. This article (and the comments) mashes together the exact same problems I’ve been having… I tried photoshop at first, and I’ve switched to Illustrator now… will do the final finishing in photoshop, but Illustrator just gives me so much more freedom. You can set the page increments to pixels and you can work in pixel preview, which basically looks the same way it does in Photoshop, the tools are just simpler to use. Doing it this way, do you think the anti aliasing and stuff would still be a problem?

    1
  180. 184

    I just discovered this article too. I have used Illustrator for years and will continue to use it for my web design. I use it in conjunction with PS and Flash. Each program has its own positives, but I have to say, clean vector images are hard to produce simply for me in Photoshop. I think it’s because I learned Illustrator so thoroughly so many years ago and have mastered it. I’m used to it now and it works for me. Other folks may have mastered PS and it’s those folks I turn to when I need something done in PS that I know can’t be done well in Illustrator. I think it’s a matter of mashing these programs together to get the very best websites we can make.

    1
  181. 185

    I’m stuck in print design and probably will never get a web job. So, yeah. Good to know if I somehow got a web job, that there are so many inflexible people who know the “right” way.

    Don’t worry in a year or two Adobe will come up with some new program that will make everything obsolete.

    2
  182. 186

    bunch of haters!

    1
  183. 187

    wow…what about in 2010? any new ideas???

    how about for the modern challenge?

    …Im trying to come up with a work flow that will let me design once and then adjust for different devices (web/mobile)

    I just spent 3 months on an awesome PSD design and now if I want to re-size for various mobiles I would have to re-do over half of it.

    0
  184. 188

    I tend to think it is more about workflow. Designing specific elements in Illustrator and than pulling them into Photoshop, for me at least, is a better approach.

    Additionally, in regard to being able to line up various designs. For Photoshop, I can just use layer comps and switch just as readily between.

    Than again, I come from a web background and not a print background, so it just may be a matter of taste. My 2 cents.

    1
  185. 189

    As neither a designer nor a photo guy but as purely the guy whose job it is to take a comp and either animate it in Flash or build it out in HTML/JavaScript, I prefer Illustrator hands down over Photoshop. Rendering out pieces is much quicker and if I need to animate perspective (requiring resizing pieces of the design) working with a vector is much faster.

    Frankly, I know designers love to get things pixel-perfect but a techie like me is probably going to have to make small changes anyway. Artistically perfect designs are nice but the faster the project gets built the faster the client can be invoiced. Better to get it to me in a format that allows quick selection, resizing, and rendering, than one that adds two hours onto the build.

    1
  186. 190

    Also, here’s my breakdown of Fireworks vs. Photoshop vs. Illustrator:

    Fireworks is great for optimizing and slicing images for the web, as well as basic little pixel fixes. It is not good at layout or advanced image manipulation.

    Photoshop is great at image and photo manipulation (hence the name), effects, and photo touch up. It is not as good at layout or ease of use for technical staff who have to build the design.

    Illustrator excels at layout and speed and ease of manipulating the pieces of a design. It is poor at image manipulation and effects.

    You can use any of these tools alone to build a website, but using all three of them appropriately is the best way. Now everybody STFU and go do something productive.

    [a]

    2
  187. 191

    I use illustrator for both print and web design. I agree that photoshop is a pixel based software and has a perfect image quality result but i like the freedom in using ai and how to manipulate vectors so quick. At the end i export files in psd format and play around in photoshop (effects,crisp typeface etc.) so as a result i use both softwares with very good results i think…

    0
  188. 192

    By now we know that there are more ways to view the web (also with various pixel density), which is why most designers have released their grip on trying to control precisely how the site will be seen by everyone everywhere in every scenario. Instead, the convention is to let people browse as they have chosen to browse, and provide a site that is itself as flexible as possible. That’s why I suggest rendering as much as possible at the level of the browser, and building the site as much as possible in programming languages. Moreover, it is the function of the site that visitors care about (or won’t care about). For example, the fonts in use, I suggest use “font attribute” in the markup, and sourcing a legitimate web font that is on your server because you have licensed it. That way, your text, all of it, is a set of words not images. These are then semantic elements that matter when using a search engine. You can even use CSS to create icons without using any images — not sure that’s the best method, but you can. The point is that I think we are moving away from what was called “pixel perfect.” It is like expecting viewers to calibrate their monitors and printers so that, should they print out a page from your site, the colors will match your company’s Pantone swatch. Not likely. And so on, and so on. And yes, they are exceptions that prove every rule. But look, check out Joomla actually. It’s just like a souped up version of WordPress, and frankly most web sites are, more or less, among the same variations. So there is a grid to support the most likely design choices. What you choose to put in, or how to define the styles, is up to you. Much easier to maintain. Then as we get into HTML 5 and CSS3 move on from there, Flash will go away. And if you want a movie, just shoot a movie and use Premiere or Final Cut to do post production, and embed the movie as an object. If you want social, then use ShareThis or simiar or check out jQuery for other functionality.

    Bottom line is that the division between designer and programmer is dissolving in web design, as it should. And these are not books on the web any more than a poster is a web site on the wall. Unless you want to make a touch screen poster, which would be really cool. Go ahead and prove me wrong, but do it by action.

    0
  189. 193

    Just one thing to know

    Illustrator = print
    Photoshop = web design

    It’s just not professional to use illustrator for web design.
    This makes the difference between good and bad companies.
    But whatever…

    -1
  190. 194

    I Love Illustrator !! :)

    1
  191. 195

    ms paint is way better u fools. one day u wil realise.

    it appears that most commenters dont know that you can snap to pixels in illustrator. hooray no antialiasing issues at all..

    2
  192. 196

    Itz informative but the article is too short.

    0
  193. 197

    I’ve used Photoshop but always felt that there was a more productive way to design sites. A buddy of mine cranks out massive volumes of mockups using Illustrator and has totally sold me on the idea; this article reinforces the idea. Thanks.

    0
  194. 198

    WRONG!!!

    Illustrator = print
    Photoshop = photo editing (it’s in the name…)
    Fireworks = web design

    1

↑ Back to top