Print Design Tips for Web Designers

by on 6th April 2011 with 32 Comments

I started my career in print almost a decade ago and gradually moved over to the web. This whole new medium brought several creative and technical hurdles that I had to learn to deal with and even embrace.

Today’s article is for a new generation of designers making the opposite jump. You’ve been designing for the digital world for some time and are ready to learn print design. We’ll help ease the transition with some dead simple and practical advice.

Print Isn’t Dead

screenshot

In the original 1984 Ghostbusters movie, upon being asked if he likes to read, Egon boldly proclaims “print is dead.” This statement wasn’t quite true at the time but it was an extremely accurate foreshadowing of the events of the next twenty years, namely the rise of the Internet and personal computing from obscurity to ubiquity.

To be sure, this revolution has, at the very least, taken a baseball bat to the publication industry and consequently the availability of design jobs within them. However, it’s definitely still not the case that all forms of print are dead. In fact, print design can be one of the most valuable and logical skills to add to your repertoire as a web designer.

If you have clients who own small businesses, they need not only websites and logos, but also business cards, stationery, store signage, apparel and maybe even local newspaper ads. Most of them would rather skip the headache of working with multiple designers and find one provider for all of this material. If you can handle both web and print, that could be you!

Resolution

screenshot

Let’s start with some basic knowledge that you likely already know. In the web world, you have the luxury of working with fairly low resolution imagery. Now, you might see this as a bad thing because the level of detail is so limited, but having worked extensively with both, low-res web work is far easier to deal worth.

One of the primary reasons for this is that you can create 72dpi graphics on almost any computer that was created in the last four or five years. Smaller images aren’t as processor intensive as larger images. If you’re used to print and switch over to designing for the web, Photoshop feels like a completely new application running on a super computer from the future. You may think that sounds like an exaggeration, but just wait until you have 50 layers in an 11″x17″ document at 300dpi. You’ll be drooling over Mac Pros on Apple.com by day’s end.

Inches, Not Pixels

So how are things different for print than web? For starters, print designers don’t speak in pixels. Tell most print-only designers that you want something 1200px wide and they’ll look at you funny (they know what pixels are, but that’s not the typical jargon). That’s because the measurements in their versions of Photoshop have been set to inches.

This is an important distinction because resolution and size are interdependent! 1,200 pixels wide in a 72dpi document is very different than 1,200 pixels wide in a 300dpi document. A 5″x7″ print job though will always print something five inches wide by seven inches tall, only the density of the ink will change.

Not Always 300dpi

You’ve probably been told that print designers build graphics in a 300dpi workspace. This is not always the case though and that assumption can make you look like an amateur when it comes time to print.

Most small format jobs are printed at 300dpi. These items are those that can be closely inspected and held by someone. What about a billboard though? Is it necessary to have such a large resolution print for something you see from hundreds of feet away? It turns out the answer is “no.” Large format jobs such as banners, billboards and the like are almost always built below 300dpi, typically at 150dpi but sometimes even lower depending on the size.

Often, the resolution question can be posed to the real expert on the matter: the printer (the person, not the machine). You won’t look like an idiot for simply asking if it should be a 300 or 150dpi job, these are common questions when starting a project and are essential to get worked out before you actually start.

Should I Build Concepts in Low-Res?

Given the fact that computers can churn out 72dpi graphics much faster than 300dpi graphics, it’s often the practice of designers to go through the first few rounds of design in a low resolution workspace and to essentially rebuild the job in “high-res” near the end of the project.

Among print designers this can be a hotly debated topic. Ultimately, it comes down to preference but, for what it’s worth, I almost never take this route. Unless you’re constantly working with large format jobs, building comps in high-res shouldn’t take that long. If it does, then it probably really is time for a new computer. Building everything in 72dpi only to up-convert to 300dpi by essentially starting over always seems like a hassle to me when it’s perfectly easy to just build my ideas as print-ready.

The one exception to this is stock imagery. I always utilize the fairly low-res comps provided by stock sites when presenting to the client to prevent the unnecessary purchase of multiple expensive images.

Color

screenshot

Color is a huge topic and merits its own article so we won’t spend too much time on it here. My simple warning is that color in the print world is a whole new ballgame. In web design, we used to worry about “web safe colors” but these days monitors are so amazing that we generally just choose whatever colors we want in Photoshop and accept that there will be a level of variation from screen to screen.

When designing for print, you’re working with ink, not light. To start, this means working in CMYK instead of RGB, but the implications go far beyond that. Things like materials come into play along with a variety of different printing presses and methods. Sometimes the color you see on your screen won’t at all be what comes out on paper. Other times, specific processes like screen printing call for certain accepted practices.

My best advice here is to find out what the method of printing will be and research it as much as possible. A standard four color print job will be the easiest to work with, but occasionally you’ll have to work with only one or two colors to save your client money. In these cases, you have to get creative and learn to create great designs with a much more limited palette than you’re used to working with.

screenshot

You’ll also frequently have to work with spot colors, which means a dedicated ink mixed to a very specific color rather than something that gets mixed live by applying different colors to the paper. To read more about how to work with spot colors, check out our recent article “An Introduction to Working With Spot Colors.”

Not Just Photoshop

screenshot

Web designers tend to live solely in Photoshop. They may branch out to Dreamweaver or even Fireworks, but any further exploration of the Adobe Creative Suite is often unnecessary.

However, in print, you generally perform page layout in applications like InDesign and Illustrator. A few sorry souls are still using Quark but I can’t imagine why. The good news here is that being particularly strong in Photoshop makes you much more prepared to pick up InDesign. The bad news is that it’s still a very different application so there’s a ton to learn.

One of the most important concepts to understand is why you’re using multiple applications and how to incorporate them into your workflow in a synergistic fashion. The simple answer here is that Photoshop is for raster graphics, everything else (vector graphics and text) should be handled in your page layout app.

For instance, let’s say you’re creating a magazine cover. You’ll start with a PSD that contains your cover photo. Here you can perform typical color corrections, cloning actions, stylizing and anything else you need to make the photo ready to print. Once you’re finished with that, you can place this PSD into InDesign and overlay the vector graphics (often created in Illustrator) and text that make up the rest of the cover.

Print page layout can be visualized as a puzzle. In this metaphor, InDesign is the tabletop where you construct your puzzle. You create a lot of the pieces in other applications and then bring them all together and shuffle them around in InDesign. By placing the actual work-in-progess pieces into InDesign via the File>Place command, any changes that you make to the placed PSD, EPS, etc. in another app will automatically cause your InDesign file to update.

Doesn’t Photoshop Do Text?

At this point, you might be wondering why text isn’t handled in Photoshop. To be fair, highly stylized text (with bevels, masks, shadows, textures, etc.) is often kept in the PSD portion of the file. However, plain text is much easier to work with in InDesign. The text engine is far superior and not only renders text better, but allows for much more advanced manipulation such as automatic column distribution and even spell checking.

Another major related concern is that you generally don’t send off one file to the printer (print-ready PDFs are an exception), instead you gather all the pieces of your puzzle into a folder. This includes your various placed PSD and EPS files, your InDesign file and even your fonts. Working in InDesign gives you the luxury of an automatic “Collect for Output” command that automatically gathers all of the resources associated with the current file.

Bleed & Trim

screenshot

One of the biggest rookie mistakes you can make in print design is failing to design with a bleed. Print vendors require certain specs from designers, not because they’re picky or incompetent but because it’s genuinely how the process works and without these the whole print job is compromised.

Designing with a bleed is easy and it allows for perfect borderless professional printing every time. By inserting a bleed, you’re allowing for a print to be made that’s larger than the size of the final job. That way, when the excess is cut off, everything looks perfect and goes right to the edge regardless of minor paper shifts that might have occurred during printing.

In web design you’re familiar with the CSS box model, well in print design we have something that looks similar that basically defines how almost every print job should be constructed. Here’s a quick look at how it works:

screenshot

There are three main areas to this model: the bleed, the trim and the live area. The trim is the easiest to understand. This is the final desired size of the printed document; where the paper is “trimmed” to. In the example above our client has ordered a design that is five inches wide by three inches tall. From here, we need to create two more areas: one that is larger than the trim and one that is smaller.

The larger area is the bleed. As we just explained, this allows ink to go right off the edge of the page. The job above has a gradient background, but that background is stretched beyond the 5″x3″ bounds to an area of 5.75″x3.75″. By adding 0.25″ to the overall size, the result is a 1/8th inch bleed all the way around the page, which is standard in the United States (typically 2-5mm in the UK). Anything you place in the document that should “bleed” off the page, be it a photo or a textured fill, should stretch to this larger area while keeping in mind that it will be cut down to somewhere around the trim line.

The smaller area that I created in the example above is the “live area,” which is a very important piece that you might not know about as a web designer. Generally, it’s a bad practice to place non-bleeding text and graphics too close to the edge of the page. You want to give them plenty of visual breathing room and also be assured that they won’t get trimmed off. Therefore, the live area is created as a sort of safe zone for you to place this type of content into. For example, if you want a huge headline, stretch it from one end of the live area to the other, but no further.

Live area sizes aren’t standardized and vary considerably from job to job. As a rule of thumb, I inset my live area 1/8″ all the way around so it matches the bleed. However, different magazines and newspapers have their own set requirements that you must follow. Also, for large jobs, a 1/8″ inset isn’t near enough and will result in graphics that still look as if they go right up to the edge without any breathing room. In this case, you’ll have to eyeball it and decide on an acceptable bumper of space.

Fortunately, both Illustrator and InDesign can handle much of the work of creating documents for you with these kinds of specs built-in, but it’s still important to understand the concepts. Also, be sure to consult with your print vendor as they likely have pre-built templates that save a lot of trouble for everyone involved.

Design Trends

To finish off our discussion, let’s briefly discuss how to approach a print design from a creative perspective. First of all, you’ll quickly learn that print is a very different medium than you’re used to with the web. In web design, you’re limited only by your imagination. With print, you have a physical page size that must be conformed to; scrolling isn’t possible! This means when you’re client gives you a ton of text, you have to figure out how to make it fit in a readable and attractive way.

Also, keep in mind that your particular design style and tendencies might or might not lend themselves well to print. Just as you do with web design, it’s important to have a look around and take note of current trends in print. Take a trip to the book store and browse some magazines (don’t skip the ads, they’re the best part) or look through that junk mail before it hits the recycle bin.

screenshot

Becoming aware of trends doesn’t have to make you a conformist, instead it helps you keep in touch with what people are used to seeing. If the last time you paid attention to print design was 1995, you could be prone to produce something that looks ugly and outdated to today’s consumers.

Likewise, if all you’re aware of is the state of modern web design, you could have a lot of trouble translating these ideas to a printed page in a way that is both meaningful and engaging to the viewer. jQuery animations are no good here, you have to grab someone’s focus through purely static aesthetic appeal.

It takes time and practice but a goo designer will flourish in both print and web design.

Conclusion

In all honesty, if you’re currently a web designer looking to enter into print, you’re in a good position. In many ways, you’re reverting to a simpler way of thinking. Making the opposite journey requires a lot of new technical learning, especially if code comes into the picture.

This article was meant to show you though that you can’t just pop open Photoshop and decide you’re going to be a print designer one day. Your knowledge as a web designer helps but there is still a lot of industry specific learning that must be done. Everything from template creation to design finalization is a very specific process in print and if you don’t know your stuff you could be held financially liable for any errors. Taking a little time to go through the information presented about could save you a lot of trouble and headaches.

Leave a comment below and let us know what print-specific tips you have for web designers making the transition!

Photo Credits: Corey Holms, Alain Bachellier, Nate Hofer, Katy Beck and Steve Garfield.

Comments & Discussion

32 Comments

  • Pingback: Taking knowledge for granted | Graphic D.

  • Pingback: Print Design Tips for Web Designers « Left Justified

  • http://jim-silverman.com/ Jim

    this article literally just saved my life. i’m a web designer, never done print in my life …and i recently (TODAY) got assigned to create a truckload of print materials for my company’s upcoming event.

    this article was extremely helpful and the timing couldn’t have been better :D

  • Joshua Johnson

    Awesome! That comment made my day Jim. Thanks!

  • n

    Article reads “Inches, Not Pixels”

    Article SHOULD read “Picas, Not Pixels”

  • Joshua Johnson

    Do you think in Picas? I always change it to inches!

  • http://p12media.com Joe

    Very timely indeed! Just started a conversation today with one of my web clients about producing a magazine series.

  • Pingback: Print Design Tips for Web Designers « « Big Engine Media Big Engine Media

  • http://www.rethink-design.com Daniel Winnard

    Really really great article Joshua.

    I am both a print and web designer, primarily print. Our clients tend to send a lot of work to us in web ready format for their printed materials and I spend countless hours trying to inform them why a 72dpi photoshop advert their web designer created isn’t going to look good for their magazine advert.

    I will simply bookmark this article and send them this instead.

    One tip that I would give to web designers converting to print is NEVER, EVER use four colour black in your CMYK jobs. by this I mean 100% C 100% M 100% Y 100% B, most printers (in the UK for me) have an %Ink coverage limit (In my case it varies from 180% – 300%). For a nice CMYK Rich black I use 40% C and 100% B.

    Think about your % levels of the 4 colours as the more ink on the page the longer it takes to dry and also depending on paper stock differing amounts of ink soak into the page differently making that colour seem different to what you thought. When proofing to clients make them aware that on screen will look often considerably different to printed products. A printed proof as well as screen proof goes along way to managing customer expectations.

  • http://www.oceandevelopers.in Darshan

    hey, Its very useful for me as i have started to design brochure and other corporate identity though i am web designer..

    Thanks a lot.

  • http://www.paullovell.com Paul

    Nice article. I’ll definitely have to get around to using InDesign more. Very useful tip linking the bleed and trim to a CSS box model too!

    I’ve had issues in the past where I’ve needed to design print ads to a certain size but got supplied far too much text to be able to fit into the space – in the end I had to set a minimum text size that I was willing to use (i.e. what was reasonably legible) and if it didn’t fit then they’d either need to pay for a larger ad or reduce the word count!

  • Oli

    Picas? Inches? Millimeters!

  • http://www.kokushta.com Gjergji Kokushta

    I went from Web to Print.. well it was mostly walking through both of them in parallel. The 1st thing I learned was the CMYK colors and to design with them, lately using spot colors and when to use it. The printer guy – he helped me a lot making the right choices to get the best print results. As you mentioned at the end of your article, before sending out for print, make some draft print out from your CMYK printer, ask for proof/blueprint for the whole thing or just parts, especially when you need to keep some colors in a certain level. When you have that right, save those color combination for later reference. Another suggestion is to use good computers for your design and calibrate your monitors so they can show you as much near to the color when printed.

  • Ary

    Good article, old stuff but nicely laid out.
    Cheers from Jakarta

  • Cathitude

    I teach graphic design and while your technical advice is sound there is a world of difference between the web design process and the print design process. Web designers start with the constraints of their environment: HTML, CSS, php, whatever they are using. Graphic designers start with a blank space. Whatever they want to put in that space, they can. That freedom demands some understanding of graphic design styles and how people approach the printed page (which is quite different from how they approach the web space). It’s a different way of thinking, not just a different way to view the tools.

  • Pingback: risorse&link | Art&Me

  • http://Ohthatsite.com Stepher

    I agree with Cathitude. It must also be noted that mistakes in the print world can be very expensive, typos cannot just be deleted. Proofing is ver important, as is the extremely important lesson all print designers learn “cut and paste” supplied text, as the designer you are not (and DO NOT want to be responsible for text) … Get your printer proofs signed by the client, never sign for them.

  • Joshua Johnson

    I love this discussion on getting it right the first time. That’s definitely a huge bonus in web design that you can just go back and fix something! I can’t tell you how many times I’ve seen a printed piece and thought “whoops…”

  • Toma

    WOW!! What a great article, and what a help to all of us web designers. Practically every one of our clients needs print work and armed with this knowledge we can now confidently offer it to them. Thanks for taking the time to be so concise.

  • http://www.goblinridge.co.uk Ted Thompson

    Excellent article, very informative. Having only ever designed for the web I am wiser on the print side of things. Cheer!

  • Tanya

    I would be happy if somebody could provide similar guide for print on CDs. I know that Pantones is the best solution, but it does not always works for certain concept of CD booklet. Upon my own mistake I had learned already that gradients (even very light) must be avoided in label artwork for the print on CD surface (I am talking all the time about offset print in commercial quantities, not digital, or made on home printers). But CD is already printed and pressed and indeed, there is no way back. CD looks awfully, naturally. I am sure, there are experts in this sphere, if the knowledge could be shared would be super-wonderful.

  • http://www.creative90degree.blogspot.com Mukund

    Great guide, really very helpful

  • http://hostingbest.co.uk Hosting Best

    Nice work. You obviously know the graphics industry quite well!

  • http://www.marahcreative.com Sam

    Wow, thanks for taking the time to put this together. I started off in print design but quickly moved to web and have stayed there for years and years. Just got assigned a smaller project that we wanted to keep in-house, and this info has been super helpful in brushing up on my print knowledge and making sure I’m not forgetting something important.

  • http://www.imagemedia.com Nicholas | Print Design

    This guide is indeed informative and nice structured that can help you at any time.
    Thank you for this great article

  • http://www.joyoge.com/ Joyoge Designers Bookmark

    useful article thanks for tips

  • http://www.flexiweb2print.com web to print

    Thanks for explaining the best print design tips, found it really interesting and helpful, & looking forward to apply them surely, keep on posting these kind of stuff.

  • http://www.tonerandink.co.uk toner and ink

    some really helpful information here, especially the part about the use of colour

  • http://www.onlineprints.com John U

    Great article. Thanks for the tips.

  • http://www.egprint.net egprint.net | Online Printer

    Amazing article. Love how you brought these two together so perfectly.

  • Pingback: Should Web Designers Take on Print Work? - SitePoint

  • Pingback: Should Web Designers Take on Print Work? | tutfork

Subscribe
Membership
About the Author