How to Create Candy Cane Typography with Photoshop and Illustrator

In this tutorial we will create a superb candy cane type design using Illustrator and Photoshop. Apply this effect to your own text and create cool and unique Christmas cards!
Along with creating this, you will learn how to:

– create advanced vector pattern brushes
– customize blending modes in Photoshop
– create shading and lighting
– retouch photos to fit the same scenario
– create backgrounds for your image
– use adjustment layers

ADVERTISMENT:
The Best Deals For Digital Design Assets - InkyDeals.com. Learn More>>

Difficulty: Intermediate – Advanced
Completion time: 1 hour
Tools: Illustrator CS3, Photoshop CS3

Resources:

paper texture from bashcorpo

Candy Cane Typography Final Image

STEP 1

Open Illustrator and create a new document of “Letter” setting in CMYK color mode at 72 dpi.

STEP 2

Grab the Rectangle Tool (M) and draw a gray rectangle like below.

STEP 3

Draw another rectangle, but make it a lot thinner than the previous. Also change its color to red or another color contrasting the first.

STEP 4

Grab the Selection Tool (V) and rotate the second rectangle. You don’t have to be very precise with it, just follow your artistic sense.

STEP 5

Hold the ALT key and click-drag the red rectangle to the right. Hold SHIFT key while dragging to move it orthogonally.

STEP 6

Hit CTRL+D three times. This will duplicate your last command input – in this case, copying a shape.

STEP 7

Select the gray rectangle lengthen it a bit, copy it (CTRL+C) and paste it to front (CTRL+F). Hit CTRL+SHIFT+] to bring it in front of the other shapes.

STEP 8

Remove its Fill, select all the red rectangles and right-click > Make Clipping Mask. Select all artwork (CTRL+A)  and hit the Merge button. Then paste in front a copy of the merged shape (CTRL+C > CTRL+F). Grab the Eraser Tool (SHIFT+E), hold the ALT key and erase the left side, along with a part of the red stripe.

STEP 9

Move the copied shape to the right until the first red stripe aligns with the second stripe from the shape below it. Reduce Opacity to see it better. Now select the shape above and set its Fill color to black.

STEP 10

Grab the Selection Tool (V), select the black rectangle, hold the ALT key and click-drag the middle distortion point, like below.

STEP 11

In the Pathfinder window (Window > Pathfinder), click the Merge button. Then select all artwork and hit Merge again. Grab the Direct Selection Tool (A), select the black rectangle and hit Delete.

STEP 12

Select all artwork and click-drag it into the Brushes palette (F7) Set it to “Pattern Brush”. Grab the Path Tool (P) and draw a long straight path. Then click the brush you just created. This is a good way to check if your pattern is correct.

STEP 13

Click the Grab the Ellipse Tool (L) and draw a circle. Hold the SHIFT key while click-dragging to make it perfect.

STEP 14

Click the rectangular shape and copy the Height value from the top menu bar. Select the circle and paste this value to Width and Height.

STEP 15

Select both shapes and align them to horizontal axis. CTRL+click near the design to deselect, then grab the Direct Selection Tool (A) and select the left side anchorpoint of the circle and hit Delete. Align

STEP 16

Grab the Selection Tool (V) and align the resulting shape like in the image below. Slect the rectangle and ALT+click-drag to create a copy. Realign the copy with its original, just like in STEP 9.

STEP 17

Select the half-circle, remove its Fill, hold SHIFT and click the rectangle behind it. Now right-click > Make Clipping Mask. In the Pathfinder window (Window > Pathfinder), click the Merge button.

STEP 18

Open the Swatches palette (Window > Swatches) and click-drag the resulting shape into the palette. Name this “candy-end”. In the Brushes palette (F5), select our brush. Make sure you have everything deselected (CTRL+click in a blank area).

STEP 19

Open the dropdown menu and select Options. Click the last box and select “candy-end” from the list. Hit OK. Select the practice path and click the brush again. See how it looks.

STEP 20

Do the same for the other end of the path.

STEP 21

Now that we have a candy-like pattern brush, lets create the text. I used “Giddyup Std” font as reference. Grab the Horizontal Type Tool (T) and type the text below. Use multiple rows.

STEP 22

Select all text and go to Object > Expand, then go to Object > Path > Clean up.

STEP 23

In the Layers palette (F7), click the “Create New Layer” button and lock the layer below it. Select the newly created layer.

STEP 24

Grab the path tool and trace the text, but do not follow it entirely, feel free to connect words, add loops and cool knots. When you’re done tracing, select all these paths. Get creative!

NOTE: If you want to change colors, simply go to the shapes created, change their colors and create a new brush. My color choice was light gray with pink. The black background if for the pics to be more clear, adding this is not compulsory.

STEP 25

Go to Object Expand Appearance, then go to the Pathfinder window and hit “Merge”, then go to  Object > Path > Clean up.

STEP 26

Open Photoshop and go to File > New to create a new document of 1600 x 2300 px in RGB color mode at 72 dpi.

STEP 27

Grab the Gradient Tool (G) and apply the gradient shown below to the background layer.

STEP 28

Click-drag the vector text from Illustrator to Photoshop resize it a bit and hit enter. Right-click near the layer thumb, select “Rasterize Layer”, then click the “fx” button and select Blending Options. Use the settings below.

STEP 29

Create a new layer (CTRL+SHIFT+N), set Blending mode to Multiply, grab the Brush Tool (B), set Hardness to 0% and remove any extra setting from the Brushes palette and paint some shadows to give it a more 3D look. Use a dark purple color.

Tip: CTRL+click the text layer and go to Layer > Layer Mask > Reveal All.

STEP 30

Create a new layer (CTRL+SHIFT+N) and place it below the text layer, grab the Brush Tool (B), set Hardness to 0% and remove any extra setting from the Brushes palette and paint some shadows, as if parts of the text bend away from the wall.

STEP 31

Open the “paper texture”. Select all (CTRL+A), copy it (CTRL+C) and paste it into our document (CTRL+V).Place the layer above the background layer. Resize it to fit the canvas and hit Enter. Set Blending mode to Multiply.

STEP 32

Go to Layer > New Fill Layer > Solid color… and Layer > New Adjustment Layer > Color Balance, Black & White. Use the settings below for each.

STEP 33

Select all artwork (CTRL+A, copy merged (CTRL+SHIFT+C)  and paste it. Go to Filter > Sharpen > Unsharp Mask. Hit OK.

Done!

Download the source file from below and see it for yourself !

  Candy cane type tutorial (unknown, 4,989 hits)

(Visited 50,480 time, 1 visit today)

147 Comments How to Create Candy Cane Typography with Photoshop and Illustrator

  1. Pingback: 40 Useful Adobe Illustrator Text Effect Tutorials | Neweb

  2. Pingback: 40 Useful Adobe Illustrator Text Effect Tutorials | My CMS

  3. Pingback: 52 Remarkable Examples Of Inspiring Typography | Smashing Spy

  4. Pingback: 40 Useful Adobe Illustrator Text Effect Tutorials « Next Step...Innovate

  5. bemnet Jan 10, 2013 at 13:50

    it is a great tutorial thanks man really loved it

    Reply
  6. Maham Feb 17, 2013 at 07:41

    I got to step24 but when I don’t know what the path tracer tool is. I have cs6 and i tried using the pen tool but my corners are terrible. It keeps stopping every time i make a corner. I don’t know what I’m doing wrong but my tracing looks so choppy and not smooth at all. Please help me. :(

    Reply
    1. Doink Feb 20, 2013 at 15:21

      The Path Tool (P) allows you to draw a spine to apply the brush to. It works like this: Start with a click, then click-drag to create a round corner. If you only click, it will create a “corner” point, with no handles to control the curve.

      If you want to convert an anchorpoint to “corner” or “smooth”, use the Direct Selection Tool (A): select the anchorpoint (it will look like a filled small square), then click the “convert to smooth” button – it’s in the top left corner, right below the menu. Can’t miss it. Tell me if this helps.

      Reply
  7. Pingback: ’80 top-class typography tutorials’… | Reanne Farrell

  8. Pingback: Best Typography Tutorials that Created Newly

  9. Pingback: Illustrator Tutorial: Create Your Own Typographic Design | InkyDeals

  10. Pingback: 25 Tutorials for Creating Detailed Graphical Text Effects | dwh-uk.com : dwhukcom - Free Wordpress Themes, Tutorials and Resources

  11. Januponsa Dio Firizqi May 31, 2013 at 21:11

    I can’t understand in step 9. please help me

    Reply
    1. Doink Jun 4, 2013 at 10:57

      The first red stripe must overlap the second red stripe. This helps you make the pattern brush look seamless.

      Reply
      1. Januponsa Dio Firizqi Jun 5, 2013 at 19:42

        i’ve still confused about this command “Move the copied shape to the right until the first red stripe aligns with the second stripe from the shape below it. Reduce Opacity to see it better. Now select the shape above and set its Fill color to black” and can’t continued to next step .
        sorry if you confused about what i mind because i can’t speak english very well hehe

  12. Mittel gegen Nagelpilznagelpilz Jul 4, 2013 at 21:37

    Heya i am for the primary time here. I found this board and I to find It really useful & it helped me out a lot.
    I hope to present one thing again and aid others like
    you aided me.

    Reply
  13. Pingback: 20 Tutoriels de qualité pour Illustrator | Design Spartan : Art digital, digital painting, webdesign, illustration et inspiration…

  14. Pingback: Best Photoshop Tutorials 2011 | Web Design Library

  15. Cubes-IT Aug 5, 2013 at 13:12

    Very Nice Graphic Design

    Reply
  16. Pingback: Sugar, sugar | 1twistedsquare

  17. Pingback: Text Effects Tutorials in Adobe Illustrator | ausi webdesign

  18. Pingback: Typography Tuesday | sarahaileenhills

  19. MAE Dec 16, 2013 at 13:24

    hello,
    I have a small problem in step 12, the brush tip option is not visible. What is the error?
    THK’s

    Reply
    1. MAE Dec 16, 2013 at 13:34

      oh it’s ok!! sorry

      Reply
  20. Ksenia Dec 18, 2013 at 03:58

    Thanks it’s a very detailed, nice subject and beautiful art

    Reply
  21. Pingback: Top 50 Design Resources for Travel Bloggers | Vista Point - Travel iPad App

  22. Pingback: 15 Fresh Typography Tutorials for Photoshop and Illustrator | Garmahis Design MagazineGarmahis Design Magazine

  23. Pingback: 45 Best Photoshop Typography Tutorials - Part 1 - Informatives

  24. Pingback: Typography tutorials | Media Studies

  25. Marcos Jul 10, 2014 at 23:55

    anyone seen this tutorial video lesson? ‘m from Brazil and to accompany this tutorial in English even translated by google’s not, please if anyone has a link to video I would be very grateful

    Reply
  26. Dana Jul 15, 2014 at 21:44

    Hi there! Loving this tutorial, so far the results are awesome! However, I’ve gotten as far as creating my first pattern brush, and then creating the rounded end. However, at Step 19, my “candy end” brush isn’t in the list. I only have None, Original, Foliage & Pompadour. Using Illustrator CS6 – can anyone help me?

    Reply
  27. fifi Oct 25, 2015 at 13:03

    Where can i download the illustrator file?

    Reply
  28. Pingback: 106 Best Photoshop & Illustrator Text Effects Tutorials - TechClient

  29. Pingback: 82 top-quality typography tutorials | MotionBump Reader

  30. Pingback: tutoriais tipografia 82 de alta qualidade – Blog do Alexandre Cruv

Leave A Comment

Your email address will not be published.