Grow your CSS skills. Land your dream job.

Illustrator Mockup to PhotoshopMockup tricks?

  • rob
    # April 5, 2008 at 4:28 pm

    Hello,

    (Please be gentle…..newbie but willing to put in the time and learn:-)

    Goal: to take a illustrator file and export it into photoshop at certain size.

    I am just beginning to work for a small company and the artist sends me mockups in Illustrator files at 1024 x 768 then I create CSS webpage.
    He likes to design to the very edge of the screen. I tried to explain to him that if you design right to the edge of 1024 x 768 art border in Illustrator then scrollbars will show up in browser (correct? – I think most people to say design to 760 x 580? a better starting point). I know Illustrator is resolution independent , but if I scale the work to 760 x 580 then everything is to small when I export to photoshop…..maybe I am doing something wrong?

    Am I correct that the artist (under my direction), design in a art board 760 x 580 to get 760 x580 photoshop at 72 px….sounds reasonable or is there a trick?

    I hope this makes sense to someone out there :-
    Just looking for best way to go from Illustrator to photoshop.
    Thank you in advanced…..I love CSS-Tricks web site….this is the best new resource I have run across….long live CSS-Tricks

    We all learn by sharing what we know,
    Robert

    # April 7, 2008 at 7:29 am

    Hi rob,
    Looks like the problem is your trying to squash something that should be 1024×768 into a hole that’s only 760×580.
    In essence it sounds like your actually miniaturizing the graphic so resizing is probably not the right choice here. Try introducing the artist to this site http://www.webdesignerstoolkit.com/. It’s got screen shots of various browser windows at different screen resolutions that you can design inside. They can be downloaded as .psd’s. Just open the psd in Illustrator and hide the layers you don’t need. It even gives you a safe area of visibility. Or just say design at 1024×768 but can you give me a 30px margin around the edge of the design. He should be able to set up some guides in Illustrator for this.
    900-960px width is probably a safe maximum size to work with as most people now have at least a 1024×768 monitor.

    Other than that importing Illustrator to Photoshop is really simple and sounds like your doing it right. I normally export the .ai file to a .psd. That way you maintain layers and text etc.

    Hope that helps

    Tob :D

    rob
    # April 8, 2008 at 9:10 am

    Toby,

    Thank you for taking the time to answer this question.

    I really like your idea of downloading screen shots from (http://www.webdesignerstoolkit.com/). I think I will make a screen shot of two with toolbars added to the brower (seems to me that a lot of users that I know have one of two toolbars taking away about 50px – 75 px from the horizontal).

    To answer this question with a css-trick would be to learn how to create flexible layouts instead of fixed. I will learn how to do that too :D

    Thanks again!

    We all learn by sharing what we know
    Rob

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".