LogoLogo
FeaturesHelp & ResourcesShowcasePricingLogin
Squirrel Addon Documentation
Squirrel Addon Documentation
  • README
  • Table of contents
  • Building an addon
    • Communication
    • Property Panel
      • Property Panel Elements
        • Accordion
        • Checkbox
        • Color Input
        • Conditional Logic
        • Dropdown
        • Font
        • Horizontal Line
        • Input Box
        • Radio Button
        • Series
        • Sub Accordion
        • Text Label
    • Publishing an addon
      • Restricting private addons
      • The review process
      • Add-on submission
        • Icon guidelines
        • Image guidelines
  • introduction
    • Joining the Developer Program
  • past-events
    • Building your first add-on
  • squirrel-helper-library
    • Dot notation
    • Angular
      • Classes
        • SquirrelCanvas
        • SquirrelColor
        • SquirrelMessage
        • SquirrelPosition
        • SquirrelSize
      • Events
        • onInitState
        • onPropertyChange
        • onPropertyChangesComplete
        • onSetCanvas
        • onSetPosition
        • onSetRuntimeMode
        • onSetSize
      • Getting Started
        • Building your first addon
        • Debugging
        • Sending and Receiving Data
        • The JSON files
      • Methods
        • getBindingDimension
        • getCanvas
        • getCopyOfState
        • getGenericProperty
        • getPosition
        • getRuntimeMode
        • getSize
        • initWithSquirrel
        • parseColor
        • sendToSquirrel
        • setPosition
        • setSize
        • shadeColor
        • tintColor
    • JavaScript
      • Classes
        • SquirrelCanvas
        • SquirrelColor
        • SquirrelMessage
        • SquirrelPosition
        • SquirrelSize
      • Events
        • onInitState
        • onPropertyChange
        • onPropertyChangesComplete
        • onSetCanvas
        • onSetPosition
        • onSetRuntimeMode
        • onSetSize
      • Getting Started
        • Building your first add-on
        • Debugging
        • Sending and Receiving Data
        • The JSON files
      • Methods
        • getBindingDimension
        • getCanvas
        • getCopyOfState
        • getGenericProperty
        • getPosition
        • getRuntimeMode
        • getSize
        • initWithSquirrel
        • parseColor
        • sendToSquirrel
        • setPosition
        • setSize
        • shadeColor
        • tintColor
    • React
      • Coming Soon
Powered by GitBook
LogoLogo

Explore

  • Home
  • Features
  • Pricing
  • Download Squirrel

Help

  • Learn
  • Community
  • Support
  • FAQ's

Updates

  • Blog
  • Events
  • Release Notes

Company

  • Contact Us
  • Privacy Policy
  • Terms of Use

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.

On this page
  • Image specification
  • Image Size
  • Images will be scaled down to various sizes...
  • Feature image layout
  • Design considerations
  • Additional images, animated gifs and videos
  • Dimensions
  • Design considerations

Was this helpful?

  1. Building an addon
  2. Publishing an addon
  3. Add-on submission

Image guidelines

PreviousIcon guidelinesNextintroduction

Last updated 2 years ago

Was this helpful?

At least one image is required for each add-on that is submitted to the marketplace. The first image will become the feature image used in the Marketplace. It will also be used on the Add-on Detail page and the My add-ons page.

Additional images submitted will be displayed on the Add-on detail page only. These will be supportive images presented within a carousel.

Image specification

File type: png, jpg, or gif

Dimensions: 1200x627 px

Max file size: 2Mb

Colour: RGB (sRGB IEC61966-2.1)

Image Size

Feature images are displayed at various sizes but always retain the same aspect ratio. All images should be submitted at the largest size of 1200x627 px. It is best to create images at 100% scale for pixel-perfect accuracy, but bear in mind that the image will be scaled down - and therefore overall legibility needs to be considered.

Images will be scaled down to various sizes...

DO Create all images at 1200 x 627. Submit as either a png, jpg or gif

DON’T Don’t create your images at a smaller size and then scale up to the required size as this may result in a blurry or pixelated image

Feature image layout

This will be the first image that people see when browsing the marketplace and should give a good visual indication of what the add-on does, or looks like. We recommend that a title or short sentence also be included. The image should be designed to be eye-catching, persuasive, and unique. Be creative and try to represent the core features or concepts of the add-on, using either screenshots or illustrated graphics. In general the text should go on the left, and the image on the right. By following this recommended layout it will make it easier for users to browse the marketplace.

Design considerations

DO Use a clean, simple, sans sarif font for your text. We recommend a font size of between 45-55 to ensure better legibility when displayed at smaller sizes.

DON’T Don’t include too much text. The purpose of this text is to summarise what the key benefit of the add-on is, not to explain in detail what it does.

DO Use vibrant colours in combination with text and graphics to make your imagery stand out and be as eye-catching as possible.

DO Use real screenshots or visuals from the add-on itself

DO Ensure the text has good visual contrast against the background. Consider using a solid colour behind the text and a bold typeface as this may help legibility.

DO Check the image looks good at smaller sizes (as well as the large size). The smallest size (17%), doesn’t neccessarily need to be fully legible - only recognisable.

DO Include the brand mark or logo that your add-on functionality is built around (e.g youtube/Lottiefiles). A brand logo should be positioned bottom left.

DON’T Don’t include your own logo - this is not an advertising space for your own business.

DO Ensure you have the rights to use any copyrighted images, icons, or illustrations. You are responsible for obtaining the appropriate licenses.

DO Ensure any permitted branded elements or logos are adhering to the relevant brand guidelines and usage restrictions.

Additional images, animated gifs and videos

There is the option to submit up to 3 additional images to be displayed on the Add-on detail page only. These will be displayed in a carousel gallery. They don’t have to be static images. Each additional image slot could be:

  • Image (1200x627)

  • Animated gif (1200x627)

  • YouTube, Vimeo or Loom video (16:9)

It is not a requirement to fill these 3 additional image slots, but it might help to persuade users to try your add-on if they can see more visual examples of it. Images could focus more on feature details, showing examples of the add-on in use, screenshots, or even instructions or diagrams on how to use it.

Dimensions

All images and animated gifs should be submitted at 1200x627.

Videos can be any size as these will be scaled to fit in the viewport. However, we recommend you stick to the standard video aspect ratio of 16:9.

Design considerations

There is no set layout recommendation for the additional images/videos/gifs as it will all depend on what needs to be shown. Be creative with your imagery and experiment to see what works best for your add-on. It is worth remembering that the additional images will only be shown on the Add-on Detail page, and so will be displayed at the larger size (80%) only.

DO Show large screenshots and real examples of what the add-on can do so users can see the details clearly.

DON’T Don’t include long paragraphs of text in your image/video/animated gif. There is a dedicated area for text further down the add-on detail page.

The feature image is used to promote the add-on in the Marketplace.
The feature image becomes the hero image on the Add-on detail page. Additional images will be displayed within a carousel gallery.
The feature image will also be used on the My Add-ons page alongside the icon.
All images should be submitted at 1200 x 627
The feature image will be scaled down and used at various sizes as indicated above.
We recommend the above layout - text on the left and image on the right (and/or in the background)