- TBW User Guide
- Overview
- Guidelines
- Create a tutorial
1. Section, step, and note counts
Below are the maximum number of sections and steps available to create a tutorial. However, research shows that the shorter the better!
Recommendations
- Sections: The best-performing tutorials have less than four sections. However, a tutorial can have a maximum of 10 sections.
- Steps: There should be less than five steps per section, with the desired amount of three steps. Don't put all your steps in one section!
- Notes: No more than two notes per step.
Tip: For more guidance on how to write sections, steps, and notes please head to Create a tutorial > Tutorials.
Character counts
Each text field in TBW has a counter to help you keep track of character limitations.
Text field |
Maximum character count |
Recommended character count (including spaces) |
Tutorial title |
120 | 100 |
Tutorial description |
150 |
125 |
Starter template | 120 | 100 |
Section title |
120 |
100 |
Section description |
150 |
125 |
Step |
200 |
170 |
Note |
200 |
170 |
Completion message |
200 |
170 |
2. Titles and descriptions
Tutorial titles
- Communicate what the tutorial is about in the title.
- Make the title SEO-friendly and searchable.
- Start the title with an action verb, not an “-ing” verb.
- Example: Brighten a dark photo with an adjustment layer
- Avoid "How to" or "learn how to" in titles.
- If you mention product features in the title, include what the feature will be used for.
- Example: Remove objects from a photo with the Healing Brush tool
- 120 characters with spaces is the max. Shorter is better.
- Make the title short.
Section titles
- The section title should start with an “-ing” verb (gerund) and summarize what users will accomplish by following the steps in a section.
- Example: Refining the artwork appearance
- We use gerunds for section titles in response to how some users read section titles as steps. Changing from a verb to a gerund helps set the right expectation.
- Don't add a period at the end of a section title.
Tutorial descriptions
- Tutorial descriptions appear under the Tutorial title on the start screen. Use it to describe what the tutorial covers and why it is useful.
- Add a period at the end of the Tutorial description.
- Example: Adjust brightness and contrast to improve a dark photo.
Section descriptions
- Section description appears under a section title. Use this field to convey what the user will learn in that section. Remember, shorter is better!
- Add a period at the end of a section description.
- Example: A layer mask lets you hide part of an underlying image layer without permanently changing the image layer.
3. UI elements
When creating steps, you will likely point to a specific tool, menu, or panel that helps the user complete the task. Search for it in the step text field using the "@" symbol to find and insert the relevant tool or feature.
As you type, a suggested list of tools or features will appear for you to select. Once selected, the UI name will be formatted differently from the rest of the text. This creates a coach mark, a blue box, which serves as a visual aid for users, pointing them to the correct tool or feature.
If you don't see the tool or feature you want to use, type in the name without the "@" symbol. For panel and menu commands use ">" to indicate the workflow. Use only the UI element name in the product itself. This does not create a coach mark.
- Example: Layers > Layer Actions > Lock Layer
If you find several tools and features are unavailable using the "@" system, please let someone on the Learn Global Operations team know.
4. Terminology
The tables below contain key terms authors should know and use.
Acronyms
Acronym |
Name |
Definition |
CCD |
Creative Cloud Desktop app |
The location where builds are updated for installation. |
DP |
Discover panel |
A product panel that displays tutorials. |
LCM |
Learn Content Module |
An engineering term that refers to the portion of the Discover panel where Learn tutorials are displayed. |
LCP
|
Learn Content Portal
|
A portal for users to manage Ututs, Playlists, and Collections. |
Ps |
Photoshop | Create beautiful graphics, photos and art anywhere. |
PsW | Photoshop on the web | Create beautiful graphics, photos and art anywhere on a web browser. |
TBW | Tutorial Builder Web | A builder that allows authors to create guided hands-on tutorials that users work through in Adobe products on the web. |
Product names
Follow these guidelines when you mention a product name in a tutorial:
- Don’t include “Adobe” in the product name, unless explicitly stated in the "Do Use" column.
- Mention Photoshop only when it’s important for clarification.
- Don’t include “CC” in the product name.
- If you must use a product name, stick to the names in the "Do Use" column.
USE: |
DON’T USE: |
Adobe Dimension |
Adobe Dimensions |
Adobe Fonts |
Fonts |
Adobe Stock |
Adobe Stock for individuals |
Camera Raw |
Adobe Camera Raw ACR Photoshop Camera Raw |
Fresco |
Adobe Fresco |
Illustrator |
Adobe Illustrator |
Illustrator for iPad |
Illustrator on the iPad |
Libraries |
CC Libraries |
Lightroom Classic |
Lightroom Classic CC |
Lightroom (cloud-based) |
Adobe Lightroom Photoshop Lightroom Lightroom CC |
Lightroom for mobile |
Lightroom on mobile |
Photoshop |
Adobe Photoshop |
Photoshop for iPad |
Photoshop on the iPad |
Specific terminology for tutorials
Based on research and preferred terminology, there are specific word choices to use and avoid. Please review the list below, along with the reasons for these preferences. Uniform terminology fosters a coherent learning environment for our users.
Use | Avoid | Why |
Choose File > Save Choose Convert to Smart Object |
Click File > Save Select Convert to Smart Object |
The preferred term to indicate that a user should activate a menu item. |
Select the Crop tool Select the layer |
Choose the Crop tool Click on the layer |
The preferred term to indicate that a user should activate a tool, layer, or thumbnail. |
Drag the Opacity slider Drag the flower Drag to create a rectangular selection |
Click and drag the Opacity slider Click and drag the flower |
The preferred term to indicate that a user should drag a UI item or part of an image. |
|
The preferred way to abbreviate modifier keys saves space and character counts in the text fields.
Insert plus [ + ] after the modifier
Include (Mac) (Win) for commands that are single platform only |
|
Move your cursor outside the boundary |
Move the pointer outside the boundary |
How to indicate using a computer mouse. |
Toolbar |
Tools panel, Tools palette |
How to indicate the use of the Toolbar. |
Click the Blend mode menu (Normal) and choose the screen Blend mode. |
blending mode, blend mode, Blend Mode |
You should be able to "@" in the text field box to indicate a tool or feature. However, some tools and features may not be available using this method.
If needed, use sentence case to indicate a tool or menu item. If you're unsure what a tool or feature is named, hover over the UI element to see the correct spelling. |
|
easy, simple | Easy and simple may not reflect how learners feel about topics that are new to them.
Empathize with your audience and avoid words like easy and simple unless they are important to describe what you’re teaching (such as a technique that is quicker than an alternative).
Instead use words like, short, direct, or time-saving. |
|
learning, course, class, training, lesson, teaching, instruction, education, homework, exercise |
Research indicates that users often perceive tutorial content as either geared toward beginners or requiring significant brainpower and investment.
Use lightweight ways to talk about the activity of learning to lighten the mood instead. |
Illustrator Express Photoshop Photoshop on the Web |
Since tutorial content is created specifically for each product, using the term, “Express” or "Photoshop", in the tutorial is generally redundant and should be avoided.
However, if you are comparing the capabilities of Express to Photoshop on the Web, it may be necessary to use those terms. |
5. Punctuation
Use correct punctuation, such as placing periods at the end of descriptions, steps, and notes. Titles can be written without periods or additional punctuation.
Tutorial element |
Period required |
Tutorial title |
No |
Tutorial description |
Yes |
Section title |
No |
Section description |
Yes |
Step |
Yes |
Note |
Yes |
6. Capitalization
Use sentence case capitalization in your tutorial including titles, descriptions, and steps.
Guideline |
Examples |
Capitalize the name of a UI element, but not the type of element |
|
Use sentence case for UI element names with multiple words |
|