RPG Writer Workshop - Designing Your Module in GM Binder

<div class='cover-header'>Designing Your Module</div>

<div class='cover-footer'>A lesson for the RPG Writer Workshop - Winter 2018 Edition</div>

\pagebreak

# GM Binder is a Proud Supporter of the RPG Writer Workshop

##### Winter 2018 Edition

</div>

The content in this document was created as part of the RPG Writer Workshop - Winter 2018 Edition, and is freely available for everyone.

<br>

Representing such a small part of the overall workshop, we would like to encourage you to check out the overall workshop and to consider signing up to get the full workshop materials. Many great authors have contributed to the workshop, and you will get a ton of insight from it.

<br>

If you miss out on the Winter 2018 Edition, a new edition will be coming in Spring of 2019.

<br>

[https://www.rpgwriterworkshop.com](https://www.rpgwriterworkshop.com/?utm_source=gmbinder&utm_medium=content&utm_campaign=winter_2018)

\columnbreak

\pagebreak

# Getting Started

There are a number of different ways to design your module. From desktop publishing software, to online tools like GM Binder, to simple text documents, authors have a wide variety of options when it comes to laying out and designing their module.

In this lesson we are going to focus on using GM Binder to layout your content. This lesson will touch on many of the basic features of GM Binder, and should leave you confident in creating your own module documents. With over 37,000 documents having been created and published within GM Binder, we'll also cover a handful of tips that help to ensure better readability for your users. Designing documents can be intimidating, and GM Binder has a lot of functionality built in, but it really is pretty simple to create a very readable document with minimal effort.

## What is GM Binder?

GM Binder is an online tool that allow authors to create and publish professional looking documents with minimal effort. At its core, GM Binder uses Markdown syntax in its editor, and converts this content into well formed HTML and CSS used to generate PDF files.

Additionally, authors are able to leverage their own HTML and CSS to create entirely new themes, layouts, and even animated content with their documents.

## Getting Started

### Account Creation

The very first step that you will need to do is to go to <https://www.gmbinder.com/> and click Login in the upper right corner. From there, click the Register button to register a new account. Upon doing so you will receive an email with a unique URL to click that will bring you back to GM Binder to set your password.

### Your First Document

Now that you have a fresh new account, let's get right into creating your first document. Start by clicking the **My Documents** menu at the top of the page. At this point this screen is pretty empty, but this will be where you will find all of those sweet sweet module documents that you create.

At the bottom this screen you will see a field where you can enter the name of your new document. Go ahead and put something there, but don't worry, you can change it later when you inevitably change your title.

Click **Create Document!**

That's it! You're done. Nothing more to do here. Close the browser and walk away.

I'm kidding of course. Now is when the fun begins!

\columnbreak

### What is This Content?

At this point you have a document with what we call our placeholder content. Much of the content in the placeholder content will be covered here (and then some), but it's always good to take a skim through it on occasion. Especially if it has been a while since you've used GM Binder.

> **A quick note about GM Binder and the ownership of YOUR content.** It is expected that the content you create within GM Binder is your own content. I'm sure that's an obvious thing to say. What might not be obvious is that the content you create within GM Binder is yours. You will always retain full rights and ownership to your content in GM Binder. What you do with it from here is totally in your hands.

<div class="footnote">
Designing Your Module - A lesson for the Winter 2018 RPG Writer Workshop by /u/Iveld
</div>

\pagebreakNum

## Navigating the Editor

Now that you have a document opened in front of you, lets talk about the screen and the different areas of concern.

### The Editor Pane

On the left side of the screen is what we call the Editor Pane. This is where you do all of your typing, copying, pasting, and formatting of your content. The Editor Pane has a lot of functionality built in, but at its core, it's a simple text editor.

### The Editor Toolbar

At the top of the Editor Pane is the Editor Toolbar. The menu items you'll find here will help you do basic formatting of your content much like any other text editor that you have used. Additionally, there are a few editor specific buttons on the right side that will control various settings of your editor; like font size and editor theme.

### The Preview Pane

On the right side of the screen you'll see the Preview Pane. For the most part this pane is used to display to you what your document will look like when published. There are a few pieces of functionality here, but we'll come back to those later.

### The Preview Toolbar

At the top of the Preview Pane is the Preview Toolbar. The menu items here are focused on document level things like printing, document settings, and document sharing.

\columnbreak

## The Absolute Basics

How can I say this more simply?

Start typing in the Editor Pane and you'll see the results in the Preview Pane.

Simple as that.

You can bang away at the keyboard for hours upon hours, and your end result is going to be a whole bunch of content in a well formatted document.

However, if there's one thing that we've learned from millions of pageview in GM Binder, it's that documents that have formatting will have **MUCH** better reader engagement than documents that do not. So let's get into that.

> **Here's the big secret about using GM Binder** <br>
> You do not need to know a single bit about Markdown, HTML, or CSS to create documents.

### Page Breaks

Although you can technically keep typing for hours like a Khajiit hopped up on Skooma, at some point your content is going to run off of the page. This is the one exception to the "not needing to know anything about Markdown, HTML, or CSS" idea. Fortunately, it's really easy to drop in page breaks.

* Typing `\pagebreak` on a blank line will result in a page break. Or press `Ctrl+;` or `Cmd+;` to insert this.
* But typing `\pagebreakNum` on a blank line will result in a page break with page number. Or press `Ctrl+'` or `Cmd+'` to insert this.

### Column Breaks
By default, as you type along your content will eventually wrap over to the second column.

However, sometimes you want your content in column 1 to be cut short and continue on to column 2 before the end of the page. The simplest way to accomplish this is to use: `\columnbreak`
___
You can also press `Ctrl+.` or `Cmd+.` to insert column breaks.

> **PROTIP**<br>
> Web browsers are a finicky @#$%$ when it comes to laying out content consistently. Even when your content is viewed in the same browser and operating system, there can be variations on how it displays. Because of this, my suggestion to you is to NEVER let your content reach the bottom of a column. Always leave at least one, if not two empty lines at the bottom of each column. This means you will ALWAYS use `/columnbreak` to move to the second column.

<div class="footnote">
Designing Your Module - A lesson for the Winter 2018 RPG Writer Workshop by /u/Iveld
</div>

\pagebreakNum

## What is Markdown?

I've mentioned Markdown a couple times now, but not clarified what it is yet. GM Binder uses a syntax called Markdown for its primary content. We do this because Markdown is one of the most widely accepted syntaxes for writing content without using "code". I'm going to cover a few of the most used bits of Markdown here, but I encourage you to check out this document for a more detailed summary. [You can find it here.](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)

### Headers

Simply start any line of content with a one, two, three, four, five, or six `#`'s and you'll get a header of levels 1-6.

### Type Faces

Not all of your content can be just simple text right? Sometimes you need to put emphasis on words or blocks on text, and Markdown makes that really simple. Here are the basics.

* `**Bold**` results in **Bold**
* `*Italics*` results in *Italics*
* `~~Strikethrough~~` results in ~~Strikethrough~~
* `^Super^` results in ^Super^
* `<sup>SuperScript</sup>` results in <sup>SuperScript</sup>
* `<sub>SubScript</sub>` results in <sub>SubScript</sub>

## HTML and CSS

Ok, here's where things start to get a bit technical, but only if you want them to. GM Binder will allow you to use HTML and CSS throughout your document. I won't be going very deep at all into this in this lesson as there are a ton of excellent resources to be found on the Internet, but I will touch on one of the most used HTML tags in GM Binder documents.

### Images

There are a couple ways you can place images. If you would like something positioned like you see on this page, you will need to provide the appropriate styles to do so. For example:

`<img src='https://www.gmbinder.com/assets/img/books.jpg' style='position:absolute;bottom:45px;right:30px;width:380px; mix-blend-mode:multiply;' />`

If you would like to place an image in-line within your content, simply providing an image tag with an external URL will be sufficient. Do be aware that your images should be sized appropriately for the content.

\columnbreak

## Ease of Use Features

Now that we're well on our way to creating fan-freakin-tastic content on a pretty slick online platform, let's go over some of the most useful features for keeping you efficient as an author.

### Find and Replace
* `Ctrl+F` or `Cmd+F` - Find
* `Alt+Ctrl+F` or `Alt+Cmd+F` - Find & Replace

### Editing
* `Ctrl+Z` or `Cmd+Z` - Undo
* `Ctrl+Shift+Z` or `Cmd+Shift+Z` - Redo
* `Ctrl+D` or `Cmd+D` - Remove current line
* `Ctrl+U` - Uppercase current selection
* `Ctrl+Shift+U` - Lowercase current selection

### Content Folding
* `F2` - Fold / Unfold a block of content
* `Ctrl+Cmd+Alt+0` Fold everything
* `Shift+Cmd+Alt+0` UnFold everything

### And Much More...
* `Ctrl+Alt+H` or `Cmd+Alt+H` Shows all Editor Shortcuts

> If you're more of a keyboard shortcut person, many of your favorite shortcuts for things like bold, italics, etc work in GM Binder as you would expect them to.

<div class="footnote">
Designing Your Module - A lesson for the Winter 2018 RPG Writer Workshop by /u/Iveld
</div>

\pagebreakNum

## Leveraging Others

GM Binder was created as a place to not only create well formated and functional documents, but also as a place to share your work if you want to. The up side to this is that most all authors choose to share the source of their documents when they publish them within GM Binder. Use the search bar on the home page to find content, and leverage what others have created to make your own content.

But please, **Practice Safe Homebrewing**.

People love to flex their creative muscles while composing new homebrew content. More often than not, the inspiration for you document comes from another source. Sometimes significantly. Other times just as a spark.

What is important for the community is that you share your sources of inspirations.

## Versioning Your Module

In the Preview Toolbar is a green button that opens the Versions dialog. This is what you will want to use when you're ready to share your content with others. When you open this and click the Create Version button, you'll see a URL appear. This is the URL that you'll want to use to share your read only document with others.

## Document Settings

Before you get all excited about sharing your newly created module, make sure you take a couple minutes time to look at your Document Settings found in the blue button in the Preview Toolbar. This will help to fill out the metadata that search engines use to learn about your content. It's also where you can set a thumbnail images for your document. If sharing to Reddit is in your future, this is pretty important.

Additionally, take just a minute or two to fill out your profile found in the My Settings menu in the top header of the site. This will help to build your profile and help your readers find more of your published content.

## Sharing Your Module

Additionally, if you visit your document's share URL you will be able to Print your document, and can select the Print to PDF option within your browser's print dialog. Although we love to see authors share their creations with direct links to our site, we understand that some find PDFs more useful. Feel free to do as you wish.

As mentioned before, sharing or selling your content generated on GM Binder is absolutely your choice to do. Generally when people do this, they share a PDF, and using the Print to PDF functionality mentioned above is how you do it.

\columnbreak

## In Summary

The topics we've covered in this lesson should have you well on your way to designing a good looking document to share with others. That said, there's a lot more to be done with GM Binder.

One area I'm going to challenge you to explore is the use of the built in Snippets. In the Editor Toolbar is a magic wand icon that represents the Snippets menu. When you open this dialog you'll be given a list of built in snippets that you can easily insert into your documents. We try to do a good job of showing you a preview when it makes sense, and I think it should be pretty self explanatory what each one will do.

To help show you some of these in one place, I've added the most useful snippets in the following pages.

## Updates

Depending on where you're viewing this document, you might not be able to view the source code. Because of this, I'm going to provide a link to this document's original source [here](https://www.gmbinder.com/share/-LPnHKXC8G7OGTlzInnQ). Please check in on this if you find any errors or typos as I will keep the original up to date in the future.

<div class="footnote">
Designing Your Module - A lesson for the Winter 2018 RPG Writer Workshop by /u/Iveld
</div>

\pagebreakNum

# Headline 1 Headline 1 Headline 1

Ho mankoi lle uma tanya amin khiluva lle a' gurtha ar' thar quel lome. Shaalth Nuduin amin panta tangwa. Tampa tanya! Naugrim tula uialtum tenna' san'. Aman tel' Seldarine aa' menle nauva calen ar' ta hwesta e' ale'quenle uuma dela amin uuma malia. Gorgaerea rwalaerea atost en' entula orme amin autien rath.

Lye yala onna en' kemen tanya awra! En!. Lirimaerea mereth en draugrim Yallume Elenya. Amin hiraetha quel undome nai uuvanimo turamin cormamin niuve tenna' ta elea lle au'. Yavannie ram en' ondo mereth en draugrim tanka tel' taurnin. Aman tel' Seldarine ram en' templa Amrun'quessir amin khiluva lle a' gurtha ar' thar.

## Headline 2

### Headline 3

#### Headline 4

\columnbreak

##### Headline 5

###### Headline 6

### Type Faces
* **Bold**
* *Italics*
* ~~Strikethrough~~
* ^Super^
* <sup>SuperScript</sup>
* <sub>SubScript</sub>
* [Internal Link](https://www.gmbinder.com)
* [External Link](https://www.reddit.com/r/uneartherarcana)

1. Item 1
2. Item 2
3. Item 3

* Item 1
* Item 2
* Item 3

<div class="footnote">
Designing Your Module - A lesson for the Winter 2018 RPG Writer Workshop by /u/Iveld
</div>

\pagebreakNum

##### Class Block Narrow
| Level | Proficiency Bonus | Features | Some Modifier |
|:---:|:---:|:---|:---:|
| 1st | +2 | Something | — |
| 2nd | ─ | ─ | — |
| ... | ─  | ─ | ─ |
| 20th | ─ | ─ | ─ |

</div>

> ##### Catchy Title
> Useful Information

<div class='descriptive'>
 
##### Catchy Title
Useful information
 
</div>

## Class Features
As a class_name, you gain the following class features
#### Hit Points
___
- **Hit Dice:** 1d10 per class_name level
- **Hit Points at 1st Level:** something
- **Hit Points at Higher Levels:** something_higher

#### Proficiencies
___
- **Armor:** armor
- **Weapons:** weapons
- **Tools:** tools

___
- **Saving Throws:** saving_throws
- **Skills:** Choose two from skills

#### Equipment
You start with the following equipment, in addition to the equipment granted by your background:
- *(a)* a item1 or *(b)* item2

| d8  | Loot |
|:---:|:-----------:|
|  1  | 100gp |
|  2  | 200gp |
|  3  | 300gp |
|  4  | 400gp |
|  5  | 500gp |
|  6  | 600gp |
|  7  | 700gp |
|  8  | 1000gp |

\columnbreak

| d8  | Loot |
|:---:|:-----------:|
|  1  | 100gp |
|  2  | 200gp |
|  3  | 300gp |
|  4  | 400gp |

| d8  | Loot |
|:---:|:-----------:|
|  5  | 500gp |
|  6  | 600gp |
|  7  | 700gp |
|  8  | 1000gp |

</div>

#### Spell Name
*Spell Type*
___
- **Casting Time:** Casting Time
- **Range:** Range
- **Components:** V, S
- **Duration:**  Duration

A description bursts from the caster's fingers and spreads at the speed of the reader's comprehension.

___
> ## Monster Name
>*Size, Alignment*
> ___
> - **Armor Class** AC
> - **Hit Points** Hitpoints
> - **Speed** Speed
>___
>|STR|DEX|CON|INT|WIS|CHA|
>|:---:|:---:|:---:|:---:|:---:|:---:|
>|Str (+Mod)|Dex (+Mod)|Con (+Mod)|Int (+Mod)|Wis (+Mod)|Cha (+Mod)|
>___
> - **Condition Immunities** Some
> - **Senses** Senses
> - **Languages** Languages
> - **Challenge** Senses
> ___
>
> ### Actions
> ***Ability Description.*** *Attack Style:* +4 to hit, reach 5 ft., one target. *Hit* 5 (1d6 + 2)

<div class="footnote">
Designing Your Module - A lesson for the Winter 2018 RPG Writer Workshop by /u/Iveld
</div>

\pagebreakNum

___
___
> ## Monster Name
>*Size, Alignment*
> ___
> - **Armor Class** AC
> - **Hit Points** Hitpoints
> - **Speed** Speed
>___
>|STR|DEX|CON|INT|WIS|CHA|
>|:---:|:---:|:---:|:---:|:---:|:---:|
>|Str (+Mod)|Dex (+Mod)|Con (+Mod)|Int (+Mod)|Wis (+Mod)|Cha (+Mod)|
>___
> - **Condition Immunities** Some
> - **Senses** Senses
> - **Languages** Languages
> - **Challenge** Senses
> ___
>
> ### Actions
> ***Ability Description.*** *Attack Style:* +4 to hit, reach 5 ft., one target. *Hit* 5 (1d6 + 2)

##### Cantrips (0 Level)
- Cantrip A
- Cantrip B
- Cantrip C

##### 1st Level
- Spell A
- Spell B
- Spell C

##### 2nd Level
- Spell A
- Spell B
- Spell C

\columnbreak

##### 3rd Level
- Spell A
- Spell B
- Spell C

##### 4th Level
- Spell A
- Spell B
- Spell C

##### 5th Level
- Spell A
- Spell B
- Spell C

\columnbreak

##### 6th Level
- Spell A
- Spell B
- Spell C

##### 7th Level
- Spell A
- Spell B
- Spell C

##### 8th Level
- Spell A
- Spell B
- Spell C

\columnbreak

##### 9th Level
- Spell A
- Spell B
- Spell C

</div>

##### Class Block Wide
| Level | Proficiency Bonus | Features | Cantrips Known | Spells Known | 1st | 2nd | 3rd | 4th | 5th | 6th | 7th | 8th | 9th |
|:---:|:---:|:---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| 1st | +2 | Something | — | — | — | — | — | — | — | — | — | — | — |
| 2nd | ─ | ─ | — | — | — | — | — | — | — | — | — | — | — |
| ... | ─  | ─ | ─ | ─ | ─ | — | — | — | — | — | — | — | — |
| 20th | ─ | ─ | ─ | ─ | ─ | ─ | ─ | ─ | ─ | — | — | — | — |

</div>

<div class="footnote">
Designing Your Module - A lesson for the Winter 2018 RPG Writer Workshop by /u/Iveld
</div>

\pagebreakNum

# PART 1
##### Summary of Things

</div>

\pagebreak

# PART 2
##### Summary of Thangs

</div>

\pagebreak
 
 <div class='back-cover-image'></div>
 
 <div style='margin-top:20px;'></div>
 
 <div class='back-cover-header'>
 
 Practice
 
 Safe
 
 Homebrewing
 
 </div>
 
 <div class='back-cover-text'>
 
 People love to flex their creative muscles while composing new homebrew content. More often than not, the inspiration for you homebrew comes from another source. Sometimes significantly. Other times just as a spark.
 
 What is important for the community is that you share your sources of inspiration. This back cover can serve as an easy to find, easy to read place for you to do just that.
 
 So go ahead, remove this chunk of copy and tell everyone who inspired you.
 
 Cover Art: [Skiorh](https://skiorh.deviantart.com/art/Old-wizard-475018762)
 
 </div>
 
 <div class='back-cover-diamond' style='top: 679px;'></div>
 
 <div style='margin-top:35px;'></div>
 
 <div class='back-cover-close'>
 
 When you're ready to share with the community, don't forget to mark your document as public so people can find it in the [GM Binder Search](https://www.gmbinder.com/search)
 
 </div>
 
 <div class='back-cover-logo'></div>
 
 <div class='back-cover-logo-link'>
 
 [WWW.GMBINDER.COM](https://www.gmbinder.com)
 
 </div>
 
 \columnbreak
 
 <div class='back-cover-right'>
 
 ##### More Credits
 
 Maybe you have so many people to give credit to that you need a bit more space. Well, you can use this column to do exactly that!
 
 </div>