http://www.hellobrio.com/blog/digitize-lettering-illustrator-image-trace
Step 1: Scan or Take a Photo of Your Work
Again, make sure your work is in a finished state, preferably black and white. If it isn't B&W, you can work around it, but this method of using Image Trace works best with crisp, B&W line art.
Paper to Digital Step 1: take a photo of your hand lettering work - using your iPhone and good lighting is fine
I'm so self-conscious about my hands in this photo!
If you're taking a photo of your artwork, make sure to eliminate shadows or get them as even as possible, and take your photo square-on so you don't have any weird perspective skewing.
Even though this photo is yellowed, the shadows are relatively even and there isn't too much glare. It will be cleaned up in Photoshop in the next step.
Even though this photo is yellowed, the shadows are relatively even and there isn't too much glare. It will be cleaned up in Photoshop in the next step.
Step 2: Open your Photo in Photoshop
Once you've loaded your photo onto your computer, open it up in Photoshop.
Open your hand lettering photo in Photoshop - Paper to Digital, how to Digitize your hand lettering using photoshop and illustrator
Here we are going to adjust the levels so the black art becomes blacker, and the page becomes white.
Go to Image → Adjustments → Levels… or type CMD+L on a Mac or CTRL+L on a PC. (I should note that desaturating your image — converting it to pure black and white in Photoshop — may make this process easier, especially if you're working with a non B&W image. To desaturate, type CMD+Shift+U or CTRL+Shift+U or go to Image → Adjustments → Desaturate.)
Here's the Levels dialog box.
Go to Image → Adjustments → Levels… or type CMD+L on a Mac or CTRL+L on a PC. (I should note that desaturating your image — converting it to pure black and white in Photoshop — may make this process easier, especially if you're working with a non B&W image. To desaturate, type CMD+Shift+U or CTRL+Shift+U or go to Image → Adjustments → Desaturate.)
Here's the Levels dialog box.
Levels dialog box will help you transform your photo into crisp black and white art in Photoshop
From here, click the white eye dropper and click around on the white parts of the page until the background looks pure white without a lot of noise (the grain and weird shadowing that can start to pop out when you're playing with levels).
Aim for the darkest white part of your drawing that still allows your artwork to be visible.
Aim for the darkest white part of your drawing that still allows your artwork to be visible.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
Then, use the black eye dropper to click on the lightest black on your drawing.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
From there, you can adjust the left and right sliders until your artwork looks clean and high contrast.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
Even after you've adjusted the levels in Photoshop, you may still have weird shadows especially around the edges of your page because of vignetting.
Step 3: Drop your Adjusted Artwork into Illustrator
Using the lasso tool (L) or the marquee tool (M), select the clean part of your artwork that you want to bring into Illustrator.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
Copy (CMD+C) that selection in Photoshop, then open a new file in Illustrator, and paste it into that file. I made my Illustrator file 3000x3000px, but you can make it any size you want. Sizing in Illustrator doesn't matter as much at this point because the end product will be a vector.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
Step 4: Convert Your Artwork into Vector using Image Trace
Next, bring up your Image Trace panel in Illustrator (Window → Image Trace).
With the element selected, choose one of the Image Trace presets from the Preset dropdown. I recommend starting with Black and White Logo for these types of lettering projects.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
After you've chosen a preset you will see your artwork change in the background. We're not done yet; here we can adjust the settings further. Click on the arrow next to Advanced so you can fine tune the Image Trace settings.
Play around with the sliders for Threshold, Paths, Corners and Noise. I usually like to have less corners so the letters look smoother, but you're going to have to see what works best for your drawing.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
Step 5: Expand and Ungroup Your Letters and Make Final Tweaks
Once the main parts of your drawing look good, click the Expand button at the top.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
Then, ungroup the selection twice and you will have individual elements that you can move around the page and adjust as needed.
Paper to Digital: Digitize Your Hand Lettering Using Illustrator
If you're noticing that some words are coming out better than others, you may need to do a little doctoring by bringing your words in separately from Photoshop. For example, the "IS" and ampersand in my project are starting to become muddled because the size is so different from the rest of the project.
Delete the words or parts that don't work for you, and re-paste them from your Photoshop drawing into your drawing in Illustrator and fine-tune the settings for those individual words or pieces.
NEXT............
Create a Hand Drawn Font Using Illustrator and Fontastic.me
In this fun and interesting tutorial, I'm going to show you how you can create your very own font using Illustrator and the online web service fontastic.me.
To follow along, you'll need a copy of Adobe Illustrator, though if you haven't got a copy and don't want to buy it, you may be interested in our similar tutorial that uses Inkscape.Inkscape is a free, open source alternative to Illustrator. Whichever vector line drawing application that you use, fontastic.me offers its service completely for free.
High vacuum AFM Aquire true surface information
While I'm going to show you how to create a hand drawn font using a photo of letters drawn on paper, you can also use similar techniques to produce a font using letters that have been drawn directly into Illustrator. If you use a drawing tablet, this might be preferable to you.
If using a photo, ensure that you use a dark color pen pen to draw your letters and use plain white paper for maximum contrast. Also, take your photo in good light to help produce a photo that is clear and contrasty to make it as easy as possible for Illustrator to trace the individual letters.
Over the next few pages, I'll walk you through the process of creating your first font.
Open a Blank Document
NEXT............
Create a Hand Drawn Font Using Illustrator and Fontastic.me
In this fun and interesting tutorial, I'm going to show you how you can create your very own font using Illustrator and the online web service fontastic.me.
To follow along, you'll need a copy of Adobe Illustrator, though if you haven't got a copy and don't want to buy it, you may be interested in our similar tutorial that uses Inkscape.Inkscape is a free, open source alternative to Illustrator. Whichever vector line drawing application that you use, fontastic.me offers its service completely for free.
High vacuum AFM Aquire true surface information
While I'm going to show you how to create a hand drawn font using a photo of letters drawn on paper, you can also use similar techniques to produce a font using letters that have been drawn directly into Illustrator. If you use a drawing tablet, this might be preferable to you.
If using a photo, ensure that you use a dark color pen pen to draw your letters and use plain white paper for maximum contrast. Also, take your photo in good light to help produce a photo that is clear and contrasty to make it as easy as possible for Illustrator to trace the individual letters.
Over the next few pages, I'll walk you through the process of creating your first font.
Open a Blank Document
The first step is to open a blank file to work in.
Go to File > New and in the dialog set up the size as desired. I used a square page size of 500px, but you can set this as desired.
Next we'll import the photo file into Illustrator.
Import Your Photo of Hand Drawn Text
If you haven't got a photo of hand drawn text to work from, you can download the same file that I've used for this tutorial.
To import the file, go to File > Place and then navigate to where your photo of hand drawn text is located.
Click the Place button and you'll see the photo appears in your document.
We can now trace this file to give us vector letters.
Trace the Photo of Hand Drawn Letters
Tracing the letters is very straight forward.
Just go to Object > Live Trace > Make and Expand and after a few moments, you'll see that all of the letters have been over laid with new vector line versions. Less obvious is the fact that they will be surrounded by another object that represents the background of the photo. We need to delete the background object, so go to Object > Ungroup and then click anywhere outside of the rectangular bounding box to deselect everything.
Now click close to, but not on, one of the letters and you should see that the rectangular background is selected. Just press the Delete key on your keyboard to remove it.
That leaves all of the individual letters, however, if any of your letters contain more than one element, you will need to group these together. All of my letters contain more than one element, so I had to group all of them. This is done by clicking and dragging a selection marquee that encompasses all the different parts of a letter and then going to Object > Group.
You will now be left with all of your individual letters and next we'll use these to create the individual SVG files that we need to create a font on fontastic.me.
Save Individual Letters as SVG Files
When done, go to File > Save As and in the dialog, change the Format drop down to SVG (svg), give the file a meaningful name and click Save. You can now delete that letter and place and re-size the next one on the artboard. Again do Save As and continue until you have saved all of your letters.
Finally, before continuing, save a blank artboard so that you can use this for a space character. You may also wish to consider saving punctuation marks and lower case versions of your letters, but I've not bothered for this tutorial.
With these separate SVG letter files ready, you can take the next step to create your font by uploading them to fontastic.me. Please take a look at this article to see how to use fontastic.me to finish your font: Create a Font Using Fontastic.me
Fontastic.me is a free to use web service that offers a selection of icon fonts, but also allows you to upload your own SVG files to create your own unique fonts.
This short article explains how to convert SVG files that have been created in a vector line drawing application, such as Adobe Illustrator or Inkscape.
If you haven't got any suitable files to use, please take a look at one of these two articles that show how you can prepare SVG letter files from a photo of hand drawn letters using Illustrator or Inkscape.
If you've got your letter files prepared, now you can pay a visit to fontastic.me and create your font. On the home page, you'll need to enter your email address and set a password, but this is entirely free. Then click the yellow button labeled 'Create your Icon Font' to continue.
On the next page, click the Import Icons button at the top of the page, select all of your SVG letter files and upload them. You should see a graphic that says how many icons you are uploading.
Once the files are uploaded, you'll need to create a new font to add them to.
At the top of the page, there may already be a label saying Untitled font 1, but if not, click the + New Font button at the top of the page.
If you click the Font Settings text to the right of the page, you can then rename this font as desired.
Now click on each of the letter thumbnails to select them – they have a yellow border when selected and click the Customize text.
This will display your letters in two sections – Character Mapping and Class Mapping.
Font Design Tool
In each of these, ensure that the input field contains the correct letter for the uploaded letter. For some characters, you may see a code displayed after you type in the field. Don't worry if it looks odd, your computer will understand it.
When you're happy, click the Download text and save the ZIP file to your computer. When unzipped, you'll have a folder that contains several different font formats for use on websites as different browsers and platforms require different types. However, you'll also see that there's a TTF font file that you can install and use on your computer.
On the next page, click the Import Icons button at the top of the page, select all of your SVG letter files and upload them. You should see a graphic that says how many icons you are uploading.
Once the files are uploaded, you'll need to create a new font to add them to.
At the top of the page, there may already be a label saying Untitled font 1, but if not, click the + New Font button at the top of the page.
If you click the Font Settings text to the right of the page, you can then rename this font as desired.
Now click on each of the letter thumbnails to select them – they have a yellow border when selected and click the Customize text.
This will display your letters in two sections – Character Mapping and Class Mapping.
Font Design Tool
In each of these, ensure that the input field contains the correct letter for the uploaded letter. For some characters, you may see a code displayed after you type in the field. Don't worry if it looks odd, your computer will understand it.
When you're happy, click the Download text and save the ZIP file to your computer. When unzipped, you'll have a folder that contains several different font formats for use on websites as different browsers and platforms require different types. However, you'll also see that there's a TTF font file that you can install and use on your computer.
Now you have your own font file
Use Nexus Font manager, download if free to view the font and create a series of words
Start with the name of your Company
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.