Formatting on the Homebrewery

Here are some things I use in my brews to give them a better design. The easiest way to understand this guide is to copy the code and paste it on a new brew, so you can see the coding on the left and the result on the right. If you want to see the code of this brew, click on the source button or here: https://docs.google.com/document/d/1_cl1KhzIztSsFyja0WGq2snjTob_g4D8u08J_KR496Y/edit

Spacing text

Normal text

Text 1

Text 2

Text 3

Text 4

Text 5

"___" (3 underlines)

Text 1 (underlines below this)

---

Text 2

Text 3

Text 4 (underlines below this)

---

Text 5

Uses

used in the spells description, just under the level and spell type line (see example below)

Your Amazing Spell Name

7th-level illusion (underlines below this)

---

• Casting Time: 1 action
• Range: 30 feet
• Components: M (a small doll)
• Duration: 1 hour

The magnificent description of your balanced spell.

"< br >" (without the spaces)

Text 1 (br under this line of text)
Text 2 (2 br under this line)

Text 3 (3 br under this line)


Text 4 (4 br under this line)



Text 5

---

This is also used to "force" spacing (see the example using this and an image in the last page)

Vertical Spacing

You can also create some spacing between texts using the vertical spacing found in the editor. To modify the spacing, change the margin-top pixels. For example: margin-top:40px

---

Text 1 (markdown below this line, margin-top at 40px)

Text 2

Tabbing text

"& nbsp ;" (without the spaces)

Text 1

Text 2

  Text 3 (1 "&nbsp" before the text)

   Text 4 (2 "&nbsp" before the text)

    Text 5 (3 "&nbsp" before the text)

Images

Things to add to style

Position: absolute; This allows you to put the image on any part of the page. You control the position and size adding the following lines:

• For Y axis, use top:Xpx; or bottom:Xpx;. For example: top:40px;
• For X axis, use left:Xpx; or right:Xpx;. For example: right:-220px;
• For setting the image size, use width:Xpx;. For example: width:510px;

For the X and Y axis lines, you can use negative values too, and for the image size, you can use "%" instead "px".

For example, the image code using those markdowns would be something like this: style='position:absolute;top:-40px;right:20px;width:800px;'

---

mix-blend-mode:X; This allows to add any blending mode to an image. In most of the cases, if you use a image with a white background you can use the blend mode multiply to remove the white. This is not 100% accurate, but it works great if you don't know how to use photoshop or any other editing software.

Here're a list of various blend modes that works with the images.

multiply: the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.

screen: multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color.

overlay: multiplies or screens the content depending on the background color. This is the inverse of the hard-light blend mode.

darken: the background is replaced with the content where the content is darker, otherwise it is left as it was.

lighten: the background is replaced with the content where the content is lighter.

color-dodge: this attribute brightens the background color to reflect the color of the content.

color-burn: this darkens the background to reflect the content’s natural color.

hard-light: depending on the color of the content this attribute will screen or multiply it.

soft-light: depending on the color of the content this will darken or lighten it.

difference: this subtracts the darker of the two colors from the lightest color.

exclusion: similar to difference but with lower contrast.

hue: creates a color with the hue of the content combined with the saturation and luminosity of the background.

saturation: creates a color with saturation of the content combined with the hue and luminosity of the background.

color: creates a color with the hue and saturation of the content and the luminosity of the background.

luminosity: creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the color attribute.

---

This information was found on the following page: https://css-tricks.com/almanac/properties/m/mix-blend-mode/

Example Using a Blending Mode:

Original: "Agail Enthess" by rhineville

With multiply as blending mode: (see the source code!)

Example using < br > and an image

Weapons

Your class grants proficiency in certain weapons, reflecting both the class’s focus and the tools you are most likely to use. Whether you favor a longsword or a longbow, your weapon and your ability to wield it effectively can mean the difference between life and death while adventuring.

The Weapons table shows the most common
weapons used in the fantasy gaming worlds, their price
and weight, the damage they deal when they hit, and
any special properties they possess. Every weapon
is classified as either melee or ranged. A melee
weapon is used to attack a target within 5
feet of you, whereas a ranged weapon is
used to attack a target at a distance.

Weapon Proficiency

Your race, class, and feats can
grant you proficiency with certain
weapons or categories of weapons.
The two categories are simple
and martial. Most people can use
simple weapons with proficiency.
These weapons include clubs,
maces, and other weapons often
found in the hands of commoners.
Martial weapons, including swords,
axes, and polearms, require more
specialized training to use effectively.
Most warriors use martial weapons
because these weapons put their fighting
style and training to best use.

Proficiency with a weapon allows you to add
your proficiency bonus to the attack roll for
any attack you make with that
weapon. If you make an attack roll
using a weapon with which you
lack proficiency, you do not add
your proficiency bonus to the attack
roll.

Using the "BRs" I've wrapped the text arround the image borders. It might be a bit tedious to do on the code, but the result is amazing.

Image used: "Dark Elf Warlord (1st iteration)" by Tanorax

Blending Images

While you can easily remove the white background for images using the blend modes, some other images can be blended with a bit more of work. This clever idea was created originally by /u/QalarValar, and you can see his amazing resource in the following link: https://www.reddit.com/r/UnearthedArcana/comments/5nw1ou/watercolor_your_own_images_in_homebrewery/

How It Works

I'll be using the QalarValar image resources (There you can find a lot of stains images): http://imgur.com/a/TW79K and the amazing piece of art called "Adventurers", created by Sandara (Deviantart).

The process is pretty simple: you need to put the image you want to blend and then you just put the stains images at top of it.

Here's the original image

Here's the original image with some stains images on top of it (if you see the code, the stains images are below the original)

'The images below this text are the stains!'

Here're another examples of using the same method of blending images. In this case I created some new brushes for this. You can found them here: http://imgur.com/a/SKmRN

Random Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis erat vel quam pharetra condimentum. Phasellus sed dapibus lacus, vitae pulvinar nisl. Nullam nec erat eget nisi viverra semper rhoncus vel tortor. Nullam dictum tellus elementum, egestas mi sit amet, molestie neque. Vivamus vel blandit ligula, et placerat lorem. Aliquam consequat suscipit nisl, at gravida ante auctor mollis. Nulla quis sapien et neque luctus convallis. Cras feugiat dolor nibh, non vulputate arcu venenatis nec.

Morbi scelerisque suscipit ligula, id consectetur tortor scelerisque id. Cras imperdiet orci ac diam mollis, ac hendrerit velit cursus. Phasellus fermentum finibus blandit. Duis non dignissim mauris, quis rutrum odio. Suspendisse potenti. Donec aliquet in metus eget interdum. Pellentesque

'Top image'

'Bottom image'

Blending: New Method

Here's another metod, more simple and
quicker, but its limited by the images you use.
In this case, I took the background image
used in the homebrewery and the Player's
Handbook and edited it, so the top right side of the
page is completely erased, allowing to show some image under it with better stains and a nicer look. With this method, you need to make sure the edited backgrounds you use for blending are at least 816 pixels width, so it covers the whole background image.

I think this is the best way to have a nice blending look for images, and it's great for everyone who doesn't know how to use photoshop or any other editing software. The only "problem" of this metod is the limited flexibility for moving the image and adapting it.

Test (Random text)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis erat vel quam pharetra condimentum. Phasellus sed dapibus lacus, vitae pulvinar nisl. Nullam nec erat eget nisi viverra semper rhoncus vel tortor. Nullam dictum tellus elementum, egestas mi sit amet, molestie neque. Vivamus vel blandit ligula, et placerat lorem. Aliquam consequat suscipit nisl, at gravida ante auctor mollis. Nulla quis sapien et neque luctus convallis. Cras feugiat dolor nibh, non vulputate arcu venenatis nec.

Test text

Morbi scelerisque suscipit ligula, id consectetur tortor scelerisque id. Cras imperdiet orci ac diam mollis, ac hendrerit velit cursus. Phasellus fermentum finibus blandit. Duis non dignissim mauris, quis rutrum odio. Suspendisse potenti. Donec aliquet in metus eget interdum. Pellentesque convallis euismod risus sit amet semper. Aliquam convallis lacinia dui.

Cookie Tastiness

Tastiness	Cookie Type
-5	Raisin
8th	Chocolate Chip
11th	2 or lower
14th	3 or lower
17th	4 or lower

Nunc blandit consectetur lorem, vel fringilla nisl accumsan vel. Morbi tempor enim sed sodales rhoncus. Aliquam vel venenatis turpis. Sed felis turpis, dignissim id purus at, iaculis pulvinar metus. Ut consectetur lectus at lectus dictum scelerisque. Phasellus vitae egestas metus. Nunc consequat, metus lobortis egestas varius, nunc nisl facilisis lorem, a fringilla orci lorem a odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce egestas, nisl ac faucibus finibus, dui risus fermentum erat, hendrerit aliquet dolor diam eget est. Ut nec faucibus dui.

A Bit More of Randomness

Etiam ante lectus, dictum sit amet dui nec,
euismod pulvinar mi. Sed elementum justo
eget nisl condimentum, nec pulvinar ligula semper. Nullam vitae risus sit amet lectus consequat tincidunt vitae in lorem. Cras egestas justo sit amet purus molestie consectetur. Aliquam scelerisque nibh dolor, sed dapibus erat hendrerit et. Duis id lacus dui. In placerat tortor sed nisi mollis, eu congue quam aliquam. Ut elementum maximus dolor. Duis egestas lorem quis leo elementum, et hendrerit sapien imperdiet. Sed et erat quis turpis malesuada vehicula eget vel lorem.

Suspendisse efficitur lorem ac nulla pellentesque pellentesque in non enim. Sed egestas bibendum sodales. Morbi posuere augue purus, vel blandit lorem efficitur vitae. Curabitur at nisi vitae nulla ultrices finibus. Fusce ut dui eleifend, porta orci et, aliquet diam. Nunc at metus aliquam tellus facilisis fermentum. Vestibulum et ornare eros. Nunc eu pharetra urna.

Heal Bad Hygene

5th-level transmutation

---

• Casting Time: 1 action
• Range: 30 feet
• Components: S
• Duration: Concentration, up to 10 minutes

A flame, equivalent in brightness to a torch, springs from from an object that you touch. The effect look like a regular flame, but it creates no heat and doesn't use oxygen. A continual flame can be covered or hidden but not smothered or quenched.

Special Tip About this Method

The backgrounds images I've created are in the same link you can find on the 5th page of this guide! If you missed it: http://imgur.com/a/SKmRN

Also, this images for blending are a bit bigger (1275x1650), so you can resize them from 816px to a bigger size, and then moving it to fit the images and text you're using.

'Make sure the background image below is at 816 pixels width'

To-Do

• Table of contents
• Custom images
• Expading the Blending Images part

Created by Aeron Drake

Reddit thread link: https://www.reddit.com/r/UnearthedArcana/comments/656l98/formatting_tips_for_the_homebrewery/

You can see my other brews for inspiration (and looking the code of them) in the following link: http://homebrewery.naturalcrit.com/user/draco