5

I'm a web developer and I love Photoshop but unfortunately I have some design mock-ups sent over to me in Illustrator. When I viewed the document at 100% the text isn't even legible on my monitor. At 150% things looks like they could be an actual web page and everything is clear.

I'm thinking the designer used a screen resolution that really doesn't convert well for web.

How can I view/change the document's screen resolution to say, 72ppi from whatever it is now?

If you think I'm asking the wrong question then here is an alternate: How can I figure out what width (in pixels) the designer actually intended for design?

Improve this question

2 Answers 2

Reset to default
6

The good news is that "screen resolution" doesn't really exist in an Illustrator document. Since most of what you see is vector data (text and graphics), you can scale the whole shebang to whatever looks right to you. The art could look tiny on your screen for various reasons, but I suspect there's a huge art board with relatively tiny art on it. When you Ctrl-0 (Cmd-0) to fit on screen, if the artwork is still tiny then that's the problem.

If you have Illustrator CS5, select the Art Board tool and change the size of the art board to fit the artwork, then at 100% it will fill the window. If you have CS4 or earlier, first make sure nothing in the Layers panel is locked (twirl down the layer triangle(s) and verify no objects are locked), then Ctrl/Cmd-A to select everything. Grab one corner handle and Shift-Alt/Option drag the artwork to scale it up to the size of the artboard.

I would take a modest bet that the designer wasn't thinking with screen resolutions or pixel dimensions, just the relative sizes of the objects in the layout. As the web dev, you should make your own best judgment call on dimensions, based on the text in the mock-up and how 1 em for your <p> tag text compares to the designer's mockup.

Since you're the guy who knows the web, you should provide input in terms of recommending the best page width, font-size, etc. (As a designer, if I hand off a design to a web developer I expect and value that kind of feedback. As a web dev, that's what I do with designs I'm handed by others. That includes saying things like, "Your header is too tall for the average screen dimensions of the people who visit your site.")

Improve this answer
2
  • Thanks. This designer usually sends his designs over as a psd which allows me to just change the ppi (or dpi) till it looks right (usually from 300 to 72 and its perfect). I was hoping there was a similar concept in Illustrator (CorelDRAW X5 can switch between an Artboard-like (vector-based) view to a pixel-based view that lets you set up ppi). I know I can set up the rulers in Illustrator to measure pixels, but since you can scale in pixels its kinda lame. :-)
    – David Murdoch
    May 18, 2011 at 14:58
  • You can open it in Photoshop and select a pixel dimension. Vector art without any raster textures etc is device independent and infinitely scalable. There are no dots/pixels until it is rendered (printed) or, in your case, rasterized for display on a web page.
    – horatio
    May 18, 2011 at 16:41
0

It's possible the person who drew the designs didn't think about art board size. I would probably zoom in so that the paragraph fonts (if there are any) are roughly 10 to 12pt compared to Photoshop. Without fonts, it may be difficult to gauge the desired size.

It depends on what is in the mock-up as to what you can use to estimate the size on screen.

If all else fails, send them an e-mail...

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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