Hello Mrs Siwak, Hannah and Class 62!
Mrs Siwak emailed me with some questions about resizing photos, and I'm a little confused about your process. I thought I'd put together a little step-by-step so you can see how to do it using a free website called Pixenate.com. If you have Adobe Photoshop (the program, *not* the photoshop.com website) then it's a bit quicker to do this than my steps using a website, but either works fine.
This is a Wiki. Which means that you can edit and change the text as well. That's perfectly fine. If I make mistakes or am not clear enough, please feel free to edit my words so that they make sense for other people.
(A little note - I originally wrote the first draft late at night and in a hurry - reading it in the morning showed that there were many typos and grammatical errors. I've edited the text to make it clearer. Because this is a wiki, it has this feature called "Revision Control", which allows you to see any prior earlier versions of the text and compare the changes. You can use this to check what has been changed from version to version for each page, and who changed the text - I have a few email address that I use to log into various systems, so you'll see me editing the text with different email addresses. From time to time, you'll see other people adding and commenting to this document - in a sense, this is a "living" document - kinda like our little mini version of wikipedia for this project. If you're NOT editing this page, but just reading it while logged in, you can see a More Actions button in the top right corner. Click it and select Revision History - then you can see all the changes to each page on the wiki.)
Here are some questions from Mrs Siwak highlighted in orange.
Hannah has shown me how to resize pictures. We are using the latest version of adobe. Ian: which version of Photoshop is this? Are you talking about a program running on a computer (because I'm a little confused about the "uploading" mentioned in (2).
Response: Yes, I meant Adobe Photoshop version 6 and we are opening the photos in this program.
Questions about process.
1. Students take pictures with any camera. Yep.
2. They upload to photoshop. If you mean, students open the files in Photoshop, yes.
3. They crop to get rid of anything they don't want in the picture.
4. Does the picture need to be 960x640 before editing (ie changing it to 228x150) or can it be any size? We realize this would cause some distoration. Not all the pictures the kids have taken are 960x640 to start off with.
OK - this is a bit tricky. I'm not sure whether this means that the pictures are BIGGER or SMALLER than 960 (width) x 640 (height). It *really* helps if they're bigger - it's not so helpful if they're smaller. Whenever we talk about dimensions with two numbers, like 200 x 100, the numbers are ALWAYS referring to the width of the image first, and then the height. If you've done cartensian geometry, this is also known as x and y coordinates. x comes before y in the alphabet and x always refers to the horizontal direction (or the axis), and y to the vertical direction (or height).
(At some point later, we'll talk a little about 3D cartesian geometry, where we use x, y AND z - this is used for the augmented reality stuff, because it's in 3D. The world isn't flat - I'm sure you've noticed that. :D)
Back to our photos ... imagine your digital photos are similar to a printed photo in newspaper. If you look closely at the newspaper photo, you'll notice that it's made up of tiny dots. The printing process uses a half tone concept, with dot aligned to a grid with columns and rows that have tiny spaces between them. Some artists like Roy Lichenstein have used this half tone idea of printing images and greatly exaggerated the size of the dots to create a style of art called pop art.
What does this have to do with your photographs? If you took a photo that was smaller than the size we needed and resized it to be bigger,
(ie. enlarged it using a computer - also known as "blowing it up") the dots (the screen pixels) that make up the image get expanded. We can resize upwards by a little bit and it'll usually look ok, but the more we blow up your photo, the blurrier it'll get. The computer can't create extra detail from the number of limited pixels in your photograph - computer's aren't that clever.
Here's a visual example of enlarging a small photo - see how the small photo is very blurry at the big size? Notice how the edge of the roof is also blocky? That's because the computer has taken the pixels that make up the smooth diagonal edge of the roof for the tiny thumbnail picture and made it bigger. We don't notice the pixels as blocky when they're tiny, but the larger photo has each small pixel blown up to be 4 times the size. It's not very pretty, is it?
 If you have a BIG photo and we're resizing it to be smaller - then that's a GOOD thing. Because we can always take a lot of pixels and throw some of them away to resize to a smaller size. In digital image processing (using Photoshop and other tools) - it's always works better if we're trying to create realistic pictures by taking a big picture and resizing to smaller. (The "realistic" bit is important. You can make lots of wonderful, creative art by going the opposite direction - that's not what we're trying to do here for this app, but I don't believe that realistic is good and other things are bad. I think both are wonderful and very useful - the "realism" is important for what *you* are trying to do with this app at the moment. That's all.)
So ... let's look at how we're going to process a photograph... I'm going to walk you through the process using a website called pixenate.com - the idea is still the same if you're using Photoshop. The icons look a bit different, but the principles are exactly the same.
Step 1:
I've already chosen "1. Choose your image to edit" and uploaded a photo that was originally 1280x960 pixels. You can drag out a selection by holding down the mouse at one corner of an imaginary rectangle and dragging across (it's called a "marquee") to the exact pixel size we want.
See in the screen shot below, there's a line of text just above the photograph that it tells me the selection size in the exact pixel size that I've dragged the marquee out to? It's set to 960x640, but unfortunately it chops the bottom of your school off. That's no good. What we need to do it to maintain the proportion of the selection in the correct ratio and resize to that.
(HUH? :D I'm going to leave you to add some text in here by editing this wiki page to explain to 5th and 6th graders what "maintain the proportion of the selection in the correct ratio" actually means... think of it as a little opportunity to help others - eventually - with your help and ideas, we'd like to open this process for other classes to try and make their own apps - you're intrepid trailblazers and we need your help and collaboration. Thank you!)
 Step 2:
So to keep the correct ratio, we're going to drag out our marquee first to the correct size (960x640) and then move the cursor to the bottom right hand corner. You'll notice the cursor has changed to an arrow. This allows us to stretch the rectangle BUT you'll notice that the size of the rectangle maintains the correct ratio. You can also move the cursor to the middle of the marquee area and hold and drag the marquee around. I've moved it so it's cropping your school photo while still keeping all the important bits in. It's not longer 960x640 - it's 1198x852 BUT it's the correct ratio.
 Step 3:
Now I choose the Crop tool (it's the icon with the scissor on the 2nd row). You can then crop the photo so all those unwanted bits are thrown away. See how the extra bits are outside the marquee? We now have a selection of the photo in the correct ratio, but not the correct size. After the crop, we're left with an image that's 1237 x 803 (in the correct ratio), but not the 960 x 480 pixels that we're after. That's ok - we're making progress.
 Step 4:
What's the next step? Yup - you guessed it. We're going to resize it. The current size is 1237x803 and I've tried to select as much as possible (the exact pixels don't really matter - it helps to get all of them, but it's ok to miss it by a tiny bit - but it was a bit tricky to select using the marquee tool on this website. It's much easier in Photoshop.) I've selected the RESIZE tool and typed in 960 width x 640 height and then click Apply.
 Step 5:
TADA - One lovely photo keeping all out important bits in. Look at the line of text above the photo and you can see the size is now 960x640. You can Click the Save the Disk icon in the bottom left (bonus marks if any of you actually know what the funny picture is of - it's something that people used a lot for computers but hardly anymore. And yes - when I was a kid using a computers, they really were floppy and bendy.)
After you've saved it, click the Resize tool icon again and enter your next image size (we need this as a thumbnail in the app when we show a whole range of different locations). The next image size is 392 x 264. After you've resized - DON'T FORGET TO SAVE IT!
 Step 6:
Now we select the picture again by dragging out a marquee and typing in our next size of 392x264. Save the image again.
 STEP 7:
Last step. Drag out a marquee and resize again to 228x150. Save the image.
 Now we're done with cropping and resizing one photo. There's some extra things you need to know about how we're going to use the processed photos in the app and how we rename the file names (VERY IMPORTANT) and how best to organize all these photos in folders. We'll talk about that in a couple of days.
Here's a video showing you how to use Windows Explorer to double check that your images are the correct pixel dimensions. If you're using newer versions of Windows, the process is very similar.
I hope that all makes sense. Please add your own comments and questions to this page - feel free to edit and make it clearer for everyone. Thank you!
|
Design >
