Resizing Images for The Clickstart Wiki

Sometimes when you upload an image to the wiki you'll find it doesn't fit inside the circular sections on the front page in this instance here we have a large image and it's been cropped off at the edges but in this version we have a small image and it's been stretched up to fit the circle making the image blurry to fix this you should usually use an image that has equal proportions that means an image that's square and typically you'll want to use an image that's two hundred by two hundred pixels you can use a larger image but it'll just be scaled down and you can get away with a smaller image but around a hundred to a hundred fifty pixels it starts to become blurry so I recommend two hundred by two hundred pixels also you should make sure to leave some space around the edges of the image because this will allow it to fit better in the circle So, if we want to use this large image, it obviously doesn't fit we'll need to edit the image I recommend using a program like Photoshop over something like Microsoft Paint just because Photoshop allows you to use layers which makes it easier to make changes without the affecting the main image if you don't have Photoshop, you can find lots of free alternatives that you can download online but if you don't want to download one there is a program called "Pixlr" which I would recommend which you can get from www.pixlr.com go to the website click on open image editor and after a moment or two the Pixlr image editor will open and it looks just like any other image-editting software just like Photoshop It has things like layers and up here filters and things So, we want to open the image which we've saved on our computer So this is the original image and the first thing you want to do is check the size of it Pixlr shows you the size here or you can also go to image> image size so this is four hundred by three hundred pixels so we want to bring that down to a square two hundred by two hundred pixels so, we can resize the image here just by typing two hundred in the width make sure you have constrain proportions on that'll keep the dimensions square but you'll notice the height is still not large enough so we'll need to change that if we change the height with constrain proportions off then the image would become distorted so instead we need to resize the canvas now there's two ways to do this the easiest way is to select, these are anchors, select the middle anchor here and just type two hundred pixels for the height and that will apply these changes to the whole image and because we haven't changed the width that won't change but we've changed the height, so the height will change if you don't have the option of doing that, I mean there's no reason why you shouldn't you could instead one after the other apply half of what we're adding, so apply twenty-five pixels to each, so that would be one seven five for the top 'OK' that and then do the same for the bottom, and 'OK' that but in this case, it's easier just to type two hundred and apply it to the whole image so that's basically made our image larger, the content is still in the middle and luckily for us in this image it's got a white background so we don't need to make any further changes if you were using something like a photograph you might find that the colour of your image doesn't match the colour of your canvas, the canvas typically would white so you'd need to use maybe tools like the clone tool which you can find here, it's very similar in Photoshop and that allows you to copy parts of the image and paste them elsewhere maybe try using a gradient or the paint bucket tool to fill in the area generally just try and fill up the space so that looks neat in the circle so we can now save this image save it under a different name you can play with the quality settings, i'm going for full settings at the moment the thing about JPEG to remember is that it's a lossy format what that means is every time you save it it loses quality, the image will become more and more blurry every time you save it so it's best to start with as large an image as possible and save as least as possible as you can and, save that and then if we go back to our wiki we're changing the middle image so I have to go into set up and choose that picture and there we can see, it's been applied to the middle fits right in the middle and you can use the same approach for all these other images, so ones like this are fine but you'll notice over here it has a white border because the images is obviously taller than it is wide so again, same again in an image like this i'd probably use the clone tool to try and copy parts of this man's shirt to fill up the space and that's all there is to it