Tutorial: Creating a Water Drop Look in the Procreate App

Procreate tutorial: water drops!

Hello, all! I’m messing around again with trying to recreate Photoshop effects in Procreate. This time, I’m doing words created out of standing water!

In this tutorial, we’re going to get really familiar with the layer menu.

The excellent layer menu

Especially the option farthest to the right: Select Contents. Learning about this option is going to open up lots of new experiments for me. (We’re also going to get quite a bit of use out of the Clear option here.) And as always, we’re going to create new layers for pretty much every step of this process, and duplicate a lot of them. Keep backup layers of things!

OK! First up, we’re going to put in the background we want our water drops on:

1 - choose your background

It can be whatever you want: wood, bricks, concrete, stone … the world is your oyster. (Though I don’t recommend an oyster background.) I suggest you choose something with some distinctive texture to it (this wood is definitely well-textured) and something that isn’t too close to black or white — go for something between those extremes (since we’re going to use black and white as our only color sources in the finished product). I also advise that you choose a picture that’s really, really sharp — we’re going to use that to our advantage later.

(I’m sorry to say, I can’t remember where I got this particular slab of wood background; I’ve accumulated so many background images in freebie packs and collections. It came as part of a collection of 8 backgrounds, and the file name I have is “Wood v1.jpg”. Which isn’t really helping me find its source.)

2 - sketch it out

As always, I advise sketching things out on a new layer first. I took the regular “medium pencil” brush and made a modified version that has really strong pressure sensitivity.

3 - draw in your base layer

On a new layer, draw out your art or letters. (This is drawn using my “Fancy Finesse” brush, available for free.) I added in a bunch of standing drops all around. This layer won’t appear in the final version, so you can make it whatever color you like. I recommend something pleasant to look at that isn’t black or white — we’re going to start doing some black and white work over the top of this, so it’s good to be able to see this base layer clearly against them.

4 - duplicate white layer offset

Duplicate that layer, and recolor it white. We’re going to offset it ever so slightly toward the upper left.

Helpful Hint: After duplicating that white layer, tap the Transform button. (Upper-left part of your screen, rightmost icon — the arrow.) That will put a rectangular marquee box around your artwork. Now tap your pencil or finger once in the upper-left corner of that box, about a centimeter inside the corner. By just tapping, you move the box in measured increments! (You can also tap next to the sides to get your object to go up, down, left, or right; by tapping in the corner, we’re getting it to go up and left at the same time.)

In this example, I’ve tapped four times. I’m going to keep that number in mind, because I’m going to use it again.

NOW, the magic happens! Open your layers, select the layer with the blue text, tap it to pull up the layer menu, and choose that magical Select Contents option. What this is going to do is mask off only where the blue appears. You’ll see a set of gray diagonal lines appear all around the blue text.

While that selection is applied, you can now go to other layers and do other things, and whatever you do on that other layer will only appear within the boundaries of your selection.

5 - clear the unmasked portion

So now you can go to the white duplicate layer you’ve created, tap on it and get the layer menu to pop up, and tap on Clear. Because you had the blue text shape selected, and the white was offset from that, it’s going to clear out everything on your white layer that fell within the boundaries of the blue layer. What it leaves behind is this outline of your shapes!

Now you want to move this layer back down so it nestles inside the original text. All of our white highlights are going to be inside the letters, and our black shadows will all appear outside of the letters. So again, select this white layer, hit the Transform button, and tap four times in the lower-right corner to get the layer back where it started.

Do the exact same thing again, but this time make a white rim along the bottom right. So your steps are:

– Duplicate your base blue layer
– Recolor that layer to white
– Select your art with the Transform button (upper left, the arrow icon)
– Nudge the layer 4 steps toward the lower right (tapping four times, about 1 cm inside of the blue corner point)
– Go to the base blue layer, call up the layer menu, tap Select Contents
– Go to your new white layer, call up the layer menu, tap Clear
– Select the art again with the Transform button, nudge the layer back toward the upper left the same 4 taps

It seems like a lot of steps, but by the end of this, you’ll be lightning-fast at it.

6 - all of the highlight layers

Now we’re going to do the same thing with a layer of black, but we’re going to leave it where we made it. Because then it’ll be sitting outside the lettering as a shadow. So duplicate your blue layer, color it black, and nudge it 8 steps toward the lower-right. Use the same technique as above using Select Contents to mask that blue layer, then use Clear on the black layer to just leave the shadow part behind.

The image here shows three cleared layers: a white layer on the upper-left, a white layer on the lower-right, and a black layer on the lower-right. After I went through more steps, I decided to add another black layer on the upper-left, but a very thin one — only 2 taps. (I did it after looking at a picture of actual water droplets. Water refracts light in strange ways!)

Next up, my old friend and yours: Gaussian Blur!

7 - blurred white layers

So of course, you’re going to be applying blur to duplicated layers, right? Always save a backup layer.

Before you blur, go back to your blue layer and, once again, Select Contents. (Helpful hint: You don’t need the blue text’s layer to be visible in order to select its contents!) This way, when you apply the blur, you’ll still maintain that sharp outer edge.

This image above is the white layers, both with blur applied. As usual, I can’t tell you exactly how much blur you want — it’s going to depend on the size of your work. For this, I don’t think I went over 50% with either side. After blurring them, I made another duplicate layer of the upper-left, so the light was stronger and brighter from that direction.

8- blurred black layers

And here are the black layers with their blur applied. You can see that the black on the upper-left is much thinner and dimmer than the main shadow on the lower-right.

Now here’s the trick with blurring the black layers: you’re going to do the exact same Select Contents thing that we did with the white layers, but then we’re going to invert the selection so that the lettering itself is untouchable, and we’re only making changes to the area outside of the lettering.

inverting your selected contents

Here’s how you do it:

– Go to your blue base layer and click your old buddy, Select Contents
– Look to the upper-left part of your screen: the Selections button (the weirdly-shaped S) will be colored in blue
– Press and hold on that Selections button. The full Selections menu will appear at the bottom of the screen (see image above)
– Click on the Invert option (the weird sort-of-plus-shaped thingy just to the left of the X)
– Boom! Now the grayed-out diagonal lines are covering the text, not the area around the text!

Now you can apply a blur to your black layers, and none of that blur will creep over into the water-shapes. For the lower-right black, I recommend trying some motion blur instead of gaussian blur (but of course, use whatever looks best to your eye).

You could just leave it here and call it done, and I wouldn’t blame you. But we’re going to go one small step farther.

Duplicate your background layer — the wood, concrete, brick, whatevs. Now go to your blue base layer and Select Contents. Invert the selection (press the blue Selections button, then tap the plus-ish Invert icon). Now select your background layer, tap to get the layers menu, and tap on Clear.

9 - clipped copy of background

This gives you a copy of the text, with just the background pattern filling it! (This is also a HUGE help if you want to fill a layer of text with a pattern, like glitter or gold leaf or something, without having to use Overlay or the erasing-over-the-top technique.)

What we’re going to do is this: gently and slightly apply gaussian blur to the original background.

What? Yes, but just a little bit. Because drops of water kind of act as magnifying glasses, so we want the pattern inside the water to be just a wee bit sharper than the rest of the background. You don’t need much blur — 5 or 10 percent, just to take away the super-sharpness.

If you’re feeling really adventurous, you could move the text around before you clip out your pattern. Or flip the duplicated background layer upside-down. If you do that, you’ll get this kind of result:

10 - hot pattern-on-pattern action

You can just barely see the pattern-filled text layer on top of the background layer here. But it adds to the feel that the water drops are magnifying the background, since you can’t see the texture lines of the pattern continuing unimpeded behind the water.

So our final artwork consists of seven layers:

– Background fully-filled pattern layer (slightly blurred)
– Text layer filled with background pattern (original sharpness, or even slightly sharpened)
– Three white highlight layers: two to the upper-left, one to the lower-right
– Two black shadow layers: a tiny one to the upper-left, a big one to the lower-right.

final work with 7 visible layers

There it is! I hope you enjoyed this tutorial, and if you have any suggestions of other text effects you’d like to see me try, please leave a comment!

BTW: the font used in that very first image, way up at the top, is my “Gumption”. Available here!

Tutorial: Creating a Neon Look in the Procreate App

Tutorial: Neon Look in Procreate

Well hello, all! It’s been quite a while. The blog is taking a bit of a pivot, and I’ll hopefully be posting more frequently with more illustration, lettering, craft, and other artsy-fartsy things.

I’ve been playing around with an iOS app called “Procreate” lately (yes, I also think the name is vaguely unsettling). It’s fabulous for all sorts of art, and I’ve used it for both cartooning and lettering projects. I’ve been thinking about trying to re-create some of the text effects I can get in Photoshop, and this is the first. Today I’m going to show you how to make text that looks like a neon sign.

1 - make a grid, sketch it out

First off, I always sketch first, no matter what I’m doing. Often, I’ll do several layers of sketches — draw one out, reduce the opacity of that layer, throw a new layer on top, and refine. Since this is for a tutorial, I stuck with one sketch.

Because neon signs don’t usually overlap tubes, I interrupted the lines where they would cross over. (Tubes do have bends in them, though — we’ll address that in a few steps.)

2 - start with a fat monospaced line

Fire up a new layer, and draw out your neon tubes in the color of your choice. I use a monospace brush for this; the Rad & Happy Monospace brush was one of the first non-OEM brushes I downloaded, and I still use it regularly.

3 - think white line

Now, create a new layer and reduce the size of your brush. Zoom way in, and draw a thinner white line down the middle of your larger color line. (You’re going to be applying some blur to this line, so it doesn’t have to be perfect.) Size-wise, I’d say to do a little larger than 1/3 of the width of the larger color line.

4 - attend to the creases

Duplicate that layer, and turn off the visibility on the original. This is going to be a running theme — I’m all about duplicating layers, so that you always have a backup of the original available. Now, do some erasing of the white line where the “tube” creases, so it looks like the tube is on top for one side of the crease, then bends back below on the other side. It’s totally up to you which side of the crease is the “top” and which is the “bottom”.

5 - shadows in the creases

On another new layer (we’re going to end up with a lot of layers here, friends) put in some shadows where the creases cross over. I looked at my own elbows to figure out how the shadows should look, because they’re kind of elbow-ish. Draw these in black; we’re going to monkey with them in a moment to make them more shadow-y. (Helpful hint: draw them all in, then reduce the opacity of that layer to 50% so you can see the tubes behind them, then clean ’em up.)

6 - opacity of the creases

Now we’re going to adjust those black creases so they look more natural. What I did here was create a duplicate layer, then I left one layer in “normal” mode and reduced the opacity to 30%, and on the second layer, I changed it to “soft light” mode and reduced the opacity to 60%. These numbers may need to be adjusted for your piece, depending on the color you’re using for your neon base.

7 - first white blur layer

Now it’s time to get this sucker glowing!

Make a duplicate of your thinner white text layer. Apply a gaussian blur to it. How much blur? That’s going to depend on the width of your lines, so I can’t give you a hard and firm percentage. Move the slider on this one down until you feel like there’s a wash of white almost entirely covering the color layer underneath.

8 - white blur the second

Duplicate your original white text again, and apply a gaussian blur to this one as well — but not as strong as the first. You want this one to add that really solid glow down the middle of the tubes. As a rough estimate, I’d try half the amount of blur you did on the previous white layer. So if you did 50% on the first, drop it down to 25% for the second.

That’s it for the glowing on the top of the neon tubes! Now let’s move to the glow underneath.

9 - first, a black blur

Duplicate your solid pink (or whatever color you’ve chosen) layer, and move it underneath the original. Recolor the text on that layer to black, and apply a gaussian blur just enough so that you see some fuzzy black peeking around the outside of the solid color. This is going to add just a hint of shadow, and it’ll help delineate the “tube” from its glow reflecting off the wall.

10 - first level of pink blur

Duplicate the solid pink layer again, move it below the black layer you just did, and apply (You guessed it!) some gaussian blur. Again, the amount of blur is going to depend on the size of your lines and the size of your piece. A good starting point is whatever level of blur you applied to your very first white line.

11 - second level of pink blur

If that isn’t enough glow for you, just duplicate that blurred pink layer. Boom, more pink glow!

12 - add the nubs!

Add another layer below all of your neon tubes and blurry glow. On this one, you’re just going to make some black circles at the ends of the neon tubes, to represent the points where the tubes attach to their hardware on the wall. These will be mostly hidden behind the tubes, but the piece will look kind of wonky and incomplete without them.

13 - add background of your choice

And now, add the background of your choice! I’ve accumulated quite a few images of walls, from various freebies and image packs. I’ve tried this neon look on brick, stucco, and wood, and it works on all of them. This particular background is a little light, so I’ve changed the very bottom background layer to black, and reduced the opacity of my wall to 80%. Makes it a little darker, but keeps all of the details.

So there you have it, a neon sign look done entirely within the Procreate app. If you don’t have Procreate, you can always do this same thing in Photoshop or GIMP — all of the same tools (layers, gaussian blur, etc.) are available in those programs too.

Now, to think about what Photoshop text effect I want to replicate next!

Fun with lettering: paint marker brush pen comparison

I’ve been working on my hand-lettering lately; I’ve always been able to do several types of regular handwriting, but now I’m getting fancier, so I can fold that skill into my graphic design portfolio. (Did you know that there’s a whole handlettering / calligraphy community out there? Tons of great stuff to check out. The Instagram hashtag “#handlettering” alone has almost two million entries.)

I’ve acquired a few brushes and pens, most of them on the cheaper side, to see what I like. In my quest to find something that will make really fat lines, I’ve found several different kinds of “paint marker brush pens.”

Target Paintbrush Markers

First up are the house brand (up&up) paintbrush markers I found at Target. These little guys were around four dollars for six colors (no black included). And I have to say, I really like the line you get from them!

Target Paintbrush Marker Test

Nice and thick and heavy on the downstroke, yet the ink/paint doesn’t bleed through the cheapo cardstock I use. The thin upstrokes are a little sketchy, but that may be just because I wasn’t really warmed up when I wrote out these tests.

Next:

Crayola Paint Brush Pens

The Crayola Paint Brush Pens are obviously the product that Target is copying. Though you get only five colors with Crayola instead of the six Target gives you, and the Crayola pens are more expensive — about six bucks for the package. (Though in the grand scheme of things, a dollar and a quarter for a quality brush pen is a bargain.)

Crayola Paint Brush Pens Test

The feel of them is almost indistinguishable from the Target markers. A nice, thick downstroke, and you can get a pretty nice thin upstroke. The Crayola markers seem wetter and heavier than the Target set (although they still don’t bleed through the cardstock). My concern is that means they’ll dry out faster. Time will tell. I also worry about premature drying because the cap has holes along the base, so that the cap isn’t airtight. (The Target markers have a fully-enclosed cap.)

The Crayola pens also come in a 40-count box, which contains five sets of eight colors — finally, black is included. But I haven’t fallen in love hard enough yet to stock up that heavily.

Last:

ArtStyle Brush Pens

Last up are the Art+Style Brush Pens. These are the most expensive of the lot, at $15 for a package of 10 pens. (Still, a buck and a half each. Relatively cheapo.) And as opposed to the other two, these actually have a synthetic-fiber bristle brush at the end, not a flexible felt tip. And hey, black!

Art+Style Brush Pens Test

These are certainly a more difficult level of pen than the other two, due to the brush tip. With the felt tips, it’s much easier to make a consistent wide line. Brushes are a lot less forgiving. These brushes also needed a few test strokes to get primed; they’re pretty streaky right out of the gate. (I worry about drying with these too, since they also have holes in the caps.) I’ll have to work with these more to see how I really feel about them; I’ve been doing most of my work with felt-tip pens so far, so it’ll take some adjustment to find my comfort with these bristle-brush tips.

Four pen samples

Here they all are side-by-side. You can see that the Crayola is darker and richer than the Target, and the Art+Style has the inconsistency of a brush (which can be an asset if you know how to work it). The last one in the row is a Tombow Dual Brush pen; they’re one of the more popular options for handlettering. But as you can see, the line doesn’t get anywhere near as thick as these new pens (though it does look much more smooth). The Tombow would be better than any of these new markers for smaller-scale work, or tighter spaces.

I’ve been working on more fonts using my handlettering — as always, they’re up on my Behance page if you want to check them out. 🙂

New art toys: watercolor gel crayons

I’ve been upping my art lately, now that I have a permanent home where I can unpack all of my supplies, and a nice big desk with good lighting to work at.

The other day at Target, I spotted a product that baffled me, so I had to check it out:

watercolor gel crayons

Watercolor gel crayons? What the heck are those? The instructions on the box make it seem simple enough, and they were less than four dollars, so why not give ’em a shot?

The tips are rounded and kind of waxy-ish looking, and you can push more out by twisting the base.

watercolor crayons close-up

So, what to color? I decided to just do a version of a recent Holiday Doodle, wherein a beaver had a beer. I just thought the beaver was cute. So I roughly drew him out in pencil on plain old copy paper (my instinct there was to write “typing paper,” which is a hallmark of my age). Then I used my light box to draw him in fine point Sharpie on watercolor paper.

(My light box is this one, and it’s fantastic. Super thin, flat all the way across, and a nice, bright light. I highly recommend.)

sketch and Sharpie copy

I waited a couple of minutes to make sure the Sharpie was dry (it’s waterproof when it’s dry, which makes it perfect if you want to draw something and then color it in with watercolors). Then I used the brown crayon and drew in the areas where I’d want the color to be the darkest.

watercolor crayon rough use

It certainly goes on like a crayon, especially on the rough surface of watercolor paper.

I used a water brush (love the heck out of these things too — no more cup full of dingy water) and wet the crayon, brushing it around. It stayed darker in the areas I scribbled, and I was able to fade the color away pretty easily.

watercolor crayons in action

I did find that you never really get rid of the original crayon-ish marks, no matter how much you scrub at them with your wet brush. But if you’re okay with that look, then these are a really quick and easy way to get painting with watercolors without all of the setup. A filled water brush, a folded paper towel, and these crayons, and you’re good to go.

watercolor crayon test painting

Next time, I think I’ll try coloring on another piece of paper, then rubbing my wet brush in it to pick up the color. That should avoid the crayon-looking marks, although I worry that the color wouldn’t be as vibrant.

More fonts, now available at FontBundles!

As previously noted, I’ve been making more fonts. Here are a couple of fresh ones!

I have a portfolio of all of these fonts over at Behance, but they’re also being picked up by a few sites that specialize in providing fonts, or graphic design elements, or both. One of my favorites is FontBundles.net — they have great bundles of really nice fonts to buy, and enough great individual fonts that a fontaholic could go broke, but they also do a free premium font every week! They’re carrying my most recent five fonts as freebies — the hero images of both fonts below are linked to those fonts over at FontBundles.

They also run a really good Facebook community, where I get to do one of my favorite things in the world: be a little helper. People frequently post pictures of things (sometimes really weird things), and ask what font is being used. I get to channel my inner Sherlock, which is a load of fun.

Hot Deals - grocery-style font

This one was inspired by a trip to Trader Joe’s. I was marveling at all of the hand-made price signs under every product (and did you know that each Trader Joe’s location has at least one. and frequently more than one, full-time sign artist?

For Hot Deals, I used an area I hadn’t before: the Private Use Area. Which sounds kind of spooky or intimidating, but it’s really just a set of characters in a font that aren’t specifically mapped to letters or numbers or punctuation or anything. The Private Use Area is just a bunch of empty boxes, waiting for you to fill it with whatever weird new letters or icons or words you want to put in there.

Hot Deals - PUA glyphs detail

These are the extra items in the PUA section of Hot Deals, shown below the capital letters. Handy little doodads, so you don’t have to go to the trouble to create your own!

In my most recent font, Ludicrous, I used the PUA for another kind of extra: ligatures.

Ludicrous - handwriting font

Ligatures are when two letters connect to each other. In a lot of regular fonts, the lowercase F and I will be a standard ligature, because the droopy front part of the F encroaches on the space where the dot over the I lives. So they’ll be combined into one character, and it looks a lot cleaner. There’s a little bit of code embedded in the font that tells the program you’re using: “If letter X is immediately followed by letter Y, replace them both with character XY.”

Ludicrous didn’t have a problem with “fi,” because the terminal on the lowercase F doesn’t go down very far, so it doesn’t get all up in the lowercase I’s face. But one thing that can drive me nuts about a font, especially one that’s supposed to look breezily handwritten, is when you have two of the same letter next to each other. They look identical, which spoils the feeling that it’s been written by hand! So I created most of the common double-letter combinations as ligatures:

Ludicrous - ligatures and extra glyphs

That way, any double-lettered word you type will have those double letters automatically replaced with the new ligature characters, and the handwritten feel will live on! Also, as you can see, I also did a few non-letter characters and put them in the PUA. Because sometimes you want a little heart or star or swash in what you’re doing, and it’d be really handy to have ones made by the same hand, with the same brush.

Here are those double-letter ligatures in actual words:

Ludicrous - double letter ligatures

(And yes, I firmly believe that ass pizza errors would make a wookiee giggle.)

If you like them, go get them! These fonts (and all of my other fonts) are free for personal and commercial use, so you can put them on whatever you like. And if you have a suggestion for a text style you’d love to see in a font, let me know!

Creating my first connecting script font

It’s been a while since I’ve posted here! (Although, of course, I post every day over at Holiday Doodles.) I’ve been busy with graphic design school, and work, and not only did we move across the country back in September, but we also then bought a house and moved again in January. So it’s been a busy first quarter of 2016!

As a birthday present to myself, I got some font creation software. There are programs out there that cost upwards of $500, and are apparently the gold standard for font creation. I, however, didn’t want to spend more than a hundred bucks — I wanted to dip my toe in first.

I test-drove three programs: FontForge (free, open source), TypeTool ($47.99 USD), and Type 3.2 ($55 USD). I created a font called Trawll with the free FontForge program, but its pen tool wasn’t intuitive, I couldn’t easily import letters in from another program, and it just wasn’t bonehead-simple enough for me. I tried the demo of TypeTool, but it would only let me open it once; after I closed it, it’d crash when I tried to open it a second time. I had to reboot my computer each time I wanted to use it, which was a total no-go. Shame, because it has a feature where you can copy something in Adobe Illustrator, then paste it directly into TypeTool. (Though its pen tool wasn’t great for me.)

I ended up purchasing Type 3.2 after trying out the demo. Its pen tool is the most intuitive of all of the programs I tried, and it has an image import feature. It lacks the same stroke-drawing capabilities as the other two, but I’m OK with that — I like to draw things in Illustrator. As long as it’s easy to port things over, it works for me.

So after creating an unconnected handwriting font called Cavorting, I decided to try my first connecting script font. The connections are what makes it a challenge — each letter has to be able to fit seamlessly with the next. (Spoiler alert: I haven’t achieved perfect seamlessness, because that would take a LONG time.)

I started by drawing my letters in Illustrator. I’ll use the lowercase E as my example through a lot of this:

Script font - lowercase E strokes

I used two weights of calligraphy brush: a wider, flatter one with an angle, and a thinner one that was almost completely round. I could combine strokes to get a nice effect. You can see on the right, where the strokes are broken apart, how the E is made up of one wider stroke on the left, then finished off with two strokes from the thinner brush. And yes, it’s a little lumpy in spots where the strokes meet. No worries, we’ll take care of that soon.

Script font - full page of lowers

I drew all of the letters at the same time and saved them all in the same large image. This made importing them into Type easier, and it also made it easier to keep things the same size. I grouped the taller letters together so I could compare their scale to each other; likewise the shorter ones.

If you look close, you can see some re-used parts among some of these letters. The spine of the B is re-used in the H and the I. The spine of the D is the same as the spine of the K. And almost all of the spines in the lowercase set were stolen from the uppercase letters, which I drew first.

Script font - my Illustrator file

After completing each set and saving them, I moved the letters outside of my work area. I didn’t delete anything, because you never know when you’ll want to compare heights with a previous character, or steal a pen-stroke. This was my work area in Illustrator after completing everything.

Next up: importing into Type:

Script font - importing into Type

The import tool in Type is pretty cool; you can do all of your letters on one sheet, then just select the part you want to trace. Here I’ve selected the lowercase E, and I’ve told the program that this should be at lowercase height. (All of the uppercase letters were traced at uppercase height, as were the taller lowercase letters like b, p, q, g, and y.)

There are sliders to choose how many points on the curves it traces. The fewer points you choose, the more blobby and weird your letter looks. I opted to trace at a higher number of points, then do some editing:

Script font - refining points

Here you can see the lowercase E as it came in (left), and the final version (right). Lots of points got deleted, lots of points got moved, and things were tweaked so I was able to get the same curvature with many fewer points. This makes for smoother curves, and quicker loading and drawing of the letter when you’re using the font. (I probably could have deleted a couple more points here, but this was just a test font. I tried to strike a balance between good and fast.)

This is also where I smoothed out all of those lumps where the wider strokes met the thinner strokes.

Because this font is meant to have letters that connect with each other, I also had to adjust the end stroke of each so that they all ended in the same place. You can see at the end of the final E, there’s a green line and an orange line that intersect. The green line at the end of each letter will line up with the pink line on the left side of the next letter, so both sides need to be set in such a way that they’ll meet up.

After all of the letters, numbers, and punctuation are imported and refined, it’s time for everyone’s favorite pastime: kerning. For those who don’t know, kerning is the adjustment of space between letters so that they look natural next to each other. In most font creation programs, you input kerning pairs: two letters at a time that might need a little nudge this way or that in order to look right.

Script font - kerning pairs

Kerning is especially intricate in a connected script font, because you need to make sure the letters are connecting correctly. A lot of the work was already done by lining up those pink and green lines (like on the image with the outlines of the lowercase E). But that’ll never be perfect: you have to take those pairs one at a time and do some scootching. My hardest time was getting every single lowercase letter to line up with the lowercase R. Some of them, like this “FR” combo, came out pretty darned well. A few connections aren’t perfect, but (insert balance of good and fast comment here).

Then it’s time to test sentences:

Script font - test pangrams

I start out with pangrams, which are sentences that contain all 26 letters of the English alphabet. A non-surprising number of them mention wizards, quickness, and guys named Jack. (And pangrams are a great source of band names. Who wouldn’t want to go to a concert hall to hear Turgid Saxophones play?)

After enough testing to make sure it looks all right (but not so much testing that it drives me nuts), I come up with a name. (Mostly this consists of figuring out what feeling the font gives me, hitting the thesaurus, and Googling to see if anyone else has used the words I like as font names.) Then I release my fonts out into the world for free. Because I love getting free fonts, so I figure other designers and artists love it too. I also get to create a cover image for the font:

Sprightly font cover image

I do have a few fonts here on this site, but I’m putting the newer stuff in a couple of other places. You can download this font over at:
My new portfolio website, missymeyer.com
My portfolio at Behance

Trouble Meyer, 1998-2015

Trouble

Last week, we had to have our wonderful, cranky, crotchety 17-year-old cat, Trouble, put to sleep.

We got Trouble way back in 1998 at Seattle Animal Control. We wanted to get a companion for Commie, and as always, decided to let the cat choose us. Or choose me, as it turned out — we passed by Trouble’s cage (marked with the temporary shelter name “The Little Ninja”), and she reached through the bars and grabbed at me. From that moment on, she was very much my cat. She didn’t mind Scott all that much if I wasn’t around, but for the most part, if I was in the room, I was definitely the most important monkey around.

Trouble was skittish around other people, but loved to cuddle with me. She was fairly quiet for a lot of years, then really came into her tortoiseshell voice — creaky meows that we referred to as murbling, bitching, nagging, and various other terms meant with love.

Since Commie passed two years ago, Trouble’s health had been up and down — thyroid issues, mystery wheezing and noxious bad breath (chest X-rays were clear, the vet was mystified, so we went with antibiotics and crossed our fingers; she responded to the treatment, but we still don’t know what was really wrong with her). Even up to 2 weeks before our cross-country move, we weren’t sure if we’d be moving with one cat or two. We had more than one time in the last year when we prepared to lose her.

She made it across the country, and took right away to the new apartment (the ground-floor windows with a view of people walking their dogs has proven popular). But then she took a turn for the worse a few days after we arrived. She stopped eating, stopped socializing, stopped grooming, and seemed absolutely miserable; she found an empty bookshelf and stayed there, with only an occasional shaky walk out to visit the litter box (where things were left uncovered, and weren’t pleasant). We rushed her to a vet down here; she’d lost over a pound in just over three weeks. We all agreed that while we could run more tests, and try new medications in an attempt to pinpoint what was making her shut down, trying to extend her life a few more weeks or months . . . she was pretty clearly telling us that she was done.

I doubt I’ll ever have another cat who loves me as much as that little cat did. I think she would have crawled inside of me if she could, sometimes. Of course, we’ll get Cheddar another companion; hopefully someone closer to her own age. Probably not another tortie, though — we already had the best one there was.

Trouble foot

Nothing Pink Can Stay

I’m loving the exotic hair color, but what I’m not loving is how fast it fades. Three weeks in, and the bright pink made it to a salmon-ish color, thanks to the pink fading and revealing the orange undertones of my bleached hair. I used the second half of the tube of magenta and left it on for a good two hours, so I’m freshly fluorescent again. I’m thinking once this pink fades, I’ll make my way to purple, then from there to blue. I figure as my dark roots grow out, I’ll want a darker color on top so it isn’t that drastic of a difference.

Before and after:

Faded salmon, then bright pink again.

Faded salmon, then bright pink again.

This should get me through to Arizona; then I’ll go purple after we move.

Speaking of the move, we’re packing and cleaning a little bit every day. Sometimes, we have helpers.

Cats. In Boxes. Surprising!

Cats. In Boxes. Surprising!

We have everything booked, from cat airfares (they’ll ride in the cabin, under the seats in front of us, as our carry-ons) to the moving cube for our stuff, to moving dudes on both ends. I feel as ready as I’ll ever be, I guess.

We’ve culled a lot of stuff out — a lot of clothes and kitchen stuff went to Goodwill, and we donated lots of books to the library. I still kept tons, of course. Here’s a peek at the paperbacks I’ve kept. You can tell some of them are older and crustier than others.

Beat-up paperback books.

Beat-up paperback books.

Some of them, the pages aren’t even stuck to the spine anymore. And yet I can’t get rid of them! Though they are a challenge to read.

We had a credit left at a place up in Winter Park called The Wine Room — they have hundreds of wines in the Enomatic wine dispenser machines. So we cruised up there and had ourselves a few tastes, and found a couple of new wines we really liked.

Enomatic wine machines.

Enomatic wine machines.

Although some of the descriptions didn’t sound all that appetizing:

Wine flavored with asphalt?

Wine flavored with asphalt?

Somehow, “crushed rock, loamy earth, and asphalt” aren’t the flavors I’m usually looking for in a wine. We decided to pass on sampling this one. I like my wines mild, and a little sweet. Found a couple of Rieslings to get a full bottle of, once we’ve moved. (There are a lot of things that are being put on hold right now, and added to the “once we’ve moved” list. The less stuff I have to pack and have transported, the better.)

We cruised out to IKEA locally here, to decide which bed frame we want to get once we land in Arizona. It’s pretty much going to be [1] get the apartment keys; [2] set up the cats in a closed-off area with litter box, food, and water; and [3] go to IKEA to get a bed. We’re getting the Sultan Hanestad mattress, which is the newer version of our old Sultan Huglo which I love.

While we were there, I saw these light fixtures. Does anyone out there like them? They look kind of like wadded up tissues to me.

IKEA crumpled tissues lights.

IKEA crumpled tissues lights.

Eh, maybe if you had the right other decor in your house. Though I can’t imagine what that decor would be.

Last but not least, I finally found a place that serves gluten-free fish and chips. And it was right in my backyard the entire time! A place called Cookes of Dublin, in Downtown Disney, makes all of their fried stuff (fish, shrimp, onion rings, even mozzarella sticks) fresh to order, so you can get it in the gluten-free batter and fried up in a separate dedicated gluten-free fryer.

Gluten-free fish and chips.

Gluten-free fish and chips.

I haven’t had fish and chips in years. And it was great!! Plus, they mix a little bit of chopped parsley in with the gluten-free batter, so you always know for sure that you got the right stuff. We’ll probably have to stop by one more time before we leave the area, because who knows when we’ll find GF fried fish again?

So, that’s where we’re at. Busting ass and stressing out, but soon we’ll be rid of Florida for good, and launched on a new and exciting adventure!

The day after Disney, I dyed my hair pink.

I’ve been looking forward to this for months. I have only colored my hair a couple of times since starting with the mouse over eight years ago, and even then it had to be a natural-looking color. I missed the crazy shades! I mostly used to do reds and oranges, or just bleached blonde, and thought about those colors this time around. But I finally decided that I’d do a color I’ve never done before: pink.

To start with, here’s a before picture:

before - dark hair

With extra bonus helper sink cat!

On the 10-scale of hair color, black is a 1 and lightest blonde is a 10 (there’s a color chart later in this post). My natural color falls right around a 2, even though it looks mostly black in this picture. (I took most pictures in the spare bathroom, because it has a nice plain white door right behind the mirror. The lighting in there isn’t 100% awesome, but I adjusted as well as I could.)

I washed my hair the night before, so it was free of products but also had some time to build up a little bit of scalp grease. Ew, that sounds gross. But seriously, don’t color freshly-washed hair; you need a little oil on your head to protect your tender head skin from the chemicals.

Behold, my supplies:

pink hair coloring supplies

I browsed the Sally Beauty Supply aisles thoroughly, torn between the Manic Panic and other brands. I ended up going with Ion, a brand I’ve used before (though for more “normal” colors) and liked. All of the unnatural colors are “semi-permanent,” so it’ll be interesting to see how long the color sticks around before I need to freshen it up.

With hair as dark as mine, it needs to be lightened significantly before it can take any really good color. So it was a two-step process: bleach, then color the lighter hair. I got a blue-based lightener, because my hair tends to go really orange and brassy when it gets lighter, and the blue is supposed to counteract that.

And yes, it’s really, actually blue.

blue bleach

Mix the blue powder with cream developer (I went with a 20-volume, recommended by the lightener packaging for when you’re working right at the roots) until it’s the consistency of pancake batter, then brush it on all over. I had Scott assist briefly, to make sure I got the small hairs on the back of my neck, and didn’t have any big drips or smudges on my skin.

The lightener packet recommended 30-50 minutes, depending on how light you want to go, and how tortured/thick/stubborn your hair already is. My hair was virgin and uncolored, so I was comfortable going with 50 minutes to get it as light as possible. The goal was to take me from a level 2 up to a level 7/8.

hair color chart

According to the packaging of the pink color I chose, I didn’t need to shoot for a level 10 to get good results; it recommended a 7.

So, after 50 minutes, I rinsed out the bleach and ended up with the following:

middle phase: bleached hair

Yeah, it’s still a little on the orange side, but not much. There’s only so much that the blue goo can do. If I’d gone for a non-colored lightener, it would have been WAY orangier, believe me. Been there, done that. Spell check is telling me that “orangier” isn’t a word, but I’m rolling with it.

Also, if you compare to the chart, it’s definitely lighter than a 7. I’m lucky, in that my hair is pretty dark, but it always bleaches out really well. Maybe it’s because I was blonde as a child, who knows?

Every time I bleach my hair, I’m tempted to stop there. It’s a kind of cool color. I could get a toner and use it, which would take out more of the gold tones and put it more toward platinum. Hmm, maybe in the future. For now, it was project pink all the way.

I let my bleached hair dry thoroughly before putting on the magenta dye. Some recommend waiting a couple of days between bleaching and coloring, while others insist it should be done right away, while the hair follicle is wide open. I figure, if they do it right away in the salon, and I’m using salon-quality supplies, I’d be just fine coloring immediately.

On with the pink sludge!

all pink sludged up

The instructions that came with the color said to leave it on for 20-40 minutes. However, a lot of the young people with their YouTube how-to videos appear to leave their color on for 2 or more hours. Since the color is just pure color (as opposed to store-bought boxes of hair color, where you mix a developer in with the color), you could leave it on overnight if you wanted to, and you’d be perfectly OK (well, you’d have a hell of a messy pillowcase to clean, but other than that, OK).

I rinsed after 40 minutes. And yeah, when I refresh the color, I’ll definitely leave it in for longer, because it’s way lighter than I expected it to be — more of a candy pink than a deep magenta.

I took some shots in the spare bathroom, but the color was hard to get right. Here’s the best representation, in natural light by a window:

the final pink hair

And even though it isn’t the color I thought it would be, I really dig it! It’s definitely not Disney-appropriate, which is a great reminder every time I look in the mirror that I don’t have to go in to work next week.

A couple of notes:

If you’re going to put a crazy color on your hair, rub some petroleum jelly on your skin along the hairline first. Because these colors stain like crazy! Here you can really see along my hairline where my skin had Vaseline on it, and where it ended and the color got on my scalp:

color stains the scalp meat!

(You can also see that my accuracy along the hairline was not all that great. There are also spots on top of my head where I missed the roots by a quarter-inch, and some areas that barely got the pink dye. These are all because of doing it with my own two hands, and not being able to see parts of my head directly. It’s hard when you’re using a hand-held mirror to look at the reflection of the back of your own head in the bathroom mirror, y’know?)

Anyhoo, the scalp line is no biggie, since I wear my hair over my forehead, and the stains will wash away after the first couple of shampooings. (I even got a color-protective shampoo, to replace the bar soap I usually wash my hair with. Yes, I wash my hair with bar soap. My hair is baby-fine, and just lays there limply in the Florida humidity unless I torture it a little bit.)

These color dyes are really thick. You can thin them out with some hair conditioner, but whatever you do, DO NOT thin them out with the developer solution you used with the lightener. Bad mojo there. You can also thin out the dye with a lot of conditioner, to get more of a pastel look.

Use non-metal bowls. I like to go with glass — easy to see that you’ve mixed everything up from the bottom, easy to clean, and non-reactive with the chemicals you’re using. And don’t wear anything too precious, because you WILL get bleach on it.

I plan on accompanying this color with an undercut, which I’ll probably do today or tomorrow. Not sure if I’ll end up with 1/4 inch or 1/2 inch on the sides — I’ll start out with the longer and see how I feel, then go shorter if the mood strikes. I kind of can’t wait for the roots to start growing out — nearly-black on the sides and pink on top will probably look really cool.

When refreshing the color, I may try Manic Panic or Special Effects or one of the other big brands, to see if I like them better. Anyone out there have a favorite brand?

Tiny lenses … for my phone

(Title sung to the tune of “Tiny Bubbles,” which is totally stuck in my head right now.)

So while reading an article on BoingBoing the the other day, I experienced that thing where you go from not knowing an item exists to wanting it desperately, all in a span of 30 seconds. The item in question: a set of tiny clip-on lenses for your cell phone.

Tiny lens clipped onto my phone

Immediately, I dashed over to Amazon. The author of the BoingBoing piece had ordered his set for about three bucks, but they took a month to arrive from China. Since we’re moving in a little over a month, and I felt the need for immediate gratification, I spent twice as much and bought a six dollar set with Prime shipping.

(Here is the set I bought; looks like they aren’t available on Prime anymore. But if you search for “clip on cell phone lenses,” there are a gajillion choices available, some Prime.)

Tiny cell phone clip-on lens set

The set comes with three lens options: fish eye, macro, and wide angle. And it’s a little confusing at first, because in order to use the wide angle feature, you have to have the macro and wide angle lenses attached to each other. Somehow they work together to create magic. Many reviews on many different options on Amazon have complaints that people only received two lenses, but they didn’t realize that two of the three arrive attached as a unit.

They even include little lens caps (although the back side is still open to the elements) and a carrying bag (which I had to re-sew along the bottom, as the stitching wasn’t that great).

So, onward to testing! Above, you can see the fish eye lens attached to my phone. Apparently, you can put these on over a case, but I put them straight onto my phone (yes, my phone itself is that strange orange color). The hardest part is getting them centered over your camera’s lens, but you can put just the clip part on by itself, center it, then screw on the tiny lens you want to use.

Macro shot of fish-eye lens

First, let’s talk about the macro lens. At first, I thought it wasn’t working right, but I figured out that you have to get REALLY close to things. If it’s blurry, you’re still too far away. You gotta get right up in your subject’s grill.

Closer.

CLOSER.

macro lens: shift key

THIS CLOSE.

Seriously, you gotta get close. It’s almost like a tiny microscope that clips onto your phone. I took a picture of the wrinkly old-lady skin on the back of my hand, but I’ll save you all from that. I don’t even want to see it, so I can’t imagine you’d want to.

Here’s where I move on to the wide-angle lens, and tell you that I don’t really have any good shots with it.

Cheddar in the wide-angle lens

Of course, this is a good shot, because it’s of a sweet baby kitty. But generally speaking, it doesn’t seem like using the wide angle lens is all that different from taking regular pictures. Maybe my phone already takes pretty wide angles? At any rate, it doesn’t seem to give me much extra space along the sides, but it does warp the image a bit, giving it a rounded look, as you can see from the pattern of our living room rug.

I’ll experiment more with it — maybe there’s something I’m missing here.

Anyhoo, onward to the fish eye lens! A negative Amazon review of this one cracked me up — someone complained that it left “a black rectangle around the outside.” Because, I guess, they expected their image files to come out round.

Trouble in the fish eye

A couple of issues with the fish eye lens: the blue color of the lenses I chose, and difficulty focusing.

I found that in most of my fish-eye pictures, especially ones in bright light, there was a ring of blue around the outside, since that’s the color I bought the lenses in. So if you want an all-black ring around your pictures, I’d advise getting a set of these in black. I didn’t even think about the possibility that they’d capture a wee bit of the edge of the lens.

Not the best focus job in the world.

The second part is the focus. Sometimes I was able to get things to focus really well, and other times, no matter what I tried, things came out kind of blurry. I’m not sure if this is a case of unsteady hands, or a smudge on the lens (the little bag they came with doubles as a cleaning cloth, which is handy, but I felt like I was constantly having to wipe these lenses for smudges and fingerprints while we were outside).

Other shots, though, came out relatively crisp and sharp:

Our beloved Tower, for the last time before we move.

Or, at least, sharp in the center of the picture. I expect things to get a little blurry around the outside, due to the warped nature of the whole thing. But it was hard most of the time to get things in sharp focus in the very middle of the shot.

The fish eye will definitely merit a lot more experimenting, with close-up and distance stuff, as well as low light versus bright light. I don’t think the blurriness problem is necessarily an issue with the lens itself, since I did get a couple of shots that were on the sharper side — I think it’s a matter of learning how to use it correctly.

So, overall: fun and cheap! The macro is the best of the bunch so far. They also make other lenses, like a hilarious tiny telephoto lens. And you can find an option where you stick a magnetic ring around your phone’s camera, then just attach the lenses via magnet, instead of with a clip.

Cheddar in the wide angle