We’ve all been here: the final stretch of a project, you spend all night finalizing your layout, spell checking, and “once-over-ing” every tiny detail. You press the upload button. After 45 minutes of status bar crawl you sigh in relief, its done. Then the next day you get an email saying that your card sizes are off because you designed them using inches instead of millimeters. You have to start over.

 

Years ago, I read the 7 Habits of Highly Effective People.  By far, the best lesson in that book is the habit of  “Begin with the end in mind.” Backtracking is one of the most annoying aspects of graphic design. There is no worse feeling than having to dismantle all of your hard work for a simple thing. It is demoralizing and time consuming. And since I am doing all of my design work in my free time and for no pay, morale and time are my most valued resources.

One strategy for minimizing moments like these is doing a ton of research. If you know all file specs/requirements for your project you can start out on  the right foot.

Here are some tips to get you going:

For print:

Make your final work a pdf. Some manufacturers and printers will accept other files, but the pdf is the most universal. It can embed font files. It can hold a ton of metadata that can help your printer out. And the pdf is the most widely used file type worldwide.

Always use CMYK color space. CMYK refers to Cyan, Magenta, Yellow and Black (K stands for “Key” color), the primary ink colors used in printing. All printers from the digital shop down the street to the large scale manufacturer that will print your game will break down every single image/design element to a mix of these 4 colors. Photos, scans, and any design for digital media will use the RGB color space, which operates on a very different principle than CMYK. If your artwork is set using RGB, most printers will either reject your artwork or worse use a color conversion to make your art CMYK. If the art is color converted you may end up with unexpected results. ie colors will look weird.

Make all image files at least 300ppi (pixels per inch). This also means when you export your final pdfs make sure that you use the correct compression setting in what ever design software you use. I prefer not to down sample and use a no compression. This means that your files will be enormous, but all image quality will never be compromised. Most printers use a portal to upload your ginormous, beautiful pictures so file size should be your last concern.

Note margins and bleeds. Margins are the safety space from the edge of the trim line to the important elements of your artwork. Bleeds are the overlap of your artwork over the trim line. Usually, when you are using a printer, they will provide you with some templates that will show you how your art needs to be layed out. This is an example:

Each printer will have different requirements for bleed and margins. Just make sure that you stick to what ever they say. You can adjust your settings in what ever design software you are using. Just make sure that you are carefully selecting the right settings when exporting your final pdfs.

Know your manufacturer. Make sure that you know where the final production is going to happen. If the country of manufacture uses the metric system, make sure that your art is set as millimeters.

For Web:

Use the right file type. JPEG, PNG, GIF are all widely used on the interwebs and for digital media. They all have advantages and disadvantages. I prefer JPEG, because they seem to retain the highest level of quality.

Use RGB color space. This isn’t as important as using CMYK for print. Everything you see on the screen will be, by default, RGB. RGB stands for Red, Green and Blue and the color system uses light instead of ink to create the colors that your see. (pretty cool right). Since you do all of your graphic design work on a monitor, you are always seeing an RGB version of your art. When you convert to a CMYK color space your are only changing the channels by which the colors are defined. So long story short, if you make a jpeg for a website using CMYK color space. it will still display as RGB on a screen.

Make sure that you know what pixel dimensions your piece is for. If you’re doing an image for any digital media, there are preset guidelines on how big your image files can be. Check out this post for the Ultimate Cheat sheet for Social Media. The image size is always expressed as a pixel width by pixel height i.e. 800px x 100px and thsi is at image resolution 72 ppi. Make sure that you set up your artboard at the correct pixel dimensions and that you export your image file as 72ppi.

Know what the end result is going to look like. It is terrible to design in a vacuum here. Take screen shots of the web page/media that your designs will end up in and impose your piece over it. That way, you know how your design will look in its final iteration.

Well, thats it. Keep in mind that this is the tip of the iceberg. There are so many considerations when doing production design that go beyond simply designing your piece. Take a look forward and know what the end is. That way you’ll can spend more time making your designs great, and less time worrying about resizing your images because they will “…obliterate inboxes.” -courtesy Mailchimp

 

Happy Game Makeing,

Mike