How to create screenshots and GIFs
The purpose is to highlight and illustrate the best features of Mattermost user interface.
When choosing what to highlight in the screenshot, follow this order:
An end-user screenshot that best illustrates the feature;
Screenshot of System Console or other settings help text;
Screenshot of documentation;
Screenshot of a code mentioning the feature and/or Mattermost.
Use the Mattermost Desktop app, which has a nicer border.
Create a secondary account with [first.last]+blah@mattermost.com email address. This makes triggering notifications for yourself easier (for the screenshot). You can also use a second browser to login to the second account while taking the screenshot.
Screen size:
Size your Mattermost Desktop App or browser to capture a screenshot approximately 900px by 640px, excluding browser navigation.
Use default 100% Zoom.
Tip: Close the right-hand sidebar, and close the team sidebar by leaving all but one team.
Visuals:
Profile pictures and real people’s names should be filled out throughout the screenshot.
For the profile picture, use either normal-looking Avatars or stock photography.
Select the default "Mattermost" theme color in Account Settings > Theme.
Left-hand side:
Include Favorite, Public, and Private channels on the left-hand side.
Make sure that you scroll all the way to the top in the channel list on the left-hand side for the screenshot.
You can have a few unreads or mentions visible, but do not include an “unread posts” indicator in the left-hand side.
Favorites channel list: Include the following:
One Public channel;
One Direct Message channel with someone who is online;
One Group Direct Message channel using people with short names to avoid truncation.
Center pane:
Make the center pane one of the Favorited channels.
Make sure that the heading of the center pane is fully visible to avoid truncation.
Make the first message in the center pane fully visible right below the channel header.
Clarity:
Avoid showing any text with acronyms and abbreviations.
Do not show any bugs or defects.
Outline:
Ensure that the screenshot has a grey (#F7F9FA) outline in all four edges. This helps ensure the screenshot looks good against both dark and light backgrounds.
Outstanding look: Ensure that the contents of the screenshot shows the Mattermost product in the best light.
Show the feature in action.
Make sure that the screenshot is positive - give whoever is viewing it a positive emotion.
Show how the feature can be extended and customized. For instance, use custom slash commands instead of the default commands.
Share the original - Always share the original in .JPG or .PNG format, or pasted in a slide
If you share screenshots in a slide with a drop shadow or other formatting, make sure the original is provided as a backup in case the user needs a different manipulation
Share the manipulation (optional) - If you're modifying screenshots using a format that can include layer or the original manipulation (e.g. Photoshop), offer the file containing modifications if you can in .PSD or .TIF format.
Use GIF Brewery to create GIFs. Ensure there are no watermarks or vendor names overlaying the GIF.
When you need to show a particular part of the product, don't crop the image and zoom past 100% to show the functionality. Example of what not to do:
Instead, show the sub-component at 100% zoom with a 12pt white border (so there is white space) and a grew (#F7F9FA) background with no border, so the image is cleanly framed:
Example of what not to do ("Stop" and "created with gifrecorder.com" overlayed at the end of the GIF):
Text is hard to read when image is reduced for sharing on blog posts, social media and possibly in slides:
This enables sharing the image in documentation, social media and marketing content more easily.
