Your LLXP has several images that can (and are recommended to) be included — let's make sure your image specs fit just right!
Image Type
The following image types are best suited for LemonadeLXP and Digital Academy:
JPG / JPEG
GIF
PNG
Image Sizing
Images should ideally be sized by the pixel for the image type you plan to use.
If you're unable to get exact sizing for a particular image, it's always better that your image:
is slightly larger than needed (but not gargantuan, of course!)
follows the image's size ratio (e.g., 100px x 100px is a 1:1 ratio, and 200px x 100px is a 2:1 ratio)
Though many images change size depending on the browser's window size, the aspect ratio is usually about the same. So long as your image is slightly larger than the image's output and follows the image's ratio, it will look the way it should when resized by the system.
Note: extensively oversized images will impact load speed! Any oversized images should be resized as per the above recommendations to ensure your LLXP/DA continues to run as expected.
With all this in mind, use the following specs as general guidelines for your images:
Booster Game Images
Booster Game Images
When customizing the look of your Booster Glue LemonadeLXP, it's good to keep these tips in mind when selecting images to replace default ones.
Background
Background
Size: 1,920px x 700px - (~ 11:4 ratio)
For best results, match this sizing to the last pixel!
Boosters
Boosters
Size: 257px x 110px - (~ 23:10 ratio)
Much like the pillar images, these will resize - we have to be mindful of the ratio.
Buildings
Buildings
Size: 260px x 117px - (~ 11:5 ratio)
Make sure these images have transparent backgrounds!
Pillars
Pillars
Size: 176px x 176px - (1:1 ratio)
So long as the image is square, and is equal to or bigger than 176px, you are good to go!
Tobot
Tobot
Size: 426px x 426px - (1:1 ratio)
When customizing your Tobot /mascot image, the key is to have a square image where you can see all of your mascot with zero squishing or stretching.
Company Logo
Company Logo
Size: max height of 58px x any width (system will scale if needed)
To ensure it will look perfect, resize your image to a 58px height before uploading it to LLXP. This way, you can check it and make any necessary adjustments so it'll fit beautifully in your instance.
Contest Cover Image
Contest Cover Image
Size: 355px x 240px - (~ 4:3 ratio)
Contests are meant to be fun, which is why it's an excellent idea to include an image for any Contests you put together!
Course Cover Image
Course Cover Image
Size: 355px x 240px (~ 4:3 ratio)
Course covers are great for emphasizing what the learner is about to learn (e.g., a Course on Employee Relations with a cover image of colleagues getting along), while also making it easier for them to discern between all available content.
Demos and Simulations
Demos and Simulations
Desktop Screenshots (with Downloadable Template)
Desktop Screenshots (with Downloadable Template)
Demo/Simulator Size: 1024px width
The maximum (and recommended) image width for desktop Demos and Simulations is 1024px
You can use screenshots of any height for your Demo, though once you choose a height, aim to use the same height for all your screenshots to keep playthroughs consistent
Desktop Pre-Sized Downloadable Template
Download the following desktop demo screenshot template to help you size your screens to the ideal size!
Mobile Screenshots (with Downloadable Template)
Mobile Screenshots (with Downloadable Template)
Mobile Size: 650px width, 1375+px height
To ensure top-notch quality, the system will ask for images that are a minimum of 650 px width
Images can be any height, though we recommend at least 1375px to ensure the image fills the Mobile Frame
Mobile Pre-Sized Downloadable Template
Download the following mobile demo screenshot template to help you size your mobile screens to the ideal size!
End-of-Step URL Image
End-of-Step URL Image
Size: 48px x 48px - (1:1 ratio)
When you include a URL at the end of your Demo, consider adding an image to tie it all together!
Digital Academy Cover Images
Digital Academy Cover Images
Your Digital Academy has an additional image spec to consider — the tutorial cover image!
Size: 355px x 240px - (~ 4:3 ratio)
We need that larger size to ensure your images will look perfect whether you wish to feature it or keep it as a standard tutorial!
Additional Image Notes
Here are some other things to consider when acquiring your images:
Image Placement
Image Placement
Pay attention to the placement of the image's focus! If you want a completely centered image, yet the main focus of the image is off-center, that will affect how it looks on-screen.
Off-center:
Centered:
Image Transparency
Image Transparency
Some images will look better with a transparent background, while others won't need it to be transparent. When choosing your images, consider how you want your images to look.
For example, images that represent the learner's growing business should have a transparent background. This is to ensure learners can see everything behind the virtual "building," like so:
Other images, such as pillars, boosters, and the background itself, don't need a transparent background because it's not "over" another image — what you see is all you need to see!
Learner Versus Admin Image Views
Sometimes, an image's placement will look one way on the admin side but be formatted differently on the learner side. This is because the admin side is the "construction" part of LemonadeLXP, and the learner side is the final result. It can also be due to the browser window's size.
If you're not sure why an image is looking a particular way and you're viewing it as an admin, check the learner's point of view and play with your browser's size before you consider making changes - it might already look the way you want!