11 Replies Latest reply: Oct 22, 2012 12:54 PM by Mathias17 RSS

    How to view actual size as in real life at 100%?

    AmeenSaqqaf

      I am designing the user interface for an iPhone app using Adobe Illustrator CS4. The screen size of the iPhone 4 is 640x960px, which I have entered as the artboard size. The problem here is that at 100% zoom in Illustrator, I do not see the actual iPhone screen size as how it would look like in real life, rather I see it much larger (around x3 if not more). The resolution of the monitor I am working on is 1680x1050. Does this issue of getting the actual size of 640x960px have anything to do with my monitor resolution/size? How can I see the actual size of 640x960 on my monitor at 100% without resorting to manual methods such as placing a ruler on the monitor, etc.

       

      Please advise, I would greatly appreciate your help.

        • 1. Re: How to view actual size as in real life at 100%?
          Monika Gause MVP

          Of course it has to do with your monitor settings. Your monitor is about 1000 pixels tall, the artboard size about 900, which is about the same.

           

          Pixels on the iPhone screen are just smaller.

          • 2. Re: How to view actual size as in real life at 100%?
            AmeenSaqqaf Community Member

            So the artboard size I created (640x960px) is not the right screen size of an iPhone? I got the display specs from http://www.apple.com/iphone/specs.html

             

            Did I input the wrong numbers for the artboard size? I'm sorry for troubling you, I greatly appreciate your help.

            • 3. Re: How to view actual size as in real life at 100%?
              Wade_Zimmerman Community Member

              First there is a thing called Device Central, not sure how .you missed it but probably most users do.

               

              To create you document for a device use the Browse button on the top right to access all the known devices that have been profile drag the icon for that device to the side bar on the upper left side where there are several flash devices listed.

               

              Then hit the button Create on the upper right side make sure your device is displayed and selected and on the lower right corner hit create. And Illustrator as the application in the upper left side if it is not already displayed.

               

              Then when it opens in Illustrator you of course create or copy your art into the document, if your document is already the size it does not matter skip all above and go to Save for the Web and Device and in the lower right of the SFW&D select Device Central, in the left upper sidebar select your profile for your device and it will display with the right size within a profile art of your device.

               

              Like such

               

              I can't post the screen shots at the moment. try later.

              • 4. Re: How to view actual size as in real life at 100%?
                Wade_Zimmerman Community Member

                Screen shot 2011-02-26 at 7.54.37 PM.png

                 

                Screen shot 2011-02-26 at 7.33.08 PM.png

                 

                Screen shot 2011-02-26 at 7.33.20 PM.png

                 

                I believe it actually calculates your screen resolution and then displays the the illustrated profile as actual size.

                • 5. Re: How to view actual size as in real life at 100%?
                  Wade_Zimmerman Community Member

                  you can also test the image and other files and send them to your test device

                   

                  Screen shot 2011-02-26 at 8.04.20 PM.png

                  • 6. Re: How to view actual size as in real life at 100%?
                    AmeenSaqqaf Community Member

                    Adobe Device Central is the first thing I checked, the problem is that it's CS4 and it doesn't have the iPhone profile unfortunately. Only Device Central CS5 has the iPhone profile. Is there a way I can download the iPhone profile from somewhere and load it in Device Central CS4? Thank you very much for your input.

                    • 7. Re: How to view actual size as in real life at 100%?
                      Wade_Zimmerman Community Member

                      There seems to be noway to do that.

                       

                       

                      Maybe the upgrade would be worth it for you?

                      • 8. Re: How to view actual size as in real life at 100%?
                        AmeenSaqqaf Community Member

                        Unfortunately, an upgrade is not an option for me at the moment. If you don't mind, could you tell me what does Device Central CS5 show you as the screen size for an iPhone? I'll type it out as my artboard size and see if it would give me the actaul size of the iPhone screen. Or that wouldn't work since our moniter screen dimensions are different?

                         

                        If this doesn't work is there any other way to get the actual size of the iPhone screen as it would look in real life on my moniter in Illustrator? Thank you for your prompt replies, I greatly appreacite them.

                        • 9. Re: How to view actual size as in real life at 100%?
                          Wade_Zimmerman Community Member

                          Device Central gives the actual size of the device, and I believe it is independent of your screen resolution. It just adjust the display and your screen resolution to show the atualy physical size of the product and display which is exactly what you want and why it was created.

                           

                          But if took a screen shot for instance of what I see her the only way that would work is if you used save for the web and device to view it with a setting I believe of 72 ppi as the resolution in save for the web and device.

                           

                          Not to beat a dead horse but if you do this often then upgrading is not an option but a necessity.

                           

                          BY the way I showed you a screen shot above it shows the iPhone with the graphics at actual size

                          • 10. Re: How to view actual size as in real life at 100%?
                            LifeSizer

                            The PPI default is not a real PPI.  It is based on typical print settings, not actual monitor size.  In order to view an image in actual life size, you need to know the actual PPI of the image and of the display device.  While not integrated with CS4, if you want to see how your images will look in actual life size, you can go to LifeSizer.com to see your image in actual life size on any size monitor. 

                            • 11. Re: How to view actual size as in real life at 100%?
                              Mathias17 Community Member

                              I create graphics for print all day and I often need a quick preview of exactly how large something will be once printed, so I do something very similat to how LifeSizer.com (linked above) determines "actual size" of images.

                               

                              Create a new 8.5x11 doc. Hold up a peice of actual 8.5x11 paper to my screen and zoom until the doc's width matches the actual paper's. What this does is determines what your Illustrator's zoom factor must be in order for you to see graphics on-screen that will match the desired output. Will vary depending on your display. Mine turns out to be 128%. My Photoshop's "real-life" zoom factor is 30.5% . . . don't know why.

                               

                              There's no faster way to set your zoom factor in Illy than typing it into the Navigator Panel, or in the bottom left of the doc window. And hopfully, you can determine the zoom factor that'll give you a pixel perfect preview, since I assume you're doing a lot of small iOS pixel graphics.

                               

                              For a live preview of your doc at "real-life" zoom - Set it's zoom factor to real-life, open the doc in a new window, leave the real-life zoomed doc alone, and work in the other one. This is when dual mons is super handy.