Preparing a Canvas Background

oie
What we are going to do is to make a Canvas containing 3 evenly horizontally spaced images. The created canvas will then be ready to upload and save.

A) open computer picture folder and decide which ones you will use

  1. place the cursor on each image and width and height will be displayed
  2. this will help you to decide on whether or not to edit the picture selected
  3. Decide how many pictures you want to apply to the Canvas.
  4. The number of images chosen and their combined widths will decide the width of the Canvas
  5. The largest height will determine the height of he canvas
  6. 250px is good target width for your images as this will allow for an adequate border.
B) You are now ready to start editing. In order to do this we must transfer (upload) a picture to the Online Image Editor from our picture folder.

UPLOAD-A

Upload A procedure is only used on the first visit to the Online Image Editor
  1. Open the Online Image Editor screen
  2. select "Upload an Image" and the picture folder will open
  3. right click an image and click SELECT from the top of the option list
Your image will now appear on the Online Image Editor screen
upload

UPLOAD-B

Upload B procedure is used for uploads while in the Online Image Editor
  1. select " Upload new Photo" from left panel
  2. select choose file and picture folder will open
  3. choose image
  4. right click and choose SELECT
  5. click upload
upload-b

EDIT

resize
  1. Choose RESIZE from the top menu.
  2. side panel will open showing width and height of image
  3. change width to desired value. DO NOT change height
  4. or change height to desired value. DO NOT change width
  5. leave "aspect ratio" box checked and the image dimensions will change in the correct ratio
  6. select "APPLY"
  7. The image will resize with the width and height written below the image;
  8. Jot down these dimensions as they will determine the size to the Picture Canvas.

DOWNLOAD

  1. Right click picture and choose "save as"
  2. delete blue text and enter new name
  3. Make a simple name e.g. 1 name
Repeat these steps for each picture that needs resizing

The Canvas Dimensions

The Canvas dimensions are taken from the downloaded edited images

  1. Add the image widths together and add 40px to this dimension.
  2. This will be the width of the Canvas
  3. Add 50px to the tallest image height
  4. This will be the height of the Canvas

Steps to make a Canvas

canvas-2
  1. select " Upload new Photo" from left panel
  2. select Create Canvas
  3. Enter width and height in appropriate boxes
  4. click yellow square
  5. Click the little white box at the bottom right. Just above the little red x
  6. you could either change ffff00 to ffffff.
  7. both methods will produce a white camvas
  8. Now click CREATE and the canvas is created.

Overlaying images on the Canvas

canvas-3

Lets select a image from your picture folder for the canvas

  1. Select Advanced from the top menu
  2. Select Overlay image on the menu bar
  3. select "Choose a file from the left panel
  4. Your picture folder will open
  5. Right click a picture and click SELECT
  6. A brief image descrition will appear to the right of "Choose a file"
  7. Check that this is the correct image and click UPLOAD
  8. The image will appear just below Vignette on the menu bar

Moving the image on the Canvas

canvas-5

Now lets place the image on the canvas

  1. Place the mouse's pointer on the image
  2. While holding Left Click Down, drag the image to the desired position on the Canvas
  3. Release the Left Click
  4. You can resize, rotate or add transparency using the left panel controls
  5. Select APPLY when your satisfied with the image's position

The Finish

  1. Repeat process until all images are placed and then right click the finished canvas and SAVE "as is".
  2. You can Undo or Redo any steps by selecting the appropriate action from the top left menu bar.
  3. The reason for adding 40px to the image width total is to provide a margin between images and make them easier to align.
  4. Adding 50px to the height will provide an area to describe the image set. Above or below depending on their vertical alignment.
  5. Trim any excess canvas,using Crop,from the finished product if the canvas is larger than the minimum required
home Valid CSS! HTML Hit Counter