Create an arrow through a heart icon

With Valentine’s Day coming up, I thought I’d bring you something with a similar theme. In this tutorial we are going to create a vector/icon heart with an arrow going through it, using Adobe Illustrator. This tutorial will teach you to take simple shapes and use them to create more complex objects, as well as several other techniques.

Step 1

Create a new 1000 x1000px document in Illustrator. Using the Rectangle Tool (M) create a long thin vertical box, something like I have.

Step 2

This box will become the shaft of our arrow. To give it some color we are going to create a gradient. First we want to select web colors from our color options, so we can just type in our color codes. Click on the arrow on the top right side of our Color palette (F6) and click on Web Safe RGB.

Ok, now lets click on the box we make. Select our first color, which will be a light brown color (#BB946D). Take the color and click and drag it from the Color palette (F6) to the Gradient palette (F9). This color should go on the left and right sides of the gradient. Now we are going to select a lighter color (#E7CA9D), this color will go in the middle of the gradient.

Step 3

To create the arrowhead, we are going to click on the Start tool, the holding Shift, click and drag a star. Before you let go, use the down arrow until you get 3 points that will make our triangle.

Change the color to #746F77.

Step 4

Now to start shaping the arrowhead we are going to click on the Pen Tool (P). Click on the anchor points on the left and right sides of the arrow, to make them disappear.

We want the bottom middle anchor point to go up into the triangle, so hold down Alt and click on the point. Hold down shift and move up the point a few spaces so it looks something like what I have.

Step 5

Half of our arrowhead is going to be dark and the other half is going to be light. To create lighter half we are going to first duplicate the triangle with Ctrl+C then Ctrl+F (to paste in place).

We are going to go to View>Smart Guides (Ctrl+U), this will help us line up our shapes better. Now using the Rectangle Tool (M) click and drag a box so it covers the left side of the arrowhead and you end at the top point. It should just snap into place because of the Smart Guides.

Step 6

Make sure you click on the box we made, and the duplicate copy of the arrowhead. Use your Pathfinder palette (Shift+F9) and, click on “Subtract from shape area” and then click expand. This should leave the area left that wasn’t covered by the box. Change the color to #BCBBC3.

Step 7

I am going to thin out the head a little bit so I am just going to select the dark and light parts of the head then, holding Alt, bring the left side in a little bit.

Now, we are going to place the arrowhead on top of the shaft, so we have something like I have below.

Step 8

To start on the feather part of the arrow we are first going to copy (Ctrl+C) and paste in place (Ctrl+F)
the arrow and move it over to the left.

Click on the lighter part of the arrowhead and delete it. Take the dark arrowhead and while holding down shift rotate the shape so the point is facing down. Also move the arrowhead down a little bit so the top of the arrow shaft is showing.

Step 9

Copy (Ctrl+C) and paste in place (Ctrl+F) the arrowhead; move it down and reduce the size with Alt and Shift to keep the proportions the same and so the center point doesn’t move.

Click on the top, larger arrowhead and then click on the Pen Tool (P). Click on the sides of the arrowhead to add anchor two anchor points (one for each side). Hold down Ctrl and move the side points we created to the points of the smaller arrowhead, and move the middle point into the smaller arrowhead.

Step 10

Click on your Selection Tool (V) and then click on the larger arrowhead. Hold Shift and click on the smaller arrowhead, so that you have both selected.

Click on “Subtract from shape area” in your Pathfinder palette (Shift+F9). This should get rid of the smaller arrowhead and leave an arrow feather looking shape. Stretch out the shape so it is a little longer.

Step 11

Hold down Ctrl+Shift+[ to move the feather behind the arrow shaft.

Using the Pen Tool (P), start making some small triangles going into both sides of the feather like I have done.

Hold down shift and click on all of the triangles you made, as well as the feather. Click on “Subtract from shape area” in your Pathfinder palette (Shift+F9). This should remove some chunks of the feathers to give it more of a used look.

Step 12

The last thing we want to do with the arrow is give the shaft above the feathers a rounded top. Click on the Pen Tool (P) and add a point to the top of the shaft. Using the up arrow, move the point up a few spaces. Hold down Alt, click and drag the point to the left to round out the top.

Step 13

To make the heart we are going to use our Ellipse Tool (L) to make a circle (holding down shift to make it a perfect circle).

Make a square with Rectangle Tool (M) and make a square the same width and height as the circle.

Step 14

Move the square up so the top of it lines up with the middle of the circle. Select both of the shapes and in your Pathfinder palette (Shift+F9) click Add to shape area, and expand.

This is half of our heart shape. To get the other half duplicate the shape we just created with Ctrl+C, Ctrl+F. Hold down shift and rotate the shape 90˚.

If you have your Smart Guides (Ctrl+U) selected still then you can just intersect the left and bottom edges. Select both of the shapes and in your Pathfinder palette (Shift+F9) click Add to shape area, and expand.

Step 15

Hold down Shift and rotate the heart to the left so it is standing upright.

Before we attach the arrow to the heart, we want to line up the two sides of the arrow, so it lines up in the heart. Select the arrowhead side and click on the top edge and line it up with the top edge of the feather side. Now hold down shift and move the arrowhead side to the right so there is a large gap that we can fit the heart into.

Step 16

We are going to add some finishing touches to the arrow, first the feather side. Lets add a shadow around the shaft. Duplicate the shaft (Ctrl+C, Ctrl+F) and hold down Alt, then click and drag the top anchor point up.

Step 17

Duplicate the feathers, then click on the duplicated feathers and shaft, then click on “Intersect shape area”, click on expand.

Step 18

Change the color of the shape we just made to black, and while we are at it we are going to change the color of the feathers to #906127.

Change the opacity of the black shape to 20%.

Step 19

Click on the feathers and Duplicate them. Now click on the black and white circle gradient and change the blend mode to Multiply, and the opacity to 30%.

Step 20

Repeat step 19 for the arrowhead.

Step 21

We are going to make a shadow on the shaft coming from the arrowhead. Click on the gradient we just made on the arrowhead and duplicate it. Move it over to the left a few spaces so it covers some of the shaft. Duplicate the shaft, then select both the duplicated layers and click on “Intersect shape areas” on the Pathfinder palette (Shift+F9), and click on expand.

Drop the opacity down to 20% and change the color to black. Click on the arrowhead layers and then do Ctrl+Shift+] to bring them in front of the shadow we just created.

Step 22

We are going to change the color of the heart to #BA0000. Repeat step 19 to add the gradient to the heart.

Step 23

To give our heart a shiny look, we are going to create a circle that covers the bottom half of the heart. Duplicate the heart gradient shape, then select that shape and the large circle. Click on “Subtract from shape area” on the Pathfinder palette. This should give you a shape on the top half of the heart.

Step 24

Use the white to black linear gradient and using the Gradient Tool (G) click and drag a gradient starting at the bottom of the shape and going up. Change the blend mode to Overlay and make sure the Opacity is at 30%.

Step 25

Now the only thing left to do is to angle the arrow and put the heart in the middle.

Final

Here is my final version with a few added features, and the full version

You can get easily download link for 70-663 products. Also get up-to-dated OG0-091 to pass pass4sure 70-548 exam on first try.

Only comments in English will be approved!

• Flash Templates

• Signazon.com

• Blogroll

  • Dzinepress
  • Hongkiat.com
  • Inspiration Feed
  • Little Box Of Ideas
  • PBrushes.com
  • PR5
  • Splashnology
  • Stock Images
  • The Design Work
  • Tutorial Lounge
  • TutorialKing.eu
  • WebDesignFan