Watercoloring in GM Binder

/* Remove last page */
  .phb:last-of-type { display:none;
  }

/* Footer Contents */
    .phb:nth-child(even):after{ 
        height              : 90px;
        background-image    : url('https://www.gmbinder.com/images/wf4tTzN.png');
        background-position : right bottom;
        content             : "";
        transform           : scaleX(-1);
    } 
    .phb:nth-child(odd):after{ 
        height              : 90px;
        background-image    : url('https://www.gmbinder.com/images/wf4tTzN.png');
        background-position : right bottom;
        content             : "";
    }

/* Footnote Styling */
    .phb .footnote{
        position       : absolute;
        right          : 80px;
        bottom         : 3px;
        z-index        : 150;
        width          : 700px;
        font-size      : 8pt;
        letter-spacing : 0.7px;
        font-variant   : small-caps;
        color          : #B89A67;
    }

/* Page Number Styling */
    .phb .pageNumber.auto{
        position   : absolute;
        bottom     : 17px;
        width      : 65px;
        font-size  : 10pt;
        text-align : center;
        color      : ;
    }
    .phb:nth-child(even) .pageNumber.auto{
        text-align : left;
        left       : 55px;
    }
    .phb:nth-child(odd) .pageNumber.auto{
        text-align : right;
        right      : 55px;
    }
</style>

<img 
  src='https://i.pinimg.com/736x/af/2c/c7/af2cc7d58f31d53b91f9be9934ac17e5--child-artist-girl-paintings.jpg' 
  style='position:absolute; top:0px; left:0px; width:100%' />

<img src='https://www.gmbinder.com/images/hBdjwi6.png' style='position:absolute;top:30px;left:350px;width:130px;'/>
<img src='https://www.gmbinder.com/images/hBdjwi6.png' style='position:absolute;top:30px;left:350px;width:130px;'/>
<img src='https://www.gmbinder.com/images/hBdjwi6.png' style='position:absolute;top:30px;left:350px;width:130px;'/>

<div style='position:absolute;
font-family: NodestoCaps, sans-serif;
font-weight:normal;
font-size:48px;
color:white;
text-shadow: 2px 2px 5px #000000,-2px 2px 5px #000000,2px -2px 5px #000000,-2px -2px 5px #000000;
transform: scale(1.7, 1.7);
top:95px;
width:700px;'>WATERCOLORING</div>
<div id="diamond-narrow"></div>

<div style='position:absolute;
font-family: NodestoCaps, sans-serif;
font-weight:normal;
font-size:36px;
color:white;
text-shadow: 2px 2px 5px #000000,-2px 2px 5px #000000,2px -2px 5px #000000,-2px -2px 5px #000000;
transform: scale(1.7, 1.7);
top:170px;left:-90px;
width:700px;'>IN</div>
<div id="diamond-narrow"></div>

<div style='position:absolute;
font-family: NodestoCaps, sans-serif;
font-weight:normal;
font-size:48px;
color:white;
text-shadow: 2px 2px 5px #000000,-2px 2px 5px #000000,2px -2px 5px #000000,-2px -2px 5px #000000;
transform: scale(1.7, 1.7);
top:160px;left:110px;
width:700px;'>GM BINDER</div>
<div id="diamond-narrow"></div>

<img src='https://www.gmbinder.com/images/SGYtcP2.png'
style='position:absolute;width:45%;height:3.2%;left:230px;top:225px;'
/>
 

<img src='https://www.gmbinder.com/images/GEJN7IP.png' style='position:absolute;left:-10px;bottom:145px;width:430px' />
<img src='https://www.gmbinder.com/images/GEJN7IP.png' style='position:absolute;left:-10px;bottom:145px;width:430px' />

<div style='position:absolute;
font-family:Lora, sans-serif;
transform: scale(1.9, 2.3) !important;
font-size:12px;
color:white;
bottom:30px;
right:55px;
width:700px;
text-shadow: 1px 1px 2px #000000,-1px 1px 2px #000000,1px -1px 2px #000000,-1px -1px 2px #000000;
filter:opacity(100%)'>A resource for creating beautiful documents</div>

\pagebreak

<div style='font-family:"Alegreya SC", alegreya, serif;
color:#58180d;
font-size:30px;
font-variant:small-caps;
font-weight:bold;
text-align:center;
padding-bottom: 0.6em;'>Contents</div>

<!-- ### Preface

### Credits

### Image Manipulation

Choosing an Image  .........................................................................

Adding an Image ..............................................................................

Image Filter ......................................................................................

Filter Examples................................................................................

Image Transform .............................................................................

Transform Examples.......................................................................

### Blending

Understanding Layers....................................................................

Roughing the Edge .........................................................................

<div style='position:absolute;top:340px;left:380px'> 6 </div>Smoothing the Edge .......................................................................

## Preface

Creating a game supplement can be a fun and challenging undertaking. The usability and general acceptance of the content is often derived from the written word. Balance, lore, and imaginative combinations or dynamics can create a high quality addition to the game. If you want to bring your content to the next level, however, imagery can entertain both the eye and the imagination.

This guide serves to instruct you on the matters of adding graphics to your supplement and manipulating them to reflect the style of official products. In the following pages, you will be shown how to add a graphic, manipulate it's location and look, then add additional elements to blend it into the background.

The tool utilized by this guide is [GM Binder](https://www.gmbinder.com/), a simple and fantastic online editor for gaming enthusiasts. Some basic familiarity with the tool is assumed, but attempts will be made to make the processes described herein as plain as possible. Should questions arise, feel free to contact the designer.

## Credits

**Lead Designer/Producer:** [QalarValar](https://reddit.com/user/QalarValar/submitted)

**Cover Illustrator:** [Sandara](https://sandara.deviantart.com/)

**Interior Illustrators:** Outland Arts (pg. 1), Zack Stella (pg. 2-5)

**Resources:** Brush sets derived freely through the courtesy of [Denny Tang](https://pstutorialsws.deviantart.com/art/Watercolor-Splatters-160738581) and [Daniel Kamarudin](https://thedurrrrian.deviantart.com/art/Durian-Brushes-533653041). Homebrew icon and label by [AeronDrake](https://reddit.com/user/AeronDrake). Footer graphic derived, with permission, from [Oakendragon](https://www.deviantart.com/oakendragon/art/Dragon-Header-and-Footer-125221656). Other art and visual assets (including illustrations credited above) were used in good faith to create this document without express permission from their owners unless otherwise stated

**Context:** Dungeons and Dragons 5th Edition by Wizards of the Coast, LLC

**GM Binder:** An amazing tool by the folks at [We Write Code](https://www.wewritecode.com)

\pagebreak

## Image Manipulation

Before we can begin to blend images to reflect our desired style, we need to know how to add an image and change its appearance. In this section, we will cover image selection, positioning, and applying visual effects and transformations.

### Choosing an Image

When choosing an image to add, you'll want to consider three things: size, skill, and subject.

| What || Why |
|:----|:---:|:-------------|
| Size  || Usually, the more pixels, the merrier. |
| Skill || Well rendered subjects tend to be better than poorly rendered ones, artistically speaking. |
| Subject  || It should relate closely to the topic or vision of your supplement. |

The size of the image isn't equally as important as the pixel density, and the two often go hand in hand. The image should be large enough, or dense enough, that when stretched or shrunk to fit, it doesn't appear degraded. A degraded image might create negative assumptions about your other content. Reverse image searching tools, like [Google Images](https://images.google.com/), can make finding variations in size quite easy, and are also helpful in finding other information about an image. Your results may vary depending upon the obscurity of the image.

The skill of the artist should be taken into account, since graphics are where the eye often lands in a document. The quality of art can create an immediate impression of overall quality or designer experience. There are many varieties of artistic skill and preference, so find (or perhaps even create) something that you feel comfortable with and that you feel reflects your supplement in the best way.

The subject of the illustration should be relevant to your work, directly or in theme, in order to enhance the imagination and association of the visual to your text. Irrelevant imagery may only serve as a distraction, or lead your reader to confusion. On the other hand, illustrations depicting a specific aspect of your supplement can stir the imagination where text might fall short.

As a final comment on choosing images, be sure to keep cohesion in mind. Having a unified artistic style can really tie together a document. Finding quality artists, with similar styles and skill levels can be a challenge, but the effort can pay off.

> ##### freely available, not free
> Keep in mind that online art can be easily found and collected, but it's use is typically under some form of copyright. Wrongfully distributing or selling art directly affects artists' livelihoods. Typically, when you aren't getting a profit, crediting the artist and where you found it is a good practice. If you are seeking a profit, use art you have purchased outright, negotiated distribution rights for, or have created yourself.

### Adding an Image

Once you have an image chosen, you'll want to add it to your document. The image should be publicly accessible ─ online images typically are, but some hosts can cause issues. This is often evident when an image does not appear and can be due to an access issue or an invalid URL.

GM Binder doesn't have a menu item for adding an image yet, so you'll use the following code snippet, replacing the URL with that of your image. Since GM Binder uses a secure connection (via SSL), it's important that the URL is also using SSL (indicated by https).

For the purposes of this guide, we'll use the following graphic of a warrior.

<img 
  src='https://media.wizards.com/2015/images/daily/cardart_AZVaGY5FCG.jpg' 
  style='width:325px' />
  
### Image Filter

The code block for your image provides you with powerful control. One way to modify the appearance of the image is by using a filter. A filter allows you to change the colors, intensities, and transparencies of the image. This property won't be used often with base images, but can be important to achieving the blending effect described later in this guide.

For your base images, using a filter can help you set a tone across multiple images by coordinating a color scheme, luminosity, or other quality of the illustrations. Here is a list of useful properties you can adjust using the filter:

<div class='footnote'>IMAGE MANIPULATION</div>

\pagebreakNum

### Filter Examples
The following are examples showing the original image (left) with the property-adjusted image on the right. There is also a code snippet immediately below each example that shows the style string format to use the property. Each filter property can be used together, with varying results. Here is a combined filter snippet that makes no changes to the base image, but can be adjusted to suit your needs.

<div class='descriptive' style="font-family:Courier New, Courier, monospace;">
style='position:absolute; top:80px; left:240px; width:150px;
  filter:brightness(100%)contrast(100%)
  grayscale(0%)hue-rotate(0deg)
  opacity(100%)saturate(100%)sepia(0%);'
</div>

#### Brightness

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;
  filter:brightness(150%);'
</div>
  
#### Contrast

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;
  filter:contrast(150%);'
</div>

#### Grayscale

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; margin-top:10px; left:240px; width:150px;
  filter:grayscale(70%);'
</div>

#### Hue-Rotate

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;

filter:hue-rotate(100deg);'
</div>

#### Opacity

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;
  filter:opacity(50%);'
</div>

#### Saturate

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;
  filter:saturate(150%);'
</div>

#### Sepia

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;   
filter:sepia(70%);'
</div>

<div class='footnote'>IMAGE MANIPULATION</div>

\pagebreakNum

### Image Transform

The display of an inserted image can be altered through use of a transformation. A transformation doesn't change the contents of the image, unlike a filter, but changes the positioning and point of view. This property will be used often to get your base image just right as well as to blend it into the background (a process described later in this guide).

Here is a list of useful properties you can adjust using a transform:

### Transform Examples

The following are examples showing the original image (left) with the property-adjusted image on the right. There is also a code snippet immediately below each example that shows the style string format to use the property. Each transform property can be used together, with varying results. Here is a combined transform snippet that makes no changes to the base image, but can be adjusted to suit your needs.

<div class='descriptive' style="font-family:Courier New, Courier, monospace;">
style='position:absolute; top:80px; left:240px; width:150px;
  transform:rotate(0deg)scaleX(1)scaleY(1);'
</div>

#### Rotate

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;   
transform:rotate(180deg);'
</div>

#### ScaleX

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;   
transform:scaleX(-1);'
</div>

> ##### Complete Transformation
> There are many more ways to utilize the transform property of an image's style, but the ones presented here have been the most useful to the author. If you'd like to explore further transformation properties, [w3schools](https://www.w3schools.com/cssref/css3_pr_transform.asp) has many resources.
>
> For example, scaleX is the property suggested here to flip an image horizontally. There is another property, rotateY that can also generate this effect, but it seems rotateY can have some trouble rendering on mobile devices, so scaleX is preferred.
>
> As a final tip for advanced users, there is a property skewX that allows you to create a slant with an image. This can be very handy for created shadows of singular figures, but it should be noted that while GM Binder will render these beautifully, the image has trouble rendering during the print process.

#### ScaleY

<div class='descriptive' style="font-family:Courier New, Courier, monospace">
style='position:absolute; top:80px; left:240px; width:150px;   
transform:scaleY(-1);'
</div>

<div class='footnote' style='letter-spacing:0.7px;color:#B89A67;'>IMAGE MANIPULATION</div>

\pagebreakNum

## Blending

Now that we know how to add our base images to our document and manipulate them, we will learn how to blend them into the background using watercolor images found [here](http://bit.ly/QalarValar_Blending) and in high definition [here](http://bit.ly/QalarValar_Blending_HD). By blending parts of the image into the background, we can creat an official look as well as isolate the parts of the image we want to highlight.

### Understanding Layers

In GM Binder, layering images is pretty simple; from top to bottom of the markdown code you establish bottom to top layering. This means the image that is first rendered goes on the bottom and is underneath by any following images. Remember, we use absolute positioning, which are "background" images, and you may experience different behavior when interacting with relative or "foreground" images.

### Roughing the Edge

To start blending your base image, find a watercolor stain that suits you in the linked gallery. Add the image as described in the previous section, but be sure to add it after your base image in the markdown layout. Filter and transform the watercolor stain to suit your tastes, including experimenting with color. With the upper right image on this page, I have shown a small example of this with our base and two stains.

This process can take some time if you want the look "just right". Position, scale, rotation, and even the opacity of the stains can affect an interesting and unique look. You should take the time to find a stain that creates a pleasing contour around the image of your subject, and be unafraid to use many different stains in different orientations. As long as you are happy in the end, you've reached your goal.

### Smoothing the Edge

Once you've established the stained edge, you have a couple options, but at this point you should not be changing the colors from what matches the background. First, you can continue to layer stains to create a rough blending effect, or second, you can use the circle blending images (not stains) to quickly fade the base into the background. Whichever your preference, add the appropriate images and position them to your liking. With the lower image on the right, I've used two circle blending images to create a soft transition between the watercoloring and the background.

<div class='footnote'>BLENDING</div>

\pagebreakNum