12

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?

8
  • 1
    I'd recommend Photoshop for its wider usage and more tutorials.
    – Jichao
    Jan 20, 2011 at 14:36
  • 6
    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, 2011 at 14:40
  • @Jichao: Your comment should be made into an answer. Jan 20, 2011 at 15:07
  • 2
    @DA01 "shouldn't" might be too imperative for such a subjective matter. There's no best-practice to suit all. Jan 20, 2011 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, 2011 at 16:07

8 Answers 8

26

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.

8
  • 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, 2011 at 1:18
  • that'll get you halfway there. for some screens.
    – DA01
    Jan 21, 2011 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, 2011 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, 2011 at 3:02
  • 2
    +1 for recommending Fireworks in your answer. A very underrated, but powerful web design application. Feb 24, 2011 at 1:06
7

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.

2
  • +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?" Apr 8, 2012 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. Apr 18, 2013 at 15:40
6

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.

3
  • 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, 2011 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, 2011 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, 2012 at 23:52
1

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

8
  • 4
    99designs isn't a reliable source of anything.
    – DA01
    Jan 20, 2011 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, 2011 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, 2011 at 23:53
  • 2
    @DA01: please always explain why something is not reliable, otherwise there is nothing constructive in your comment.
    – Littlemad
    Jan 21, 2011 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, 2011 at 15:15
1

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.

0

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

1
  • 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, 2012 at 19:45
0

It is quite obvious you should use photoshop for comprehensive web design mockups.

Illustrator designs still tend to process slower compared to photoshop designs.

If you are designing icons and web elements I would suggest designing in illustrator and then place those elements into photoshop.

If you create mockups in photoshop you can easily transfer those documents to Fireworks for rapid prototyping.

0
-1

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

2
  • 4
    This answer is a little bit short. Can you please explain what you mean?
    – Mensch
    Apr 18, 2013 at 17:22
  • 2
    who slices anymore?
    – Scott
    Apr 18, 2013 at 21:41

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