All posts tagged “Illustrator”

An illustrator fights his creations

first image of the post
Alex Solis is a talented Chicago-based illustrator. We have already featured some of his work on Designer Daily, and he was already interacting with his illustrations. In this new series, Solis takes it a step further by fighting with his illustrations. Do not worry for the poor little drawings though, they do fight back and […]

The post An illustrator fights his creations appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!


Designer Daily: graphic and web design blog

How to Create a Coding Page Illustration in Adobe Illustrator

You’re reading How to Create a Coding Page Illustration in Adobe Illustrator, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

How to Create a Coding Page Illustration in Adobe Illustrator

With all the flat style madness going on in the design community, we can quickly see how this is the direction of the future. Whether it’s icon design, mobile design, or web design, beautiful playful colors, lines and shapes are creating a new world for us to play in. Having said that, the current tutorial […]



Designmodo

Fantasy Illustrator: Volume 2

Read more about Fantasy Illustrator: Volume 2 at CreativeBloq.com


Click the links below to download your assets from the Fantasy Illustrator: Volume 2 bookazine, including video, WIPs and final images. All of our video can also be viewed via our YouTube page. Workshops Download all workshop assets




Creative Bloq

How to Create a Vintage Macintosh in Adobe Illustrator

You’re reading How to Create a Vintage Macintosh in Adobe Illustrator, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

How to Create a Vintage Macintosh in Adobe Illustrator

So it’s that time again when Apple starts unveiling new devices, so I thought it would be a great opportunity to make a relatively short tutorial on how to create a nice little vintage Macintosh. Step 1 – setting up our document For the current tutorial, we will need to set up a new Illustrator […]


Designmodo

Illustrator adds characters to random Instagram photos

first image of the post
Lucas Levitan is a Brazilian illustrator who works from London. For fun, he likes to hijack people’s photos on Instagram and add his own flavor to it. He draws some funny pictures that give a whole new meaning to the photos. You can find more of his illustration here, in his photo invasions page.

The post Illustrator adds characters to random Instagram photos appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!


Designer Daily: graphic and web design blog

Illustrator Sebastien Del Grosso interacts with his drawings

first image of the post
French illustrator Sébastien Del Grosso did an awesome series of illustrations combined with photographic self-portraits. These pictures, in which he really interacts in a humorous way with the drawings, are a great way to express the artist’s love/hate relationship with his drawings. The artist, who is also a good photographer, even took the time to […]

The post Illustrator Sebastien Del Grosso interacts with his drawings appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!


Designer Daily: graphic and web design blog

21st Century Schizoid (Wo)man: Tatiana Kartomten: The illustrator and tattoo artist talks inspirations, drugs and being a woman against authority

21st Century Schizoid (Wo)man: Tatiana Kartomten

Californian illustrator Tatiana Kartomten’s drawings are enchanting, mystical things, with enough details to keep the viewer endlessly captivated. The London-based artist’s intricate illustrations also have a spiritual, psychedelic vibe reminiscent……

Continue Reading…


Cool Hunting

5 new features added to Photoshop and Illustrator apps

Read more about 5 new features added to Photoshop and Illustrator apps at CreativeBloq.com


New, free mobile apps were central to this summer’s relaunch of Adobe’s Creative Cloud – dubbed Creative Cloud 2014. And two of the most popular have been the drafting and tracing app Illustrator Line and the sketching and painting tool Photoshop Sketch.




Creative Bloq

Illustrator Tutorial: How to Create a Realistic Nintendo Controller

Adobe Illustrator can be a little tricky to get your hands around, particularly after getting used to the workflow of applications like Photoshop. The differences between layer use and the creation of objects and shapes can be really strange at first hand.

Illustrator Tutorial: How to Create a Realistic Nintendo Controller

In the following tutorial you will learn to create a Super Nintendo Controller by using some basic tools, the Align palette, vector shape building techniques, gradients, duplicated shapes and more. So let’s begin!

Final Result

Let’s see what you will be creating in this tutorial.

Create a Super Nintendo Controller in Illustrator - Final Result

Create a Realistic 3D Super Nintendo Controller in Illustrator

Create a New Document

1. Launch Illustrator and then press (Ctrl + N) to create a New document. Select Pixels from the Units drop-down menu, enter 716 in the width box and 500 in the height box 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 you click OK.

Create a New Document

Create the Main Shapes

2. Start with drawing a 276 by 276px using the Ellipse Tool (L). Duplicate (Ctrl +C, Ctrl +F) this ellipse once and then move the copy 380px to the right. Next pick the Rectangle Tool (M) and use this tool to create a 380 by 242px object, then place it to the correct position like you see in the second image.

Create the Main Shapes

Create the Main Shapes

3. Select the left ellipse and go to the Object > Path > Offset Path… Enter a -63px Offset and then click OK. Next select the right ellipse and go to the Object > Path > Offset Path… Enter a -15px Offset and then click OK. Now select two biggest ellipses, hold down the Shift, click on the rectangle and open the Pathfinder palette (Window > Pathfinder), then click on the Unite button.

Create the Main Shapes

Create the Main Shapes

4. Make sure that the newly created object is still selected, pick the Add Anchor Points Tool (+) and add four anchor points highlighted with blue (pic.1). Next select and remove two anchor points highlighted with magenta (pic.3). Now pick the Convert Anchor Point Tool (Shift +C), hold the Shift, click on the left anchor point highlighted with red (pic.5) and drag it to the right. Next hold down the Shift, click on the right anchor point highlighted with red and drag it to the left.

Create the Main Shapes

Create the Main Shapes

5. Fill the biggest object with R=168, G=170, B=170. Next fill the small ellipse with the linear gradient as shown in the second image. Keep the resulting shape selected, go to the Object > Path > Offset Path… Enter a -3px Offset and click OK, then replace the existing color of the new shape with R=163, G=165, B=164.

Create the Main Shapes

Create the Main Shapes

Create the Main Shapes

6. Draw an object with the Rounded Rectangle Tool like in the image. Keep the new object selected, hold down the Shift, click on the red ellipse, release the Shift and then click on the red ellipse again (to fixed its position). Next open the Align palette (Window/ Align) and click on the Vertical Align Center button. Now reselect the new object and the red ellipse and open the Pathfinder palette (Window > Pathfinder), then click on the Minus Front button. Make sure that the new shape is still selected and double-click on the Rotate Tool. In the Rotate box, enter a -38 degrees Angle and then click OK. Finally fill the resulting object with R=113, G=118, B=121 and add a 1px stroke (R=65, G=64, B=66).

Create the Main Shapes

Create the Main Shapes

Create the Main Shapes

Create the Main Shapes

Create the Buttons

7. With the Rectangle Tool (M) create a 64 by 96px object. Remove the top-right anchor point of the new object and then move the bottom-right anchor point 48px up. Reselect the new object, pick the Reflect Tool (O), hold down the Alt and click on the anchor point highlighted with red. In the Reflect box, check the Vertical and then click Copy. Next reselect two newly created objects, open the Pathfinder palette (Window > Pathfinder) and click on the Unite button. Now select the shape created in the step 6, hold down the Shift, click on the new object, release the Shift and then click on the object created in the step 6 again (to fixed its position). Next open the Align palette (Window/ Align), click on the Horizontal Align Center button and then click on the Vertical Align Center button.

Create the Buttons

Create the Buttons

8. Pick the Ellipse Tool (L), hold down the Alt and click on the right anchor point of the new object. In the Ellipse dialog box, enter a 61 in the Width box and enter a 61 in the Height box, then click OK. Keep the new ellipse selected, go to the Object > Path > Offset Path… Enter a -7px Offset and then click OK. Reselect two newly created ellipses, duplicate (Ctrl +C, Ctrl +F) them once and then move the copies 80px to the right.

Create the Buttons

Create the Buttons

Create the Buttons

9. With the help of the Rectangle Tool (M) create a 80 by 61px object and then place it to the correct position like you see in the image below. Keep the new rectangle selected, hold down the Shift, click on two bigger ellipses and open the Pathfinder palette (Window > Pathfinder), then click on the Unite button. Make sure that the resulting object is still selected, hold down the Shift and click on two remaining ellipses. Next pick the Rotate Tool (R), hold down the Alt and click on the left anchor point of the blue object. In the Rotate box, enter a 38 degrees Angle and then click OK. Keep the resulting objects selected, duplicate them once and move the copies 46px up, then move them 64px to the right. Finally remove the blue object.

Create the Buttons

Create the Buttons

Create the Buttons

Create the Buttons

Create the Crossed Area and the Buttons

10. Using the Rectangle Tool (M) create a 112 by 40px object. Select the ellipse created in the step 5, hold down the Shift, click on the new rectangle, release the Shift and then click on the ellipse created in the step 5 again (to fixed its position). Next open the Align palette (Window/ Align), click on the Horizontal Align Center button and then click on the Vertical Align Center button. Reselect the rectangle and double-click on the Rotate Tool. In the Rotate box, enter a 90 degrees Angle and then click Copy. Reselect two new rectangles and click on the Unite button from Pathfinder palette. Make sure that the new object is still selected and go to the Object > Path > Offset Path… Enter a -2px Offset and then click OK. Keep the new object selected, go to the Object > Path > Offset Path… Enter a -2px Offset and then click OK.

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

11. Show the Rulers (View/ View Rulers /Show Ruler) or (Ctrl +R), then drag a horizontal and vertical guide from the Rulers (if the guides locked, go to the View/ Guides/ Lock Guides) or (Ctrl +Alt + ;). Next select a cross object, hold down the Shift, click on two newly created guides, release the Shift and then click on the cross object again (to fixed its position). Open the Align palette (Window/ Align), click on the Horizontal Align Center button and then click on the Vertical Align Center button. Now pick the Ellipse Tool (L), hold down the Alt and click on the intersection point of two guides. In the Ellipse dialog box, enter a 28 in the Width box and enter a 28 in the Height box, then click OK.

Create the Crossed Area and the Buttons

12. With the Rectangle Tool (M) create a 26 by 24px object. Keep the new rectangle selected, hold down the Shift, click on the smallest cross object and then click on the smallest cross object again. Next open the Align palette (Window/ Align), click on the Horizontal Align Center button and then click on the Vertical Align Bottom button. Now remove the bottom-right anchor point of the new rectangle and then move the bottom-left anchor point 13px to the right. Reselect the new triangle, pick the Rotate Tool (R), hold down the Alt and click on the intersection point of two guides. In the Rotate box, enter a 90 degrees Angle and then click Copy. Next press (Ctrl +D) twice times to get the results like you see in the final image below.

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

13. Select the yellow object created in the step 9 and go to the Object > Transform > Scale… In the Scale dialog box, check the Uniform and enter a 44 in the Scale box, then click Copy. Next place the copy to the correct position as shown below. Keep the new object selected and go to the Object > Path > Offset Path… Enter a -5px Offset and then click OK. Now reselect two newly created objects, duplicate them once and then move the copies 70px to the right.

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

Create the Crossed Area and the Buttons

14. Select all objects created from beginning step 2 to this time and go to the Object > Transform > Scale… Check the Non-Uniform and enter a 94 in the Vertical box, then click OK.

Create the Crossed Area and the Buttons

Fill the Objects at the Right Area

15. It’s time to fill the objects created in the previous steps. Fill two yellow objects created in the step 9 with R=162, G=163, B=160 and add a 1px stroke (R=65, G=64, B=66). Next fill four ellipses with R=0, G=0, B=0. Keep the resulting ellipses selected and go to the Object > Path > Offset Path… Enter a -1px Offset and then click OK. Next replace the existing color of the copies like you see in the third image below. Reselect four newly created ellipses, duplicate them once and then move the copies 4px up. Next replace the existing color of the copies like you see in the fourth image below. Finally make a copy (Ctrl +C, Ctrl +F) of four newly created ellipses and then hide the copies (Ctrl +3).

Fill the  Objects at the Right Area

Fill the  Objects at the Right Area

Fill the  Objects at the Right Area

16. Select two yellow shapes of the bottom button and go to the Object > Blend > Blend Option… Follow the data as show below and then click OK. Next go to the Object > Blend > Make (Ctrl +Alt +B). Likewise, repeat the same techniques for the remaining three buttons. In the end it should look like the third image shown.

Fill the  Objects at the Right Area

Fill the  Objects at the Right Area

17. Press (Ctrl +Alt +3) to show four ellipses hidden in the previous step. Keep these ellipse selected and go to the Effect > Stylize > Drop Shadow…Follow the data like you see in the image and then click OK.

Fill the  Objects at the Right Area

18. We are going to start making highlights on the buttons to give them more of a 3D look. First draw four curved paths with the Pen Tool (P) like in the image. Once your paths are drawn, select the curved path of the top button, fill it with none and add a 1px stroke (apply the radial gradient within stroke), then apply the Width Profile 1 for the result. Now, follow the sequence of images and fill the curved paths of the remaining three buttons similar to the ones from below.

Fill the  Objects at the Right Area

Fill the  Objects at the Right Area

Fill the  Objects at the Right Area

Fill the Objects at the Crossed Area

19. Focus on the acrossed area, select the smallest across object, four triangles and the ellipses, then hide them (Ctrl +3). Now select the biggest across object and go to the Effect > Stylize > Round Corners…Enter a 4px Radius and click OK, then fill the resulting object with R=116, G=107, B=104. Next select the remaining across object and go to the Effect > Stylize > Round Corners…Enter a 3px Radius and click OK. Then fill the resulting object with R=35, G=31, B=32 and move it 1px down.

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

20. Press (Ctrl +Alt +3) to show objects hidden in the step 19 and then move them 5px up. Reselect the across object and go to the Effect > Stylize > Round Corners…Enter a 2px Radius and click OK. Fill the resulting object with R=60, G=51, B=49, then duplicate it once and hide the copy. Now reselect two smaller across shapes and create a blend between them. Next show the across shape hidden in this step and replace the existing color of it with the radial gradient.

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

21. Fill the red ellipse with the radial gradient as shown below. Next select four triangles and go to the Effect > Stylize > Round Corners…Enter a 5px Radius and click OK, then fill the resulting objects with R=65, G=61, B=58. Keep the resulting shapes selected and go to the Object > Path > Offset Path… Enter a -1px Offset and then click OK. Replace the existing color of the top copy and the right copy with R=66, G=66, B=66. Next replace the existing color of the bottom copy and the left copy with R=61, G=61, B=61.

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

22. We are going to start making highlights on the acrossed area to give it more of a 3D look. First draw a curved paths with the Pen Tool (P) like in the image. Once your path is drawn, fill it with none and add a 1px stroke (R=168, G=176, B=178), then apply the Width Profile 1 for the result. Continue draw four other curved paths with the Pen Tool (P). Once your paths are drawn, fill them with none and add a 0.5px stroke (R=191, G=177, B=163), then apply the Width Profile 1 for the results.

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

23. With the Line Segment Tool (\) create three horizontal paths. Next fill these paths with none and add a 0.5px stroke (R=248, G=248, B=248), then apply the Width Profile 1 for the results. Keep the resulting objects selected and go to the Effect > Blur > Gaussian Blur… Enter a 1px Radius and then click OK. In the end your controller should look roughly like the third image.

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

Fill the Objects at the Crossed Area

Fill the Objects at the Center Area

24. Focus on the center of the controller, select the bigger object of the left button and fill it with the linear gradient. Next fill the remaining object with R=9, G=9, B=8. Keep the resulting shape selected and go to the Object > Path > Offset Path… Enter a -1px Offset and click OK, then replace the existing color of the new shape with the radial gradient as shown in the third image. Now with the Line Segment Tool (\) create a path like you see in the fourth image. Once your path is drawn, fill it with none and add a 2px stroke (R=97, G=105, B=104), then apply a 2px Gaussian Blur effect for the result.

Fill the Objects at the Center Area

Fill the Objects at the Center Area

Fill the Objects at the Center Area

25. Select and group (Ctrl + G) all shapes created in the step 24. Make a copy of the new group and then move the copy 70px to the right. Finally remove two yellow objects.

Fill the Objects at the Center Area

Fill the Objects at the Center Area

Add the Text

26. Now pick the Type Tool (T), open the Character palette (Window > Type > Character) and set the data as shown below. Next simply click on your artboard and add the text "A", "B", "X" and "Y", then place them to the positions as shown below. Now repick the Type Tool (T), open the Character palette (Window > Type > Character) and set the data as shown in the second image. Next add the text "SELECT", "START" and then place them to the position like you see in the second image.

Add the Text

Add the Text

27. Continue with the Type Tool (T), set the data in the Character palette as shown below and add the text "SUPER NINTENDO", then place this text as shown in the first image. Next create a 160 by 10px object with the Rectangle Tool (M), fill this rectangle with R=54, G=58, B=58 and then place the resulting shape to the position like you see in the second image. Repick the Type Tool (T) and add the text "ENTERTAIMENT SYSTEM". Use the same font with the text "SUPER NINTENDO", but decrease the font size and replace the existing color of the new text with R=183, G=184, B=184. Finally place this text to the correct position as shown in the third image.

Add the Text

Add the Text

Add the Text

28. Select the biggest shape created in the step 5, duplicate (Ctrl +C, Ctrl +F, Ctrl +F) it twice and hide a copy. Next replace the existing color of the remaining copy with the linear gradient as shown below. Once we are done with this gradient, move the resulting shape 20px down and then send it to back (Ctrl +Shift +Left Square Bracket).

Add the Text

Add the Text

Adding some Highlights and Shadow on the Controller

29. Show the shape hidden in the step 28, remove the fill color of this shape and then add a 1px stroke (red color). Keep the new object selected, select two anchor points highlighted with black and then click on the "Cut path at selected anchor points" button from the Properties bar. Now reselect the top path, fill it with none and add a 2px stroke (R=109, G=110, B=113), then apply the Width Profile 1 for the result. Next select the remaining path, fill it with none and add a 2px stroke (R=230, G=231, B=232), then apply the Width Profile 1 and 1px Gaussian Blur effect for the result.

Adding some Highlights and Shadow on the Controller

Adding some Highlights and Shadow on the Controller

Adding some Highlights and Shadow on the Controller

30. With the Rectangle Tool (M) create a 172 by 19px object and fill this object with the linear gradient. Continue create another object with the Pen Tool (P) like you see in the third image, then fill this object with R=241, G=231, B=229. Now reselect two newly created shapes and apply a 3px Gaussian Blur effect for them.

Adding some Highlights and Shadow on the Controller

Adding some Highlights and Shadow on the Controller

31. Select and group (Ctrl +G) three blurred objects created from beginning step 29 to this time. Next select the biggest shape created in the step 28, duplicate (Ctrl +C, Ctrl +F) it once and bring it to front (Ctrl +Shift +Right Square Bracket). Keep the new shape selected, hold down the Shift, click on the new group and go to the Object > Clipping Mask > Make (Ctrl +7).

Adding some Highlights and Shadow on the Controller

Adding some Highlights and Shadow on the Controller

Adding some Highlights and Shadow on the Controller

32. Select the biggest shape created in the step 5 and go to the Effect > Stylize > Drop Shadow… Follow the data as shown below and then click OK.

Adding some Highlights and Shadow on the Controller

Create the Cable

33. Draw a curved path with the Pen Tool (P) like in the image. Once your path is drawn, fill it with none and add a 15px stroke (apply the linear gradient across stroke), then go to the Effect > Stylize > Drop Shadow… Follow the data as shown in the second image and then click OK. Next send the result to back (Ctrl +Shift +Left Square Bracket). Finally select and group (Ctrl + G) all shapes created from beginning step 2 to this time.

Create the Cable

Create the Cable

Create the Cable

Create the Background

34. With the help of the Rectangle Tool (M) create a 716 by 500px object. Next fill this object with R=241, G=242, B=242. The last thing to do is place the new group to the position as shown in the second image. We are done with the controller for the moment. I hope you enjoy this tutorial.

Create the Background

Create the Background

Final Result

Here is what the completed design looks like. Hope you enjoy this tutorial.

Congratulations! You have completed the lesson. I hope you’ve discovered some useful things in this tutorial. The final result image is below. Enjoy!

Create a Super Nintendo Controller in Illustrator - Final Result

Conclusion

As difficult as it looks I’m very sure if you follow my tutorial you will find a lot of help using your skills and images to produce your own creation! Ones again Thank you for using our tutorial, we will be very happy to answer any questions that you may have, You can simply leave a feedback and or a comment below.

Download Result Source Files

Visit us at InstantShift.com

PSD to HTML


InstantShift

How to Create a Cool Beard Trimmer in Adobe Illustrator

Adobe Illustrator can be a little tricky to get your hands around, particularly after getting used to the workflow of applications like Photoshop. The differences between layer use and the creation of objects and shapes can be really strange at first hand.

How to Create a Cool Beard Trimmer in Adobe Illustrator

In this tutorial I will show you how to create a Cool Beard Trimmer in Adobe Illustrator using some basic vector shape building techniques. I would also show you how to add depth and shading for shapes using complex gradients, Mesh tool, the Pathfinder options and some basic blending techniques.

Final Result

Let’s see what you will be creating in this tutorial.

Create a Cool Beard Trimmer in Illustrator - Final Result

Create a Cool Beard Trimmer in Illustrator

Step 1

Let’s start by creating a New document (Control + N). Select Pixels from the Units drop-down menu, enter 800 in the width 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. Click OK

Create a Cool Beard Trimmer in Illustrator

Step 2

Select the Rectangle Tool (M) and create a 160 x 545px rectangle shape. Fill it with a light blue.

Create a Cool Beard Trimmer in Illustrator

Step 3

Take the Direct Selection Tool (A), select the two anchor points highlighted by the red circles (in the following image) and drag them inward 20px respectivly.

Create a Cool Beard Trimmer in Illustrator

Step 4

The Live Corners feature is only available for CC users. The best solution to replace this effect would be the Round Any Corner script that can found in this article: Scripts for Adobe Illustrator (JavaScript) that you can also download directly here. Grab the Direct Selection Tool (A) and select the two anchor points highlighted by the red circles (in the following image), go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 50px.

Create a Cool Beard Trimmer in Illustrator

Step 5

Now take the Ellipse tool (L), create a 85 x 45px shape and place it as shown in the following image. Send this shape to the back by choosing Object > Arrange > Send to Back. Select our blue shape and make a copy in front (Control-C > Control-F). Then select the shape made in this step and our blue copy and click the Minus Front button from the pathfinder panel.

Create a Cool Beard Trimmer in Illustrator

Step 6

Grab the Direct Selection Tool (A) and select the two anchor points highlighted by the red circles (in the following image), go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 20px.

Create a Cool Beard Trimmer in Illustrator

Step 7

Make sure that your blue shape is selected. Take the Pen Tool (P) and add four anchor points as shown in the following image. Now with the Direct Selection Tool (A), select the two anchor points highlighted by the red circles (in the following image) and drag them outward 10px respectivly. Then select the two anchor points highlighted by the blue circles and drag them inward 3px respectivly.

Create a Cool Beard Trimmer in Illustrator

Step 8

Take the Direct Selection Tool (A), select the two anchor points highlighted by the red circles (in the following image) and go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 15px. Select the two anchor points highlighted by the blue circles and click the Convert selected anchor points to smooth button in the top panel.

Create a Cool Beard Trimmer in Illustrator

Step 9

Make sure that our blue shape is selected and go to Effect > Warp > Arc Upper. Enter the settings shown below. Then go to Object > Expand Appearance.

Create a Cool Beard Trimmer in Illustrator

Step 10

Select our blue shape and make two copies in front (Control-C > Control-F> Control-F). Select the top copy and move it 40px to the top. Then select the Rectangle Tool (M) and create a 240 x 530px rectangle shape.

Create a Cool Beard Trimmer in Illustrator

Step 11

Now select the rectangle shape made in the previous step and the top copy of our blue shape and click the Unite button from the pathfinder panel. Select the resulting shape and the other copy of our blue shape and click the Minus Front button from the pathfinder panel. You should have a resulting shape as shown in the last image.

Create a Cool Beard Trimmer in Illustrator

Step 12

We’ll give a little color to it all. Select the bottom shape and fill it with gradient as shown. Then select the second shape and fill it with gradient as shown below.

Create a Cool Beard Trimmer in Illustrator

Step 13

In this step we are going to add a gradient mesh. Take the Mesh Tool (U) and just click on top of our blue shape as shown in the following image to create the mesh. Then with the Direct Selection Tool (A), click in the middle area and fill it with #504c4b color. Now fill the other areas as shown in the image.

Create a Cool Beard Trimmer in Illustrator

Step 14

Make sure that our second shape in the bottom is selected and make two copies in front (Control-C > Control-F> Control-F). Select the bottom copy and move it 8px to the top. Now select both copies made in this step and click the Minus Front button from the pathfinder panel. Fill the resulting shape with gradient as shown below.

Create a Cool Beard Trimmer in Illustrator

Step 15

Make a copy in front (Control-C > Control-F) of the shape made in the previous step and drag 8px to the top. Fill this shape with gradient as shown below.

Create a Cool Beard Trimmer in Illustrator

Step 16

Select the Rectangle Tool (M) and create a 6 x 40px rectangle shape. Fill it with a light blue. Then with the Direct Selection Tool (A), select the anchor point highlighted by the red circle and drag it inward 4px. Now select this shape and go to Effect > Stylize > Rounded Corners. Enter a 3px Radius, click OK and go to Object > Expand Appearance.

Create a Cool Beard Trimmer in Illustrator

Step 17

Select the shape made in the previous step and make a copy in front (Control-C > Control-F). Scale this shape and place it as shown in the following image. Select the two blue shapes and click the Divide button from the pathfinder panel. With the Direct Selection Tool (A) select the indesirable shape and delete it.

Create a Cool Beard Trimmer in Illustrator

Step 18

Fill the first shape with black color and the second shape with gradient as shown below.

Create a Cool Beard Trimmer in Illustrator

Step 19

With the Rectangle Tool (M), create a 9 x 22px shape with any color and place it as shown in the first image. Select this shape and fill it with gradient as shown below. Reselect our shape, make a copy in front (Control-C > Control-F) and scale the height of our copy to 18px.

Create a Cool Beard Trimmer in Illustrator

Step 20

With the Rectangle Tool (M), create a 9 x 36px shape with any color and place it as shown in the following image. Make sure that this new rectangle stays selected and go to Object > Transform > Rotate. Enter a -2px degrees angle and click OK. Now with the Direct Selection Tool (A), select the two anchor points highlighted by the red circles (in the following image) and go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 65px. Select our shape and go to Effect > Stylize > Rounded Corners. Enter a 3px Radius, click OK and go to Object > Expand Appearance.

Create a Cool Beard Trimmer in Illustrator

Step 21

Select the shape made in the previous step and make two copies in front (Control-C > Control-F> Control-F). Select the top copy, scale it with the Selection Tool (V) and place it as shown. Then select both copies made in this step and click the Minus Front button from the pathfinder panel.

Create a Cool Beard Trimmer in Illustrator

Step 22

Select the resulting shape of the previous step and set his color at #514d4c. Go to Effect > Stylize > Drop Shadow and enter the settings as shown below. Then set our first blue shape color at #211d1e.

Create a Cool Beard Trimmer in Illustrator

Step 23

Select all shapes we have made since step 16 and group them (Ctrl + G). Make sure that this group stays selected and go to Object > Transform > Reflect. Enter the settings shown below and click Copy. Drag this copy and place it as shown. Now with the Direct Selection Tool (A), select the shape which is selected in the image, go to Effect > Stylize > Drop Shadow and enter the settings as shown below.

Create a Cool Beard Trimmer in Illustrator

Step 24

Select the Rectangle Tool (M) and create a 80 x 348px rectangle shape. Fill it with a light blue. Take the Direct Selection Tool (A), select the two anchor points highlighted by the red circles (in the following image) and drag them inward 10px respectivly. Then with these two points anchors still selected, go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 28px.

Create a Cool Beard Trimmer in Illustrator

Step 25

Select our main shape and with the Mesh Tool (U) click where are the two anchor points highlighted by the red circles (in the following image). Take the Pen Tool (P) and drag the anchors points as shown. Then back to our shape made in the previous step and with the Pen Tool (P) still selected add the four anchors points as shown. With the Direct Selection Tool (A), select the two anchor points highlighted by the red circles and drag them outward 2px respectivly. Then select the two anchor points highlighted by the blue circles and drag them inward 2px respectivly. Now select the four anchors points and click the Convert selected anchor points to smooth button in the top panel.

Create a Cool Beard Trimmer in Illustrator

Step 26

Select the two anchor points highlighted by the red circles and go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 10px.

Create a Cool Beard Trimmer in Illustrator

Step 27

With the Rectangle Tool (M), create a 80 x 19px shape , set any color and place it as shown in the following image. With our new shape still selected go to Effect > Stylize > Rounded Corners. Enter a 10px Radius, click OK and go to Object > Expand Appearance. Now go to Effect > Warp > Arc Lower. Enter the settings shown below, click Ok and go to Object > Expand Appearance. Then go to Object > Path > Offset Path, enter the settings shown below and click Ok.

Create a Cool Beard Trimmer in Illustrator

Step 28

Select the two shapes of previous step and click the Minus Front button from the pathfinder panel. You should have the following result.

Create a Cool Beard Trimmer in Illustrator

Step 29

With the Rectangle Tool (M), create a 75 x 30px shape and place it as shown in the following image. Select the shape made in the previous step and make a copy in front (Control-C > Control-F). Select our copy and the shape made in this step and click the Divide button from the pathfinder panel. With the Direct Selection Tool (A) select the indesirables shapes and delete them as shown. Select the oranges shapes and click the Unite button from the pathfinder panel.

Create a Cool Beard Trimmer in Illustrator

Step 30

Take the Direct Selection Tool (A), select the two anchor points highlighted by the red circles, drag them to the bottom as shown and go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 18px. Then with our shape still selected make two copies in front (Control-C > Control-F> Control-F). Select the top copy, scale it with the Selection Tool (V) and place it as shown. Now select both copies made in this step and click the Minus Front button from the pathfinder panel.

Create a Cool Beard Trimmer in Illustrator

Step 31

We are going to add another gradient mesh. Take the Mesh Tool (U) and just click on top of our blue shape as shown in the following image to create the mesh. Then with the Direct Selection Tool (A), click in the middle area and fill it with #87898d color. Now fill the other areas as shown in the image.

Create a Cool Beard Trimmer in Illustrator

Step 32

Select the shape made in the step 28 and fill it with gradient as shown in the following image. Then select the shape made in the step 29 and fill it with gradient as shown in the following image. At end, select the shape made in the step 30 and fill it with gradient as shown in the following image.

Create a Cool Beard Trimmer in Illustrator

Create a Cool Beard Trimmer in Illustrator

Create a Cool Beard Trimmer in Illustrator

Step 33

Now select our shape made in the step 26, go to Effect > Stylize > Drop Shadow and enter thes settings shown below.

Create a Cool Beard Trimmer in Illustrator

Step 34

With the Rectangle Tool (M), create a 41 x 135px shape and place it as shown in the following image. Then go to Effect > Stylize > Rounded Corners. Enter a 20px Radius.

Create a Cool Beard Trimmer in Illustrator

Step 35

Fill the resulting shape of previous step with gradient as shown in the following image. To add deph on this shape click on Add New Fill button in Appearance panel and set the gradient as shown in the last gradient.

Create a Cool Beard Trimmer in Illustrator

Step 36

With the Rectangle Tool (M), create a 10 x 24px shape and place it as shown in the following image. With our shape still selected go to Effect > Stylize > Rounded Corners. Enter a 5px Radius. Then fill our shape with gradient as shown.

Create a Cool Beard Trimmer in Illustrator

Step 37

Select the shape made in the previous step and make two copies in front (Control-C > Control-F> Control-F). Select the top copy and move it 8px to the bottom. Now select both copies made in this step and click the Minus Front button from the pathfinder panel. Fill the resulting shape with withe color and a 0.5pt Inside stroke with color st at #939598. Low the opacity of our shape to 70%. Then reselect the shape made in the previous step and go to Effect > Stylize > Drop Shadow. Enter the settings as shown.

Create a Cool Beard Trimmer in Illustrator

Step 38

With the Rectangle Tool (M), create a 10 x 22px shape and place it as shown in the following image. With our shape still selected go to Effect > Stylize > Rounded Corners. Enter a 6px Radius. Then fill our shape with first radialgradient as shown. At the end click on Add New Fill button in Appearance panel and set the gradient as shown in the last gradient.

Create a Cool Beard Trimmer in Illustrator

Step 39

With the Rectangle Tool (M), create a 140 x 115px shape and place it as shown in the following image. Take the Pen Tool (P) and add two anchors points as shown in the following image. Now with the Direct Selection Tool (A), select the two anchor points highlighted by the red circles and drag them outward 15px respectivly.

Create a Cool Beard Trimmer in Illustrator

Step 40

Take the Direct Selection Tool (A), select the two anchor points highlighted by the red circles and go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 30px. Then select the two anchor points highlighted by the blue circles and drag them 10px to bottom.

Create a Cool Beard Trimmer in Illustrator

Step 41

Take the Direct Selection Tool (A), select the two anchor points highlighted by the red circles and go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 15px.

Create a Cool Beard Trimmer in Illustrator

Step 42

Select the shape made in the previous step and make a copy in front (Control-C > Control-F). Scale this copy and place it as shown in the following image. Then select the copy made in this step and the shape of previous step and click the Minus Front button from the pathfinder panel. Now select the resulting shape, go to Object > Path > Offset Path and enter the settings as shown.

Create a Cool Beard Trimmer in Illustrator

Step 43

Select the five anchor points highlighted by the black circles and drag them to top as shown. Make a copy in front (Control-C > Control-F) of this shape and hide this copy. Make also a copy of our blue shape. Now select our shape and the copy of the blue shape and click the Minus Front button from the pathfinder panel.

Create a Cool Beard Trimmer in Illustrator

Step 44

Unhide the shape we have hide in the previous step. Make a copy in front (Control-C > Control-F) of this shape. Scale it as shown in the image below. Remake two copies in front (Control-C > Control-F> Control-F). Select the top copy and move it 15px to the top. Now select both copies made in this step and click the Minus Front button from the pathfinder panel.

Create a Cool Beard Trimmer in Illustrator

Step 45

With the Rectangle Tool (M), create a 98 x 28px shape and place it as shown in the following image. With our shape still selected go to Effect > Stylize > Rounded Corners. Enter a 15px Radius and go to Object > Expand Appearance. Then select the resulting shape, the shape we have left in the previous step (Orange shape) and click the Divide button from the pathfinder panel. With the Direct Selection Tool (A) select the indesirables shapes and delete them as shown. Now select the resulting shape, make a copy in front (Control-C > Control-F) and scale it as shown in the image below.

Create a Cool Beard Trimmer in Illustrator

Step 46

Select the two shapes we have made in the previous step and make a copy in front (Control-C > Control-F). Now with the copies selected, click the Divide button from the pathfinder panel. With the Direct Selection Tool (A) select the indesirables shapes and delete them to have the following thin shape as shown.

Create a Cool Beard Trimmer in Illustrator

Step 47

Select the thin shape in the bottom and make a copy in front (Control-C > Control-F). Drag this copy to the bottom as shown. Then select the two anchor points highlighted by the red circles and ajust them correctly as shown.

Create a Cool Beard Trimmer in Illustrator

Step 48

Select the shape made in the step 43 and fill it with gradient as shown in the following image. Then make sure that our shape is still selected, go to Effect > Stylize > Drop Shadow and enter the settings shown below.

Create a Cool Beard Trimmer in Illustrator

Step 49

Select the thin green shape and fill it with gradient as shown. Then select the bottom yellow shape, set his color at #1c778e, go to Effect > Blur > Gaussian Blur and set the radius at 1,5px.

Create a Cool Beard Trimmer in Illustrator

Step 50

Here, select the pink shape, fill it with #6abbe3 color. Then click on Add New Fill button in Appearance panel and set the gradient as shown in the first gradient. Reclick on Add New Fill button in Appearance panel and set the gradient as shown in the second gradient.

Create a Cool Beard Trimmer in Illustrator

Step 51

Select the thin red shape at the bottom and fill it with gradient as shown. Then select the orange shape and fill it with gradient and stroke as shown in the Appearance panel.

Create a Cool Beard Trimmer in Illustrator

Step 52

Select the following shape as shown in the billow image, go to Effect > Stylize > Drop Shadow and enter the following settings.

Create a Cool Beard Trimmer in Illustrator

Step 53

Take the Rectangle Tool (M), create a 65 x 22px shape and place it as shown in the following image. With the Pen Tool (P) add two anchors points to our shape as shown. Then take the Direct Selection Tool (A), select the two anchor points highlighted by the blue circles and drag them outward 20px respectivly.

Create a Cool Beard Trimmer in Illustrator

Step 54

In this step, take the Direct Selection Tool (A), select the two anchor points highlighted by the red circles and click the Convert selected anchor points to smooth button in the top panel. Make sure that our shape is still selected, fill it with gradient as shown, go to Effect > Blur > Gaussian Blur and set the radius at 3px.

Create a Cool Beard Trimmer in Illustrator

Step 55

Take the Rectangle Tool (M), create a 22 x 28px shape and place it as shown in the following image. With the Direct Selection Tool (A), select the anchor point highlighted by the red circle and drag it 8px to the right. Then go to Effect > Stylize > Rounded Corners. Enter a 6px Radius and go to Object > Expand Appearance.

Create a Cool Beard Trimmer in Illustrator

Step 56

With the Rectangle Tool (M), create a 4 x 7px shape and place it as shown in the following image. Now select the shape made in the previous step and fill it with the first gradient as shown in the following image. Then select the shape we have create in this step and fill it with second gradient as shown. Select the two shapes and go to Object > Arrange > Send to Back.

Create a Cool Beard Trimmer in Illustrator

Step 57

Take the Rectangle Tool (M), create a 5 x 9px shape and place it as shown in the following image. With the Direct Selection Tool (A), select the anchor point highlighted by the red circle and go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 15px. Set the color of our shape at #2e2c2f and go to Object > Arrange > Send to Back.

Create a Cool Beard Trimmer in Illustrator

Step 58

Make sure that the shape we have made in the previous step is selected and make three copies in front (Control-C > Control-F > Control-F > Control-F). Select the top copy and drag it 4pxto the bottom. Select the two top copies made in this step and click the Minus Front button from the pathfinder panel. Now select the resulting shape and drag it 4px to bottom. Make sure that our resulting shape is still selected, then select the last copy made in this step and click the Intersect button from the pathfinder panel. Fill the resulting shape with #e6e7e8 color.

Create a Cool Beard Trimmer in Illustrator

Step 59

Take the Rectangle Tool (M), create a 5 x 20px shape and place it as shown. Select the two anchor points highlighted by the red circles and drag them inward 2px respectivly. Set his color at #545351 and go to Object > Arrange > Send to Back.

Create a Cool Beard Trimmer in Illustrator

Step 60

Take the Rectangle Tool (M), create a 5 x 8px shape and place it as shown. Create two another rectangle shape and place them as shown. Select the three shapes made in this step and click the Minus Front button from the pathfinder panel. Fill the resulting shape with gradient as shown. With the Rectangle Tool (M), create a small rectangle fill it with #f1f2f2 color and place it in the bottom of our previous shape. Group the two shapes and place them as shown in the following image.

Create a Cool Beard Trimmer in Illustrator

Step 61

Select the group highlighted by the red circle and make a copy in front (Control-C > Control-F), go to Object > Transform > Reflect click Ok and place it as shown. Select the shapes made in step 59 and 60, make a copy in front (Control-C > Control-F), group them (Ctrl + G), go to Effect > Distort & Transform > Transform and enter the following settings. Then go to Object > Expand Appearance and delete the shapes highlighted by the red circle. At the end select all shapes made in this step and go to Object > Arrange > Send to Back.

Create a Cool Beard Trimmer in Illustrator

Step 62

Take the Rectangle Tool (M), create a 5 x 52px shape and place it as shown. With the Direct Selection Tool (A), select the two anchor points highlighted by the red circles and go to File > Scripts > Other Script. Open the Round Any Corner Script and drag the slider to 25px. Now click on Add New Fill button in Appearance panel and set the gradient as shown in the first gradient. Reclick on Add New Fill button in Appearance panel and set the gradient as shown in the second gradient.

Create a Cool Beard Trimmer in Illustrator

Step 63

Select the shape we have made in the previous step and go to Effect > Distort & Transform > Transform and enter the following settings, then go to Object > Expand Appearance. Now select the shapes one by one and with the Direct Selection Tool (A) adjust the bottom of shapes as shown. Take the Ellipse tool (L), create a 8 x 1px shape, place it as shown in the following image, go to Effect > Blur > Gaussian Blur and set the radius at 1px. Place this shape below the others made in this step.

Create a Cool Beard Trimmer in Illustrator

Create a Cool Beard Trimmer in Illustrator

Create a Cool Beard Trimmer in Illustrator

Final Result

I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects.

Create a Cool Beard Trimmer in Illustrator - Final Result

Conclusion

As difficult as it looks I’m very sure if you follow my tutorial you will find a lot of help using your skills and images to produce your own creation! Ones again Thank you for using our tutorial, we will be very happy to answer any questions that you may have, You can simply leave a feedback and or a comment below.

Download Result Source Files

Visit us at InstantShift.com

PSD to HTML


InstantShift