Tech Tip: Crop and Resize Images

It is sometimes useful to be able to crop an image to choose the most important part of an image, and you might also need to resize a large image to make it smaller. It can also be useful to resize images if you want to display them side by side (then you want the height to be the same), or if you want to stack them one on top of the other (you want the width to be the same). Here's a sample blog post that shows images in a row and images stacked.

For this assignment, I'd like you to resize images for a blog post: pick 3 images to stack on top of each other (400 pixels wide is a good width) or pick 2 images to line up next to each other (same height and not more than 400 pixels wide). For more practice, you can do both! 

Image editing software. If you already have image editing software, such as Adobe Photoshop, on your computer, you can complete this assignment using that software. If you use a Mac computer, the latest version of Preview allows you to crop and resize an image; if you use Chrome OS (i.e. a Chromebook computer), it has photo editing built into the OS. There are also free online services, such as Pixlr, Adobe Photoshop Express (a free online, very simple version of the Adobe software), Fotor, and many more. I haven't written out specific instructions for any of these options; instead, I would encourage you to spend a few minutes exploring, and see what option looks most intuitive to you.

STEP ONE: Choose images. Find the images you want to use. If you use images from the Internet, keep the browser tabs open or bookmark the pages so you can get the webpage address to use for image information at the bottom of your post.

STEP TWO: Stacked. For stacked images, you need to start with images that are at least 400 pixels wide, and then shorten them as needed. Use the image editing software of your choice to resize each of your three images so that it is exactly 400 pixels wide. You might want to rename the images as you resize them so you know which is which; you can just add 400 to the front of the image file name, for example.

Note: The 400 pixel width is good for a blog post; if this is for a Storybook webpage, you might want to use wider images.

OR

STEP TWO: In a row. If you are doing images in a row, then you need to resize them so that they are the same height, and so that the combined widths do not exceed 400 pixels. One way to make the math work is to start with the image that is more wide than tall; resize that image to be 200 pixels wide and then see what the height is. Next, take the image that is proportionately taller, and resize that image to be the same height as the first image. The combined total width is guaranteed to be less than 400 pixels. 

Note: The 400 pixel width is good for a blog post; if this is for a Storybook webpage, you might want something with a greater total width. 

STEP THREE: Add images to a blog post. Next, create a blog post, and add your resized images. Choose Original Size for each image to make sure the image displays at the size you chose. 

* If you are putting your images in a stack, you can include space between them or not, using the return key to create the space between them.

* For images in a row, you need to highlight the images and click Tx to remove the default spacing around each image, and then you can line them up next to each other or put space between them using the space bar.

STEP FOUR: Image information. After you have the images lined up the way you want, add the image information at the bottom of the post.

Finishing Up. After you're shared your resized images in a blog post, you're all done with the Tip and ready to do the Declaration. Remember to use "Tech Tip" to label your post.

Here's a screenshot of my sample blog post: