Editing images (eCreator)

Introduction

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

There are two examples:

1.    A text image template page where the background image is changed to a new full size image.

2.    A Filofax template page where an image is inserted into the content.



Tools

Image editing software

We recommend the image editing software ‘Paint.net’. You can  download it here:

http://www.getpaint.net/

Windows ‘Paint’ can also be used, but as it’s more complicated to crop images we recommend ‘Paint.net’.

 

Screen print software

To check the size of an image needed within content, the standard Windows software ‘Snipping Tool’ will be used. This is shown in example 2.

 

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):



Re-sizing images – example 1

Example

You want to place a full size image into a text image template page:


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:



Open the image

Step 1: Open the image you want to re-size by selecting File > Open…and choosing the image you wish to edit:



You’ll see the image as below:


Resize the image

Step 2: Select Image > Resize…


…which will open the Resize options box:


Step 3: As the image size in this example is landscape, the desired width is: 905. :


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


Your image is now the correct width, but it’s still too high –603px instead of the desired 465px

Crop the image

Step 4: Select Image > Canvas Size…


…which will open the Canvas Size options box:


Step 5: The image height needed is 465px, so you must change the height.

 

Changing the Anchor to ‘Middle’ (by clicking the middle box) means an even amount will be cropped from the top and bottom.

 

If you only want to crop a certain area, simply click the relevant box.

 

Select OK:




The image is now your desired width and height…




Save the image

Step 6: Select File > Save As…




Step 7: Enter a new image name (so the original isn’t overwritten) and select .png from the image type dropdown:




Step 8: Change the option to 8-bit and select OK:




Uploading the image to your eCreator page

Step 1: Select Upload


Step 2: Choose the file and select OK:


 

Step 3: Select Update:




Step 4: Preview the page:





Re-sizing images – example 2

Example

You want to place an image into a filofax template page, within the right hand side content:


What is the image size?

Use the File Attachments box instead of the ‘Upload’ feature of a template, to place the image within the content itself:


Using ‘Snipping Tool’

The ‘Snipping Tool’ is a great way to determine the size of the image you’ll need to place within your content. Start by opening it from ‘All programs’ on your computer.

Step 1: Select New:


Step 2: Draw out the size of the image you’d like over the space in the content:


Step 3: This saves the area you’ve selected on the clipboard.

 


Checking the size in Paint.net

Create a new document in Paint.net, so you can see the image size needed.

Step 1: Select the New icon:


Step 2: Make a note of the dimensions shown in the New options box:


The image size drawn over the template was: 217 wide x 192 high

 

You’re therefore looking for an image size of approximately: 190px x 215px

 

Step 3: Select Cancel

 

 

Open the image

Step 1: Open the image you want to re-size by selecting File > Open…and choosing the image you wish to edit:


You’ll see the image as below:


Resize the image

Step 2: Select Image > Resize…


…which will open the Resize options box:


The image size needed is approximately 190px x 215px, but the height is more important in this instance, so it fits within the page:


 Step 3: Change the height to 215px and select OK:




You’ll see the image has been resized:




The width is 215px, which is greater than the dimensions drawn out. However, in this case, there’s room to play with on the width, so it’s fine to leave it as it is, rather than crop it further.

 

Please note:

If you need to crop your image, follow the instructions on cropping the image in example 1.


 

Save the image

Step 4: Select File > Save As…




Step 5: Enter a new image name (so the original isn’t overwritten) and select Save:




When using the File Attachments box within the eCreator, it doesn’t matter which file format you use.

 

However, jpegs are smaller file sizes, so if the image looks ok, we’d suggest using this format.

 


 

Step 6: Select OK:




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

 

 

Adding the image to your eCreator page

Step 1: Select Upload within the File Attachments box:



Step 2: Choose the file and select OK:




Step 3: Place the cursor in the content area you wish to add the image to.

Select the image name within the File Attachments box:




The image now shows within the content area:




Step 3: Select Update:




Step 4: Preview the page:



Feedback and Knowledge Base