Editing images - pixlr

Introduction

This document discusses finding images, then resizing and cropping them to suit the needs of the eCreator templates.

Tools

Image editing software

This guide introduces how to use the image editing software https://pixlr.com/editor/

 

Image Library Websites

We generally use http://www.bigstockphoto.com/ as, based on the volume of images we need, it’s the most cost effective.

 

However, if you can’t find what you need there, we also recommend:

http://www.istockphoto.com/

http://www.shutterstock.com/

http://www.gettyimages.co.uk/

 

  Finding Images

Step 1: Search for the image(s) required e.g. ‘burglar’:

 

Step 2: Select the image required from the list:


Step 3: Select the image size required (normally a maximum width of 1000px):

 

Step 4: Download the image(s) to a location where library images are normally saved – on the computer or a shared server.

 

Re-sizing images – example

Example

You want to place an image into the flash cards template:

 

What is the image size?

When you need to upload an image to an eCreator template, it will tell you the dimensions the image needs to be and the format:

 

Open the image

Step 1: Open the image you want to re-size by selecting ‘Open image from computer’…and choosing the image you wish to edit:

 

You’ll see the image as below:


Resize the image

Step 2: Select Image > Image size…

 

…which will open the Resize options box:

 

You can decide whether to change the width or height of your image.

 

A rough guide is:

 

If the image size is landscape change the width

If the image size is portrait change the height

Constrain proportions, so your image isn’t squashed

 

Select OK and you’ll see the image has been resized 

Crop the image

Step 3: Select the Select icon … which changes the cursor.

 

You can then draw the box to the size you’d like your image:


Step 4: Once you release your mouse, you will see a grid appear.

1.     You can change the width and height by using the draggble corners, or move the whole grid.

2.     You can check what size you are ‘drawing’ by viewing the dimensions on the right of the screen as you ‘draw’. The image width need is 225px and the height needed is 280px.

 

Step 5: To crop the image, select Crop again:


Select ‘Yes’ to the message and you will then see your cropped image:

 

Save the image

Step 6: Select File > Save…

 

You can then select the correct format and select OK:

 

If you are unsure, the format is given with the dimension information:

 

Step 6: Type the name of the file – if it doesn’t include a file extension, please add either .jpg or .png to the end of the file name. You can then choose where to save it and then select Save:


You now have your image to use within your eCreator page.


Removing image backgrounds

Step 1: Copy the image you’ve opened by selecting Edit > Select All (or CTRL + A) and then Edit > Copy (or CTRL + C).


Step 2: Select File > New image

 

Step 3: Leave all settings as they are and select the Transparent checkbox, before selecting OK:

 

Step 4: Paste the image by selecting Edit > Paste (or CTRL + V). You will then see 2 layers, the transparent background and your image:


Step 5: Select the ‘magic wand tool’:

 

Step 6: You will see your cursor change. At the top there is a ‘tolerance’ setting:


If you are removing a solid background colour, 1 is normally OK. If you are removing more of a gradiented background colour, you may wish to increase this number until you get a ‘clean’ border around what you wish to remove the border from:



Step 7: Select Edit > Clear (or the Delete key) and then Edit > Deselect All (or CTRL + D):



You now have your transparent image you can save as a .png file.

Gaining a colour from an image

Step 1: Open the image you wish to take a colour from and then select the ‘Colour picker tool’:

 

Step 2: Move your cursor over the colour you wish to gain and select it. You will see the colour at the bottom of the toolbar on the left change to that colour:

 

Step 3: Double click this colour, to see the window below. Here you can copy the hex code (#) or the RGB values, which you can use within your eCreator page HTML.


Feedback and Knowledge Base