Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

If I'm designing a website from scratch and I intend to slice it and code it up in Adobe Dreamweaver later, should I create the design of the website in Illustrator or Photoshop? Why?

share|improve this question
1  
I'd recommend Photoshop for its wider usage and more tutorials. –  Jichao Jan 20 '11 at 14:36
3  
You shouldn't design websites using the old 'slice an image' methodology to begin with. Ideally, you'd start in HTML/CSS and use your image applications as you go along. –  DA01 Jan 20 '11 at 14:40
    
@Jichao: Your comment should be made into an answer. –  Philip Regan Jan 20 '11 at 15:07
2  
@DA01 "shouldn't" might be too imperative for such a subjective matter. There's no best-practice to suit all. –  koiyu Jan 20 '11 at 15:42
2  
@koiyu very true. That said, slice-n-dice is less often the best practice these days. I'll elaborate in an answer. –  DA01 Jan 20 '11 at 16:07

7 Answers 7

up vote 22 down vote accepted

Quick literal answer: Between Illustrator and Photoshop, PhotoShop, as it's raster, as is the web site.

Slightly more detailed answer: you'd be using both.

Alternative answer: Consider using Adobe Fireworks. Fireworks is so much easier to use once you get the hang of it for producing web graphics.

Long boring lecture answer:

The "Slice-n-Dice" method is a bit dated. It was popular a decade ago but these days it's really not the recommended approach. I'd suggest:

  • Use whatever app (AI/PSD) to 'sketch' the site. Feel free to go high fidelity, but treat it merely as a mock-up.

  • once you have that established, start building the site. Dive into the HTML/CSS/JS.

  • as needed, jump into PhotoShop to create the individual graphical elements that you need.

Why? Well, designing in photoshop doesn't account for the medium you're working in. It's a fixed canvas and the web is not a fixed canvas, nor is it even standard canvas. It leads the team towards a pixel-perfect idea and the web simply isn't pixel perfect.

share|improve this answer
    
Maybe, we could just fix the canvas's width, since there are so many famous fixed width websites. For more information, please see 960.gs. –  Jichao Jan 21 '11 at 1:18
    
that'll get you halfway there. for some screens. –  DA01 Jan 21 '11 at 1:44
    
That should be a problem. However, I have no big LCDs, so I have no opportunity to test it. –  Jichao Jan 21 '11 at 2:39
1  
sorry if I was being obtuse. What I meant is that there's a lot more to it not being a fixed canvas than whether or not it's a fixed width site...content, mobile devices, assistive technologies, SEO, browser discrepancies, etc. –  DA01 Jan 21 '11 at 3:02
2  
+1 for recommending Fireworks in your answer. A very underrated, but powerful web design application. –  DigitalSea Feb 24 '11 at 1:06

Use Fireworks or Illustrator for logo and icon creation. For photo editing use Photoshop. For everything else it matters very little. I know there have been debates about which graphical software to use but it's really personal preference.

However, keep in mind:

  • Fireworks is better for PNG compression though. The file sizes tend to be 20%-30% smaller than Photoshop's.

  • If you know down the road you'll be designing other non-web content for the site(tshirts, posters, flyers, etc) it's better if you start in a vector based program.

share|improve this answer
    
+1 for "If you know down the road...", in fact, I find it's best to work assuming that key visual elements will be needed in other formats. Clients almost never know what they will want to use something for until they see it and will never understand that making an RGB web image work for print isn't as easy as they expect... It's good to have something in your back pocket for the occasional "That looks great, can you take that style and apply it to these A0 wall posters we're printing for our big conference next Tuesday? That's easy to do, right?" –  user568458 Apr 8 '12 at 0:34
    
On the topic of efficient image compression, I don't rely on any of Adobe's apps. Try something like ImageOptim, a Mac app. There are other local and web-based solutions. You'll get much smaller graphics, in some cases. –  plainclothes Apr 18 '13 at 15:40

I've got to disagree with DA01.

The fact that a web document isn't a static image is irrelevant to the usefulness of a graphics editor for laying out and designing a website. Your design mockup doesn't need (and shouldn't) be a working prototype of your website. The design mockup is a document that helps you visualize and sculpt the aesthetic design of your site.

Just because a sheet of paper or whiteboard doesn't have all the minute qualities of a web document doesn't mean it can't be used to wireframe a website. Likewise, the fact that the browser window can be stretched and resized has no bearing on the value of design mockups. Any experienced web designer will know to plan certain parts of the layout as elastic and account for the limitations of web technologies. All the visual elements of a layout can still be represented within a flat image (that's how it's rendered on screen afterall).

Secondly, a piecemeal approach to design is not conducive to quality results. You're designing a web layout, not a hundred isolated widgets. Without a mockup of the full layout, you're basically just slapping things on without any idea of what the end result should look like. Adding in individual graphical elements piece by piece as you go without an overview of the complete composition runs counter to good design practices. A design is complete when you've run out of things to remove, not when you've run out of things to add.

Lastly, it takes much longer to make design changes in code than it does to tweak a mockup image. That's why you should always plan out your design in mockups before you commit to code. Whether you use a vector graphics program like Fireworks or Illustrator or a raster program like Photoshop is up to you. But you should always hammer out your design in a graphics editor before you start coding it.

share|improve this answer
2  
I don't think we're in disagreement. I completely agree with you based on the 'experienced web designer' variable. The problem is that people in charge of the PSD mockups are often not experience web designers and that causes all sorts of headaches as the project progresses. As for a 'mockup of the full layout' I also agree. I wouldn't say that should always be or always need to be a high fidelity PSD file, though. Wireframes are often enough. –  DA01 Jan 25 '11 at 17:43
3  
I will disagree with your last paragraph, though. You need to get into code to fully design the user experience. And, more often than not, that's a key piece of the design process and actually quite easy to make changes at that point in the proper environment (agile being a good place to start). –  DA01 Jan 25 '11 at 17:44
    
I'd stick with both of your opinions, and probably it depends on the projects as well. I can understand both points, though I have to say I am not patient enough often or feel lost in details if I design the whole page in PS first. Also, designs in CSS look different than PS. Furthermore I found that if you get used to coding, at least for me I am faster than changing it in PS. And last but not least, things can change (even after carefully planning every detail), and when coding I still often find challenges in design (from CSS, etc) and I'd have to change - in PS that's rarely the case... –  Chris Aug 2 '12 at 23:52

Here is a good post explaining this in a funny way :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

here is a better explanation from a very reliable source "http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator"

" Ultimately, the decision of what tool to use should be prescribed by the contest holder, but in general, Illustrator should be used for logos and print work, whereas Photoshop should be used to web design and any design which only be seen on a computer screen."

share|improve this answer
4  
99designs isn't a reliable source of anything. –  DA01 Jan 20 '11 at 23:37
    
Is there any particular reason you would say that ? Just for clarification I do not work with them or tied to them in any way however in the past I have found their articles and blogs very useful. They have been also recognized by lots of big media names like msnbc , new york times etc....so am I missing something here ? Please share. –  Ved Jan 20 '11 at 23:48
2  
And just to prove my point Stack over flow Logo was designed at 99 Designs 99designs.com/users/245023 –  Ved Jan 20 '11 at 23:53
2  
@DA01: please always explain why something is not reliable, otherwise there is nothing constructive in your comment. –  Littlemad Jan 21 '11 at 2:13
1  
Design contest via crowd-sourcing is never good for me and shouldn't be promoted by profesionnal designers. (Plus, it's slightly illegal in my country :D) –  Shikiryu Jan 21 '11 at 15:15

If you need of "slicing" you can use directly Photoshop without go to Dreamweaver.

There are 2 ways of slice in photoshop, automatically and manually by selecting the part of the graphic that you need and saving it for the web, one piece at time.

Anytime that you "slice automatically" with generating HTML you decide to lose control over the code. At the start of your career it is ok, you are learning, but it will arrive a point where you have to know the code, because for optimisation it is better hand code on an advanced text editor (for example the software Ultraedit) doing your own html and css.

The only moment that I find more useful the automatic slicing it is when I have to generate table code when designing for emails.

share|improve this answer

photoshop to image ready. i.e. it's about the content of the site. The client is not paying for your portfolio enhancement. KL

share|improve this answer
2  
Welcome to GD. I think I understand what you're getting at, but can you expand on that a little please? –  Farray Feb 5 '12 at 19:45

Photoshop will be better. It will help the users to slice.

share|improve this answer
3  
This answer is a little bit short. Can you please explain what you mean? –  Kurt Apr 18 '13 at 17:22
1  
who slices anymore? –  Scott Apr 18 '13 at 21:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.