: 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

@Sims5801359

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.

Vote Up Vote Down

@Shakeerah625

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

Vote Up Vote Down

@Nimeshi706

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

Vote Up Vote Down

@Voss6371140

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.

Vote Up Vote Down

@Shanna688

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.

Vote Up Vote Down

@Alves566

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.

Vote Up Vote Down

@Pope1402555

Here is a good post explaining this in a funny way :) 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."

Vote Up Vote Down

@RJPawlick971

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.

Vote Up Vote Down