Many times when someone comes to our site or wants some graphic work done we usually hear, “Make it Web 2.0″. That is usually followed by, “…you know, shiny, rounded corners, stuff like that…” So now that you know what I’m taking about, rather what they’re talking about, we’re gonna go through a little tutorial on how to create these awesome graphics.
For this tutorial we’ll be using a simple lettermark from a chosen font in Adobe Illustrator. Pick a font that has rounded corners. If you can’t find one you can always edit a font of your choosing. You can edit a font by creating outlines and reworking the edges and specific areas you want to smooth or fix.
Step 1: Make 3 copies of your lettermark font. Each one will be used for a specific piece of the logo; background/outline, top-level gradient and bottom-level gradient.
Step 2: Pick a wave type. A wave in this example is the separation of gradients or colors. You can simply use an oval or draw one with the pen tool. Draw your wave or oval over the top half of the lettermark and remove the fill leaving only the outline.
Step 3: “Create Outlines” on your 3 lettermark copies. Clear the fill of one of your lettermarks leaving only the outlines. Overlay the wave making sure that it is above your lettermark. *Note this does not mean on a higher or separate layer in the file.
Step 4: Open the “Pathfinder” pallet (window/pathfinder). Select the outlines of the lettermark and wave together. Select “Intersect Shape Areas” and then “Expand” to clear the bottom half of your lettermark. This will leave you with the outlined top-level gradient piece. As the name implies, the top-level gradient has a gradient! Realistically you do not need a gradient but for this example one will be used… Also because it just looks sweet!
Step 5: Add Gradient (optional). Pick a color combo or gradient you’d like to work with and add it to your lettermark. Remove outlines by selecting no color.
Step 6: Take another of your 3 lettermark copies and add either a compatible gradient or color to the background. Remove the outline on this lettermark as well. This piece is now effectively the bottom-level gradient.
Step 7: Select both edited lettermarks and click on “Horizontally Align Center” as well as “Vertically Align Top” in the Align Pallet. This will center your edited graphics as well as align them to the top ensuring that the top-level and bottom-level gradients stay together and look cohesive. Group your 2 edited lettermarks.
Step 8: Select your final outlined lettermark. Open the “Appearance” Pallet and in the drop-down select “Add New Stroke”. Add 6-9 pixels to the stroke and make the stroke black. Go back to “Appearance” and add another stroke, this time make the stroke white and only half as many pixels.
Step 9: Align the 3rd lettermark with the grouped gradients and distribute them the same way you did with the top and bottom-level gradients. Then send it to the back. This will add the white and black outlines to your gradated top and bottom elements. Adjust the strokes on the background/outline to your liking.
Step 10: (optional) Add any filters or highlight graphics to your lettermark to give it that extra edge and really make it pop!
That’s all there is to it! Rock on with your bad self!
Related Posts:
MIND Development & Design Lancaster PA Web Design and Lancaster PA Web Development is a Web Design and Web Development Solution based in Lancaster PA. MIND Lancaster PA Graphic Design provides logo and branding services as well as Lancaster PA Internet Marketing and Lancaster PA Social Media services.
{ 2 comments… read them below or add one }
Many thanks on the guide! It helped a lot!
I think with the help of this tutorial I can create a really great logo for my new tattoo parlor.