How to Dragon Con-ify your text

by | Feb 22, 2017 | Guides, Photoshop | 0 comments


Yesterday I published my Dragon Con 2017 plans, and a question I got a lot was “Yo Andy, how did you make your text the same as the Dragon Con logo?”, so I thought I’d publish a quick guide if you wanted to do it yourself. If not, this blog probably isn’t for you.

I’m assuming you have Photoshop at this point. If you don’t, you’re not going to get far.

First up, you need the font. It’s called The Story So Far and fortunately FontsGeek have it for free so download and install that.

Next you need the scale pattern. I found one that was super close to what they used and have already done the colouration etc for you (you’re welcome), so just right click on this link and “Save Link As…” in order to get it.

Now, open up the scale in Photoshop, select the whole document (Cmd + A), and go to Edit > Define Pattern.... Call it whatever you want, I don’t care. I called it “Scales Pattern” because I’m a total badass.

Ok, so now you’re set.

Type your text. Remember to use the right font. It’s called CCTheStorySoFar. If you don’t have it you’ve messed up already and should go back to the start and try again.


In this example I’m using 80pt font size. If you use a different size it’ll look different. That’s how sizes work. In fact, just do it at this size and then scale up or down afterwards; I can’t be arsed to retroactively explain how to scale styles.

Bring up the styles panel for your text.

Add a gradient overlay and set it up like this.

gradient_overlayThe colours you want are:
#FEFEFE @ 0%
#FDF9E8 @ 25%
#FEEE97 @ 50%
#F9D241 @ 100%

If it doesn’t look like this, you done gone goofed, son.


Next is the outline thing.

Add a stroke, and set it up like this:

strokeThe important bits are:

Size : 7px
Fill Type : Gradient
Style : Shape Burst
Gradient :
#B47253 @ 14%
#231E1F @ 21%


It should look like this now. Cool? Cool.

Last bit, then we’re done.

Drag a selection just big enough to cover your text. Don’t go mad on accuracy. It’s literally pointless.


Fill it with any colour. Beige, purple, rainbow. It’s your choice. I used white because I think it best represents the futility of life.


scales_patternOpen the layer styles, reduce the fill opacity to zero (I told you it didn’t matter), then add a Pattern Overlay using the pattern we saved earlier.

Reduce the size down to 32% though, as it’s too big right now because I couldn’t be bothered to make it smaller. You get what you get.

You have this now, right?


Select the outline of the text (click on the T on the text layer whilst holding Cmd) and then use this to apply a Layer Mask to your pattern layer. If you don’t know how to add Layer Masks, consult Google.


Final step. Grab the Gradient Tool, click the Layer Mask next to the pattern pattern and WHILST YOUR TEXT OUTLINE SELECTION IS STILL ON ELSE YOU’LL BORK IT, and drag up from like 75% from the bottom of the text to around 50% so that it fades out into the white.


Boom. Done. Cue copyright infringement claims left right and center.

Oh, you might want to grab a brush with colour #231E1F and fill in some of the smaller gaps between letters on a new layer, but that’s up to you.


Bear in mind if you change the text, you need to rerender and adjust the scales and any fills you might have done, but otherwise you’re golden.


Andy, out!


Andy Valentine

Andy Valentine



Submit a Comment

Your email address will not be published. Required fields are marked *