Create an attractive pirate ship inside a glass bottle in this illustrator tutorial! Learn how to draw a pirate ship souvenir in a glass bottle from scratch. You will also learn how to draw the ship’s hull, rope pulleys, sails, cannons, anchor, barrels, helm and the glass bottle in this tutorial.



Difficulty: Basic-Intermediate tutorial
Requirements: Illustrator 10, CS, CS2, CS3 and CS4

What will you get?

• Instant download of PDF e-book (25 pages)
  
• Detailed step by step tutorial
  
• Learn the techniques to draw a pirate ship in illustrator
• Learn to do rope brush and create realistic glass bottle effect
  
• Comes with Ai file for easy reference
  

Preview Screenshots

[private_premium]

[/private_premium]

All Premium Tutorials:
Seamless Patterns - Secrets of making complicated patterns tile seamlessly
Rope Brush - Create your own custom rope brush!
Certificate Design - How to draw a certificate
3D Peeled Apple Skin - Super cool apple peeled skin effect
Jigsaw Puzzle - Create jigsaw puzzle effect for your artwork
Photorealistic Vector Car - Techniques to draw a photorealistic vector car
Racing Bike - Draw a sleek racing bike from scratch
Vector Film Reel - Cool 3D film reel effects & clapperboard tricks
Vector Rose - Learn to create realistic vector rose with mesh
Retro Microphone - Create a cool photorealistic retro microphone
Volcano Infographics - Learn how to create 3d infographics!
Frosty Christmas - Create instant frosty windows with paper snowflakes!

Related posts:

1. Premium Tutorial: Racing Bike
2. Premium Tutorial: Illustrator Rope Brush
3. Learn More with New Premium Membership!

Creating a company logo is an important step towards a successful business. Starting a business logo design contest at 48hourslogo.com is a great way to design your next company logo.

48HoursLogo is a logo contest website created to connect small business owners looking for logo designs with thousands of freelance logo designers all over the world. It makes logo design easy and fun for both clients and designers. For business owners, you can get a professionally designed logo for less than 100 bucks. For logo designers, it is a great place to practice you design skills and built up your logo design portfolio. Because most of business logo contests on the site run for only 48 hours, it’s a great way for freelance designers to make some extra cash too.

Some highlights about business logo design contest at 48hourslogo.com
* Affordable – you can even start a logo contest for only $29, and get complete professional logo design for just $79
* Selections – for every logo contest, you can get anywhere between 30 to 100 different logo designs to choose from
* Fast – like the name suggests, many contests run for only 48 hours. Client can get a brand new logo in less than 3 days.
* Fun – The ability to rank the designs, write comments and replies, all on the same page makes it easy and fun to communicate about the design project.
* No minimum and fast payout to the designers – Designers get paid 48 hours after each project.
* Fun and friendly community of graphic designers and logo clients
* It absolutely free, and takes only takes 10 seconds to register

This is a sponsored review, if you want your product or service reviewed by me send an email to tony[at]vectordiary.com.

Related posts:

1. Design Logos & Win Great Prizes!
2. Contest: Submit Your Vector Graphics & Win $100!
3. Slogan Contest at Templates.com

Setting up the Grid

1. The so-called isometric projection is perfect for drawing cubes without the use of vanishing points. A regular LEGO brick however is taller than wide, therefore a slightly different angle is used in this tutorial to make the construction easier.

Use the Line Tool, click your work space once and adjust the line settings:

Length: 200mm
Angle: 35°

2. Select the line by using either the Selection Tool (V) or select all (Command + A) and press the Enter Key to open the Move Window. Use these values:

Horizontal: 10mm
Vertical: 0mm

Press the Copy Button to duplicate the line. Use the shortcut Command + D to repeat the copy action for about 30 times.

3. Select all lines (Command + A) and mirror them (Object>Transform>Mirror) either horizontally or vertically. Make sure to press the Copy Button to duplicate your set of lines.

4. Select all and group it (Command + G). Them transform the group of lines into guidelines (Command + 5). This grid will help you construct the LEGO bricks and arrange them on your workspace. Make sure to make your guidelines magnetic (Command + U).

Basic Drawing of LEGO Brick

5. Use the Pen Tool (P) to draw the top and the two sides of your LEGO brick. Because of the 35° grid, your brick will have the height to width ratio of an original LEGO brick.

6. Draw an ellipse (L) with the following attributes:

Width: 4,2mm
Height: 3,1mm

Center it on the top of your brick by using the alignment options (Window – Align) or the magnetic grid.

7. Select the ellipse and press the Enter Key to open the Move Window.

Horizontal: 0mm
Vertical: 1mm

Press the Copy Button to duplicate the ellipse.

8. Select the duplicated ellipse, copy it (Command + C) and paste it in front of the existing (Command + F). Then switch to the Path View (Command + Y) and use the Direct Selection Tool (A) to select the upper Anchor Point of the lower ellipse. Delete this Anchor Point.

9. Select the upper Anchor Point of the upper Ellipse (the one you created last) and delete it as well.

10. Select the left Anchor Points of the lower as well as the upper ellipse. Join these two Anchor Points (Command + J) and repeat this step at the right side as well. This will create a closed path for the side of the cylinder.

11. Change the view again (Command + Y) to take a look at your first LEGO brick. You could select rounded outlines to improve the look of it.

Coloring the Lego Bricks

12. We want to be as flexible with the bricks as possible. Therefore a grayscale version of the brick is created first. Use the 10% Black Color Swatch (labeled “K=10″) to fill the top of the brick.

13. Use the following gradient values for filling the left side of the brick:

Type: linear
Angle: 235°
Left: K=20
Right: K=30

This will make it slightly darker at the bottom so you can see the rows of the final assembly.

14. Assuming that the lightening is mounted to your right, the right side will be slightly brighter. Adjust the gradient of the filling:

Type: linear
Angle: 305°
Left: K=10
Right: K=20

15. Fill the top of the stud with another gradient:

Type: liner
Angle: 180°
Left: K=10
Right: K=20

16. Finally fill the side of the stud:

Type: linear
Angle: 0°
Left: K=10
Middle: K=0, Position = 60°
Right: K=20

17. Remove the outlines of your brick. You can optionally drag the created gradients to your swatch library for further usage.

18. Use the Pen Tool (P) and draw a shape that matches the outline of the brick using the grid. Chose a color for the filling and make sure that it has no outlines.

19. Place it above your brick, go to the Transparency Window (Window>Transparency) and select Multiply from the drop-down menu. Change the color of your brick can be done with just two mouse clicks: select the overlaid object and chose the color you want.

Different Bricks

20. Many assemblies or even typefaces can be done with using the basic 1×1 brick, but a wider range of parts is very helpful – just like with real LEGO However, most of the additional parts are based on the 1×1 brick.

Let’s create a 2×1 brick. Keep one version of the basic brick for further use and duplicate it twice for the new brick. Starting with the background object and place additional segments in front of it will save you a lot of time. Use the grid for the correct alignment.

21. The new brick already looks good, but we want to create a real 2×1 brick instead of two 1×1 bricks placed next to each other. Therefore move the two objects containing the color of the brick to the side.

22. Delete the top and the right side of the brick in the foreground. This will reveal the complete background brick. Remove its left side as well.

23. Use the Direct Selection Tool (A) and the grid to expand the remaining faces.

24. Use the Selection Tool (V) to select both colored paths and combine them with the Pathfinder (Window>Pathfinder). Select Add to Shape and press the Expand Button to create a single path.

25. Move the combined path back to where it came from. Now you have a real 2×1 brick in addition to the basic brick.

26. Creating even longer bricks is similar to what you did before and should not pose a problem to you. The final assembly of this tutorial even uses slope bricks (roof bricks) and inverse slope bricks, where the thinner end of the brick is one-third the height of the basic brick. Fill the slope path with 20% gray (K=20).

27. Once you created a new brick you should select all parts of it and group it (Command + G). This will help you construct more complex assemblies.

These seven bricks are used in this tutorial:

1×1 brick
2×1 brick
3×1 brick
2×1 slope brick (front view)
2×1 slope brick (rear view)
2×1 inverse slope brick (front view)
2×1 inverse slope brick (rear view)

Pixel Font for the Bricks

28. I created a pixel-style logotype for this tutorial. Feel free to create additional letters or use existing pixel fonts.

29. Rebuilding the pixel logotype with your bricks will result in a pseudo-three-dimensional logotype. Just copy/paste from your previously generated “brick pool” to your workspace. Once again, start from the background and place new bricks in front (that’s why copy/paste is favored over drag’n'drop + Alt).

Whenever you have troubles with foreground and background use the Layer Window to rearrange certain bricks. Alternatively you can use the shortcuts:

Move object up in stacking order (Command + ])

Move object down in stacking order (Command + [)

30. Continue with placing bricks on your workspace until your logotype is completed.

31. Use the Direct Selection Tool (A) to select the bricks and change their color. By using this tool only the upper path containing the color is selected. Otherwise the whole brick would be selected, recolored und therefore would lose its 3D style.

Adding in Shadows

32. Select the complete logotype and duplicate it.

33. Ungroup (Command + Shift + G) the duplicate and use the Pathfinder (Window>Pathfinder) to combine all shapes using Add to Shape. Press the Expend Button to make it just one object.

34. Fill it black and rotate (Object>Transform>Rotate) it -35° to bring the shadow to a horizontal position.

35. Now shear (Object>Transform>Shear) the shadow:

Angle: -50°, horizontally

36. Rotate (Object>Transform>Rotate) the shadow 35° to bring it back to its original position.

37. Use the Lasso Tool (Q) to select the upper line of shadow ("VECTOR") and bring it to its correct position. Do the same for the lower line ("DIARY"). Use the Selection Tool (V) again to select the complete shadow and move it behind the bricks logotype (Command + [ ).

You could hide the guidelines (Command + ,) to get a better look at your logotype.

Ground Pattern

38. The green base area is way too big and contains to many studs to be built manually. So we use a pattern instead.

Create a flat 4x4 area (no sides needed) as seen in chapter 4 and group all (Command + G).

39. Use the Rectangle Tool (M) to draw a rectangle as seen below.

40. Select the 4x4 area and the rectangle and mask it (Command + 7). Then use the Pathfinder to remove the hidden parts (Window – Pathfinder – Trim).

41. Drag and drop the resulting rectangle to your Swatches to make it a pattern.

42. Use the Rectangle Tool (M) to draw the base area, move it to the background (Command + Shift + [) and fill it with the previously created pattern. The studs of the pattern won't align themselves with the grid and moving the base area won't help either. But since you are almost done you can switch off the magnetic guidelines (Command + U) and move the logotype with its shadow so it fits the base.

43. Finally copy the rectangle, paste it in front (Command + F), fill it green and set its transparency to Multiply.

[private_basic]
Download Source File
[/private_basic]
[private_premium]
Download Source File
[/private_premium]

Related posts:

1. Illustrator Tutorial: Disco Ball
2. Illustrator Tutorial: How to Create a Quilt Block
3. Illustrator Tutorial: Bling Bling Text Effect

Next, apply the same Transform Effect over your heart tile. Now enter -53pt for Vertical under Move. Set the copies to 8 in this case. You realise the heart tiles now fit nicely with my background.

The good thing of making tiles using Transform Effect is that you can adjust it at realtime to tweak your tile deign. Go to your Appearance Panel and you will be able to adjust it. Simple as that!

Related posts:

1. Vector Background Effect #1 – Marine Square Tiles
2. Premium Tutorial: Illustrator Seamless Patterns
3. Illustrator Trick #3: Repeated Patterns

Getting Started

1. Open Adobe Illustrator (I use CS3 version) and create new document 1000×500 px. Make it RGB color mode and turn on grid (Ctrl+’) and snap to grid (Ctrl+Shift+’). Adjust your grid by going to Edit>Preferences>Guides and Grid, make the grid 40 px with 10 subdivisions. Finally, create a rectangle 800×200 px in the middle of artboard, position it to touch the larger grid borders and convert it to guides (Ctrl+5). Lock it – this will make the borders of our type. I would also recommend you to turn smart guides on (Ctrl+U).

Creating the Custom Typeface

2. We will start making the custom font now. In order to exactly recreate the logo, we must enter correct values for every shape. Besides, for some shapes we should consider the stroke width of future letters – it will be 40 px. Anyway, all the calculations are already made, so let’s start with the font.

Grab the Rounded rectangle tool and hit Enter, for width enter 64 px, for height enter 212 px, and make radius 32 px. With Direct Selection (A) select the bottom point and delete it. Now align the shape with rectangle guides as showed below. Now Alt+Shift+drag the shape to copy it placing exactly beside the first one.

3. For the next letter “E” we will use rounded rectangle again. But this time we enter different values, as the shape is different: for width enter 80 px, for height – 160 px, and radius set at 40px. Select the shape you just created and make a copy of it (we’ll use it for some other letters) – simply Alt-drag it away. Now, select the original rounded rectangle and position it 16 px to the right of “M” – it is equal 4 small grid subdivisions. Now select it’s right segment with White Arrow (A) and delete it. Finally, create a horizontal line in the middle of it to complete “E” letter.

4. Let’s move on to the next letter “X”. Take a Line tool (\) and create a diagonal line that overlaps the borders of our guide rectangle. Now take a Reflect tool (O), click Enter and choose Vertical option, press copy. Now you have two crossing lines that will make a letter “X”. Try to position it like in the image below.

Applying Multiple Strokes

5. I think now it’s time to check if we are making everything correctly. Make sure your shapes have no fill and black stroke. Select any shape you have for now (I choose the small horizontal line in a letter “E”) and make is’s stroke width 40 pt. Now go to Appearance panel (Shift+F6) and select “Add new stroke” in the flyout menu. Make the new stroke white and 24 pt wide. Duplicate the new stroke, make it black and 8 pt wide (img. 5-A). This way we recreate the future font. Now, with the shape selected, go to Graphic Styles panel (Shift+F5) and press New button to create new graphic style. All you have to do now is select all letters and apply new style to them(img. 5-B).

6. We have applied multiple strokes and now it’s a good time to adjust the positioning of the letters. Make sure the letters are within the rectangle guide we created in the first step, and that M and E overlap correctly – outer black stripe of one element must overlap middle black stripe of another one. Also, select the X letter and send it to back (Shift+Ctrl+[) to see the border between E and X. Move it so that the middle black stripe of E flows into the outer black stripe of X. They don't have to intersect exactly, but we'll correct it later.

7. Let's continue making the font - create a vertical line with Line tool (\) to make an I letter. Apply the graphic style we just made to it, and again, position it correctly, so that outer stripes of X and I overlap.

8. Now, take the rounded rectangle we copied when creating E (80px wide, 160 px high, 40px radius) and put it after I letter. Duplicate it and move it to the right. For the first one, select it's right segment with Direct selection (A) and delete it to make C letter. Again, apply the graphic style we made and adjust the positioning like on the picture below - make sure they overlap correctly.

9. We have completed the letters, so let's move on to create the numbers "68". Take the "C" letter and Alt-drag to duplicate it, now grab the Ellipse tool (L) and create a circle 80x80 pixels. Position it so that it forms "6" number with copy of C letter. To make "8" just take two copies of the same circle and align then vertically. Again, apply the graphic style and position all objects to correctly overlap each other.

10. Okay, so the custom font is ready, but if you look carefully you'll notice that the way stripes overlap is far from original, as every stripe has to flow from one letter to another. It is impossible to produce with multiple strokes. We'll need a different approach. Select all the shapes and go to Appearance panel. Delete the two top strokes, so we are left with single black 40 pt stroke. Group all letters and numbers.

11. Now select the group and make a copy (Ctrl+C and Ctrl+F), and change the stroke width of this group to white color 24 pt width. Repeat these steps to make the third group. This time make the stroke black 8 pt width. This way the emblem looks much better with correct stripes' position. The main shape is ready now!

12. You may notice that X is too tall. We will correct it now. Create a rectangle that will crop our letters above all the groups, it must have 200 px height with no fill. Look at the rectangle guide we made in the first step (you hide the guide and grid now). Lock the groups for now so that you won't accidentally select it. Now, go to the flyout menu of Layers panel and choose Create clipping mask option - the rectangle will turn to mask.

Creating Olympic Rings

13. All we need now is the set of Olympic rings. To make them, create a circle 80x80 px with no fill and 8px yellow stroke. Position it over the middle stripe of "6" number, copy it and place it over "8" number and change the stroke to green. Place 3 more rings over these two so that they overlap, make their stroke blue, gray, and red. Now group all the rings. Voila - the logo is complete!

Conclusion

We have completed one of the most outstanding Olympic emblems, Mexico-1968, which involved creating custom type and clever usage of strokes. I think the designers of this logo did wonderful job. This method can be applied to any text and the results will be look nice - as such technique is really timeless.

[private_basic]
Download Source File
[/private_basic]
[private_premium]
Download Source File
[/private_premium]

Related posts:

1. Olympic Logo Tutorial #3: Torino 2006
2. Olympic Logo Tutorial #2: Lillehammer 1994
3. Olympic Logo Tutorial #1: Munich 1972

In this tutorial, I will show you how to create a Polaroid robot illustration for my past t-shirt graphic project. Drawing this illustration is pretty easy. I am not going to use a lot of gradient so the graphic is easier to print on t-shirt. You just need to know the basic of using pen, shapes, and pathfinder, the rest are just patience and happy thought. Please enjoy~



Difficulty: Basic-Intermediate tutorial
Requirements: Illustrator 10, CS, CS2, CS3 and CS4

What will you get?

• Instant download of PDF e-book
  
• Detailed step by step tutorial
  
• Learn the techniques to draw a robot in illustrator
  
• Comes with Ai file for easy reference
  

Preview Screenshots

[private_premium]

[/private_premium]

Related posts:

1. Premium Tutorial: Retro Microphone
2. Premium Tutorial: 3D Volcano Infographics
3. Premium Tutorial: Realistic Vector Rose

In this tutorial, I’ll show you how to draw a vector mobile phone by using simple shapes and gradients. So let’s get started.

1. Select the Rectangle tool (M) and create a rectangle with sizes width 190px and height 460px. While the rectangle still selected, go to Effects> Stylize> Round Corners and in the opening window select Radius 30px and click Ok.

2. Fill the shape with Linear gradient colours from grey to dark grey. While the shape is still selected go to Object> Path> Offset Path and select Offset -2px and click Ok. You’ll notice that the shape is being duplicated in a smaller size. While the shape you just created is still selected open Gradient Panel and fill the shape with Linear gradient from white to light grey.

3. While the shape we just filled in with lighter colours is still selected go to Object> Path> Offset Path and select Offset -2px. Fill the created shape with Linear gradient as shown below.

4. Copy the last created shape using Ctrl+C and click Ctrl+F, decrease the size of the copy using the Selection tool (V) as shown below. Now, open Gradient Panel and fill with Linear gradient.

5. While the shape is selected go to Object> Path> Offset Path and select Offset -2px. Fill the shape with colour R=229 G=234 B=240 and then go to Object> Path> Offset Path and select Offset -2px and fill the created shape with Linear gradient which you used to fill the shape from step 3. To do so, select the Eyedropper tool (I) and click on the shape from step 3.

6. Now, with the shape still selected, go to Object> Path> Offset Path and select Offset -2px. Open Gradient Panel and click on Reverse Gradient to reverse the gradient.

7. Copy the last created shape with Ctrl+C followed by Ctrl+F. Fill the copy with this colour R=26 G=26 B=26 and decrease the size a little bit on the bottom and a little bit on the right and left side.

8. Select the Rectangle tool (M) and create a rectangle with sizes width 165px, height 119px, fill it with colour R=26 G=26 B=26. Posistion it like how it’s shown on the picture below and go to Object> Path> Offset Path and create Offset -2px. Fill the created shape with Linear gradient as shown below.

9. While the shape you just created and filled with Linear gradient is still selected, go to Object> Path> Offset Path and select Offset -4px and click Ok. Apply Stroke Colour to the created shape with colour R=77 G=77 B=77 and 1 pt.

10. Select the Rectangular Grid tool, click once over the document, a window will open. Fill in the following settings: Width: 164px, Height: 117px, Horizontal Dividers, Number: 3, Vertical Dividers, Number: 2, click Ok. Now you need to remove the four corner dots by using Direct Selection Tool (A) by clicking over the dot who needs to be removed and click Delete on the keyboard. After that apply Stroke colour black colour, 1pt and position the shape like how it’s shown in the picture below. Now select the shape from the previous step and the shape you just created, open Pathfinder Panel and click on Divide.

11. Select the Rectangle tool (M). Create a rectangle with sizes width 135px, height 176px, fill it with white colour and position as how it’s shown below.

12. Create a rectangle using the Rectangle tool (M) with sizes width 52px, height 5px, then go to Effect> Stylize>Round corners and in the opening window select radius: 5px. Fill the shape with Radial Gradient with colours from grey to dark grey and position it how it’s shown below.

13. Create a rectangle using the Rectangle tool (M) with sizes width 60px, height 55px. Now, let’s round the rectangle’s corners. To do so, go to Effect> Stylize> Round Corners and in the opening window select Raduis: 15px, then click Ok. Fill the shape with Linear Gradient. To do so, open Gradient Panel by clicking Ctrl+F9. You need to have 4 Stop Color Sliders alltogethe. For the first one, from left to right select this colour R:204 G204 B:204, for the second one R:51 G:51 B:51, for the third one R:128 G:128 B:128 and for the fourth one R:230 G:230 B:230.

14. While the rectangle that we just rounded the corners to is still selected, go to Object> Path> Offset Path, select Offset -2px and fill the shape with dark grey colour.

15. Now, while the shape is still selected go to Object> Path> Offset Path, select Offset -2px and fill with Linear Gradient like how it’s shown on the picture below.

16. While the shape we just created is still selected go to Object> Path> Offset Path and select Offset -4px and for Fill Colour select light grey colour.

17. While the last created shape is still selected, go to Object> Path> Offset Path and select Offset -2px, fill the shape with dark grey colour and again go to Object> Path> Offset Path and select Offset -5px. Now, while the last created shape is selected, go to Effect> Stylize> Round Corners and in the opening window select Radius 5px and click Ok and fill it with Linear Gradient.

18. Create a rectangle with sizes width 29px, height 15px and go to Effect> Stylize> Round Corners and in the opening window select Radius 4px and for Fill Colour select black colour. While the shape is still selected, go to Object> Path> Offset Path, select Offset -1px and fill with colour R: 242 G: 242 B: 242. Again go to Object> Path> Offset Path, select Offset -0.5px. Fill the shape with dark grey colour and move it a little bit down using the arrow keys on the keyboard.

19. Select the Line Segment tool and create a line with sizes Length: 8 px Angle: 0, select dark grey as a Stroke colour, 2pt. Position the shape over the button. Select the 4 shapes you have created earlier and group them by Object> Group. After that, duplicate them 3 times and position them like how it’s shown below.

20. And the last thing to do is to add numbers and letters over the buttons and you can also add a cool wallpaper on the display of the phone. Now, select all the shapes of the phone, group them by Object> Group by Ctrl+G and add some Drop Shadow Effect> Stylize and with that we are finished.

And here is the final result:

[private_basic]
Download Source File
[/private_basic]
[private_premium]
Download Source File
[/private_premium]

Related posts:

1. Illustrator Tutorial: Cosmetic Bottle Illustration
2. Illustrator Tutorial: 4 Stylish Web 2.0 Badges
3. Illustrator Tutorial: How to Make an Icy Cocktail