How To Design a Font: {Part2} Draw Up A Storm!

Terminology

Before we get into the meat of this tutorial I want to give you a crash course in font terminology. I know it’s not exactly the most exciting thing but I seriously think it’s good for you to know this before we get too far.


Sans serif: A type of font that doesn’t have accents on the end of its strokes.


Serif: A font that has little accents on the end of its strokes.

Vocabulary to Know:
Baseline: The line that the letter sits on.
Median: the middle line where lowercase letters end.
X height: the distance between baseline and median, traditionally 60 percent of the total height of the cap height.
Cap height: the line where capital letters end.
Ascender height: The line where ascenders end, only slightly above the cap height.
Ascender: the part of a lower case letter that extends above the median.
Decender: the part of a lower case letter that goes below the baseline.

Sketching

Now that you have your inspiration and an idea for your font it’s time to put it into action. I think that some designers sort of forget about the sketching process. It’s honestly the MOST crucial. The beauty of sketching is there isn’t a sense of commitment. You can crank out loads of ideas very quickly since you aren’t worried about making the design look perfect. It’s a lot faster to do 10 loose sketches on paper than trying to do the same thing on the computer. I remember one of my professors once said that the computer is a tool, no different than a pencil or pen, don’t rely on it to design for you.


There are several different ways in which you can draw some ideas. I use a combination of ways to get my thoughts together. Usually I use a scroll that’s always on my desk for sketching. The reason I use a scroll instead of a piece of paper is because I like not being limited by how many sketches I can do. Plus, it’s all contained in that one roll so I never have to worry about losing a sketch.


In the sketching process I will draw a few characters that I think might help me figure out the characteristics of the rest. Here are the characters that I usually start out with first: a, e, g, n, d. You can also do a few capitals as well like: A, E, G, M. From these characters it will give you a good variety of forms that are pretty similar in other letters. Start out designing these letters and see what you think. If they’re working try some more, if not then you haven’t wasted your time designing an entire font that sucks.


Draw a variety of perspectives of the font as well. I usually like to draw a few pieces of the font to show how different pieces are going to connect. Don’t be afraid to draw really quickly at first. When you start seeing something you like, draw a few different versions of that idea to see what you like best. Never settle for your first idea. Sometimes I will also write notes on the side of my sketches just to remind myself of something when I do the final sketch.

This initial sketching time is sort of like a funneling process to get down to that one idea that you are really excited about.

Once you’ve got a pretty clear idea of where you see the font going, it’s time to get out the grid paper. This is when you are going to draw out ALL of your characters. I like to use grid paper just because I can get the proportions between letters right on. Keep in mind that all your letters aren’t going to take up the same width, but they should be the same height. Some letters like “M” and “W” are going to take up a lot of width but letters like “I” don’t take up much at all. At this point in your sketching you’re still not fully committed to one idea, so feel free to play around with different ideas. Sometimes I will do a few different versions of a letter if I’m still not satisfied.

Next Time: Going Digital

Now that you have all of your characters drawn it’s time to get digital. Sometimes I will scan in my grid paper drawings and just trace them in illustrator. You can also just look at the drawings to design the characters, whatever works best for you. If this is your first font maybe you should go from a scan.

How to Create Explosive Typographic Effects in Cinema 4D

COLLIDE Illustrative Typography

In this tutorial I will walk through the steps I used to create this illustration to bring alive the word “collide.” While you may not find yourself needing to recreate the word “collide,” I hope you will find useful the techniques I will cover:
– extruding text in Cinema 4d
– using displacement maps in Cinema 4d
– using the explosion deformer in Cinema 4d
– exporting to photoshop from Cinema 4d
– unique color enhancing techniques in Photoshop
– various layer modes applied in Photoshop for great light effects
(A basic knowledge of Cinema 4d and Photoshop is required)

STEP 1: Creating 3d text

collide 1
I created a new document in C4d and added some text with the built in text tool.


collide 2
I typed the word COLLIDE in the Attributes manager.


collide 3
I applied Extrude Nurbs by making it a parent of my text.


collide 4
Parent/child relationship shown above in my Objects Manager.


collide 5
There’s a small problem at this point: The word “collide” is treated as one object and I want to manipulate the individual letters. In order to do that I need to Explode Segments from the Function menu.


collide 6
Now each part of each letter is broken into individual splines and I can extrude them separately as well as manipulate them.


collide 6
On a couple of the letters I need to Connect the inside spline and outside spline together. The “O” and the “D” need to be connected because they are 2 individual splines as a result of the Explode Segments function I applied. I selected the 2 splines and right clicked to pull up a menu. I chose Connect. Once I’ve connected them I am ready to extrude each individual letter and place them where I want in my composition.


collide 8
I have applied an Extrude nurbs to each letter now. See my object window for clarity.


9
And now I’ve named each nurb so that I know what letter it is.


10
Next I will click on each letter’s Extrude Nurbs and adjust the cap to be a Fillet Cap. I chose 3 Steps with a Radius of 3. This gives a nice looking edge to each letter.


12
Next I selected each letter and changed it’s position and rotation into a random spot that I felt would work for this composition.

STEP TWO: Creating reflective material for my 3d text



13
I created a new material that I will plan to tweak a bit later to get better results. But for now I know I will want to add reflection, environment, and a color.


collide 14
My reflection is set to 35% and I did the same for environment as well. These are just settings I am randomly choosing and require some tweaking as the project progresses.


collide 16
I added a light and and a sky to my scene.


collide 17
I created a material to apply to my sky. I used a picture of a sky. There is definitely a lot of experimenting that can be done with what you can place in the sky and how it will look in the reflections of the material on the text.


collide 18
I applied the new material to my sky and experimented with the Projection method. Cubic ended up being what I chose based on the way it looked as it reacted with my text.


collide 18
Here is the result of my sky being reflected on my text. You can load the same image of a sky into your reflection and environment materials but the results will look different than using a sky in c4d to be reflected. I’ve found that I have more control over the reflections this way. I can rotate the sky. I can change the projection method of the material on my sky. Ultimately, it allowed me to get the results I wanted with ease.


collide 19
My text material wasn’t quite colorful enough so I added a tint of blue to the original material.


collide 20
Here is the result of adding the tint of blue. Much better for what I am looking to accomplish.

STEP THREE: Using a displacement map to create my collision effect



collide 21
I copied several of my letter from the word “collide” and will apply a displacement map to those to create the collision.


collide 22
I copied my reflective material that I created for the word “collide” and then I checked the “displacement” box and loaded a texture. Cinema 4d has built in textures you can experiment with for the displacement. Usually something black and white will work best but it is not completely necessary. I chose “brick” from the preset surfaces. I’ve also used black and white jpegs of stripes or other patterns that I’ve created in Illustrator.


collide 23
Here you can see I set the Height to 500m and kept the strength at 100%. This is definitely a step that I could get lost in time experimenting with different heights, textures, and even projection methods for this material. Each tweak will give you amazing new results to choose from.


collide 24
Here is the result of my current settings on the displacement material.
subscribe to the gomediazine rss feed

STEP FOUR: Adding exploding bits and pieces to my collision



collide 25
I added a pyramid to my scene that will be used as the object to explode. I increased the Segments to 5. The more segments you have, the more bits and pieces to explode.


collide 26
For this step I added an Explosion FX. I will use the Explosion later. (notice the difference above)


collide 28
In order for the Explosion FX to work, it must be a child of the parent (the object to be exploded being the parent). I adjusted the Thickness until I found a setting I liked.


collide 28
Here is the what my exploding pyramid looks like after playing with the Time and Strength of the explosion.


collide 29
Next I copied my pyramid twice. On one of them I left the settings but moved the position of the pyramid to quickly double the amount of exploding segments. Then on my 3rd copy of the pyramid I added an Explosion rather than Explosion FX. This gave me a bunch of tiny specs of metal flying through the air rather than the large chunks created from my other 2 pyramids.


collide 30
You can see the addition of the tiny explosion particles in this render above.

STEP FIVE: Adding the final effects in Photoshop



collide 31
In my Render Settings, I made sure Alpha Channel is checked. Then I make my final render by choosing Render to Picture Viewer from the C4d Render menu.


collide 32
When I open the rendered .tif in Photoshop it contains the alpha channel I included from C4d.


collide 33
I selected the Alpha Channel, deleted the background and added a solid black background on a new layer below my collide artwork.


collide 34
I wanted a feeling of air & space around my artwork rather than just solid black, so I added clouds from the Photoshop Filter menu.


collide 35
Next I made a selection around a portion of the clouds and feathered the edge using the Refine Edge button.


collide 36
I deleted the extra part of the clouds with my selection and adjusted the Levels of the layer.


collide 37
I found a picture of smoke to really give this collision illustration some convincing touches. Almost like a car wreck and the engine is over heated.


collide 38
Next I copied and pasted the image then inverted it (command, “I”) and set it to Screen Mode.


collide 39
I added a layer mask and revealed all. Then I went in with an airbrush on the layer mask and started erasing different areas of the smoke to make it look like it was interacting with the “collide” rather than just placed on top.


collide 40
Here is what my smoke looks like after erasing bits of it. Next, I copied that layer and repeated the same steps to add some more smoke toward the bottom of my composition.


collide 41
I felt the piece needed some more color to make it pop so I added a layer and airbrushed pink onto the layer with a large brush size. The layer was set to Soft Light and placed below my “collide” artwork so that it would effect the colors of my background but not my 3d collision.


collide 42
I wanted to spice things up a bit and throw some lighting into my collision.


collide 43
I copied and pasted the lighting into my composition, desaturated, and set the layer mode to screen.


collide 44
Then I copied my layer of lighting and added a gaussian blur to the copied layer. I set both layers to Add and moved them below the layer I airbrushed with color earlier. This created some nice color through my lightning streaks.


collide 45
The final result in Photoshop with all the layers displayed.

CONCLUSION:

I created 3d text in Cinema 4d. Then I created an explosion using displacement maps and exploding 3 different copies of my pyramid. Once I saved with an Alpha Channel for PHotoshop, I created a background for my 3d artwork by using the cloud filter and then using layer modes to create color and lighting effects. The most challenging part of this is getting the displacement the way you like it. Experiment with different patterns and different projection methods for the material.

rss subscription

My Create Chaos Experience

My experience speaking at Create Chaos design convention in Orlando Florida.

designers block Getting your head out of the game

Monday October 13th

1:30pm

I’m sitting in Cleveland Hopkins Airport waiting to board my flight to Orlando Florida. I’ve been booked as a speaker at Create Magazine’s design convention Create Chaos. At least for the moment my morning nerves have calmed down and I’m looking forward to the next three days. It’s the first such speaking engagement that I’ve undertaken. I’ve taught and spoken plenty at the office and at local design schools. I’ve even gone to career day at a local elementary school. But this is different. I KNOW kids at a school can benefit from my knowledge. The pressure to impress an auditorium full of fellow professional designers is a bit more daunting. I just hope that

T-shirt Template Freebie

It’s been a little while since we’ve had a freebie on the Go MediaZine, and an email I got this morning provided the perfect opportunity.

Here’s what Jan had to say about the Fitted Ladies Apparel Templates we just released:

Adam,
I just love your t-shirt templates for both guys and girls and as a shirt designer they are very useful but I have one request that would help me out even more, an added side view of the left and right sides of the shirts. Many requests have been for a shirt design that runs across the side so I just thought I’d ask. Thanks for everything!!
Jan

What You Get

Thanks for the idea Jan!

The side view Ladies T-Shirt template is exclusive to this freebie – it’s not part of any pack (yet). It does include all the little improvements though, like the Highlights layer, the Shirt Color layer, the streamlined clipping mask arrangement, and the “Sleeves only” mask.

This template should make it easy to drop your designs onto the side of a shirt, or just down the sleeve.
T-shirt template freebie

Go ahead and experiment with this template, I mean, it’s free. Hopefully you can use it to impress a client (or maybe just your friends).

Oh, and don’t forget to check out the full version.

[download#28#nohits]

How to Create Awesome T-Shirt Mockups Like Jimiyo

EDITORS NOTE: Jimiyo is showcasing a template from Vol. 2 of Fitted Ladies Apparel Templates, which we’ll have ready for release in November. For now, check out Vol 1.

Go Media gave me the chance to test out their new women’s t-shirt templates, and I have to say, they are awesome. High quality, crisp images that’s sure to impress my clients since presentation is paramount!

They are simple to use, but here are some tips on how I used them.

First, I copy pasted my flattened high resolution image into the “Your Art” layer.

Apparel Templates A

Secondly, I align my image to be centered on the shirt. To do this:

1. Select All while you are on “Your Art” layer
2. Press ‘V’ to initiate the Move Tool.
3. You will notice alignment tools associated on the toolbar.
4. Click the center align buttons for vertical and horizontal and your image should be centered.

Apparel Template 2

Now with my image centered, I initiate the transform tool by using shortcut CTRL-T.

In the toolbar, I link the vertical and horizontal, and play with the numbers til a good size is found.

To constrain proportions by linking, click on the chain link icon.

Apparel Templates C

EDITORS’ NOTE: Since this post, we’ve changed the “Material” layer to “Shirt Color”

Once you arrive at a good size and position, fill the Material layer below the Art layer with the base color of the tee. This should match exactly with the bg color of the art image. Color pick while having the shadow and highlight layers turned off, and fill.

An easy way to do this, would be to

1. Select the brush tool (B),
2. Hold ALT-Click to invoke the color picker and color pick the bg of the image,
3. Hold ALT, press BACKSPACE to fill the current layer with the foreground color.

Apparel Templates D

Depending on what color the shirt is, I almost always tweak the highlights/shadow layers to optimize the realistic shading effects. Since this shirt was black, I tweaked the “Highlights” layer by using levels, as well as reducing opacity after leveling.

Apparel Templates E

In the final steps, I like to embellish the composition with a few extra additions.

1. Medium tone stroke and drop shadow.
2. Enlarged, reduced opacity grayscle of the shirt image for the background.
3. After I flatten, I reduce image size for emailing.
4. After reducing image size, I run the “Sharpen” filter to Crispy it up a bit. Make sure to go under edit after sharpening and “Fade Sharpen” to tone down the filter effects.

BLAMMO!

This is a shirt in running at Designbyhumans. If you guys throw me some votes, maybe they will print it!

Thanks for reading!

Apparel Templates F

EDITORS’ NOTE: Check out this video to see the pack & it’s new features in action:

10 Tips to avoid designer’s block.

title image for avoiding designers block Ever feel like some days you can crank out amazing looking designs with little effort? Then on other days it feels like nothing is working, you’ve lost all your talent and you’ll never make another good design for the rest of your miserable life? Don’t panic – this is

How to Design A Font: {Part 1} Get Inspired!


I haven’t written a blog post in a while so I thought it was time I jumped right in and did a tutorial series about fonts. There will be three more tutorials that will follow this one. Their forces combined will account for pretty much everything I know of how to make a font. So grab yourself a red bull and your favorite salty snack and let’s get to it!

Whenever I sit down to make a new font the very first thing that I need is some inspiration. Ok, easier said than done. Sometimes I stare down a blank sheet of paper and my mind goes blank! So what to do. . . Well here is a list, in no particular order, of ways in which you might get some inspiration to create your own typeface. Everyone has their own methods that work best, these are just the ones I use.

1} Be aware of what other type designers are doing.

You always want to be trend setting in the design community, what’s the point of creating the same thing someone else has already? It’s very important to be designing something that nobody has seen before, that has your own style. What I’ve learned is that by looking at amazing work it motivates me to make something equally as amazing. I love checking up on some of my favorite designer’s latest pieces. I would HIGHLY recommend that if you haven’t already gotten hooked up into a social bookmarking site, do it now! It’s cool, I’ll wait. I use delicious as my bookmarking site of choice. Of course there are TONS of these types of sites so just find one that fits your taste. Here is a short list of some other bookmarking sites that I am aware of: blogmarks, digg, blinklist, feedmarker.

The benefit of having an account with one of these link posting sites is that you have access to your bookmarks at any computer in the world, if your computer crashes your bookmarks aren’t lost, you can share bookmarks with your friends, you can organize your bookmarks so they’re easy to find, do I really need to go on? Usually whenever I’m on one site I’ll follow some links and somehow find myself on a really sweet, random site. I have a horrible memory so I know the only way I can see the site again is by immediately bookmarking it.

So you may be wondering what websites I enjoy looking at to get some inspiration. Well, there isn’t a short and easy answer to that. Usually what I like to do is just get into my delicious account and poke around sites i’ve taged as “design” or “inspiration”. Sometimes I will have to go around to several different sites before I feel those creative juices flowing. I don’t think it’s necessarily good to only look at one website for ALL your inspiration. Look at a variety of work that might trigger new and exciting ideas.
Here are some of my favorite places to see what other designers are up to: behance (several of us at Go Media are on here), webcreme, ffffound, surfstation. From these websites you can find loads of obscure firms or designers that are doing some amazing work. This will at least get you started in the right direction; follow links around to different sites and see where they take you! It never ceases to amaze me the cool, random things I’ve discovered through these sites.

2} Research, research, RESEARCH!

When I was in school pretty much 75 percent of our energies were given to researching. Rationalizing EVERY line and color choice. Professors did not accept the answer “I just think it looks cool”. I still research before I start designing any font so they are more than a pretty face. Pun INTENDED! For example, while in school, we were given an assignment to create a typeface for the future. We were asked questions like: how will we communicate in the future, Will the alphabet still exist, and so on. From this I came up with a few different ideas. Three fonts were designed for this project. One was diffraction, one was celest and the final one was constellation. Diffraction and Celest are available in our arsenal but constellation is not because it isn’t a usable typeface for the computer. People would use this typeface by connecting stars using lights. Each letter is represented by a star, so words would be constellations.

So how/why do you research a font you may ask? Well think of a topic you are interested in: shopping, computers, food processing, abandoned buildings, the environment, ect. I usually use Wikipedia as a good starting point for research. Don’t use that as your ONLY form but it helps to get some basic information fast. From there you can check out a library book or ten (we pay taxes for a reason right?!). Try and learn everything you can about the subject matter, this will help give you visual cues as you’re researching. The more we know, the stronger our final solution will be. Keep that sketch book nearby! You may come across something while researching that will spark your imagination that never would have happened before. It gives your work a sense of depth and complexity that without research would be meaningless. I have found that the more research I do before a project, the better final solution I get.

3} Restrict yourself!

Ok, I know this sounds a little nuts but sometimes when you’re staring down a blank sheet of paper your mind can go blank too. Sometimes clients come to us and say “Just make a cool looking design”. We try and get more information from them but they really have no idea what they want, just “something cool”. This can be sort of tricky, so what I do in these cases is I try and think of a topic I’m interested in and work off of that.

For example, for Usonia, I thought it’d be fun to design a font based on Frank Lloyd Wright and one of my favorite buildings he designed, Fallingwater. I looked at all the pictures I took while visiting Fallingwater and found inspiration for forms based on the ways in which windows opened or thick and thins created by the stone.

Restrictions can be pretty much any sort of boundary that you want to make up for yourself. Like a dog placing his own invisible fence! You could limit yourself to designing a sans serif font with lots of thick and thin areas in the characters. This may seem a little crazy but it honestly does help sometimes when faced with infinite possibilities.

4} Keep a journal handy.

Let’s face it, sometimes you just can’t control when a great idea is going to come along. I always have a moleskine on me just in case I’m in line at panera bread and randomly think of a great new idea. Sometimes I’ll have days when I think of a million great ideas but others were I just can’t think of a design to save my life! That’s where the sketch book comes in. I just flip through that and see what ideas I had before and use that for a starting point on days I am not quite as inspired. Everyone has a different process for getting their ideas down. I will often write out my ideas instead of sketching them since I know a little drawing wouldn’t help me remember. Concepts inspire me more than visual form most of the time. Do whatever works for you. If it helps to jot down a picture do that, anything that will help you remember the idea.

5} Accept the fact that inspiration can come from anywhere.

I don’t know about you, but sometimes I will be walking down the street and I’ll see an interesting crack in the concrete or look out my window and see an interesting pattern that sparks my imagination. Sometimes the stupidest/simplest things get me thinking of a new idea. I think it’s important to be always be looking out for these ideas.

One thing I’ve learned about being a designer is that it’s a lifestyle not a career. Surround yourself with inspiration; my apartment is filled with posters, pictures and objects that keep me thinking of new and exciting ideas. Surround yourself with things that get you inspired and before you know it you’ll be cranking out those stellar ideas.

Stay tuned for part 2 to come next week!

Create a Dream Design with 3D Typography

Hello, my name is Alex Beltechi, a designer that is currently studying in college and working in the print media realm. I would love to explain my vast experience and overwhelming knowledge to you, but due to the fact that I have no such qualities, I’ll stick to sharing what skills I’ve been developing lately, through tutorials. Among keyboard shortcuts and mouse clicks, I enthusiastically tap piano keys and dream of adjusting a lens’ focus. And in case you’d like to find me on the web, you can read my tutorials on PSDTUTS or see more of my work on my Behance portfolio.

Introduction

In this tutorial, the dreamweavers at Go Media (Cleveland’s small business website designers) are going to create a 3D Typography based design. All the elements will revolve around the centerpiece and theme: dreaming. The word will dictate the entire layout and control the space by allowing everything else to emerge from within. The trees will grow out of the letters; the mountains will show themselves behind the word and overshadow the glowing moon.

Dreaming often takes you to different places and unites bits and pieces of your memory. It basically takes you to a whole new world, or a new level of game in daisyslots to play, but that is usually made up of real elements. We’ll illustrate this by making everything float in mid air, as if suspended in time, yet maintain realism by using common elements of nature.

Naturally, people dream at night, so the overall lighting will be dark and predominated by a cold color palette: cyan and lime green.

Also, the typography should have a classic, storytelling look; one that would complete the eerie atmosphere.

Feel free to download the PSD at the bottom of the post that contains the final image. Now that we’ve planned everything, let’s begin.

Create the 3D text

The first thing to do is get this free font called Storybook. It’s a font that fits our context well, and that will look well with 3D decorations due to its elegant serifs and bold stature. Type up the first letter of your word and give it this color: 4C3F38.

3d typography

Now add a 3D effect by going to Effect > 3D > Extrude & Bevel. Play around with the settings yourself to get the angle, lighting and form you want. You can recreate my treatment by using the same settings. Don’t forget to use a ‘Complex 2’ Bevel.

3d typography

Once you finish the first letter, repeat the process on the remaining letters. The only modifications you should make are to alter the position. Then copy (Ctrl+C) each individual letter and paste (Ctrl+V) them in Photoshop one at a time. Once you try pasting them, you’ll be prompted to choose a method of importing. Choose the ‘Smart Object’ Option. By doing this you can make simple adjustments at all times to the Illustrator file right inside Photoshop by double clicking the layer icon.

Position the letters onto an empty Photoshop canvas. I’m working at a rather large resolution of approximately 6300 x 4500 px at 300 ppi.
Also, fill the background layer with this color: 17151d.

3d typography

At this point we’ll begin stylizing the letters. Get the Magic Wand Tool (W) and make a selection of the letter’s foreground. Right click, select Make Work Path and specify a tolerance level of 1,5.

3d typography

Now that it’s a work path, we’ll fill it with a color by going to Layer > New Fill Layer > Solid Color. Fill it with white. The path should now be a vector shape. Double click on its layer and give it a bevel. Use the settings shown in the image below and choose the highlight color (94aa53) and shadow color (6c6f64).

3d typography

It’s now time to create a pattern that will cover the front of each letter. I’m using a Go Media vector freebie: Seamless Swirls. Go on and download it if you haven’t already, and open the provided Illustrator file. Change its color to this: 94aa52 and copy (Ctrl+C). Open a new Photoshop project with the clipboard size (235 x 235 px) and fill the background color with another color: ebe77f. To make it into o a pattern go to Edit > Define Pattern. Your new pattern will be saved in the pattern set that is currently opened.

3d typography

Now that you’ve created the pattern, you need to add the pattern to the face of the letter. Double click on the white shape’s layer and add a Layer Style: Pattern Overlay. Your newly created pattern should already be selected.

3d typography

One last touch is a Gradient Map Adjustment Layer that we’ll place on top of the letter’s body. While having the layer selected, go to Layer > New Adjustment Layer > Gradient Map. Then play around with the colors until you get a similar result. My colors, from left to right are: d8c67f, 94aa53, 262628, and 141416. Make sure that the Adjustment Layer Applies only to the letter. To do this, make it a clipping mask for the letter layer by holding Alt and clicking right in between the two layers.

3d typography

Now copy the layer style of the letter face and duplicate the Gradient Map. Apply these effects to the remaining letters.

images

Draw the scenery

The text is now finished. Let’s add the trees and foliage.
This technique I’m about to show you is what I have developed for myself. It reduces complex imagery to simple shape. A simple splatter, when grouped in a pattern begins to take a certain role, thus resembling an element of nature. You may find it useful or dull, but it’s what we’ll use for this design.

All you need is a standard Photoshop round brush and a mouse. Choose one using your Brush Tool (B) and input the settings found in the images below.

3d typography
3d typography
3d typography

Now that your brush settings are all ready, begin painting a tree. It’s important to know that you shouldn’t create the whole tree with the same brush settings. There is one adjustment you need to make along the way. If you look under Shape Dynamics in your Brushes Window, you’ll see a setting we’re using: Fade. This fades out your brush depending on how much you put in the adjacent field. A Fade set at 100 will end faster than one set at 250. You can use whatever settings you find appropriate. I used 100 for the trunk, 150 for extensions of the trunk, and 250 for thick branches. As you increase the fade, reduce the brush size at the same time.

3d typography

Continue using this technique in creating the rest of the trees and draw some roots too. Reduce the size considerably for the thin branches and add even more fading when necessary.

3d typography
3d typography
It’s time for foliage. Prepare a separate brush using these settings.

3d typography
3d typography

Now begin painting. Begin with a larger size using this green: 94aa53. In a layer underneath, with a smaller sized brush, paint with a darker green: 55612f. Again over the light green layer, use the same color (94aa53) with an even smaller size. For highlights, use the same size as the last one, but with this yellow: e3e07d. Here is an image you can use as a reference in creating your own trees.

I drew my inspiration from acacia trees, while coming up with the shape of the trunk and volume of the foliage.

3d typography

Following the branches as a reference, draw away!

3d typography

Add more nature elements now. I added a mountain and a moon. They will give depth to the image, and prevent the composition from being scarce. Use the pen tool (P) and create them as vector shapes.

3d typography

Make the mountain fade out on the bottom. An easy way to do it would be to create a new layer on top, clip it to the mountain layer and paint with a large soft brush with the background color. I also added a glow on the moon. To add one yourself, add a layer style: Outer Glow. Keep the standard color, increase its size and reduce the opacity to 25%.

Some more improvements include adding dark accents to the lower part of the tree trunks and shadows that stretch across the face of the letters. You can create those in the same way – clip a new layer to the one you want darkened and paint with a soft brush using a dark color. This applies to the mountain, trees and roots. Use a sharp brush to draw the tree shadow though.

3d typography

Finalize the design

In order to complete the artistic feel of this design, add this texture to your canvas. Simply paste it on a new layer, over all the other ones. Set the layer’s blending mode to Linear Burn and its opacity to 30%.

3d typography

Now invert the texture (Ctrl+I) and change its hue by going to Image > Adjustments > Hue and Saturation. Change the hue to 153 and saturation to -73.

3d typography

One last touch – add the watercolor texture inside the mountain and moon, once more, with clipping masks. Put their layers on Overlay (Mountain) and Multiply (Moon). Adjust the opacity.

3d typography

And that concludes it. Now go on and create your own, one of a kind, dream design.

3d typography

WOOBOX-MAIN-IMAGE

Hey Designers, make sure to check out our Arsenal Membership, which hooks you up with our huge product library for only $15 per month. Yes, seriously.

Git Yer Structure Outta Mah Creative!

I had this art history professor my first year of college who gave the most fantastical lectures; he proudly wore mismatched socks with worn-out Birkenstock sandals. During his lessons, (which were sometimes accompanied by a recording of a Mongolian throat-singing song) his long, wild hair would whip around dramatically and unavoidably hit some poor front-rower in the face. He never talked below a roar, and even the most baked-out students paid attention in his class. For me it was the first few sessions (which I eventually dubbed “theatrical productions”), that were most memorable; this was when he defined the terms “Chthonian” and “Apollonian” which forever divided my perspective.

The Importance of Sketching: Oliver Barrett’s Moleskine

When I start on a project, I like to brainstorm ideas and write down whatever comes to mind. From there I from there I start sketching until I develop something that can translate well onto the computer, and of course I also have to be happy with it. I try to flesh out as much as I can on paper before moving to the computer, but sometimes I get too excited and get straight to the computer right when the sketch is starting to materialize.   The sketches below are drawings that have been developed and used in recent projects.

Trivium
Trivium Sketch
trivium sketch 2
Trivium Final
trivium final 2

Amores Perros Poster
amores perros sketch
amores perros one
amores perros two

Junk Culture
junk sketch
junk kulture logo

Killer’s Tee
killers sketch
killernaut final

Minus the Bear Poster
minus the bear sketch
minus the bear final

How to make a vector pattern brush

Hey everybody! I hope the last few weeks have gone well for you – whatever that may mean. I hope that you found at least a little time to soak up all the great resources and knowledge being shared around the design blogosphere. Finally I hope you enjoy this little tutorial and share it with your design friends.

We’re going to make a pattern brush.

how to make a pattern brush step 1

We’re going to start in Illustrator (I’m using CS3).

I chose to make a wavy line brush because it’s relatively easy and it teaches the basics of pattern brush construction without a lot of messy details. It also gave me a chance to share another technique involving blend modes and distort filters.

So to start off, hit the backslash key or click the line segment tool from your Illustrator Toolbox. Draw a line about 650px wide. Now hit “v” to switch to your selection tool and select the line segment. While holding the ALT key (Option key on a Mac), drag the line segment down about 80px. You’ll see that holding the ALT key while dragging makes a copy of the selected object. Now, I hope you didn’t click anything else, because we’re going to hit CTRL+D to duplicate the last action again. Now you should have three lines nicely spaced on top of each other.

Like this:

adobe illustrator step 1

how to make a pattern brush step2

Now we’re going to make a blend between these three lines. First we need to modify the default blend options.

Go to Object>Blend>Blend Options.

how to make a pattern brush blend options

Change the default setting from “smooth color” to “specified steps”, and then change the number of steps to about 8.

With all three lines selected, hit ALT+CTRL+B, or

go to Object>Blend>Make.

You should now have 8 lines between each of your original 3 lines.

how to make a pattern brush step 2a

how to make a pattern brush in illustrator step 3

Looking good so far. Let’s give our lines some personality with a distort filter. For this brush I used the Roughen filter. With your lines selected, go to

Effect>Distort & Transform>Roughen.

how to make a pattern brush 3a

The Roughen filter has quite a few options. I changed the defaults from “corner” to “smooth”, and decrease the size and detail to 6 and .93, respectively. The screenshot below shows the effect I got from those settings. Just put in whatever settings look good to you – it won’t prevent you from following the rest of this guide.

how to make a pattern brush in illustrator step 3b

how to make a pattern  brush in illustrator step 4

We’ve got a little change of pace coming. We’re going to have to move out of Illustrator for a little bit to get this pattern brush… well… patterning.

Open Photoshop and make a new document 2500×2500 pixels.

how to make a pattern brush in illustrator 4a

Copy your wavy lines from Illustrator and paste as a smart object into your Photoshop Document. After you paste, hold the shift key and scale the smart object so that it just touches the edge of your document.

how to make a vector pattern brush 4b

Photoshop’s Offset filter shifts the pixels of your image by a certain amount. This is really handy for making edges seamless.

Go to Filter>Other>Offset

(They really hide this super useful filter, huh).

Since your document is 2500 pixels wide, set the shift to something about 1/2 of that, or close to 1250 pixels. Make sure the “wrap around” option is checked.

how to make a vector pattern brush 4c

You’ll see the seam right away. It should be just about dead center. This is what we need to fix.

how to make a vector pattern brush 4d

how to make a vector pattern brush 5

Fixing this seam is really the only subjective part of this whole guide. It really helps if you have a Wacom set up. Hit “B” to activate the brush tool. Set it to 100% hardness. Now just use the bracket keys to find increase or decrease the size of the brush until it’s equal to the thickness of your lines. For me, this was about 4px. Now erase and draw in the lines so that they connect nicely. Here’s how mine looked about 1/2 through the fix-up:

how to make a vector pattern brush 5a

Keep at it. Try to imitate the movement of the rest of the lines. This will depend on what Roughen settings you chose back in Illustrator.

Finally, okay I’m done.

how to make a vector pattern brush 5b

Save your document as a PSD somewhere handy, and we’ll get back to Illustrator in the next step.

how to make a vector pattern brush step 6

We’re almost there. Let’s get that PSD into our Illustrator document.

Go to File>Place

and browse to the PSD you saved. In order for this to be vector again we need to autotrace it (this is why we worked at a nice high resolution while in Photoshop). With the PSD selected, go up to the little down triangle beside the Live Trace button and choose “Detailed Illustration” from the list of autotrace presets (this one almost always works the best for me).

how to make a vector pattern brush 6a

Sweet! You probably want to make this thing a lot smaller before you make a brush out of it. So with the selection tool, hold shift and drag inward from a corner to scale it down.

Drag the whole object over to your Brushes panel. A new brushes dialog will pop up. Choose “pattern brush”.

how to make a vector pattern brush 6b

Now you’ll be faced with a few options. The only one I really changed on this screen was the Colorization method. I changed it from the default to “Hue Shift”. This setting means that the brush will take on the stroke color.

how to make a vector pattern brush 6d

Now you’re free to draw away with your new brush! The best way to test it is to hit L to draw a circle shape and use the brush as the stroke. If you don’t see any seams – it worked!

how to make a vector pattern brush 6c

This method applies to all kinds of pattern brushes. If you want to make a chain pattern brush, just draw one. Then export to Photoshop, use the offset filter and fix the seam. Then back to Illustrator for autotracing and brush-making.

Something cool that was not covered in this guide is that pattern brushes have special parts for the beginning, end, and corners of strokes. This is really cool and adds a lot more flexibility. Keep your eye on the Go MediaZine and maybe a future post will cover these parts of a pattern brush.

Happy designing!