Saturday, May 16, 2015

Win a Skillshare Premium Membership

It's only been two months since I launched my Skillshare class: Paper to Digital - Make Your Own Hand Drawn Font, and I'm still overwhelmed by the positive response. I've talked a lot about hand lettering and making fonts on this blog, but I understand why the video format is preferred.

Skillshare generously provided me with 4 annual premium memberships to give away. I'd like to offer them to you, because it all started here on the blog and I appreciate you being a reader and supporter!

Win a one of four premium Skillshare memberships and learn how to make your own hand drawn font(Pin this image — instructions below.)

There are several ways to enter the giveaway below using the Rafflecopter widget. If you already have a Skillshare membership, you can still enter and give it away to a friend.

I'm excited to announce that I'm going to be working on more Skillshare classes, to be launched this summer. The thing I want to know most is - what would you want to learn about making a font? Or, if fonts aren't your thing, what class have you been wanting to take on Skillshare? Comment below!

Share this image on Instagram. Instructions below.
Caption: Take @jnnfrcyl's Skillshare class at http://hellobr.io/skillshare-font-class and learn how to create your own hand drawn font!


a Rafflecopter giveaway


Not ready to jump into Skillshare? Download my cheat sheet or check out my tutorial.

Read More »
Thursday, April 30, 2015

Cure Your Perfectionism: Just Wing It

The best advice I've gotten recently and have started following as often as possible is just to wing it.

This takes a couple different forms, whether it's "always be shipping" even if it's only at 90%, or launching before you're ready.

I explored this idea in another recent post, mentioning that everyone's got to start somewhere.

But I want to marry these ideas together and make sure I say it explicitly: Put yourself out there. And if you're worried about perfectionism or appearing amateurish or whatever, just remember that your hard work pushes you in front of the crowd already. Plus, everyone else is just winging it.

The best advice I've gotten recently is just to wing it. Deliver and make things happen, and improve as you go.

Melissa Cain and Jessica Williams of the minimalist podcast The Mind Palace were just talking about this:

I think we're all just winging it. I don't think any of us really know what we're doing. We're just trying to concentrate on the next thing.

Anyone who acts like they're not (winging it) are just good liars and shitty friends.

By building your presence in your passion, whether it's with your blog, brand, art, work, etc, you are already consistently improving yourself with each project. Well, provided you have a critical eye on your work. Which I'm sure you do.

Quick PSA: The one area not to wing it? Going on a long walk and forgetting to pee beforehand or forgetting a snack in case your blood sugar drops. Fair warning.

Have you winged it lately, and how did it work out for you? Do you feel like you're held back from perfectionism?

Read More »
Sunday, April 26, 2015

A Brand New Mobile-Friendly Blogger Template - Briolette

I've been working hard on a new Blogger template, and I'm happy to announce that it's now available.

Briolette is fully responsive and carefully designed so your content always looks great, no matter at what size screen your blog is being viewed. Check out the live demo.

At the risk of getting too tech-y, let me give you a little bit of important backstory. With Google's recent mobile-geddon, this is an important fact. As of April 21, non mobile-friendly sites are being docked points for SEO, meaning that your site is less likely to show up in Google's search results if it isn't mobile-friendly. Not sure? Enter your URL into this Google Mobile-Friendly Test. The thing is, even if you have your mobile view enabled for your Blogger template, it's not a nice experience. Your design probably won't carry through to mobile devices and it feels clunky. I have a solution for you:

Enter Briolette. It's built for Blogger with the Bootstrap framework. Finally, your Blogger template can look and act like a professional blog theme.

Briolette Blogger Template - Responsive and Customizable design built by Jennifer Coyle at Hello Brio Studio available for purchase on Creative Market and Etsy

The best way to see Briolette's features is to see them in action. Check out the live demo and follow along.

Responsive Design Made with Bootstrap


Most importantly, the blog is responsive. What does this mean? It's configured to change views at different widths of your browser or viewing device. The best way to see this in action is to click and drag to change your browser width so you can see what happens where.

For example, when you make the web browser window narrower, the sidebar snaps under the content. The navigation bar turns into a dropdown list. But most importantly, the content will shrink to fit the screen without looking broken.

View the demo and overview:



Customizable Fonts and Colors


Many Blogger templates are built to look one way and then aren't editable. But with the Briolette Blogger template, you can easily edit the colors and fonts.

Watch how to change fonts and colors:



Sticky and Customizable Navigation Bar


This navigation bar is packed with a lot of cool features. First, it's a sticky navigation bar, meaning that it stays at teh top of the page no matter where you are on your blog. This allows readers to easily navigate to pages, categories/labels, and home from any part of your blog.

Second, it's easy to customize. Just click on the edit icon and add pages and categories.

Third, it's also responsive. Instead of having your blog navigation stack weirdly on mobile, the content will snap into a dropdown button.

Watch how to set up and customize your navigation and see it in action:



Install a Custom Header Image


You can easily install any custom header image. The header image will automatically be responsive, and you can also remove the white background if you want to. (Make sure to check out my tutorial on how to make your own Watercolor Header.)

Watch how to install your custom header.



Choose From Hundreds of Social Media Icons


Briolette uses Font Awesome, meaning you can choose from hundreds of pre-built social media icons. They're easy to install and the Briolette Blogger template download includes sample code that you can drop anywhere in your template.

Here's how to install social media icons:



Other Features


This Blogger Template was carefully built to include eye-catching design and functionality. Some other awesome features:

  • Pretty hover styles - your buttons, social media icons, and links will fade-in when you hover over them, giving it a nice buttery effect.
  • Optimized SEO - Briolette is equipped with the proper Blogger SEO fixes so your blog will rank higher with search engines.
  • Built-in share buttons - Each post and page comes with built-in share buttons for Facebook, Twitter, and Pinterest. No extra steps are needed to set these up.
  • Unlimited Customizability - By being able to customize fonts, colors, and the header image, you can truly make the Briolette Blogger template your own.

Last thing I'll mention - Hello Brio is now fully responsive and is custom-built on top of the Briolette template. So, this blog is a great example of what you can do with the Briolette template and some extra CSS.

Where to Purchase the Briolette Blogger Template


You can purchase Briolette here:


Don't hesitate to reach out to me with questions about the Briolette Blogger Template. If you want to customize your template further, hire me.

Read More »
Wednesday, April 22, 2015

Blogger Blog Redesign: Simply A

Hi Briolettes! I recently worked with the fantastic Alison of Simply A to redesign her blog. Alison's been blogging on her site since 2012 and she knew it was time for a makeover, especially since she wants to start taking blogging more seriously.

Over the course of 3 weeks, we talked about her visual inspiration and blogging personality and developed a cohesive blog design on the Blogger platform.

Blogger blog design custom template - Simply A by Hello Brio Studio

Overall, Alison wanted a blog design with:

  • Clean lines
  • White space
  • Fixed menu bar at the top
  • Good readability
  • Touches of a hand-drawn feel
  • Disqus integration

First I pulled together an inspiration board from her Pinterest account:

Blogger blog design inspiration board - Simply A by Hello Brio Studio

And then created an overall style guide that I could translate into a mockup for her blog:

Blogger blog design style guide - Simply A by Hello Brio Studio

From here there were a couple more iterations and then I implemented the design onto her site:

Blogger blog design custom template - Simply A by Hello Brio Studio

Blogger blog design custom template - Simply A by Hello Brio Studio

Alison loves her new design, and it was a pleasure to work with her.

Need a custom blog design? Check out the design services I offer, and let's work together!

Read More »
Tuesday, April 21, 2015

You Can't Demand 2015 Apple of 1984 Apple

If you're here on my blog, there's a chance that you have big goals for yourself. You may be in various stages of this, anywhere from having the beginnings of a creative itch all the way up to working for yourself in your dream career, full-time.

No matter where you are on that continuum, you have big goals. You are continuously adding things to your bucket list. Your yearly goals. Your monthly projects.

All that said, you are probably very hard on yourself.

Just remember, everyone's got to start somewhere.

Apple 1984 - You can't make 2015 demands of 1984 Apple. Everyone's got to start somewhere.

In talking to Adams about my hopes and dreams for my own stuff, I complain how I don't have as strong of a brand as I'd like to. I'm not as far along as I want.

He replies, "You do have a brand. But you're still building Apples in your garage."

He continues on to say "You can't demand 2015 Apple of 1984 Apple."

It's the perfect reminder that:

  • everyone starts somewhere
  • you can't compare yourself to others
  • continuous hard work and passion is needed
  • that continuous hard work and passion will eventually pay off
  • success isn't overnight. For reals.
Read More »
Saturday, April 18, 2015

How to Create a Font with Minimal Sketching

So you want to make your own hand drawn font. Maybe you've even enrolled in my Skillshare font class. But drawing the letterforms is still super intimidating.

In this tutorial, I'm going to show you how thinking critically about your letterforms is a great way to save time, while simultaneously making your uppercase font feel more cohesive.

Is this the lazy man's font tutorial? Hardly. It takes forethought and abstract thinking in order to build a font from scratch.

How to create a cohesive font with minimal sketching

So how to build a font from just these? Because this is a visual exercise, I'll show you with images.

Uppercase Typography Anatomy


Before we dive in, here's some quick uppercase typography anatomy so you know what I'm talking about below.

Uppercase Typography Anatomy for sans serif hand drawn fonts - illustration and lettering tutorials on HelloBrio.com

Drawing a Capital A and U


Depending on the style of your font, certain letters are going to lend their pieces to other letters. Because I really liked the style of this soft A, I can also use it for the U, upside down.

Drawing letters A and U - Create a font with minimal sketching

Drawing a Capital B, I, P


B is the next logical letter to draw. The stem for the B is going to be used in several letters, even past the ones I mentioned here: it's also going to be used for the stem for the D, F, K, M, N, and the lower half of the Y.

Drawing letters B, I, and P - Create a font with minimal sketching


Drawing a Capital C, O, G, S, Q


C can be taken apart easily too by making it into an O first. The round structure for the O and C can then be translated into a G (using the smaller arm from the F). The S also fits in here by adding a spine and thinking how it fits in with the curves of the O. The Q is easy to create by adding a tail to the O.

Drawing letters C, O, G, S, and Q - Create a font with minimal sketching

Drawing a Capital D


The D stands alone with its big bowl, attached to the B's stem.

Drawing letter D - Create a font with minimal sketching

Drawing a Capital E, F, H, L


Draw arms/legs for the E and F, with the stem from the B. Use the middle arm and two stems for the H, and move the top arm down to the bottom to become a leg for the L.

Drawing letters E, F, H, L - Create a font with minimal sketching

Drawing a Capital J


The J is actually a portion of the U. I can see now that I've drawn too much in my sketch!

Drawing letter J - Create a font with minimal sketching

Drawing a Capital K, R


The leg for the K can also be the leg for the R, adding onto the bowl from the P and the stem from the B.

Drawing letters K and R - Create a font with minimal sketching

Drawing a Capital M and N


The M and the N use the same stem from the B.

Drawing letters M and N - Create a font with minimal sketching

Drawing a Capital T and Z


Draw a longer leg for the top of the T, and use these twice with the middle portion of the N for the Z.

Drawing letters T and Z - Create a font with minimal sketching

Drawing a Capital V and W and X


These diagonals can be used multiple times. Draw the W first, then use the two diagonal stems to form the V. Use these same two stems to make an X.

Drawing letters V, W, and X - Create a font with minimal sketching

Drawing a Capital Y


Use a similar angle from the W and draw the top half of the Y. Use the original lower half of B's stem.

Drawing letter Y - Create a font with minimal sketching

Conclusion


Create a font with minimal sketching

So there you have it, a full uppercase alphabet with a few pencil strokes. This set isn't perfect, but you can begin to see how important it is to have uniform widths and similar shapes so the set looks cohesive.

You can easily switch the style of your font whether you have different stem choices, serif versus sans serif, etc., but I hope seeing how to think through a letterform set will help you create more visually united fonts and hand lettering pieces. These principles can also be applied to creating a full font suite, including lowercase letters, numbers and symbols.

Want to speed up your font design? Take my Skillshare font class (it's only 55 minutes long) and make sure to download my cheat sheet!

Read More »
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).

Enjoy!

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 (http://www.creativebug.com/workshop/beginning-watercolor). 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 hellobriostudio.com - 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!
Read More »