Monday, March 2, 2015

Regarding Experts

I just read this post, "Everyone Is An Expert" which is a response to this one from Ciera Design, "Growing Your Blog By Positioning Yourself As An Expert".

Regarding Experts in an over-saturated world

The Ciera Design post talks about how you can boost your blog by blogging what you are passionate about, and allowing yourself to be an "expert" in the field. Sophie's response on "Everyone Is An Expert" talked about how things are becoming over-saturated and how people calling themselves experts is dangerous.

Sophie continued to say how we're all responsible for the advice we publish and how we present ourselves to others. And on the other end, we're also responsible for how we absorb information. We need to be responsible consumers of information.

The commenters on Sophie's post agreed wholeheartedly, myself included. But now that I think about it, I hear the "remember the grey area!" side of my brain kicking in.

In this world, everyone is in different stages of knowledge. It's an obvious statement but it's important to remember.

For example, while I hardly know anything about illustration, I've had more "success" than the guy who has never published one of his drawings anywhere. I am more "experienced" than the gal who is scared to put pencil to paper.

Does this give me an avenue to give advice on illustration? Yes. Does it give me a right to call myself an expert? Hell no. I'm the first to admit I'm far from being an expert. But I'm further along than some. And a lot of you are in the exact same position.

Same goes for everything else I've ever given advice on in this blog. Same goes for anything anyone else who has ever given advice on their own sites. The main difference is how you position yourself.

So I agree with Sophie's article "Everyone Is An Expert" but I also want to clarify. I think a lot of people who are giving advice are doing so because they know they have more experience than the newbie, and want to help. It doesn't mean that everyone giving advice considers themselves an expert.

Does this mean we should stop giving advice if we're not an expert? No. As long as we share valuable and real knowledge, we're contributing to the greater good of the community.

We just have to remember that most people are in that fuzzy grey area and take it all with healthy skepticism. But that shouldn't stop us from learning and spreading knowledge when we can.
Continue Reading …

Saturday, February 28, 2015

How to Watermark Your Blog Photos Quickly, Plus a Photoshop Tutorial Video

There are certain things that happen in a visual and digital world, and one of them is straight-up image stealing. It's not that a person means to do harm when they use your photos on their own social media accounts, it's really just laziness.

But really, you've worked hard to create your blog images. Do you really want someone stealing your hard work? It's a good idea to watermark your photos and images so that you will get credit for your images in the future.

Watermarking is a hot topic in the blogging community, and I've gone back and forth on it several times. To watermark or not to watermark? Some say it's tacky, but others argue that it's the only way to make sure another blogger or company doesn't straight-up steal your photos. I've seen it happen too many times.

Regardless, knowing how to watermark efficiently is an awesome time-saving skill.

How to watermark your blog photos quickly, plus a photoshop tutorial video

And to go one step further, having a consistent watermark is really important for your brand. If you have one watermark that is in one blocky font, another with your signed blog name, and another with your logo, the branding will get out of hand.

So in this tutorial, let me show you basics on how to watermark and then how to save time doing it by using a "stamp" in Photoshop.

Basics of Watermarking Your Photos


In my time spent blogging, there are tons of different ways of watermarking. Some people slap their logo all over the photo over and over and over again so there would be NO WAY that you can steal their photo.

bad watermarking

That is a little too much for me. Plus, a watermark is supposed to allow you to claim ownership over a photo or an image, but it should never distract your reader from the content.

Placement


That said, your watermark will be happiest in the corner. Your watermark isn't Baby. She knows her place as a watermark and will be happiest sitting pretty in the corner of your image.

You can leave the option to use any of the four corners, but when possible, try to use the same corner for all of your images. Since the eye travels from left to right, I recommend the bottom-right or the top-right so the reader will be able to absorb your photo first without being slapped in the face with a watermark.

corners are good watermark locations, with bottom-right and top-right being the best

Give a healthy amount of margin to your placement, too. This will also help stave off those folks who are crop-happy and will spend some time cropping off the bottom of your photo so that they can use your photo for their own content. (Those people suck.)

Use a healthy margin for watermarks so that people aren't as tempted to crop out your watermark

Size


In a nutshell, you want your watermark to be as small as possible while still being readable. It depends on if you're using a font or a logo.

Visuals


Like I mentioned at the top, it's important to keep your shit together when branding your images. A blog that has 50 types of watermarks is confusing. (Let me be real here - I've gone through several iterations of my own watermarking over the years. I'm not proud of it.)

If you have a logo that can be used at a smaller scale, use that.

Use a logo that can be scalable. Don't have one? Use text or higher a designer!

If you use a certain font within your branding, use that.

text-based watermarks are ok

If you don't have either but still want to start watermarking your images, choose a bold font that doesn't have a TON of personality. That way, if you hire a designer later to do further branding, the designer isn't stuck trying to design around a crazy-ass font that is burned into every images you've posted for the past year.

Don't use a crazy font with a ton of personality to watermark your photos if you don't have a real logo or branding yet

How to Stamp Your Logo On Your Blog Images


So now that you've gone through watermarking 101, let's talk Photoshop tricks.

Funnily enough, I discovered this Photoshop shortcut right after I wrote a post on how a blogger should have a standard Photoshop file in order to save time with watermarks, image text, and consistent image graphics. But moving on.

This tip is going to blow your mind! Follow this 5 minute video to learn how to make your logo into a "stamp".



0:00 Hey guys it's Jenn from Hello Brio Studio. Today I'm going to show you how to make your logo into a Photoshop brush so you can stamp your watermark on all your photos in a really quick and easy way.

0:10 The first thing you want to do is make sure you have your logo with a transparent background.

0:27 In order to find the correct watermarking position, you're going to want to try with an actual photo. That way, you can tell how it's going to look when you go to use it in a real setting.

1:17 I'm going to drag my transparent logo onto this photo so I can see about the placement and the size.

1:34 Hold down Command + T and resize your logo. Because it's a vector object it won't get weird when I resize it.

1:48 In terms of positioning, you want to have it in one of four corners.

1:58 You want the photo to about the photo and then the watermark to be secondary.

2:09 Right-click on the layer that says HB Logo. Click Convert to Smart Object. What this is going to do is allow it to be opened in a new file now at this new size so that you don't have to carefully crop and resize your image all the way down to this size.

2:32 Double-click on the Smart Object thumbnail, which will open it up in a new file. From here, hit Command+A to select all, and then go to Edit -> Define Brush Preset.

2:58 From here, I can go back to my photo. Hit B for brush. Click for the brush preset picker and now you can see my logo. How cool is that?

3:18 You can see how if you drag it onto the photo, it's ready to go, and you can stamp it all you want. Stamp your heart out.

3:32 You can also choose whatever color you want too.

3:47 Open a new layer. I'm going to stamp it about where I want it.

4:14 I'm going to choose [an opacity] that looks good while still being visible but doesn't distract you from the content of the photo.

4:21 So that's really it. Now you have your watermark for your photo and then any time you go and open a new photo, you can just go ahead and stamp it wherever you need it.

4:30 I hope that was helpful. Please hit the subscribe button for more tutorials.


What are your thoughts on watermarking blog photos? Comment below!


Like this blogging and Photoshop tutorial? Make sure to subscribe to my YouTube channel.

Thanks to Adams for helping me record part of the YouTube video. Definitely explains why I'm coming out of a laughing fit in the intro!

Continue Reading …

Thursday, February 26, 2015

Trying - Free Desktop and Phone Wallpaper for March

Adams shared this Derek Sivers video with me last week. The title of the video is "Why You Need to Fail" and this particular quote really stuck out to me. I want to share it as this month's free desktop wallpaper!

Free desktop and mobile wallpaper from Hello Brio Studio

The quote is sticking with me, as evidenced by the fact that I lettered it and put it on Instagram earlier this week.

Stick it on your devices for March and beyond (you can download it without a calendar, too), as a reminder to keep pushing towards your goals. Not everything you do is going to be perfect, nor should it be. Continuing on, and maybe making mistakes along the way, is so much more important than not trying at all.

If I didn't try, I wouldn't have been able to publish a new font this month nor would I have had a shirt successfully printed on Cotton Bureau. By the way, the new font is featured in this background freebie!

Free desktop and mobile wallpaper from Hello Brio Studio

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

Please share a moment of failure and how it helped you grow. Also, share this with anyone you think needs an extra kick in the pants this month.


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

Tuesday, February 24, 2015

What It Looks Like When You Have Found Your Passion

Here's what it looks like when you've found your passion

  • You can't stop thinking about your passion. Sometimes when you're supposed to be sleeping.
  • You wake up 30 minutes before your alarm, and instead of grunting and turning over, you leap out of bed and start brewing your coffee so you can start working on it.
  • Instead of Sublime-fueled escapist moments on your way to work where you dream about being on an tropical island, you listen to podcasts and the topics are alarmingly similar to it.
  • When asked about it, you won't stop talking about it.
  • You can name 3 heroes in its industry. And having lunch with those people is on your bucket list.
  • Retirement can wait, not because you need the extra cash but because you're not sure what you'd do without your passion.
  • You fret more about how to get "chores" done efficiently so you don't waste time that could be spent working on it.
  • When you procrastinate, you're working on your passion.
  • You're nearly obsessive about it, meaning that you've experienced the eye roll or the brow furrow from loved ones who want to be supportive but have hit a wall.
  • You collect/hoard books, magazine articles, and blog posts about it.
  • You make exceptions to your commitments, whether it's interpersonal or budgetary, to accommodate your passion.
  • You look for similarly aligned passions in a best friend or mate. Subconsciously or consciously.
  • Your passion had caused you physical pain because you were so distracted by it. See: walking into walls, or nearly falling on ice while trying to write things down about it on your phone.
  • You'd rather work on it than watch TV.
  • You stay up late for it.

Can you relate?


PS - I launched my third font, Elbow Room, as featured in my blog post image. Please check it out and share :)
Continue Reading …

Saturday, February 21, 2015

How to Make Your Own Font Using Glyphs and Illustrator (Updated)

So, you're a designer or illustrator. Or you just really love typography. Or your own hand writing. Have you always wanted to create your own font? In this post, I will show you how to create a hand lettered font from start to finish.

How to create your own font using Illustrator and Glyphs app - Tutorial on HelloBrio.com

UPDATE 2/21/15: This post was originally published 11/22/14. I've since learned a trick or two (specifically with kerning in Glyphs), and I've added some more helpful photos.

Making your own font is:

  • a great way to show off your design and illustration skills
  • a milestone for any designer
  • a fun way to capture your own hand writing
  • a necessity for branding where want to go the extra mile
  • an exercise in your OCD meticulous attention to detail

Creating my own font was on my bucket list, and publishing my first font was a huge leap over a creative hurdle that I was ecstatic to accomplish. Since then I've published the free Paperweight Font and am working on a third font which I plan on launching very soon is available to download now, called Elbow Room!





Now, I'm going to help YOU learn how to create your own font and save hours of research and speed bumps. I spent a whopping 9 hours on this first font from sketch to export, and since then it's taken me significantly less time with each new font.

Here are the recommended materials:


Sketch Each Glyph of Your Font


Finding the style of your font can be the hardest place to start. When I was trying to decide, I went for my go-to doodle-y letters. I recommend starting with a lettering style that you already use in your own illustrations or hand lettering projects.

Sketching on graph paper is a great way to keep your letterforms organized. For starters, it's a good rule of thumb to have 4 equal heights each for the ascender, x-height, and descender.

Draw each letter carefully and re-draw letters and characters that you aren't happy with.

Sketch each glyph of your font - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

Redraw characters you aren't happy with - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

Keep in mind your ascender, x-height, and descender - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

It's up to you how many symbols and other characters you want in your font. If you plan on selling your font, I recommend having a full suite of the most commonly used symbols.

Add in a bunch of extra symbols - How to create your own font using Illustrator and Glyphs app - HelloBrio.com

Scan and Vectorize Your Work in Illustrator


After you have a letter set you're happy with, scan in your work. Sometimes even seeing it on the screen versus on the piece of paper can help you see which glyphs you need to redraw.

After you have your work scanned in, vectorize your work in Illustrator using Image Trace to get your glyphs to be individual vectors.

Vectorize your letters and glyphs in Illustrator using Image Trace

Here's your chance to also clean up your work and smooth some bumpy lines with a tablet (follow these tips on how to use your Wacom tablet to smooth your work quickly). Smooth the bumpier lines but make sure to keep the original hand drawn qualities if that's the look you're going for.

Smooth your letters with the smooth tool in illustrator

Make sure to group each letter so little pieces don't get left behind (especially those lower case i's and j's).

Set Up Your Illustrator File for Glyphs App


To make the transfer to Glyphs App easier later, it's best to set up your Illustrator file so that you can quickly copy and paste each glyph. This video was helpful.

To set up your Illustrator file:

  1. Create one new file that is 1000x1000px
  2. Set your grid lines to be 100px with 4 subdivisions
  3. Each letter will be no more than 100px square, so each major block will be space for one letter. Move each letter to line up with the correct grid subdivisions. Set up your Illustrator file so that each grid line will have a different meaning from beardline to x-height to ascender and more - How to create your own font using Illustrator and Glyphs App - HelloBrio.com
  4. Repeat until your letters are positioned correctly.position each letter in your Illustrator file precisely - How to create your own font using Illustrator and Glyphs App - HelloBrio.com
  5. Draw a 100x100px box around each letter (no stroke or fill value). Use the move and copy tool (CMD+SHIFT+M) and repeat tool (CMD+D) to make sure each of these boxes are precise.
  6. Group each letter with its bounding box.
  7. Use the align tool to move all of your letters to the top-left position (so each corner lines up at 0,0)
  8. Select all of your items and then use Release To Layers (sequence) in the Layers window drop down.
  9. With all of your letters selected, resize them to 1000x1000px. Now each individual letter with its bounding box is on its own layer.
  10. Move up all of your letters and their bounding boxes up 750px (by typing -750px in the y axis field) to make it easier to copy and paste into Glyphs App in the next step.
  11. Save and open Glyphs!

Move Your Characters into Glyphs App


In Glyphs, set up your file (File → Font Info) so it matches your original font design as follows:

  • Units per Em: 1000
  • Ascender: 750
  • Cap height: 500
  • x-Height: 250
  • Descender: -250

Add all of the numbers, symbols, and other pieces you want into your collection. When you're ready, start adding characters individually by double-clicking the character in Glyphs and pasting the character in from Illustrator.

After you paste from Illustrator, double click on the bounding box in Glyphs and delete the bounding box.

Copy each letter from Illustrator - How to Create Your Own Font Using Illustrator and Glyphs App - HelloBrio.com

Paste each letter into Glyphs and delete the bounding box How to Create Your Own Font Using Illustrator and Glyphs App - HelloBrio.com

Open and close each letter and symbol until you've copied and pasted each glyph from Illustrator.

When you're done, highlight all of your glyphs in the app (CMD+A) and change the LSB and RSB (left and right side bearing) in the bottom-left settings.

Set Your Kerning Within Glyphs App


Kerning. It's the part of the font design process where you specify the distance between specific letter pairs. It's what makes your font have the extra polish that other fonts may not have, and really becomes the pivotal point for attention-to-detail that goes into designing your own font.

In the first version of this tutorial I talked about exporting and testing your font over and over again to work on kerning. Turns out that was wrong AND a huge time waster, and that is not what I'm about at. all.

In order to do this, double-click on a letter and then type in various words to test them. You can also hit CMD+OPTION+F for built-in testing pairs.

You can see how awkward the spacing was for these letters before I kerned them.

Kerning - How to Make Your Own Font Using Illustrator and Glyphs

To kern, click between each letter and use CMD+OPTION Left/Right on a Mac or CTRL+ALT Left/Right on a PC. Hold down SHIFT for increments of 10. Learn more tips here.

After a lot of tweaking, you'll have a list of kerning specifications in your Kerning Panel.

Export and Test Your Font


Now that your font is beautifully kerned, you can export it and test it for real. Install it like you would any other font and play around with it in Photoshop and Word or similar applications. Take note of any letters that need to be moved or if one set of characters needs to be kerned differently.

Export and test your font with various symbols and words

Congratulations, You Made Your Very Own Font!


By this point, you may have your very own font! Things can only get better from here.

Congrats you've now made your own very own font
If you've never made your own font before but have been wanting to, I highly recommend just diving in. Get the first one "out of the way", per se, which can help you learn the workflow as well as learn things for future font design.

Make sure to download the free Sweet Pineapple font, the free Paperweight Font, and Elbow Room if you haven't already!

I hope this tutorial was helpful. Ask any questions in the comments below!


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

Tuesday, February 17, 2015

How to Choose a New Pre-Made Blog Design

A new blog design is always a great (and fun!) way to rejuvenate your blog and get a fresh start. If you're not ready to hire a blog designer, looking for the perfect premade blog theme is a great route to go.

There are a few important things to keep in mind. You don't want to blindly pick a new theme or template. Doing so would be like going to the grocery store, hungry, and without a list. You end up dragging yourself up and down the aisles, filling your cart with items that make your pupils dilate. You end up spending more money than needed, and you will probably also leave the store with junk.

Important tips to follow before you choose your new pre-made blog design

Looking for a blog theme without a plan is like that: you may end up spending money on several themes that looked like they were going to work but end up not working. And you may also waste a lot of time browsing, instead of having a goal in mind and efficiently searching.

The other problem? If you willy-nilly choose a blog theme, you may end up alienating your readers or losing interest in your own blog because the new design doesn't feel right.

There are several reasons to update your blog's design:
  • Your current design is dated
  • You never customized your blog's look before
  • Your design no longer fits in with your brand
  • You're changing blogging platforms
  • etc

No matter what your reason, follow my tips below and you'll be all set to attack your blog theme searching with purpose.

Take Inventory of your Blog's Components


Take inventory of your blog's must-have content components

Redesigning your blog is like redesigning a room: it's a great time to take inventory of everything, prioritize certain items, and purge other items that are just causing clutter and eyesores.

Take a look at the critical components that make up your blog. These can be the elements of the header, the sidebar gadgets or widgets, and the items in the footer. Also look at the things that occur within your blog posts, like your preferred image widths, a box for related posts, your blog post signature, and more.

Make a list of all of these items, and star the ones that are most important to you.

If you're just getting started in blogging, it's time to look at the blogs you read with a critical eye. It can be hard to separate content from design, but at this stage it's important to be able to list the things you want or must have. This will make blog theme shopping much easier later down the road.

Stay true to your brand


Remember when I talked about not alienating your audience? This is where this comes in. If your audience is used to seeing a pink blog with hearts, then suddenly you switch to a minimalist black and white theme, they're going to have to do a double-take. And honestly, only your most loyal readers will stick around.

There are ways to change the look of your blog while making sure you have some recurring brand themes that carry over from your previous blog design to your new one. Some of these visual branding items may include:

  • Colors
  • Your Logo or header
  • Font choices
  • Photos (especially when it's a photo of your face and it stays in the same location. We all know how important your face is for your blog
  • Branding motifs - like hearts or arrows or a certain style of graphics

Shop around


Now that you know what content components you need to carry over, plus a general sense of what visual elements you would like to feed into a new design, it's time to go shopping.

If you're really new to blog theme or template shopping, I recommend looking at Etsy for Blogger Templates and Creative Market for WordPress themes.

Both of these marketplaces have designers that sell themes regularly, and you can read reviews of the designers and shop owners which will help with sifting through the mounds of results.

Depending on how obsessive organized you are, you may want to make a list of theme names and check off your must-have items. Pretty soon you'll have a comparative list that will make your theme selection easier. Or, if you find one you like, just double-check that it fits your requirements before you send it tumbling into your cart.

Some other things to think about when shopping:

  • Do you need theme installation help? Does this shop owner include it in the theme purchase or provide installation as a separate item?
  • Will you need ongoing theme support? How does the shop owner rate with customer service, according to reviews or her own website? Does the theme have a history of updates, if needed?
  • Can you edit the theme? If you need to drop in your logo or header, can it be done with the theme? And does it look good? Can you change colors or fonts, etc?
  • Do you need a mobile theme? Does the theme you're looking at have a responsive template or a mobile theme?
  • Does the price seem right? Much like anything design-related, if something is too inexpensive then the designer probably cut a lot of corners to make it that way. The price should be competitive with other similar blog theme designs.
  • Do you need extra functionality? If you've found a blog design that is *almost* perfect but there's still one element missing, would you be able to fix it yourself or hire the designer for a small custom job?

Not all of these may apply to you, but the list is there to help get your critical thinking flowing.

Notify your readers


I always recommend announcing a blog redesign. It's a great way to show your readers what your blog looked like before and after, and it gives you a chance to explain why you made the changes. (Just remember to take a screenshot of your blog before you install your new theme!)

What advice or questions do you have related to choosing a premade blog theme?


Shameless self plug: Shop my premade Blogger templates or hire me for a custom blog design.

Continue Reading …

Saturday, February 14, 2015

How to Vectorize Hand Lettering Without Photoshop, Illustrator, or a Scanner

I've shown you a lot of ways to digitize hand lettering, but most of these involved Photoshop, Illustrator, or a combination of the two. But what if you don't have access to one of any of these programs, or even a scanner? I'd hate for technology to hold you back from your lettering and illustration goals.

Julie commented on this Illustrator Image Trace tutorial and asked for a similar tutorial sans Illustrator. Well, I'm going to go one step further.

How to vectorize your artwork and hand lettering for free by using Inkscape: and without photoshop, illustrator or a scanner

Let's digitize and vectorize, as low-tech and inexpensively as possible. Pretty much for free. Let's try to vectorize this (anti-) Valentine's day lettering piece I did a while back: without a scanner, without Photoshop, and without Illustrator. All you need to follow along is a computer, a phone, your fully-inked hand lettering piece, and an internet connection to download a free program (Inkscape).

You had me at beer hand lettering inked drawing in a moleskine sketchbook

After going through this process, I have to say how pleasantly surprised I am at how this worked. Inkscape IS a free program so it's buggier than Illustrator, but it sure can get the job done, and this is only the tip of the Inkscape iceberg.

Step 1: Take a Photo of Your Finished Work


The iPhones, especially an iPhone 5 or newer, have amazing cameras. Now the native photo editing software is also awesome.

So, take a photo of your finished work. Try to take it head-on, without shadows or glare.

Step 2: Edit Your Photo within the iPhone


Take your photo and edit it so it's high contrast, much like we would do in Photoshop in step 2 of this tutorial.

By adjusting the Exposure, Contrast, Black Point, and desaturating the image completely within the iPhone's photo editor, I've managed to do this:

Adjustments made within iPhone photo editor

Here are the settings I used. They'll be different for you and it takes some trial and error.

iPhone photo editor settings to increase contrast exposure brightness and desaturate

Also, remember to crop your photo so extraneous background stuff isn't visible. This will save you time later on. Here's the fully edited image:

fully adjusted and cropped image

Step 3: Transfer Your Photo and Download Inkscape


Now, transfer your edited photo to your computer. How you choose to do this is up to you. If you have a Mac, you can Airdrop it, send it via Messages, etc. Or you can email it to yourself. Or you can hook up your phone to your computer the old fashioned way. You get the point.

Download and install Inkscape. I talked more about it in this Illustrator alternatives roundup. It's free, and it's available for both Mac and PC. You'll also need to download XQuartz if you have a Mac.

Step 4: Digitize in Inkscape


Once you have Inkscape up and running, go to File - Import to import your drawing. Resize it and place it in the artboard.

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

From there, select and right-click on your drawing. Select Trace Bitmap.... This will bring up a new dialog box. Resize the dialog box and select Live Preview so you can see your results better.

We want to work with the Brightness Cutoff mode. Play with the Brightness Cutoff Threshold up and down arrows until you get it to look like you want it to. Make sure Remove background is checked. Then click OK to execute the trace. (You'll need to close the dialog box to continue.)

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

Your new trace was created on top of your original drawing. Move the new trace so you can see your result.

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

Step 5: Edit Your Vectorized Art


From here, if you want to separate your drawing or edit individual letters, you need to break your art apart, kind of like step 5 of this Illustrator tutorial.

In Inkscape, select your traced layer, then select PathBreak Apart. You'll notice all of your lines run together and some holes will fill in with black.

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

Delete the parts of the art you don't want. I've zoomed in here so you can follow along for the rest.

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

Then, we're going to subtract out the "holes" from the letters where applicable. To do this, click on one of the parts of the word that need to be worked on, then while holding down SHIFT, click on the surrounding word. Both need to be selected here.

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

Now, go to PathDifference, or hit CTRL and - (use CTRL even if you're on a Mac).

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

Continue until all of the holes are punched out.

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

Now, go ahead and delete your original artwork from your canvas and export the fully vectorized drawing. You can save it as its default SVG (Scalable Vector Graphic) file type, or you can go to FileExport PNG Image….

If you're going to export to PNG, I recommend selecting your art pieces, then using the settings I have below. You can adjust the image width and height to the size needed, too. It will automatically clip to the artwork and leave you with a transparent background.

Tutorial: Use the free application Inkscape to trace and vectorize your illustration and hand lettering

For fun, here's what my drawing looks like on a mug!

You had me at beer - mug

I hope this tutorial was helpful. It just goes to show you that anything is possible as long as you exercise some patience and do your research. I was very skeptical in trying out this new program. While I still will continue to use Illustrator, it's so nice to know that there's a suitable free alternative out there.

Want more Photoshop and illustration tutorials? Make sure to sign up for my weekly newsletter and follow me on Bloglovin'.

Resources: More on Inkscape tracing. Mug resource from Medialoot.

Continue Reading …