1

What is the diffrence between EPS and PSD in making a mockup in: 1. Quality 2. Size in loading page 3. Easier to use 4. Similarity between both of them

Thanks in advance....

Improve this question
0
0

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.

Improve this answer
2
  • Thank you for this nice answer and motivation about Fireworks , i already designed 50% of my website in photoshop should i take to fireworks , i just have experience in photoshop , and zero in CSS stuff , any advice please ? – ahmed amro Mar 29 '13 at 0:45
  • yes, experiencee in photoshop should be enough for you to pick up fireworks quickly. It was the same situation for me. A colleague designer recommended fireworks, and I picked it up after watching a few videos & understanding pages vs layers. – a20 Apr 1 '13 at 1:33
3

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.

Improve this answer
13
  • 1
    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. But , i need to know when i zoom into my psd file it become pixelated when i zoom in @ 182.21% when i zoom into any webpage i dont find it get pixelated can you explain? – ahmed amro Mar 25 '13 at 18:32
  • 3
    Actually it is, but not in the same way it was in the 90s. You still slice layouts but not using slicing tools. You may pull a gradient or image to use as a background for CSS. My use of "slice" referred to pulling images as needed, not cutting up entire layouts for an outdated form of coding. In any case, psd and eps are both inappropriate formats for the web. – Scott Mar 25 '13 at 18:35
  • 1
    Applications such as Photoshop or Illustrator maintain the PPI of an image regardless of zoom percentage in order to allow detailed editing. This is why things get blurry. You are zooming in on pixels. Web browsers simply increase the image size and interpolate the image at the monitor's resolution. – Scott Mar 25 '13 at 18:40
  • 3
    Just to clarify, even for gradients you wouldn't need to use the 'slice' method as that is supported with CSS in modern browsers. Anyway, I think Fireworks would be the best application for web design mockups. It does pretty much what Illustrator and Photoshop can do but in one product. – Chris Burton Mar 25 '13 at 19:23
  • 2
    Agree with Chris about Fireworks! – Amy Blankenship Mar 25 '13 at 21:18
1

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

  1. File linking (instead of embedding like Photoshop) reduces file size and makes remote updates and sharing of component elements easier.
  2. 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.
  3. Type is easier to work with.
  4. 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.

Improve this answer
2
  • 1
    Fireworks offers native vector editing and non-distructive editing of source bitmaps (if you know what you're doing). The exported files (pngs, css, etc.) will be light in weight anyway, but Fireworks pngs usually aren't that big as long as you're not working with an image that's far bigger than what you need. In that case, I would recommend a destructive downsample. It's not like you're overwriting the original. – Amy Blankenship Mar 25 '13 at 21:22
  • Fireworks is great but it doesn't seem to have much of a future at Adobe. I really wish they would have spent more time developing it than that silly Dreamweaver thing. Oh well. They bought it to kill it, if you ask me. – plainclothes Mar 26 '13 at 19:20
0

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.

Improve this answer

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