Working With Images And GIMP ******************************** `GIMP `_ is a free and open source image editing program. It is very powerful and can be used for all kinds of image manipulations. It is similar to, and has almost all of the same features of, Adobe Photoshop. We will be using GIMP to work with the images for our website and any marketing materials that you may produce. Following this guide will make the images and the products on our website much more appealing. Early in the website design process we decided that we did not want any products on the site without a corresponding, higher quality, image. We also want them to be standardized so that the experience is consistent across the platform. The basic rules are as follows: - All images pulled from the web must have one of the sides larger than 500 pixels - We never scale up as it will degrade image quality. Always scale down. If the image is not large enough, find a new image. - For images that are smaller than 500px x 500px (one side should always be at least 500px) make the canvas bigger and add a white layer behind it. - Always center the image in the canvas. - If you pulled the image from the web, then you can do a simple export to a png or jpg. - If the image is high resolution then it will need to be "Saved for Web". Image Size ============ The majority of the images we will initially be using are going to be pulled from the web. When searching in google, you can see the image size by mousing over an image. .. image:: images/imageSizeGoogle.png We need to have at least one of the side at 500px. The other side we can fill in with white space. For the initial image we want them without a background though it is probably not worth our time to remove the backgrounds from any picture. Most manufactures have their images on the site that way. When scaling an image we always want to scale down. This will ensure that there is no quality loss in the image. When scaling up the computer has to add detail to fill the pixels. The way it does that is to make the image more grainy and blurred. After saving the file from the web, open with GIMP. .. image:: images/openWith.jpg With GIMP you can edit anything within the image. Change colors, splice images together, etc. We are only concerned with the size of the image and the background. once the image is open click on the image menu at the top. .. image:: images/imageMenu.png Here is where you will scale and change the canvas size. The first step is to scale the image down to where the largest of the two sides is 500px. Image Scale ============= .. image:: images/imageScale.png Dont worry if the other axis is smaller. We will fill it with white space. Image Canvas ================= Next we want to change the canvas size so that the image is truly 500px X 500px. You do that in the same image menu that you resized it from. It will bring up the Select Image Canvas size screen .. image:: images/imageCanvas.png Be sure to also center your image. Next we need to add the white background to get rid of the checker board. We do that by adding a layer. .. image:: images/imageLayerCheckerboard.jpg Adding Layers =============== Click on the layer menu and select new layer. .. image:: images/imageLayer.png This will bring up the Create a New Layer window. The only change that is needed is to select a white background and click ok. .. image:: images/imageLayerNew.png This will overlay our new layer on top of the old one. Our image will now be all white. The default for GIMP is to have the layers tool box open. If yours is not you can open it by pressing **CTRL - L**. All that we have to do now is rearrange the layers so that the main image is on top. In the layers tool box you can click on the layer that has the original image and drag it to the top. This will put that image on top of the white background that we just created. .. image:: images/imageLayerToolbox.png You can also move it by selecting the image you want and clicking the green up arrow at the bottom of the tool box. This will change your image, adding the white background where we need it. The last step is to output it to the format that we need. Export As =========== The default for gimp is to save it in a format that preserves the changes and layers that we created so that you can edit them later. That works well for images on the local computer but we do not need that for the web. We have to export them to a web friendly format. Once you are satisfied with your changes, click the file menu and select *Export As....* .. image:: images/imageExportAs.png The acceptable format for the web either png or jpg. To save in either format just change the file extension in the bar at the top of the window .. image:: images/imageExportAsFileType.png since you have resized the image and pulled it from the web, you can use the default settings for both png or jpg. Be sure to put it in a directory that you will be able to find when you need to upload it to the site.