25/09/2009 - Editorial.Iconshock

Iconshock tutorial: Ace of Hearts (Super Vista)

ace_of_hearts Hello people. This card is a nice irony isn’t it? It’s the icon for games in Super Vista style. The symbol of love as part of a game appeared in the deck of cards towards the end of the 15th century and now we will glorify the crude facts of a divine ideal with the aid of Illustrator CS4.

Step 1.

img001 Start drawing a circle, duplicate it and move horizontally until both circles touch just a bit. Prepare a round rectangle trying to make a shape of a pill (two opposite sides completely circular). Then stretch the round rectangle, pulling out the flat sides until the semicircles make a smooth curve. Now rotate that deformed pill (about 38°) and place it so that the round side makes a continuous smooth line with one of the circles. Visually adjust the shape having on mind one half of a heart shape. Then duplicate it and make a reflection. You’ll end with a bug-head like construction from which you can see a heart. Open the Pathfinder panel (Shift+Ctrl+F9) and use the Divide command; then ungroup then the figure and delete unwanted parts. Finally, select all and Unite. There’s one way to construct the heart. Other techniques can bring different results. In this tutorial we’ll try to make a heart as similar as possible to the one used in the original icon.

Step 2.

img002 Fill with RGB (128, 0, 0). Open the stroke window (Ctrl+F10) and select a 1 pt. stroke with the same color and align it to outside. Duplicate the heart, remove the stroke and shorten just a bit, so that the lowest one will remain as a frame. Apply a gradient fill (RGB 227, 0, 0 – 128, 0, 0).

Step 3.

img003 Draw an intersecting line on top of the inner heart as show in the image. Select both the inner heart and the line and Divide them, ungroup the results and delete the lower part. Now apply a gradient fill from white to black and set the black knot opacity to 0% as shown in the picture. Finally set the opacity of the layer to 25%. We will make now some border shines for this heart.

Step 4.

img004 Duplicate the smallest heart and delete most of the points of it using the Direct Selection Tool until you get a single line like in the picture. Apply a 2 pt. white stroke to that line. Having the line selected, open the transparency panel (Shift+Ctrl+F10) and, if necessary, choose Show Options from the panel menu to see the thumbnail images. Double-click directly to the right of the thumbnail in the Transparency panel. The line will disappear since you are now working on mask mode. Unless you draw something white, the entire mask will remain black hiding the line. So, draw an oval and apply a white to black radial fill. The line will look fading at the ends. Repeat the same procedure to make the two upper shines.

Step 5.

img005 Finally for this part, create a small circle filled with flat white. Duplicate the circle, make it a bit bigger and in the Appearance panel add a Gaussian Blur effect (1.4 pixels radius). Group both circles and place this shine in the middle of a lineal reflection. Loving requires a lot of sacrifices in real world. Take your time to shape and color that heart. Now it comes easier parts.

Step 6.

img006 Draw a round rectangle with radius 10 pts. This will be the body of the playing card so proportions for this part will be important. Fill it with a lineal gradient which will provide the sensation of relative volume of this card. The RGB color values are: (172, 184, 187), white, (158, 158, 158). Note the distribution of grays and the scaling of the gradient. Open up the Appearance window and click on the Add New Effect button. Go to Stylize - Outer Glow. Use the settings shown in the picture.

Step 7.

img007 A) Select the rectangle and duplicate it. Remove its stroke. With the Pen tool (P) draw a smooth sine curve over the new rectangle. Select both line and rectangle and Divide – Ungroup and Delete extra parts, like in step 1. B) Make that lower part a bit smaller and apply a white to linear gradient as shown in the picture.

Step 8.

img008 Now duplicate again the original rectangle and remove the fill. We will use the same technique we applied before to make the shining borders of the heart in step 4. This time the idea is to make a soft shine in two of the corners of the card. In this case, you can also simply use the Scissors tool (C) and click on the border of the rectangle to mark the cut points. Apply a 2 pt Open the Transparency panel and double-click directly to the right of the thumbnail of the shape to enter the masking mode. Create a black to white radial gradient which will make the line to fade at the ends.

Step 9.

img009 We are definitely giving life to what is simply a flat shape. Do one more copy of the original rectangle for making the last set of shines. Draw a couple of narrow rectangles and dispose them as in the picture. In order to have a more interesting effect, modify one of the rectangles to make it wider in one side. Divide all rectangles and leave the strips we need. Fill with white and set the opacity to 20% (for Transparency panel press Shift+Ctrl+F10).

Step 10.

img010 There are still two more things to finish our Ace of hearts. We need an “A” letter for this design. Press T to switch to the Type tool and Ctrl T to open the Character panel. Well, not everybody has the same fonts installed on every computer, however since we are working with Illustrator, you’ll probably have the font Adobe Caslon Pro installed on your machine. If not, Times New Roman will do a good job. Select the A letter and press Shift+Ctrl+O to convert the editable text into a normal shape. Then apply the red gradient we used in step 2 and create a shine with a line just as in step 4. Apply an Outer Glow to it (as in step 6) with the parameters show in the picture.

Step 11.

img011 Make two copies of the letter plus small hearts to place them near to two corners. This is the funniest part: duplicate the card 3 times and give a little rotation to it to create the illusion of a deck of cards. Note that your computing system will feel better if you just duplicate the base rectangle of the card instead of the whole group including hearts and letters.

Step 12.

Now let’s make the shadow. Draw an ellipse, fill it with black and apply Gaussian blur (step 6) with 3 pixels radius. Copy that same ellipse and enter the masking mode (step 4) and paste the ellipse, change its fill to a radial gradient with black center and white towards the borders. Thus the shade will fade and look much better. sorttutoLOOVE Well, there you have. Play the game of love!
No one has ever loved anyone
The way everyone wants to be loved
Unknown author


14 Responses to “Iconshock tutorial: Ace of Hearts (Super Vista)”

  1. Pink Leopard SunglassesNo Gravatar
    September 27th

    This is a very interesting website. I wish I had found it earlier. This information will definitely come in handy.

  2. Wow, you make it so easy. Frankly if it was on my own my heart would look a lot crappier, i like the shapes trick, very spiffy!

  3. Leopard Cell Phone FaceplateNo Gravatar
    September 28th

    Great stuff here, I will add this blog to my reader.

  4. SherwoodNo Gravatar
    September 28th

    My hats off to the icon makers of the world….LOL….I think this would be a nice one to try…someday :) Grateful for the tuts! Thanks.

  5. Blogger.IconshockNo Gravatar
    September 28th

    Have you finished following any of the tutorials here Jjay? can you show us your result?

  6. Blogger.IconshockNo Gravatar
    September 28th

    Sherwood, do you find our tutorials easy to follow? Which ones have you tried out? Can you help us improve them somehow?

  7. iconoclastNo Gravatar
    October 18th

    Really nice tutorial… if only I had Illustrator! Thanks.

  8. Editorial.IconshockNo Gravatar
    October 19th

    Hi Iconoclast. I would suggest to download a trial version at:


    It is worth to break the rules of ancient iconoclasm and let the creativity flow, at least, during 30 days. Thanks to you for your opinions and have a very nice week :)

  9. Catalina
    October 23rd

    Love this tutorial. I am making an ace of spades myself.

  10. Great tutorial!

Leave a Reply