: Coding a website design , which is better from PSD (Adobe photoshop) or EPS ( Adobe illustrator )? What is the diffrence between EPS and PSD in making a mockup in: 1. Quality 2. Size

@Phylliss782

As a front end developer, I always side with photoshop on this one. Many designers forget to set their AI comp to snap to pixels. This leaves instances where boxes that are drawn with vectors hang in between pixel lines and output blurry lines instead of sharp ones. When you're designing a site that uses a column layout, these little bits will sometimes force a frontend admin in a dizzying fury as they'll have to go in and adjust things. This can add frustration between design and development teams and will ultimately impact deadlines if a frontend now has to jump into photoshop and correct things.

Vote Up Vote Down

@Candy945

Fireworks.


Rapid UI prototyping
Extensive UI stencils available within Fireworks and online for Mobile & web interfaces that you can design off
Integration with jQuery Mobile Theme Roller means you can go from UI design to CSS within the same tool
Hybrid between Photoshop and Illustrator for Web Design Needs

Photoshop is great for a 4000x2000 image editing without losing quality, but for web .. you don't need that kind of image editing power - perhaps 5% of the time. Same way, Illustrator is very powerful for vector stuff, but you don't need that power all the time
Fireworks is the hybrid between the two of them that's much more focused towards web/mobile development workflow

But not less powerful that the other two! Do you need a 6 stage gradient? You can do that easily in Fireworks too.
Generates CSS from your design; You can do a nice gradient button, go to CSS property inspector & copy the CSS there, send to your developer (this is still quite cool for me :p)


The only annoying thing about FW for me is that the keyboard shortcuts are sometimes different from Photoshop.

Vote Up Vote Down

@Rambettina927

I prefer AI to PSD for comps, despite it's shortcomings, for a few reasons.


File linking (instead of embedding like Photoshop) reduces file size and makes remote updates and sharing of component elements easier.
Vector editing is easier in Illustrator, given a good knowledge of both apps, and working with vectors is becoming increasingly important for cross-device functionality.
Type is easier to work with.
Ease of crossing mediums, which matters in a larger brand ecosystem where print and digital cooperate.


Of course, the mock-up is only part of the equation. Communicating what it should do in action is just as important, regardless of your art app. I gave a brief overview of my approach over on UX SE in this answer.

Vote Up Vote Down

@Caterina889

It does not matter. Neither a .psd nor .eps are appropriate formats to just stick on the web.

Use whatever you are comfortable with in creation. Then you slice up your layout into pieces and build code (HTML/CSS) and use parts of your Photoshop or Illustrator document for any necessary supporting images.

In no case is a .psd or .eps file simply put on the web as a web page.

Update after question edit:

In terms of a mock-up, your question is far too broad.

For example, eps is a pretty dead format for most things, certainly for any web design mockup. You would use .ai or even .pdf before resorting to eps.

In terms of quality, there may be some slight differences. For example Photoshop will allow you to add dithering and noise to a gradient to soften banding. Illustrator can't do that. Or the fact that Illustrator can easily allow editing, and reediting, of rounded corners where Photoshop can't do that.

As for loading "size", that too makes no difference. Since you would be pulling individual elements and saving those, they file sizes of these elements can easily be made identical or nearly identical.

Easier to use... really depends upon your knowledge.

Similarity between AI and PS... check Adobe.com.

Vote Up Vote Down