Resizing covered: Proportional Image Resizing | Cropping Images
Proportional Image Resizing
FULL DETAIL
For those who have never done this before.
1. First you need a program that resizes images. My suggestion for my own clients is Gimp. I know it’s a weird name, but for a freely distributed image manipulation program, it doesn’t get much better. You can find information about it at http://gimp.org/ and download it at http://gimp.org/downloads/.
2. Once you have downloaded Gimp, install the program, this can take a few minutes.
3. After installation is complete, open Gimp and you should see what I see in Image 1.
Image 1
4. To edit an image, drag and drop a picture on to the Gimp board, or use the menu on top with File > Open, then browse your files till you find the picture you wish to edit. Select and open that file. As you can see in Image 2, I inserted Autumn Leaves.jpg which comes standard with Windows Vista in the Pictures folder.
Image 2
5.1 Now to change the size of this image to something that will fit on my webpage. Usually websites are not designed to be wider than 1000 pixels wide to support many monitors that are still being used by the masses. This means, your site will usually only be able to fit a picture that is smaller than 1000 pixels. Also remember that much of that space is being used by the website design itself or maybe you have two columns and cut the size available. With those factors in mind, I’m going to want to resize my image to 400 pixels wide.
5.2 To resize my image to 400 pixels wide while keeping the image proportional, go to the top menu and click on Image > Scale Image. This will pop a new box open on your screen, refer to Image 3. Under Image Size, I changed the Width to 400. With that with chain icon to the right in it’s linked state, it will automatically change the Height number to be a proportional size when you click on the Scale button or click your mouse in the Height box. Note you can change the measurements on the right from pixels to inches and other units you might wish to use. Once you have your new Width and Height set, click Scale. Your screen should now look like Image 4.
Image 3
Image 4
6. Now that your image is the correct size, you need to save it to a format that your website will be able to display. I usually use JPEGs for this, so click on File > Save As. A new window will appear on your screen again and here you can name your file and choose a location to save it ( refer to Image 5 ). When saving files for the web, it is always good practice not to have spaces in your name, so I am going to rename my picture Autumn_Leaves.jpg. Use of an underscore or hyphen will save you a lot of problems in the long run when saving images. Also remember to not use any odd characters like / $ & . ‘ “ etc. At the end of your picture’s name, make sure there is a .jpg. If it says .xcf or any other type, you can write in .jpg instead or use the Select File Type option then find and click on JPEG image. Also note, you can browse to what folder you wish to save this image in, if you don’t want to overwrite your original image, I would suggest you make a new folder or find a good place to put images you are using for your website. Once you have done the previous steps, click Save. Oh look another window popped up!
Image 5
7. You now have the Save as Jpeg window open ( refer to Image 6 ). On this menu you can change the quality of the image to help keep the file size low which is beneficial to your website users, so they don’t have to load large files. I suggest you don’t go below 65 / 70 on the quality or the image will look pixilated. There are many more options here to choose from, but I’m not going to cover all of them since they aren’t that important for what we are doing here. Now click on Save and you are done. You can find your image in the directory that you specified and can now upload it to your website.
Image 6
BRIEF OVERVIEW
If you have done this before, but just need a quick reminder of the steps.
1. Skip this step if you have Gimp already, if not, download Gimp here: http://gimp.org/downloads/
2. Install Gimp if needed.
3. Open Gimp. ( Image 1 )
4. Open a picture to edit by drag and drop or use the top menu: File > Open. ( Image 2 )
5. Change the image size from the top menu: Image > Scale Image. ( Image 3 & 4 )
6. Use the top menu: File > Save As then type in a file name like: picture.jpg and find a location for your file. ( Image 5 )
7. Adjust quality of the image no less than 65 and save. Upload image to your website. ( Image 6 )
Cropping Images
FULL DETAIL
For those who have never done this before.
Same steps as above in 1-4 and 6-7 so please refer to those, I will start this one at step 5.
5. Select the Rectangle Select Tool in Image 7.
Image 7
6. Click and drag the Rectangle Select Tool across the part of the image you want. Let go of the mouse button when you have the correct area selected, it will leave a dashed line where you selected. ( refer to Image 8 )
Image 8
Note you can see the selected area’s width and height on Image 7 toward the bottom just under “Position”
.
7. With the area selected, go to the top menu and select Image > Crop to Selection.
8. Proceed with steps 6-7 from above.
BRIEF OVERVIEW
If you have done this before, but just need a quick reminder of the steps.
1. Skip this step if you have Gimp already, if not, download Gimp here: http://gimp.org/downloads/
2. Install Gimp if needed.
3. Open Gimp. ( Image 1 )
4. Open a picture to edit by drag and drop or use the top menu: File > Open. ( Image 2 )
5. Select the Rectangle Select Tool. ( Image 7 )
6. Select the area you wish to keep. ( Image 8 )
7. Use the top menu Image > Crop to Selection
8. Use the top menu: File > Save As then type in a file name like: picture.jpg and find a location for your file. ( Image 5 )
9. Adjust quality of the image no less than 65 and save. Upload image to your website. ( Image 6 )