Mocking up in illustrator for web interfaces

Content
1

Hi guys!

How do you change the ppi settings in illustrator cs4?>

If I am designing interfaces for web I want to be able use illustrator, I should choose this setting right?

What’s best practice when using illustrator to design layouts for web (to later be converted with css and html) and make sure I have enough space for type etc.

2

I know a couple of people who use illustrator for designing web layouts but they are both print designers by trade so illustrator is where they feel most comfortable. I would suggest avoiding illustrator and use Photoshop.

as for the resolution, with illustrator I don’t think it matters as it is vector based however I could be wrong. If it is anything like Photoshop then you will need to change it within the “image” menu at the top, explore the menus at the top (file, edit etc) until you find it :slight_smile:

3

I would advise against using Illustrator for mock ups, not because it’s not possible to do so but because Fireworks and Photoshop are better suited for the WHOLE process of web design. You can always design elements and import them into PS/FW at the desired resolution. KEEP in mind that after you mock up your site someone is going to have to CODE IT. Layers most closely resembles this process, so the advantages in manipulation ( moving , not creating) you may get in AI will turn into disadvantages when coding.

Some tips.

  1. ILLUSTRATOR > PREFERENCES UNITS & DISPLAY: Set your GENERAL and STROKE to PX, leave TEXT at POINTS
  2. Make sure your document color mode is RGB. Remember that some colors just simply don’t exist cross gammut.
  3. Make sure your DOC Raster Settings are set to 72dpi… no need to make the file heavy unnecessarily
  4. In reality resolution for screen is not in PX/INCH. in PX x PX… which is why setting your general units to PX solves your question.

make sure I have enough space for type etc.
GIVE UP THAT THINKING!!!
Remember the web is not a fixed size medium. Any page could have any amount of text at any time. THE SAME element may need to fit WAR & PEACE or one or Ronal Reagan’s famous one liners. OR… even if you have an exact amount of text the user can adjust his browser to make the letters bigger or smaller. So think “FLEXIBLE CONTAINER” a design which can stretch AT LEAST in one direction to accommodate content.

Hope that hepls.