Designing A Website from Scratch – Illustrator or Photoshop?


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?

5/27/2013 2:04:00 AM

Accepted Answer

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.

1/20/2011 4:14:00 PM

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.