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!

I don’t have as much time for reading blogs as I would like but I have my favourites. One of them is Aran Goyoaga’s blog, Cannelle et Vanille – I discovered it several years ago when I was first figuring out my gluten-free/auto-immune diet and I’ve since spent a lot of time on there. I’ve made her recipes (delicious), drooled over her photos and soaked up her stories – I adore recipes that come with stories. And I want to LIVE in her photographs. I rarely comment, which is odd because I don’t usually have a problem sharing my thoughts (haha) and, for my part, I love receiving comments over here – but perhaps I just felt shy about it. Even though I had never met Aran in real life, over time I became certain that we would get along: that we would hang out if we lived nearby, or that she would come visit and love Montreal/Hudson and take pictures of my dog (haha just kidding… not really). It didn’t help that we were already friends on Twitter and she was so sweet and gracious (and likes a lot of the same music I do – a sure sign of get-along-ness).

So this past February, when I found out that the lovely Mayssam was bringing Aran to Montreal for a workshop… well. You can imagine my excitement. And slight panic. The week before the workshop I was so excited I forgot that I barely know how to use a camera properly. On Saturday morning I packed up a few props, our camera, some backup gluten-free crackers and Panda and we headed into town.

We arrived at the lovely, bright and airy SAT Foodlab at 9am – I invited Panda and Christian in for a quick hello (Panda may or may not have peed on the industrial entryway carpet – sorry SAT!) and hugged Mayssam and Aran because I just couldn’t help myself. I was so happy to be there.

My Saturday with Cannelle et Vanille

It was an AMAZING day. Aran shared how Cannelle et Vanille came to be, we all took turns introducing ourselves, and then Aran got to work on the first of many styling projects for the day. The ease with which she put a shot together was amazing to watch – like a true pro, she made something hard look incredibly easy. And delicious! I think my stomach grumbled all day, everything looked so tasty. Aran shared camera tips and demonstrated her process – from setup and styling to lighting strategies, bounce boards and photo editing. One key element that really stayed with me was to decide what story you want to tell with your photograph. Take the time to shape the mood you’re going for and the rest will fall into place.

The talented chefs at Foodlab prepared a gorgeous lunch for everyone and were on hand all day to help – it really felt like an amazing day at camp. Everyone was happy to be there, pitch in, learn and share. Aran styled a beautiful salad of shaved fennel, fava beans and quail eggs, a gorgeous (and gluten free!) trifle that I wanted to devour and a tray of luscious roasted tomatoes. I was in heaven.

My Saturday with Cannelle et Vanille

That afternoon, it was time for us to try our hand at what Aran does so well – it was the part of the day I was most nervous about. There was a too-great abundance of cool props and beautiful food, and I was almost frozen with indecision and uncertainty. A beautiful piece of fabric caught my eye, and then a plate, and a fork. I started fiddling with radishes, sprigs of thyme, and a strand of cherry tomatoes. It wasn’t bad. I played with my camera settings but I could tell they were wrong; although I knew what I wanted my shot to look like, I wasn’t sure how to get there. I raised my hand and Aran came over. She looked at my setup and said – it’s good (huge sigh of relief), but why so much stuff? Look how beautiful these tomatoes are. Just make it all about the tomatoes.

She was so right. We cleared out the radishes and thyme and put the tomatoes front and center – then Aran scattered a few herb sprigs, artfully crushed up some crumbs and lo and behold, it became a beautiful shot of true simplicity. Then she helped me find the sweet spot in my camera, and here’s what I came up with. It’s my Anile’s-best-try-mostly-helped-by-Aran shot.

My Saturday with Cannelle et Vanille

Another aspect of the workshop that I really enjoyed and appreciated was meeting and befriending a whole whack of talented, sweet and funny women who were just as pleased as I was to be there – it’s been so much fun to get to know them and keep in touch with them. As for Aran, she was everything I thought she’d be and more – sweet, funny, beautiful, incredibly generous and humble, and just a joy to be around. I soaked up as much as I could that day and am still energized by it over a week later. I know that each person can take away something different from the same experience but after many months of chronic illness and the compromises that come with that, this day was really memorable for me and truly kicked off this summer in the best way possible.

A huge, special thank-you to the wonderful and sweet Mayssam Samaha who orchestrated the entire weekend from beginning to end, and whom I was so happy to finally get to meet in person. This week I’ll be making some gluten-free strawberry trifle and getting to know a few more settings on our camera. Thank-you Aran :)

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!

Happiness Is…

June 17th, 2012

Anniversaries! And contests for bling!!

Happiness Is... Anniversaries and contests for bling!

Image courtesy of Brazen Design

My dear friend, the gorgeous and talented Rachel of Brazen Design, is celebrating FIVE YEARS OF JEWELLERY MAKING. That’s pretty amazing. Not only that, but she’s holding a contest and wants to give away lots of loot. I am entering, every which way I can. Normally I don’t post so many pictures of myself, but Rachel says this is how you do it. So here are some pictures (thank-you Christian) and a story from me.

Once upon a time there was a little girl named Anile. Every time Anile went to the toy store, she would see all these amazing items personalized with childrens’ names on them. Door plaques, toy cars, photo frames… She would always search hopefully to see if her name was there. It never was. As little Anile got older, she noticed personalized toothbrushes at the drugstore, and would come across keychains, bracelets… but her name was never there. Those were very sad times. Then one day, Anile met RACHEL!! and she discovered BRAZEN DESIGN!!! And she FREAKED OUT!!! And ordered an Anile necklace. Now Anile is happy, happy happy :) HAPPY FIFTH ANNIVERSARY BRAZEN DESIGN!! Here’s to many, many more years of gorgeous, feisty designs :)

p.s. Rachel I think I need some bracelets. xoxox

Happiness Is... Anniversaries and contests for bling!

 

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.

Illustration Inspiration

June 13th, 2012

A few weeks ago the lovely Lori of Automatism shared this video on Twitter and I just loved it. Quentin Blake’s work was a huge part of my childhood – he and Roald Dahl made pure gold together. Really fun to listen to him chat about his work, catch a glimpse of his studio and observe a little demo. Always such a privilege to hear about someone’s process, especially when you’ve admired them for so long! Enjoy!

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.

Happiness Is…

June 1st, 2012

Being on the mend. Blogs are weird – they really only show a small side of your life, and it can be hard to know how much to share. My health hadn’t been on track for months and I’d worked so hard to try and turn it around, but things continued to deteriorate – the past three months have been particularly rough. Ulcerative colitis is a pretty unforgiving disease sometimes – it requires frequent and sometimes difficult compromises. When I need to re-prioritize, I put health first, clients second, and everything else can wait: I’ve had to take a step back from my well-intentioned personal projects (I miss you, Sketch of the Week – let’s make a date for next week).

Happiness Is... Being on the mend

That being said, after three visits to the doctor and a generous menu of daily meds for the foreseeable future, I’m finally starting to feel better. My walks with Panda have gotten longer and I’ve enjoyed some really great days. Summer feels full of promise and I’m so grateful for the wonderful clients that I am fortunate enough to work with. As things slowly get back to normal, I’m looking forward to getting back to my little blog projects that I enjoy so much. Speaking of which, I helped someone with a design issue on Twitter the other day and realized that this may happen all too often for a lot of folks, so I’ve decided to start a series of design help posts – stay tuned for that to start next week. And, as per usual – have a lovely weekend, everybody!