0

I'm taking my first steps into the waters of vector design, designing a simple logo (in 'Sketch' for mac - an illustrator alternative).

This went well until it came time to export the artwork for a web site. I took an eps to Fireworks, then created a PNG for the web site.

It wound up looking more 'jaggy' than I expected, and this is when I started to wonder whether I was doing things right.

What size/resolution do you import an eps logo into Fireworks (or Photoshop) at? The same size you want to end-graphic to be, or do you import as a larger size and shrink it down in Photoshop so it looks better?

Improve this question
1
  • Actually i think that pretty much every 2d vector rendering app does things wrong (oh why oh why cant i get sinc with lancoz window filetring in PS). Adobe especially is bad at this as they filter the signal as if the color space were linear. So I actually do my own antialiasing when i need superior quality stuff. So I agree that this is indeed a problem. But on whole different level. If you bring it in larger you have more values to filter in when you bring the nonlinearess into play.
    – joojaa
    Apr 10, 2014 at 9:14

4 Answers 4

Reset to default
2

As a web developer, I would say you should export the images at the size you expect them to be rendered.

This is for two reasons:

a) Filesize - a 2MB file scaled down in terms of resolution, still has to be downloaded at 2MB

b) Rendering - a 1000x250px image which is displayed in a 250x50px tag, will be rendered by the browser at runtime. This is both slow, and likely worse quality than you'd achieve in a specific graphics application.

Improve this answer
1

I suggest setting a Photoshop file up with the final resolution (depending what you want to use it for) and then importing the logo into Photoshop as vector shapes (from Illustator this works with copy/paste, not sure about "Sketch"). That way they stay lossless, even if you change the resolution later.

Improve this answer
1

I suggest you to export an *.eps file from Sketch and simple open it in Photoshop without any resizing. After that take an option which is called 'Save for Web' (Shift+Cmd+Alt+s or from main menu 'File->Save for Web') and resize your image to get the dimensions you need. Listen to the dougajmcdonald and prepare the size you expect them to be rendered in a browser. Select a 'Bicubic Sharper' option if you want to decrease the size. It helps you to keep the details. In other way they could be blured too much.

Improve this answer
0

If you're using Sketch to create the artwork, you should probably use Sketch to output the final bitmap images. Sketch can output in a few different bitmap formats, including PNG.

That's probably the easiest and fastest way to do it.

Improve this answer
1
  • This is what I did initially, but the output did not seem to be of very good quality / resolution. Should I make the 'art board' or 'slide' the same size I want the ultimate graphic, or make it bigger to get better clarity?
    – Larry
    Jul 16, 2012 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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