Icons vs Badges *
There is a distinct difference between Icons and Badges:
- Most often, icons are a part of your mockup; e.g. for toolbars, command buttons etc.
- Badges are a visual aid to emphasise something on the screen.
Here are several examples of both:
Creating an Icon *
To create an icon:
1. Find the “Icon/Badge” icon on the left toolbar and drag it onto the screen:
2. Find and select the icon in the Icon chooser, which opens automatically.
Icon chooser *
With Icon chooser, find and select the icon you need. Icon chooser is opened:
- Automatically when new icon is added.
- By double-clicking on the icon.
- When an icon is selected: by choosing “Select Icon” on the property panel.
In Icon Chooser you can:
- Preview the icons.
- Search icon by name.
- Filter icons by their category.
- Choose an icon set. Currently Font Awesome set is available, as well as the original MockupScreens “marks” for compatibility.
Formatting the icon *
When you place the icon, you can:
- Resize the icon.
- Change its color:
Creating badges *
To create a badge:
- Create an icon or select an existing one.
- Specify a “Badge Shape” from the property panel (by default it’s set to “None”):
Color presets for Badges *
There is a number of ready color presets (“themes”) for a badge. Select among them from “Badge Theme” dropdown menu on the property panel:
Note:
- There are two groups of themes, for either dark or light background.
Adding 3rd Party Icon Sets *
Icon sets can contain:
- Bitmap images, or
- Icon fonts.
Either must be placed inside the “icons” folder.
Bitmap icon sets are zip files containing folders containing images. The top level folder in the zip is the icon set name, folders inside it are category names, image file names inside category folders are icon names. See “icons/legacy marks.zip” for an example.
Icon font sets are folders that contain a ttf file with the same base name as the folder, and two additional text files: “categories.txt” and “index.txt”. Index maps icon names to unicode character values. Mappings are listed line by line and have a form of: “<icon_name>: <hexadecimal_value>”. Categories define category names, and icon names that belong to them, also on a per line basis. Lines that start with double colons (“::”) define category names, and every line after that (until the next category name definition or end of file) defines an icon name belonging to that category. See “icons/fontawesome” for an example.
Icon widget options *
Attributes specific for Icon widget are:
- Change Icon (“Basic” tab) – Opens Icon chooser.
- Icon Color (“Basic” tab) – Selects color for the icon. Icons comprise of a single colored glyph and of one or more transparent areas.
- Badge Shape (“Basic” tab) – If set, icon becomes a Badge. Default is “None”, other choices are “Circle” and “Square”.
- Badge Theme (“Basic” tab) – Select color presets for the Badge. Hidden if Badge Shape is “None”.
- Badge Color (“Basic” tab) – Sets background for the Badge. Hidden if Badge Shape is “None”.
