Saturday, April 4, 2015

How to Make a Watercolor Blog Header from Start to Finish

Watercolor is hugely popular with the resurgence of handmade styles in graphic and web design. Beautiful watercolor layering and varying paint application techniques will give you a unique design each time. Each watercolor swath is like a snowflake, and is a perfect candidate for a blog header.

In this tutorial, I'll walk you through how to make a personalized watercolor blog header from start to finish. This particular tutorial features hand lettering too, but feel free to mix and match the sections of the tutorial so you're working with mediums and styles you're comfortable with.

Learn how to make your own pretty blog watercolor header from start to finish - Includes downloadable freebies!

If you want to stay away from watercolor altogether, I've created a FREE resource of 9 watercolor strokes that you can download (see Step 4).


Step 1: Gather Your Materials Needed

To follow along from start to finish, here are the supplies you'll need:

Step 2: Grab the Rough Dimensions of Your Blog Header

This step is important if you want to have an isolated watercolor streak that doesn't get cut off by the page boundaries. I'm not saying you need to measure out exact pixels or measurements of anything, but I'm just advising that you keep the overall ratio in mind for when you're creating your watercolor portion. If you don't mind it getting cut off at the top like my blog header is, then you can skip this step.

Let's say your blog header area is approximately 1000px by 300px (you can grab the dimensions by taking a screenshot and measuring in Photoshop, or by using a web browser extension like Measure It). This 10:3 aspect ratio is much different than an area that is 1:1 or 4:3, for example.

For this tutorial I'll try to make sure my watercolor fits in the 1000px by 400px (or 5:2im aspect ratio) range.

Step 3: Grab Your Watercolor Supplies and Paint

If you're unfamiliar with watercolor, I highly recommend Yao Cheng's class ( I was terrified of watercolor until I took the class, and now I feel the urge to incorporate it into my art often! Learning color mixing, blending, and fun techniques like dragging color and dripping color will get you really awesome end-results.

For example, I learned how to get a better grasp on gradients of color and blending from one color to another.

Experiment with watercolor

Paint away, keeping your aspect ratio in mind. I recommend painting on paper that will fit on your scanner. Try different color combinations and blending techniques until you have something you like.

Paint multiple watercolor banners. Experiment until you get something you like.

Step 4: Digitize Your Watercolor

When your paint is dry, scan in your work at 300dpi and open in Photoshop. You may need to press gently down on your scanner lid so the paper lies flat.

With the Lasso Tool (L), draw a shape around the watercolor stroke to select it. Copy your selection (CMD+C) and open a new document (CMD+N). Paste (CMD+V) your work into the new document.

Select your watercolor stroke using the lasso tool

Copy and paste it into a new document

For this next step, download this amazing free Photoshop action and install it by double-clicking on the action.

Open the Action window (Window → Actions) and locate the Action Set, named Media Militia - Removal Techniques. Expand the action folder and select White BG Removal - with Color. Make sure your Layer 1 is selected and then click the Play button on the Action window to run the action.

Select the White BG Removal with Color action and hit play

When prompted, click Continue. Then, drag the white slider under Input Levels to the left until your background changes to bright white. Click OK. Photoshop will then continue to run through the rest of the actions in that set.

Adjust Levels

Now you will have two layers in your layer palette: one with your isolated watercolor image (Layer 2), and the other with your original. Create a white layer under Layer 2 so you can see what it will look like. You may need to duplicate the layer several times until it reaches your desired saturation (do this by right-clicking on Layer 2 and then hitting Duplicate Layer).

Here's my stroke with one layer.

The preview of the one transparent layer of watercolor

I duplicated this twice, so now I have 3 layers of watercolor. It may seem like a pain to have to duplicate the layer over and over again, but this actually gives you a lot of control over your end product. You may like your watercolor less saturated after all. Depending on how saturated your original work was, you may need to duplicate it many more times.

Duplicate layers of watercolor so your stroke becomes more saturated

Select all of your duplicated layers and hit CMD+E to merge all of those layers. Now, you can delete your white background and original and have your beautiful watercolor stroke on a transparent background.

Merge your layers and delete your background and original

If you're going to be using your watercolor stroke on a very dark background, test it by adding a layer of black fill underneath, and clean up with an eraser as needed.

Clean up page edges with an eraser by testing it over a black background

You're ready for the next step!

Or - Grab Watercolor Freebies!

Want to stay away from the watercolor mess altogether? I've created some free watercolor resources for you that you can download here.

These watercolor freebies are high res and have a transparent background (PNG file) so you can place them on top of any background.

Download Watercolor Freebies

Download these hand-painted watercolor freebies at - high resolution, transparent backgrounds

Step 5: Hand Letter Your Blog Name and Digitize It

While you're waiting for your watercolor to dry, start to work on hand lettering your blog name. You can work with block letters, brush letters, or whatever you feel comfortable with. Just make sure you're working with black ink on white paper, as this will be the easiest to digitize.

Here are some lettering techniques you can work with here:

For this tutorial, I'm going to use some brush lettering and scan my work, then digitize it in Illustrator.

Blog name hand lettered with brush calligraphy and scanned

Digitized hand lettering in Illustrator

Step 6: Lay Out Your Text Over Your Watercolor

Lay your text over your watercolor and play around with size, position, and color. Be careful not to scale your lettering work larger unless you're working with vectorized lettering.

Here's how it looks when I just plop my lettering on top.

Adjust your text and watercolor stroke

Here, I've played with changing the text to white, resizing it, and previewing it all on a white background. I also rotated the watercolor stroke around so it would fit with the lettering better.

You can also use your watercolor and apply it as a texture.

Use your watercolor as a texture and apply it to your lettering with image mask in Photoshop

Save For Web and Install

When saving, make sure to save it for web for faster loading as a JPEG or PNG if you need a transparent background. Upload away. Congrats - you've just made a beautiful watercolor blog header!

There are a ton of helpful hints jam packed in here. Remember to download the free watercolor strokes if you want!

I hope this tutorial was helpful. Please give it a shot and share it with friends!

Want more Photoshop and illustration tutorials? Make sure to sign up for my weekly newsletter and follow me on Bloglovin'. Also, check out my Skillshare class on How to Make Your Own Hand Drawn Font!
Continue Reading …

Friday, April 3, 2015


I hand lettered this piece for my friend's birthday and wanted to share. Nothing like some punny math-flavored humor in an inspirational quote.

You have to be odd to be number 1 - hand lettered quote by Jennifer Coyle

Like this? Follow me on Instagram for a steady flow of drawing stuff.
Continue Reading …

Wednesday, April 1, 2015

Let's Celebrate - Free Skillshare Hand Drawn Font Class Enrollments!

Holy cow guys, 590 and growing?

I am astonished at how many awesome people are coming to take my Skillshare class, Paper to Digital: Create Your Own Hand Drawn Font.

Learn how to create your own font on Skillshare for free - limited time offer

Make Your Own Hand Drawn Font class on Skillshare

It makes my heart sing to hear that I am helping and inspiring people to achieve something that they've always wanted to do. I love seeing student projects and interacting with everyone.

Make Your Own Hand Drawn Font class on Skillshare

When I launched the class 2 weeks ago today, I was hoping to get at least 25 enrollments. I can't believe it's now in the 500+ range.

Let's Celebrate

Two weeks ago I sent out a newsletter with a free enrollment links for 25 folks. Well, I'd love to do this again for you! And no, this isn't an April Fools' joke.

Click the button below for a free enrollment to my class. This applies to the first 25 people and the offer expires on Sunday, 4/5.

Take My Skillshare Class For Free

If you've already enrolled or aren't interested, please share this with someone you think may love it!

Click to tweet: Hey! Be one of 25 to take @jnnfrcyl's Hand Drawn Font class on @Skillshare for free - expires Sunday

I am completely humbled by this experience. Thank you everyone for your support and celebratory messages!
Continue Reading …

Monday, March 30, 2015

New Day- Free Desktop and Phone Wallpaper for April

April is here! The raindrop motif is strong in my mind for April, so when I started taking a watercolor class this past weekend, I made this raindrop and loved how it turned out, and I wanted to share it with you.

Rain is so often associated with negativity and dreariness. But let's think of the rain washing away the gross grey snow, and allowing the next day to start fresh.

Free desktop and mobile wallpaper from Hello Brio Studio

New Day was created with just that in mind — the feeling of rejuvenation that comes with springtime.

Download this wallpaper with the calendar for April, or enjoy it year-round without the calendar. Also, download a copy for your phone for the happy reminder.

Free desktop and mobile wallpaper from Hello Brio Studio

Download for Desktop w/ CalendarDownload for Desktop w/o CalendarDownload for Mobile

Please share this with anyone who is looking forward to the renewal that comes with spring.

Want more freebies? Make sure to sign up for my weekly newsletter and follow me on Bloglovin'.
Continue Reading …

Saturday, March 28, 2015

Equipment I Use for Lettering and Illustration

The tools don't make the artist, but having the right equipment can help make your life a lot easier.

In my Skillshare class about How to Create Your Own Hand Drawn Font, I mentioned how you don't need to get fancy with the materials you're using. I never want expensive equipment to stand in the way of creativity!

However, there are a few things that I use regularly that I'd like to talk about. These tools are equipment-specific, meaning this isn't about my favorite pens, pencils, erasers and notebooks, but it's more so about the experience enhancing things I use to make my life easier.

Equipment for Illustration and lettering -

If you want to know more about the equipment I use often for lettering and illustration, read on!


In a lot of my tutorials, I recommend using good natural light and your iPhone in order to start the paper-to-digital process. Let's face it, sometimes daylight isn't available. In fact, if you're pursuing lettering and illustration in addition to your day job, there's a good chance you aren't working when day light is available.

A scanner solves that problem.

If you're looking for an inexpensive scanner for your work, I recommend a flatbed scanner in a standard size. No need to get super fancy here.

I have the Canon LIDE 110 and it's worked beautifully for me. There was minimal calibration setup with my Mac, and now I just plug it in and boot up Image Capture. The scans are semi-quick and the images go right to your desktop. Just use 300dpi and grayscale for most black and white drawings.

Added bonus: the scanner doesn't need a power cable to work. The USB cord is enough to power up the scanner.

I will note to be careful when moving it around. You don't have to treat it like it's fragile… what I'm saying is not to squish it underneath other equipment or books. You can guess where I'm going here. I totally squished my scanner and now the motor won't move the wand. Sigh. Good thing Adams has the same scanner too :)

Equipment for illustration and lettering - Canon Lide 110 Scanner -

Daylighting lamps

If a scanner won't work for you, another great way to go is to get one or two good daylighting lamps to use in conjunction with your smart phone. Having two lamps shining on either side of your drawing will help balance out some shadows.

Equipment for illustration and lettering - Daylight lamps for photography -

Light Pad

Ooh boy, the light pad is easily the most exciting piece of equipment I have. Being able to sketch out your drawing and then refine it in ink on a completely separate piece of paper is so liberating. It's also awesome for pulling in a motif over and over again or for redrawing portions of a drawing. I use mine for making fonts all the time.

Because of lighting technology, LED lightpads are the new and more convenient solution to light boxes. Plus, it's easier to position yourself over a very slim lightpad than over a lightbox. I love and use this one by Huion.

Equipment for illustration and lettering - Huion LED Lightpad for tracing -

This item is also only powered by USB, and it is super bright and portable.

Wacom Tablet

I adore my Wacom Tablet for brush lettering in Illustrator and for smoothing paths in Illustrator.

I haven't played around with my Wacom as much as I've wanted to, but there are so many great tutorials out there on how to use it for drawing and digital painting.

Equipment for Illustration and lettering - Wacom Tablet -

Joby GripTight Mount

If you post video demos of your work on YouTube or Instagram or elsewhere, having a good iPhone camera mount is key. This Joby mount expands to fit the skinny side of your iPhone and the rubber grips keep it in place. It can be attached to any camera mount, including my favorite GorillaPod tripod.

I used the Joby GripTight Mount for my Skillshare videos (all recorded on my iPhone 5S) and it was awesome for demos!

Equipment for illustration and lettering - Joby Griptight Mount for iPhone -

Equipment for illustration and lettering - Joby Griptight Mount for iPhone -

Want to read more about lettering and illustration stuff? Here's a list of my favorite pens (that probably needs to be updated…) as well as a hand lettering starter kit.

What is your favorite equipment for artwork, lettering or illustration?

Continue Reading …

Thursday, March 19, 2015

I'm Teaching a Hand Drawn Font Class on Skillshare!

BIG NEWS GUYS - I'm PUMPED about this one.

A bit ago, Skillshare reached out and asked if I could teach a class on their platform.

What? Mind blown! So I said yes, and my class on how to Create your Own Hand Drawn Font is live!

It was a bit of a bumpy ride in the decision making process, but now that I'm done I don't know why I even hesitated. I had SO much fun planning, recording, and editing the videos, and when the class finally went live I was so excited. And then I bombarded social media.

Anyway, enough about me. So, I've talked a lot about how to create your own font here on the blog, trying to cram in a lot of stuff into one post, referencing other posts where I could. But, in my new Skillshare class, everything is wrapped up in one nice little bundle.

Here's a special preview of my class:

Also, the class is under an hour long. My friend Amber recently told me that an hour is just 4% of your day. So if you've always wanted to learn how to create your own font, and you have 4% of your day to spare, hop on over and take the class!

About the Class

Love typography? Have you always wanted to design your own typeface? Guess what: you don't have to be an expert to create your own font. Learn how designer and illustrator Jennifer Coyle of Hello Brio Studio (that's me!) creates hand drawn fonts. In this 50-minute class, you’ll learn all the steps of font-making from sketching to digitizing. By the end, you’ll have a personalized all-caps font that you love.


In this class, you'll learn first and foremost that when you're creating your own font, it doesn't have to be perfect to be awesome.

I will take you through the entire process of hand drawn font creation, from brainstorming to sketching, then from digitizing in Photoshop and Illustrator to plugging in your letterforms into Glyphs App. I'll teach a lot of time-saving tips and tricks that will allow you to create your own all-caps font in no time.

- Learn where to start when brainstorming letter styles

- Find font inspiration from what you already know

- Typography anatomy basics and what goes into making a cohesive typeface

- Best practices for sketching and inking your hand lettering

- Digitize your artwork quickly using Photoshop and Illustrator

- Use how to use Glyphs Mini App

- Export and create your all-caps desktop font!

This course was created with designers in mind. But even if you aren't a Photoshop or Illustrator expert, you will be able to follow along and learn all of my tricks. No matter what - the main purpose is to inspire you to create your own font and make it your own!


Create an all-caps font by transforming your hand lettering or handwriting into a working desktop font.

This assignment will cover a multitude of helpful lettering techniques like typography basics, letterform brainstorming, and taking your designs from paper to digital. You can create a font that is for you or for a client.


Here are the tools you will need for this class. Please keep in mind that Glyphs App is available for Mac only.

- Paper or graph paper

- Pencil and black pen and marker

- Eraser and ruler

- Scanner (not mandatory but highly recommended)

- Adobe Photoshop

- Adobe Illustrator

- Glyphs App or Glyphs Mini App (get a free trial here) - Mac only

So yeah. If you've always wanted to create your own font but never knew where to start, this class is for you. Thanks for letting me spew excitement all over the page.
Continue Reading …

Thursday, March 12, 2015

No, I Haven't Found My Passion Yet

I recently published a post that was titled "What it looks like when you've found your passion".

Let me be clear, my creative world isn't bundled up into a neat little package. I want to be real with you guys.

While I've certainly found several things that I consider myself very passionate about, my creative future is still very hazy to me.

No, I haven't truly found my passion yet

This notion of fuzziness became more apparent to me as I was emailing an Instagram friend, "John".

Recently John emailed me and asked me where I find my inspiration for my illustrations.

But as we exchanged emails and dug deeper, there was more at the root of the matter. Ultimately, he's looking for his creative passion. He has a creative degree but is now working in tech. Not creative AT ALL. He has his eyes on the more creative tasks within his office but ultimately he's still combing through his options on his own time.

He's tried photography. Film. Illustration. But nothing is really landing for him. He's not feeling a pull towards any one thing.

So I wrote back to him, and I'd like to share that with you. Here I share my story and where I am creatively, and I'm also am hoping it helps you too. (Note: I edited the email for more context... and to correct my bad grammar.)


I TOTALLY hear where you're coming from [in regards to not feeling a pull in a specific creative direction]. Let me give you my back story.

I graduated with a degree in interior design. In 2009. Right after the economy crashed. Any prospects for me as a paid interior designer were non-existent. Then I moved across the country, away from my family and friends.

I ended up working as a fundraising data person for years as a result of a move. Not creative at all. I looked for artistic opportunities within my office. While my boss was accommodating and supportive, it was clear to both of us that I wasn't ready to take on a professional project like that.

Because I was away from my social circles and had extra time on my hands, I discovered blogging. Soon I had a mildly successful beauty blog (hilarious now because I wear the same minimal makeup every day), and I designed my own blog in WordPress. My work gained some interest within the beauty blogging community and through word-of-mouth I started designing sites for fellow beauty bloggers.

Since then, a lot has changed. Beauty blogging morphed into lifestyle blogging which is now somewhere between lifestyle blogging and design blogging.

On this journey, I learned more and more about design and art. I was fortunate to work for my friend's graphic design company as their social media gal, which catapulted me into the design world full-time and allowed me to learn a ton about marketing.

Eventually it came around to where I rebranded my Instagram account to reflect only illustration and lettering. By publishing illustrations regularly, I found an awesome community.

Also, by posting my work on sites like Dribbble and Behance and marketing myself as a designer on LinkedIn, I got hired as a full-time designer (just this year).

Back to experimenting with your passion:

My advice to you is - do whatever feels right to you in the moment, but make sure to publish your work.

Here's where I am:

Photography? I picked up. DSLR while beauty blogging in the hopes of taking better product photos for reviews. Since then, I developed an interest in industrial photography and I started a stock photo site at and have since dropped that. Maybe I'll pick it up at some point.

Design? I did a handful of custom WordPress and Blogger designs and that eventually got me a design job. I have my reservations about my own skills just as any professional creative does in a field where they know they only know a slice of the entire picture, but it just goes to show you that consistently publishing your work on a portfolio site can get you places.

Drawing? I don't consider myself an artist at all but I've found a niche in illustration and lettering because it allows me to say something. I don't know where this will go and it may just be a hobby for me, but in the meantime I am also working to generate passive income through my Creative Market shop.

So, don't worry too much whether you've made the right choice. It took me a while to get where I am, and I still don't see myself as having found my true thing yet.

All of these skills that you'll develop practicing and trying out these different hobbies and interest will keep building until it all comes together naturally.

For now - think about your ultimate goals. What does that look like for you? Then think about the steps that may help you get there. And publish. Consistently.

I hope this helps.


So ultimately I hope this helps you understand where I am, creatively. Even though it may look like I have my shit together from time to time, it couldn't be further from the truth. And the same goes for other folks.

The key takeaways here:

  • Always be sharing your work.
  • Don't worry about your passion being clear. Just keep working on things with heart and it'll pull together organically.
  • You're not alone in your indecisiveness.

Just keep plugging away, and enjoy the process.
Continue Reading …