How to Create a Professional Technical Document—Part 2

Creating a Technical Document. You’ve got a new Mac and want to setup the Internet to access the Web. You fear that you might forget the steps, or may be helpful to others. In this example, I’ll create a simple, step-by-step technical document and save it as a PDF document.

How to Create a Professional Technical Document—Part 2

1. Add the Subject and Article Description

Write theSubjectand a briefArticle Description. It should be short, clear, and precisely tell the things you want to show, in this case you want to setup the Internet on a Mac. TheSubjectline appears on the sidebar of the Clarify dashboard.

ClickFile > Save Asand select the folder where the file is to be saved. By default, it selects the subject of the Clarify document as a filename with extension as.clarifyand saves it in theClarify Documentsfolder.

How to Create a Professional Technical Document—Part 2

2. Add a Step Title and Paragraph Text

Click the+symbol to add a new step. Write theStep Titleand paragraph text in their respective boxes.

If you make a mistake, click the box to edit it. When you add aStep Titleyou’ll see the step title in the sidebar of the Clarify dashboard.

How to Create a Professional Technical Document—Part 2

3. Format the Paragraph Text

Clarify offers a number of options for formatting the text. The format bar appears when you select the paragraph field box. Click one of the icons to change the format of your text. You can choose from Bold, Italic, Bullet list, Link, Superscript and more.

When you press the return key, Clarify will create a new paragraph. Clarify adds spacing between each paragraph like you’ll see in text on a website.

How to Create a Professional Technical Document—Part 2

Clarify also lets you format code as entire blocks of code or as individual words within a sentence. To mark a word or two as code, select the word and clickFormat as codebutton from the formatting toolbar.

When you export the Clarify document as HTML, the text will be enclosed in<code>...</code>tags. Select the entire paragraph and clickFormat as code, to convert the text to a code block with the output enclosed in<pre><code>...</code></pre>tags.

How to Create a Professional Technical Document—Part 2

4. Taking Screenshots

You have three options for capturing images

  1. Capturebutton in the Clarify app
  2. Capturebutton from the menu bar, or
  3. Keyboard shortcuts

Go toClarify > Preferencesand in theGeneralsettings configure the hotkeys.

How to Create a Professional Technical Document—Part 2

When you press theCapturebutton screen capture tools will appear on the screen. Drag over the area you want to capture and press theReturnkey. Press theSpace barto capture a full window. Press theSpace baragain to go back to region capture mode.

PressRto cycle through the previous regions you have captured. It is useful when you want to capture the same area of the screen over and over again. PressCto show or hide the cursor while taking screenshot.

How to Create a Professional Technical Document—Part 2

5. Doing Basic Tasks With Images

Clarify provides many options to manipulate images: rotate, crop, use basic annotation tools, resize images and the image canvas.

To rotate the image, clickEdit > Rotate Image.

How to Create a Professional Technical Document—Part 2

To crop the image, clickEdit > Crop Image. Click and drag over the area you want to keep and press theReturnkey.

How to Create a Professional Technical Document—Part 2

You can choose from a number of annotation tools. Select the image and click the type of annotation tool you want to use from the formatting toolbar: Line tool, Square tool, Circle tool, Sequence Numbering tool (you can customise the starting sequence), Text tool and Blur tool.

How to Create a Professional Technical Document—Part 2

Clarifyhas three options to resize images. It has four handles around the sides of the image editor. Click and drag any of these handles to change the size of the canvas. You cannot crop an image using these canvas handles.

Drag and hold theOptionkey toresize all the sides of the canvas equally.

How to Create a Professional Technical Document—Part 2

Use the image resize handle located at the bottom-right corner. Click and drag this handle to resize the image. Press and hold theOptionkey to resize the image in 10% increments.

How to Create a Professional Technical Document—Part 2

For precise control over the image size primary-click on the step image and selectResize Image…. If the step has multiple images then you must select a particular image and then resize them through a contextual menu.

How to Create a Professional Technical Document—Part 2

6. Creating sub-steps or nesting steps

Clarify has the ability to create sub-steps. A sub-step is indented under the parent step and can be one level deep. When you export the document, a sub-step tile will appear differently in asmall font size, sub-step numbering (if you enable it). At first, create the usual step as described earlier.

Select the step that you would like to make a sub-step. Go toDocument > Move Stepmenu and move the steprightto indent it. Move the sub-stepupordownto organise the technical document, as required.

How to Create a Professional Technical Document—Part 2

7. Auto-numbering the Steps

When the technical document involves a number of steps then you can prefix them with a number. Clarify will auto-number steps, clickDocument Inspectorand checkAuto-number Steps. All other steps will be automatically prefixed with numbers.

How to Create a Professional Technical Document—Part 2

To exclude a step from getting a prefix, click theStep Inspectorand tickExclude from Auto-number. That step will no longer be prefixed with a number.

How to Create a Professional Technical Document—Part 2

There may be situations where you don’t want to auto-number the top level steps, but just the substeps. To do that, click theStep Inspectorand checkAuto-number substeps. Only the substeps will be prefixed with numbers.

How to Create a Professional Technical Document—Part 2

8. Performing Advanced Tasks With Images

Clarify includes some sophisticated features to manipulate images. Although these features are available on other image editors, having those in Clarify makes the process of creating technical document much faster. To add a border around images, select the steps you want to edit.

Click theStep Inspectorand withinImage Settingssection change theImage Borderyou want to add for the images. You can choose fromLine,Picture frame, andRounded Corners.

How to Create a Professional Technical Document—Part 2

Clarifycan automatically scale the images and reduce them if they are too tall or wide.

Click theDocument Inspectorand checkAuto scale images. Set the maximum height, or width of the image or both.

How to Create a Professional Technical Document—Part 2

Adding multiple images in a step is a time consuming process too. Click the+sign located just to the side of canvas handle.

Take the screenshot, and you’ll find them included in the step.

How to Create a Professional Technical Document—Part 2

If you’ve configuredRepeat Last Screenshotyou don’t have to bother about screen capture tools. The image add just below the top image, and so on.

How to Create a Professional Technical Document—Part 2

If you wish to replace an image for a particular step, then select the image you’d like to replace, then click theReplace Imageicon in the top left corner.

Or, click theReplaceicon located next to canvas handle.

How to Create a Professional Technical Document—Part 2

9. Embed a Hosted Video into a Step

A technical document will be easy to follow if you include a video. With Clarifyyou can embed videos hosted on video services such as YouTube easily into the steps.

Select the step, click on theStep Inspectorand change theMedia TypefromImagetoHTML.

How to Create a Professional Technical Document—Part 2

On doing this you’ll see a box for inserting HTML code. Go to YouTube, and copy theembed codeof the video. ClickPreviewto see the preview of the HTML.

How to Create a Professional Technical Document—Part 2

Some export formats can’t display the HTML for a step. Click on theImagetab and add an image, for these type of export formats.

You have to always use the image representation, when exporting your Clarify document to Word (DOCX extension).

How to Create a Professional Technical Document—Part 2

10. Add Anchor to Steps in HTML Output

You can addanchor tagsto steps that will assign as theidproperty in HTML output. This can be useful for linking directly to specific steps when you share a Clarify document to the web.

For example, if you set the anchor name for a step tospecial-stepand if your Clarify document URL is

http://www.myblog.com/my-article.html

then you could link directly to the step by adding#special-stepto the URL:

http://www.myblog.com/my-article.html#special-step

To add anchor tags to a step, select the step you want to edit. ClickStep Inspectorand withinStep Settingsset the anchor name.

When setting up an anchor name, use only letters, numbers, hyphens or underscores.

How to Create a Professional Technical Document—Part 2

Note: If you don’t set an anchor for a step then Clarify will automatically generate tags based on internal id which Clarify assigns to steps when you create them. This anchor tags will remain same each time you export the Clarify document.

11. Export and Share the Clarify Document

Go toClarify > Preferencesand clickShare. Click the+button and choose the sharing account for export targets. A sharing account can export to Clarify-it.com, WordPressand Evernote. You can also export your Clarify document as PDF, HTML, and Word.

For sharing accounts you must have an account and authorisation. For PDF, HTML, select or customise the template you want to use each time.

How to Create a Professional Technical Document—Part 2

You can customise the template for PDF, HTML. Email, and Word. In HTML template you can choose from a numberof templates: Basic, Chrome, Corporate, Markdown, Technicaland evencustom HTML template.

Select the logo and set the image dimensions for this template. Click thePreviewbutton to see the template you customised.

How to Create a Professional Technical Document—Part 2

You can also customise the email template in a same way. Since it’ll be using PDF, you can customize the PDF template and select the email client: Apple Mail, Postbox, Outlook orAirmail. Click thePreviewbutton to see the template you customised.

How to Create a Professional Technical Document—Part 2

Conclusion

Clarify is a native app for Windows and Mac to create technical documents. It lets you create templates so you can focus on creating a technical document without fuss and managing multiple apps—screen capture tool, word processor, and sharing tools.

In this tutorial, I’ve shown you the step-by-step procedure for creating a technical document. The app includes a 14-day trial and is available for $29.99. See thepricing detailsfor more information.