Skip navigation
Currently Being Moderated

scale a project for the web

Jan 27, 2013 9:36 AM

Hi,

 

I've designed a greetings card that is 1022.23x1021px

 

I need to scale this because i want to make it a coming soon page for a future website

 

In which dimensions I need to scale the whole work (drawing/text) up/down to be seen on 4/3 and 16/9 monitors?

 

there are smartphone and tablets standard dimensions too I guess, do i need to create multiple artboards ?

 

As I explored Dreamweaver CS6 I noticed the dimensions are shown in the "design" view at the bottom for these devices, may be I could use them?

 

Thanks

 
Replies
  • Currently Being Moderated
    Jan 27, 2013 1:17 PM   in reply to kililio

    If we're talking 72ppi, then your graphic is around 14" square.  You could lay it out 600x800 horizontal and "Save for Web" as either a .gif or a .jpg ( depending on the artwork ).  Try not to scale anything in Dreamweaver.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 27, 2013 2:44 PM   in reply to kililio

    Just in case a visual will help you, here's a quick tutorial about scaling for web:

     

    1) Go to File > Save for Web

     

    Screen shot 2013-01-27 at 2.26.19 PM.png

     

    2) This will open a dialog with lots of options for saving.

     

    The area marked as "A" is where you would choose the file type for your image, which, as John said, would be a .gif or a .jpg, or a .png if your document has transparency.

     

    The section Marked "B" is where you can easily resize your document. Unless you click on the chainlink icon beside the dimension boxes, your image will automatically retain its proportions when you enter a new value for height or width. Also be sure to tick the "Clip to Artboard" option so you don't get any extra objects that may be lingering in your workspace.

    save_for_web.png

    I would also agree with John when he says to recompose in an artboard in the desired dimensions of your final image intended for web. And you're exactly right about the multiple artboards for different devices. In the screen shot below, I have an artboard in the dimensions of your original document (1022x1021) and one for the dimensions of an iPhone screen. This makes it really easy to modify compositions based on the sizes and proportions of different devices.

     

    Screen shot 2013-01-27 at 2.41.51 PM.png

     

    Here is a link about preparing graphics for multiple devices: http://codebycoffee.com/2010/12/08/preparing-graphics-for-multiple-mob ile-platforms/

     

    I hope this helps! If you need more web assistance, don't hesitate to post in the Dreamweaver forum!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points