Graphic Design Tutorials
I can’t recommend Lynda.com enough. Back when I was a baby web designer in the 1990’s, I bought a bunch of Lynda’s VHS videos to learn Fireworks and Dreamweaver, and that’s a lot of how I learned the basic skills for what I do now. I took classes in Microsoft Frontpage which were…utterly horribly-taught classes. I wanted to claw my own eyes out. But learning the basics of Frontpage later helped me to figure out Dreamweaver, which was a far better web design application. And understanding the basics of Fireworks helped me to understand Photoshop, which in turn helped me to understand Illustrator.
In other words, learning any one design application can help you to learn others.
The skill of learning how a new application works is a skill all its own. It’s not to say I don’t get frustrated learning a new app; I certainly do. However, a lot of learning new apps is about figuring out where basic functions are located and how things work.
With graphic design applications, there are a few consistent things you’ll need to know about regardless of which app you are using.
Depending on what you are designing, the measurements will be listed in pixels or inches. It’s apples and oranges but they do relate. Generally:
- Pixels are for representation on a website/digital device
- Inches (or metric) are for print
DPI (Dots Per Inch) or Resolution
Then there’s DPI or what’s referred to as resolution, and that’s how they connect. Now—if you are talking about web, it’s 72 DPI. If you’re talking print, then you want at least 300 DPI. So a 6” x 9” cover at 72 DPI is going to be 432 x 648 pixels, however, that’s not big enough to professionally print it. At 300 DPI that would be 1800 x 2700 pixels. Print has other concerns like “bleeds,” and I’ll get to that in a bit.
This is why something that is exported for print purposes is going to be far larger than something exported for web. When I save a cover design file as a high-res JPEG for print, that size might be 5-10 MB (Megabytes) or so. If I export the file for web (72 DPI) it might be far smaller, more like 500 KB (Kilobytes).
Most of the time if you’re sending along a cover to a book blogger or if your cover will be listed on a web site as an ad where clicking the cover goes to a buy link, you want to send a smaller file.
There are two ways to do this. One is to reduce resolution—in other words, to export the JPEG again at a lower level of quality. I don’t recommend this; basically if you are re-JPEGing a JPEG, you’re degrading the image quality and it might start to look blurry. If you’re working from a source file (original, high-res file), you can export a JPEG at about 80% before you start to lose too much image quality.
Instead, it’s worth it to keep a smaller version of the cover on hand that is perhaps 200 pixels, and maybe another that’s 400 or so wide so that you have a few options to send along to book bloggers or other sites. It’s definitely worth it to find out what size your image will be appearing so that you can have those files prepped and on hand.
How you resize and export those images will depend on your design software. But here’s a nifty trick; if you go to Youtube and type in “Photoshop image resize” or “Photoshop image export,” you’re likely to get a bunch of tutorials on the topic. Just swap out “Photoshop” for whatever software you’re using.
Assuming you have a print-ready 6×9 cover (300 DPI) there are two things you can usually do pretty easily. In Photoshop, if I “Save As” then I’ll get a 300 DPI Jpeg, 1800 x 2700 pixels. If I “Save for Web and Devices” I’ll get the same image, just at 72 DPI (432 x 648 pixels) which is a pretty versatile size and works for most sites.
Or, I can go to the file dropdown Image>Image Size and change the resolution there from 300 DPI to 72 DPI and do a Save As and get about the same result. Just don’t save over your 300 DPI source file. There’s no adding resolution or file size once it has been lost.
If you’re looking to change the image size or resolution, there are usually settings in that function for “Constrain Proportions” which you want checked; it’ll automatically do the math for you to keep the correct aspect ratio so your cover doesn’t end up looking smooshed.
Pro Tip: Source Files It’s always good to keep backup copies of source files. Why? I’ve had this problem with a few clients who wanted me to design a magazine ad or a postcard for them featuring their book covers, but they only had web resolution (smaller) files. At print sizes, these files look blurry.
It Doesn’t Get Bigger
Remember, you can’t ever make an image “bigger” than its source file. It’ll get blurry and pixilated. That’s why a 6×9 cover at 72 DPI is not appropriate for print. It doesn’t have enough pixels, not enough data. There are some exceptions to this rule—when I’m working with a multilayered Photoshop file and I have a smaller image and I need to make it a little bigger, sometimes I can get away with that, especially if it’s a textural piece. However, generally the blurriness is going to be really obvious on anything with fine detail, and especially with text.
Creating Banners and Graphics
So let’s assume that you’re creating a Facebook timeline banner, or a book blogger has asked you for a banner for your upcoming guest post. The same principles apply for both.
First you will need to know the size of the banners, like 100 x 200 or 800 x 90. This measurement assumes 72 DPI. Once you have that size requirement you can create a new file at that size.
Adding a little complexity to all this is something like a Facebook timeline graphic. You need to know the (current) standard size, 851 wide by 315 tall. But, you also need to be aware of the other elements that Facebook will overlay onto the picture including your profile picture in the lower left and the text elements at the bottom. Facebook also adds in a drop shadow to the bottom of your image. All of those things mean that any imagery or text on the bottom of your image are going to get visually lost, so in some cases there’s a difference between the size of the banner, and the “active” content area that is visible.
If you’re ever not sure what size image you need, if you have an example image on a site you can Save As and then in your file explorer you can click on the image to find out how big it is, and use that as a guideline.
The best practices for creating a banner include knowing exactly what size is needed, knowing if it’s for Facebook or other social media where other elements might be overlaid on it, and ensuring that all the images and text are visible. A 90-pixel-tall banner is not a lot of space, so you want your text to be short, sweet, and clear.
Print Sizes: Bleeds
Print works essentially the same way as web and screen based graphics in that you’ll often be working with standard sizes. One author asked me about image sizes and resolution: “If a print cover is 5 x 8 inches, then you need an image that is 1500 x 2400 pixels, right?”
Let’s go back to DPI. The answer on the surface level is that yes, a 5 x 8 inch cover at 300 DPI is 1500 x 2400. However, if you’re designing a book cover, you also need to take into account the back cover (also 5×8) and the exact width of the spine, plus the bleeds.
Bleeds sound dramatic, don’t they? It just means there needs to be “extra” around the entire image (bleeding around the edge, so to speak) that will be printed so that when it’s cut, it can have color all the way to the edge.
If you’re going to print a cover with Createspace or Lulu, they have visual templates that explain the specific measurements, though they are easier to interpret if you understand the theory behind it.
Same thing goes if you’re printing a postcard. If you want a full-color 4×6 postcard, your image file will actually need to be at least 4.25 x 6.25 so that when the printed cards are sliced to size the color goes to the edge.
Pro Tip: Templates
Most printers will provide templates for different sizes of postcards, CDs, and anything else you plan to print. The templates can be useful as well for one more aspect of printing—the clear space. Essentially, given that your postcards, covers, and brochures are being printed by the thousands, the cuts can vary up to about a quarter inch. So you want to ensure that no important text is too close to the edge.
CMYK and RGB
Generally speaking, you want to export a graphic in RGB for web, CMYK for print. However, most of the time when you upload a CMYK graphic online it looks just fine. There are exceptions to that, so if a graphic looks funky, check out if you exported CMYK or RGB.
And on the print side of the fence, some digital printers want RGB vs. CMYK. So the longer answer is that for print files, always check what the file requirements are and export them the way the printer requires them.
Foundations of Resolution
If you understand these foundations of resolution you’ll have an easier time preparing graphics for both web and print. On your web site, you really don’t want to upload the 300DPI CMYK cover graphics, they will take a thousand years to load in the browser and that will frustrate your readers.
On your printed flyer or in an ad, you don’t want to use that low-res web version of your book cover, it will look blurry and unprofessional.
Different design applications will have this information in different places, and that part can get a bit frustrating. As I mentioned earlier in the article, if you are looking to figure out how to do something, typing your question into Google, or some keywords into Youtube, will usually find you some kind of a tutorial. Today I searched on “Exporting animated gif in Illustrator” and was able to figure out the workaround to make that happen.
If you’re the type of person that learns better by having someone walk you through something, one option is to hire a graphic designer you’ve worked with to teach you some basics. If they’re local to you, they can come over to your place and show you on your own computer. If not, there are screen-sharing webinar tools like Zoom. I recently did an hour-long Photoshop tutorial for a client of mine where she logged in to Zoom and she watched what I was doing on my own screen while I talked her through things.
You don’t necessarily need to become a professional designer to learn to work with some basic image editing tools in order to export book covers or banners at different file sizes, or create some of your own postcards. Knowing about file sizes and exporting images will help you ensure your work looks professional and keep you from having to pay a designer a fortune each time you need something updated.
A graphic designer, artist, author, and presenter, Shauna travels nationally offering intensive education in the transformative arts of ritual, community leadership, and personal growth. Her mythic artwork and designs are used for magazine covers, book covers, and illustrations.
She’s the author of urban fantasy and paranormal romance novels includingWerewolves in the Kitchen, A Winter Knight’s Vigil, and A Fading Amaranth. She is also the author of the nonfiction books The Leader Within, Dreamwork for the Initiate’s Path, and forthcoming The Facilitation Handbook: Enchanting a Group
Shauna’s writing and artwork is inspired by the mythic stories of heroes, of swords and magic, and of the darkness we each must overcome. That the challenges we face shape us, and help each character—each person–to become heroes. Shauna is passionate about creating experiences, spaces, stories, designs, and artwork to awaken mythic imagination. Web Site: http://www.shaunaauraknight.com
Graphic Design and Consulting:
Shauna’s artwork and graphic design are used for fiction and nonfiction book covers and marketing collateral. Her work often has a dark, mythic, textural flavor. If you’re looking for an honest opinion on your covers or other collateral, she’s happy to offer a brief review for free. If you’re interested in engaging Shauna for graphic design, mention this article for 30% off your first project (maximum of $200 off). You can view her portfolio here: http://shaunaknightarts.wordpress.com