Trouble Child SVG Font and Demos

Hi everyone!

Today, I would like to share an expansion of the Trouble Child font with you. When I started working on this font, the idea was to make it a SVG font. But as I finished the vector version sooner, I wanted to release it first and take an extra week to add some goodies to the SVG version (including some doodles and a couple of video tutorials).

This update to Trouble Child includes:

• 3 SVG fonts: Regular, Blackout and Outline

• 18 doodles in PNG format with transparent backgrounds, that complement the SVG fonts perfectly

• 1 PDF guide to the Extras font

• 2 video tutorials that you can watch below (and that I also include in the download file) with accompanying PSD template files

🠮 Don't forget you can get Trouble Child free with another font, using the code GET1FREE at checkout!

---

Demo #1: How to change the color on SVG fonts using Photoshop

This is a short demo about how to change the color on SVG fonts using Photoshop.

1. For this I am using my font Trouble Child Blackout SVG, and I have decorated my text using the Extra doodles included with the font as individual pngs with a transparent background.

2. Because I want all the words and elements to have the same color, I start by grouping them together using the folder icon. If you only have one text layer you want to change the color of, you can skip this step.

3. Then I go to Blending Options, select Color Overlay, set the Blend Mode to Screen and select the color. Here I amusing a grey-ishblue, but you can choose any color to your liking. And that’s it !

4. You can then drag your lettering over a photo or paper texture to finish your design.

5. Hope this helps you enjoy using your SVG fonts !

Demo #2: How to use the frame elements in an Extras Font

This is a short demo on how to use the frame elements in the Trouble Child Extras Font.

1. The way I created these elements, they can be used to make frames of any shape and size. The most difficult one to use is this frame with the circles, because you have to make sure the line spacing is such that the bottom line doesn’t invade the circle in the line above. So this is the one I am using for this demonstration.

2. To start with, select the Trouble Child Extras font. You can type the letters directly (and for this I included a handy PDF guide), or you can open the Glyphs panel and select them from there.

3. Start with the left-hand top corner of the frame, followed by the top horizontal bar, which you can repeat as many times as you want, followed by the right-hand top corner. Press enter and insert the left-aligned vertical bar. Add as many spaces as necessary. Each space is the same width as the aforementioned horizontal bar. Follow it with the right-aligned vertical bar. You can copy this line as many times as necessary to get the desired height for the frame. To finish, in a new line, add the left-hand bottom corner, the bottom horizontal lines, and finally the right-hand bottom corner.

4. Then we adjust the leading (or space between the lines) to make sure we get the smoothest line. And we’re done !

5. I’m just going to drag the design over to this collage to finish it, change the color of the font, and that’s it !

6. Hope this short tutorial was useful and hope you enjoy using all the extras in the font.