Word of the Day: Transparency

Did you know that GS6 displays support the use of transparent PNG files? That’s right, and better yet, we found a free online program where you can use .bmp, .gif, .jpg, .jpeg, or .png files to create a transparent image! What’s a transparent image and why would I want to create one? Transparent means that […]

Daktronics Commercial Software Training on 1/18/2017

Categories: Venus Control Suite Training

Did you know that GS6 displays support the use of transparent PNG files? That’s right, and better yet, we found a free online program where you can use .bmp, .gif, .jpg, .jpeg, or .png files to create a transparent image!

What’s a transparent image and why would I want to create one?

Transparent means that part of your image is clear or see-through and allows users to layer it over other content or colored backgrounds.

Have you ever wanted to put a logo or certain image on your display, but it had a pesky background color that you couldn’t get rid of? Have you ever found a picture that you liked, but only wanted to a specific part of it onto your display?

If you answered yes to either of these questions, then you know why you’ll want to create a transparent image.

As far as what a transparent image is … a picture is worth a thousand words.

twitter-logo-1  Twitter logo 2.jpg

The Twitter logo in the image on the left has a white background, whereas the Twitter logo in the image on the right has no white background. The background has been removed and transformed into a transparent image.

Whoa, that’s amazing! How do I do that?

A free, online program will help us take a graphic and reformat it into a transparent image. The website is called the Online Image Editor and can be found at http://www.online-image-editor.com/.

Trainer Tip:  If you like this website, then we recommend saving it as a favorite or bookmarking it after you visit it for the first time. That way you will have quick and easy access to it in the future, and won’t have to worry about losing or forgetting the web address.

Using the Online Image Editor

Please follow the instructions below to create a transparent image using the Online Image Editor:

  1. Browse to the Online Image Editor.
  2. Click on [Browse…] and browse to location of your graphic, select graphic, click open.
  3. Place a check mark in front of Convert during upload [PNG]. Make sure PNG is selected in the drop-down and select Upload.
  4. Select the [Wizards] Tab and then click on [Transparency] in the toolbar.
  5. Left click on each area to be transparent.
    with-background
    All areas you want transparent should now only have the gray checkerboard and no image showing.
    with-background-removed
  6. Click the SAVE icon .
  7. Click on Save Image Local .

Upload to the Media Library

Now you can upload your brand-new transparent image into the Media Library and import it into the Web Compositor and choose any background color you want to put behind it!

  1. Click on the Upload button in the Media Library.
  2. Browse to the location where you saved the transparent image and select it.
  3. Tag it and finish uploading to the Media Library.
  4. Click on the down arrow next to the Upload button and choose New Web Presentation.
  5. Give the presentation a name and choose your display size and click OK.
  6. Click on the background drop down under Properties and choose a background color.
  7. Click on the Add New Media button above your canvas.
  8. Under Properties, click on the [+] sign next to Source.
  9. Put a check mark next to your transparent image and click Set.
  10. Under Properties, click on the Stretch drop down to choose what size the image should be.

go-bobcats

Congratulations, you just created a transparent image and turned it into a custom web presentation! All you have to do now is add some text to your message (if you want), click save, and schedule it to your display!

We hope you find this week’s post helpful when it comes to creating content for your display. Be sure to click on the orange Receive Email Updates button on the right side of your screen to subscribe.

Thanks for reading!

Bonus Tip:  For those of you who read the whole article… Did you know that you can use the Online Image Editor to resize images as well?!  Just follow the below steps and remember, we recommend never starting with an image that is more than 3 times larger than your display dimensions in order to maintain the best image quality.

  1. Browse to the Online Image Editor.
  2. Click on [Browse…] and browse to location of your graphic, select graphic, click open and select Upload.
  3. Click on the [Basics] tab and then click [Resize] in the toolbar.
  4. In the left column, you will see the current size of the graphic. Resize to fit display dimensions. Change the Height to the height of the display. Leave Aspect Ratio with the check mark and click Apply. If the Width is too much for the width of your display, change the Width and click Apply again.
  5. Click the SAVE icon .
  6. Click on Save Image Local .