Available Documents:
- MyAdPlayer User Guide
- Image Preparation User Guide
- MyAdTV User Guide
- Account Structure User Guide
- MyAdXchange User Guide
Preparing Ad Images for MyAdPlayer
(Using Microsoft Paint Program)
Table of Contents
1. Introduction
3. First Example – Image Cropped Size
4. Second Example – Two-Third Image One-Third Text
Now let’s prepare
an image for the main frame in template7 with 2/3 of the area displaying the
image and 1/3 of the area blank with a background color. (See Figure 1) The
blank area is used for displaying dynamic text when playing back the content in
MyAdPlayer.
The
calculation is the same except the cropped size is now different. The frame
size for the template7 main frame is still the same which is 1024x523 (1280x490). Here, we only want to use 2/3 of the
frame for the image. The new frame size is 2/3 of 1024 which is 682x523 (853X490).
Plug in the
numbers, we have:
Frame size
variables: FX = 682 (853) and FY = 523 (490)
Image size
variables: IX = 800 and IY = 533
Croft size
variables: CX and CY
We will calculate
CX and CY as follows (we do not include any decimal point):
For regular
PC monitor:
CX = FX /
FY * IY = 682 / 523 * 533 = 695
CY = FY /
FX * IX = 523 / 682 * 800 = 613
If CX is larger
than IX, then the croft size width is IX and the croft size height is CY.
If CX is
smaller than IX, then the croft size width is CX and the croft size height is
IY.
In this
case, CX is smaller than IX, so our croft size is 695x533.
For
wide screen monitor:
CX
= FX / FY * IY = 853 / 490 * 533 = 927
CY
= FY / FX * IX = 490 / 853 * 800 = 460
If
CX is larger than IX, then the croft size width is IX and the croft size height
is CY.
If
CX is smaller than IX, then the croft size width is CX and the croft size
height is IY.
In
this case, CX is larger than IX, so our croft size is 800x460.
Next, we
open up the original image that we used for the first example. We follow the
same procedure to crop and save the image using the cropped size of 695x533 (800x460).
Next click
on the ‘File’ pull down menu and select ‘New’ to start a new image area.
Click on
the ‘Image’ pull down menu and select ‘Attributes’ again. We want to set the
image area to the size of the main frame. Enter 1024 (1280)
as the width and 523 (490) as the
height.
Next, click
on the ‘Edit’ pull down menu and select ‘Paste From’ and select the file you
just saved. After the image appears on the screen, you place the mouse cursor
on the image and press down the left mouse button. You can now drag the image
around; align the upper left corner of the image to the upper left corner of
the image area (the white area). Then place the cursor over the lower right
corner of the image. If you move the cursor around this corner, you will see
that at some point, the cursor will change to a diagonal double arrow. You can
then press the right mouse button to resize the image to 682x523 (853X490).
Sometimes
the image area size will change to accommodate the ‘Paste From’ image. So you
need to go back to Attributes and set the image size to 1024 x 523 again.
If you want
to change the background color of the blank area, you can choose a color from
the color palette. (Look up in the Help
Section if you want to change the available choices of colors.) Then select the ‘Fill With Color’ tool (it
looks like a Paint Can). Place the
cursor anywhere on the white area and right mouse click. The white area will be filled with the color
that you chose. Your picture image will not be affected.
You have
just finished preparing your image to be used as the background of your ad.
Next, go to
‘File’ and select ‘Save As’. Choose the
folder you want to save your image and type in the file name. Make sure you save it in JPEG format by
selecting this format from ‘Save As Type’.
After you
have uploaded the prepared image as part of the content, your ad may look like
this:
Our third
example is to place two images side by side. Let’s use the same template frame
as the previous example. The frame size is 1024x523 (1280x490).
Since we want to split this area equally for the two images, the frame size for
each of the images is 1024 divided by 2 which is 512x523 (640x490). So we need to prepare two images with this
size.
Plug in the
numbers and we have:
Frame size
variables: FX = 512 (640) and FY = 523 (490)
Image size
variables: IX = 800 and IY = 533
Croft size variables:
CX and CY
We will
calculate CX and CY as follows (we do not include any decimal point):
For regular
PC monitor:
CX = FX /
FY * IY = 512 / 523 * 533 = 521
CY = FY /
FX * IX = 523 / 512 * 800 = 817
If CX is
larger than IX, then the croft size width is IX and the croft size height is
CY.
If CX is
smaller than IX, then the croft size width is CX and the croft size height is
IY.
In this
case, CX is smaller than IX, so our croft size is 521x533.
For
wide screen monitor:
CX
= FX / FY * IY = 640 / 490 * 533 = 696
CY
= FY / FX * IX = 490 / 640 * 800 = 612
If
CX is larger than IX, then the croft size width is IX and the croft size height
is CY.
If
CX is smaller than IX, then the croft size width is CX and the croft size
height is IY.
In
this case, CX is smaller than IX, so our croft size is (696X533).
Since both
images we use are of the same size, we can apply the cropped size of 512x533 (696X533) to both images. Follow the same procedure
as the previous example, prepare the two images and saved them as separate
files.
Then open
up a new image area of size 1024x523 (1280x490).
Use the ‘Paste From’ function and bring in the first image. Place this image to
the left side and resize it to 512x523 (640x490).
Use the ‘Paste From’ function again to bring the second image, place it on the
right side and resize it to 512x523 (640x490).
Go to the ‘Attribute’ dialog box and make sure the image area is set to
1024x523 (1280x490).
Then save
this image to JPG format.
Final tip:
feel free to delegate this type of work to a graphic or web designer. In MyAdTV, simply subscribe to an additional
user account and allow a graphic or web designer to take lead on this
responsibility. You retain control but
they take on the responsibility.