SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mocking up in illustrator for web interfaces

    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.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  2. #2
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •