9 Replies Latest reply: Jul 30, 2012 5:17 AM by Jacob Bugge RSS

    Specific pixel size & dpi

    Bidds1205

      Is it possible to set specific a combination of size (in pxls) and dpi?  (in Illustrator CS5)

       

      I need to create a .png document which is 16x16 px and 96dpi.   The ability to chose the dpi size when setting up a new doc is very limited.  

       

      The only thing I've managed to do is create a 19x19 px 72dpi image, export  it "for web" and then take it into photoshop and change the dpi to 96.

       

      Is there a better, easier way?    Also, we're considering upgrading to CS6 - are these features better in CS6?

        • 1. Re: Specific pixel size & dpi
          Jacob Bugge CommunityMVP

          Bidds,

           

          You may just work in the desired size, in this case 16px, then Save for Web&Devices and in the Image Size window set the total width (or height) in px, or just divide either by 0.75 to get from 72 to 96 (72/96 = 0.75, the other way round to be used for multiply is a mess).

          • 2. Re: Specific pixel size & dpi
            Bidds1205 Community Member

            Hi Jacob,

             

            Thanks for your help - I have set my image size, as shown below, this gives me the 16x16 image, but when I check the DPI in Photoshop, the image is 72dpi. 

             

            Should I be dividing the figures that I put into the image size fields by 0.75?  In which case I end up with a "tiny speck" of an image.   I think I must be going loopy!

            16pxls.JPG

            • 3. Re: Specific pixel size & dpi
              Jacob Bugge CommunityMVP

              Bidds,

               

              I apologize for being a bit slow in the uptake.

               

              Obviously, a 16x16px image is 16x16px (a total of 256 pixels, 16 rows and 16 columns). No more, no less.

               

              If you print it at 96 DPI, it will be 12x12pt or 1/6x1/6 inch.

               

              If you show it on a screen/whatever at 96PPI, the actual size will also be 12x12pt or 1/6x1/6 inch.

               

              Maybe there is more to the question that meets the eye.

               

              By the way, why not use PNG24 instead of restricting the number of colours?

              • 4. Re: Specific pixel size & dpi
                Bidds1205 Community Member

                Hi Jacob,

                 

                I think it's more a case of Microsoft screwing with me - on a guide to designing toolbar buttons on their website (http://msdn.microsoft.com/en-us/library/windows/desktop/aa511280.aspx), they give a standard button size of 16x16 96dpi (scale factor 100%), so of course I assume that was possible!  Instead they're giving me a Friday afternoon headache!  

                 

                And, yes, you're right - I should have picked the PNG24, I just picked the first PNG from the list.   I think I'm going to give up, go home and come back with a fresh head on Monday! 

                 

                Have a great weekend and thanks for your help again, Lisa

                • 5. Re: Specific pixel size & dpi
                  emil emil Community Member

                  Bidds,  you are confusing DPI (Dots Per Inch) with PPI  (Pixels Per Inch).

                   

                  DPI is a technical specification of the output or input of hardware devices like a printer when you print, monitor when you display your digital image, scanner when you scan to make digital images, and etc. For printers DPI specifies the size of the ink drops when printing. For monitors, DPI specifies the monitor's resolution or in other words the size of the monitor's pixels. The term DPI for monitors came from the use of the CRT displays (those heavy monitors and TVs in the past with big tubes) which are no longer in production. These displays used guns to shoot light at the back of the screen with variable size dots and the term DPI perfectly described the monitor resolution used. Today there is only LCD displays on the market and thy use fixed cells which define the monitor resolution. Because the cells are fixed, for describing the resolution of LCD monitors, people mostly use the term Pixels Per Inch when they want to describe the size of monitors' pixels (cells). And this can cause some confusion that you are experiencing.

                   

                  PPI is an attribute of a digital raster image. It specifies the output resolution of a raster image or in other words how large the pixels in the digital file will be output.

                  In Photoshop you are setting PPI not DPI.

                  Illustrator is a vector program. Vector graphics are resolution independent (have no pixels) and don't have PPI attributes. The PPI attributes are valid only when creating a raster image for outputting to devices like printers. Printers can print the pixels of your digital image with different size, and thus the image with the same number of pixels can be printed with different sizes. Monitors however don't use PPI settings of digital files to display images, instead they use the zoom level specified by the user using software, and by default the software programs (your browser for example) use 100% zoom which fits one image pixel to one monitor pixel. Because different monitors have monitor pixels (cells) with different sizes that cannot be changed on LCD screens, a digital image with the same number of pixels will be displayed at different size at the default 100% zoom on different monitors. Also have in mind that certain elements  like software interfaces cannot be zoomed (changed) by the user.

                   

                  So, the DPI mentioned in the link you provided does not mean PPI and it doesn't suggest in anyway that you should set PPI in Photoshop or any other program when creating images for the web. You got that wrong. It is only telling you that monitors with higher resolution (DPI) will display your image smaller so, you may want to make the image larger (with more pixels) and vice versa. The PPI settings in a raster image are simply ignored for display on monitors and thus on the web. That's why you don't have an option for PPI in Save for Web and devices. Whether an image with a certain number of pixels is 72, 96, 300, 1 million or 1 PPI (pixels per inch) this will not make any difference when displayed on the web.

                  • 6. Re: Specific pixel size & dpi
                    Jacob Bugge CommunityMVP

                    You are welcome, Lisa.

                     

                    I think it's more a case of Microsoft screwing with me - on a guide to designing toolbar buttons on their website

                     

                    I agree. wee can safely blame them for everything here.

                     

                    I really had to read it more closely to see what they were trying to get at, and the section with the different pixel (or argh dot) densities is quite unintelligible:

                     

                    What they should be saying, but are not saying, is that when your pixel density,  goes from 96PPI to 120PPI, your image has to to go from 16x16px to 20x20px to stay at the same size (with a pixel density that is 125% the original, you have to use 125% the original pixel size to fill the same space on the screen), and so on.

                     

                    Instead they make it look as if the image gets a size that is 125% the original.

                     

                    Furthermore, they seem to be one/the original source of muddling the concepts by using the term DPI instead of PPI in connexion with monitors.

                     

                    I know that the disease has spread, some may say that it is too late, and I may be too old an English speaker to speak out.

                     

                    But just for reference:

                    http://en.wikipedia.org/wiki/Dots_per_inch#Computer_monitor_DPI_standards

                    http://en.wikipedia.org/wiki/Pixel_densities

                     

                    Edit: Hi Emil.

                     

                    I was away for quite a while after starting this post and just typed on when I returned.

                    • 7. Re: Specific pixel size & dpi
                      emil emil Community Member

                      I didn't read that web page and couldn't tell how good the information is there, I simply made a page search for  DPI and read only the sentences mentioning it and realized that they are talking about monitor pixel density and not image pixel density.

                      In anyway, 72 or 96 monitor pixels per inch assumption for monitor pixel density is no longer valid with all different monitors on the market today with variety of pixel densities. My monitor for example is 110 ppi, and the UI elements of most programs, like Illustrator for example, are annoyingly small. It is obvious that the interface designers used monitors with much lower resolution than mine. Otherwise they would have noticed the pain and at least  made an option to increase the size of the UI elements.

                      • 8. Re: Specific pixel size & dpi
                        Bidds1205 Community Member

                        Hi Guys,

                         

                        Thanks for your help - after a couple of days off, I have re-read the Microsoft page and with Jacob's help, I finally understand what they're trying to say!   Heh...  and I thought I was going to have to create 4 different sized Icons for every button!  Phew!    Thanks Again!

                        • 9. Re: Specific pixel size & dpi
                          Jacob Bugge CommunityMVP

                          For my part you are welcome, Lisa.

                           

                          As Emil said, there are many things, and questionable (absence of making) decisions, to muddle up things and make them harder.

                           

                          And we have not even mentioned SPI.