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

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

  1. 1 http://en.wikipedia.org/wiki/Tumble_polishing
  2. 2 http://www.smashingmagazine.com/2008/07/17/write-a-guest-post-and-win-apple-macbook-air/

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

Advertising
  1. 1

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

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

    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
  4. 454
  5. 605

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

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

    @ 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
  8. 1058

    is this a *smashing* article?

    0
  9. 1209

    Fireworks does everything I need and more.

    Bit of a short article.

    0
  10. 1360

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

    CorelDRAW does it Better 8)

    0
  12. 1662

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

    Why not Fireworks??

    Fireworks is better than Ilustrator to design websites

    0
  14. 1964

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

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

    1
  16. 2266

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

    Illustrator is better than Photoshop

    0
  18. 2568

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

    0
  19. 2719

    Fireworks, guys!
    Amen!

    0
  20. 2870

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

    0
  21. 3021

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

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

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

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

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

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

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

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

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

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

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

    bunch of haters!

    1
  33. 4833

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

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

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

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

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

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

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

    I Love Illustrator !! :)

    1
  41. 6041

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

    Itz informative but the article is too short.

    0
  43. 6343

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

    WRONG!!!

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

    1

↑ Back to top