So, you've got yourself a flashy, custom made online shop for your business and now it's time to start keeping your products updated.
You'll need to know how to optimise those images so that they load quickly on the web page and still make your website look amazing! This step-by-step tutorial will help to walk you through very basic image editing using the free tool called 'Paint.net'.
Click this link to download the free paint.net program from Softonic.
Be careful while in any of these software downloading websites, as they can easily confuse you into clicking the wrong button.
Click 'Save' at the bottom of your screen and then save the program to a place where you can find it again if you ever need to re-install it.
When it is finished downloading, you will be given an option to open and install Paint.net to your computer. Follow the prompts to install it. You may want to make a shortcut link on your desktop or toolbar so you can easily find it again any time you like.
It will take a few minutes to install, but that will only happen the first time. (The express setup should be fine for the purposes of optimising images for your website)
After it is installed open Paint.net and you're ready to begin. The program will look like this when you open it:
The four main tools that appear when you first open the program are the ones you will use most.
It's a good idea to have a close look around and familiarise yourself with these tools before continuing with the tutorial.
If a toolbar dissapears, you will find icons that re-open them up in the top, right corner of the program window.
Before you optimise your images, it's good practise to make sure you are starting out with the best possible pictures to begin with. If you'd like to learn how to take great photos, We suggest you read an article or two about it. Watch this space, we'll write articles for you and post them to this blog for you. Meanwhile, here are some tips to help ensure your photos of your products or services will look great on your website:
Once you have some gorgeous images saved in a place where you can easily find them, you'll be ready to start optimising them for your website.
Fire up your Paint.net program and get ready to edit your first image.
File> Open> Search for the picture, select it and click ‘Open’.
The picture will appear, all ready for editing.
Check with your developer to find out what your ideal image size is. For the sake of this demonstration, we will use 400px x 600px.
The resolution should be 72dpi.
We'll resize the image in two steps:
Use the square looking selection tool from the top left corner of the vertical toolbar:
When you click the Rectangle Selection Tool, you will get the option to change the type of selection area. Change it from 'Normal' to 'Fixed Ratio'.
Enter the ratio (you can use the desired size of the final image) in this case, we'll use 400 x 600 because we want all finished images to end up being 400px x 600px when we upload them.
Next, you will drag the selection tool around the part of the image you want to crop. It will automatically be the correct ratio.
It might take a couple of attempts to get just the right selection.
After the image is highlighted the way you like, you need to click on the ‘Image’ button at the top of your screen. Then select the first option that appears, ‘Crop to selection’
Now that your image is the correct ratio, we will just need to make it the right size.
While the image is still open, click the 'Image' button at the top of the screen, then select 'Resize'.
A Dialog box will appear.
Change the height and width to your ideal image size and set the resolution at 72.
To save your image, simply click on the ‘File’ button at the top of the screen and then click on ‘Save As’
Save your image in a logical location so you can find it again.
Give your image a short but sensible name.
Make sure the file extension is a .jpg. Because .jpg's load quickly and are compatible with almost every browser.
click ‘OK’ and you’re done!