1

Image Editing

Images and imagery play a leading role in communicating both information and emotion in a web environment. All image editors have specific elements that make them favorite go-to’s. We will use a simple online editor that offers a host of options – PicMonkey (picmonkey.com). This resource can easily be used by students (yes, even Kindergarteners!). Open a browser and go to: picmonkey.com [Note: You do not need to register for an account (making this a great option for students and teachers). The images you upload will not be saved by the program. The free version allows enough options for you to complete most projects.] There are two areas: “Edit a Photo” or “Create a Collage”.

Let’s edit an image. This is an activity that you will need for most images that you take with a

camera or iPad or find on the web. [*Make sure you have an image that you can work with on

your computer, or find one on the web that you can use.]

On the top bar, hover your mouse over the term and click it or drag an image over it.

2

The image Editor will appear on the left side with your image sitting on the right.

Each icon on the left navbar opens a variety of options. For example, Basic Edits: Crop, Rotate,

Exposure, Colors, Sharpen, and Resize.

*OUR GOAL is to crop and resize the image for web quality. Select CROP. A grid appears over your image so you can adjust the area you would like captured. Move your mouse to drag it around or move the corner markers to crop. Click on APPLY.

3

Many images have to be resized for use on the blog. This saves space. As well, for those with

slower internet speeds, they will not have to wait long for your images to load, giving them

better experience on your blog.

Select RESIZE. This example is only 563 KB as compared to an

iPad image, which tends to range upwards of 3500 KB.

Using a percentage of the original takes a bit of the guesswork

out. I want the image to be around 100-150 kb so I chose 50%

to start with. [For a 3500 kb image I would probably try 20%.]

You will see the preview image adjust in size.

Click Apply.

Click Save.

File name: Type a relevant file name and select .jpg

[You also have an option to save as .png]

Notice the File size below. If it is not in the range, click on

Change Dimensions to further adjust until you have a size

appropriate for the web.

Click Save Photo.

4

Take a Side Pathway

Create 5-7 images; each one with a different effect. You can use these in a collage.

Select any of the options [each one will open a selection to choose]. You can view your results

on the right hand side of the screen. [Note: Those stamped with a crown are part of the paid

Upgrade.]

Eg. Effects: Shows Orton, Cross, Dusk, Basic Look, Camera Look, Paintbox, Area specific, Artbox.

Make sure you choose a black & white option as this can be quite dramatic.

Be sure to Save each image with a different file name.

Here are my 5 example images:

5

Using Collage

The Collage option offers multiple templates to show off your images. [How will this design

feature help with organizing your classroom images to tell a story?]

If you are in Editor, return to the Home screen [in the Preview image area, click the X in the

right corner].

Select Create a Collage.

OR launch a browser

and go to:

picmonkey.com

You now have another navbar with 4 options [Images,

Layouts, Swatches, Background].

Select Image icon. [The Samples are provided for you.]

6

Using Collage cont …

To get your images, click on Open Photos.

Select your images from your computer location and click

open [or double-click the images to insert].

The images will pop into the photos section.

Select Layout. Open one of the selections to find

available options.

In this example, we will create a header for the blog; select Ducks in a Row.

Choose the 5 box option. [*Note: Consider design principle of symmetry by choosing odd

numbers – 1, 3, 5…]

Click on the Image icon again to bring up your chosen images. Drag one image to each cell. If you don’t like the order, simply choose the correct image and drag over the cell you wish to replace.

7

Using Collage cont …

Now you have a header that can be used on your blog. [You can also add more by clicking on EDIT [top bar] to use the image editor to add more.]

In this example,

we have enough

to use as a

banner.

Click Save.

File name: give this a new name [eg. headr_beach. If you

name all your headers with a starting “headr…” they will

automatically group together in your blog’s media library.]

[Note the Dimension size and File Size. For most blog themes,

headers are usually 1000 pix wide – if you change it here, your

image will not need to be re-cropped in the blog.]

Click Save photo. Save to a location on your computer for

later use.

8

Take a Side Pathway

Choose a layout that will give you a single banner. Add a solid background colour and a swatch

on top. Make it 1000 pix wide to fit exactly in your header.

Here’s my example.

What other ways can you use layouts to offer a different experience for your readers?

Are there other places that you can use your created images to enhance learning?

9

Header Changes in Your Blog

Go to your blog’s Dashboard.

Select Appearance > Header

Custom Header section allows you to choose an image from your computer or the media

library.

In this case, choose the “headr_beach.jpg” that we just created and saved on our computer.

Click Upload.

10

Header Changes in Your Blog cont …

Images that are larger than the allowed header area can be cropped by moving the “indicator

points found around the dotted lines.

Click Crop and Publish.

The Preview shows the selected image as well as displays it in Uploaded Images.

[Hint: If you upload

several more images,

you have an option to

select a random

image for each page.

11

Header Changes in Your Blog cont …

Scroll down and click SAVE CHANGES. Check your newly published header by going to your site. This example shows this: