Designing Websites In Photoshop Illustrator?
So you have done some initial sketches for the look of your new design. Now it’s time to develop these ideas. So let’s jump into Photoshop. Stop! Wait just a minute. What about Illustrator? That can do web-design stuff too, can’t it?
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.
robotobi
August 14th, 2008 1:02 amcould 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
Matt Wilcox
August 14th, 2008 1:07 amWhy 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.
Dexter Morgan
January 22nd, 2010 12:26 pmPIXEL PREVIEW
shawn
March 18th, 2010 10:18 amSnap to grid, noob.
Matt Wilcox
August 14th, 2008 1:08 amI left a comment, but after submit the page refreshed with no feedback whatsoever and my comment is nowhere. That’s annoying.
Maurits
August 14th, 2008 1:08 amDesigning websites in
PhotoshopIllustratorFireworks! Why should you design in Illustrator, if you can use Fireworks?Aaron
August 14th, 2008 1:09 amResizing 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.
Alex Holt
August 14th, 2008 1:12 amHey.
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 ;)
Daniel
August 14th, 2008 1:13 amI 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
Mike
August 14th, 2008 1:15 amI 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.
Cangu
August 14th, 2008 1:16 am“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?
bruno byington
August 14th, 2008 1:17 amyeah 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
gr8pixel
August 14th, 2008 1:21 amI 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
Stu Collett
August 14th, 2008 1:22 amIf 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!
Tom
August 14th, 2008 1:22 amComments 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
Drewl
August 14th, 2008 1:22 am@ 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.
Morten
August 14th, 2008 1:23 amFireworks 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.
Bjørn Johansen
August 14th, 2008 1:26 amYou should have a look at the «pixel preview» in Illustrator ;-)
Fixes all the concerns you mentioned.
Kai
August 14th, 2008 1:28 amEver heard of Fireworks???
Mário Santos
August 14th, 2008 1:30 amReally 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.
Bart
August 14th, 2008 1:36 amYou 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.
Daniel Sherson
August 14th, 2008 1:38 amI 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)
Cangu
August 14th, 2008 1:39 am«pixel preview»
does anyone know if Corel has this feature Like illustrator?
Thanks
Shuuun
August 14th, 2008 1:39 am#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!
jakub
August 14th, 2008 1:41 amFor 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.
Daniel Sherson
August 14th, 2008 1:44 amwhy 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.
h-a-r-v
August 14th, 2008 1:54 amI 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.
V1
August 14th, 2008 1:54 amWell 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.
NqyNik
August 14th, 2008 2:12 amThankyou 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.
shiido
August 14th, 2008 2:14 amI 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.
Daniel Janev
August 14th, 2008 2:18 amonly 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.
Thomas
August 14th, 2008 2:39 amCould 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…
Christian
August 14th, 2008 2:40 amWow, some strong, opposing opinions in here. All good though, I am motivated to check out fireworks AND Illustrator now. :)
Stevie K
August 14th, 2008 2:42 amThe article title doesn’t really work in Google reader, I sat there wondering what Photoshop Illustrator was before clicking through to the article!
serzz
August 14th, 2008 2:57 amI always design WEB page in Illustrator in combination with photoshop…. EASY.. :)
Tephlon
August 14th, 2008 3:00 amI 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.
Calum Brodie
August 14th, 2008 3:24 am100% 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)?
zhille
August 14th, 2008 3:26 amWhy 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 :)
Richard
August 14th, 2008 3:42 amI 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.
Cassiano
August 14th, 2008 3:46 amFireworks!!!!
JamieO
August 14th, 2008 3:49 amI 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
Nick
August 14th, 2008 3:50 amI 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. :(
Jon-Paul LeClair
August 14th, 2008 3:50 amI 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.
anti-pixel
August 14th, 2008 3:54 ami don’t understand the aim of this kind of article, sorry…
Marc Edwards
August 14th, 2008 4:42 amI 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.
silver sova
August 14th, 2008 4:43 amIt’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..
josh
August 14th, 2008 4:45 amI know someone who isn’t winning an Apple Air.
Rich
August 14th, 2008 4:51 amphotoshop 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…
Thibaut
August 14th, 2008 5:07 am@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)
Jason
August 14th, 2008 5:11 amI 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.
Brian
August 14th, 2008 5:14 amFrom 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.
Joshua
August 14th, 2008 5:15 amWow, 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
Richy S
August 14th, 2008 5:18 amThis 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.
heather
August 14th, 2008 5:25 amwhen 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.
Pepa
August 14th, 2008 5:29 amGuys, 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.
Michael Thompson
August 14th, 2008 5:32 amAnyone 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.
Tony
August 14th, 2008 5:38 amDesigning 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.
jr
August 14th, 2008 5:40 amI have used Photoshop, Illustrator and Fireworks. I prefer Fireworks.
But it all depends on what look you are trying to accomplish.
Sjeik el Tarek
August 14th, 2008 5:44 amahum… fireworks…
Brian
August 14th, 2008 5:50 amI think this article turned out to be a great article with the comments. Could have been posed as more of a discussion starter though.
Jackson Hyde
August 14th, 2008 5:52 amPersonally 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.
Doug C.
August 14th, 2008 5:52 amUh…that’s it?? I thought there would be an in-depth look at how to do this in Illustrator. Did I miss something?
Jackson Hyde
August 14th, 2008 5:54 am@Michael Thompson
Pfff…don’t be ridiculous.
ty
August 14th, 2008 5:56 amAn 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.
VaX
August 14th, 2008 5:59 am…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
Nate
August 14th, 2008 6:08 am“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.
Bruno Maiz
August 14th, 2008 6:17 amHey !
what about FLASH ??
does anyone use it?
nick
August 14th, 2008 6:20 amYeah. It’s called Fireworks.
And to the poster who uses Corel Draw – They still make that program?
Doug C.
August 14th, 2008 6:20 amYeah, kind of like this article; it was over in a flash.
nick
August 14th, 2008 6:21 amMichael Thompson –
You know nothing.
Jerlyn Thomas
August 14th, 2008 6:32 amI 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?
Dmitry
August 14th, 2008 6:52 amShould 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)
Aaron
August 14th, 2008 6:56 amIt’s not that Illustrator is better. It’s just different.
Marcelo
August 14th, 2008 7:00 amAren´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.
fagosu
August 14th, 2008 7:07 amIf 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.
Elaine Simpson
August 14th, 2008 7:10 amI 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.
Matt Wilcox
August 14th, 2008 7:12 am@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…
MS Paint
August 14th, 2008 7:15 amDoesn’t anyone use MS Paint to make websites anymore?
steve
December 21st, 2010 8:39 amhaha! i LOL’d
Peter Bishop
August 14th, 2008 7:40 amk 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.
Kevin Noonan
August 14th, 2008 7:51 amI 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.
MikeW
August 14th, 2008 8:02 amPeople 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.
dennisbrutus
August 14th, 2008 8:10 amWhat you can say me about the HTML exportation?
Merc
August 14th, 2008 8:16 amWe’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
Edward
August 14th, 2008 8:22 amI’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.
wade
August 14th, 2008 8:22 amDon’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.
Liz
August 14th, 2008 8:58 amI 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!
Jacob
August 14th, 2008 9:01 amI 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.
Jacob
August 14th, 2008 9:09 am@ 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.
Carl Selder
August 14th, 2008 9:25 amyeah
WHAT ABOUT FLASH?
Daniel van Ginkel
August 14th, 2008 9:31 amI’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.
Bill Biwer
August 14th, 2008 9:59 amI 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.
lauren
August 14th, 2008 10:03 amtoo short….do some more research then try again.
i swear ive read an article like this before…except longer
Nic
August 14th, 2008 11:04 amYou’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.
Marta
August 14th, 2008 11:10 amI totally agree with you!
David
August 14th, 2008 12:17 pmFireworks! You might as well use Microsoft Paint if you are using illustrator or photoshop for webdesign. If you want precise design, use fireworks.
Yuto
August 14th, 2008 12:33 pmWhere is the article? All I see is a title and a preface …
BongoBox
August 14th, 2008 12:42 pmTeach us how to fish, don’t just wiggle that salmon in front of my face and lick your lips.
How?
What?
Tips.
Bait…
Mike
August 14th, 2008 12:42 pmFireworks 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
Morbey
August 14th, 2008 12:46 pmI 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.
radScientist
August 14th, 2008 12:51 pm“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
jutujutu
August 14th, 2008 2:04 pmIve 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.
radScientist
August 14th, 2008 2:20 pmJust 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.