How to Digitize Handlettering
Hand lettering is great. It’s modern yet conveys a sense of days gone by, bringing us back to the good old days when signs and billboards were all done by hand. Picture the artist with paintbrush in hand painstakingly adding to the design stroke by stroke. Best of all there is such a personal touch to Hand Lettering. Each stroke is one of a kind, not to be found on any other design, unique.
Today, in 2016, there are a variety of handwritten fonts. Each of them beautiful, but the uniformity of each lettering take away from that “oh so special!” feel. The personality and fluidity is totally drained from it. Sure you can do the best you can with kerning and line height, but it’ll never feel right, or human.
That’s why many designers today go back to lettering by hand. The twist now is that it’s digitized. It’s super fun and easy, and here’s how:
Step 1: Pick up a pen or brush and doodle away. Try as many variations as you want, then pick your favorite.
Step 2: Take a Picture and send it to yourself. Make sure your image gets lots of light and try to try to avoid shadows.
Step 3: Send the Picture to yourself and open it in Photoshop. We want to get the image as close to Black and White as possible. Press Cmd+Shift+U to make the image black and White.
Step 4: Now you might notice that the image is in Black and White, but there is still a lot of gray in it. To solve this problem we want to adjust the levels. Press Cmd+L to open the levels panel.
Step 5: Take the white eyedropper and click around for the brightest white in the image. Once you have that, select the black eyedropper and click around for the darkest black in the image. We are going to ignore the gray eyedropper since we don’t want a gray scale.
You may not be able to get all the gray out, but don’t worry. We just want to have the clearest contrast between black and white so just try your best. This is how my image turned out.
Step 6: Since this was a picture there is a bit of a shadow still present in the edges of the image. To get rid of this take the lasso tool and select around the object you want to work with. Copy your selection and paste it into Illustrator.
Step 7: Now let’s turn this image into vector. We need Image Trace. Go to Windows and open up Image Trace.
Step 8: In Image Trace choose a preset. You can either choose one that you’ve customized yourself or a default one that illustrator already has. In this case I chose “Black and White Logo.” You can see how it got rid of the remaining gray that was in the image.
Step 9: Click on the Advanced drop down and play around with the Paths and Corners. The lower they are the smoother your lettering will be, but this depends on your image, so keep an eye on it as you toggle through each.
Step 10: When you are happy with how it looks click “Expand” in the tool bar above. This will turn the image into a vectored object.
Step 11: Ungroup the object, and delete the white spaces that make up the negative space in the object. You just want to be working with the letters.
Step 12: Go in with the Smooth Tool or use the Direct Select Tool so go over and smooth out any bumps that might not look good. Once you’re happy you are done!
Now you can take your Digitized Hand Letters and place them in your designs or over an image.
Have you recently used digital handlettering? Tell us about your project in the comments below!
Visual Hierarchy in Typography
Visual Hierarchy is an important element in any design project. For designers, it is important because it allows us to determine what will be read first, second, and so on. Type hierarchy gives order and organizes the text elements in a design. This way the designer can most likely control the way information is received and in what order.
Hierarchy through type equally benefits the readers as well. A clear visual hierarchy tells us what is important on a page, giving readers a sense of how to read the material and establishing a flow.
Good type hierarchy can be achieved through the combination of key visual elements; size, weight, color, texture, typeface choice, and space.
Of course, one of the most simplest and obvious ways to establish hierarchy is through size. Size is what catches our attention first. The biggest text demands the most importance; it is what our eyes are drawn to immediately, the first information we read.
In relation to size, scale is equally important. To create distinct hierarchy the sizes of text must have variance in relationship to the other type on the page. Just changing the point size may not be enough since different typefaces scale differently. Look at how the typefaces work together to ensure that size and scale are equally balanced.
Thickness of strokes can create hierarchy as well. The thicker typeface appears bold and big. Light, condensed and narrow type often appear smaller than the actually are. Pairing thick and thin typefaces together creates a sense of hierarchy with the thick style carrying a greater look of importance.
Using color helps to add emphasis and highlight text. Think back to what we learned about color as a child; warm colors (red, yellow, and orange) will pop out, while cool colors (green, blue, violet) tend to fade.
Of course, it is important to consider the colors used throughout your design. Color consistency is key to unifying your design, but color contrast can will also allow your type to jump out at readers.
Texture in type refers to the pattern of texture that letters and words create when resting on a page or screen. Within blocks of text you end up with a patterned look. To establish more hierarchy break up the pattern. This can be done through something as simple as changing the alignment of a single block of text.
After Size, Typefaces are probably the next most noticeable element used in creating hierarchy. The key is to have contrast between typefaces (This is one reason why one serif and one sans serif combos are so popular.)
Choose typefaces with similar x-heights, if the styles will be used in in line with one another throughout the project. For best combinations, look for typefaces that are different in weight but have a similar tone or feel.
Similar with size, space can be used to help text demand more authority. White space can make type appear bigger and more readable, while lack of whitespace can make it feel tighter and smaller.
Bigger, bolder, text elements often need more space than smaller simpler, text blocks. Consider the spaces between lines of text, kerning for each type style, and the relationship between the different type used throughout the design.
Organizing type can be challenging and fun. It may come naturally at first, but with practice in combining techniques a designer can develop a good eye for different type effects and styles, and can achieve great hierarchy and flow through type!
My Inspiration: Tina Roth Eisenberg
The first time I heard of Swissmiss (aka Tina Roth Eisenberg) I was in college. I only knew of her blog, and I was a bit dismissive of her mostly because the friend who sent me her link is one of those people who bombards you with links, so Swissmiss got lost in the shuffle. Throughout the years I kept hearing her name pop up, so eventually I signed up for her newsletter and found out about all of the wonderful things this woman has done.
Tina Roth Eisenberg has an insanely impressive resume. Originally from Switzerland, she moved to the US in 1999 and has since run her own creative studio, founded the monthly lecture-series Creative Mornings (highly recommended), created the temporary tattoo line Tattly, and so much more.
Beyond her long list of professional achievements, I also find Tina Roth Eisenberg’s mindset and philosophy to be very inspirational. She’s helped me to understand that “aha-moments” can’t be forced, that you shouldn’t wait around for things to happen, and that its healthy to separate work time from free time. I obviously knew of all these things “conceptually,” but seeing such a successful person embody these traits makes it feel that much more achievable, therefore it’s no surprise that when my week came to teach a Learning+Leadership seminar, I chose to share Swissmiss’ philosophy with my coworkers.
After watching Eisenberg’s 5 rules for making an impact, I know you’ll be a believer too!
The Principles of Design
There are a lot of rules and best practices to consider when designing anything (regardless of the medium– website, print campaign, keynote presentation, etc.), and the process can easily become overwhelming to the uninitiated. Fortunately, various sets of principles exist to help lay out the general premise of a design. There are nine principles, and the process becomes vastly simpler after learning the concepts behind this set. Most of the time, after some practice and comprehension, the principles begin to work subconsciously within the back of your mind, guiding the creative process.
Before listing them, I think that it would be wise to get it out there that, in reality, there are no rules. All rules are merely guidelines, and there will always be a case in which they should be broken. Similar to “i before e.”
Here are the nine principles (Thank you to Getty Education
for the definitions):
- Balance is the distribution of the visual weight of objects, colors, texture, and space. If the design was a scale, these elements should be balanced to make a design feel stable. In symmetrical balance, the elements used on one side of the design are similar to those on the other side; in asymmetrical balance, the sides are different but still look balanced. In radial balance, the elements are arranged around a central point and may be similar.
- Emphasis is the part of the design that catches the viewer’s attention. Usually the artist will make one area stand out by contrasting it with other areas. The area could be different in size, color, texture, shape, etc.
- Movement is the path the viewer’s eye takes through the work of art, often to focal areas. Such movement can be directed along lines, edges, shape, and color within the work of art.
- Pattern is the repeating of an object or symbol all over the work of art.
- Repetition works with pattern to make the work of art seem active. The repetition of elements of design creates unity within the work of art.
- Proportion is the feeling of unity created when all parts (sizes, amounts, or number) relate well with each other. When drawing the human figure, proportion can refer to the size of the head compared to the rest of the body.
- Rhythm is created when one or more elements of design are used repeatedly to create a feeling of organized movement. Rhythm creates a mood like music or dancing. To keep rhythm exciting and active, variety is essential.
- Variety is the use of several elements of design to hold the viewer’s attention and to guide the viewer’s eye through and around the work of art.
- Unity is the feeling of harmony between all parts of the work of art, which creates a sense of completeness.
Closely related to the nine principles of design are the Gestalt principles. For the most part, the Gestalt principles have the same general premise, however, they originate from theories of visual perception developed by German psychologists in the 1920s. The five Gestalt principles are as follows:
I (and presumably every design student ever) had a project in one of my preliminary design classes intended to reinforce these principles. We were asked to create a simple, minimalist accordion booklet showcasing the five principles using an item found in our local grocery stores produce section. Here’s mine
“Okay, but Chris, I still don’t know what to do with all of this information! How do I make a pretty presentation?!”
Okay, well, here’s what not to do in presentations, etc. Certainly never (most of the time) put blocks of text within circles. Don’t keep your text close to the edges of anything, especially if you’re breaking my first tip and putting it within a circle! Think of your design elements as living, breathing characters that need space and breathing room to survive. Marginless text will look and feel awkward, and make your audience uncomfortable. Take care with your colors: don’t use an outrageous combination (unless your design calls for it) and don’t use colors that are overly headache-inducing. This generally narrows down to not using schoolbus-yellow text on a white background. Speaking of illegibility, don’t place text on top of an image that doesn’t have suitable contrast without also adding an overlay.
Alright, I’ve covered what not to do…now, lets wrap up this post with some easy tips to try out in your next design!
Pair contrasting fonts. This essentially narrows down, in most cases, to using a sans-serif font for headlines, and a serif font for body copy.
If you’re going to have text on top of an image (and the image doesn’t naturally give a nice contrast between text and picture), try using an overlay! We do this on most of our websites. You may have noticed that I’ve done it all throughout this presentation.
Good design is generally based off of a grid system. On the web, that translates to designing within a 960 or 1280 grid. In layman’s presentation terms, it means keeping your titles, photos, body copy, etc. consistently in the same place, or at least following the same concept. For this presentation, that meant centered blocks of left-aligned text for copy heavy slides, and centered blocks of center-aligned texts on top of images for title-heavy slides.
Break the system to provide emphasis (this circles us nicely back to the start, with regards to breaking rules). This is tricky to get right. Break it once, it looks like a mistake. Break it twice, it looks like two mistakes. Break it three times, and it’s a system for breaking the system. Break it ten times, you look like a terrible designer. So, break the system approximately three times. The system can be broken with positioning (breaking the grid), color, fonts, etc.
Staying Creative + Seeing Creatively
“Curiosity about life in all of its aspects, I think, is still the secret of great creative people”
Living in a city as busy as New York is, many of us tend to slip into the same daily routine. We have our destination, we put our blinders on, we walk, we subway, we arrive. What we tend not to do, is look, and think. This is commonly referred to as monotony. Monotony is bad, and is essentially an antonym to creative thinking. It’s an easy tedium to stick to. Wake up, cram breakfast, get on the train, put headphones in, pretend that the commute isn’t happening, wait for the elevator, work for 8 or 10 or however many hours, and then repeat the first six steps in the reverse order. It doesn’t take much effort to see that this isn’t all that great of a habit to get into.
To see creatively, instead of traveling from our departure point, A, to our destination, B, we should strive to travel from A to Z, paying careful attention to bcdefghijklmnopqrstuvwx & y along the way. Not only is this a great way to observe the lovely world around us, but it’s also a safer way to travel and avoid the sometimes not-so-lovely people.
Within a ten block radius of our office (and, assumedly yours as well), there are infinite happenings. Expand that radius to Manhattan (Insert your city here) and then to the extent that our train lines connect us to, and you realize how much is going on. There’s plenty out there to see.
But, how do I stay creative?
- Take part in hobbies & activities that differ from work
- Break your comfort zone. Repeatedly.
- Occupy your free time! But not all of it. Leave some time for relaxing and debriefing your mind.
- Start seeing things for the first time again. This is difficult, when you’ve been seeing the same things every single day of your life, but it’s a great practice to get into.
- Stay in awe of everything around you. Very connected to the last bullet point, but we take a lot for granted. Huge buildings surrounding us, 500,000 pound chunks of metal flying through the sky, 1.6 million very complex minds existing around us, etc.
- Look up. Maybe your ceiling is more interesting than you previously thought. If not, walk outside and look up again, not just to remind yourself that the sun has already set and that it’s raining and cold, but just to look.
As a recent university graduate in graphic design, I became worried that after graduation, when I would no longer be locked inside of a the school’s design studio being quite literally forced to be creative 25 hours a day, 8 days a week, my creativity would wander away and be lost forever. I wasn’t about to willingly accept this fate, and started taking one second of video everyday. Granted, this has done before. There’s an app for it (I’ll leave my opinions about the app specifically out of this, but lets just say that I don’t use it). This project- I started it a week before graduation- has been an extremely great motivator to stay creative and see creatively in my day to day life, outside of work. It’s allowed me to really realize how much is out there to see. I have the first half of the year up on Vimeo, if you’d like, you can check it out: 365/2 from Chris Cubellis.
To summarize all of the previous points, to stay creative and see creatively, simply “Keep fresh; Stay rad”.
Typography by Erik Marinovich