I'm a creative director at Laughing Samurai. I bark orders. Sometimes people listen. Sometimes they don't. When they play nice, I pay with pizza. And sometimes with Nachos. Hell, sometimes even Beer. Wanna work with me? Let's do this.

Designing in pixels in InDesign

Now hold on… Don’t get your diapers in a bunch! No, I am not claiming to design in pixels, nor am I designing a website in InDesign, what do I look like? An amateur? I was recently confronted with a project, which I had done once before, but approached it a little different this time around. Let me give you some background.

The project involved creating some web pages based on pre-existing landing pages, for the purpose of some focus group research. What basically had to happen was that there would be a few variables that changed over the design of a few ads. On some the laptop screens or the products changed, on others, maybe the copy changed, or a logo was added. The end result was like 4-5 different versions of the same web page, which would then be used for the testing.

The first time we did the project, I decided to execute the ads in Photoshop, which I thought was a good idea because I could just use layer comps (a bit of a nightmare), and layer groups, to execute the several versions of each ad. Now, designing them was a cinch, but packaging them for the client wasn’t. We had to make jpegs of each version, then render a PDF from these, which of course added too many steps to the process. On top of that, throughout this whole situation i did not take a very big factor into account… CHANGES! Making changes was hell, and thinking back on it, I would have preferred to roller skate down a hill, in boy shorts, with a diarrhetic monkey on my head (thank you Rayon for the analogy). Not only was making the changes very time consuming and a drain on the clock, they got a bit confusing to version and keep track of, especially since we had 5 people on this project. Then it came. The moment every designer dreads. The moment when you feel like you are going to throw up, get an ulcer, crap your pants and cut your wrists all at the same time. One of us got the dreaded “End of file encountered” Photoshop error. (Stay posted for a workaround to this error)

The second time we did the same type of project, I sat down and tried to figure out a better way to get these done, packaged and delivered. For this reason, I looked to InDesign. With some MacGuyvering in InDesign, I can mask out the areas that change, re-set any copy that is a variable, or just copy and paste, or replace, images that needed to change. Delivering and packaging was also an easy task, since multiple page PDFing is built in and super easy, and you are also able to make JPEGs in any resolution. The only caveat was that InDesign does not design in pixels (or so I thought), and outputting PDFs or JPEGs were never true to the actual size of the web page. This could pose an issue. After some intense researching online, I came back to something I was taught in School, but never thought of. Something all of us as typographers know, but maybe take for granted, because we never think of it in this aspect.

The Solution.

As typographers, we all know that there are 72 points in an inch, or 72 ppi. Now what does that sound like? Exactly! All you have to do is set InDesign’s measurement preferences to display in Points and you can use the 72 ppi standard as a 72 dpi standard, and bingo.

preferences

Once you make a new document, make the document size the pixel measurements of your web page, and voila! Now, there is a bit of a weird math thing that you need to keep in mind here, before you go dancing around like a fool. When making a JPEG, make sure you make the resolution 72 dpi, so the JPEG comes out at actual size. When making a PDF, since there is no way to control the size of the PDF before it comes out, the PDF needs to be viewed at 73% to view the page at actual size. Why 73%? Like I said, there is some weird math thing that happens in the conversion, which if any of you know what that is, please do tell, for now, we will let it be a mysterious mystery.

There you have it, designing in Pixels in InDesign. Stay tuned for more cool tips coming from me on Adobe Photoshop, InDesign, Illustrator, Bridge and Acrobat. If you have any ideas, or need tips on things in the suite, please leave a comment, and I can give you some insight or solutions. If I can’t figure it out, no worries, I’ve got people.

10 Comments

  1. Posted November 26, 2010 at 3:55 pm | Permalink Herne

    I always work in points. I hate having my measurements set in picas, it forces me to do math in my head and who wants to stop and think? Some clients insist on pica, so I just reset the document measures before I send the files off to the client.

  2. Posted February 7, 2011 at 2:41 pm | Permalink Mediumjones

    Nice writeup, thanks for sharing. More and more I find myself doing wireframes for the web in InDesign. I find it much more efficient than wasting time in Photoshop when so many inevitable changes lie ahead.

    Today I’m making a mockup for an iPad app and we all know client’s have no imagination when it comes to functionality.

    I’m going to try mocking up an InDesign doc first then exporting straight to Catalyst or Flash for the functionality. *fingers crossed

  3. Posted May 5, 2011 at 11:17 pm | Permalink Tony Richardson

    Very helpful and just the right amount of maths.

  4. Posted June 19, 2012 at 4:42 pm | Permalink Lindsey

    Help! How do I know if the JPEG is in dpi because when I go to export in InDesign it doesn’t give me an option to change to dpi for the resolution.

  5. Posted November 13, 2012 at 7:59 pm | Permalink Jen Greyson

    You just saved my bacon!!
    I’m totally teaching myself InDesign so I can create book covers, and this pixel pica thing was about to drive me nuts!

    thank you !

  6. Posted November 13, 2012 at 9:39 pm | Permalink The Fontografist

    You’re welcome Jen

  7. Posted November 15, 2012 at 2:27 pm | Permalink Zoffix Znet

    I guess this is for an older version of InDesign, because in my CS5.5 I have “Pixels” option as units for rulers.

    Though that doesn’t change anything about this tutorial. In my PDF viewer, you have to view at 80% to get actual size.

  8. Posted April 12, 2013 at 10:00 am | Permalink Rosana

    I don’t even know you…
    …and I love you!
    You just saved my life from having the same problem you had in the past.
    In my case we are making images that are going to be tablet slides. And they are over 200.
    I was trying to figure out how to do it using indesign for the exact same reasons of you. In the past, it was done using photoshop and we had the same hassle you did.
    This time I am head of the project and I was looking for a better solution. Indesign does everything I want except for the missing pixel feature. (I am using CS4) But now, thanks to you, it is gonna work like a charm!
    Thank you!

  9. Posted December 9, 2013 at 3:39 am | Permalink Betty

    I am creating web buttons using InDesign 3. For example I need to create a 150×150 button and when I go to Document setup, put in 150 pt, the dimensions of the document end up saving as 625×625. What am I doing wrong?
    Thanks!

  10. Posted February 14, 2014 at 2:36 pm | Permalink Dan Morse

    When creating a new document (Command N)- In the “New Document” window, the second option is “Intent” change this from “Print” to “Web”, bingo.

Post a Comment

Your email is never shared. Required fields are marked *

*
*