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.
Will Price
August 14th, 2008 2:22 pmHaving 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.
tantalic
August 14th, 2008 2:38 pmI 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.
radScientist
August 14th, 2008 2:38 pmComment 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.
Klaye Morrison
August 14th, 2008 2:59 pmI’ve had colleages bag me about using Fireworks, but now they use it as well. Haha
Fireworks ftmfw!
Matt Braun
August 14th, 2008 3:19 pmJust 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.”
Bart
August 14th, 2008 3:20 pmTo 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).
Matt Braun
August 14th, 2008 3:21 pm@tantalic – Best comment yet. Although a real designer would use Keynote. :)
radScientist
August 14th, 2008 3:30 pmTantalic exclusively uses Powerpoint because Keynote Files have issues with Subversion.
jennifer
August 14th, 2008 3:32 pmHow about firework?
Ian
August 14th, 2008 3:57 pmAargh!!! Stop writing words for the sake of writing words!
Harsha
August 14th, 2008 5:39 pmYeah i use flash for web layout design
Max
August 14th, 2008 6:48 pmFor 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
mark story
August 14th, 2008 7:46 pmI’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.
Davo
August 14th, 2008 8:44 pmI 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.
Shaun Whiter
August 14th, 2008 8:56 pmI 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.
Ian Weller
August 14th, 2008 9:11 pmAnd 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.
CyberGus
August 14th, 2008 10:26 pmWhy 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?
Josh Emerson
August 14th, 2008 10:32 pmIts 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
Gerwin
August 15th, 2008 12:17 amSome webdesign with illustrator.
Flairbartender.nl
Cult.nl
Henrik Kjelsberg
August 15th, 2008 12:39 amIllustrator 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.
Peter
August 15th, 2008 1:19 amWell 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.
Richy S
August 15th, 2008 1:48 amThe 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.
nosferatu
August 15th, 2008 2:16 amthis a good example where the most interesting is not the article but the comments!
Maak Bow
August 15th, 2008 2:18 amAll 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
Rob
August 15th, 2008 2:29 amI always use Illustrator to design websites, but thats because I am better in Illustrator than Photoshop :)
Lindsey
August 15th, 2008 3:09 amI 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.
Lindsey
August 15th, 2008 3:12 am#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?
Peter O
August 15th, 2008 3:35 amPIXEL 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
Edgars
August 15th, 2008 5:20 ami’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! :)
Richy S
August 15th, 2008 5:28 amPhotoshop 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.
Juan Pablo
August 15th, 2008 6:10 amI do all my designs in Adobe InDesign
Rob Cifre
August 15th, 2008 6:11 amI’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.
Benji
August 15th, 2008 6:58 amFireworks is the best for webdesigning ;)
fazal
January 31st, 2013 8:40 pmyou are right benji…
Patrick
August 15th, 2008 7:53 amI’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.
Sergio
August 15th, 2008 8:28 amWhat’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?
Eric Fields
August 15th, 2008 10:24 amGonna 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 ;-)?
Edouard Duplessis
August 15th, 2008 11:10 amsoooooooooo true
Joseph Maguire
August 15th, 2008 11:50 amThankyou 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.
Martin
August 15th, 2008 12:55 pmI 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.
clo75
August 15th, 2008 1:42 pmIllustrator 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.
JJack
August 15th, 2008 4:49 pmOne 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. :)
DaveK
August 15th, 2008 5:16 pmIllustrator 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.
Doug C.
August 15th, 2008 6:32 pmWhat’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.
Bijux
August 16th, 2008 3:04 pmPhotoshop 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.
Brian
August 16th, 2008 7:23 pmIf 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.
john
August 16th, 2008 8:01 pmto each their own
James Mabery
August 17th, 2008 7:43 amHey. 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.
francisco
August 17th, 2008 8:38 ami 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.
julian
August 17th, 2008 12:08 pmthats’s right! Fireworks rocks!
grigori
August 17th, 2008 5:28 pmOne word: Fireworks!!!!!!
Jeremy
August 17th, 2008 8:58 pmI 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.
reremoon
August 18th, 2008 8:58 amHi 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.
pieter
August 18th, 2008 11:13 amyo 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…
jimmy
August 18th, 2008 1:50 pmum…have any of the naysayers seen this tutorial?
http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-1-design/
danchez
August 19th, 2008 3:45 amthe 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..
Gavski
August 19th, 2008 3:45 amAs 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.
Gavski
August 19th, 2008 3:56 am@ Richy S 130 – then in your experience you’ve only been exposed to people who haven’t got the necessary skills. Stop talking nonsense.
Toan
August 19th, 2008 8:11 amis this a *smashing* article?
Angus
August 19th, 2008 4:36 pmFireworks does everything I need and more.
Bit of a short article.
Thomas
August 20th, 2008 1:04 pmI 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?
End User
August 20th, 2008 2:20 pmCorelDRAW does it Better 8)
CK
August 21st, 2008 5:53 amUm 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.
dreina
August 23rd, 2008 7:02 amWhy not Fireworks??
Fireworks is better than Ilustrator to design websites
William
August 25th, 2008 2:31 pmI 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
Mattias
August 28th, 2008 3:21 amI use Illustrator, when I´m finished I go to Photoshop and cut my images! :) So it´s perfekt.
S. Martin
August 29th, 2008 7:22 amFor 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.
Jawad
September 1st, 2008 6:49 pmIllustrator is better than Photoshop
nfabrika
September 2nd, 2008 6:22 amDaniel, that’s what you get as a 1px line when you check the list:
http://mt14.quickshareit.com/share/1pxaabd5.png
FataL
September 2nd, 2008 12:09 pmFireworks, guys!
Amen!
John Vinagre
September 3rd, 2008 1:23 amFireworks has these two worlds: Photoshop and Illustrator. long live to Adobe!
Jeffrey
September 4th, 2008 11:32 pmWell, 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.
Christian
September 19th, 2008 12:29 amFireworks 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! :)
Charles
October 3rd, 2008 11:01 amThere 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-
German
November 11th, 2008 1:45 pmPhotoshop 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.
German
November 11th, 2008 1:53 pmFor 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.
Jen Walter
November 20th, 2008 7:48 amI’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.
Mark
January 23rd, 2009 1:18 pmI 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.
Chris H
May 14th, 2009 5:58 amI 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.
Penny
September 23rd, 2009 4:59 amHey 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?
Jenny
November 2nd, 2009 4:20 amI 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.
David
December 11th, 2009 12:22 pmI’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.
Aias
January 10th, 2010 6:20 pmbunch of haters!
jj
August 9th, 2010 3:14 pmwow…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.
Dale Brendan
December 4th, 2010 9:35 amI 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.
andy
January 10th, 2011 5:39 pmAs 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.
andy
January 10th, 2011 5:47 pmAlso, 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]
Andyk21
February 18th, 2011 11:32 amI 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…
Adam Rotmil
March 15th, 2011 7:17 pmBy 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.
Aurelien
March 23rd, 2011 5:38 amJust 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…
bikeman
January 13th, 2012 4:57 pmWRONG!!!
Illustrator = print
Photoshop = photo editing (it’s in the name…)
Fireworks = web design
Aftab
April 8th, 2011 9:48 pmI Love Illustrator !! :)
nick
April 12th, 2011 8:01 pmms 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..
Srinidhi
May 26th, 2011 3:16 amItz informative but the article is too short.
Casey
February 9th, 2012 1:53 amI’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.