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.

Advertisement
  1. 1

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

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

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

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

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

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

    0
  7. 307

    ahum… fireworks…

    0
  8. 358

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

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

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

    @Michael Thompson

    Pfff…don’t be ridiculous.

    0
  12. 562

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

    …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
  14. 664

    “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
  15. 715

    Hey !

    what about FLASH ??

    does anyone use it?

    0
  16. 766

    Yeah. It’s called Fireworks.

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

    0
  17. 817

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

    0
  18. 868

    Michael Thompson –
    You know nothing.

    -1
  19. 919

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

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

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

    0
  22. 1072

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

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

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

    @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
  26. 1276

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

    0
  27. 1378

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

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

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

    What you can say me about the HTML exportation?

    0
  31. 1582

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

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

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

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

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

    @ 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
  37. 1888

    yeah

    WHAT ABOUT FLASH?

    0
  38. 1939

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

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

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

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

    0
  41. 2092

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

    I totally agree with you!

    0
  43. 2194

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

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

    -1
  45. 2296

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

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

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

    “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
  49. 2500

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

    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

↑ Back to top