The Golden Rule of SEO
“Think like your customer.” If your company has even the faintest working knowledge of SEO and its best practices, then you have probably heard this statement a thousand times before — and justly so. The key to breaking through to quality rankings in Google SERPs involves thinking like the customers do when they conduct a basic Internet search.
But sometimes thinking like the customer can be a difficult task, especially for those deeply involved in the business. While you may think it’s possible to rid yourself of any recollection of your business, sometimes you might not even be sure what your customers know and don’t know about your products or services. This can make customer engagement a challenging task and make it a lot more difficult to improve your SEO efforts. There are a number of things businesses can do in terms of influencing customer engagement for SEO purposes, but crowdsourcing can be a fun and exciting way to tap into the minds of your target market.
A fairly new concept in the online marketing world, crowdsourcing is the term to describe the act of reaching out to members of the Internet community to contribute to a campaign or project. Crowdsourcing involves appealing to a wider community whose advice and opinions matter most, and it is usually up to the party in question as to whether or not the consumer input is rewarded. Campaigns can take the form of a themed post, a custom landing page, a discussion board or any type of unique, shareable content that fosters a sense of community within the brand.
If this concept is still not ringing a bell, “My Starbucks Idea” is a great example of how crowdsourcing consumer information has produced an interesting marketing campaign.
In 2008, My Starbucks Idea started out as a community website intended to collect suggestions and product feedback from customers, but evolved into something much bigger than that. Unlike most crowdsourcing campaigns that are centered towards improving the business’s products and services, Starbucks created a campaign that instead focuses on the entire customer experience. Ideas have stretched way past the development of better products and entered into the realm of establishing and maintaining Starbucks’ corporate social responsibility. Users are heavily involved in the voting process and have put many well-known ideas into action. That plastic reusable cup you drink your frappe from once originated as a My Starbucks Idea back in 2008.
The power of the crowd is already being utilized by many businesses and is serving as an initiative to replace current customer service models. Crowdsourcing taps right into the core line of support and information for a business’s model: its market. The information can be perceived as honest and invaluable in terms of consumer engagement on a more personal level. And what can be better than getting feedback from the decision makers in your industry?
Okay, So What About SEO?
A recent SEO case study conducted by a photo identification products vendor, ID Wholesaler, took a glimpse into the world of crowdsourcing by creating a unique campaign intended to increase customer engagement for the B2B retailer. Their efforts didn’t stop there; the campaign also aimed at improving various SEO tasks that the company had yet to target including increasing their inbound links and Google SERP rankings.
So what did they do? A lanyard design contest prompted a niche target market (graphic artists, fashion designers, etc.) to submit design entries to a custom landing page that served as the central hub of the campaign efforts. Much like My Starbucks Idea, visitors could submit, view and vote for their favorite entries until a winning design was selected. ID Wholesaler received over 80 entries, 7,000 votes, and nearly 1,000 Facebook “likes” following the campaign launch.
Lanyard Design Contest Custom Landing Page – Source SEO Moz
Although they chose to pay the winning designer, the campaign proved to be well worth the investment. Because the campaign required some initial outreach, the company was able to dig deeper into social networking, an area of online marketing that proved to be an ongoing challenge for the B2B retailer. The campaign spurred a large volume of blog articles written about the contest, as well as a spike in social mentions and inbound links. Crowdsourcing has the potential to turn your online “focus group” into a great source of links back to your site.
Crowdsourcing campaigns can also help your website show an increase in non-paid traffic and rankings, which can be traced through Google Analytics. For ID Solutions, their results were quite eye opening and provided them with fresh information regarding keyword opportunities they were not previously targeting. Keyword variations for the term “lanyard” saw a 90% increase in non-paid traffic and the company jumped to the number 2 position in Google for the search term “ID badge lanyards.”
Ranking History – Source: SEOmoz
If creating a fresh campaign from scratch is too intimidating for you, crowdsourcing can also be as simple as creating an ongoing forum that could be promoted through social networks. A couple intriguing questions is all it takes for decision makers within your industry to want to respond, which can prompt relationship building with industry authority figures, a wider scope of input, more links, more site content and increased brand exposure. If you’re a small restaurateur, decision makers could include a food reviewer or even your local food distributor. Whatever the case, igniting the conversation within key influencers can set you up with the perfect opportunity to understand how viewers interact with your brand, and with a little testing, can point out flaws in your site’s usability and conversion data (Source: .
But Before You Go Crowdsourcing Crazy…
As with anything, there are advantages and disadvantages to crowdsourcing. I think this article from Mashable does a nice job of explaining some key tips for your next campaign, but here are the main things to be cautious of when it comes to crowdsourcing:
Understand that crowdsourcing campaigns involve some type of initial or post-investment.
- People want to be rewarded for good ideas. Don’t damage your brand reputation by just soliciting people for what you want – reward those ideas which you want to make use of!
Set Campaign Rules and Have Them Handy.
- Be very clear about what you’re looking for from your visitors, the time period of the campaign and how/when you will select winners. And make sure to have these rules posted on your site to prevent any disasters from occurring.
Keep It Professional.
- Some call crowdsourcing “a solicitation for free ideas.” However, if you keep your campaign professional and rules clear, there is no reason why your brand cannot foster some interesting conversations to produce a change for a mutual benefit. Your consumers are telling you what they want… what could be easier than that?
Has your company had any experience with a crowdsourcing, or have you participated in one? Please share your thoughts in the comments below.
In this tutorial, we will be making a blue-colored recycling bin icon, however, you can experiment with different colors (shown on the right is a green version).
Step 1: Set Up the New Photoshop Document
The most basic thing we need is a good canvas to work with. Create a new Photoshop document by choosing File > New or pressing Ctrl/Cmd + N whilst in Photoshop.
Step 2: Create the Top Shape of the Recycling Bin
Create a new layer above the default Background layer by choosing Layer > New > Layer or by using the keyboard shortcut Ctrl/Cmd + Shift + N. Use the name, "top" for this layer.
Select the Rounded Rectangle Tool (U) and set its Radius to 10px.
Go to Edit > Transform > Skew. Drag the top left and top right transform controls inward.
Double-click on the "top" layer in the Layers Panel to bring up the Layer Style dialog window. Give the layer a Drop Shadow layer style with an off-white drop shadow color (#fdfcfc).
Also, give the "top" layer a Gradient Overlay going from a light blue (#89bef9) to a slightly lighter blue (#99d9fa), but you should also notice that the Reverse option is selected.
This is how our shape should look like:
Step 3: Give the Top of the Bin a Light Reflection
Make a new layer (we will name it "top-shine"). Use the Rectangular Marquee Tool (M) from the Tools Panel to make a selection within the "top" shape.
Choose the Gradient Tool (G) from the Tools Panel, having the gradient to go from white to transparent, and set the gradient style to Reflected Gradient.
Apply the gradient starting from the center towards the right or left edge of your rectangular marquee selection.
Switch the Blend Mode of the "top-shine" layer to Overlay and Opacity to 23% so that it doesn’t appear too prominent in our icon design.
The shine, as you can see from below, is very subtle but gives our icon a unique surface.
Step 4: Create the Illusion of Depth
We will now make it look like our recycling bin’s opening is hollow. Create new shape layer at the center of our "top" shape using the Rounded Rectangle Tool (U) and Edit > Transform > Skew as we’ve done before; rename this shape layer "top-depth" so that we are maintaining our Photoshop file’s organization.
Tip: Alternatively, you can duplicate the "top" layer and resize the duplicated layer down using Edit > Transform > Scale.
Give the new shape a Drop Shadow and a Gradient Overlay layer style.
The drop shadow color should be white (#ffffff).
Have the gradient go from a light blue (#61a0dc) to a slightly darker blue (#4b84be), but you should also notice that the Reverse option is selected.
As you can see from below, the layer styles give the top of our recycling bin an illusion that it is lower than the bigger rounded rectangle surrounding it.
Step 5: Organize Your Layers
Housekeeping time: Click on the Create new layer group icon ( it looks like a folder) at the bottom of the Layers Panel.
Drag every layer created until now — except the Background layer — into this group. Collapse this group by clicking on the small triangle icon just on the left of the folder thumbnail so that its more compact in our Layers Panel.
Name the layer group as "top".
Step 6: Draw the Front Shape of the Recycling Bin
Now, in the Layers Panel, click on the Background layer to position your work correctly in the layer stacking order. Make a shape for the front of the recycling bin (let us name this shape layer as "front").
You can use the same Rounded Rectangle Tool and Skew Transform process that we used for the top of the recycling bin, but this time, when you are skewing it, you will pull in the bottom transform controls towards the middle.
Step 7: Give the Front of the Recycling Bin Some Color
To give the front of our recycling bin its color, we will use a Gradient Overlay layer style.
The front of our bin should now have consistent coloring with its top.
Step 8: Shade the Right Edge of the Recycling Bin
Make a new shape (you can name this shape layer as "side-shade") towards the right of the icon.
Color the shade appropriately using a Color Overlay layer style, using a darker blue color (#1f456f).
With the "side-shade" layer selected in the Layers Panel, give the layer a layer mask by clicking on the Add layer mask icon at the bottom of the panel.
If done correctly, you’ll see that the "side-shade" layer will look like the following image.
Now take the Gradient Tool (G) and set its options so that the gradient goes from white to black and the gradient style is set to Linear Gradient. Apply the gradient as shown below (indicated by the red arrow).
This should result in giving the right side of the recycling bin an effect of being curved.
Reduce the prominence of the shading by lowering the layer’s Opacity to 29%.
Step 9: Shade the Left Edge of the Recycling Bin
Duplicate the "side-shade" layer by pressing Ctrl/Cmd + J while the layer is the active layer in the Layers Panel or by choosing Layer > Duplicate Layer in the main menu.
Flip the duplicated layer horizontally by going to Edit > Transform > Flip Horizontal.
Move the duplicated shading to the leftmost edge using the Move Tool (V).
Step 10: Create Light Reflections
Let us give our icon a radial light reflection to make its surface even more interesting. Create a new layer (you can name it "front-light"), and in this newly-created layer, you can use the Elliptical Marquee Tool (M) and Fill command (Ctrl/Cmd + F5) to make a white half-circle shape located at the center of our bin.
Soften the edges of the half-circle by giving its layer a Gaussian Blur; do this by choosing Filter > Blur > Gaussian Blur and setting the Radius option of the blur filter to about 18.6px.
As you can see below, we will need to correct the light reflection so that it doesn’t go on the brim.
Remove the excess light reflections at the top by selecting them with the Rectangular Marquee Tool and pressing Delete to remove the selected area.
Let the light reflection blend better by switching the layer’s Blend Mode to Overlay and lowering the Opacity to about 67%.
Step 11: Add the Recycling Symbol
Pick the Custom Shape Tool (U) from the Tools Panel. For its Shape option, find "Recycle 2" which comes with Photoshop CS versions by default (it is in the "Symbol" set of custom shapes).
Draw the custom shape at the center of our recycling bin.
Step 12: Style the Recycling Symbol
Style the recycling shape layer by giving it a drop shadow, inner shadow, and gradient overlay layer styles.
Set the drop shadow color to a blue (#3c6a99).
The inner shadow color should be white (#ffffff).
Finally, the gradient overlay colors should be from baby blue (#bee4f9) to white (#ffffff).
The three layer styles gives the symbol some harmony with the rest of our icon’s design.
Before moving on, let us organize our work by grouping all the "front" layers into a layer group called "front". The "front" layer group should be between the Background layer and the "top" layer group.
Step 13: Draw a Crumpled Piece of Paper Shape
We will now draw a crumpled piece of paper that has been tossed into our recycling bin. Above the "top" layer group, create a new layer (let us name this layer as "paper").
On this new layer, you can utilize the Polygonal Lasso Tool, the Pen Tool, or any of your favorite freehand drawing tools to create a random white-colored shape, as shown below.
Step 14: Style the Crumpled Paper Shape
Give the piece of paper a Drop Shadow layer style and Stroke layer style.
The drop shadow color should be black (#000000) and its Opacity lowered to around 10%.
Respectively, the stroke color should also be black (#000000).
The layer styles give our piece of paper some base definitions.
Step 15: Draw Details on the Crumpled Paper Shape
To add creases to the paper, create a new layer (name it "paper-shade1") and draw black shapes along some of its edges.
Lower the opacity of the "paper-shade1" layer to around 14%. This should result in giving the piece of paper some subtle depth and definitions.
To add more creases, just create a new layer (let us name this one "paper-shade2") and draw more black shapes.
Reduce the Opacity to around 4%. Adding the crease shades on different layers and lowering the opacity to a another value gives our details random nuances that make the piece of paper look more realistic.
Step 16: Make More Pieces of Paper
First, let us organize our PSD by making a new layer group for our crumpled pieces of paper. We can call this group something intuitive like "paper". Drag all layers associated to the piece of paper we just made into this new layer group.
Next, duplicate this layer group (Layer > Duplicate Group) to make another piece of paper.
Move the new piece of paper away from the first one using the Move Tool (V).
Make another piece of paper using the same technique.
Add variance to the pieces of paper so that they don’t look identical using the Free Transform command (Edit > Free Transform). You can rotate them, change their sizes, and so forth.
We will change the angle of the middle piece of paper to 45o. Select its layer group in the Layers Panel, choose Edit > Transform > Rotate, and in the Options Bar, set the Rotate option to 45o.
Create as many pieces of paper as you want, experiment with angles, sizes, and layer stacking order. The goal is to make the pieces of crumpled paper varied so that our icon mimics a real recycling bin.
You can also add pieces of paper outside of the recycling bin to make it look full.
Step 17: Make our Recycling Bin Look Semitransparent
Let’s make our bin look as if we can see inside it slightly. If you don’t want to do this, that is fine — consider this as an optional step. Start by selecting all the "paper" layer groups — except the pieces of paper that are laying on the floor — in the Layers Panel. Duplicate them by right-clicking in the Layers Panel and choosing Duplicate Layers from the contextual menu that appears.
Merge the duplicated layers by right-clicking in the Layers Panel again and choosing Merge Layers.
Duplicate, transform, and so forth so that you end up with something like the image below. We want to make it look like our bin is filled to the brim.
Merge these layers (select them in the Layers Panel and press Ctrl/Cmd + E) and name the merged layer as "translucent-property".
Add a layer mask on the "translucent-property" layer, then use the Gradient Tool to create a black to white gradient on the layer mask.
Doing so will fade the layer towards the bottom of our recycling bin.
Step 18: Add Shadows to the Pieces of Paper
We need to add some additional shadows to the pieces of paper. Create a new layer called "extra-shadow", and on this new layer, draw black shapes on the papers’ edges.
Set the Opacity of the layer to 10% to soften the drop shadow.
Perform some organizational tasks by making a new layer group called "papers" and dragging the respective layers and layer groups inside of it.
Step 19: Give the Recycling Bin a Shadow at the Bottom
Let us create a shadow being casted on the floor by the recycling bin. Create a new layer (name it "main-shadow") just above the Background layer.
Use the Rounded Rectangle Tool (U) to draw a rounded corner square behind the bin.
Apply a Gaussian Blur filter to soften the edges of the rounded corner square, using a Radius between 18-19px.
Using the Free Transform command (Ctrl/Cmd + T) like before, squeeze this shape so that it looks like the following image.
Use Skew Transform so that its angle is consistent with the Recycling Bin’s shape.
Step 20: Paint Shadows for the Pieces of Paper on the Floor
We should add some shadows on the pieces of paper that are on the floor so that our icon’s lighting is accurate and consistent. First, create a new layer (name it "paper-shadow") above the recycling bin’s shadow layer (which we had named "main-shadow").
Use the Brush Tool (B) with a soft black brush tip and Master Diameter that is around 65px.
Click once on your canvas to produce a circular brush stroke.
Use Free Transform to squeeze it down and make it look like the shadow of the pieces of paper on the floor. Position it at the bottom of the pieces of paper using the Move Tool (V).
Duplicate the "paper-shadow" layer and scale it down using Free Transform. Position it below the other piece of paper using the Move Tool (V). Having two layers for the shadow makes the depth of our piece as accurate as possible.
Step 21: Add a Window Light Reflection
Let’s give our work some subtle details. We are coming to the final steps of our icon design.
First, we’ll make a light reflection on the top left corner. Create a new layer named "reflection". Use the Polygonal Lasso Tool (L) to draw an uneven polygonal selection. Note that you want this new layer to be at the very top of the layer stacking order.
Next, apply a white to transparent gradient using the Gradient Tool (G).
Let’s say that the light source is coming through a window pane. Make a selection that looks like a cross (using Polygonal Lasso Tool), representing the window’s frame.
Then, just hit Delete to remove parts of the light reflection underneath the cross selection.
Change the Blend Mode of the "reflection" layer to Overlay and also lower the Opacity to around 35%.
Step 22: Add More Creases to the Pieces of Paper
We should give our pieces of paper some more details by adding creases to them. Create a new layer (let us name this layer "crumples"). On the new layer, draw black shapes around the edges as shown below.
Reduce the opacity of this layer to around 10%. Doing this gives our pieces of paper some subtle definitions.
Step 23: Add a Light Reflection at the Recycling Bin’s Edge
To finish our work, we will be adding a light reflection at the edge of the bin’s opening. This process will give our surface an even more interesting design element, as well as draw the viewer’s eyes towards middle of the icon. Create a new layer (we can call this layer "add-shine"). Use the Brush Tool (B) with a white, soft brush tip sized at about 45px. Click once in the center (towards the top) to paint in the light reflection.
Set the Opacity of this layer to 60%.
You’re done! In this tutorial, we used fundamental Photoshop tools such as the Rounded Rectangle Tool, the Custom Shape Tool and the Gradient Tool, as well as basic commands such as Free Transform and Skew Transform to draw a recycling bin icon from scratch.
You can modify your layer styles to make the color of your recycling bin different. Below, you can see that I modified the color to green.
Download Source Files
- recyling_bin_icon (ZIP, 0.51 MB)
Click the preview image below to see the piece in full scale.
- PSD: Sofa PSD by GhostFight3r
- (Optional) EPS: illustrious.eps by Eric Vasquez (that’s me)
- Font: A script font (find your favorite from this list)
Step 1: Create a New Illustrator Document
First, we are going to create a new Illustrator document, and this can really be any size you want it to be since vector graphics are scalable, but for the purposes of this tutorial, I have used 8×8 inches.
Next, I used a font called Adorable Illusion (which is hard to find nowadays), to type out the word “Illustrious” on the artboard using the Type Tool (T); we want the font to be quite large as we can always reduce the size later if we need to.
You can find a list of similar-looking script fonts at Font Squirrel free for download if you don’t have the font I used. Alternatively, just use a script/cursive font that you already have installed.
You could also type out any word other than “Illustrious” and use any typeface that you want, but I really like the cursive/script typeface for what we will be creating. In addition, the cursive L and S shapes work well when using these techniques.
Step 2: Create Outlines
What we want to do next is create outlines from our text so that we can control the positioning of each letter individually. To do this, select your text with the Selection Tool (V) and go to Type > Create Outlines (or you could use the shortcut Shift + Cmd/Ctrl + O).
Step 3: Manual Kerning
Since we now have our outlined letters, we can select each one individually and move them around however we would like. To do that, we would have to ungroup the text by selecting it with the Selection Tool and then choosing Object > Ungroup (Shift + Ctrl/Cmd + G).
To achieve the desired result, we want to move each of these letters closer and later on join them together so that our text becomes one continuous shape.
Use the following image as a guide and try to match it as best as you can.
Step 4: Bringing it Together
Once we have the letters almost touching, we will be using the Pen Tool (P) to join the letters together. If you are familiar with this tool, this step should be quite easy for you. If not, I would recommend checking out some of the great tutorials on the Web for using the Pen Tool (P) as it’s one of the most important tools in Illustrator.
The idea is to select a black fill with no outline, and try to follow along with the natural curvature of the script typeface to join the letterforms together.
You can click an anchor point with the Pen Tool (P), and then after selecting another point, you can control the shape and size of the curve by holding down on the point before releasing the mouse.
We can now save our document either as an Illustrator file or as an EPS as we will be using this later on.
For your convenience, or just in case you have some difficulties with the Pen Tool (P), I have provided the final EPS file in the Tutorial Resources listing above so that you can use this rather than doing the previous steps up to this point.
Tip: I would strongly encourage you to experiment on your own and try to become familiar with the Pen Tool (P), if you’re not already familiar with it.
Step 5: Jumping Over to Photoshop
Now that we have prepared the text that we will be using, we can begin to set up our Photoshop document.
Open up the Sofa PSD (our backdrop for our text) mentioned in the Tutorial Resources listing above so we can begin customizing this for our tutorial.
Step 6: Deactivating Some Layers
Once the Sofa PSD file is open, we want to turn off a few of its layers.
I have circled the three layers that we want to turn off.
This would be a good time to save the file in case you haven’t already. You can save over it, or do a File > Save As to preserve the original; completely up to you.
Step 7: More Tweaking of the PSD
Next, we want to take three layers (“Layer 6”, Hue/Saturation Adjustment Layer, and “Texture 3”) and bring them all up the layer stacking order in the Layers Panel so that they are above the “Wall” layer group.
Next, we will desaturate the texture layer by double-clicking on the Hue/Saturation adjustment layer.
Once the adjustment layer dialog window opens up, we will drag the middle saturation slider all the way to the left to desaturate this layer.
Step 8: Stripping the Wallpaper
You will notice now that some of the textured wallpaper layer is actually overlapping the floor underneath the wooden trim.
To rectify this, we will want to select parts of the “Texture 3” layer with the Rectangular Marquee Tool (M). Select the area that is overlapping and simply press Delete to remove the selected area.
Step 9: Working on the Trim
Looking at our piece now, the couch and the trim along the floor are the highest contrast points in our work. We want to tone this down a bit so that the “Illustrious” text will stand out the most.
We will now select “layer 10” from the Layers Panel (circled in red) and go to Image > Adjustments > Hue/Saturation.
Next, we will once again drag the middle slider to the left, only to about -55.
Step 10: Lower the Opacity
On the “Texture 3” layer with the wallpaper, we’re going to lower the opacity down to about 50%.
Step 11: Brand New Sofa
Next, expand the “Sofa” layer group in the Layers Panel to see all the layers within the folder.
You will notice that there are several layers inside of this folder, including a Hue/Saturation adjustment layer.
Double-click on the Hue/Saturation adjustment layer and slide the Saturation slider to -90 and the Lightness slider to -75.
Step 12: Ready to Airbrush!
Up to this point, we have been mostly preparing and modifying the files. We can now flatten the image and save it. The quickest way to flatten the image (if you weren’t sure of how to do this before) is to right-click on a layer and choose Flatten Image from the menu. There’s also the Layers Panel menu at the top (by the Opacity option) that’s indicated with a downward-pointing arrow; when you click on this, you will be presented with numerous commands, including Flatten Image.
Step 13: Very Smart Object
Now we are going to open up the EPS file we created earlier in Illustrator (illustrious.eps) and simply select the text with the Selection Tool (V).
Once you have selected your text, press Cmd/Ctrl + C to copy the text. Head back over to Photoshop and press Cmd/Ctrl + V to paste the copied text into the Photoshop document. When you paste the text into Photoshop, you will be prompted by the Paste dialog window, which asks you if you want to paste the object as a Smart Object–say OK.
You should now have the vector shape pasted just above the flattened image of the sofa.
Step 14: Color Me Bad
For the next step, we are going to begin coloring in our text by selecting a solid base color. To do this, double-click on the vector object layer in the Layers Panel and open up the Layer Styles dialog window.
Choose Color Overlay, click on the small color swatch in the Color Overlay’s options, and then set the color overlay color to a bright, neon-ish green (#8aff00).
At this point, we are going to want to save our work to prepare for the next step where the real fun begins. Checkpoint: your work should look like the image below.
Step 15: Stay Inside the Lines!
Next, we are going to begin airbrushing the letters by first adding in some highlights. To do this, select a mid-sized, soft round brush from the Brushes Panel (press F5 if you don’t see the panel) and lower the Opacity option of the brush down to about 20%.
After that, make sure you have a solid white Foreground color for the brush.
Now, hold down Cmd or Ctrl and click on the Smart Object layer that contains our text. You should now have those marching ants around the text, indicating that you have selected around it.
Create a new layer just above our text, while still keeping the selection active (if you accidentally deselected, just issue a Reselect command using Shift + Ctrl/Cmd + D).
Begin brushing on the new layer along the edges of some of the letters. By brushing along the edges, you should start to get some nice, smooth highlights indicating a light source. And by having the text selected, you can ensure that all of your brushwork stays inside the marching ants–just like a coloring book!
Don’t worry too much about how far in you go with the highlights at this point, as we can always erase some of it later. The main goal is to just get a feel for the technique. (and to have fun, of course).
Step 16: Moving Along
Now at this point, I have continued working with a low-opacity brush and just trying to imagine that the outermost parts of our letters are a bit thinner as they taper off–this is where we would notice light shining through, almost as if it’s behind the letters.
By the way, I do this with a mouse and not a graphics tablet, which can be a bit tricky at times (more so if you’re naturally left-handed). If you have a graphics tablet, I would highly recommend using it because this process–with a tablet–should be easier.
Step 17: Checkpoint
After working on this for a bit longer, you can now see the highlights on the entire word. You will also notice that I’ve added highlights along the bottom curves of the joined letters as well. By playing around with this, and maybe erasing some parts with a low-opacity eraser, you can start to see where this is going. I encourage you to experiment with this as it can be quite fun.
The arrows serve as an indicator to show the suggested direction of the light source.
Step 18: On to the Next One
Before moving on to the next step, name the layer we just completed as “Highlights” just to keep things organized. Now, create a new layer above this “Highlights” layer and call it “Shadows”.
We will be using a similar technique to what we used in the previous steps, but rather than using a solid white color, we will use something that is just a few shades darker than our original green color (#8aff00). I have selected #559d00 as it seems like a good, slightly darker shade of green.
The reason we don’t want to go too dark is that we want the shading to be subtle and gradual to make a more believable shift in color value.
Step 19: In the Shadows
Using this darker shade of green, we will again hold down the Cmd/Ctrl and then click on our smart object layer to make a selection around the object with the original text. And after we have the active selection made, go on the “Shadows” layer and begin brushing inside of the letters to add subtle shadows.
You may not notice a huge difference at first, but by turning this layer on and off, you can see the difference between having the shadows, and not having them. At this point, I would recommend saving your work once again–just to be safe.
Step 20: Extra Shadows
Once you have saved your work, create one more layer on top of the previous “Shadows” layer and call this one “Extra Shadows”. Just as the name of the new layer implies, we are going to want to add one additional layer of even darker shading. Using the same soft brush, pick a slightly darker shade of green (#498601) and repeat the same technique that we used in the previous step when applying these shadows. This will help in adding a bit more variation and depth to the letterforms.
Step 21: Add an Outer Glow Layer Style
Now what we will do is double-click on the Smart Object layer to bring up the Layer Styles dialog window so that we can add an Outer Glow layer style. For the color of the glow, use a bright green (#88f05a) and apply the settings shown in the image below.
This layer style will help to add a bit of a diffused fuzziness around the letters and can also help them appear softer and more rounded.
Step 22: Add a Drop Shadow Layer Style
Next, we will add a bit more styling from the Layer Styles dialog window. Check off Drop Shadow to apply this layer style, and use the color #012c03, which is a very dark shade of green (close to black). Apply the settings shown below in the image and click OK to apply both the glow and the shadow.
Step 23: Almost There!
You should now have something that looks like the image below. We are close to finishing this up and only have a few more steps to get through, so let’s keep going! Check your work against mine:
Step 24: Grouping the Type
Next up, we are going to group the Smart Object along with the highlights and shadows that we have added by placing them in a layer group. One way to do this is to click on the small folder icon at the bottom of the Layers Panel next to the Add new layer icon. Drag it up the layer stack to the very top and also name the layer group as “Type”.
Now that we have this layer group created, simply drag the layers related to the text into the group. By doing this, we can move the type and all of the highlights/shadows around just by moving the layer group.
Step 25: Reduce and Angle
Now that we have our type all grouped nicely together inside of the “Type” layer group, we are going to select the folder in the Layers Panel and drag it down to the new layer icon to make a copy of the group and all of the layers contained within.
Once you have a copy of the group, click the small “eye” icon to turn off the visibility of the original group.
Click on the newer copy of the “Type” layer group in the Layers Panel folder that we just duplicated and then press Ctrl/Cmd + T to enter Free Transform command (or choose Edit > Free Transform).
While holding down Shift to keep the dimensions proportional, reduce the size of the type so it becomes a bit smaller.
Also, angle the type a bit more so that the right of it is pointing upwards. This will make the type a bit more dynamic rather than having it sit perfectly straight across the sofa. Until now, we have left it straight so that we could airbrush the highlights and shadows easier (it would be more difficult to do them with angled type).
Once you’re happy with your free transformations, just press Enter to commit the changes.
Step 26: Reflected Light
Next, create a new layer just above the Background layer and underneath both “Type” layer groups.
Choose a light green color (#6bff67) and pick the Gradient Tool (G) from the Tools Panel.
Choose a radial gradient that fades from the solid green color we have just picked to completely transparent (set these options in the Options Bar of the Gradient Tool).
On the new layer we have created, click and drag from the center and outwards to create the radial gradient.
Change the Blend Mode of this layer to Overlay and position it behind some of the first few letters so that it appears to be ambient light reflecting on the cushions of the couch.
Duplicate this layer a few times and spread them out behind the letters to enhance the effect.
Step 27: Merging the Layers
Select the topmost gradient layer that you have created in the previous step and while holding Shift, select the very bottom gradient. This should select all of the radial gradient layers that you made. Just press Shift + E to merge them down to one layer, just like we did earlier in the tutorial.
Note: Once you merge the layers, you will have to once again change the blending mode of the merged layer to Overlay.
Step 28: Enhancing the Light
Alright, final step! Now that we’ve merged the gradients that created the ambient light, duplicate that layer one more time by pressing Cmd/Ctrl + J while it’s selected in the Layers Panel.
Next, lower the opacity of the duplicated layer to about 50%.
As a finishing touch, grab the Eraser Tool (E) and use a low-opacity setting with a round soft brush selected. With the Eraser Tool, erase some of the reflected light spilling on the wallpaper so that it doesn’t look quite as harsh and prominent; we just want to tone this down a bit to keep the focus on the type and the couch.
You have successfully completed this tutorial! We’ve covered quite a lot, but I hope that you have found some useful tips from this that you can use in some of your own work.
Airbrushing can take a bit of time to get down, but as they say, it’s not so much the destination as it is the journey getting there.
Download Source Files
- illustrious_type_airbrushing (ZIP, 12.8 MB)
Step 1: Create an artboard in Illustrator
Create a new document (Cmd/Ctrl + N) and use the settings below.
Step 2: Place the sketch in and make it into a template
Go to File > Place and place your sketch into the artboard. If you want, you can use my original sketch for the purpose of following along this tutorial. I must warn you, though, that it was a very rough sketch and scan (download it here, if you must).
Select your sketch template.
Double-click on the layer with the placed file and use the settings specified below to make this layer into a template.
Step 3: Create a new layer for base shapes
Create a new layer and name it "Base Shapes". This will keep our work orderly. This layer will contain the basic shapes and drawings of our vector illustration.
Step 4: Start making base shapes
Select the Ellipse Tool (L) to start drawing our base shapes.
Using your sketch template as a reference, create an ellipse for the head, and then, the pencil.
To make the base cylinder shape, duplicate the oval, Shift-drag downward, then create a rectangle that perfectly aligns with the duplicate ovals. Copy this shape, and then on the copy, apply the Combine pathfinder command on it. The reason you have to have a duplicate is that later on we will be using elements from the one that is not committed by the pathfinder.
The Pathfinder Panel can be turned on using the Window menu item.
Step 5: Elongating the cylinder
We need to stretch the cylinder and make it taller. We will utilize the Direct Selection Tool (A) to do this.
Duplicate the cylinder shape. Select the top three anchor points with the Direct Selection Tool and Shift-drag upwards to elongate the base cylinder shape.
Step 6: Making the rim detail
To make the rim detail, use the small cylinder shape from the previous step and the oval from the base shapes step.
Align these two shapes horizontally and vertically using Align Objects commands.
Divide these shapes using the Divide pathfinder command.
Once divided, you can then use the Group Selection Tool to pull apart the pieces.
The shapes below are the basis for the character’s head.
Step 7: Drawing the base shape for the head
To make the base head of the character (the eraser part of the pencil), get the elongated cylinder shape and oval.
Align these two shapes in the middle and top edges.
Ensure that the oval is on top by selecting it and bringing it to front (Object > Arrange > Bring to Front).
Step 8: Combining the head and rim
So far, you should have the elements below. We’ll now start to put them together.
First, select the elongated base head and group it. Then ungroup the rim elements and select the bottom rim. Select these two elements and align them to the bottom edge using the Vertical Align Bottom command in the Align Panel.
With the Scale Tool (S), click once on the bottom edge of the lower rim and scale it up a little bit.
Duplicate this scaled rim (Shift + Opt/Alt-Drag upward) and reflect it (Object > Transform > Reflect).
Send the reflected rim to the back (Object > Arrange > Send to Back).
And there you go—everything is shaping up nicely.
Step 9: Add details on the rim
Duplicate the most recent rim detail twice from the previous step (Shift + Opt/Alt-Drag downwards).
Select these two shapes and use the Intersect command in the Pathfinder Panel.
Step 10: Use Offset Path on the detail
We will continue to shape our eraser by giving it another ridge that seems to be on a higher plane than the current rim. We’ll do this by offsetting the shape to create a different-sized, smaller copy of it (Object > Path > Offset Path).
Use these Offset settings on this shape.
Align the offset shape to the rim; a handy way to do this is by selecting those two shapes and clicking once again on the base rim. Doing this tells Illustrator that the base rim is the key object. When you align, only the offset detail will move and align with the base rim.
Step 11: Making the body of the character
With our eraser taking shape, lets now move onto the body of our character—the shaft of the pencil. Create a rectangle in the same width as the base head (not the rim).
Select the two bottom anchor points of this shape. Shift-drag them downwards and scale inwards. Ensure proportions of this shape are relative to your sketch template.
Now create four perfect squares next to each other by using the Rectangle Tool and holding down Shift. Duplicate your first square by Shift + Opt/Alt-dragging once, and then pressing Cmd/Ctrl + D two times. This will give you the result shown below.
Group (Cmd/Ctrl + G) the four squares and send them back.
Select the two elements shown below and then go to Object > Envelope Distort > Make with Top Object.
Once you have applied the Envelope Distort, select and expand it.
Step 12: Create a new Art Brush
After you expand the shape, make it into an Art Brush. You do this by dragging the element into the Brushes Panel. A dialogue box will ask you what kind of brush you want—specify New Art Brush.
Step 13: Apply the new Art Brush on the character’s body
Make a path with the Pen Tool (P) to follow. It helps if you refer to the sketch template when doing this.
Step 14: Apply the new Art Brush
Apply the Art Brush made in the previous step and expand its appearance, Object > Expand Appearance.
Afterwards, make sure this element is sent to the back.
Step 15: Draw the pencil tip
Create a half "u/v" shape with the Pen Tool (P), shaped like the tip of a pencil.
Next, select the shape and then reflect it (Object > Transform > Reflect).
Then join the two bottom anchor points with each other by selecting them and then hitting Cmd/Ctrl + J. Repeat this for the top anchor points.
Send this shape behind the body using the Object > Arrange command. Then use scale and rotate tools to make the edges the same size and align.
To make the lead of the pencil, copy and paste in front of the wood shape. So, now you have two of the same shape on top of one another.
Now, make a circle with the Ellipse Tool and intersect it with the frontal wood shape.
Step 16: Making the mouth of the character
Alright, now that we have the basic shape of our character, we’ll start on its detailing. First up is the face of our character, which will be on the eraser. Start off with a circle using the Ellipse Tool, delete the topmost anchor point with the Direct Selection Tool (A).
Refine the mouth shape with the Path Eraser Tool (hidden behind the Pencil Tool).
Thicken the stroke and round off the edge of the path in the Stroke Panel.
Expand the path (Object > Expand).
Step 17: Create the teeth of the character
Create the teeth of the character by making a duplicate of the shape and applying a negative offset value to it. When adding an Offset Path effect, make sure the path does not have a stroke or else you will get odd results. Also, Offset Path requires the shape’s appearance to be expanded (Object > Expand Appearance) after its application to commit it and allow us to work with it.
Step 18: Make the eyes of our character
With the Line Segment Tool (\), create a diagonal line by Shift-dragging in a diagonal motion; holding down Shift ensures that you are creating a diagonal line with a 45-degree angle.
Now reflect a copy of the diagonal line. Thicken and round off edges like with did for the mouth of our character. Also, expand this shape and then combine the expanded shape using the Combine command in the Pathfinder Panel.
Afterwards, draw a perfect circle around the "X" shape by Shift-dragging using the Ellipse Tool.
To finish off the eyeball, send it to the back.
And there you have it, an eyeball with a cross as the pupil.
Step 19: Place and tweak characteristics
Group the eye and mouth and then tweak them with the Group Selection Tool. Afterwards, position the pieces on top of our eraser using the Selection Tool (V).
Step 20: Make the paper base
We will make it look like our pencil is writing on a piece of paper; the paper serves as the base of our shape. Make a narrow "C" shape with the Pen Tool and then Shift-drag to duplicate it.
Join the bottom and top anchor points of the "C" shape with each other using Pathfinder commands.
You should now have a paper fold shape.
Create a rectangle that perfectly aligns to the bottom edge of the paper fold.
Select the bottom two anchor points of this rectangle and drag it up over the top edge of the paper fold. Ensure this shape is behind the paper fold.
While the anchor points are still selected, move them so that the rectangle looks skewed, giving the illusion of the paper being seen on an angle in 3D space.
Step 21: Color in the artwork
Artwork can be colored easily with the Eyedropper Tool (I) and the Color and Swatches Panels open. (I discuss this simple coloring technique in greater detail in my previous illustration tutorial.)
In the Color Panel, specify a stroke and fill color; you could also use the Swatches Panel. I recommend docking these two panels when you are coloring artwork for convenience, and hiding them when you’re doing line work to give you more space in your monitor screen.
Once you specify a fill and stroke, press Opt/Alt and click on closed paths to give them desired colors, gradient, and/or patterns.
Step 22: Adding detail to your artwork
With the Knife Tool, split the lead into four closed paths.
Double-click on the base paper to enter Isolation mode. Within Isolation mode, create a path drawn by the character with the Pen/Pencil Tool.
On top of the path, create lines (with no stroke or fill) that split the bottom shape into four sections. Select these elements use the Divide command in Pathfinder on them—this will cut the bottom shape into four separate closed paths.
With the Direct Selection Tool, copy the base paper rectangle and paste in front of the drawn path.
Select the drawn path and the frontal shape and make a clipping mask via Object > Clipping Mask > Make.
Select the clipping path with the Selection Tool (V) and apply the Divide command again (in Pathfinder).
Step 23: A technique for adding highlight and shadows
When adding highlights/shadow details, it’s better to keep it only as a fill.
With the Pen Tool, I created a highlight shape on the rim.
Clean up the highlight detail by copying and pasting in front of the highlight shape of the offset rim detail shape and then removing its fill.
Repeat this step as desired and see your character come to life!
In this tutorial, I have shown you different ways to illustrate a cartoon character based off a scanned-in sketch. We applied various Pathfinder commands, shape tools, transformation commands, and other basic and non-complicated Illustrator features to create a vector character.
I hope that through this tutorial, you can see that many of Illustrator’s power lies within its basic shapes and transformation tools, and you should try to explore their potential in helping you convert your sketches to digital vector art.
Happy Illustrating! Show us your own vector drawings by adding it to the Design Instruct Flickr group pool.
Download Tutorial Source Files
- vector_pencil_character (ZIP, 0.06 MB)
Traditional advertising grew out of the old distribution model.
Companies made their product, sold it to stores where people buy the product, and those stores sold it to the consumer. This worked for everything from toothbrushes to televisions.
Then these huge companies wanted to increase sales of their product. Since all of the competition is right on the shelf, they needed to differentiate themselves from the other products.
One way was price: sell the lowest price product. But the better way, and a longer term solution, was branding.