I would like to dedicate this tutorial to typography, which are the methods of processing printed text for better legibility and beauty. Typography is composed through the graphic design of printed text using the specifics for that languages rules. In this Basix tutorial will be apply the typography methods and rules using Adobe Illustrator. Materials for creating this tutorial were kindly furnished by Roman Kuznecov, aka Asat, who has many years of publishing experience.

Step 1

Let’s take a look at the designing of the printed text in the example of the sandwich recipe that we’re working with today. This kind of text contains a variety of items that will help you to develop the theme of this work. For the experiments, you should use text like this one here.

First, define the basic parameters of textual information:

• Size of text block
• Name of the typeface
• Font size
• Line spacing

Choosing these typographic parameters depends on many factors, in particular: on the format of the publication, style of the text, designer’s personal preferences, etc. I will leave these issues outside of the scope of this tutorial, as it covers books and monographs. Based on personal taste, I decided that the block of text will have a size of 150 by 300 mm (Type > Area Type …)

Step 2

Type text with the Garamond Pro font, size 12pt, and leading 13pt. Change these parameters in the Character palette (Window > Character).

For your information: the font size is the size of the height of the letter; typographic point is the unit of measure of the font size.

Step 3

Now align the text. There are two basic types of text justifying: Justify with last line aligned to the left and Justify all lines. The first method is quite simple, so use it for formatting. To do this, click on the button “Justify with last line aligned left” in the Paragraph palette (Window > Type > Paragraph).

Step 4

Next, we must configure the hyphenations. It is important to keep a balance between the number of hyphenations in the block of text and the amount of empty spacing in the rows. On one hand a lot of hyphenations create a feeling of the “fence” and affect the readability of text, on the other hand, long gaps also make it difficult to read.

Adobe Illustrator allows you to adjust this balance yourself with a Hyphenation dialogue window which opens from the fly-out menu of the Paragraph palette. Moving the slider to the better spacing position, we reduce the length of the gaps by increasing the amount of hyphenations, and vice versa. You must choose an optimal value that satisfies the design.

There is also an option that allows you to customize the appearance of the paragraph. In the fly-out menu of the Paragraph palette there are subsections "Adobe Single-line Composer" and the "Adobe Every-line Composer". When hyphenating, "Adobe Single-line Composer" analyzes just a single line. "Adobe Every-line Composer" analyzes the preceding lines; usually this allows you to get a better result.

Step 5

Thus, the general composition layout is already determined. Now let’s proceed to designing the individual elements of the text. I decided to highlight the main title of the text, so I’ll write it in capital letters. To do this, I’ve highlighted the title and in the fly-out menu of the Character palette I chose the option All Caps.

Here you need to pay attention to one point of interest: when designing the font tracking between the capitals is chosen on the basis that next to it there will necessarily be a lower case letter, so if you type the text in capital letters alone, the text feels cramped. Graphic designers recommend expanding slightly the letters of such text. With the text selected, in the Character palette in the tracking field set the value to 20.

Step 6

Now apply Kerning. Kerning is the process of adjusting the spacing between the character pairs to improve the appearance and readability of the text, it serves to justify the distance between adjacent letters or other font characters.

This option involves working individually with each character pair and how to find their relative position depending on the selected font, drawing letters themselves, and so on. The value of kerning is set in a percentage of the width of the space of the font being used, it can be either positive (when the characters are spaced apart) or negative (when the characters come closer to each other).

It is easy to see that the distance between pairs. See how “AV” and “WA” look different, but formally it is the same.

In order to make the distance between any two characters look visually the same, Kerning is applied. In Adobe Illustrator, there are 3 types of kerning:

• Zero Kerning – when kerning is not applicable.
• Auto Kerning – kerning set in the font by its creator. If the font is well designed, this type of kerning fits well in most cases.
• Optical Kerning – is good for kerning of titles or large freestanding signs, such as text for logos.

Set Auto Kerning for the entire text.

Step 7

Now I want to decorate a little bit the first few lines of text. I’ll do it with small caps. Small caps in typography are uppercase characters that look like reduced lowercase characters. Small caps are used to create titles and first lines of the sections following large initials, to write names, titles and abbreviations, and for bolding in the text.

It is not recommended to use small caps in long (more than two or three words) phrases and sentences; it impairs the readability of text. So, select the first few words after the title and select Small Caps in the fly-out menu of the Character palette.

Step 8

Now we need to separate paragraphs visually. This separation can be done in many ways, the most common of which are: break line (indent at the beginning of the first line of a paragraph) and the spacing between paragraphs.

In this text, I decided to make a space between paragraphs, but not just by line spacing, but by setting a blank space after each paragraph. To do this, in the Paragraph palette set the Space after paragraph value equal to 10pt.

Step 9

And now I want to talk about some ways to work with numbers in the text. There are 2 kinds of numerals: text numerals and all caps numerals. It is considered good form to use the first one along with lowercase letters, and the second one – with uppercase letters.

How to key in such numerals? There is one secret: both sets of numerals should be present in the font. The presence of two sets of numerals is one of the hallmarks of a good font. If these numerals are in the font, then key them in using the Glyphs palette (Type > Glyphs), find the necessary character in the table and Double-click to insert it in an active text block.

Our text has two groups of numerals. In the first case the numerals are in the ingredients section – leave them unchanged, I mean all caps numerals. The second group of digits are Fahrenheit temperature figures and the temperature character is in the main text. With the help of the Glyphs palette make them lowercase.

Step 10

Our text there has a bulleted list of several items. Replace the hyphen at the beginning of the list on the bullet with the help of Glyphs palette. It is important to properly arrange the indent. To do this, select the space between the bullet and the word and press TAB. Do this in every line of the list.

Check whether there is a tab symbol anywhere, and there are no extra spaces. To do this, go to Type > Show hidden characters. The tab character should be represented by an arrow (space is represented with a point, there should be no spaces).

Select the rows with the elements of the list and open the tab panel (Window > Type > Tabs). Place the marker of the tab on the rule box at the place from where the list items start.

Note: that bulleted lists should be formatted with the help of the Tabs panel, but in no way using multiple spaces.

Step 11

Your text may contain dashes. It is a gross mistake to put a hyphen or double hyphen instead of a dash! There is a character for the dash that we can type by clicking Option + Shift + _ for Mac (Alt + 0151 for Windows). Replace hyphens with dashes where needed.

There are two types of dashes – short (en dash) and long (em dash). “En dash” is keyed in by a combination of keys Option + _ for Mac (Alt + 0150 for Windows). It is used to denote the spacing between the dates.

Step 12

Now I want to tell you about such text formatting as Roman Hanging punctuation. In this text for more visual use of the Roman Hanging punctuation, we used the alignment of text to the right “Justify with last line aligned right” in the Paragraph panel.

To apply Roman Hanging punctuation, go to Type > Optical Margin Alignment, then in the Paragraph fly-out menu select Roman Hanging punctuation. With these actions, Adobe Illustrator takes all the extreme right punctuation characters behind the side lines and optically aligns the entire text.

Conclusion

To add authenticity to the text, you can change the shape of some letters. To this, in the OpenType panel (Window > Type > OpenType) press the buttons shown in the picture below.

The program will automatically replace the characters with the Ligatures (Ligature (from Lat. ligatura) – is a character of any system of writing, formed by joining two or more letters). Characters that have contextual alternates will be replaced by their alternatives. Ligatures and contextual alternates, unfortunately, are not available in all fonts.

As a result of our transformation we got the following text.

Note: the entire described above can be used for formatting text in Adobe InDesign.

Vectortuts+

In this tutorial you will learn how to create a series of different snowflakes from letters. To achieve this effect you will use the Transform Effect on a single letter. You will easily be able to create a series of individual snowflakes, taking advantage of editable type and the variety of letters in the alphabet.

Tutorial Assets

The following assets were used during the production of this tutorial.

• “Sanchez Regular” from MyFonts.com

Step 1

Open a new document and create a blue rectangular shape the same size as your canvas. I used 8 × 6 inch in RGB mode with 72dpi for the new document and a R:0 G:173 B:238 as background color.

Using the type tool click anywhere in the document and type a letter, I chose T. Since we want to create snowflakes the letter should be colored white. I set the font size to 80 pt. The font I’m using is "Sanchez Regular" by Latinotype, a Geometric Slab Serif font.

Step 2

With the T selected go to Effects > Distort & Transform > Transform. In the Transform window the first thing you should do is click "Preview" at the bottom right.

In order to get the typical snowflake effect, we will create copies of our original T and move them upwards as well as make them smaller.

We will start by creating 5 copies of the letter. Not much will happen at this point.

Then we scale the letter both horizontally and vertically to the same amount, 80% in this case. You will see the same letter multiple times now. Las thing we have to do for this step is to move the letter vertically to the top. Therefore we enter 0,5 in in the vertical distance.

Step 3

Now we will have to go to Effects > Distort & Transform > Transform again.
Because you already applied this effect before, you will get a warning window. Select "Apply New Effect". This will add a second Transform effect to the letter, instead of editing the one you set before.

Step 4

In this step we will rotate the letter and its copies to form a full circle snowflake.

We want to have a snowflake in a star shape with 6 tips. After a little math, this means that we need 5 copies of our letter (the original plus 5 additional instances). This also means that we have to divide a circle of 360° by 6 resulting in 60° for our angle.

Step 5

Now comes the fun part: Playing around with the Transform Effect’s settings!

Open the Appearance Panel. If you look at it you will see the Transform Effect twice.
You can edit the effect by double clicking it and the Transform Effect settings window will show up again. By changing the variables of the Transform Effect, you will change the snowflake’s appearance.

In the picture above you can see how the snowflake changes, if you change the number of copies in the Transform Effect.

This example shows how changing the Scale results in different snowflakes.

Changing the Reference Point of the Transform Effect gives you a variety of results as well.

Step 6

As every letter gives a different end result, your decision which letter to use can make the difference, too.

A symmetrical letter will make a better snowflake-like results than any other letter. Such letters are: A H M O T U V W X Y. Of course this also depends on the font you choose to use.

Step 7

The choice of font will give completely different results as well. From my testing I found that using a Geometric and Slab Serif font will work best. The very strong and often simple serifs of those fonts give edges to the snowflake similar to real ones. A Geometric font helps, achieving a proper symmetry in your snowflake.

Below you can see a variety of snowflakes based on the "Sanchez Regular" font. Each snowflake has its own settings to the Transform Effect, just as in real life every snowflake is unique.

Step 8

In the next example I changed the font to the ever so famous Helvetica. You can immediately see how different the snowflakes look.

A Sans Serif font like Helvetica has less structure and the snowflake appears more artificial and clean.

Step 9

For the next set of snowflakes I used Times, a classic Serif font. The snowflakes look lighter and more sophisticated.

Step 10

Now that you have a basic understanding of the principle, you can create an artwork based on these snowflakes. If you decide to do so and want to change the size of your snowflakes you can do so in 2 ways.

You go to Illustrator > Preferences > General and check the box "Scale Strokes & Effects". If you do so you can scale the letters/snowflakes using the transform tool and automatically scale the Transform Effects. If you leave this box unchecked you will have to adjust the Transform Effect manually again.

Another way would be to create your snowflakes and then turn them into Symbols. Therefore you only have to open the Symbol Window and drag and drop a single snowflake into it. Since the snowflake is white, as is the background of the Symbol Window, I recommend naming the symbol properly to find it easier later.

Step 11

In order to put my snowflakes into a layout, I decided to make a simple composition with 3 in the front and some smaller ones in the background. I chose to turn the single snowflakes into symbols and spread them around the canvas, sizing them down proportionally. I applied a Gaussian Blur effect as well as lowering the opacity to achieve the appearance of depth.

Conclusion

What you make out of this effect is entirely up to you! The most important part is to play around with fonts and settings and create something unique. I hope you’ve enjoyed this tut.

Vectortuts+

Today we have a unique Tuts+ Premium Pack, which is created in Illustrator by Sharon Milne. It’s filled with 10 illustrated wild animals. Each is completely vector, available in AI and EPS formats. Log in or Join Now to get this exclusive download. Learn more at the jump!

New Tuts+ Premium Pack

There are 10 vector illustrations in this pack, composed of: tiger, giraffe, elephant, rhino, deer, monkey, llama, kangeroo, polar bear, and wolf. The license allows you to use these vectors in your designs, see the download file for details. They can be scaled to any size and colored any way you choose, as these are all vector (in EPS and AI formats)!

This new Vector Premium Pack is created by Sharon Milne. She’s written numerous high quality vector tutorials for us and we’re excited to partner up with her on this exclusive Tuts+ Premium Pack release!

Tuts+ Premium Members can login now for instant access to this tutorial. Membership to Tuts+ Premium gets you access to hundreds of exclusive premium tutorials, top selling ebooks, in-depth courses, member forums, and much more. To learn more about Tuts+ Premium, Take the Tour or Join Today.

Vectortuts+

In the following quick tip you will learn how to create a simple price tag icon. It’s another tutorial that focuses mainly on the Appearance panel. First, you will need some basic tools and shape building techniques to create the starting shape. Next, using the power of the Appearance panel and a nice, free font along with some basic effects and techniques you will create you own price tag icon. Let’s get started.

Step 1

Hit Command + N to create a new document. Enter 600 in the with and height boxes then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid).

Next, you’ll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. Al these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool (M), create a 150 by 60px shape and fill it with R=255 G=222 B=190. Remove the colors from the stroke.

Step 3

Reselect the shape created in the previous step. Pick the Add Anchor Point Tool (+) and add two new anchor points as shown in the following image. The Snap to Grid will ease your work.

Step 4

Make sure that your shape is still selected and pick the Direct Selection Tool (A). Select the top, left anchor points and move it 30px down then select the bottom, left anchor point and move it 30px up. In the end your shape should look like in the second image.

Step 5

Pick the Ellipse Tool (L), create a 10px circle and place it as shown in the first image. Select it along with the other shape and click on the Minus Front button from the Pathfinder panel. The resulting shape should look like in the third image. This is the only shape that you will need to create your price tag. Move to the Layers panel (Window > Layers) double click on this shape and name it "Price Tag".

Step 6

Select "Price Tag" and go to the Appearance panel. Select the existing fill and go to Effect > Stylize > Inner Glow. Enter the data shown below and click OK.

Step 7

Select "Price Tag", move to the Appearance panel and click on the Add New Fill button. Obviously, this will add a new fill for your shape. Select it from the Appearance panel, lower its opacity to 25% and fill it with the linear gradient shown below.

The yellow numbers from the gradient image stand for opacity percentage while the white numbers stand for location percentage. Make sure that this new fill is still selected and go to Effect > Path > Offset Path. Enter a -3px Offset, click OK and go to Effect > Stylize > Inner Glow. Again, enter the data shown below and click OK.

Step 8

Select "Price Tag" and add a stroke. Make it 1px wide, set its color at R=196 G=154 B=108 and go to the Stroke panel (Window > Stroke). First, check the Round Cap and the Round Join buttons. Next, check the Dashed Line box and enter 0.75pt in the dash box and 3pt in the gap box. Now you should have a dashed stroke.

Return in the Appearance panel, make sure that the stroke is still selected and go to Effect > Path > Offset Path. Enter a -3px Offset, click OK and go to Effect > Stylize > Drop Shadow. Again, enter the data shown below and click OK.

Step 9

Select "Price Tag" and go to the Appearance panel. Make sure that no fill or stroke is selected and click on the Add new Stroke button. This will add a new stroke for your shape. Make it 2pt, align it to outside and set its color at R=196 G=154 B=108.

Step 10

Select "Price Tag" and go to the Appearance panel. Select the stroke added in the previous step and click on the Duplicate Selected Item button. This will add a copy of the selected stroke. Select it, set its size at 1pt and the color at R=255 G=245 B=235.

Step 11

Reselect "Price Tag" and go to the Appearance panel. Make sure that no fill or stroke is selected and click on the Add New Fill button. Select this new fill and drag it in the bottom of the Appearance panel. Fill it with the liner gradient shown below and go to Effect > Path > Offset Path. Enter a 2px Offset, click OK and go to Effect > Distort &Transform > Transform. Enter the data shown below, click OK and go to Effect > Stylize > Drop Shadow. Again, enter the data shown below and click OK.

Step 12

Reselect your entire path and go to Effect > Stylize > Rounded Corners. Enter a 5px radius and click OK. Move to the Appearance panel and make sure that the Rounded Corners is in the top of the Appearance panel.

Step 13

Pick the Type Tool (T), click on your artboard and add a price. Use the Arcade font with a size of 35pt and set its color at R=169 G=124 B=80. With this text still selected go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 15

Finally, you can use different sets of colors for your price tag or you can increase/decrease the value set for the rounded corners effects.

Conclusion

Now your work is done. Here is how it should look, I hope you’ve enjoyed this tut.

Vectortuts+

Today we’ll be learning how to create a vector light bulb icon with the free, open source vector program Inkscape. We’ll be following a Tango style of design for this project. Read on to learn more about the Tango Desktop Project and to learn how to create this icon.

February of 2009

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just 9/month.

Tango Desktop Project

The Tango Desktop Project is a set of guidelines that icon creators can use to make a consistent appearance in their icons. It’s most famously displayed in Linux distributions, but you might also notice it in standalone applications, such as GIMP. Below, is a sample of the official Tango icons. We’ll be replicating this look.

Step 1

Create a new 48px by 48px canvas. By default Inkscape has a few undesirable settings for creating icons. Go to the Document Properties dialog window and select the Snap tab. Uncheck the box next to Enable snapping. Throughout this tutorial you’ll need to occasionally use a grid to align the shapes to the canvas. To enable the Grid select the menu item View > Grid (#). I used a grey background in this tutorial to make things show up more.

Step 2

Now create a small circle near the top of the canvas and center it. It doesn’t have to be perfect, you can adjust it later. Note how it fits nicely between the grid lines. Convert the circle to a path by selecting it then going to Path > Object to Path (Shift + Ctrl + C).

Step 3

Next we’ll create the bottom part of the glass bulb that slopes into the metal socket. It may be beneficial to use a reference image for this next step. Below is a generic light bulb image from sxc.hu.

To create the curved bottom path, select the Bezier Curves tool (Shift + F6) and trace or create a path similar to the one pictured below by adjusting the various nodes.

Step 4

Combine the circle created earlier and the new path by holding down Shift and clicking on the objects individually. Next, click the menu item Path > Combine (Ctrl + K). The two objects are now combined into one and should look the same as the image below while in Edit Paths mode (F2).

Pay attention to the two yellow diamonds selected above. We’re going to make intersections in the circle near these two points. Make the intersections by double-clicking above the two yellow diamonds on the border of the circle. Two new nodes should appear where you double-clicked.

Select the square node at the very bottom of the circle and press the Delete key. The path will be changed slightly and the two yellow squares we made earlier should turn into diamonds. Select these two diamond nodes and remove the path connecting them using the Split Paths tool in your toolbar.

The result is a light bulb shape with two gaps in the middle.

Combine the almost-circle with the bottom path by selecting one end of the circle along with one end of the bottom path. Clicking Join selected endnodes in the Edit nodes toolbar and the two points should fuse together.

Do the same for the opposite side.

Step 5

Now it’s time to add a little color. I used a custom color palette as shown below (.pl included in the VECTORTUTS PLUS source files). It’s also shown below.

Select the light bulb shape and bring up the Fill and Stroke window (Shift + Ctrl + F). Select Stroke paint and then linear gradient. A simple black to transparent gradient should show up as the border of the bulb. We’re going to change these colors. Select Edit… and change the two stop colors. I used 729fcfff as my first and 3465a4ff as my second, darker color.

Change the direction of the gradient path by going into Edit Paths mode (F2) and dragging the square point of the gradient line to the upper left hand corner of the light bulb. Then drag the circle end to the lower right hand corner. This is to create a consistent light source in the icon.

Next up is the Fill. Keep the Fill and Stroke window open and click the Fill tab and select Radial gradient. I used ffffff56 as my inner color and 729fcfe3 for my outer color. You may notice both color are slightly transparent. This is to give the illusion that the light bulb is made of a translucent material.

Step 6

Select the outline, copy it (Ctrl + C) and paste it onto the same location (Ctrl + Alt + V). This is going to be the trademark inner highlight found in most Tango-styled icons. Delete the fill of the copied outline and change the stroke to pure white. This will make it more recognizable.

Adjust the white stroke so it fits snugly on the inside of the blue outline. Remember to keep the shape and 1px border. It will probably be necessary to manual move the nodes around to achieve a perfect fit.

Bring up the Fill and Strokes dialog again and in the Stroke tab select a linear gradient. The white to transparent gradient colors that appear by default will work fine; so there’s no need to change them. We do want to change the angle of the gradient though, because our light source is in the upper left-hand corner of the image. If the light source is in the upper left corner, the brightest spot on the object should also be in the upper left corner.

Adjust the overall opacity of the white outline to 75%.

Step 7

Time to create the filament. Draw two lines near the middle of the bulb with the Bezier Curves tool. Angle them towards the middle creating a V shape, then give each a gradient stroke. I used 9927aff to ffffffff. The lighter color is on top because this is where the filament is burning and giving off bright light.

Refer to the reference bulb earlier in the post and you’ll notice the actual filament is the material between these two wires. Since a 48px by 48px icon doesn’t need too much detail we can simulate a coil by making a wavy line. So once again select the Bezier curves tool and draw four points between the V lines created earlier. Then drag the lines connecting each point downwards so we have three shallow bowls connected together.

Make a new three-sided rectangle in the bottom part of the bulb with the Bezier Curves tool. The rectangle only needs a top, left, and right side; leave the bottom open. Then drag the middle of the top segment upwards to make a small arc. This object will be a small piece of glass inside the bulb that the filament is wired into.

Open the Fill and Strokes dialog and give the new path a stroke color of d0bfacff. Then select the Fill tab and give it a Linear Gradient going from ffffffff to ffffff00 (white to white-transparent). Change the repeat drop-down menu to Reflected. Reflected means the gradient is displayed twice. Once on the left side of the square end, and reflected on the right. I positioned the square point near the middle to look like there is a reflection in the glass. Also, change the overall Opacity to about 50%.

Step 8

Select the original blue outline we drew for the light bulb in Step 1. It should be the bottom layer of your image. Copy (Ctrl + C) and Paste it into place (Ctrl + Alt + V). Remove the stroke. Then give it a fill of ffc803ff. This is going to be a nice yellow glow resembling the color incandescent lights give off.

Lower the overall opacity of the object to 26% and lower it to the bottom of the image by pressing the End key.

Now to finish things up. Glass objects always reflect at least a small amount of light; spherical objects often have hot spots where a concentrated portion of light is being reflected off of. Create a circle, or more accurately an oval. Make the width slightly smaller than the length. Now rotate the oval by selecting it, and while having it selected click on it again. The arrows around the perimeter should change to rotational arrows. Click and hold one of the arrows in the corner and rotate the oval about 45° clockwise. Position the oval in the top left corner where the light source is the strongest. Then lower the Opacity to 37%.

Step 9

The final part of the light bulb is the metal connector that screws into a light socket. Create a rectangle connected to the bottom of the glass light bulb we just created. Then convert the shape to a path by going to the menu item Path > Object to Path (Shift + Ctrl + C). This makes the shape editable.

Drag the top of the rectangle upwards to resemble an upside down bowl and the bottom of the rectangle downwards. We’re going for a 3D cylinder look.

Add two more equidistant nodes on the left side of the cylinder by double-clicking where you want the nodes placed. Do the same for the right side, only place them between the nodes on the right starting from the top. By mentally connecting the dots from left to right it should resemble a zig-zag pattern. I added an overlay to help visualize the pattern.

We’re doing this to create the screw shape of the light bulb. Arrange the nodes by moving and extruding them till they resemble the image below.

Give the screw shape a Stroke color of d59600ff. Copy and Paste into place (Ctrl + Alt + V) a new screw. Remove the stroke from the new screw shape and add a linear gradient Fill with the colors ffd543ff and ffeca9ff. Remember to change the Repeat to Reflected to get the shine near the middle of the screw.

The new screw with the fill should be slightly smaller than the screw below it. Resize the newly created Fill object till the border of the object behind it is completely visible, similar to the process in Step 5. We’re doing this to make the corners of the border appear sharper.

Now move the two screw objects to the bottom of the image by selecting them both and pressing the End key. Next draw the wedges/teeth/edges of the screw. This is a very subtle effect and we don’t need a big object to do this. Select the Bezier Curves tool and make an object similar to the one below. The fill color is d59600ff.

Duplicate the object and move it down beneath the original.

Now to add a few final touches. Make two connected points with the Bezier Curves tool in the shape of a bowl. Fill it with the color d0bfacff and a stroke of 5a5249ff and lower it to the bottom of the image with the End key.

Draw an oval at the very bottom of the image. Make it about six times as wide as tall. Open the Fill and Strokes window and Fill it with black (000000ff).

Then select a Radial gradient for the fill. Lower the overall Opacity to 30% and move the oval to the bottom of the image. This is the shadow cast by the light bulb.

Final Image

Congratulations, you’re all done! I hope you enjoyed creating this!

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.

Vectortuts+

Just because you missed that awesome conference, doesn’t mean that you can’t still watch the lectures! This weekend we’re sharing an interesting demo by Software developer Mike Matas at TED2011. In this talk Mike demos the first full-length interactive book for the iPad — with clever, swipeable video and graphics and some very cool data visualizations to play with. The book is “Our Choice,” Al Gore’s sequel to “An Inconvenient Truth.”

Vectortuts+

I’ve always been fascinated by smoke, and have experimented a lot with it. So in this tutorial, I explain how to create realistic smoke, make it into a brush and use it for type. Let’s light up our vector cigarettes and get started smokin’!

October of 2009

Step 1

Create a new document (Command + N) for print in A3 (297mm by 420mm).

Step 2

Make a rectangle with the Rectangle Tool (M) that covers the whole artboard and make it black. While the rectangle is selected go to Object > Lock > Selection (Command + 2), which will lock the object so that you can’t select it.

Take your Pen Tool (P) and make a vertical stroke (click to make a start point, then click somewhere over or under the start point while holding Shift to make a vertical stroke). Make the stroke white and the fill blank. Set the weight of the stroke to 0,05mm.

If your units are set to something else, like points or inches, make sure that you type in “mm” behind 0,05, or hit Command + K. Choose units and display performance from the drop-down menu and change the units to millimeters.

Step 3

While your stroke is selected grab the Selection Tool (V), then hit enter and type in 0,05mm for horizontal and 0 for vertical. Click copy and hold Command + D (Object > Transform > Transform Again) for around 20sec, which will perform the Tranform Again command multiple times.

Step 4

While all of your strokes are selected, set the blend mode to Screen and Opacity to 8. Then group it (Command + G).

Step 5

Take your Pen Tool (P) and draw a shape that looks something like that shown below.

Step 6

Now for the magical step! Make sure that the shape you just made is on the top and click it, then hit Command + Shift + Right Bracket key (Object > Arrange > Bring to Front). Select the path and the strokes and go to Object > Envelope Distort > Make With Top Object (Command + Alt + C). Check that the Blend Fidelity is set to 100 (Object > Envelope Distort > Envelope Options, there you should set the Fidelity to 100).

Now that’s pretty cool, but if you take a closer look, you will see that the strokes are pretty clear. If you do not intend to make a stroke out of this you can fix it by clicking Effect > Blur > Gaussian Blur… and type in 7.0px, but since we are going to make a stroke out of it, we’ll do that later (shapes you want to turn into strokes can’t have effects like this one added).

Step 7

Now drag your smoke into the brushes panel. If you can’t see it then hit F5. Check the New Art Brush and hit OK.

Step 8

Name your brush whatever you want to, set the Direction to Up, and Method to Tints and Shades, then hit OK.

Step 9

Now you have your brush, but do you have something to use it for? If yes, remember to chose Effect > Blur > Gaussian Blur… and type in 0.7px when you have assembled your brush. If no, continue reading.

Take you Pencil Tool (N) and draw some letters, one letter at a time. Group them, add the stroke and set the stroke weight to 0,5pt.

Step 10

Copy your smoky letters (Command + C) and paste them behind (Command + B). Set the stroke weight to 3 pt. Now go to Effect > Blur > Gaussian Blur… and type in 7 px.

Yes, this is a Photoshop effect, so it will rasterize, but if you hit Command + K and check the Scale Strokes and Effects, then you’ll be fine when you want to scale it.

Final Image

I hope you learned something new, and that it will come in use sometime, if it does, I would love to see what you make out of it.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Vectortuts+

Have you always wanted to be an architect, but really just because you want to show people cool blueprints? Well‚ neither has Ryan, but he’ll certainly show you how to create a blueprint illustration in Adobe Illustrator. It all starts with a square filled with a gradient, and demonstrates techniques that will help you create almost any type of document.

Note: If you’re following along with the video, the details we use for our document are as follows.

• Document: Letter – Horizontal – RGB
• Grid: 20×20, 20% Opacity
• Square Gradient: (R to L)
  0,78,144
  56,126,235
  0,167,255
• Curl Gradient: white
  217,227,240
  white

Vectortuts+

In this Tuts+ Premium tutorial, we will use Adobe Illustrator to create a dynamic painterly textured illustration. This technique can be done using a mouse; however, a tablet will give you an extra level of control. We’ll cover the complete vector painting process from sketch to final illustration. If you are looking to take your skills to the next level then Log in or Join Now to get started!

View the Tutorial

Tuts+ Premium Members can login now for instant access to this tutorial. Membership to Tuts+ Premium gets you access to hundreds of exclusive premium tutorials, top selling ebooks, in-depth courses, member forums, and much more. To learn more about Tuts+ Premium, Take the Tour or Join Today.

Vectortuts+

Mastering the art of character design is something that takes both a lively imagination and a good understanding of drawing techniques. Today we have have bundled together a collection fun and lively character design tutorials from the Vectortuts+ archives. Covering a variety of subjects from sketching to rendering there’s plenty of projects to help you imagine and create your own fantastic characters.

• 

  How to Create a Web Site Mascot

  In this tutorial, I’m going to give an overview of how developed a character from the initial brief through to the final site mascot and then to go on to create several poses for different parts of the site.

  This character was originally made for an Envato site which didn’t take off, and the artwork wasn’t being used, so I’ve reworked this a bit to become a Vectortuts+ character. Let’s check out the process of making this website mascot and learn loads of tips along the way!

• 

  How to Cell Shade and add Texture to a Vector Comic Character

  This tutorial will show you how to create a cell shaded character in Adobe Illustrator, this is a fast technique utilizing the Live Paint bucket for block coloring, the gradient tool to add depth and form, and masked blended shapes for texture.

• 

  How to Create a Cute Bunny Vector Character

  In this Illustrator tutorial, I will show you how to create a cute bunny character. This tutorial uses simple shapes and gradients that are easy to apply to other character illustrations. The great thing about his tutorial is you don’t have to be an amazing artist to create it!

• 

  How to Color a Cute Character using Graphic Styles

  Coloring a character sketch can sometimes take much longer than anyone expects. With a few layer tricks and Graphic Styles, I will show you how to create a character that is quick to ink, easy to edit and a breeze to re-color. Let’s get started!

• 

  Create a Twitter Style Bird Mascot

  Using some basic shapes, effects, and gradients I will show you how to create a Twitter mascot for your blog or website. Twitter is a popular free web service for social networking and micro-blogging. You can follow Vectips, Sean Hodge, or Collis Ta’eed on Twitter as well!

• 

  How to Create a Fantasy Character in Illustrator

  This tutorial covers the process of creating a fantasy pinup illustration with Illustrator CS3. This tutorial uses Live Paint, so you will need CS2 or above to follow. If you need an alternative method for a legacy version of Illustrator, please download my Creating Comics with Illustrator tutorial tutorial, which includes instructions for that.

• 

  Give a 3D, Vector Robot a Realistic Feel in Photoshop

  In this tutorial you are going to learn how to combine different methods from Illustrator and Photoshop to enhance your 3D vector art. Through the process you will learn how to use the appearance panel, 3D extrude and 3D revolve. You will also create a custom art brush, and your own symbol. I am going to show you how to create masks using Channels and Layers, as well as creating Clipping Masks in Photoshop.

• 

  Create a Super Happy Octopus Character

  In Illustrator it’s really easy to create fun characters with some simple shapes and the Pathfinder Panel. In the following tutorial I will explain how to create a Happy Octopus Character. You can use these techniques and elements to create whatever character you want!

• 

  How to Create a Vector Illustration and Prepare it for Micro-Stock Sale

  There are numerous micro-stock websites that vector designers can design for and make consistent earnings through. Envato runs a few stock sites, such as Graphic River, which you may be interested in participating in. You may find the article on Freelance Switch about making money through selling your work on stock sites enlightening as well. There are some great tips in that article.

  I have quite a bit of experience working with Shutterstock and iStockphoto. This tutorial details a professional workflow for creating vector illustrations and prepping the artwork for these sites. I’ve also included a bunch of time-saving tools and tips as well. Let’s get started!

• 

  How to Illustrate a LeBron James Cartoon Character

  Hello fellow vector artists, I am a cartoonist/illustrator who specialized in retro style vector cartoons. You can find more of my work and books at my web site. In this tutorial, I’ll show you how I use Adobe Illustrator to create vector cartoons.

• 

  How to Create a Cartoon Character with Expressive Lines

  Cartoon character drawing covers a lot of techniques and styles from one color characters to multilayered colorful ones. In this tutorial, I will cover the necessary steps for creating a colored multicolor cartoon character that includes shadings. I used Adobe CS3, a Wacom tablet, an inked drawing, and scanner. With your tools ready, let’s get to it!

• 

  How to Illustrate a Cute Emo Kid

  We’ve recently included some funny looking cartoon style silhouettes on our website, so in this tutorial I will take you through the process of drawing these cuties. The concept is based on the Emo trend and I will take you trough all the steps from sketch to full color vector. I am using Illustrator CS3, pen, paper, scanner, and Wacom tablet.

• 

  How to Turn a Sketch into a Fat Cat Vector Illustration

  This tutorial aims to guide you from sketchbook to screen; a "Fat Cat" doodled with biro translated into a neat vector caricature. Intermediate knowledge of Adobe Illustrator is advised. Let’s take a look at how to create a cheeky cat illustration – from initial concept through to vector goodness.

• 

  How to Create a Stinking Zombie Flesh-Eater in Illustrator

  In this tutorial, I will show you how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, we will then ‘yuck’ it up using a number of techniques. Let’s ‘rip’ this one apart!

• 

  Create Character Driven Book Cover Art Using Illustrator and Photoshop

  In this two part tutorial on creating the "Let’s Go To Monster School!" book cover, I’ll show you a complete process from initial sketch to the final artwork, using an Illustrator to Photoshop integrated workflow. In Part 1 we will employ Illustrator to trace our hand drawn sketch, lay down the shapes and define the basic colors.

• 

  How to Design a Cheeky Koala Mascot Head

  We’ll use some opacity masks, brushes, gradients and effects, in addition to an easy shading technique you’ll find yourself using in plenty of other projects. Get ready to tuck into this Aussie-flavored tut!

• 

  How to Create Typeface Characters

  I started a character design project that merges typefaces into unique monsters, cute animals, and various other font inspired character creations. The method is simple, I take different sections of the characters of a specific font and I put them together, giving birth to different kinds of creatures.

  The interesting thing about Typefaces is that each font gives a different aspects to the characters. That is the essence of Typefaces – Faces with Type. Learn the basics of how to create these fun characters!

• 

  Make a Fun Holiday Reindeer Illustration

  Take an in-depth look at the process of designing and illustrating a holiday reindeer illustration. This tutorial covers illustration style, color selection, shading and touches on typography. The process of adapting your illustration during creation is also covered. This tutorial is created by Jesse Hora and Darrin Higgins. Time for some holiday fun!

• 

  How to Create a Cute Snail Using Adobe Illustrator

  In this tutorial we will learn how to draw a snail using tools such as the Pen Tool (P), Selection Tool (V), Direct Selection Tool (A), Ellipse Tool, and Gradient Tool (G). Some shapes will be created with the help of the Pathfinder panel. This artwork was created by my student Artur Chochaev.

• 

  How to Create a Killer Chainsaw Bunny Character

  This tutorial shows you how I build a Bucket ‘o’ Thought character and add a dynamic background effect. This process can be applied to any sketch you are vectorising. It takes some knowledge and skill with the Pen tool, but gives you ultimate control over your line work. In this tutorial, I will constantly refer to a tools’ quick key, learn your quick keys people, it makes things so much easier!

Vectortuts+

In this tutorial, I will show you how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, we will then ‘yuck’ it up using a number of techniques. Let’s ‘rip’ this one apart!

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

The first step in the process is to dig up a fresh corpse, and in this case I sketch out the zombie I intend to create. My personal preference is a black biro on paper. As I want to scan the image, a biro ensures that the lines are all dark enough to show. Also by sketching in ink, I don’t get too hung up on the image at this stage and have some fun. The great thing about Illustrator is that I can always tweak and amend as I work.

Once I’m happy with the sketch I scan him into Photoshop. Obviously any software is suitable at this stage as no manipulation is required, so the software which came with your scanner should do the job just as well. 72 dpi and grayscale are fine and will help keep the processing power of your computer from having to work unnecessarily hard. You could even use a digital camera to capture the image if you don’t have a scanner.

Step 2

Open up Illustrator and start with an A4 portrait document. I tend to work in CMYK, as alot of my work is for print, but I also find CMYK to be more intuitive when mixing colors.

Once your document is open, import the sketch into the document by going to File > Place and locate your sketch. Once your file is located, check the Template box, which will ensure your sketch is placed upon its own layer. It also gives the layer a faded opacity, which will help in the next step when you are drawing over the top of it.

Step 3

Before we begin creating our little flesh-eater, arrange the document into different layers, each one representing an element of the figure. This figure breaks down into five main groups: “Head,” “Body Front Arm,” “Back Arm,” and “Guts.” I create a new layer for each of these items, and this will help keep things organized as the illustration progresses.

Step 4

For this step, I am going to draw around the sketch of the zombie using the Pen Tool (P). At this point, I have a black stroke with no fill. This way I have the ability to see every element even if they overlap.

I begin with the head, working on the “Head” layer, and draw around each element. As I draw, I keep in mind which elements lay on top of each other, starting with the furthest away and building up until I have a line drawing of the whole head. I then repeat the process for each element until I have the whole zombie.

Step 5

Once I have the complete zombie, I select it all and change the stroke to white and give it a black fill. This will show me which elements are in the wrong order.

I see that the sockets of the eyes are sitting in front of the eyeballs. To move them back, I simply select the sockets and send back a step (Object > Arrange > Send Backward), repeating the process until everything is in the correct order.

Once I’m happy, I begin to block out the basic colors. At this point. I only need four colors: blue (skin), purple (clothes), red (gore), and dark blue (outline). I mix these colors up in the color mixer and add them to my palette, then apply them to the relevant areas.

Step 6

Now that I can see the linework, I’m going to go around the piece and tweak the line weight where I think it’s required. I like the line weight to be nice and chunky, so using the Direct Selection Tool (A), I grab the points on the outline which are then tweaked to my liking.

Also at this point, I notice that the teeth have no outline. I select the teeth using the Select Tool (V) and make a direct copy (Edit &gt ;Copy), which I then paste directly below the originals (Edit > Paste in Back). Then I recolor the new teeth, set the color to black and once again, and resize the outline using the Direct Selection Tool (A).

The left eye currently sits outside the socket, so we just need to poke that bad boy back into his hole. Using the Selection Tool (V), select both the eyeball and the socket, then with both selected navigate over to the Pathfinder window and apply Intersect Shape Areas.

This will remove all the areas outside of what eyeball is peering through the socket. For future reference, if we were to now click on the Expand button located on the Pathfinder window, this would remove all the invisible areas, leaving just the white shape of the eye behind. However, since your eyeball may not be peering in the desired direction at this point, we’ll leave it as it is.

Step 7

OK, so right now we have a straightforward little blue guy, and what we want to do is mess him up a little. You can hack into your artwork any way you please, but in this instance I’m looking at that top lip, which in my original sketch is tattered and torn.

First, I draw the shape of the ripped flesh using the Pen Tool. Once I have a shape I’m happy with, I then select the blue face shape and make a copy, which I then paste directly above (Edit > Copy, Edit > Paste in Front). I also perform the same action for the tattered flesh shape.

With both the copies selected, I once again use the Pathfinder palette and this time I apply the Subtract From Shape Area option. This punches the top shape through the bottom shape, and you are left with the tattered bottom lip. Now click on the Expand button we talked about earlier and you will be left with one shape

Now repeat the same steps with the right eye socket, so we can knock the eyeball back (Object > Arrange > Send Backward) behind the socket. We now have both eyes peeping from within the skull!

Step 8

Now that the face is the shape we want we can create the outline for it. Make a copy (Edit > Copy) and then paste the copy directly behind the original (Edit > Paste in Back). With the object still selected, use the Eyedropper Tool (I) to change the color to black. Now use the Direct Selection Tool (A) to resize and tweak the linework to create a nice chunky outline.

Step 9

I’m now approaching the point where I have the zombie in one piece, so before I start working on the little details I’m going to color the rest of his clothing. The colors I mix for my zombies should have that touch of grubbiness about them, so whatever colors I choose I throw in some black on top. This is where creating the document in CMYK helps, as it’s easier to mix your palette together.

Step 10

Now that I have my colors, I want to give my zombie a bit of depth and to do this I’m going to add some shading. First of all I decide which direction the light is coming from, in this case from the left. Now using the Pen Tool, I begin creating the areas where the zombie’s skin is lighter and the areas which will be darker.

Once I have created the shapes, I mix up a lighter version of the zombie flesh tone and a darker version. Next, I apply these colors to the shapes just created. With the shapes still selected, I drag their layers so the shapes sit below the face shape.

Select the layer with the face shape on top and with all three layers selected I create a new layer mask (Object > Clipping Mask > Make). The top object, in this case the face, becomes a mask with the two other shapes within it. The mask at this point will become invisible, so ensuring only the face is selected, navigate to your swatches where you can reapply the zombie skin color.

Repeat this process for each element until you have shaded the full figure.

Step 11

Now is the time to add the smaller details to the figure, like creases in the clothing and cracks in the skin. Using the Paintbrush Tool (B) and a brush I have previously created, I move around the relevant layers and start painting in the details. You can create your own brush, or use one of the brushes which come with Illustrator. I use the Pen Tool (V) with a black fill and no stroke for larger areas.

Step 12

Now that we have our zombie, we need some blood! I apply the blood the same way that I applied the shading, using the masks I have previously created. However unlike the shading, the blood applied to the figure has the opacity altered.

For this figure, I’m just adding blood stains to where he has wounds, so that means his face, arm, and chest. A lower opacity allows for the details behind these stains to show through, giving a little more depth.

Step 13

This little fellah still needs some added gruel I feel, and with a stomach wound like that, I think a pool of blood is the way to go. I create a new layer that I call “POOL” and place it below all the other layers.

Within this layer, I draw a puddle shape that I then color red. I then make a copy of the lower half of the zombie, and group (Objects > Group) the copied elements together. These grouped items are then placed into the “POOL” layer. Using the Free Transform Tool (E), I flip the group horizontally and then transform it so that it is a shorter reflection of the original zombie figure.

Once I’m happy with its size and position, I select it along with the pool shape and create a mask of the pool shape with the reflected figure within it. Now to give the reflection that crimson tint I simply draw a red shape above the reflection within the pool mask. Once again I alter the opacity to ensure you can se the zombie reflection through it.

Step 14

I want to soften the skin of the zombie, so I select all of the shaded and lit areas which I have masked off earlier in the tutorial. I than apply a gaussian blur to these areas. This gives the skin a spongier feel, as every zombie should have.

Conclusion

You now have the first member of an ever-swelling army of the undead!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Vectortuts+

Just because you missed that awesome conference, doesn’t mean that you can’t still watch the lectures! This weekend we’re sharing a great talk by Bill Van Hecke and The Omni Group. In this talk, Bill shares his thoughts on Designing Graceful, Gracious Interfaces for iPad

Vectortuts+

This tutorial takes you step by step through the process of creating an upload web button. You will learn how to use just a few simple, yet effective, tools and techniques to create this eye-catching design.

Vectortuts+

In the following tutorial you will learn how to create a toilet plunger illustration. You’ll use basic shape building techniques, along with advanced Illustrator tools, to compose the best plunger artwork you’ve ever made. You can use these techniques you’ll learn to create numerous household tools as well.

Step 1

Create a 700 by 300px, RGB document. First, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 2.5px. Go to Edit > Preferences > Guides > Grid, enter 2.5 in the Gridline every box and 1 in the Subdivisions box.

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Ellipse Tool (L), create a 65 by 47.5px shape and fill it with any color. Continue with the Ellipse Tool (L), create a 60 by 65px shape and place it as shown in the second image.

Reselect the two shapes created so far and click on the Intersect button from the Pathfinder panel. The resulting shape should look like the fourth image shown. Fill it with R=171, G=30, B=45.

Step 3

Now, you need to add some roundness for the shape created in the previous step. The Round Any Corner script will come in handy for this. You can find it in the Vectortuts+ article 20 Free and Useful Adobe Illustrator Scripts. Save it to your hard drive and grab the Direct Selection Tool (A).

Select the bottom anchor points (highlighted in the first image) and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 2px Radius and click OK. In the end your shape should look like the second image shown. Select it and make a copy in back (Command + C > Command + B). Go to the Layers panel, find this copy and make it invisible. You’ll need this shape later.

Step 4

Reselect the shape edited in the previous step, make a copy in front (Command + C > Command + F) and grab the Ellipse Tool (L). Create a 65 by 40px shape, fill it with R=161, G=30, B=45, place it as shown in the first image, and send it to back (Shift + Command + Left Bracket key).

Select this new shape, along with the fresh copy, and click on the Minus Front button from the Pathfinder panel. The resulting shape should look like the third image shown. Select it and make a copy in back (Command + C > Command + B). Go to the Layers panel, find this copy, and make it invisible. You’ll need it later.

Step 5

Disable the Snap to Grid (View > Snap to Grid) and focus on the shape created in the previous step. First, select it and make two copies in front (Command + C > Command + F > Command + F). Next, select the top copy and hit the up arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting group of shapes with R=131, G=30, B=45.

Step 6

Reselect the shape created in the fourth step and go to Object > Path > Offset Path. Enter a -3.3px Offset and click OK. Fill the resulting shape with R=237, G=28, B=36, lower its Opacity to 70%, and go to Effect > Blur > Gaussian Blur. Enter a 1.5px radius and click OK.

Step 7

Re-enable the Snap to Grid (View > Snap to Grid). Once again, select the shape created in the fourth step and make a copy in front (Command + C > Command + F). Continue with the Ellipse Tool (L), create a 62.5 by 45px shape, and place it as shown in the second image. Select this new shape, along with the fresh copy, and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=121, G=30, B=45, and lower its Opacity to 25%.

Step 8

Select the shape created in the fourth step and go to the Appearance panel. Open the fly-out menu and click on Add New Fill. This will add a second fill for your shape. Select it and use the linear gradient shown below. The yellow zero from the gradient image stands for opacity percentage. Finally, reselect the entire path and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 9

Let’s move to the red shape created in the third step. First, disable the Snap to Grid (View > Snap to Grid). Next, select this shape and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the up arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=131, G=30, B=45.

Step 10

Enable the Snap to Grid (View > Snap to Grid). Reselect the shape created in the third step and make a new copy in front (Command + C > Command + F). Continue with the Ellipse Tool (L), create a 65 by 57.5px shape, and place it as shown in the second image. Select this new shape, along with the fresh copy, and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=121, G=30, B=45. Now lower its Opacity to 25%.

Step 11

Next, you need to turn the shape created in the third step into a mesh. Grab the Mesh Tool (U) and simply click on the point indicated by the arrow below. Continue with the Direct Selection Tool (A), select the five mesh points, one by one and use the colors shown below.

Step 12

Pick the Ellipse Tool (L), create a 10px circle, and place it as shown in the following image. Fill it with R=242, G=182, B=117. Lower its Opacity to 50% and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK.

Step 13

Switch to the Rectangle Tool (M), create four 2.5px squares, and place them as shown in the first image. Fill them with white, group them (Command + G), and go to Object > Transform > Rotate. Enter a 45 degrees angle and click OK.

Step 14

Reselect the group created in the previous step, lower its Opacity to 7%, and go to Effect > Warp > Arc. Enter the data shown below, click OK, then go to Effect > Blur > Gaussian Blur. Enter a 1px radius and click OK.

Step 15

Return to the Ellipse Tool (L), create a 20 by 10px shape, and place it as shown in the first image. Fill it with R=131, G=30, B=45. Now go to Object > Path > Offset Path. Enter a 0.5px offset and click OK. Select the resulting shape and lower its Opacity to 50%.

Step 16

Pick the Rectangle Tool (M), create a 20 by 7.5px shape, fill it with R=131, G=30, B=45, and place it as shown in the first image. Select this rectangle, along with the ellipse created in the previous step (the first one), and click on the Unite button from the Pathfinder panel.

Step 17

Pick the Ellipse Tool (L), create a 20 by 10px shape, fill it with the linear gradient shown below, and place it as shown in the following image. Make a copy of this shape in back (Command + C > Command + B) and make it invisible. You’ll need it later.

Step 18

Select the shape created in the previous step and make a copy in front (Command + C > Command + F). Select this copy, along with the shape created in the sixteenth step, and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=161, G=30, B=45. Now make a copy in back (Command + C > Command + B) and make it invisible. You’ll need it later.

Step 19

Reselect the shape created in the previous step, add two new fills, and use the linear gradients shown below. Don’t forget that the yellow zero from the gradient images stands for Opacity percentage, while the white number stands for location percentage.

Step 20

Disable the Snap to Grid (View > Snap to Grid). Return to the shape created in the seventeenth step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy, hit the up arrow once, then reselect both copies, and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=239, G=65, B=54, and lower its Opacity to 75%.

Step 21

Reselect the shape created in the seventeenth step and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the down arrow and the right arrow twice. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=121 G=30 B=45 and lower its opacity to 50%.

Step 22

Re-enable the Snap to Grid. Pick the Rectangle Tool (M), create a 10 by 140px shape, fill it with R=196, G=154, B=108, and place it as shown. Select it and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK, and go to Object > Expand Appearance.

Step 23

Again, you will need the Round Any Corner script. First, disable the Snap to Grid (View > Snap to Grid) and focus on the shape created in the previous step. Pick the Direct Selection Tool (A), select the top anchor points, and go to File > Scripts > Other Script.

Open the Round Any Corner Script, enter a 5px Radius, and click OK. Move to the bottom anchor points, select them, and go again to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 1px Radius, and click OK. The result should look like the second image shown.

Select it, make a copy in back (Command + C > Command + B), and make it invisible. You’ll need it later. Reselect the remaining visible shape and go to Object > Path > Offset Path. Enter a -4.5px Offset and click OK. Fill the resulting shape with R=242, G=182, B=117. Now move it 1px to the right.

Step 24

Select the thicker shape created in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the right arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=169, G=124, B=80.

Step 25

Reselect the thicker shape created in the twenty-third step, make a copy in front (Command + C > Command + F), and bring it to front (Shift + Command + Right Bracket key). Select this copy, go to the Appearance panel, and replace the flat color with the radial gradient shown below. Don’t forget that the yellow zero from the gradient image stands for Opacity percentage.

Step 26

Select the shape created in the previous step and make a copy in front (Command + C > Command + F). Select this copy, lower its Opacity to 20%, and change the blending mode to Multiply. Now go to the Appearance panel and replace the existing gradient with the one shown below.

Have a closer look at the gradient image and you’ll notice that you have two gradient sliders overlapping at 40% (Location). One should have the Opacity set at 100% and the color at R=139, G=94, B=60. The other should have the Opacity set at 0% and the color at R=196, G=154, B=108.

Step 27

Select the two shapes created in the twenty-third step, go to Object > Blend > Make, then apply Object > Blend > Blending Options. Select Specified Step from the drop down menu, enter 45 in the white box, and click OK. In the end, your blend should look like the second image shown.

Step 28

Enable the Snap to Grid (View > Snap to Grid) and focus on the bottom area. Pick the Ellipse Tool (L), create a 65 by 40px shape, and place it as shown in the first image. Fill it with black, lower its Opacity to 15%, and go to Effect > Blur > Gaussian Blur. Enter a 2px radius, click OK, then create a second shape.

Make it 75px wide and 47.5px tall and place it as shown in the second image. Fill it with black, lower its Opacity to 15%, and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK. Reselect both shapes and send them to back (Shift + Command + Left Bracket key).

Step 29

Go to the Layers panel and turn back to visible the invisible shapes created so far. Select all five shapes, bring them to front (Shift + Command + Right Bracket key), and click on the Unite button from the Pathfinder panel. Fill the resulting shape with R=35, G=31, B=32.

Step 30

Select the shape created in the previous step, send it to back, and apply Effect > Warp > Fish. Enter the data shown below, click OK, and go to Effect > Blur > Gaussian Blur. Enter a 3px radius, click OK, then lower the Opacity of this shape to 15%.

Step 31

Reselect the shape edited in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select both copies and go to the Appearance panel. Remove the Warp and the Gaussian Blur effect, raise the Opacity to 100%, and move them 7.5px up and to the right. The Snap to Grid will ease your work here.

Step 32

Focus on the two dark shapes created in the previous step. Select the top shape and make it invisible for the moment. Select the remaining visible shape and fill it with the linear gradient, as shown in the first image. Lower its Opacity to 20% and apply Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK.

Turn back to visible the other dark shape, fill it with the same linear gradient (as shown in the third image), and lower its Opacity to 10%. Reselect both shapes and go to Effect > Distort & Transform > Free Distort. Add the angle shown in the following image and click OK.

Step 33

Pick the Ellipse Tool (L), create a 122.5 by 37.5px shape, and place it as shown in the following image. Fill it with R=39, G=170, B=225, lower its Opacity to 10%, and apply Effect > Distort & Transform > Zig Zag. Enter the data shown below, click OK, and apply Effect > Distort & Transform > Roughen. Again, enter the data shown below, click OK, and go to Effect > Stylize > Inner Glow. Once again, enter the data shown below and click OK.

Continue with the Ellipse Tool (L), create a 92.5 by 35px shape, and place it as shown. Fill it with R=39, G=170, B=225. Now lower its Opacity to 10%. Then add the Zig Zag, Roughen and Inner Glow effects.

Create a 75.5 by 30px shape and place it as shown. Fill it with R=39, G=170, B=225. Now lower its Opacity to 10%. Then add a the Zig Zag, Roughen, and Inner Glow effects.

Create a 20 by 10px shape and place it as shown in the following image. Fill it with R=39, G=170, B=225 and lower its opacity to 10%. Now add a the Zig Zag, Roughen, and Inner Glow effects.

Create a 65 by 25px shape and place it as shown in the following image. Fill it with R=39, G=170, B=225, and lower its Opacity to 10%. Now add a the Zig Zag, Roughen, and Inner Glow effects.

Create a 10 by 5px shape and place it as shown. Fill it with R=39, G=170, B=225 and lower its Opacity to 10%. Now add a the Zig Zag, Roughen, and Inner Glow effects.

Step 34

Select all the shapes created in the previous step and group them (Command + G). Select this group and send to back (Shift + Command + Left Bracket key).

Step 35

This is how your illustration should look so far.

Step 36

Select all the shapes created so far and group them (Command + G). Make a copy of this group and move it to the right as shown.

Step 37

Focus on the second plunger created in the previous step. Select all the shapes that make up the rubber and click on the Recolor Artwork button from the top menu bar. The Recolor Artwork window will open.

Click on the Edit button, check the Link harmony colors button, adjust the brightness slider, then drag the color handles as shown. In the end, the rubber should look like the second image below.

Step 38

Duplicate the plunger edited in the previous step. Move this copy to the right then select the shapes that make up the rubber and click on the Recolor Artwork button.

Again, click on the edit button, check the Link harmony colors button, adjust the brightness slider, then drag the color handles as shown. In the end, this third plunger should look like the following image.

Step 39

Finally, let’s add the background. Pick the Rectangle Tool (M), create a shape the size of your artboard, and fill it with the linear gradient.

Step 40

Pick the Ellipse Tool (L), create a 700 by 50px shape, and place it as shown. Fill it with white and go to Effect > Blur > Gaussian Blur. Enter a 15px radius and click OK.

Step 41

Switch to the Rectangle Tool (M) and create a 700 by 165px shape. Place it as shown in the first image and fill it with the left linear gradient. Continue with the Rectangle Tool (M) and create a second shape. Make it 700px wide and 135px tall. Place it as shown in the second image and fill it with the right linear gradient.

Step 42

Select the second shape created in the previous step and make a copy in front (Command + C > Command + F). You will need a built-in pattern for this copy. Go to the Swatches panel, open the fly-out menu and go to Open Swatch Library > Pattern > Basic Graphics > Basic Graphics_Textures. This will open a new window with some nice patterns. Reselect the copy and replace the linear gradient with the “USGS 7 Vineyard” pattern.

Step 43

Select the shape created in the previous step and make a copy in front (Command + C > Command + F). Fill this copy with the linear gradient shown in the second image. Select it, along with the patterned shape, and go to the Transparency panel. Open the fly-out menu and click on Make Opacity Mask. Lower the Opacity of this masked shape to 10% and you’re done.

Conclusion

Now your work is done. Here is how it should look.

Vectortuts+

Today, we have another Tuts+ Premium tutorial, which is available exclusively for Premium members. This tutorial contains unusual technique for creating Opacity Masks and plenty of effective techniques that allow us to achieve stunning results. This tutorial is made by Iaroslav Lazunov and a professional and in-demand designer Sant Valentin. You can view some key images from this tutorial on our Premium Tuts+ site.

This Premium Tutorial is Filled with Professional, Creative Instructions

There are many reasons why Adobe Illustrator is an excellent application for creating icons. The same elements can be used as building blocks to ensure consistency and speed up your workflow. This is a Premium tutorial filled with a range of techniques, from basic shape-building to more complex lighting effects.

Plus members can Log in and Download! If you’re not a member, you can of course join today! You can view some key images from this tutorial on our Premium Tuts+ site.

Vectortuts+

In this tutorial we will learn how to create Watercolor Background using a Gradient Mesh, tools of deformation and Blending Modes. The techniques which are described here allow the creation of complex textural backgrounds in a simple and effective way.

Step 1

Take the Ellipse Tool (L) and create a circle with blue fill.

Keep the circle selected and go to Object > Create Gradient Mesh and set the number of rows and columns in the dialog box.

Step 2

Select mesh nodes with the help of the Direct Selection Tool (A) or Lasso Tool (Q) and recolor them in different tints of blue.

Select the nodes on the edge of the circle with the help of the Lasso Tool (Q) along the trajectory which is shown on the picture below and fill them in white.

Step 3

Now, click twice on the Wrinkle Tool icon on the Toolbar. This action opens the dialog box with the settings of this tool. Set the parameters which are indicated on the picture below.

Make circular movements on the object with the help of the Wrinkle Tool to distort the lines of Gradient Mesh.

Now set up Multiply Blending Mode in the Transparency palette.

Step 4

Take the Rectangle Tool (M) and create a rectangle to be the background.

Duplicate the mesh object (Option key while dragging), change the size of the copies, rotate them on their axis (with the help of the Selection Tool (V)) and create something like waves above and below the background.

Step 5

Select and group up the created waves (Command + G). Set 40% opacity for this group in the Transparency palette.

The created waves are the background of the composition.

Step 6

Using the same techniques create the middle ground of our composition. For this group set 70% opacity in the Transparency palette. The elements of this group shouldn’t totally cover up the first group.

Step 7

Now create the foreground, the opacity of this group is also 70%. The elements of this group shouldn’t cover up the first and the second groups.

Step 8

Take the Ellipse Tool (L) and create a circle with blue fill, the diameter of this circle in my case is 4px.

Drag this circle into the Brushes palette and save new brush as Scatter Brush. Set its parameters in the dialog box.

Step 9

Take the Paint Brush Tool (B) and create some strokes with the help of this brush.

You may change the opacity of these strokes in the Transparency palette and the size of the elements by changing the thickness of strokes in the Stroke palette.

Step 10

Select rectangle and go to Object > Arrange > Bring to Front. Now select all the created elements and press the shortcut Command + 7, creating the Clipping Mask.

Conclusion

I hope you like this tutorial and you will use these techniques in your vector works.

Vectortuts+

Vectortuts+ is all about helping people turbo charge their skills, and today we have another special community post that will help our readers take their images to the next level. The best thing is, you can be part of it too! Find out more at the jump.

Peer Review, 3

If you would like to offer advice or tips you can do so in the comments section below, just a few tips before we begin…

How to Participate:

• This sessions contributor has offered a piece of work that they would like help with, please keep this in mind when you share your thoughts. The images are not perfect, but they can be with the right advice and some friendly encouragement. (Vectortuts+ reserves the right to delete any rude comments)
• If you’re better with pictures (let’s face it, most of us are) feel free to take a screenshot of the image using Little Snapper, Skitch or a similar program and paste a link to the annotated image in the comments section with an explanation of the tweaks.

If you want to take part in the next peer review:

Add your work to our facebook photo gallery with a description about the piece and the help/advice you’re looking for.We will chose one to be published on our site as part of the next Community Review, if you’re not chosen straight away – don’t worry – your work will be chosen for a future session.

Image Category: Realistic Portrait

Details:

Designer: Ian Vox

Details: “Hi. This is my latest vector work, “Lean Mariz”. This is a personal work at the same time I am trying to perfect my mesh technique so I could save time in the next project. Meshing requires time and patience, which is sadly I don’t have lots of. Hairs are done with brushes.

Any feedback is highly appreciated. Thanks Vectortuts."

Feedback

What are your thoughts on the work above? Critiquing work helps the artist see new possibilities, and it also helps you learn to evaluate art, which will help you take that same analysis and apply it to your own work. Participate in the comments below with your opinions on how to improve the work above.

Vectortuts+

Just because you missed that awesome conference, doesn’t mean that you can’t still watch the lectures! This weekend we’re sharing a great talk from Carsonified. In this talk at FOWD NYC, Paul Boag covers strategies for working better with design clients.

Vectortuts+

Traditionally designers would check their layouts manually for errors by using a host of different menus or panels. Commonly known as Preflight, this process has now been turned on its head by the introduction of Live Preflight to InDesign. This feature checks for errors as you work displaying errors in real time, enabling the designer to fix problems throughout the design process. The following tut will serve as an introduction to Live Preflight and detail how to set up and save a Profile for future use.

Step 1

There are two common ways to access the Preflight panel. The first and quickest way is to double click on the Preflight display near the bottom of the document.

Secondly you can access it by going to Window > Output > Preflight.

Step 2

The preflight panel should now be visible. Depending on what document you have open the panel shouldn’t be displaying any errors. To the top of the panel there is a drop down menu, by default the Basic profile will be selected.

Step 3

Click and open the fly out menu from the top right hand corner of the panel and select Define Profiles.

The Basic profile will be highlighted on the left side and a list of profile options will be visible.

Step 4

Click on the profile triangle button to the left of a filled box and a list of conditions will collapse into view.

Step 5

These conditions can be turned on and off to suit the user. Feel free to explore these conditions within the Basic Profile.

Step 6

Ok let’s create a profile of our own and add a few conditions to cover some important errors. Click once on the New preflight profile button located near the bottom left hand corner of the panel.

A new profile will appear in the profile list. You can choose to rename it by typing new text within Profile Name space at the top of the panel.

Note, that your new profile will mimic the Basic profile’s conditions and add them to your new profile.

Step 7

Within the Color option I am going to activate ‘Color Spaces and Modes not allowed’ with the following condition:

Once finished I am going to collapse the triangle button to keep the panel clutter free.

Step 8

As my design contains a number of color images I am also going to activate the Image Resolution condition with the following settings:

Step 9

Finally I am going to go into the Text conditions and use the following settings:

Step 10

Once you have activated all the conditions you need, press OK to save the changes to the Profile.

Step 11

Now from the drop down menu, select the Profile you just created.

Step 12

After selecting my profile I have noticed that an error has been listed within the panel. To view the details click on the drop down triangle buttons until there is no more.

Click once on the error at the bottom of the list, circled below.

Step 13

The info box at the bottom of the panel will detail the error and even offer a solution to fix it. In this case Live Preflight has found that the Type is too small.

Click on the hyperlink to right of the description and if possible Live Preflight will take you to the error.

With the Preflight panel still open I have increased the point size. The Preflight panel picked up on my amendments and in real time took the error away from the panel.

Conclusion

Take some time to note down some errors that you keep experiencing within your work and use them to build a Live Preflight profile that will automatically spot problems on future layouts.

Vectortuts+

If you’re in the north of the northern hemisphere as I am, it’s coming towards winter. With the holidays coming up, we’re hoping for a white holiday! In today’s tutorial, I’m going to show you how to create a very basic snowy seamless pattern. It is aimed at those who are new to Adobe Illustrator and goes over some great tools that you can benefit from in future projects.

Step 1

You’ll need to enable Smart Guides for this tutorial, as it will make things a lot easier. You can do this by going to View > Smart Guides (Command + U).

Use the Rectangle Tool (M) to draw a long rectangle. With the Pen Tool (P), grace the mouse around the center of the top line of the rectangle until it highlights the center point and says “intersect”. This is where you can add a new point exactly in the center of this line.

Then use the Pen Tool (P) to click on the top corners to remove the points so you’re left with a triangle.

Step 2

I’m going to use the triangle to create a pine tree shape. So select the triangle and Copy (Command + C) and Paste in Front (Command + F). Using the Free Transform Tool (E), move the shape on top of the other and while holding Shift + Alt, grab the corner of the boundary box and reduce the size.

Duplicate both shapes and do the same and then duplicate all four shapes and repeat until you have a pine tree shape, as shown below.

Step 3

Select All (Command + A) of your shapes and using the Align panel (go to Windows > Align if not visible) and select Horizontal Align Center.

To combine the shapes to make them one, use the Pathfinder panel (go to Windows > Pathfinder if not visible) and select Unite.

Step 4

Adobe Illustrator comes with a variety of options in terms of color if you’re not so great at picking colors out of thin air. One of the options are it’s many Swatch Libraries. You can access these from going into the drill down menu in the top right of the Swatch panel, then Open Swatch Library > Nature > Foliage.

By clicking on the folder at the beginning of the groups of color, it will add the collection to your Swatch panel. I’ve selected “Foliage 1″ and “Foliage 7″. You can then close the Library with the X in the corner to give you more space.

Step 5

I’m going to create groups of three trees with varied colors. So Copy (Command + C) and Paste (Command + V) the shape and use the Free Transform Tool (E) to alter it’s width and height. Alter the colors of the trees to whatever you desire and then you’ve got one set of trees, Group them (Command + G).

As you can see, I’ve created a variety of Groups here, but only used about 4-5 different shades of green.

Step 6

Another way of accessing further color options is using the Color Guide panel. To use this, first select a color from your Swatch panel. I’m going to be using a light gray as I’m wanting to create the snow in this scene. This will be your starting color.

Use the drop-down menu in Color Guides to then select the set of colors you’re aiming for. In this case, I’ve opted for Monochromatic, as I’d like to maintain similar shades of gray/blue.

Once selected, you can see a variety of shades and tints. You can alter this view and range by going into the drill down menu and ticking “Show Warm/Cool” or even “Show Vivid/Muted”. What this will do is give you a different selection of colors similar to the “Monochromatic” color guide you’ve selected. Yet, in this instance, I’m going to keep it on the default of “Show Tints/Shades”.

Hold down Command and select the colors you feel will fit into your scene and then go into the drill down menu and select Save Colors as Swatches. This will add your selected colors into a folder in your Swatch panel.

Step 7

Using the Rectangle Tool (M) again, I’m going to draw a much longer, slim rectangle. Duplicate it and change the color, duplicate again until you’ve got five rectangles with varying colors.

Select all of your rectangles and use the Align > Horizontal Align Center option to centralize them all and then Group them (Command + G).

Step 8

I’m wanting to give the impression of rolling hills and as you can see, our rectangles are not so rolling! So to do this, I’m going to use Warp Options to assist me. Select the Group of rectangles and go to Object > Envelope Distort > Make with Warp (Alt + Shift + Command + W). From the drop down Style menu, select Twist and I’ve used the options shown below.

Step 9

As I’ve got hard edges on the top and bottom, which aren’t looking so “rolling”, I’m going to use the Direct Selection Tool (V) to select one of the points and drag it down a little to create a slight curve in the top of the warped shape.

Step 10

Duplicate your Envelope shape and move it towards the bottom. Remember to use Align > Horizontal Align Center to ensure it’s all flush at the sides.

Step 11

There will be a gap between the two envelope shapes, so I’m going to add a Rectangle (M) in the background with the fill color of the rolling hill in the bottom of the shape. If you’ve forgotten which color it is, use the Eyedropper Tool (I) to get the color.

As you’ve got Smart Guides enabled (Command + U), you can hover over the bottom left corner until it says anchor, and has a hollow square on your cursor, then draw your rectangle accurately over the area, finishing in the top right corner.

Put this shape behind your envelope shapes and then Group them (Command + G).

Step 12

Now to create a simple snowflake. Using the Line Segment Tool (\), hold down Alt + Shift and drag down to create a perfectly vertical line.

Hover over the line until it’s highlighted and your cursor says “path” and add some additional lines at the top of the line. As you’ve used Smart Guides and started the lines on the “path”, all lines should be flush on the main line.

Step 13

Select the decorative lines from the top of your snowflake and duplicate them. Then we’re going to reflect them and put them at the bottom of the line. Go to Object > Transform > Reflect and select it on the Horizontal Axis and click on OK.

While your decorative element is selected, move them over to the bottom of your snowflake shape. If you grab the lines at the “V” shape, which is aligned at the top of the snowflake, you can use Smart Guides to find the end point of the stem.

Once done, Group up all the lines (Command + G).

Step 14

Now to make the actual snowflake. In order to do this, I’m going to need to rotate and duplicate the lines we have. However we can do this without drawing any additional lines by using the Transform Effect.

Select your snowflake group and go to Effects > Distort & Transform > Transform. I’ll explain the figures I’ve placed and why.

There are 360 degrees in a circle and a snowflake has 6 prongs to them. Therefore the Rotate Angle will be 360/6 = 60 degrees.

As stated, a snowflake as 6 prongs; our initial shape has 2 prongs already. Therefore the copies value will be 6/2 = 3, then minus 1 (which is our initial shape) which leaves us with 2. We’ll only need it duplicated twice.

Step 15

Place your tree groups around the rolling hills and duplicate the snowflake design across the area. By using the Free Transform Tool (E) to alter the length and even the width, you can create a variety of different styled snowflakes. Remember to rotate some of them with the Free Transform Tool (E) and alter the colors as shown below.

Step 16

Group up all of the elements of the design (Command + G) and then drag and drop them into the Swatch panel. This will make it a seamless pattern you can then use!

Conclusion

You’ve now created a simple snowy seamless pattern, using some basic tools and effects. I hope you’ve enjoyed today’s tutorial and I wish you all the very best for the holiday season!

Vectortuts+

In the following tutorial you will learn how to create a steel vector power button set in Adobe Illustrator. A power button symbol can be used on a interface design or as a positive digital metaphor in your design work. Let’s get to work using numerous shape building techniques, combined with Illustrator effects, and learn to add nuanced lighting to make glossy buttons with steel plating. It’s time to turn on your own vector power button icon.

Step 1

Create a 700 by 500px, RGB document. First, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 10px. Go to Edit > Preferences > Guides > Grid, enter 10 in the Gridline every box and 1 in the Subdivisions box.

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to replace the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Start with the Ellipse Tool (L). Create a 90px circle, fill it with none, but add a 16pt stroke. The color is not important. Make sure that your circle is selected and go to Object > Path > Add Anchor Points. This will add four new anchor points for your path. Switch to the Direct Selection Tool (A), select the top anchor point and hit the Delete button from your keyboard. Obviously, this will remove that anchor point.

Now, you need to add a some roundness for the ending points of the remaining path. Select your path, go to the Stroke panel (Window > Stroke) and click on the Round Cap button from the Cap section. In the end your path should like the third image shown below.

Step 3

For the following step you will need a grid every 1px. Go to Edit > Preferences > General and enter 1 in the Keyboard Increment box. Pick the Rectangle Tool (M), create a 16 by 40 px shape and place it as shown in the following image. Fill it with the same color used in the previous step, then go to Effect > Stylize > Rounded Corners. Enter an 8px radius and click OK.

Step 4

Select the two shapes created so far, go to the Symbols panel (Window > Symbols) and click on the New Symbol button. It’s the little file icon from the bottom bar.

The Symbol Options window should open. Enter "Power Symbol" in the Name section, pick Movie Clip from the drop down menu and click OK. Have a new look at your symbols panel and you will find your fresh symbol. Go the the Layers panel and remove the existing symbol.

Step 5

Return to "gridline every 10px". So, go to Edit > Preferences > General and enter 10 in the Keyboard Increment box. Pick the Ellipse Tool (L), create a 250px circle and fill it with R=241, G=242, B=242. Make a copy of this circle (Command + C > Command + F) and move it to the right, as shown in the following image.

Step 6

Select the left circle and go to Effect > 3D > Extrude & Bevel. Click on the More Options button then enter all the data shown below. Don’t forget to check the "Draw Hidden Faces" box from the bottom of the window.

Continue and click on the Map Art button. Go to "Surface 1" and select "Power Symbol" from the symbol drop-down menu. Rotate it as shown in the following image then click OK.

Select the right circle and hit Shift + Command + E. This will add the same 3D effect. You only need to make a small adjustment. Make sure that this right circle is still selected and go to the Appearance panel. Open the existing 3D Extrude & Bevel effect and decrease the Extrude Depth to 50pt.

Now, your shapes should look like the following image. The left shape will be the released button, while the right shape will be the pushed button.

Step 7

Now we’ll focus on the released button. Select it and go to Object > Expand Appearance. This will expand your 3D effect creating a group with a bunch of subgroups, shapes and clipping paths.

Go to the Layers panel and expand this group. Here is how you can easily do it. Hold the Alt key and click on the little arrow icon from the left of the group. Now that you can see all the content of your group, let’s make some changes.

First, delete all the Clipping Paths. Next, delete the group of shapes selected in the second image. Select the two shapes that make up the power symbol and go to Object > Compound Path > Make. This will turn them into a single shape, a compound path.

Select the group of shapes from image #4 and click on the Unite button from the Pathfinder panel. Make sure that the resulting shape is filled with R=128, G=130, B=133. Reselect the main group and hit Command + Shift + G several times to get rid of all the groups and subgroups.

Now, let’s make a quick recap. You should have a light gray circle, a second circle hidden in the back (you’ll need this shape later), the power symbol and the dark, gray shape at the bottom.

Let’s focus for a second on the hidden circle. It’s an important piece of the final illustration so let’s make it noticeable. Go to the Layers panel, Double-click on this path and name it "Black". Also, to make sure that you don’t select/move it accidentally, lock it.

Step 8

Disable the Snap to Grid and go to Edit > Preferences > General. Enter 1 in the Keyboard Increment box and click OK. Focus on the bottom, gray shape. Select it and make two copies in front (Command + C > Command + F > Command + F).

Select the top copy and hit the up arrow twice. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 9

Again, select the bottom, gray shape and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the up arrow four times. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 10

Once again, select the bottom, gray shape and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the up arrow six times. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 11

Next, you need so add some extra details for the bottom gray shape. Select it, go to the Appearance panel and click on the Add New Fill button (the little, white square from the bottom bar). Obviously, this will add a second fill for your shape.

Select it from the Appearance panel and use the linear gradient shown below. The yellow zeros from the gradient image stand for opacity percentage. Add a third fill for this shape and use the radial gradient shown below. Remember that the yellow text stand for Opacity percentage while the white text stands for location percentage.

Step 12

Keep focusing on the shape edited in the previous step. Select it and add a fourth fill. Select it from the Appearance panel and make it black. Lower the Opacity to 8%, change the blending mode to Multiply and go to Effect > Artistic > Film Grain. Enter the data shown below and click OK.

Step 13

Next, you need to mask the shape created in the previous step. This will hide the Film Grain effect that exceeds the edges of the shape. Select it and make a copy in front (Command + C > Command + F > Command + F).

Select this copy and hit the D key from your keyboard. This will add the default properties for your shape (a white fill and a 1pt, black stroke). Remove the black stroke. Now, select this white shape, along with the shape edited in the previous step and go to the Transparency panel (Window > Transparency). Open the fly-out menu and click on Make Opacity Mask.

Step 14

Select all the shapes that make up the bottom area of your button and group them (Command + G). Go to the Layers panel, Double-click on this group and name it "Bottom".

Step 15

Move to the top circle shape. Select it and go to Object > Path > Offset Path. Enter a -1px Offset and click OK. Select the resulting shape and make a copy in front (Command + C > Command + F).

Select this copy and hit the down arrow twice. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the fourth image. Don’t forget that the yellow zero stands for Opacity percentage.

Step 16

Reselect the top circle and go to Object > Path > Offset Path. Enter a -1px Offset ad click OK. Select the resulting shape and make a copy in front (Command + C > Command + F). Select this copy and hit the up arrow once.

Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the fourth image. It’s the same gradient used in the previous step.

Step 17

Reselect the top circle and make a copy in front (Command + C > Command + F). Go to the Layers panel and make this copy invisible. Reselect the remaining, visible circle and fill it with the radial gradient shown in the second image.

Make sure that this shape is still selected and go to Object > Expand. Check the Fill and Gradient Mesh boxes and click OK. This will create a new group with a gradient mesh a clipping path. Go to the Layers panel, find this group, remove the clipping path and ungroup the mesh (Command + Shift + G).

Step 18

You might have already noticed that the mesh is too large. You need to resize it. Select it and go to the Transform panel. Simply enter 249.904 in the width box and 244.534 in the height box. This will bring the mesh to the desired size.

Now, let’s add some color for this mesh. Pick the Direct Selection Tool (A), select all the mesh points and set the color at R=167, G=169, B=172. Continue with the Direct Selection Tool (A) and select the middle mesh points. Set their color at R=209, G=211, B=212.

Step 19

Pick the Mesh Tool and add a new mesh path as shown below. Switch to the Direct Selection Tool (A), select the four mesh points highlighted in the following image and set their colors at R=188, G=190, B=192.

Step 20

Continue with the Mesh Tool and add two new mesh paths as shown below. Switch to the Direct Selection Tool (A), select the four mesh points highlighted with white and set their colors at R=209, G=211, B=212. Select the four mesh points highlighted with blue and set their colors at R=188, G=190, B=192.

Step 21

Go to the Layers panel and turn the copy created in the seventeenth step back to visible. Move it right above the mesh and fill it with black.

Step 22

Select the black shape from the previous step. Lower its opacity to 60%, change the blending mode to Overlay and go to Effect > Artistic > Film Grain. Enter the data shown below, click OK and go to Effect > Blur > Radial Blur. Again, enter the data shown below and click OK. In the end your button should look like the following image.

Step 23

Select the mesh and all the shapes that make up the front side of the button and group them (Command + G). Name this new group "Front".

Step 24

Focus on the power symbol shape. Select it and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the down arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes, turn it into a compound path (Object > Compound Path > Make) and fill it with R=109, G=110, B=113.

Step 25

Reselect the power symbol shape and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the down arrow three times. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes, turn it into a compound path (Object > Compound Path > Make) and fill it with R=147, G=149, B=152.

Step 26

Reselect the power symbol shape and add a second fill. Select it from the Appearance panel. Fill it with the linear gradient shown below, lower the Opacity to 15% and go to Effect > Path > Offset Path. Enter a -6px Offset and click OK. Reselect the entire path and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 27

Select all the shapes that make up the power symbol and group them. Name it "Power Symbol". Now, select all the groups that make up this released button and group them (Command + G). Name this new group "Released Button".

Step 28

Move to the pushed button and expand the 3D effect. Again, focus on the resulting group, remove all the clipping paths and the shapes selected in the second image. You should also delete the circle shape hidden in the back, as you won’t need this one.

Step 29

Select the shapes highlighted in the first image and unite them. Select the shapes that make up the power symbol and turn them into a compound path.

Step 30

Focus on the bottom, gray shape. Select it and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the up arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 31

Again, select the bottom, gray shape and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the up arrow twice. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 32

Once again, select the bottom, gray shape and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the up arrow three times. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 33

Reselect the bottom gray shape and add the properties used for the released button. You can easily copy the properties from one shape to another. Here is how you can do it. Go to the Layers panel and find the bottom, gray shape from the released button.

Focus on the right side of the Layers panel and you’ll notice that every shape comes with a little circle. It’s called a target icon. Hold alt, click on this circle and drag onto the item to which you want to copy appearance attributes. Now that you transfered the properties mask this shape like you did in step thirteen. Don’t forget to group all the shapes that make up the bottom area of this pressed button.

Step 34

For the front side of the pressed button we’ll use a copy of the "Front" group. Go to the Layers panel, into the "Released Button" group and duplicate the "Front" group.

Drag this copy outside the "Released Button" group. Select this group copy along with the front circle from the pressed button and go to the Align panel. Simply click on the Horizontal Align Right and Vertical Align Bottom buttons. Now, your group copy should be placed as shown in the final image.

Step 35

Move to the power symbol. Repeat steps 24, 25 and 26 or use the technique shown in the previous step. The symbol from the pressed button needs a nice Outer Glow effect. Simply select the power symbol shape and go to Effect > Stylize > Outer Glow. Enter the data shown in the second image and click OK.

If you choose to repeat those three steps don’t forget to group the final shapes that make up your power symbol. Finally, select all the groups that make your pressed button and group them. Name this final group "Pressed Button".

Step 36

Return to the "Black" shape and unlock it. Select it, send it to the bottom of the Layers panel (Shift + Command + Left Bracket key) and go to Object > Path > Offset Path. Enter a 3.5px Offset and click OK. Fill the resulting shape with R=35, G=31, B=32, and delete the original "Black" shape.

Step 37

Go to the Layers panel and make the "Released Button" group invisible. Select the shape made in the previous step and make a copy in front (Command + C > Command + F).

Step 38

Re-enable the Snap to Grid. For the following step you will need a grid very 5px. Go to Edit > Preferences > General and enter 5 in the Keyboard Increment box. Pick the Ellipse Tool (L) and create four, 25px circles. Fill them all with R=35, G=31, B=32. Now place them as shown in the following image, then turn them into a compound path. Select it and make a copy in front.

Step 39

Select the front, large circle along with the front compound path created in the previous step and click on the Minus Front button from the Pathfinder panel. This will create a group with four cut circles.

Step 40

Select the four shapes created in the previous step one by one and fill them with the linear gradient shown below. Don’t forget about the yellow zero.

Step 41

Disable the Snap to Grid. Select the top, left cut circle and make two copies in front. Select the top copy and hit the down arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 42

Select the top, right cut circle and make two copies in front. Select the top copy and hit the down arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 43

Select the bottom, left cut circle and make two copies in front. Select the top copy and hit the down arrow and the right arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 44

Select the bottom, right cut circle and make two copies in front. Select the top copy and hit the down arrow and the left arrow once. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 15%.

Step 45

Select the other large circle along with the other compound path and click on the Unite button from the Pathfinder panel. Select the resulting shape and go to Effect > Stylize > Drop Shadow. Enter the data shown below image #2 and click OK.

Step 46

Re-enable the Snap to Grid. For the following step you will need a grid every 1px. Go to Edit > Preferences > General and enter 1 in the Keyboard Increment box. Pick the Ellipse Tool (L), create a 8px circle and fill it with R=88, G=89, B=91.

Add a second fill for this shape and select it from the Appearance panel. Set its color at R=35, G=31, B=32, and go to Effect > Path > Offset Path. Enter a -2px offset and click OK. With this second fill still selected go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK. Return to the Appearance panel and add a 0.5 stroke. Align it to inside and set the color at R=35, G=31, B=32.

Step 47

Select the shape made in the previous step and make three copies. Now, place these four circles as shown in the following image. The Snap to Grid will ease your work. Select all these dark shapes and group them. Name this group "Black" and send it to back (Shift + Command + Left Bracket key).

Step 48

Return to "gridline every 10px" and turn the "Released Button" group back to visible. Select the "Black" group and make a copy in front. Select this copy and move it below the pressed button as shown in the second image. Again, the Snap to Grid will ease your work.

Step 49

Pick the Ellipse Tool (L), create a 270 by 290px shape and place it behind the released button, as shown in the following image. First, send this shape to back (Shift + Command + Left Bracket key) and fill it with the linear gradient shown below. Next, lower its Opacity to 40% and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK. Make a copy of this simple ellipse and drag it behind the pressed button.

Step 50

For the background use the Rectangle Tool (M). Create a shape the size of your artboard, fill it with R=50, G=50, B=50 and send it to back (Shift + Command + Left Bracket key).

Add a second fill for this shape and make it black. Select it from the Appearance panel and go to Effect > Pixelate > Mezzotint. Select Fine dots from the drop down menu, click OK, then go the Effect > Artistic > Film Grain. Enter the data shown below and click OK.

Step 51

Finally, you can replace the gray tints used for the power symbol with a different set of colors. In the following images you can find a few examples. Use the top, two colors for the thin compound paths and the bottom color for the overall power symbol. Don’t forget to edit the Outer Glow effect used for the pressed button.

Conclusion

The final vector power button icon set is below.

Vectortuts+

As we count down the days until Christmas, it’s time to make our lists and check them twice. Today we have an awesome gift guide full of hand picked goodies for illustrators and designers. Make sure to link this post on Twitter, Facebook and G+ – you never know – a friend or two may take it as a hint.

• 

  Vector Basic Training: A Systematic Creative Process for Building Precision Vector Artwork (Voices That Matter) by Von Glitschka

  The perfect gift for vector illustrators of all skill levels. Von Glitschka will show you how to create elegant curves and precise anchor points for your designs and teach the very best ways to make professional illustrations using Adobe Illustrator. This book also comes with a DVD!

• 

  Adobe Illustrator Keyboard Sticker Set

  Do you know someone who finds it hard to remember all of the shortcuts from Adobe Illustrator? They might need these.The Adobe Illustrator Keyboard Sticker Set is compatible with all keyboards (Mac, PC and Laptops).

• 

  How to Grab the Attention of Art Directors & Editors by the Simple Use of Postcards by Max Scratchmann

  Books make great gifts, especially ones that are full of interesting pictures or useful information. This book is packed with both. Browse a great selection of attention grabbing postcards and learn the skills to make your own.

• 

  Wacom CS100W Bamboo Stylus for iPad

  iPads are nice, but you can make them awesome with this stylus pen by Wacom. Available in six different colors, the Wacom Stylus for iPad has the comfort, elegance and sophistication you can expect from Wacom. It works great with the free Bamboo Paper App!

• 

  The Vector Brushes Sourcebook: 300 Unique Brushes for Digital Illustration
  by Emily Portnoi

  A very helpful gift for designers and illustrators who want to learn more about how to make, apply, edit and use vector brushes. This book also includes a CD with 300 high-quality, royalty-free, and original brushes. It’s like two gifts in one!

• 

  Illustration 101 – Streetwise Tactics for Surviving As A Freelance Illustrator
  by Max Scratchmann

  One of the most useful and thoughtful gifts you could give to someone who works in freelance illustration. This book is a fun to read manual on how to turbo charge your freelance career and have fun while you do it.

• 

  CMYK Light Shade

  Show your appreciation for the print designer in your life with this CMYK lampshade. It can be set as either a ceiling or a lamp shade, handy!

• 

  Drawn In: A Peek into the Inspiring Sketchbooks of 44 Fine Artists, Illustrators, Graphic Designers, and Cartoonists

  Take a peek inside the sketchbooks of artists Jessica Hische, Mike Perry, Jen Corace, Matt Leines, Jill Bliss, Camilla Engman, Anders Nilsen and many more. With large full-color images and profiles on each artist, this is a great gift for a creative daydreamer.

• 

  Cocoon GRID-IT Organizer

  Versatile organization with endless configuration, the Grid-IT organizer is designed to hold items firmly in place and keep your cords, pens, phones, pencils, USB sticks, and everything and anything that can get stuck at the bottom of your bag in place. This is a good gift for a designer on the go.

• 

  Limited Edition Icon Prints by Susan Kare

  The master of icon design, Susan Kare, has signed limited edition prints of her most memorable icon designs. Do you know a mac fanatic? They will love one of these!

• 

  Layers Frame

  Spend all day staring at artboards? Why not add some to your office. The Layers Frame comes with a metal support with a picture magnet frame and looks great with both photos and illustrations.

• 

  X-Rite i1Display 2 – Color Calibrator for LCD, CRT, and Laptop Displays
  

  This season, give the gift of high-end, accurate, on-screen color calibration for LCD, CRT and Laptop displays. It may be on the expensive end of the gift scale, but we think it’s priceless.

• 

  Pantone Espresso Gift Set

  Designers + Coffee + Pantone = the perfect gift. OK, it may not be the perfect gift for everyone, but it’s very good for designers who run on caffeine and print checks.

• 

  Pantone Folding Chair

  If Designers + Coffee + Pantone = the perfect gift, then an added Pantone chair must be even better. OK, honestly, a Pantone chair doesn’t make much sense but it could look good in the meeting room or on the office balcony.

• 

  Pantone Toothbrush Set
  

  Designers + Coffee + Chair + Pantone = Great gift, + Toothbrush = The designer is working too hard and should go out and celebrate. Happy Holidays from Vectortuts!

Vectortuts+

In Today’s article we look at watermarking your artwork. We’ll consider the opinions of those who use them in their work. Should you watermark your work to prevent misuse? Let’s read on to find out.

Watermarking Your Artwork Online

In a perfect world, we could post our artwork online without people misusing it or even claiming it as their own. However we don’t live in a perfect world and we have to take measures to prevent such activities from happening to the work we’ve spent hours, days and sometimes weeks and months creating. One of those measures is watermarking.

Watermarking is when you imprint your name onto a piece of work. This can be to assert your identity onto the piece and it can be there to help prevent it’s misuse.

Watermarking and Vector Artists

So I wanted to gather the opinions of others for today’s article to see what their views are on watermarking. Usually I’d ask for peoples work without watermarks because it distort the vector art shown; however, due to the nature of the article, I thought it would be appropriate to see some watermarked work. Specifically, those which are found on deviantART.

Roberlan

Yes, I use them a lot. It would be nice to have my work shown with no watermarks, as I think it is much better for viewing, and would be nice to show it even in larger sizes; but that’s just not possible. This is because there are a lot of people who don’t respect other peoples work and try to use it somehow.

There are two kinds of these types of people: the ones who shamelessly steal your work to sell and the ones who steal just because they think its OK “to use it as an avatar on Facebook”. Not OK.

So I think it is important for every artist to protect their work, because sometimes you can’t have the law help. In the beginning I used to just put my signature, then started using the dA watermark, and lately I put a lot of small watermarks on top the image. I think this helped avoid some of the problems I’ve been facing.

Yes, I think watermarks can make the work a little less appealing. I really don’t like to use it at all, and for many years I avoided it, but then I started to see a lot of my work stolen, used on t-shirts, avatars, wallpapers, etc. So I started using the default dA watermark.

Of course, it is a risk we take as artists in order to try to protect our work and prevent it from theft. This happened many times to me and is really frustrating, even with watermarks some skilled vector “thieves” try to use it or live-trace it.

I think the best way is still the watermark. I can’t think of other ways to show our work in a safe way and still get the exposure.

Aseo

Well in my case, I put my logo/icon over the work but not to the extent that
it’s overlapping the art for it often ruins the presentation.

In cases of art theft however, it helps only if the thief is not fluent in using editing programs like Photoshop, etc, for you see, it’s just a matter of patience to delete and clean watermarks.

Yes, though there are some that blend naturally. In this case, what is my goal in putting a watermark?

If I go for prevention of art theft I clearly have to sacrifice the presentation. Big large text is a deal breaker and small fonts/icons defeats the purpose.

I think it’s a matter of artist approach. One way is putting lo-res works in the web.

Never put something Higher which could be traced. Watermarks can be a bonus if it is well executed to be a part of an artwork.

CQCat

In a high speed information world we are in, your work could be blogged and tweeted so many times before you know. I only watermark my work by putting my signature and URL at the bottom of my pieces I upload online. This is a quick and easy way for people to look me up if they are interested in my work and want to see more.

Anything you post online, with or without watermark, if someone wants to steal it or trace it or claim as their own, they will do it. There is no 100% guarantee that your art stays safe once it’s online. I do not worry about that too much. If someone steals my work, claims to be their own, or use it for commercial purposes without my consent, I will take action against that behavior.

But so far, I haven’t had any situation known to me. And people always ask me for permission to use my art for personal purposes. I trust people in the art community and there are certain things, like style and talent, you simply cannot steal.

I think that is a personal choice, to have watermark or not, what type of watermark to use over their work. I prefer seeing other people’s work without a big translucent watermark in the middle of the piece. But everyone has their own judgement of how safe the online environment is when they share their work. It is really up to them to take any measures necessary to protect their art and hard work.

Personally, I prefer to have my signature and URL on my artwork. It serves several purposes. First, it states that I own the copyright of the art. Second, people can find more information about me via the URL, especially when the work is blogged or featured somewhere far away.
Third, it doesn’t cover most of my art and allows people to appreciate the art as I see it.

I understand this is very minimal protection against any real theft. I had a few good-hearted fans on dA warning me about potential theft from other people. They turned out to be false alarms. But I do appreciate what they did for me. And I do believe most of the people in our art community are good and sincere.

PixelledandDead

I personally don’t like to watermark my work, but it’s a necessary evil. There are way too many jerks out there that take full advantage of un-watermarked art and sell it off as their own. I’ve actually caught someone using someone else’s artwork on eBay, using their work to make faces for watches sold for .99 a piece.

It was so surprising, and when they were caught, they made it seem like it was an innocent accident. I still don’t understand how that works…accidental downloading of something you found online, and making a conscious act to use it for your own profits?! I think not!

As far as tracing, there’s a difference between a child tracing and an adult tracing. If you like something enough that you would want to create a “likeness”, then I’m not going to wig out about it. I have no claim to a certain pose, or a hair color, but there’s no appeal in making something look identical to someone else’s work when you’re not expressing your own creativity. We work hard to produce what we do in this community, and if you’re tracing for “learning” purposes give credit where it’s due. We share our artwork with the world, but no one wants to be taken advantage of.

I think it all depends on how noticeable the watermark is. If it’s soft enough, I don’t think it’s very noticeable at all. It’s intention is to make it difficult to steal and exploit, and to a certain extent to advertise the artist’s other info, like a website or email address where they can be further contacted and possibly commissioned.

As many times as our work is copied to hard drives, and other social websites like Facebook, and MySpace links to the original work tend to get lost in the mix. So this is just that extra little helping hand to get them back to the original posting.

I personally like the watermark provided by DeviantArt. It’s simple, and very easy to apply. I’ll only really make my own if I have a commission like a tattoo that has sparked more interest in acquiring it without paying. I can express as many times as I want, until I’m blue in the face but I’ll still get remarks like this under my artwork:

Anonymous: Can you add more to it….plz. And thank you

Now I’m not saying he’s not an honest person that wouldn’t dare to take artwork for his own personal use, but where does someone get off asking you to add to it, though they know someone’s paid for it? I’ve got plenty of those types of examples, but I won’t bore you. I just know that there are a lot of dishonest people, with no respect for what we do, or how long it takes to do it.

The lack of sleep, food, human contact mean nothing to a lot of people, but to us, these are the things we’ve sacrificed to sit there and create path after path and point after point just to make one piece that we can be proud to share with our friends and art enthusiasts. Watermarking, I don’t like to do it, but if I can make sure people know what I do is really mine, then I’m going to continue to add them.

My Own Experience

For a long time I had little confidence in my work. I’d happily post my work without watermarks and often at a high resolution. Then one day I found my work being sold on eBay as a large print. Someone else was making money from the hours I spent creating a simple illustration, that I held little confidence in. Although initially I did have a sense of pride and found it complimentary (as absurd as this may sound now), but this soon changed to being angry and frustrated. I wasn’t even credited for the work which was being sold, it was some random name. I swiftly reported it to eBay to get it removed.

These days I’m in a bit of a weird position, because I post a lot of results to tutorials I’ve done via social media and art community websites. People are more than welcome to take what I’ve taught them and duplicate the images present via their own means. For this reason, I try to keep away from using watermarks, to make the image look as presentable as possible. This in turn may attract more visitors to the tutorials and so on.

I’ve also had a pretty naive opinion on watermarking. If a person wants your image enough, they will find a way to get around the watermark, maybe put their logo on top or even use photo manipulation to remove it. So these day’s I’m more inclined to put my website URL and signature on my illustrations so if there is an “innocent” misuse of my images, they can always venture back to see my other work.

From an article/feature writer point of view, I’ve had many an article delayed because I’ve been waiting on an artist to get back to me with work which doesn’t have obtrusive watermarks on it. So it can be an inconvenience and on the odd occasion I’ve opted to feature another artist due to deadlines in place.

Conclusion

There are pro’s and con’s with watermarking. If you’ve been posting your artwork online for a period of time, you’ve more than likely encountered some misuse of your images and so trying to prevent it can make you feel like you’re banging your head against a brick wall.

So the question is, “Should You Watermark Your Art?”. There isn’t a clear answer to this as it’s all down to the nature of the work and what you want to sacrifice to get your work out there.

Think about why you share your work online. Do you do it to gain more exposure for yourself and your work? So if this is the case, then is a huge watermark covering your art the best way forward? Would your name and URL perhaps be the best way forward?

What do you feel is the most appropriate way of watermarking your work? Would you rather take away the overall look of the work with a large watermark to protect it or use a smaller watermark with a higher risk of misuse?

If you’re looking for an elegant way to watermark your work, then read this tutorial How to Create Seamless Watermark Patterns here on Vectortuts+.

Vectortuts+

Learn how to create a repeating floral pattern that’s perfect for gift wrap, desktop wallpapers or textile designs. This tutorial uses one of our very own free vector packs and is great for readers with a beginner to intermediate skill level.

Step 1

Create a new 750 px by 600 px CMYK document.

Step 2

Now set the document grid to make it easier to line up the elements. Go to Preferences > Guides & Grid and set a gridline every 50px with 10 subdivisions.

Step 3

Select the Rectangle Tool (M) and Option + Click onto the artboard to open the settings dialogue. Make a 50 px by 50 px square, click OK. This will make a portion of the repeating tile.

Step 4

Make sure your artwork is set to Snap to Grid, this will help you snap the tiles into place. If this isn’t done you can find the setting by going to View > Snap to Grid. Select the square with the Selection Tool (V) and hold down the Option key to drag the squares into place. You need to make a shape like the one in the image below (7 squares in total), this will make the repeat tile for the pattern.

Step 5

Select all of the squares and fill them with the background color of your pattern. Go to the Pathfinder Panel and (Window > Pathfinder) and click the Unite button to create a single shape.

The image below is a demonstration of how the tiles will fit together, its staggered appearance helps to place elements that will flow diagonally across the repeat without leaving large areas of blank canvas. If you’re creating your own design, you may have to piece together the tiles a few times to test and refine the design.

Step 6

For this tutorial I will be using elements from the Exclusive Freebie Pack – Shiny Vector Flowers. Arrange the primary elements of the design to take up most of the art space.

Step 7

Following the repeat of the pattern plan the secondary elements of the design, in this case I will extend the stem of the flower to meet with the edge of the tile. I’ve then added some stem at the pont where it will flow into the joining tile.

Step 8

To make the pattern swatch, make a new layer above the image and select the Rectangle Tool (M). Option + Click onto the artboard to open the settings dialogue. Make a 350 px by 350 px square, click OK. Position the square near the middle of the artboard with the pattern tile in the bottom left side corner.

Step 9

Go back to the image layer and select the entire pattern tile with the Selection Tool (V) and hold down the Option key to drag the tiles into place. The placement can be a bit confusing at first so I’ve colored the tiles below to show them more clearly.

The random colors in this image are to demonstrate the position of each tile.

Step 10

The finished swatch should look something like the image below. As you can see there’s some room for further design tweaks. With the main tile finished, anything inside of it can be changed without ruining the repeat.

To add some variation to the design I’ve changed the position and color for some of the secondary elements, this creates some focus points within the main pattern.

To make the design into a pattern tile, copy the square from the layer above the artwork and paste it over the main artwork. (Command + C then Command + F).

Set the fill and line color of the square to none. Move the un-filled square to the back with Shift + Command + Left Square Bracket. Select all of the objects and drag them into the Swatches Panel.

Conclusion

Here’s the finished design. There’s many different ways to use this method of pattern making so be sure to experiment with it and have fun. If you liked this tutorial you may like my previous pattern tutorial How to Make a Repeating Japanese Wave Pattern in Adobe Illustrator.

Vectortuts+

A few times a each month we revisit some of our reader’s favorite posts from throughout the history of Vectortuts+. This tutorial by Simona Pfreundner was first published on September 12th 2008.

In this tutorial, we’ll explain how to create an open book mostly with Illustrator’s 3D Extrude & Bevel Tool. We’ll create open pages with graphics and add a wavy background. The book can be customized by applying your own graphics to the pages.

Step 1

Let’s start by opening a new document. Draw a rectangle with the Rectangle Tool (M). I chose the size of 415pt by 6pt and filled it with a nice blue. Draw a circle with the Ellipse Tool (L), and make it 27px in diameter. Place the circle in the center of the rectangle. Set the Stroke to 6pt and choose the same blue. Next, go to Object > Path > Outline Stroke.

Step 2

We need to combine both objects. We can do so by selecting both and then choose the Divide tool in the Pathfinder Palette. Delete all the unnecessary paths, then select the final desired shape, and choose the Add to Shape Area in the Pathfinder Palette.

Step 3

Select the shape, and go to Effect > Stylize > Round Corners, then choose 4pt as a value and click OK. Next, go to Object > Envelope Distort > Make with Warp. Choose the first Arc Option, click Horizontal, and set the Bend to 1%. Then go to Object > Expand. We now have our base object for the book.

Step 4

Select the shape and go to Effect > 3d > Extrude & Bevel. Set following values: -35 degrees, 31 degrees, -10 degrees. Also, set the Perspective at 131 degrees and Extrude Depth at 400pt. This setting will be used again and applied to other objects in order to build our book.

Step 5

Make a copy of the book hardcover and expand it. (Object > Expand Appearance). Select the shape and choose Add to Shape Area in the Pathfinder Palette, then fill it with black.

Step 6

Apply a Gaussian Blur to the black shape. Choose a blur of 33px. Put this under the hardcover shape as a shadow. Set the Transparency to 70% and offset it a little.

Step 7

Create a line that is 411pt long and add a Stroke of 1pt. Set the Stroke to blue. Go to Object > Envelope Distort > Make with Warp. Select the Arc Option, set the Bend to 1%, and 45% for the Horizontal distortion.
Keep the shape selected and apply the same 3D Extrude & Bevel values as we did in Step 4. Click on the More Option Button, then in the Surface Section add one more highlight, and click OK. Place the blue shape on top of the hardcover.

Step 8

Create a light grey line with the Pen tool (L) about 200pt long and set 0.5pt for the Stroke. Duplicate this line eight times with a gap of about 2 pt or so, then group them together.

Step 9

Select the lines and duplicate/mirror them. Scale/skew it only on the right side. You can do so by selecting the Scale Tool(E), click on the bounding box corner, then hold down the Command Key and drag the mouse downwards. Group it again and select the Warp Tool (Shift + Alt). Apply the Warp tool to the lines, as shown below. You want to be careful not to do to much warping, just enough that it looks like pages on top of each other.

Step 10

Select the “pages object” and apply the same 3D Extrude & Bevel values as we did in Step 4 and Step 7. Click on the More Option button, then in the Highlight Section, add two more highlight and click OK.

Step 11

Make a duplicate of the “3d pages” and Expand their Appearance. Choose Add to Shape Area in the Pathfinder Palette and fill it with black. Apply a Gaussian Blur of 8px again. We’ll place this as a small shadow under the “3d pages,” just above the blue lines we created. Set its Layer Mode to Color Dodge. Select the “3d page” object and make a copy of it on top of itself, then set the Layer Mode to Overlay.

Step 12

Let’s set up our page graphics. I chose images of the tutorials I created for VECTORTUTS, just to stay neutral and not to come into any copyright issue. Of course you can choose whatever moves your heart. You can add text, pictures, graphic textures, etc. The only important thing is to create a symbol of them.

Step 13

Let’s create the pages where we’ll add the graphics. Create a line with the Pen tool (P), as you see in the image below . You want to make sure that you have only three path points for now. Give the path a white Stroke.

Apply the 3D Extrude & Bevel with the same values as we used before (see Step 4, Step 7 and Step 10). Make sure that this time you do not add any shading. Then click the Map Options and go to Surface Number 3. There choose the graphic we created earlier as a symbol. You can scale it, move it around, and decide where it looks the best.

Step 14

Apply the same method to the other side of the “3d page” via the 3D Tool Map Option. Of course, you should have already created a second graphic and dragged it into the Symbol Palette.

Step 15

Once you have applied the desired graphics, select the object and put it over the 3d pages object, then set the Layer Mode to Multiply. If you feel you need to adjust the pages, you can easily add path points to the line. You can also adjust the path handles with the Direct Selection toll (A). Since we didn’t expand the appearance, the 3D values will be adjusted as well.

Step 16

Create another pages path with the Pen tool (P). Apply the same 3D values and expand the appearance. Select the shape and choose Add to Shape Area in the Pathfinder Palette.

Step 17

Draw a line in the middle of the object. Let the path extend outside of the edge, then select both, and choose Divide in the Pathfinder Palette. This will give us a two page shape.

Step 18

Select each page with the Direct Selection tool (A) and apply a light grey to white linear gradient. Repeat this with the other shape by applying the same gradient. You might have to experiment a little to apply a good looking gradient.

Step 19

Place the gradient page shape over the other pages with the graphics, then set the Layer Mode to Overlay. Go to Effect > Stylize > Drop Shadow and apply the settings you see in the image below.

Step 20

Let’s create a background for the book. Create a square with the Rectangle Tool(M), then fill it with a nice radial blue to white gradient. Put the gradient highlight in the top left corner.

Step 21

Create a long triangular shape, fill it with the same gradient, and set it to Linear.

Step 22

Select the triangular shapes and create two duplicates by rotating next to each other. An easy way is to first select the shape, then choose the Rotate tool (O). Click in the top corner, hold down Shift + Alt + hold down the mouse key, and drag it counterclockwise. Then press Command + D once.

Step 23

Select all three shapes and group then. Then go to Object > Envelop Distort > Make With Warp. Select the Twist Options and check Horizontal. Choose 50% for the Bend and 10% for the Vertical Distortion. Now place the background gradient shape and the swirl behind the book.

Conclusion

Voila! Our 3D Open Book is complete. I put a rounded corner square on top of all layers, placed it nicely to frame the book and the background, then applied a Clipping Path. You can of course change colors, add different graphics to the pages, and even add pages to it. I hope you enjoyed this tutorial.

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.

Vectortuts+

Quick Apply is a feature that holds the ability to allow an InDesign user to save time when accessing styles, commands, scripts and features. The Quick Apply panel is a shortcut to everything InDesign offers.Find out more about this handy feature at the jump.

Step 1

Make sure you have an InDesign file open, an existing design is perfect. If for some reason you don’t have a file, go to this link to download one for free: Catalog Template – InDesign Freebie. To access the Quick Apply menu, press Command + Enter.

Step 2

When the panel is first opened the items will be organized in alphabetical order. At the top of the panel there is a search field. Think of a feature you want to use and start typing a key word that describes it. I am going to search for the term ‘Pathfinder’ to gain direct access to the Pathfinder Panel.

Note: if you are wanting to apply a paragraph style or similar, make sure that the text you want to edit is selected before you action the Quick Apply method. Another example would be, if you wanted to apply a Drop Shadow, make sure a frame is selected before you enter the Quick Apply panel.

Step 3

As you start typing you will notice that InDesign tries to predict what you are searching for and will give you all matches relating to your search. Once you find the item you need, click on it, or press enter if you selected it via the arrow keys. The item or action should now perform its task.

Step 4

The next time the Quick Apply panel is opened you will notice that it has remembered your last search. Also the panel will remember where you positioned it last within the document space.

Step 5

With the Quick Apply panel open click on the triangle icon located to the left of the search field. Here you can choose to deactivate certain groups. For example, if you didn’t want to view scripts, it is possible to deselect them and they will be removed from the search list.

Step 6

Go back into the triangle icon. Next to each of the categories you will see that they have bracketed letters followed by a colon. These prefixes allow you to narrow down searches to categories. For example, if you type c: in the search field only Character Styles will display in the results.

Step 7

Another great advantage of using the Quick Apply feature is the ability to quickly access character and paragraph option menus. To do this type c: or p: then highlight any style and press Command + Enter, this will take you directly to the option menu.

Step 8

Finally the most useful way to use Quick Apply is to use it to access parts of InDesign that don’t have shortcuts. Features like Find Font and Insert Special Characters can be quickly found. So to activate the Find Font panel, press Command + Enter, type Find Font and then hit enter again.

Conclusion

Once you become familiar with Quick Apply and it’s abilities, you will certainly notice an increased efficiency in your workflow.

Vectortuts+

A few times a each month we revisit some of our reader’s favorite posts from throughout the history of Vectortuts+. This tutorial by Cody Walker was first published on November 25th 2008.

This is the first part in a series of tutorials about Isometrics. Isometric projections are a system of drawing that allows an artist to quickly and accurately draw an object without using perspective. I will go into more depth about isometrics later in this tutorial. I’m going to begin by talking about a system that is commonly used with isometrics.

VECTORTUTS PLUS

Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just /month.

Orthographics

Orthographic projections are a way of describing what an object looks like from several different views. Orthographics are also called engineering drawings or plan views. Using a set of orthographics an Illustrator can easily draw the three-dimensional object from any angle and in perspective, isometric or any number of other drawing systems. 3D modelers often use orthographics to accurately create an object in a 3D application.

An orthographic is one way to describe a three dimensional object in two-dimensional space. Typically an orthographic will have the top, side and front views of an object drawn together with some kind of scale.

An orthographic can have more then three sides drawn if the object has unique sides that would not be described clearly by just three images.

Once you have a clear set of orthographics you can draw your object in whatever method and from whatever view is required for your project. If you are planning to draw a set of orthographics from a
physical object begin by measuring. Use a ruler and a set of calipers to measure all the surfaces of the object and make notes and a sketch. Once you are finished gathering data you can use your notes to create a set of orthographics in Illustrator. And that brings us to the world of isometrics.

Isometric projections are from the family of axonometric projection systems. Isometric comes from Greek for equal measure. This is because isometrics don’t use a vanishing point system, instead lines fall onto a 30 degree grid.

Often the first impression of an isometric is that it looks off. This is more noticeable when an isometric cube is sitting next to a perspective cube. If you are going to be working in isometric there is a certain amount of distortion that comes with the territory. This is one of the factors that give isometrics their specific look. The huge upside to drawing in isometric especially using illustrator is that once you have created an object it will look exactly the same anywhere you place it.

There are no vanishing points and no horizon lines. An object will be the same anywhere on your page. This is very important because you only ever have to drawn an object once. For example you could have an assembly drawing with one hundred screws in it. But you would only have to draw one screw and then copy it as many times as needed. This is a very powerful tool for speeding up workflow.

There are many other systems that don’t require vanishing points or horizon lines and give you similar benefits. But isometrics are the only one of these systems to make the jump from the technical
illustrators toolbox to a useful skill for all graphic artists. The use of isometrics in early videogames has spawned a whole subculture of isometric pixel artists. And as the info-graphics style becomes very popular in magazines and newspapers you see isometrics being used more and more by artist with no technical illustration background.

Drawing in Isometric

Ok, now we can get into how to actually draw in isometric. The best way to start working in isometric is to make an isometric grid in Adobe Illustrator.

Step 1

Start by opening your preferences (Command K) and adjusting your keyboard increments to 1in.

Step 2

Using your line tool option and click somewhere on your page. A dialogue box will pop up. Make a 30 inch line on a 30 degree angle.

Step 3

Move your line over to the left side of your page. Now while holding Alt. tap the Right Arrow key once. Because we set the increments to 1 inch the line was copied 1 inch to the left. Repeat until you have crossed the page.

Step 4

You could repeat Step 3 from right to left with a 150 degree line. Or you can select all the lines and double click on the Mirror tool and mirror a copy of the lines horizontally.

Step 5

Now you have an isometric grid. Select > All (Command A) and hit Command 5 or View > Guides > Make Guides to turn your grid lines into guides. Save this file as an iso grid template to use anytime you want to work in isometric.

Step 6

Now we can start building objects on the isometric grid – first off a cube. Start by making a small four cornered shape with your Pen tool.

Step 7

Using your Direct Selection Tool (white arrow) and line up your four corners with a square on the grid.

Step 8

Using your Pen tool and the same method as described above, create the left and right sides of the cube. Quickly block out a four-cornered shape then move the corners into place with the Direct Selection tool. When building shapes on an isometric grid it is a good idea to start thinking of your objects in planes: top, left side, right side. This will make more complicated objects easier to visualize.

Step 9

Select all three parts and group (Command G). You now have an isometric cube. You can start making copies of the cube and quickly begin building larger shapes. You can scale the cube up or down and
build with it.

Incorporating Orthographics

Now that you know the fundamentals of building a cube on an isometric grid we can incorporate the orthographics discussed earlier.

Step 1

Make a simple orthographic, with a scale that will work with your grid.

Step 2

Build the left side first. Using the Pen tool, rough out the shape by counting grid squares. Then line up the points with the Direct Selection tool.

Step 3

Build the front of the shape. Count out grid squares, rough out the shape with the Pen tool, and clean up with the Direct Selection tool.

Step 4

Complete the top. By this point I’m sure you’ve come across parts of the shape that don’t just sit on their respective plane. This is where being able to actually read the orthographics and interpret them is essential. Or else you’ll just end up with a set of orthographics distorted onto three different planes.

Conclusion

Using the same orthographics draw the object from several different angles and orientations. Get very comfortable building basic shapes on an orthographic grid, as it will come in very useful once you start working on more complex objects.

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.

Vectortuts+

Just because you missed that awesome conference, doesn’t mean that you can’t still watch the lectures! This weekend we’re sharing a great talk from MFA Interaction Design. In this talk, Craig Mod, discusses the theory behind what books mean in a digital context and thinks deeper on the design and typography of digital books.

Vectortuts+

The Debut album of If I Were A Mountain… entitled “Dreams Are For Their Dreamers,” is an introspective EP that takes a dive into the dream world and molds it into a melody that soothes and transports the listener. This article details the process I took when creating the album art.

Final Cover Preview

Shown below is the cover art for the album. The cover was the catalyst for the rest of the design elements that were created. Read on to get a more in-depth understanding of the process involved.

Project

If I Were A Mountain… was in need of a design for their debut album. The sounds that they produce needed to be communicated visually. The design needed to present their growth as a serious force to be reckoned with, yet still appeal to their non-traditional, indie-rock fan base. The design needed to be professional yet approachable, and modern yet non-mainstream.

Pre-concept Preparation

Before creating any visuals for this project, it was important to have the fullest understanding of the music that my client produced. I made sure to listen to the entire album to get the best understanding of what the client was all about. Check out the links below to hear for yourself!

With any project there is the opportunity to extract ques and information that can provide insight into the best creative execution for a project.

1. Sunny Day Driving – 2:55
2. Victimized – 5:20
3. More to Accomplish – 5:18
4. Renaissance – 4:48
5. Dr. Jekyll Envies Me – 4:04
6. Untitled – 6:40

With any project there is the opportunity to extract ques and information that can provide insight into the best creative execution for a project. In addition to listening to each of the songs, I took a close look at the album name, song titles, lyrics and physical appearance of the band to determine more information that helped frame in the identity of the artist.

First, based on the album name I deduced that the overarching take-away that he wanted his listeners to feel was a sense of wonder.

Second, the song titles echoed the album name with titles such as “Sunny Day Driving,” “More to Accomplish,” and “Renaissance.” This further communicated the uplifting nature of the album.

Third came the lyrics. The client provided the lyrics to all the songs, which made it even easier to quickly reference what a song was about.

Last but not least was my client’s physical appearance. Artists of all types have physical characteristics that set them apart from everyone else. This was the case with my client too. I made sure note any unique qualities.

Evaluating all of these factors individually helped solidify the visual look the album needed to encompass.

Concept Brainstorming and Sketching

Armed with all of the information I had learned and discovered, I took to brainstorming and sketching.

I knew from the beginning I wanted to create a unique representation of the album title. I wanted it to be somewhat literal without being trite.

One of If I Were A Mountain’s… main visual characteristics is his curly brown hair. This is an extremely obvious feature and his fan-base has come to associate this look with him. With this in mind I found it very fitting to work that characteristic into the concept.

From there I knew I wanted to weave in his name into the execution. I decided that I would use his curly hair as the focal point of the art. The curls of his hair would double as the peak of a mountain!

With the framework of the design in place I took to drawing a quick sketch to solidify how this concept might play out on paper.

While sketching the initial concept I knew there were things that would be better left to further exploration when it came time to design the artwork at the computer level, which was the case with the artist and album name. I left these items very loose during the sketch phase.

Since creating an illustration is a much more complex and time consuming undertaking, I wanted to first verify with my client that this concept met his expectations. It’s much easier to come up with another concept, versus spending time illustrating something only to discover that the client had something else in mind, then going back to square one. Clients many times change their minds, so it’s better to be safe than sorry.

In this case, fortunately, the client did not have any changes after I described the concept. From there it was on to the fun part, creating the actual design!

Executing the Cover

I first started with illustrating the curly hair, as this would require the most time and attention. I illustrated about seven locks of hair… enough to provide some variance for the amount of hair that needed to be built up. Below are a couple examples.

Next, I tediously layered each lock of hair on top of one another to build up a convincing pile of hair. I made sure to pay close attention to create something that looks like a head of hair AND a mountain. To accomplish this I made the head slightly less round and made it form somewhat of a peak, as a mountain does. It was important for the shape to first look like hair and second to suggest a mountain.

After the basic shape of the hair was in place, I decided to work on incorporating the text. I knew I wanted something eclectic and fun to match the whimsical nature of the illustration. To give the letters their hand-drawn charm, I did exactly that, drew them by hand.

As for the album name, I wanted that to complement the free flowing nature of the artists name so I used a more rigid and vertical font there.

Once these items were in place I knew I had successfully placed the correct hierarchy on the way the album cover was viewed. It’s easy to start adding in other design elements before the more important elements are in place. For this reason I held off on adding clouds and other design enhancing elements so that I wouldn’t have to work in the essential elements around the non-essential ones.

To finish off the cover I added color and depth to the hair, drew in clouds, the background ribbon and small design enhancing elements like the music notes.

Creating the rest of the pieces was easy once the cover was complete. Obviously all of the design elements need to work in tandem, so I used the cover as the jumping off point for the rest of the elements.

Client Review

After all the elements were designed it was then time to show the client the finished design. I felt confident after all the background information I had done and was provided with, and due to the fact that I had verified the concept with him beforehand that there would likely not be many changes, if any.

And I was correct. The client had no changes to the design, so I finished making everything print ready.

Result

The client was very pleased with the finished piece and is currently working on assembling a CD release party to celebrate this step in his career! Check out the full design below.

Connect and Purchase

Like If I Were A Mountain… on Facebook and follow him on Twitter!

Vectortuts+

Today we will take a quick look at how to be creative with style sheets and make a unique and highly editable table of contents in InDesign. Let’s get started!

Step 1: Document Setup

Create a new document; the default setting should do just fine. Create a text box then create the text in the format of: Page Number, Page Title, New Paragraph, and repeat. You should have something like the following:

Step 2: Drop Cap Styles

To create the numbers we are going to use drop–caps. that way we don’t need to try to line up columns or multiple text boxes. Create a new Character Style: I called mine “Drop Caps”. Then I selected a font, size, and color as seen below.

Step 3: Creating Vertical Rules

You need to create a new stroke style. From the stroke options select “Stroke Styles,” then click on “New…” to create a new style. The options I selected are below.

• Length: Determine how think the line is; mine is fairly thick, so we can see it easily
• Pattern Length: Determines how often the stroke will repeat. Since we don’t want it to repeat, I used an extremely high value.
• Corners: I didn’t want any corners, so I simply selected “None”.

Step 4: Paragraph Styles

Next we are going to add the styling to the text associated with our numbers.

Add the basic paragraph styling:

First, create a new paragraph style: I called mine Table of Contents. Then I add my Basic Character Formats: mine are seen below.

Add the Vertical Rule:

To do this, you still want to edit your paragraph style options and go to the “Paragraph Rules” tab. Make sure the “Rule On” is ticked for “Rule Above.”

• Weight: Will change the height of our vertical rule. In this case, I want the rule to be the height of the numbers.
• Offset: This is vertical offset. I wanted the rule to extend slightly above the text, so I entered a negative value.
• Left Indent: This will move the line off the left edge, in this case I wanted to push the rule in so it is closer to the text than the numbers.

Then from the “Type” drop-down, select the stroke style we previously created.

Add the Drop-caps:

Now we need to add our drop-cap: in the paragraph style, go to the “Drop-caps” tab.

• Lines: Determines how many lines your number will take up.
• Characters: Determines how many characters will be drop-caps; we have selected three, and this will be explained shortly.

Add a Character Color:

Step 5 Applying the Styles

As I’m sure you have noticed, we haven’t actually done anything yet. So now, select all your text (numbers included) and apply your “Table of Contents” paragraph style. You should now have something pretty ugly like the following:

Then I added columns so it makes a little more sense (or does it ?).

Step 6: Clean-up Time

To fix this, you simply need to put hard returns after each item. You’ll notice that it still looks off. If you recall in our paragraph styling, we added a drop cap that effects the first three characters. Well, we did that so we can get our numbers to lineup. You can have them lineup left or right; tabs or spaces need to be added in the correct spots.

Right Justified: To make all the numbers right justified, simply add tabs after each number. For single digits, you’ll need to add a single space between the number and the tab (#+space+tab=3). Then adjust your tabs in the paragraph setting, so everything lines up nicely.

Left Justified: To make the numbers left justified, you use the exact same process for single digits, only you add a tab before the number instead of a space after (tab+#+tab=3). Then, line up the numbers using the tabs adjustment in you paragraph styling.

Step 7: Final Adjustments & Variations

Right now, we have something that could work, but there are just a couple of things to make it look a bit cleaner:

• Narrowing the vertical rule: Adjust the length within the “Stroke Style” Menu.
• Adding vertical pace between each item: in the paragraph style, I added a bit of space before each item (.2 in.).
• Broken Rule (so it is not one continuous vertical rule): After each item, use a soft return instead of a hard return.

Step 8: Adding Digits

This is all fine and good, but what do we do if there are more digits? Well, that’s actually pretty easy too; you just add another digit to the drop-cap in the paragraph style, then add appropriate tabs, or spaces. You will more than likely need to adjust your vertical rule inset as well as your tab settings.

Example: for three digits – Drop Cap Characters = 4, single digit number format (tab+tab+#+tab=4), double digit (tab+##+tab=4), and triple digit (###+tab=4).

Conclusion:

What really makes this technique powerful is that the entire table of contents is being controlled by one paragraph, character, and stroke style, so edits to the table of contents are extremely efficient. I hope you enjoyed this tutorial and learned a technique or two.

Vectortuts+

Follow this tutorial and you will learn how to play with the 3D options in Illustrator to create 3D letters and how to transform them into a sketch text using the Scribble effect and the Map Art option. You can create this effect using any color and because of its transparency you can place it on any background.

Step 1

Start by drawing a 500 x 150 px rectangle using the Rectangle Tool (M) and fill it with the linear gradient shown in the image. Next take the Type Tool (T) and type “VECTOR”. I used Myriad Pro Bold, 115 pt.

Step 2

Go to the Object menu and Expand the text then fill it with the same gradient used above for the background. If you used another gradient for the background use the same to fill the letters.

Step 3

Now you need to create the 3D letters. Select the first one, go to Effect > 3D > Extrude&Bevel and make the changes like shown below.

Step 4

Here are the settings for the rest of the letters:

Step 5

Let’s move on to the sketchy look. First draw a small white square then go to Effect > Stylize > Scribble and in the Options window change the values like in the image. From now on I will call this a sketch symbol because you will define it as a symbol at the next step.

Step 6

Depending on each letter you will need a smaller or a longer sketch symbol. For example, on top of the “V” legs a small symbol like the one made earlier works perfectly but for the sides it won’t because those are longer. For them and other similar surfaces you will need a medium size sketch symbol. The longest surface is the side of “O” and for it you will need to create an even longer sketch symbol.

To obtain all these sketch symbols simply multiply the first one made, the smaller one and drag one side with the Selection Tool (V) to make it longer. The Scribble settings remain the same you just need to stretch it. Once you have all the different sizes drag them into the Symbols Panel and choose Graphic. I made one small, two medium and one long like shown in the image.

Step 7

Now using the “V” letter I will explain how to apply the symbols. Double click in the Appearance Panel on the 3D Extrude&Bevel effect applied to open the Options window then click on the Map Art button. Select the side surface indicated, mine is 7 of 12 then also select a medium sketch symbol like the one shown at the previous step. Adjust the symbol if needed to cover the surface and drag the top and the bottom to make sure the wavy peaks don’t cross over the surface area.

Do the same for the side of the other leg.

Use the arrows and move on to the next surface indicated, 8 of 12. For this one choose the smallest symbol made and again drag the top and the bottom sides if they cross over. Do the same for the other top surface on the other leg and you are done with the first letter. Continue with the rest of them and as long as you use the proper size symbol depending on how big or small each surface is your letters will look perfectly.

Note: The symbols can be modified at any time if they don’t fit. Just drag them from the Symbols Panel back into your working area and stretch them as needed but make sure you click on the Break Link to Symbol button first. This is why I never said to Expand Appearance after the Scribble effect was applied.

Step 8

At this point the letters should look like in the image below. Now go to the Object menu and Expand Appearance for all of them. After that if you navigate into one of the letter groups you will find an image that you don’t need therefore delete it. It is there because at the beginning the letters were filled with a gradient and not with a solid color. Ever better delete the entire group in which the image is placed and use the indicated path below it to fill it back with the same gradient. Do the same for the rest of the letters to clean up your work.

Step 9

After expanding some of the surfaces might look like in the next image, composed of many smaller shapes. To fix that select the surface group that should be between the sketch group and the Clipping path, go to the Object menu and Ungroup then go to the Pathfinder Panel and click Add to shape area > Expand. Now that you obtained the whole shape, delete the gray fill and Stroke it using Pencil-Thin that you can find in the Brush Libraries menu under Artistic > Artistic_ChalkCharcoalPencil. This will improve the sketchy look. Also select a 1.5 pt Stroke Weight.

Do the same for the other surfaces where the symbols were applied for all the letters.

Step 10

Stroke using the same brush also the front shape of the letters and then reduce the Opacity to 10% but only for the fill gradient not for the stroke. This way the letters will be transparent.

Step 11

The letters now look like this:

Step 12

In the last step I will show another look that can be obtained in the same way. The first “T” is duplicated from above and the other three are created using the same symbols and the Map Art option like you did so far. The process is the same just after you expand them change the fill color for all the sketch groups to the blue color shown to make it look like pen sketching. Also use the same color for all the brush strokes. For the front surfaces change the fill gradient to white and keep the opacity reduced.

Place the letters on another 500 x 120 px rectangle filled this time with a linear gradient using light gray and white and you are done.

Conclusion

Here is the final image of the 3D sketchy text created.

Play with the 3D options in Illustrator to create the 3D letters, play with different colors to create this sketch effect and as long as you lower the opacity you can obtain transparent or semitransparent letters that can be placed on any background as you wish.

Vectortuts+

In this tutorial we will study several time-consuming yet important techniques. They are presented clearly and simply. You’ll learn how to use blends, gradient meshes, patterns, and controlled lighting to create a textured starfish.

Step 1

To begin, create the shape of the starfish, and to do this, we will be using the Star Tool. I advise you to use the same sizes as mine, therefore you do not need to pick sizes for the effects applied in this tutorial.

Step 2

Using the Direct Selection Tool (A), move the arms of the starfish a little bit in order to give it an irregular shape.

Convert the corner anchor points of the starfish arm tips into smooth ones.

Moving the handles of the anchor points of the starfish arm tips brings the starfish shape into the view shown in the figure below.

Step 3

Select all the anchor points at the arms formation place on the starfish and go to Effect > Stylize > Round Corners… and set 10px for the radius of the rounding in the dialog box.

Keep the object selected, go to Object > Expand Appearance. Now move the handles of the anchor points of the arms foundation to bring the starfish into the perfect shape.

Step 4

Fill the shape of the starfish with a radial gradient that goes from yellow to orange.

Let’s create a light-and-shade on the starfish. By setting the location of the center of the gradient, we set the location of the source of light.

Step 5

The shape of the starfish is rather awkward, so we will use the Gradient Mesh to accomplish this task. Use the Rectangle Tool (M) to create a rectangle, keep the shape selected, then go to Object > Create Gradient Mesh … and set the number of rows and columns in the dialog box.

Keep the object selected, for convenience change the Opacity in the Transparency palette.

Step 6

Move the rectangle as it is shown below and use the Rotate Tool (R) to rotate it relatively to point A.

Take the Direct Selection Tool (A) and move the grid nodes of one side of the rectangle as shown.

Move the central node of this side of the rectangle towards the center of the starfish.

Convert the smooth node into a corner one using the Convert Anchor Point Tool.

Sometimes it happens that the node does not immediately respond to this tool, please be patient and try again. Do not click on the point itself, but click a little bit lower. Operating the handles of the corner of the rectangle, align the sides of the gradient mesh.

Step 7

Now proceed to the transformation of another side of the rectangle. Select all the nodes that are located on this side of the rectangle, it can be done with the help of the Lasso Tool (Q) or the Direct Selection Tool (A), and move them aside so that the central node lays on the tip of the starfish arm.

Now move the rectangle corners to the sides of the starfish arm.

Operating handles of the grid nodes, move the shape of the mesh object towards the shape of the starfish. It is desirable that the borders of the grid path do not go beyond the star shape. It will be fine if there remains a small gap between the shapes as shown below.

So, working with the Direct Selection Tool (A) only, finish the transformations.

Step 8

Using this technique, create another mesh object.

Unite the nodes of adjacent objects together. Create mesh objects for all the starfish arms.

Select all the mesh objects and set 100% Opacity for them in the Transparency palette.

Step 9

Add a line to the gradient mesh using the Mesh Tool (U) and color the starfish arms, coordinating the location of the chiaroscuro with the light source:

• Lights – bright yellow
• Penumbra – orange, red-brown shades

Remember that you can delete unnecessary or incorrect grid lines using the Mesh Tool (U) while holding down the Alt key.

Step 10

We get sharp boundaries at the places where the arms contact, which real starfish does not have. Make them smooth. Take the Lasso Tool (Q) and select the central nodes of the mesh objects, as it is shown in the figure below.

Set 0% Opacity for the selected nodes in the Transparency palette.

Step 11

Attention, this step is appropriate for those who have not installed Adobe Illustrator CS5! The ability to change the Opacity of the nodes appeared only in Adobe Illustrator CS5. Those who have earlier versions of the software will have to apply Opacity Masks. I will tell you how it’s done. Copy all the mesh objects and paste them in front. Change their fill to white.

It is necessary to lock lower colored mesh objects in the Layers palette! As well as in Adobe Illustrator CS5 select the central nodes of the gradient mesh.

Now fill them with black.

Unlock the lower colored objects in the Layers palette, select them and the upper black and white mesh objects, it is convenient to do it in the Layers palette. Now apply the opacity mask by selecting the appropriate item in the Transparency palette.

Step 12

In some places we have very light shadows. Change the Opacity of these nodes by 66% in the Transparency palette.

Those who used the opacity mask have to replace the fills of these points from black to gray.

Step 13

Assuming that you did not really fit the shape of mesh objects exactly to the shape of the starfish, so I offer to screen our faults. Select the lower shape of the starfish, filled with a radial gradient, copy it and paste it in front (Command + C; Command + F). Move it into the Layers palette so that it is higher than all the other objects. Select this shape and all the mesh objects, and go to Object > Clipping Mask > Make.

Step 14

Start creating the starfish texture. Create a simple geometric shape, for example, a rectangle and pick the texture. After several minutes of experimenting, I decided on the Mezzotint texture. You can get it from the menu of the Swatches palette: Open Swatch library > Patterns > Basic > Basic Graphics > Basic Graphics_Textures.

Step 15

The elements of the textures are black, we are not happy with it, let’s edit the texture color. Pull the texture out of the Swatches palette into the document margins.

The texture is a group of vector objects, below it is situated a rectangle with no fill and stroke.

Select the whole structure, locking the bottom rectangle in the layers palette and fill all the vector objects using an orange color.

Unlock the lower rectangle, select all the elements of the texture including the rectangle. Now go to Edit > Define Pattern, name the texture in the dialog box and click OK button.

Now the fruits of our experiments can be removed.

Step 16

Now let’s apply the texture to the starfish. Copy the bottom shape of the starfish, which is filled with radial gradient, and paste it in front (Command + C; Command + F). Move the object in the Layers palette so that it was located above all the objects of the starfish. Now apply the created pattern to this shape.

Step 17

Create a larger texture on the starfish. Take the Ellipse Tool (L) and create two circles. A bigger one has a 5 px diameter and brown fill, and a smaller one has a 1.5 px diameter and light yellow fill.

Step 18

Select both circles and drag them to the Brushes palette, save the new brush as the Scatter Brush.

Set the brush parameters in the dialog box.

Where do you get these values from? As a result of experimenting, of course. The figure below shows my Brushes palette. It took quite some time experimenting until I got the look I wanted.

Step 19

Now take the Paintbrush Tool (B) and dab randomly on the surface of the star, do not worry if your strokes go beyond the path of the starfish, as we will hide it later.

Step 20

Create another brush. Take the Ellipse Tool (L) and create two circles. A bigger one has a 6 px diameter and light brown fill, and the smaller one has a 2 px diameter and light yellow fill.

Select both the circles and go to Object > Blend > Make.

Do not set a lot of steps for the blend. A lot of steps will significantly affect the size of your file. We are working with quite a small object, and using a large number of steps simply makes no sense.

Step 21

Transfer the object to the Brushes palette, save the new brush as a Scatter Brush. Set the brush options in the dialog box.

As in step 19 use the Paintbrush Tool (B) for dabbing on the starfish. In some places I was creating circles with a stroke and with no fill, and then applying the created brush to them. I have shown these areas in the figure below. I deleted the excessive circles using the Scissors Tool (C) and Delete button.

To add variety, you can change the thickness of some paths in the Stroke palette; it will change the size of all the objects of this path.

Step 22

The created bumps raise above the surface of the starfish, so they will be producing shadow. Select and group up all the objects created in the previous step, and go to Effect > Stylize > Drop Shadow…, set the values specified in the figure below.

The shadow offset parameters are chosen so that the shadow is located respectively with the location of the light source. Set a dark brown color for the shadow, if you choose black, the starfish will seem dirty.

Step 23

Hide everything that goes beyond the outline of the starfish. Copy the lowest shape and paste it in front, move the copy so that it is located above all the objects (Object > Arrange > Bring to Front). Select the top shape and two bottom groups that we created in steps 19 and 21, and go to Object > Clipping Mask > Make.

Step 24

Don’t you think that the starfish became kind of plane?

The point is that the light at the bumps is evenly distributed at this point, but it is certainly not in real life because they do not lie in the plane, but on the complex surface of the starfish. In our case, we can easily achieve the desired result.

Do you remember that in the middle of the tutorial we were creating mesh objects? Select, copy, paste and put them above all the elements of the starfish. Now, while keeping them selected, set the Opacity at 60% and the Blending Mode to Multiply in the Transparency palette.

That’s it, our star gained its volume again.

Step 25

Now create the bumps along the contour of the starfish. We need a path to create this effect. Copy the bottom shape of the starfish (that is filled with a radial gradient), paste it in front, and place it higher than all the objects. Turn off the fill and set a 1px stroke of any color.

It is not necessarily to create a new brush, you can simply duplicate the existing one and change the parameters.

Step 26

Apply this brush to the created path.

Using the described technique, create another path and another brush.

Apply it to this path.

Step 27

As is the case with the surface of the starfish, light on the bumps on the edges of the starfish will be distributed unevenly. To achieve the desired result, cut the path with the Scissors Tool (C) into light and shady pieces.

Select the shady piece of the path and go to Edit > Edit Color > Recolor Artwork… and reduce the brightness by moving the slider to the left.

Step 28

It only remains to create a shadow under the starfish. Duplicate twice the original shape of the starfish. Fill both of them with a dark brown color. Set 0% Opacity for the lower shape in the Transparency palette and slightly increase its size. Move the lower shape towards the source of light. Now select both shapes and go to Object > Blend > Make.

In fact, it is more convenient to apply the selection of colors, shapes of objects and their locations relatively to each other once the blend is already applied. You can select one of the blend objects in the layers palette and start working on it.

Conclusion

Finally, create a composition with the starfish. It is not easy to assemble an object of this shape. Below is my variant. You can create your own composition.

Vectortuts+

In this step-by-step tutorial you will learn how to create a sparkly female portrait through playing with transparency and overlapping vector shapes. In this tutorial you’ll also learn to experiment with colors and just letting go of your creativity. Let’s get started!

Tutorial Assets

We’ll be using this stock image (provided by Tigg-stock) throughout this tutorial. What we want to achieve in this tutorial is a similar result to my vector illustration, missin___like_candy.

Step 1

Start by creating a new A4 Print Document, which is 8.5×11 inches. I use this standard size for prints.

Step 2

Now select File > Place to bring the stock photo into the background and name the layer “IMAGE.” Remember to put a name on every new layer you make to keep it organized and to avoid confusion.

Step 3

Create a new Layer above the image. Label it “BASE,” as this will be your guide in filling up shapes. Using the Pen Tool (P), start tracing the figure of the image to create a silhouette. Then you may add your desired gradient fill. Throughout the tutorial, you may go back to this layer and make changes with the colors to match with the overlapping vector shapes, which we’ll go through later.

Step 4

Now create another layer and name it “BASE2.” Start tracing the hair for the base color using the Pen Tool (P). You may also add your desired gradient to create nice effects after we start overlapping the shapes later. Just experiment with it and choose the colors that pleases your eyes.

Step 5

Create another layer and name it “LEMON,” this will be for our headphones. Use the Ellipse Tool (L) to create an oval shape for the side of the headphones.

Step 6

Now we’ll add detail to the headphones. On the same layer create shapes surrounding the oval to make it more like an orange or lemon. Use flat colors first and later you may want to add some gradients to it.

Step 7

Now we’ll start adding details to the face by creating a new layer called “FACE DETAIL.”

Step 8

Using the Pen Tool, start tracing the eyes and fill it with your desired colors. You can also make the eyelashes longer to give more emphasis to the eyes. Do the same for the nose and the lips. The reason to use your own colors is so you have your own version of this illustration, instead of creating the exact same tutorial image.

Step 9

Now, we are going to add overlapping shapes to our illustration starting with the face. Create a new layer above the “BASE” layer and name it “BASE-detail.” As you can see in the image below, I tried to create random shapes and filled them with different colors. You may select each of the shapes you created and adjust the opacity depending on your desired outcome.

Step 10

Do the same with the neck and the shoulders. You can hide the “BASE” layer to make the stock photo visible. Through this, you’ll be able to follow the light and shadows of the image. Use this as your reference in choosing your colors.

Step 11

Above the “FACE-detail” layer, create another one and name it “LIPS.” Start creating shapes following the contour of the lips, and add white for the highlights. See the image below for reference.

Step 12

Now we will add more details to our lemon headphones. Create a new layer above the “LEMON” layer. Using the Ellipse tool create circles around the headphone and create droplets. Put white highlights afterwards. You can create your own desired details for the headphones as well.

Step 13

Now we’ll add details to the hair. This might take more time to finish if you really wanted to give that hair a lot of details. Above the “BASE2″ layer, I made the “HAIR-detail” layer and started tracing the strands of the hair from out stock image using the Pen Tool (P). You may want to experiment with the colors further. In this, I tried to use pink, but later changed it to match with the skin.

Step 14

Now let’s add the background. Create a new layer below our image using the Rectangle Tool (M), which fills the canvas, and color it with a gradient of your choice.

Step 15

Now we’re almost finish with our portrait. Let’s add more details and highlights using the Pen Tool (P), and draw small shapes scattered on our image to create a glittery effect.

Final

With just a few Illustrator commands such as the Pen Tool and playing with transparencies, you were able to create a dazzling illustration. You only have to play with your imagination and let go of your creativity. Now share your work on your favorite online art community. The final image is below.

Vectortuts+

A few times a each month we revisit some of our reader’s favorite posts from throughout the history of Vectortuts+. This tutorial by Rype was first published on July 21st 2008.

With oil prices the way they are today, everybody is thinking Green. I have done many projects recently that require a Green style applied to the design. In the following Illustrator tutorial, I’ll teach you how to create a Green type treatment. It works great for logos and other design elements.

Step 1

Create a document that is 8.5 inches by 11 inches. Choose a typeface for the type treatment (I used Helvetica Bold) and type out what you want. Next, Outline the text by going to Type > Create Outlines.

Step 2

With the text selected, create a Linear Gradient from the Gradient Panel. Change the color of the first swatch on the Gradient Slider (left swatch) to a light green (I used these CMYK values: C=40, M=0, Y=100, and K=0). Change the second swatch on the Gradient Slider to a darker green (C=60 M=16 Y=100 K=0). Use the Gradient Tool (G) to adjust the gradient by clicking at the top of the type and dragging to the bottom of the type so the dark part is at the bottom.

Step 3

Now we’re going to create some leaves. Start by drawing a leaf shape with the Pen Tool (P). Again, with the Pen Tool (P), draw a line that starts at the tip of leaf and ends in the middle of the bottom part of the leaf. After selecting the line and the leaf shape, press the Divide button in the Pathfinder Panel, located on the bottom left side of the panel. Ungroup (Command+Shift+G) the objects so you have two separate shapes.

Step 4

Select both shapes and create the same colored Linear Gradient as the Text. Next, select one shape and use the Gradient Tool (G) to click and drag at a 45 degree angle across the leaf half shape. Do this again for the other half of the leaf.

Step 5

With the Pen Tool (P) draw a highlight shape on the top leaf half. Change the highlight shape to a Radial Gradient. Change the left swatch to white and the right swatch to your green color (C=40 M=0 Y=100 K=0).

Step 6

With the Pen Tool (P), create a stem shape and send it behind the leaf shapes. Create a Linear Gradient, make the gradient the same colors as the leaf shapes, and adjust the gradient so the darker green is at the top of the stem.

Step 7

Next come the water droplets. Create an oblong ellipse with the Ellipse Tool (L). Then create a Linear Gradient using the same colors as the leaf and text. Adjust the gradient so the dark side is on the bottom left.

Create another ellipse on top of the previous ellipse and create a Radial Gradient with the same swatches as the highlight gradient. Adjust this gradient so the light part of the gradient is coming from the bottom left.

Create two more smaller ellipses with Linear Gradients matching the highlight gradient. Once you are done, group all the ellipses, scale and place them on the leaf shapes. You can easily copy the droplet by holding down Alt and dragging a copy.

Step 8

The next couple of steps deal with creating the ladybug. Create an ellipse and fill it with a Linear Gradient. Make the first swatch in the gradient a red (C=0 M=100 Y=100 K=0) and the second an even darker red (C=0 M=100 Y=100 K=35). Adjust the gradient so the red color is at the bottom of the ellipse.

Copy (Command + C) the ellipse and Paste it in Front (Command + F). Draw another bigger ellipse that overlaps the center of the original ellipse. After selecting one of the original ellipses and the overlapping circle, press the Intersect Shape Areas button in the Pathfinder Panel. Make the intersected shape a Linear Gradient with the first swatch white and the second swatch red. Adjust the gradient so the white is at the top of the shape.

Step 9

Draw five more ellipses over the ladybug body shape and group them together. Copy (Command + C) the original body ellipse shape and Paste it in Front (Command + F). With the copied body shape and the five ellipse selected, Intersect the shapes.

Change the dots to a Linear Gradient with the first swatch a really dark red and the second swatch a black red. Adjust the gradient so the lightest red is at the bottom of the combined shapes. Next, Copy (Command + C) the top highlighted shape of the body and Paste it in Front (Command + F).

Copy (Command + C) the dots and Paste it in Front (Command + F). Select the copied highlight and one of the dots copy and Intersect them. Create a Linear Gradient with the first swatch at 60% black and the second at 90% black. Adjust the gradient so the lighter black is at the top of the shape.

Step 10

Create another ellipse for the ladybug’s head. Create a gradient the same as the top dots gradient and send the head behind the body shape. Draw an antenna shape with the Pen Tool (P) and place it behind the head. Copy (Command + C) the antenna and Paste it in Front (Command + F). Reflect the antenna by pressing the Flip Horizontal option from the pop-up menu of the Transform Panel.

Step 11

Draw an ellipse roughly the size of the completed ladybug. Create a Radial Gradient so the inside swatch is black and the outside is white. Set the ellipse to Multiply from the Transparency Panel and send it behind the ladybug to the bottom left, creating a drop shadow. After grouping the ladybug and drop shadow, place it on the leaf. Then scale and rotate the lady bug as needed.

Step 12

After selecting the leaf and all the elements on it, place them over your text. I placed mine over the first letter of the word.

Step 13

Copy (Command + C) the leaf and elements, except the lady bug, and Paste (Command + V). Flip the leaf horizontally and scale down the leaf. When scaling you don’t have to constrain the proportions, this helps the leaf look different from the other. Repeat this step a couple of times around the text.

Step 14

For the other leaves we are going to create an Art Brush. You can draw these elements with the Pen Tool (P), but you’ll find it more consistent and easier to use a brush.

Draw an oblong ellipse. Then with the Direct Selection Tool (A), select the right anchor point in the ellipse. When you select an anchor point the Control Panel will default to the Anchor Point Options. Convert the anchor point to a Corner (the first button to the right on the Control Panel). Do this again for the left anchor point. Next, squish the ellipse down from the top to half its original size.

Step 15

Drag the oval into the Brush Panel and choose New Art Brush. In the Art Brush options change Colorization to Tints. This lets you change the color of the brush without creating a new brush. You don’t need to change the colors of the brush strokes for this tutorial, but it is good practice.

Step 16

With your new brush, make a swirl shape for a leaf blade. You might need to change the stroke of the brush if it looks to small or too big. When you get a stroke you like, go to Object > Expand. You will also want to clean up the unfilled stroke. An easy way to do this is to go Object > Path > Clean Up. Also, make sure all the check boxes are checked and press OK.

Step 17

Select the expanded brush shape and create a Linear Gradient with the same swatches as the original text gradient.

Step 18

Repeat the steps for creating the leaf blade around your text. Try to vary the shape and size of the blades.

Step 19

Next we’re going to add some more water droplets around the text. Simply Copy (Command + C) the droplets on the leaf you already made and Paste (Command + V) them around the text. Also, be sure to vary their size and shape.

Step 20

Now it is time to work on the dirt at the bottom of the text. Double click on the Pencil Tool (N) in the Tools Panel to bring up the Pencil Tool Options. Change the Fidelity to 5 to get really smooth lines.

Use you Pencil Tool (N) to draw a small circular shape. Press Alt before you let go to close the shape. Next, create a Radial Gradient with the interior swatch a brown color (C=35 M=60 Y=80 K=25) and the exterior swatch a dark brown color (C=50 M=70 Y=80 K=70) . Place the spot on the first letter of your word. Scale the dot down smaller than one of the droplets.

Step 21

Repeat this till you have a pile of dirt spots on you first letter.

Step 22

Copy (Command + C) and Paste the dirt pile until you have covered the very bottom of all the letters.

Step 23

Draw a Radial Gradient ellipse like you did for the ladybug drop shadow. Squish the ellipse to about half the size. Send the ellipse behind all the artwork and set it to Multiply.

Step 24

Repeat this drop shadow under all the letters.

Step 25

For the background create a rectangle with the Rectangle Tool that is the size of you document. Give it a Radial Gradient, make the interior swatch white and the second swatch a light green (C=13 M=0 Y=38 K=0).

Final Image

Now you have a nice Green type treatment!

Vectortuts+

In this tutorial you’ll learn how to create a vector pool table. We’ll be using the Appearance panel to create textures and add effects; we’ll use the Swatches panel for creating pattern swatches; and we’ll use some 3D and scripting. Let’s get started!

Step 1

Create a new Adobe Illustrator document. The pool table will be 600px by 300px, so I made the artboard a bit larger, 740px by 500px. Using the Rectangle Tool (M), create the table 600px by 300px, and align it to the center of the artboard. Name the layer “table,” to keep things organized. With the rectangle selected, open the Appearance panel (Shift + F6) and delete the stroke and fill. Be sure to keep the Appearance panel open, as we’ll be using it alot throughout this tutorial.

Step 2

Set the fill to a light green using the Appearance panel. I used the color #16BF04. With this fill selected, add a new gray fill above it. For this one I used the color #A5A5A5. We will use this fill to create the felt texture.

Step 3

Now, let’s create the texture. Select the gray fill, and go to Effects > Texture > Grain. Set the following: Intensity at 67, Contrast at 75, Grain Type at Sprinkles, and then click OK.

Step 4

Click on the little triangle on the gray fill layer to expand it. Change the fill’s transparency to a 50% Overlay. Now you should see a textured green rectangle. if not, make sure you have the same stacking order in the Appearance panel as shown.

Step 5

Let’s add some effects for more realistic shading. Add the following effects: Inner Glow, Drop Shadow and Rounded Corners, with the following settings:

Your table layer is almost done. Now you should have something like this:

Step 6

Now we’ll add the table markings. Draw a 2-point white line from top to bottom at about the quarter mark on the table. Draw a 100-point radius circle, also 2-point line width and white, cut it in half and snap its left half to the white line from its left side. Align it to the middle of the table. Select both the line and the half-circle, and lower their Opacity to 40%. We’re done with this layer and we can lock it.

Step 7

The next step is to create the wooden rails. Create a new layer with this name. First, we need to create the wooden pattern. Create somewhere outside the table area a 100px by 20px rectangle. Give it a dark brown color, like #4F290F. Zoom in a little, and draw with the Rectangle Tool some lighter brown (#703312) stripes over the dark brown rectangle. Make them different heights and varied spacing between them.

Step 8

We’ll use the Warp and the Bloat tools to modify the stripes to look like a wooden pattern. Select these tools, then double-click on them to change their settings as shown.

Step 9

With the light brown stripes selected, click and drag with the Warp Tool, or click with the Bloat Tool to get something like this:

Copy the dark brown rectangle and paste it in front of the stripes (select the stripes and hit Command + F). Select all the wood shapes, open the pathfinder panel, and click Crop.

Drag the cropped pattern into the Swatches panel to create a new swatch from it. Rotate the pattern 90 degrees and drag it also to the Swatches panel to create another swatch.

Step 10

Create two 560px by 20px rectangle, align one to the top of the table and one to the bottom. Set the rectangles with the horizontal wood pattern swatch. Create two other rectangles (20px by 260px) align them to the left and right edges of the table, then set them with the vertical wood pattern swatch.

Step 11

Somewhere on the artboard draw a 7px by 7px circle and give it a radial gradient, darker to lighter brown. With the circle still selected, press G and drag the gradient a little lower to the left, so it won’t be centered.

Copy the circle and paste it in front. Resize the duplicate circle to 5px by 5px. Select both circles and drag them to the Symbols panel to create a new symbol. Spread six instances of this symbol on each of the horizontal wood rectangles, and three on the vertical ones. We’re done with this layer.

Step 12

Create a new layer and name it “rail cushions.” Draw two 520px by 10px rectangles, snap one below the top wooden rail, and the other on top of the bottom wooden rail. Create two 10px by 220px rectangles and snap them to the right and to the left of the left and the right wooden rail, accordingly.

With the Direct Selection Tool (A), click on the bottom left anchor point of the top rectangle. Press Shift + Right Arrow key to move it 10 pixels to the right. Using the same method, move the bottom right point 10 pixels to the left. Use this method with the other rectangles until your artwork looks like this:

Step 13

Now, let’s style these rail cushions. Select all the cushions, go to the Appearance panel and apply to them a slightly darker green than the table’s color (#1B7203). Add a new gray fill (#A5A5A5). Add to the gray fill the same grain effect as in step 3. Go to Effect > Texture > Grain, set the Intensity to 67, Contrast to 75, Grain Type to Sprinkles, and then click OK.

Step 14

Add a Drop Shadow to the top cushion with the following settings:

Apply the same effect to the rest of the cushions. Change the bottom cushion’s Y Offset to -2. Change the left and right cushions’ Y Offset to 0, change the left cushion’s X offset to 2, and the right’s to -2.

Step 15

Create a new layer called “pockets.” For the pockets I used an extremely useful Illustrator script called “Round Any Corner.” It does exactly that: rounds only the corner you want, instead of all the object’s corners. You can read about it in the article on ways to customize Adobe Illustrator and download it here. Once you are set, create a 40px by 40px rectangle. Align it to the table’s top-left corner. Use the Direct Selection Tool to select the rectangle’s top-left and bottom-right corners, click Command + F12, go to the folder where you saved the script file and open it. Enter 18 as the corner radius in the script prompt and click OK.

Step 16

Change the object’s fill to a radial gradient from dark gray (#333333) to light gray (#A5A5A5). Move the Gradient Slider to 80%. With the object still selected, press G and drag the gradient a little lower to the right.

Go to Effect > Stylize > Inner Glow. Change the mode to Multiply and the color to black. Set the Opacity to 10% and the blur to 10 points.

Step 17

Duplicate this object and reflect it vertically. Align it to the right side of the table. Duplicate these two objects, reflect them horizontally and align them to the bottom of the table.

Apply a Drop Shadow to the top-left object with the following settings:

Apply the same effect to the rest of these objects. Change the bottom object’s Y Offset to -5. Change the top-right and bottom-right objects’ X Offset to -5, change the top-right object’s Y offset to 5, and the bottom-right’s to -5.

Step 18

Let’s create the holes. Draw a 30px by 30px circle and apply it a dark gray (#1A1A1A) to a lighter gray (#333333) linear gradient. Duplicate the circle, reverse the gradient direction and resize the circle to 26px by 26px. Draw a third circle, make it black and 22px by 22px. Select all circles, center-align and group them. Drag the hole object to the symbols panel to create a new symbol.

Align the hole to the bottom-right of the top-left pocket object we created earlier. Duplicate it and align the copy to the bottom-left of the top-right pocket object. Duplicate this one, horizontal-align it to the center of the table and vertical-align it to the other holes. Duplicate these three holes and align them to the top of the bottom pockets.

Step 19

Add a white Drop Shadow to the top-left hole with the following settings:

Apply to the top-center hole the same effect, but change the X offset to 0. For the top-right hole change the X Offset to -2. Do the same with the bottom holes. Change their Y Offset to -2 and the X Offset to 2, 0 and -2 (left, center, right) accordingly.

Step 20

Our table is done! Now lock all the layers and create a new layer for the cue stick. Draw a 3px by 300px rectangle and color it #EFC26E. Use the Direct Selection Tool to click on the top-left corner and move it 2 points to the right. Draw the following rectangles and place them on top of the stick:

Now, for each rectangle, do the following: duplicate the stick, select it and the other rectangle, go to the Pathfinder panel and click Intersect.

Group all the shapes and apply a Revolve effect (Effect > 3D > Revolve). Tilt it to the position you like and make sure the offset is set to Right Edge.

To finish, add a drop shadow.

Step 21

The last stage would be to draw some balls. I used a great tutorial by Cheryl Graham. Place your cue stick and balls on the table and that’s it!

Conclusion

For a final touch I added a background layer, and there you have it! In this tutorial we used some techniques to create patterns and textures, use symbols and several panels and tools. I hoped you enjoyed this tutorial and learned something useful today.

Vectortuts+

In this tutorial, I’ll show you how to make a Lotus Flower in Adobe Illustrator. We’ll use some basic tools (Ellipse, Direct Selection, Pencil, and more) to draw lotus petals and leaves. Next we’ll color these shapes with the Gradient Mesh Tool. Finally, arrange them to become a complete work. Let’s get started.

Step 1

Open a new document with the dimensions 1200px by 900px. Now let’s draw the lotus petal shapes. Grab the Ellipse Tool (L) (Fill of None, Stroke Color as Black, and 1 pt Stroke Size) and draw an ellipse shape.

Pick the Direct Selection Tool (A), click on the C point, hold down the Shift key and click on the D point to select both these points (C and D). Now click on the “Remove selected anchor points” icon in the Properties Bar to remove these points. Continue to use the Direct Selection Tool, now click on the A point and click on the “Convert selected anchor points to corner” icon in Properties Bar. At this time, our shape should be similar to the fourth image below.

Now grab the Convert Anchor Point Tool (Shift + C) and click on point B, then drag it to the right until our shape looks like the fifth image shown. Continue to use the Convert Anchor Point Tool to drag two handles of point B, follow the direction shown. Name this shape “lotus_petal_stroke_1.”

Step 2

We’ll create the second shape from the first one now. Pick the Selection Tool, hold down the Alt key, click on the “lotus_petal_stroke_1″ shape, and drag it to a new position. We will be working with this new shape. Copy this
shape (Edit > Copy or Command + C) and paste the copied-shape in front of the original shape (Edit > Paste in Front or Command + F).

Now grab the Direct Selection Tool, click on the B’ point (the B’ point coincides with the B point). This time, we can see two handles (1′) and (2′)
(as shown the second image below). Hold down the Alt key, hover over the right handle (2′) (a plus sign should show up), then click and drag it to the left (shown in the third image). Continue to draw the right shape, use the same steps above, but click and drag the left handle (1″) to the right shown, as shown in the fifth image. Name this shape “lotus_petal_stroke_2.”

Step 3

Continue to draw a different lotus petal shape now. Pick the Ellipse Tool (with a Fill of None, Stroke Color as Black, and 1 pt Stroke Size) and draw an ellipse shape. Next, use the Direct Selection Tool and click on point C, while holding down the Shift key, then click on the point D to select both points (C and D). Then click on the “Remove selected anchor points” icon in the Properties Bar to remove both points (C and D). Our shape should look like the third image below.

Use the Direct Selection Tool to click on point A, we will see two handles (1 and 2). Hold down the Alt key, hover over handle 1 (a plus sign should show up), then click and drag it down as shown in the fifth image. Release the Alt key, click on point B, we will see two handles (3 and 4). Hold down the Alt key again, hover over handle 3, then click and drag it up, as shown in the fifth image. Continue to use this way to drag two handles (2 and 4), follow the directions shown in the sixth image.

Step 4

This shape is just half of a lotus petal. Now, we’ll draw the remaining half of the lotus petal, use the same method as we did in Step 2. Grab the Selection Tool and click on the newly created shape. Copy this shape (Edit > Copy or Command + C) and paste the copied-shape in front of original shape (Edit > Paste in Front or Command + F).

Now grab the Direct Selection Tool and click on the A’ point (the A’ point coincides with the A point). This time, we can see two handles (1′) and (2′)
(as shown the second image below). Hold down the Alt key, hover over handle 1′ (a plus sign should show up), then click and drag it down near the handle 2′. Release the Alt key, click on the B’ point (the B’ point coincides with the B point). Hold down the Alt key again, hover over the handle 3′ (a plus sign should show up), then click and drag it down, as shown in the third image. Name this shape “lotus_petal_stroke_3.”

Step 5

Let’s move on to coloring the “lotus_petal_stroke_1″ shape. Use the Selection Tool to select the “lotus_petal_stroke_1″ object and fill it with a light pink color (#F7B3D1). Next, grab the Mesh Tool and click on point 1. This time, we have a mesh over the “lotus_petal_stroke_1″ object.

Now, we will be adding color to the mesh points. The 1 point has a fill of #FFFFFF. The 2 point and the 3 point has a fill of #ED3694. The 4 point and the 5 point has a fill of #F498C0.

Step 6

Now we’ll color the “lotus_petal_stroke_2″ shape. First, we’ll hide two shapes (“right_shape” and “left_shape”) to color the remaining shapes easier. To do this, use the Selection Tool to select two shapes, then go to Object > Hide > Selection (Command + 3). Now select the remaining shapes and fill them with a light pink (#F7B3D1). Continue coloring with the mesh style. Grab the Mesh Tool, click on point 1 to create a mesh.

Point 1 has a fill of #EE4498 and point 2 has a fill of #EC008C. Continue to use the Mesh Tool, click on point 3 to add one mesh point more. Point 3 has a fill of #FACFE2 and the point 4 has a fill of #FFFFFF. At this time, our shape will look like the sixth image below.

Now we go to Object > Show All (Command + Alt + 3) to show two shapes (“right_shape” and “left_shape”) again. Then fill them with light pink (#F7B3D1). We also create meshes over “right_shape” and “left_shape,” then add color to the mesh points. The finished shape will look like the final image below.

Step 7

Now we’ll color the “lotus_petal_stroke_3″ shape. Use the Selection Tool to select the thinner shape, then go to Object > Hide > Selection (Command +3) to hide this shape. Click on the remaining shape add fill it with light pink (#F7B3D1).

We’ll continue coloring this shape with a mesh style. Pick the Mesh Tool and click on the point 1. This point has a fill of #EE4097. Point 2 has a fill of #EC008C. Our shape will look like the fourth image below at this time. Next, use the Mesh Tool to click on the point 3. This point has a fill of #F496BF and point 4 has a fill of #FFFFFF.

Step 8

Now go to Object > Show All (Command + Alt + 3) to show thinner shape. Use the Selection Tool to select this shape and fill it with light pink (#F7B3D1). Also use the Mesh Tool to color this shape with a mesh style. The last result will look similar to the third image below.

Step 9

Now we’ll add the veins of the lotus petals. Use the Pen tool (with a fill of None, Stroke color of #EC008C, and a 0,5 pt Stroke size) to draw a curved line from A to B, as in Step 1. Continue to do the same step, should have veins covering the lotus petal when complete. Next select all the veins (don’t select lotus petal) and set the Opacity to 10% – 15%. The last result will look like the one shown in the final image below.

Step 10

We also draw veins for the “lotus_petal_stroke_2,” similar to the way of drawing shown above. To work easier, we need to hide the two thinner shapes (Use the Selection Tool select both of shapes and go to Object > Hide > Selection or Command + 3). After all the veins of main shape are finished, show the two thinner shapes again. Continue drawing veins for these shapes. The last result will looking like the final image below.

Step 11

Continue drawing veins for the “lotus_petal_stroke_3″ shape, similar to the method shown above.

Step 12

Follow these steps as shown above, you’ll need to draw lots of lotus petals with different shapes.

Step 13

Arrange the lotus petals to become a lotus flower. For ease of arrangement, we’ll divided these lotus petals into five group.

Step 14

First, use the Selection Tool (V) to move the petals of “Group_I”” so that they overlap. Rotate the petals a bit to get the results shown in the picture below.

Step 15

Continue using the Selection Tool (V) to move the petals of “Group_III” into position as shown.

Step 16

Continue moving the petals of “Group_II” into position shown. We also need to rotate these petals a bit to balance the position of them.

Step 17

Move the petals of “Group_IV” into position as shown. Now select both petals using the Selection Tool and click on the first petal, while holding down Shift key and click on the second petal. Now right-click and select Arrange > Send To Back in context menu to send the two petals behind all the others.

Step 18

Finally, move the two petals of “Group_V” into position as shown in the first picture below. Select the marked petals (marked by a green circle), right-click and select Arrange > Bring To Front in the context menu (Shift + Command + ]). Continue moving the remaining petals of “Group_V” into position as shown.

Step 20

Now we’ll create the stem. Use the Pen Tool (P) (with a Fill of None, Stroke Color set to Yellow Orange, and Stroke Weight of 1 px) to draw an object as shown. Name this object A. Next, grab the Selection Tool (V) to select object that A, go to menu Edit > Copy (Command + C), then go to menu Edit > Paste in Front (Command + F). Name this newly created object A’ (give it a Stroke Color of Brown Dark). At this time, A and A’ will be the same shape and position. Select the A’ object, then grab the Direct Selection Tool (A) and the adjust the A’ object to become a thiner object as shown.

Step 20

Now let’s color the stem. Fill the A’ object with #B27544 (with a Stroke Color of None). Next, select the A object, double-click on the Gradient Tool and set the values as shown.

Step 21

Select both object A and A’ and go to menu Object > Blend > Blend Option. Set the values shown in the dialog box as shown. Then go to Menu Object > Blend > Make.

Step 22

Now we’ll draw and color the lotus leaf. Use the Pen Tool or Pencil Tool to draw a shape like the one below. Fill it with green (#35A54E). Next, grab the Mesh Tool and click on points: 1, 2, 3, 4, 5 to create a mesh over the newly created shape.

Step 23

Now we’ll add color for the mesh points. Look at the first image below, mesh points 1 have a fill of #5B6858, mesh points 2 have a fill of #5F5A5A and mesh points 3 have a fill of #53474F. We will use this method to add color for the mesh points.

Step 24

Next, we’ll draw veins for the lotus leaf. Grab the Pencil Tool (N) and set its properties as shown. Then we’ll draw the curves from hem to center of leaf.

After the veins are finished, use the Selection Tool (V) to select all of the veins and set the Opacity to 15%. At this time, our lotus leaf will look like the third image. Finally use the Ellipse Tool (L) to draw a small ellipse and fill it with #667F6A. The last result should look like the final image below.

Step 25

Join the stems with the flowers and leaves.

Step 26

Use the Pen Tool (P) or Pencil Tool to create a shape as shown in the picture below. Fill it with #C9D3D8. Name of it “Lotus_background.”

Step 27

Move the leaf into position as shown.

Step 28

Continue moving two more leaves into position.

Step 29

Move a big lotus onto the three leaves.

Step 30

Continue moving the lotus flowers and leaves into the positions shown.

Final Image

Use the Mesh Tool to add color to the “Lotus_background.”

Vectortuts+

In this tutorial you will learn how to use Shape Building, Clipping Paths and Opacity Masks to make a metallic Padlock. You will also learn how to use the VectorScribe Adobe Illustrator plug-in to save time when creating vector illustrations and designs.

Introduction

I have specifically made this tutorial using multiple layers for each element. Advanced users can easily make this lock without the use of layers, but because I’m demonstrating Shape Building, Clipping Paths and Opacity Masks, I’ve used layers as visual instructions on how each part works together to make the image. Let’s begin!

Step 1

The very first thing you should do when starting a new icon in Adobe Illustrator is to set the guides and grids and change the measurement units to pixels. To find these settings go to Edit > Preferences then set the Guides & Grid to gridlines every 10px with 10 subdivisions and chose a grid color that will stand out against your illustration, then go to Units and set the general units to Pixels.

To make the creation of shapes easier you should show the grid and set the shapes to Snap to Grid by going to View > Show Grid then View > Snap to Grid.

Step 2

Make a 240px by 240px square of any color with the Rectangle Tool (M) and align it against the pixel grid.

Step 3

Open the Dynamic Corners, PathScribe and Dynamic Shapes dialogues for the VectorScribe plug-in (Window > VectorScribe).

First we will apply rounded corners to the body of the lock. Set the Dynamic Corners to 20px and click on the 4 corners of the square we have made. The good thing about Dynamic Corners is that you can click the first point and test a few different corner sizes and styles to find one that is suitable — once you have a corner you’re happy with simply clicking the remaining three corners to apply the settings.

Step 4

Copy the Square (Command + C), then lock the layer its on and make a new layer above it. Paste a copy of the square into the new layer with Command + F. Note: I have changed the color of the second square to yellow so you can see it clearly.

Select the bottom 4 points with the Direct Selection Tool (A) and while holding down Shift, move the points towards the top of the second square to make the top portion of the lock. This part can be whatever size you like, just be sure to line it up with a pixel boundary. You will see the result in the second image below.

Step 5

Copy the top shape (Command + C), turn off the layer that it’s on and make a new layer below. Paste the top shape into the new layer (Command + F). Select the top right point and using PathScribe split the path, then repeat with the top left point. Delete the path between the two “cuts,” the top section will now have an open path across the top.

Step 6

Select one of the two open points with the Direct Selection Tool (A) and click Retract Handles in the PathScribe Dialogue, re-select the point with the Direct Selection Tool and hold down Shift to line it up with the side of the lock. Repeat with the second open point.

Move the resulting shape down to create a band for the top of the lock. Turn the top layer back on. You should have a shape similar to the second image below.