4 Replies Latest reply: Jan 31, 2013 12:15 AM by kililio RSS

    scale a project for the web

    kililio Community Member

      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

        • 1. Re: scale a project for the web
          John Danek Community Member

          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.

          • 2. Re: scale a project for the web
            EricaLynneLarson Adobe Employee

            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-mobile-platforms/

             

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

            • 3. Re: scale a project for the web
              kililio Community Member

              hi,

               

              thanks for these answers, do you know where I can find all the standard dimensions in pixels for all devices even  monitors?

               

              It's always painful when you finish an art and you gotta find all the right canvas dimensions to fit it in

               

              may be i should create a template for this.

              • 4. Re: scale a project for the web
                kililio Community Member

                hi john whats the formula you use to calculate that?

                 

                thanks