Photos, GIFs, and QR Codes in Designer

In this article, we’ll cover how to add and edit Photos, GIFs, and QR Codes in Designer.

• Photos
  • Background
  • Filter
  • Crop
  • Mask
  • Replace
  • Background Remover
  • Link
  • Settings
  • Effects
  • Animate
  • Position
  • Lock / Copy Style
• GIPHY
• QR Codes

Using Designer, you can use a wide array of stock Photos, GIFs from GIPHY, and customizable QR codes to make your designs more dynamic.

For more general information on the Designer app, see our Getting Started in Designer guide.

These options can be accessed from the Designer Side Menu:

Photos

Selecting the Photos option will bring up the Photos section of the Side Menu:

Here, you can search for any sort of stock photo you’d like to use. Once selected, it will be placed in the design.

To edit the photo, select it. The Top Menu options will change:

We’ll go over each of these options in turn.

Background

The Background option lets you alter the background layer of the photo.

Filter

The Filter option brings up the Side Menu, allowing you to select different filters to add to your photo:

Crop

The Crop option allows you to crop the selected photo or image.

The crop area can be dragged, expanded, and retracted, with Aspect Ratio options and the ability to flip and rotate the image. A preview of the cropped image is present in the upper right of the screen, and the size of the image is indicated. Lastly, the crop area can be changed to be a Rectangle or Circle.

Mask

Clicking the Mask option will open up the Mask option on the Side Menu.

Selecting a Shape from the Mask menu will automatically apply a mask of that shape to the image. The image can still be moved once the mask is applied.

Clicking Edit Mask will allow you to move the mask itself around the image. Clicking Invert will swap the areas being masked. Clicking Apply Mask will reapply the mask on the image.

Replace

The Replace option lets you replace the image or photo with an image off the current device.

Background Remover

The Background Remover option automatically detects and removes backgrounds from images. Currently, it only supports auto-removal and it is not possible to custom erase or restore the background.

You’ll need to wait for a loading icon to finish:

Once done, click Save, and the background will have disappeared.

Link

Selecting the Link option lets you turn your photo or image into an interactive element, mostly used for kiosks. It will open the Link Options section on the Left Navbar:

Clicking Add Link will prompt you to enter a URL or select an asset:

Once a link or asset has been chosen, more options will appear in the Link Options section:

Expanding the Scale section will provide this option for your asset:

Here, choose how the image will be scaled. There are three options:

• Fit (default) - Fits the image to the screen.
• Stretch - Stretches the image to fill the entire screen.
• Zoom - Zooms in on the image to fill up the entire screen. Not recommended for small images on large displays, as this will create blurriness.

Expanding the Settings section will provide these options for your link:

• Duration (seconds) - When the link is clicked or tapped, how long the link or asset will display before returning to the main design. This starts from the last touch on the screen or time the link was clicked.
• Preload - When checked, the website will load when the design does. This reduces the amount of time it takes for the website to pop up when the link is clicked. However, having numerous links needing to load may cause lag.

Expanding the Close & Nav Bar Styler section will provide these options for your link:

This section refers to the button that will appear on your screens when it is pushed to them. Clicking or tapping this button will return you back to the original design.

• Icon Position - Shows where this icon will appear. Defaults to Bottom Center, but can be placed anywhere along the top or bottom, or turned off entirely.
• Icon Style - Allows you to set the styling of the icon. Choose from Label, Solid, Round, or Default (see above)
• Icon Size - Allows you to change the icon’s size. Choose from Small, Medium, Large, or Default (see above)
• Icon Color - Change the hexadecimal HTML color of the icon to better fit your design.
• Background Color - Change the hexadecimal HTML color of the icon background to better fit your design.
• Opacity - Slider allows you to change how opaque or transparent the icon background is.
• Show Navigation Bar - When checked, adds small navigation arrows to the icon. Allows you to navigate quickly through multiple links. Looks like this:

Settings

Selecting the Settings button will open the Data Mapping section on the Side Menu:

Clicking Make Data Mapping allows you to make the selected text dynamic, mapped to one of your existing DataSources. See our article on Dynamic DataSources with OptiSync for more information.

Effects

Selecting the Effects option allows you to change a number of different aspects of your text. It will open the Effects section on the Side Menu:

Here, you have numerous options. We’ll go over each of them in turn.

Expanding the Color section allows you to add color to the photo or image. 

Select from preset colors, colors used in this design, or through the color picker.

Expanding the Background section allows you to set a specific background color for the photo or image to sit on. This is functionally the same as the Background option from the top menu.

Expanding the Opacity section allows you to vary the opacity of the selected area - background and text together.

This can be adjusted via slider. Shown below is half opacity:

Expanding the Outline section allows you add an outline to the photo or image. You can select a color from a dropdown or use the color picker, and use the slider to change its thickness.

Expanding the Shadow section allows you to create a shadow across the photo or image. By default, all the sliders will be white.

Applying a color will create a shadow, and changing the sliders allows you to change the blur and offset the shadow along the X or Y axis.

Expanding the Gradient section will present several gradient options for your text. Clicking any of these Gradient options will apply it to your text.

The Texture section is similar to the Gradient one. It will present several texture options for your text. Clicking any of these texture options will apply them to your text.

Animate

Selecting the Animate button will allow you to add animations to your photos or images. Clicking it will open the Animate area on the Side Menu:

There are numerous options for adding Animations to your design. For more information on this, see our Animations article.

Position

Selecting the Position option will open the Position section of the Side Menu. This allows you to precisely place the photo or image, or change its layering.

• Bring to Front - Brings selected photo or image to the top layer
• Bring Forward - Brings selected photo or image up one layer
• Send to Back - Brings selected photo or image to the bottom layer
• Send Backward - Brings selected photo or image down one layer
• Align to Page - Options to change the selected photo or image alignment
  • Left
  • Center
  • Right
  • Top
  • Middle
  • Bottom
• Space Evenly - Aligns the photo or image within the larger selection
  • Vertically
  • Horizontally
• Flip - Flips the selected photo or image
  • Horizontal
  • Vertical
• Position - Allows specific placement of photo or image in the design
• Resize - Allows precise resizing of the selected photo or image element
• Maintain Aspect Ratio - When checked, maintains aspect ratio when resizing

Lock / Copy Style

Clicking the Lock button will lock the selected photo or image in place, preventing any changes from being made to it.

This is useful when dealing with many elements on a design.

The Copy Style button allows you to quickly apply the style of the selected photo to another.

This is useful for quickly styling numerous photos.

GIPHY

The GIPHY option on the Side Menu allows you to choose from a variety of Stickers, GIFs, Emojis, and animated Text options to place in your design.

The Search function lets you find the GIF, Sticker, Emoji, or animated Text you want to use off GIPHY. Once selected, they will be placed on your design and automatically animate:

These can be fine-tuned further using the Position button.

Clicking this while the GIF is selected will open up the Position tab in the Side Menu:

• Bring to Front - Brings selected GIF to the top layer
• Bring Forward - Brings selected GIF up one layer
• Send to Back - Brings selected GIF to the bottom layer
• Send Backward - Brings selected GIF down one layer
• Align to Page - Options to change the selected GIF's alignment
  • Left
  • Center
  • Right
  • Top
  • Middle
  • Bottom
• Space Evenly - Aligns the GIF within the larger box
  • Vertically
  • Horizontally
• Flip - Flips the selected GIF
  • Horizontal
  • Vertical
• Position - Allows specific placement of the GIF in the design
• Resize - Allows precise resizing of the GIF

Maintain Aspect Ratio - When checked, automatically maintains aspect ratio when resizing.

Use as Background - When checked, allows GIF to be used as a Background in the design.

QR Code

The QR Code option on the Side Menu lets you add a QR code to any design. Hitting Add QR Code gives you numerous options:

Choose:

• Website URL - Sends user to website when QR code is scanned
• Email - Sends an email to a specified address when QR code is scanned.
• Text - Displays text when user scans QR code
• Call - Makes a phone call when user scans QR code
• SMS - Sends a text to a specific number when QR code is scanned
• App Store - Sends user to either the Apple Store or the Google Play store when QR code is scanned.
• Facebook - Sends user to Facebook page when QR code is scanned.
• Instagram - Sends user to Instagram page when QR code is scanned.
• X - Sends user to X profile when QR code is scanned.
• WiFi - Gives user access to a WiFi network when QR code is scanned.
• WhatsApp - Sends a message on WhatsApp when QR code is scanned.
• Asset - Choose an OptiSigns asset for the user to see when QR code is scanned.

Clicking Update QR Code lets you change the type of QR code, or update any information.

Finally, numerous QR codes can be added to the design if desired.

That’s all!

OptiSigns is the leader in digital signage software. If you have any additional questions, concerns or any feedback about OptiSigns, feel free to reach out to our support team at support@optisigns.com.