There are several types of graphics used during a Logan Live episode:

| Full Screen | Lower Third | Weather | Words of Wisdom | History Calendar | Show Credits |

Introduction

Here is how to create show graphics using a Chromebook.

If you are part of the Logan Live staff, you should have already created a Logan Live folder within your Google Drive class folder. Within your Logan Live folder, make a Graphics folder.  Within this folder is where you should keep all of the graphic files you create for the show.

To create all of the following graphics using a Chromebook, plan to use the PIXLR E online image editing program.

This free, web-based editor includes tools similar to standard media industry software such as Adobe Photoshop. Like most professional image editing programs, PIXLR E lets you create images with layers.  A layer on the top hides layers below it.  If a layer has transparent areas, they reveal the layers below them.

If you plan to use one or more photos as part of a graphic for Logan Live, please follow these image guidelines for how to make sure you have permission to use a photo.  (While the image guidelines are for a project that recommends a 4K image, you only need images that have a minimum size of 1920 x 1080.)

| menu |

Full Screen

If you are creating a graphic to enhance an announcement, or one for a show segment such as Entertainment, here is the process.  To start, use the Chrome browser and visit PIXLR E. Click the CREATE NEW button.

From the format options choose Full HD then click the CREATE button.

You will have a new image that shows a checkerboard pattern.  The checkerboard indicates the areas of the image that are transparent.

Click on the Foreground Color icon.

In the Color Picker window click on the spectrum to choose a color.  Click in the shade section to choose a lighter or darker version of the color.  When you are done with your choice click the OK button.

Press F on your keyboard to choose the Fill tool, then click on the checkerboard pattern in your new image.

It will fill with the foreground color you selected.

Look at the Layers menu on the right side of the screen.  Layer1 shows it is filled with the color your selected.  This is now the background of your image.

You may wish to use a photo that fills all or part of the entire screen.  Make sure you have permission to use the photo (as described in this image guidelines tutorial.)  A copy of any photo you plan to use should be in your Graphics folder.  Press the [ctrl+o] keys on your keyboard and navigate to your graphics folder.

Select the photo and click the OPEN button.

In the Pre-size Image window choose the largest size available.  It will usually be named ORIGINAL but in this example it is Ultra HD.  With the largest size selected, click the APPLY button.

With the photo open, press the [ctrl+A] keys to select the entire view, then press the [ctrl+C] keys to copy it.

Click on the Untitled tab to show your new image.

Press the [ctrl+V] keys to paste the photo. In the Layers menu on the right side of the screen you will now see a new layer on top of the background layer.

 

If you need to reposition or resize the photo press the [ctrl+R] keys.

If the image you pasted is so large you are unable to see the transform handles, enter 1920 in the Width: box. This should reduce the photo size enough so the transform handles are visible.

Click in the middle of the selection to move the photo.  Click and drag a handle to resize the photo.

Many graphics use no photos, only text on a plain background.  In the following example, the photo layer will be hidden. In the Layers menu on the right side of the screen click the box on the image layer so there is no check mark.  Click on Layer1 to make sure it is selected.

Before you start adding text to your graphic, it’s good practice to have an idea of how it will be laid out. In this example the graphic will include the following text:

Join other moviemakers at the
FILM CLUB
Monday 2pm
Visit LoganTV.net/film for details

Press T to select the Text tool and click on your image.

When the Add Text window appears, click the ADD button.

A box will be added with placeholder text.

The text tool has a menu that allows you to add and change a variety of attributes.

Make sure the text Size is at least 60 pixels high.

Click on the text Color swatch.

Use the Color picker to set a color that contrasts with your image background color so that the text will be easy to read.

With the Text tool still selected, double-click on the placeholder text.

Type the first line of text for your graphic.

Once your text looks good click on the box and position it near the top of your image. Use the Layer menu (at the top of the screen) Duplicate layer option to make a copy of the text box.

With the Text tool still selected, click on the text box copy and move it underneath the original box.

Double-click on the text in the copy of the first box and type the second line of your text.  In this example it is Film Club.

To give special emphasis to text a different typeface may be chosen from the Font menu.

The Size setting may be used to give more emphasis.

The Styles menu has other ways to emphasize text.  In this example a Shadow is added.  The shadow color and other attributes may be adjusted.

In this example the Film Club text box has been duplicated and the duplicate has been moved below the original box.

With the Text tool still selected, double-clicking on the text in the duplicate box allows typing the next line.  In this example it is Monday 2pm.  The size is adjusted to make sure the new text fits on one line.

For the last line in this example, the first text box is selected and duplicated so that its attributes are used for a new text box.  The new box is positioned to the bottom of the image and the text is changed.

When you are done adding all of the text to your graphic, reposition and adjust sizes and other attributes as necessary.  If you have a lot of text, it is better to create multiple images than to cram too much information in a single image.

When your image is ready follow the Full Screen Graphics saving steps.

If you are placing text on top of a photo, it may be hard to read because of the variety of colors and shades in the photo.  The text Styles settings can help.  One of the options is adding an Outline with a contrasting color.

Here is an example of a graphic that uses a photo for the background.  Notice how a logo has been included and attributes have been added to make it easier to read the text against the busyness of the photo.

If the background photo is being used primarily as a design element, and the text is still hard to read, you should consider duplicating the image layer and using one of the Filter menu Details blur options.

If you are creating a graphic that features more than one person being acknowledged for a special achievement add text to identify each individual.

If the text is hard to read, consider using the text Style menu Background option.

 

Full Screen Graphic Saving

When your graphic is complete, press your [ctrl+S] keys on your Chromebook keyboard to start the save process.  In the Name field type the name using this format: YYMMDD-TOPIC
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD. Substitute a one or two word for the announcement’s TOPIC.
For example, if the date is September 7, 2020 and the topic is the Film Club, the name would be:
200907-film-club

If you have more than one graphic for the same announcement, save each graphic with a number added to the name. For example:
200907-film-club-1
200907-film-club-2
200907-film-club-3

Once the Name has been entered correctly, select the PXD format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.

Once the file has downloaded press the CLOSE button. The version of your graphic you saved using the PXD format will allow the file to be edited later if necessary.

After saving the .pxd file, save a .png file version. The PNG format creates files that may be used with video editing software. Press the [ctrl+S] keys to start the save process one more time.
In the Name field type the name using this format: YYMMDD-TOPIC
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD. Substitute a one or two word for the announcement’s TOPIC.
For example, if the date is September 7, 2020 and the topic is the Film Club, the name would be:
200907-film-club

Once the Name has been entered correctly, select the PNG format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.  Once the file has downloaded press the CLOSE button.

| menu |

Lower Third Graphics

When a graphic appears at the bottom of the screen on top of other video, it is known as a Lower-Third graphic or title.  During announcements, a lower-third title may be used to share a website link or other action information that viewers need to see. When a performer first appears in an episode of Logan Live, they need a lower-third title to identify them.

To start a lower-third title, click this link to the Lower-Third-PXLR-Template and choose the Download option. Save the template in your Graphics folder.

In your Chrome browser navigate to PIXLR E and click the OPEN IMAGE button.

Navigate to your Logan Live Graphics folder and select the copy of the Lower-Third-PXLR-Template you just downloaded.  Click the OPEN button.

The Lower-Third template features several layers. You may use the Text tool to edit the Name and Title layers.  The other layers are graphic elements and should not be changed.  That’s why they have lock icons.

If you are creating a graphic to identify an on-camera speaker, go to the Layers menu on the right side and click on the Name layer to select it.  Press the T key to select the Text tool.

In the bottom of the image, double-click on Name in the text box.

Type the first and last name of the person appearing on-camera.

In the Layers menu click to select the Title layer.

Double-click in the Title graphic.

Type a title for the person.  If they are a student, type Class of YEAR, replacing their graduating year for YEAR.

The checkerboard pattern in your graphic indicates the transparent areas.  When a lower-third graphic is placed on top of a video clip, the transparent areas will reveal the video.

When your lower-third title graphic is ready, follow the Saving Graphics steps to save your work.

If you need a lower-third graphic for something other than a person’s name, follow the lower-third graphic procedures above with these exceptions:  Instead of typing a person’s name, type the main information you are sharing.  In this example it is a website address.  Instead of typing a person’s title, type other relevant information.  In this example it directs the viewer to information on a web page.

When your graphic is complete, press your [ctrl+S] keys on your Chromebook keyboard to start the save process.  In the Name field type the name using this format: YYMMDD-lower-TOPIC
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD. Substitute a one or two word for the TOPIC. If the lower third is for a person, substitute the person’s name for TOPIC. For example, if the date is September 7, 2020 and the topic is Community Service, the name might be: 200907-service

If you have more than one graphic for the same announcement, save each graphic with a number added to the name. For example:
200907-serivce-1
200907-serivce-2
200907-serivce-3

Once the Name has been entered correctly, select the PXD format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.

Once the file has downloaded press the CLOSE button. The version of your graphic you saved using the PXD format will allow the file to be edited later if necessary.

After saving the .pxd file, save a .png file version. The PNG format creates files that may be used with video editing software. Press the [ctrl+S] keys to start the save process one more time.
In the Name field type the name using this format: YYMMDD-TOPIC
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD. Substitute a one or two word for the TOPIC. If the lower third is for a person, substitute the person’s name for TOPIC. For example, if the date is September 7, 2020 and the topic is Community Service, the name might be: 200907-service

Once the Name has been entered correctly, select the PNG format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.  Once the file has downloaded press the CLOSE button.

| menu |

Weather Graphics

The process of creating weather graphics for Logan Live Special Edition episodes is similar to the process used for regular show episodes.  For regular shows the source for the weather forecast is weather.gov but they only offer a 5-day forecast.

Since segments for Logan Live Special Edition need to be recorded the Thursday before the episode’s Monday premiere, weather.yahoo.com is a good source to find forecast information.

(While you may use your Chromebook to visit weather.yahoo.com, it might make it easier to use your phone for the forecast information, and your Chromebook only to create the graphic.)

When you first arrive on the yahoo weather site, click the Change location button.

To change location on the mobile site click this icon.

Enter 94587 and select Union City, CA for the location.

Scroll down the page to see the forecast.  Make sure it is the 10-day version.  Use this information to create your forecast graphic.

If you have not already done so, download the Weather-Forecast-M-F-TEMPLATE.pxd template and save it in your Logan Live Graphics folder.

Open a new Chrome browser window, navigate to PIXLR E and click the OPEN IMAGE button.

Navigate to your Logan Live Graphics folder and select the copy of the Weather-Forecast-M-F-TEMPLATE.pxd template you  downloaded.  Click the OPEN button.

Look at the History menu on the right side of the screen.  Click the – to reduce the History section.

This will reveal more of the Layers menu.  There are many layers in the Weather-Forecast-M-F-TEMPLATE.pxd template.  You have to scroll down to see all of them.

Notice some layers have a check mark to the right of their name.  These are the layers that are currently visible.

Look at the entire template in the center of the screen.

Double-click on each 00 and replace it with the temperature from the Yahoo forecast.

You need to enter a high and low for each day of the week.

With all of the temperatures entered, return to the forecast. The icon next to each day of the week indicates the general condition for that day, such as Sunny or Partly Cloudy. Make note of the condition for Monday.

Return to Pixlr-E and scroll through the template layers to find an icon that matches the Monday condition. Click the box to the right of the layer to make it visible.

Click the V key to select the Arrange tool and move the icon to the space under MON.

Repeat the process for each day of the week.  If you need to use a condition icon more than once, select it in the Layers menu on the right side of the screen.

With the icon selected, open the Layer menu at the top of the screen and select the Duplicate layer option.

You now have a copy of the condition icon that you may move to another day of the week.

When your graphic is complete, press your [ctrl+S] keys on your Chromebook keyboard to start the save process.

In the Name field type the name using this format: YYMMDD-weather
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD). For example, if the date is September 7, 2020 the name would be: 200907-weather

Once the Name has been entered correctly, select the PXD format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.

Once the file has downloaded press the CLOSE button. The version of your graphic you saved using the PXD format will allow the file to be edited later if necessary.

After saving the .pxd file, save a .png file version. The PNG format creates files that may be used with video editing software. Press the [ctrl+S] keys to start the save process one more time.
Use this format the page name: YYMMDD-weather
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD
For example, if the date is September 7, 2020 the name would be 200907-weather

Once the Name has been entered correctly, select the PNG format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.  Once the file has downloaded press the CLOSE button.

 

| menu |

Words of Wisdom

The process of creating Words of Wisdom graphics for Logan Live Special Edition episodes is similar to the process used for regular show episodes. Make sure you follow those instructions to select an inspirational quote, write your script, and find an image of the quote’s author.

Once you have found a quote and written your script, make sure you have permission to use a photo of the person you are quoting and have saved the photo in your Logan Live Graphics folder.

If you have not already done so, download the Words-of-Wisdom-TEMPLATE.pxd template and save it in your Logan Live Graphics folder.

Open a new Chrome browser window, navigate to PIXLR E and click the OPEN IMAGE button.

Navigate to your Logan Live Graphics folder and select the copy of the Words-of-Wisdom-TEMPLATE.pxd template you  downloaded.  Click the OPEN button.

Look at the History menu on the right side of the screen.  Click the – to reduce the History section.

This should make sure you see all of the template layers. Click on the Image Placeholder layer to select it.

Press the [Ctrl+o] keys to start the Open image process.

Navigate your your graphics folder, select the image of your quote’s author, then press the Open button.

Use the [ctrl+A] keys to select the entire image, then the [ctrl+C] keys to copy it

Click on the Words-of-Wisdom-TEMPLATE.pxd tab and use the [ctrl+V] keys to paste the author photo.  Use the image handles to reposition and resize the photo as needed to it fits the reddish-colored image placeholder rectangle.

With the photo in place, select the Type the quotation layer in the Layers menu on the right.

Press T to select the text tool.

Double-click in the text box and type your quote.

Select the Quoted Author layer in the Layers menu on the right.

Press T to select the text tool, then double-click in the text box and type a hyphen followed by a space and the author’s name.

With the text tool still selected, open the Settings menu.  Make sure the alignment is set to the right, and the Italic style is applied.

When you are done with your quote and author, make sure your quote ends with a closed-quote mark. You may have to reposition the three text layers so that they line up correctly and are centered vertically. (One layer is the open-quote mark.)

Since Pixlr E only lets you move one layer at a time, it may take awhile to make any necessary adjustments.

 

When your graphic is complete, press your [ctrl+S] keys on your Chromebook keyboard to start the save process. In the Name field type the name using this format: YYMMDD-words
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD). For example, if the date is September 7, 2020 the name would be: 200907-words

Once the Name has been entered correctly, select the PXD format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.

Once the file has downloaded press the CLOSE button. The version of your graphic you saved using the PXD format will allow the file to be edited later if necessary.

After saving the .pxd file, save a .png file version. The PNG format creates files that may be used with video editing software. Press the [ctrl+S] keys to start the save process one more time.
Use this format the page name: YYMMDD-words
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD
For example, if the date is September 7, 2020 the name would be 200907-words

Once the Name has been entered correctly, select the PNG format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.  Once the file has downloaded press the CLOSE button.

| menu |

U. S History Calendar

If you have not yet done so, create a folder named History within your Google Drive Logan Live folder.  Use this folder to save your script and all images for the calendar you are creating.

Please follow these image guidelines for how to make sure you have permission to use a photo. 
(While the image guidelines are for a project that recommends a 4K image,
you only need images that have a minimum size of 1920 x 1080.)

You need a photo to represent one historical event for each day of the week
your calendar is scheduled to be shown.

A copy of every photo you plan to use should be in your History folder.

Open the Chrome browser and visit PIXLR E. Click the CREATE NEW button.

Set the Width to 300 and the Height to 665, then click the CREATE button.

You should now see a tall blank image.  The checkerboard pattern indicates the image is completely transparent.

Press your [ctrl+o] keys or use the File menu to Open an image.

Navigate to your History folder, select your first image, then click the OPEN button.

If the Pre-size Image window appears, select the largest size available (in this example Original) then click the APPLY button.

With the photo open press the [M] key or click on the Marquee Select tool.

Click and drag a tall but not too narrow rectangle surrounding the part of the image that best represents this day in history.  The rectangle you select will be indicated by a dotted line.

Open the Image menu and click on the Crop option.

Your image will now be cropped to the rectangle you selected.

Open the Image menu once more but this time click on the Image size option.

In the Resize Image window set the Height to 665.  Make sure Constrain proportions is on,
then click the APPLY button.

Press the [ctrl+A] keys or choose Select all from the Select menu.

Your image should now be surrounded by a dotted line that indicates it is selected.

Press the [ctrl+C] keys or choose Copy from the Edit menu.

Click on the Untitled tab to show the new blank image you created.

If the blank image appears small, open the View menu and choose the Fit screen option.

With your blank image visible press the [ctrl+V] keys or choose the Paste option from the Edit menu

Your untitled image should now have a second layer.

If the image you pasted is not positioned correctly, press the [V] key or choose the Arrange tool.

The entire image you pasted will be represented by a rectangle.  Use your [Shift+left] or [Shift+right] keys to move the image as you prefer.

With your image positioned to best represent it’s day in history, press the [ctrl+S] keys to start the Save process.

In the Save Image window type the file name using this format:

YYMMDD-history-#.jpg
Substitute the episode premiere date using a two digit year for YY,
a two-digit month for MM and a two-digit day for DD.
Substitute the number of the weekday for #

For a show premiering on September 7, 2020 the date would be 200907

The image that falls on Monday is image #1 so the file name would be:
200907-history-1.jpg

The image that falls on Thursday is image #4 so the file name would be:
200907-history-4.jpg

Make sure the File type is JPG and the Quality is set to HIGH.  The Image width should be 300 and the Image height should be 665. When everything is correct click the DOWNLOAD button.

It may take a moment to prepare your image. Navigate to your Logan Live History folder.  Verify the name is correct and includes the .jpg extension, then click the Save button.

Once the file has downloaded press the CLOSE button.  Repeat the process until you have all five images for your week’s calendar segment.

| menu |

Show Credits

Download the Credits-TEMPLATE.pxd file into your Graphics folder and use it as the basis for the show credits.

Turn on or off layer views as you create individual credit pages.  Here are the layer combination and order of pages you should create:
Producer and 1 Name layers
Anchors and 2 Names layers
Entertainment and 2 Names layers (use 1 Name layer if only 1 person)
Weather and 1 Name layers
Words and 1 Name layers

When your graphic is complete, press your [ctrl+S] keys on your Chromebook keyboard to start the save process. In the Name field type the name using this format: YYMMDD-credits
Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD). For example: 200907-credits

Once the Name has been entered correctly, select the PXD format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.

Once the file has downloaded press the CLOSE button. The version of your graphic you saved using the PXD format will allow the file to be edited later if necessary.

After saving the .pxd file, save each credit page as .png file. The PNG format creates files that may be used with video editing software. Press the [ctrl+S] keys to start the save process one more time.  Use this format for each page name: YYMMDD-credits-# (Substitute the episode premiere date using a two digit year for YY, a two-digit month for MM and a two-digit day for DD — Substitute the page number for #) For example:
200907-credits-1
200907-credits-2
200907-credits-3
200907-credits-4
200907-credits-5

Once the Name has been entered correctly, select the PNG format then press the DOWNLOAD button.

It may take a moment to prepare your image.  Navigate to your Logan Live Graphics folder then press the Save button.  Once the file has downloaded press the CLOSE button.

Repeat the process until you have save a PNG file of each credit page.

| menu |