The Graphics Governess on OMHG!

I was thrilled to be invited by the lovely, indefatigable, positively ebullient Jessika of Oh My! Handmade Goodness to become a monthly contributor! I am joining the ranks of a stupendous group of talented folks and I’m so honoured and pleased to be among them. Once a month I’ll be posting some graphics goodness so if you have any special requests, don’t be shy to leave a note in the comments. First post is up right here. Thank-you so much, Jessika!

The Graphics Governess: Image optimization part 3, print

Here we are, part 3! Time to get your images ready for print. Not too different from prepping for web, but with a few important distinctions. As noted in part 1, we’ve already determined that our images need to be at 300 dpi. Let’s go!

Step 1: Determine your dimensions

Just like web prep, the first step is to know what final size your image needs to be. In this case you’ll likely be guided by your print house’s specs, or by whatever guide you’re following for the piece you’re producing. For this exercise I’ll be using the same image as for web prep for my example. In this case, let’s say I need a final image size of 4.5 x 4 inches. Notice that we’ll be dealing with inches (or centimeters, whatever your preference) rather than pixels for the dimensions.

Step 2: Determine which aspect (height or width) is non-negotiable

Same as for web prep. In this case, visually I want to keep as much width as possible, so I’m going to start by establishing my width first, then crop my image to achieve the height.

Step 3: Get busy in the graphics program of your choice

Open your image in Photoshop. Let’s start by giving the image the correct resolution.

Image > Image Size: resolution

1) Go to Image > Image Size

2) De-select the box that says Resample Image

First things first – we don’t want our image to increase in size, we just want to assign the correct resolution. If we don’t de-select the Resample Image box, we will increase the pixel resolution without allowing the image to adjust proportionately by re-sizing itself.

3) Type “300” into the resolution box

You may notice that as you are typing, the numbers in the width and height boxes are also adjusting. Now that you’ve increased the resolution, your image will be smaller in width and height, to compensate for the resolution adjustment.

4) Click OK

Your image is now at the correct resolution for print. Yeah! Now let’s work on those dimensions.

Image > Image Size: dimensions

5) Go to Image > Image Size

6) Re-select the Resample Image box

7) Enter the non-negotiable aspect of your image into the corresponding document size box

When preparing images for print, you can skip over the pixel dimensions width and height boxes and go straight to the document size boxes. Feel free to adjust the increments to inches in the drop-down menu to the right, then enter either the width or height you need for your image. In my case I will enter 4.5 into the width box. You’ll see that the height will adjust proportionally as the width is entered. There’s our motto again: no squishies, no stretchies. Just a nice, proportional image.

If the number in the height box does not adjust as you type in the width, make sure the Constrain Proportions box is selected at the bottom.

8) Hit OK

You now have the correct resolution AND the correct width on your image! Pat yourself on the back. If your image is looking a little small on your screen, you can either use the Zoom Tool (Z) from the Tools palette or go to View > Fit on Screen.

To finish up, we need to adjust the height. To do this, you’ll need to follow similar steps to those we looked at for web prep. Here we go:

9) Go to Window > Info

This opens up the Info palette. This will allow you to monitor the size of your selection.

10) Go to Photoshop > Preferences > Units & Rulers and set the rulers to inches

Alternately, you can right-click on the rulers along the edges of your document and select “inches”. If you don’t see rulers along the edge of your document, go to View > Rulers.

11) Select the Rectangular Marquee tool in the Tools palette, or hit M

Click and drag the Marquee tool to make a selection rectangle anywhere on your image – don’t let go of the mouse.

13) Hold down the space bar and adjust the position of your selection

While still holding down your mouse, hold down the space bar and use your mouse to drag your selection to the far left edge of your image.

14) Let go of the space bar and extend the width of your selection

Still holding down your mouse, let go of the space bar and extend your selection to the far right side of your image. Your selection should now span from one edge of your image to the other.

15) Adjust the height of your selection

To achieve the right height, continue to hold down your mouse (almost done!) and drag your rectangle either upwards or downwards while watching the numbers in the Info palette. Make sure to maintain the width all the way across your image while you are doing this – the Info palette should always say that your width is 4.5 inches. Once you’ve reached a height of 4 inches in the Info palette, you can let go of the mouse. Don’t worry, you still have time to move the selection afterwards.

Adjusting the height of your image with the marquee tool

16) Using the arrows on your keyboard, move your selection up or down

Be sure not to move the left or right arrows, otherwise you will lose the correct width of your image. Move your selection up or down until you are happy with how it looks.

 17) Go to Image > Crop

And voilà! You have an image that is set to 300 dpi, is 4.5 inches wide and 4 inches high. No weird crunchiness or excessive file weight. No stretchies or squishies. Hooray! If you like, take some time to do some photo retouching. Then, you need to adjust the colour profile and then save it.

18) Go to Edit > Convert to Profile

This part could also be a whole other lesson, but today we’ll stick to the basics. If your image has come right off your camera, it will be in RGB. As a last step before sending your image to print, you need to convert it to CMYK.

19) Select CMYK – Working CMYK – U.S. Web Coated (SWOP) v2

There are many options here – feel free to explore and get to learn how these work, but generally this one should cover your bases.

20) Go to File > Save As

Save your image to the appropriate folder – for print, ideally you would save as a TIF to maintain as much file information as possible, but JPEG can work too. Now go celebrate with some cookies, and then prepare a few more images.

Any questions or feedback? Please don’t be shy!

Hugs and kisses, the Graphics Governess.

Panda says aroooo well done!

Graphics Governess: Image optimization, part 2

Hello and welcome to part 2 of 3 of our image optimization series. As of last week, you had decided what you were prepping your images for, and as a result, what resolution they needed to be at. If you need to prep your images for web, this week’s lesson is for you! It may seem as though there are a lot of steps to follow, but after your first few tries the process will go a lot more quickly. Let’s get started!

Step 1: Determine your dimensions

This is the second part of the resolution puzzle. You need to know what width and height your image needs to be. Your blog or website etc. will help determine that for you – some sites such as Facebook will even provide you with the dimensions you need to help take the guesswork out of it. Let’s say, for this exercise, that you’re working on an image you want to post on your blog. Let’s say that your blog column is 600 pixels wide; this is, therefore, the ideal (and maximum) width your image can be. Let’s say, as an added requirement to the exercise, that you also need the image to be 450 pixels high. If you aren’t able to upload a correctly-sized image, it will get squished/stretched/re-sized by the website in an attempt to make it fit. If you’ve ever noticed an image looking weird online, an incorrectly-sized image is often the culprit.

Step 2: Determine which aspect (height or width) is non-negotiable

Unless your image happens to be perfectly proportioned to fit exactly into whatever you’re preparing it for, you’re going to have to make some decisions about cropping. In this example, we want a final image that is 600 pixels wide by 450 pixels high. I want my image to fit the full width of the blog column – so in this case, the width is non-negotiable. This means that once I’ve adjusted the width, I will then have to crop my image to achieve the height requirement – otherwise the image will either squish or stretch. We don’t want that. No squishies or stretchies! Depending on your situation, always start by determining whether the height or the width is non-negotiable, and then work from there.

Step 3: Get busy in the graphics program of your choice

Open your image in Photoshop. (This is my trusty go-to program for all bitmap graphics work – there are others out there, so feel free to use/obtain what is possible for you. You can get a 30-day free trial of Photoshop here.) Our first order of business will be to assign the correct resolution to our image.

Image > Image size: resolution

1) Go to Image > Image size

Here is a photo of everybody’s favourite poster girl, Panda. Take a look at the number in the resolution box (5th box down). If it’s already at 72, great – you can skip the next few steps and pick up again below at item 6. If your image’s resolution is not set to 72, this is where we need to start.

2) Deselect the box at the bottom that says “Resample image”

If this box is not deselected, the pixel dimensions of the image (top two boxes of the Image Size dialogue box) will also adjust as you adjust the resolution. We don’t want to do this – we want to be able to adjust the resolution and the pixel dimensions independently of each other. So make sure this box is deselected before continuing.

3) Type “72” into the resolution box

4) Hit OK

Visually, nothing will have changed, but your image is now at the correct resolution for web. Hooray! Next, let’s tackle the dimensions of your image.

Image > Image size: pixel dimensions

5) Go to Image > Image size

6) Select the Resample Image box

It’s important that the Resample Image box is re-selected so that we can access the pixel dimensions at the top.

7) Enter the non-negotiable aspect of your image into the corresponding pixel dimensions box

It may be either a width or a height. In this case, we will type in 600 in the width box. Notice how as you type in the width, the number in the height box will adjust accordingly. This is good. We want a nice, proportional image that looks exactly like the original. What was that motto again? Right. No squishies or stretchies.

If the number in the height box is not changing as you type, make sure the Constrain Proportions box is selected.

8) Hit OK

Photoshop has now resized your image. If it’s looking a little zoomed-out on your screen, double-click on the Zoom Tool (at the bottom of the Tools palette) or go to View > Actual Pixels to see it at its correct size.

Now our image is at the correct resolution AND the correct width. We’re almost there! The only thing we need to do now is adjust our image’s height to 450 pixels. There are a few ways to go about this – my preferred route is via the Marquee tool, because it allows me to see the area I will be cropping to and to move my selection around until I’m happy with how it looks.

This next part may look like a lot of work but it’s really just a lot of description and preliminary setup. Once you’ve gone through the process a few times, it will go by lickety-split.

9) Go to Window > Info

This opens up the Info palette. This will allow you to monitor the size of your selection.

10) Go to Photoshop > Preferences > Units & Rulers and set the rulers to pixels

Alternately, you can right-click on the rulers along the edges of your document and select “pixels”. If you don’t see rulers along the edge of your document, go to View > Rulers.

11) Select the Rectangular Marquee tool in the Tools palette, or hit M

Click and drag the Marquee tool to make a selection rectangle anywhere on your image – don’t let go of the mouse.

13) Hold down the space bar and adjust the position of your selection

While still holding down your mouse, hold down the space bar and use your mouse to drag your selection to the far left edge of your image.

14) Let go of the space bar and extend the width of your selection

Still holding down your mouse, let go of the space bar and extend your selection to the far right side of your image. Your selection should now span from one edge of your image to the other.

15) Adjust the height of your selection

To achieve the right height, continue to hold down your mouse (almost done!) and drag your rectangle either upwards or downwards while watching the numbers in the Info palette. Make sure to maintain the width all the way across your image while you are doing this – the Info palette should always say that your width is 600 pixels. Once you’ve hit a height 450 pixels in the Info palette, you can let go of the mouse. Don’t worry, you still have time to move the selection afterwards.

Adjusting the height of your image with the Marquee tool

16) Using the arrows on your keyboard, move your selection up or down

Be sure not to move the left or right arrows, otherwise you will lose the correct width of your image. Move your selection up or down until you are happy with how it looks.

 17) Go to Image > Crop

And voilà! You have an image that is set to 72 dpi, is 600 pixels wide and 450 pixels high. No excessive weight to slow your website down or chomp on your bandwidth. No stretchies or squishies. Brilliant! If you like, take some time to do some photo retouching. Then, you need to save it.

18) Go to File > Save for Web & Devices

This part could be a whole other lesson, so for today let’s keep it simple. Take a look at the right-hand dialogue box. Since this is a photograph, we’ll want to save it as a JPEG. The other item you want to pay attention to is quality. To keep your images looking as decent and un-crunchy as possible, it’s preferable to stay above 80. I like to keep my images at 100, but I always take a peek at the bottom left corner of the dialogue box to see how heavy my image is, just in case. You can select from a variety of internet connections to see how fast your image will load at what speed.

Save your image to the appropriate folder, go upload it, and prepare a few more! Or, have a snack first. Web prep builds up an appetite.

Any questions or feedback? Please don’t be shy! See you next week, for our final installment: print.

Hugs and kisses, the Graphics Governess.

Panda says aroooo well done!

Graphics Governess: Image optimization, part 1

Hooray, our first lesson! And it’s a big one, so I’ve split it up into three installments. This week we’ll familiarize ourselves with the basics of image optimization. Next week we’ll continue with a step-by-step guide for web optimization, and the following week we’ll conclude with print optimization.

Image optimization is hugely important. Why? Because every single action that you take – sending an email attachment, posting on your blog, printing a photograph, etc – is impacted by the information contained in the images you are using. Want your site to load efficiently, your emails not to bounce, your printables to look sharp and sparkly? Grab some tea and cookies and get ready to boss those images into shape.

Step 1: Determine what you need to prep for

Before anything else, determine what you want to accomplish with your images so you can plan your workflow accordingly. It’s usually pretty straightforward: if you’re planning on emailing, sharing via download or posting online (on your website, blog, Etsy shop, or on twitter or facebook, for example), it’s web prep. If you’re planning on printing it, well – that would be print prep :)

That being said, in some situations you may be working on a project that requires both web AND print files – for example, if you’re creating a catalogue of your work that you want to be able to share online and email to clients but you also need to provide a printed version to mail out. If this is the case, you will need to prep two separate sets of images; so set yourself up to prepare the print files first, then move on to the web files. Always start with the larger files (print) and work down to the smaller files (web) because trying to increase the resolution of a file after it has been reduced will not work. Trust me, it’s not worth learning the hard way.

Step 2: Determine the resolution you need

Resolution is a critical factor that directly influences how good your final digital images will look, so don’t skip it because it sounds intimidating: like many things, there is definitely a gray area, but it really is kinda straightforward. Here’s a quick lesson on resolution – and not the New Year’s kind. Actually, that would be a much longer lesson. Don’t you already feel less intimidated now?

DPI = dots per inch. This number, combined with the dimensions of your image (which we will cover in the web and print installments) will help you determine whether the resolution of your image is correctly set up for either web or print output. Technically this is a printer setting – if you’re working digitally, in Photoshop for example, the definition would be PPI – pixels per inch. We’re going to stick with dpi as a general term, just to keep things simpler.

Fact: There is a finite amount of dpi that looks good on a screen, and I’m not talking about those delicious new iPad screens – I mean your regular, basic ol’ computer screen. Also, there is a finite amount of dpi that looks good in print.

Translation: More/higher does not necessarily mean better – you will reach a certain sweet spot of greatness, and then it just becomes dead weight.

Fact: The finite amount of dpi that looks good on a screen is not the same as the finite amount of dpi that looks good in print.

Translation: even if an image looks GREAT on your screen, it could look absolutely awful in print. Why? Because your computer screen makes things look fabulous at 72 dpi. Paper makes things looks fabulous at 300 dpi. See the difference there? Don’t trust your screen, trust the numbers.

Bottom line: If you’re preparing an image for a web application, your image’s dpi resolution should be at 72. If you’re preparing an image for a print application, your image’s dpi resolution should be at 300.

There are further intricacies to this – with the advent of pretty iPad screens and responsive web design, it’s possible that some online images may be at a higher resolution than 72. Also, when printing, you could venture to go down as low as 150 dpi and still get away with it in some cases (I recommend avoiding this if and whenever possible though). And we haven’t even started discussing bitmap vs. vector – that will be for another post. But as a general rule, stick with this and you’ll be able to avoid a lot of mishaps.

Print: 300 dpi  Web: 72 dpi

Let’s stop here for today – at this point you should be confident about your workflow and what resolution you’ll be setting your images at. Next week we’ll really get our hands dirty so I hope to see you then. If you have any questions or requests, feel free to let me know in the comments!

Hugs and kisses, the Graphics Governess.

The Graphics Governess

June 5th, 2012

Graphics Governess

Makers! Creators! Bloggers! Friends and neighbours!

I see you – sitting in front of your computer screen, sobbing frowning, wishing Photoshop/Illustrator/etc. could read your mind. It’s not fun. Some might even venture to say that it leads to rapid hair loss. Not to mention, it also steals valuable making/creating/blogging/cat video viewing time away from you.

There are a variety of tips that I know would turn that frown upside-down. Yeah, I could just tell you to Google it, but then I wouldn’t be able to use that fun graphic you see up there. Also, I wouldn’t feel quite so helpful. And since Girlfriday’s motto is Sharing is Caring, I thought I’d open up my bag of tricks Mary Poppins-style and do a little of just that.

Next week, we’ll begin with IMAGE FORMATTING. Dimensions, resolution, optimization… all those nit-picky things. If you’ve ever been unable to email a file because it weighs a ton… if you’ve ever wondered why your product shots are crunchy… in short, if you’ve ever had to handle an image on your computer, these are useful, good things. I promise.

Need a spoonful of sugar? If there’s a design issue in particular that’s driving you batty, let me know in the comments and I’ll see what I can do. See you next week!

Hugs and kisses, the Graphics Governess.