Web 2.0 Logo Reflection in Vector format with Illustrator

You will probably find dozens, if not hundreds of tutorials on how to do this in Photoshop, but I’m going to show you how to do it in Illustrator (vector). The advantage? You can scale it up for a roadside billboard if you like. That’s the power of vector graphics. All you have to do is make it once and you can change the size as many times as you like, without losing quality. I’m tempted to say that this (logo reflection) effect might actually be easier to do in Illustrator in the first place. Man, the web is definitely a creature that likes to follow trends. Let’s break one shall we? . . .

.

To get started, Open your vector logo in Illustrator. I’m using the BittBox logo as an example, which has a dark background, but using the method I’m about to show you, background color isn’t a factor. Here is what my Illustrator file looks like when I start: (vector logo on a flat color background)

This is what it looks like selected:

First, make a duplicate of your logo by holding the “option/alt” AND “shift” keys, drag down, and release. Using this method allows you to keep your duplicate aligned exactly to the original. If you simply copy and paste, you will have to re-align the two logos.

Coloring and Line Work in Illustrator CS5 (best of Vec.Tutplus)

Final Product What You'll Be Creating


Do a search on “coloring comics,” and you get dozens of Photoshop tutorials. They all seem to involve building up areas of color with transparent brushes. Now you can achieve that same effect with Illustrator CS5, using the Bristle Brush.



Unlike Photoshop, however, Illustrator gives you the flexibility to edit individual paths. Since Illustrator’s brush strokes are vector, you can change the shape, width, color and blending mode to achieve exactly the look you want. You can even delete a brush stroke you don’t want. Try that, Photoshop! This tutorial will use another feature introduced in CS5, Draw Inside. Let’s get started!







--------------------------------------------------------------------------------



Step 1

You can use this technique with any line art or illustration. I am going to quickly create my line art by tracing a source photo from Wikimedia Commons, photo by Guillaume Piolle.



Place the photo in your document and make a Template layer by double-clicking the layer name to bring up its options. The Template layer will be locked by default. Make a new layer for the line work.





--------------------------------------------------------------------------------



Step 2

To create the line art, use the “Tapered Strokes” brush from the default set. You can adjust the brush settings by double-clicking the Brush Tool to bring up its options. This is a matter of personal preference; experiment until you find a setting that works for you. I prefer to set the brush so that the paths confirm fairly closely to my strokes, but don’t end up with too many points.



Using the photo to trace, paint the outline with black strokes. Stick to the major shapes and lines — don’t worry about the shadows or any of the highlights. Once you have the line work done, it should look something like the image below. You can edit individual paths, and add or delete strokes as you see fit.





--------------------------------------------------------------------------------



Step 3

Now you’ll do the modeling with the Bristle Brush. Lock the line work layer and create a new one below it.



In order to get the most out of the Bristle Brush, it’s best to understand its settings. I’ll add a detailed explanation of each setting at the end of this tutorial for reference.



It’s also important to note that to get the full benefit of the Bristle Brush, you must use a Wacom Intuous 3 or higher tablet and a 6D Art pen. The tablet and pen combination will respond to tilt, bearing, rotation, and pressure. A mouse alone will only respond to movement, but will still work fine for this tutorial.



To create a new bristle brush click the new brush icon on the brushes panel. Choose Bristle Brush, which will bring up its options. There are tons of possibilities with a Bristle Brush, but to start, choose Flat Angle as the shape, and increase the size to 5mm. Leave the other settings as they are, with the exception of the Opacity. Set it low, to about 30%.





--------------------------------------------------------------------------------



Step 4

Using the Pen Tool, outline a flat area of shadow on the artwork. Here, I’ve drawn around the top lip. Select the shape and then choose Draw Inside at the bottom of the tool panel. Dotted-line brackets will appear around the shape, letting you know that you’re in Draw Inside mode. You can deselect the shape, but the brackets will remain.





--------------------------------------------------------------------------------



Step 5

Choose a warm gray for the stroke color. I’ve used some swatches from the “Neutral” library, which can be accessed by clicking the Swatch Libraries Menu icon on the bottom left of the Swatches panel.



If you didn’t deselect the lip shape in the previous step, it may frustrate you to see that it now has the stroke color you just picked. This can be really annoying, but you just have to remember to deselect the shape. The dotted-line brackets indicate that the shape is still in Draw Inside mode.





--------------------------------------------------------------------------------



Step 6

You may wish to turn off the photo layer, or move the photo to the side so you can use it as a reference. Now just start drawing strokes inside the lip shape. Depending on your Opacity setting, it may be hard to see a single stroke. You may also want to increase the brush size in the Strokes panel for wider swaths of color.



Keep painting and building up color and texture. Note that different brush strokes will interact in this way, but if you just use one brush and scrub back and forth, it won’t build up. In other words, a single brush stroke does not interact with itself, so deselect the existing strokes and paint new ones to layer the color.





--------------------------------------------------------------------------------



Step 7

Do the same for the other shadow areas. First choose Draw Normal mode, then select the new shape and choose Draw Inside again. Make sure you’re finished with one before proceeding to the next. Once you exit Draw Inside Mode for a shape, you can’t access it again.



TIPS: If you want a darker stroke, you can change the opacity on the fly by using the numeric keys: 1 for 10%, 2 for 20% and so on.



You can double-click any Bristle Brush in the Brushes panel to edit it. If the brush you are changing is already in use in your file, you’ll get this warning. Unless you want every brush stoke to update with your changes, click “Leave Strokes” to leave the existing brush strokes unchanged.





--------------------------------------------------------------------------------



Step 8

Once all the shadow shapes have been drawn and painted, your image should look something like the one below. “Draw Inside” simply creates a Clipping Mask before you draw. So if you want to edit some of the paths or start over, you can go to Object > Clipping Mask > Edit Contents.





--------------------------------------------------------------------------------



Step 9

If you haven’t saved your work, now’s a good time to do that. You’ll most likely get a warning when you save, telling you that your document contains Bristle Brush paths and transparency. Well, duh. Actually, this is an important warning to heed, because Bristle Brushes can make the document very complex and the file size quite large. You can turn off the warning so it doesn’t appear again during this work session.





--------------------------------------------------------------------------------



Step 10

Now we’re going to add some more color, texture and modeling. Create a new Bristle Brush if you want to experiment — a Flat Fan will work nicely.



As before, set the Opacity fairly low, then begin painting along the contours of the face and neck. It’s kind of a sculptural process, with the advantage of being able to edit the paths or start over if you want. If you paint a stroke you like, you can copy it and move it to another part of the illustration. You can change the stroke width, the opacity and the blending mode, just as you can with any vector path.



If you’re using a graphics tablet and pen, you’ll get visual feedback as to the direction, tilt and bearing of your brush. Still, it can be a rather random process, but that’s part of the fun, and can lend itself to some happy accidents.





--------------------------------------------------------------------------------



Step 11

I can’t tell you exactly where and how to paint the rest of the strokes, you’ll just have to play around until it looks right. The beauty of using Illustrator instead of Photoshop (or real paint, for that matter), is that if it gets too muddy, you can just delete some strokes or change their opacity. The final image is below.





--------------------------------------------------------------------------------



Conclusion

Due to their transparency and fluidity, Bristle Brushes can be used for a wide variety of coloring applications. And because they’re vector paths, you get the best of both worlds: The painterly effects of Photoshop brushes with the control and flexibility of Illustrator.



Keys to the Bristle Brush Options:



Name: Self-explanatory.

Shape: There are 10 styles. Each one attempts to mimic a real-life brush.

Size: This is the diameter of the brush. When you buy brushes in an art supply store, their size is measured at the point where the bristles meet the handle, so this measurement refers to that. Use the slider to change, or enter numerals from 1mm to 10mm.

Bristle Length: Measured from the bristle tip to the point where the bristles meet the handle.

Bristle Density: Has to do with the number of bristles in a brush. 1% is basically one bristle, but unlike a real-life brush, that one bristle will be the diameter of the brush as it is set in the Size field.

Bristle Thickness: Use the slider or enter numbers in the field.

Paint Opacity: 1% is translucent and 100% is opaque.

Stiffness: I like to think of Stiffness as the “squirly-ness” of the brush. That is, the lower the stiffness, the less the stroke will conform to the path you actually draw. This can be good for random strokes and surprises.

The best way to learn the ropes of a new application is to get stuck in with a working project. This Adobe Illustrator tutorial covers the simple steps involved in creating a vector RSS icon and includes a range of handy techniques that can be put into practice in future creations.












Adobe Illustrator is a vector graphics application, so it doesn’t matter what size the icon is created at. We can simply select all the objects and scale them up to the size of King Kong, or likewise scale them down to the desired size. Unlike Photoshop, all our lines and shapes will keep their crisp lines and colours because they’re made of mathematical calculations rather than good old pixels.







Open up Illustrator and create a new document. Click and hold the mouse over the Rectangle tool to select the Rounded Rectangle option hiding underneath. Draw your shape on the artboard while holding Shift, use the arrow cursor keys to adjust the roundness of the corners while dragging.







Another difference between Illustrator and Photoshop is the options sat at the bottom of the main tool palette. In Photoshop, I’m sure you’re familiar with the foreground and background swatches – In Illustrator this is replaced with the fill colour and stroke colour. Click the stroke option and clear off any defaults, then bring the fill into focus. Over in the Gradient Panel, add an orange fill that varies from dark to light vertically across the shape.







With the shape selected, go Object > Path > Offset Path. Enter -1mm in the options. Grab the corner of the new shape and rotate to 180 degrees so the gradients flow in opposite directions.







Grab the circle tool and draw a shape elsewhere on the artboard. Clear out any fill, and add a thick 16pt black stroke.







With the Direct Selection Tool (White Arrow), select only the left and bottom points of the circle. Hit delete on the keyboard to trim the circle down to a quarter.







Copy (CMD+C) the quarter circle and paste in front (CMD+F). Scale it down while holding the shift key to keep everything tight. Tip: Check the Scale Strokes and Effects option in the preferences and alter to your personal liking.







Adjust the stroke weight to match the 16pt of the original.







Press CMD+R to show the rulers, then drag a couple of guides out in alignment with the quarter circles. Using the intersection as a source, draw a small circle to finish off the traditional RSS shape.







Our two quarter circles are currently set as stroked paths, but we can quickly convert them to complete shapes by heading to Object > Expand, then selecting just the Stroke option.







With the three objects selected, add a grey-white gradient fill running vertically, and a 1pt light grey stroke.







Press CMD-G to Group the objects together, then scale and position them into place in the overall orange container.







Select the inner rectangle from the orange box, Copy (CMD-C) and Paste in Front (CMD-F). Fill it with white. One tip to remember is unlike Photoshop, Illustrator can hold multiple items in just one layer, each stackable on top of each other.







Draw a large, flat oval over the entire graphic. Pay close attention to how the bottom curve overlaps the white rectangle. With the oval and rectangle selection, click the Intersect Shape Area option in the Pathfinder palette.







Reduce the Opacity of this new shape down to around 15%, giving a sleek shine to the icon.







Finish off the graphic with a couple of specular hightlights in the form of circles. Use 15% opacity again to maintain a subtle appearance.







There we go, a simple vector RSS icon using some simple steps, but covering some of Illustrator’s powerful tools.

How to Turn Glasses into a Great Geek Icon (best of Vector.tutplus)

How to Turn Glasses into a Great Geek Icon

Step 1

Start by taking a photo of some glasses. Make sure to take it at a high enough resolution so it won’t be pixelated when viewed at larger sizes while you’re working.

The end result is much more cartoonish and geeky. If your glasses are not exactly as you would like the illustration to appear you will need to improvise while you are making the illustration. After all, the photograph is just a reference anyway. We will be deviating from the actual photo in the final icon.

Step 2

Place the photo on its own layer and lock the layer. Using the Pen Tool (P) and draw around the edge of the glasses frames. Give the stroke a thick weight. We will convert the stroke to a shape in a later step. This will save us the hassle of drawing two different rectangles to make the frame of the glasses.

Step 3

Trace the arm of the glasses next. Give this stroke a Round Cap by clicking on the option highlighted below.

Step 4

When you are finished tracing both arms and frames expand your strokes by going to Object > Expand…

Step 5

Using the Direct Selection Tool (A) move the points around to make the arm of the glasses thicker toward the front, where they connect to the lens area.

Step 6

You can also delete points if they are hindering you while you move other points around.

Step 7

Since I am going for a dorky look I decided to make the middle part of the glasses much bigger. This area is completely made up in terms of how it looks. Don’t be afraid to deviate from the photo. You have to know when to follow the rules and when to break them. Right now is the perfect opportunity to break them.

Step 8

This is what your icon should look like right now.

Step 9

Zoom in and make sure your lines are all smooth. This step goes a long way in the end result. Spend a little time now to save a lot of headache later.

Step 10

Give the glasses depth by duplicating each section of the glasses. Hold down Option while you click and drag the shape to duplicate each shape.

Step 11

Using the Pen Tool draw in the left side of the glasses that connect the frame to the arm.

Step 12

Now draw the right side. Notice again that the illustration is a little different from the photograph. Since the arms of the glasses are much larger, the shape connecting the frames and arms will need to be bigger too. Also keep in mind the the final result we are achieving is that of an icon. Most icons have simple shapes so don’t get too concerned with following every detail of the photograph. It is very much a balancing act that you will learn over time and experimentation.

Step 13

Give the connecting shape depth by duplicating it as well.

Step 14

Draw the top and side to finish off the connection.

Step 15

Observe how the basic shape of the icon differs from the photo.

Step 16

Make the lens of the glasses by duplicating the frame, drawing a shape behind it and using the Pathfinder to Divide the shapes. Once you divide the shapes go to Object > Ungroup to select just the lens area. Delete the unused portions that are leftover.

Step 17

Position the lenses over the frames.

Step 18

Select both lenses and give them a gradient. Play around with colors and the angle of the gradient until you find something that you like. In the Transparency Palette adjust the opacity of the lens to about 50%.

To fine tune the colors you can select Edit > Edit Colors > Adjust Color Balance… and alter them more (as indicated in the bottom screenshot).

Step 19

Next we will create a piece of white tape that will wrap around the middle of the frames. For arbitrary shapes I find it easiest to use the Pencil Tool (N) to draw the shape. The Pencil Tool lets you draw as if you were actually using a pencil, in one continuous stroke. Since the piece of tape should have a more natural look this works perfectly. Tip: When drawing with the Pencil Tool, you can close the shape anytime by pressing Option then releasing the mouse button.

Step 20

Give the piece of tape a detailed gradient. Notice that the bottom of the tape has a highlight that suggests light is bouncing from off of the surface that the glasses are sitting on.

Step 21

Give the tape a dark Inner Glow by going to Effect > Stylize > Inner Glow.

Step 22

Last, give the tape a slight drop shadow by going to Effect > Stylize > Drop Shadow.

Step 23

Small details go a long way. Add a dark inner glow to the lenses by going to Effect > Stylize > Inner Glow… I decided to use a dark blueish green for the inner glow so it will blend better with the color of the lenses.

Step 24

Next we will accentuate the frames of the glasses. Select the sections one at a time and give them complex gradients. Pay attention to where light will hit each area of the frame. Try to get your gradient to be lighter in those areas. In the image below, I’ve indicated the area of the arm of the glasses that should be the lightest.

Also, give each section of the area you are highlighting an inner glow by going to Effect > Stylize > Inner Glow… This inner glow should be delicate as to not impeded too much with the gradients you apply.

Step 25

Select another section of the frame and give that a complex gradient. Again, the area that should have the most highlight is indicated below. Note that there can be multiple areas that have highlights.

Step 26

Give the shape that connects the frame and arm of the glasses a subtle gradient as well.

Step 27

The entire face of the glasses has a very simple gradient that almost goes unnoticed. When it comes to the face of the glasses, since it’s all flat my use of the gradient is arbitrary. Just make sure it’s subtle.

Step 28

Add some well-placed highlights that help define any visually uninteresting areas or areas that obviously would be reflecting light.

Step 29

A slight highlight on the edge of the lenses is a must. Instead of tediously drawing a highlight along the edge of the lens use the Pathfinder to your advantage. Duplicate the lens and click on Subtract from shape area, as highlighted in the bottom screenshot.

Step 30

To add another level of dimension to the lenses, draw an arc shape and blur it by going to Effect > Blur > Gaussian Blur… Adjust the opacity of the shape if you need to.

Step 31

The shadow will add a nice finishing touch to the glasses. The shadow is comprised of the two shapes that make up the arms and another horizontal line below. Select the shape and go to Effect > Blur > Gaussian Blur.

Step 32

You will notice that the tip of the arms of the glasses are curved slightly upwards. Reposition the points using the Direct Selection Tool to give the indication that the tip of the glasses do not sit flush with the table.

Step 33

Select the shadow. In the Transparency Palette set the mode to Multiply, so the shadow will blend better when you place a background behind it.

Step 34

Using the Rectangle Tool (M) draw a rectangle and give it a faint gradient.

Step 35

Round the corners of the rectangle by going to Effect > Stylize > Round Corners.

Step 36

Give the rectangle an inner glow by going to Effect > Stylize > Inner Glow.

Final Image

Here is the final vector glasses icon! As you will notice, the final result is a little different from the photograph. That’s the beauty of illustrating something, you can make it exactly as you want it.