Using Transparent Images with your Digital Signage

  • 2
  • Article
  • Updated 3 years ago
  • (Edited)
We'll be presenting two ideas on using transparent images in your digital signage. If you have ideas or suggestions to share, feel free to mention in the comments section below.

Idea 1: Creating a picture frame with a transparent centre

In this example, we'll be adding a 'picture frame' over our digital signage. It does not have to be an actual image of picture frame, it can actually be any image with a transparent centre. In this example though I'll be using a picture frame!

Preparation:
Ensure that transparency is available and save the image file in SVG, PNG or GIF.
Have an image editing program available in case you need to do additional image editing to prepare the frame.

1. Prepare the frame

You may also want to have a frame that is a similar width and height ratio to the content to be shown underneath it. You can also place a background to the frame so that if the video runs at another width or height to the frame, it is hidden below the background.

In the screenshot below, you can see that I have the transparent centre (shown in image editing programs as a grey check pattern) and that since the videos run at a wider width in contrast to the frame, I have a white background situated outside the frame.


Click the image above to enlarge.

2. Prepare the Presentation

Select a Rise Vision Template or choose your own. For this example, I decided to use an existing free Template called Full Screen Video.

3. Add the frame in the Image Widget and place it above your existing content

The picture frame that I have already prepared is here but you can choose your own stock photo frame to edit. We have a Community thread here which is all about sharing free resources for your digital signage.

Select Add Placeholder then select Add Content to choose the Image Widget.

Upload your picture frame as a new Image.

In the Placeholder Properties, change the Width and Height to reflect the Presentation's. In this case, the Placeholder is 1920 x 1080 px since that's the resolution of my Presentation. Since I am working off a template I am leaving the other options as is but you may want to edit accordingly to your own presentation requirements.
Save and Preview.

And hurrah! You now have a picture frame with a playlist of videos using the Full Screen Video template.

See below for a still shot of what the frame looks above the video:


Idea 2: Creating a transparent watermark above your presentation

In this example, we have a logo with a transparent background situated above the presentation like a watermark. As the presentation cycles through, the watermark remains above the media.

Preparation:
Ensure that transparency is available and save the image file in SVG, PNG or GIF.

1. Add your watermark or logo to the code template below
In HTML view, add the following <div> tags between the <body></body> tags. Replace YOUR_WATERMARK_HERE with the image.

<div id="phx" placeholder="true" style="width:285px;height:175px;left:20px;top:35px;z-index:1;position:absolute;background:url('YOUR_WATERMARK_HERE') no-repeat left top;background-size:contain;"></div>


The above example will have the logo or watermark situated on the top left corner of the presentation.

<div id="phx" placeholder="true" style="width:285px;height:175px;left:1590px;top:880px;z-index:2;position:absolute;background:rgba(255,255,255,0) url('YOUR_WATERMARK_HERE') no-repeat left top;background-size:contain;"></div>


The above example will have the logo or watermark situated on the bottom right of the screen.

You can adjust the width, height, top, left and other settings accordingly.

Save and Preview the Presentation.

In the still screenshot below, I've adjusted the code to be:
<div id="phx" placeholder="true" style="width:285px;height:175px;left:1260px;top:870px;z-index:2;position:absolute;background:rgba(255,255,255,0) url('https://storage.googleapis.com/risemedialibrary-f114ad26-949d-44b4-87e9-8528afc76ce4/rvlogo.svg') no-repeat left top;background-size:contain;"></div>

...so that the Rise Vision logo is situation on the bottom right of the video within the picture frame.



The above examples should help you get started using transparent images. You can get creative with your signage via a picture frame, or find further ways to reinforce your brand by adding a persistent logo or watermark. If you have ideas or suggestions to share, feel free to mention in the comments section below.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
  • Excited

Posted 3 years ago

  • 2

There are no replies.