Whether or not you’re a professional designer, at some point you’ll probably need to delve into designing with images. You’ll need an image for a blog post, a presentation, a flyer, or even your family’s holiday cards. But you might not have access to design software that lets you understand and precisely control your images. You might find yourself in a darkroom (so to speak) of file types, pixels, and color systems.
From this confusion, major design problems can arise: uncropped or crooked images can look sloppy, small images can get blown up and become pixelated or blurry, large images can get added to websites slowing down loading speeds, the wrong color formats can be used resulting in incorrect or muddy hues…
The list goes on, but don’t worry! The five basic points below will help shed some light on designing with images.
1. Source Images
START WITH THE BEST & BIGGEST IMAGES POSSIBLE
The most important key to designing with images is to start with the best images possible. This applies to both image quality and size. When it comes to source images, bigger is better… and better is better too.
Professional photographers are an excellent investment. If that’s beyond your budget or if you’re a true DIY’er, now’s the time to make friends with your camera’s manual and look into tips for taking good photographs (like these tips from Kodak and wikiHow).
If you need to use stock imagery, take time to find images that tell your story and also feel authentic. Stock photos (especially corporate ones) can often look overused and cheesy, making your design feel generic or awkward. Look for images that convey your concepts in original, genuine and subtle ways. This Medium article lists several good sources.
Finally, always be sure you have the rights to use images in the way you want. Don’t use someone else’s images without asking and always read license terms.
2. Image Editing Software
MAKE FRIENDS WITH YOUR IMAGE EDITING SOFTWARE
Professional designers typically work with Adobe software (Photoshop and Illustrator) to edit and create images, but non-designers will likely want to skip the expense and complexity involved with Adobe products.
All the same, you still need a way to open and inspect images. And you’d really like to crop, scale, optimize and export them too.
Macs come standard with Photos (the next generation of the iPhoto app), which provides basic support for cropping, rotating, touching up and exporting images. Many tutorials are out there that show that yes, you actually can edit images with Mac’s free photo organization tool (like these articles on MacWorld and TutsPlus).
Google’s free Picasa (for Mac or PC) is another tool for managing images that also comes with basic image editing support. Picasa is similar to Photos, although perhaps clunkier. Google’s support page and this Instructables tutorial walk you through Picasa’s image editing capabilities.
One final note, Pixelmator for Mac is much more robust than Photos and Picasa, but still simpler and less expensive than Adobe’s software. I haven’t used it yet, but I keep intending to— it looks like it might be worth checking out.
3. Image types and file formats
GET TO KNOW IMAGE TYPES & FILE FORMATS
Vector, raster, jpg, eps, png, gif… oh my! Let’s make this simple and talk about the two basic image types: raster and vector, as well as their related file types.
Raster images, such as digital photographs, use colored pixels to create an image. Raster images have a set pixel density and can’t be scaled up much without losing image quality (more about image resolution is below). Raster file types include .tif, .jpg, .png and .gif. A TIF is a large raster file typically used for printing, most photographs on the web are JPGs, web images with transparencies are PNGs, and GIFs are web images with fewer colors (and sometimes rudimentary animations).
Vector images are created using mathematical formulas rather than colored blocks, allowing for more flexibility in altering and resizing shapes. Logos, illustrations and icons are created as vector images with software like Adobe Illustrator. Vector images are often exported as raster files for use in other applications. Vector file types include .ai and .eps.
4. Image Resolution
UNDERSTAND IMAGE RESOLUTION
(AT LEAST A LITTLE)
Image resolution can confuse even the most experienced of designers, but it really doesn’t need to be so complicated. All you need to understand are the fundamentals.
Let’s start at the beginning: pixels are the smallest measurement of a digital image. Each pixel includes a piece of information, and together pixels make up the whole picture.
Image resolution is the amount of pixels per unit of length, referred to as PPI (pixels per inch) or DPI (dots per inch) in the States. PPI is the term for display or image resolution, and DPI is a term from printing.
How does this DPI/PPI stuff get applied? Well, you’ve probably heard that printers require images be sized at least 300 dpi. For screen, resolution rules are imperfect because screen sizes and resolutions vary. Traditionally, designers have sized images for screen at 72 ppi or slightly higher, but high definition images and Scalable Vector Graphics (SVG) are the future of web design.
Regardless, while the DPI/PPI number is convenient as a conversion factor for meeting size requirements, the important metric for determining an image’s size is in its pixels. At its birth, a digital image has a total number of pixels. The more pixels, the more clarity the image will have, and also, in general, the larger the file size will be. Just remember that to retain image quality, the total number of pixels shouldn’t be increased. We’ve all seen what can happen when an image is scaled up incorrectly—it gets blurry or pixellated—not pretty!
Chances are, if you’re using a basic image editing tool like Photos or Picasa, you won’t have pixel perfect control over your image’s size anyway. There will, however, be export settings that let you output images at set qualities and sizes. For print, use the maximum settings. For web, medium to high settings are probably going to be sufficient. Experiment with export settings until you find the right ones for your needs.
Whew! Still with me? I hope so! Let’s move on to something a little more fun…
5. Color! (Color formats and optimization)
EXPERIMENT WITH COLOR OPTIMIZATION
4 color process is the most popular printing method. It uses the color space known as CMYK (Cyan, Magenta, Yellow and Black) to combine inks and create colors. This method is used when exact color matches aren’t needed.
RGB is the color space used for screen display and uses Red, Green and Blue to create color from the screen’s backlight. RGB colors used in web design are often represented in hexidecimal color codes, which are 3 or 6 digits preceded by a hashtag (like #FFF or #bd5454).
Pantone is a proprietary color space that provides a way for designers and printers to match colors. Pantone colors are printed as spot colors, which means the ink isn’t mixed during printing like with the 4 color process.
Because RGB and CMYK are entirely different color spaces, colors can go wonky if a CMYK image is used on the web or an RGB image is used for printing. That said, digital cameras and basic photo library applications default to RGB, and many digital photo printing services do color management for you.
Whether you’re using images for screen or print, don’t forget about color optimization. Even basic image editing tools will let you adjust and fine tune colors. Photo’s “Enhance” and Picasa’s “I’m feeling lucky” buttons offer one-click color corrections. Manual color and saturation sliders let you fine tune and brighten colors even more. If an image’s colors can’t be fixed, you can remove color altogether with black and white effects.
Experiment! Play!
(And remember, you can always revert back to the original.)
12 Responses
Great information for us non-designers!
Thanks Lex!
I am going to run out and check Pixelmator for Mac ! Thank you for everything I never knew and always wished I did about using images; this is an informative and engaging little lesson I am going to save, to study over and over!
Cool! Let me know if you like Pixelmator!
I’m really loving these new icon styles you’ve been experimenting with lately! Flat yet dimensional, with fun pops of color — love it. You’ve actually inspired me, by the way, to play more in PhotoShop and Illustrator. Illustrations/animations/graphics still seem daunting to me, but I think that’s the next topic to test out on my part…Wish me luck! (Thanks for sharing this, by the way! You are the best at explaining things.)
Thanks Rosie! You’ll love designing– and like everything you do, you’ll be awesome at it.
P.S. I love the red-yellow-green color combo. I have been on the same kick this summer and decorated my entire apartment in it. It’s kind of embarrassing, but I’ll send pictures! You’ll be proud. 🙂
I want to see!
This is exactly the type of article I needed. Thank you so much! I haven’t gotten through the last half yet but I know it is going to be very helpful. Your ability to translate complex technology into language tech-illiterates like me can understand is particularly wonderful, and appreciated :-). I have a feeling this is a post I’ll be continually returning to for help.
Thanks Jeanene!
Simply brilliant! This is definitely information that I, too, will revisit time and again. Thank you for the excellent and savvy way of explaining it all!
Thanks Kirstin! I’m glad you found it helpful.