How to Create a Tasty 3D Typographic Illustration in Photoshop

Post pobrano z: How to Create a Tasty 3D Typographic Illustration in Photoshop

Final product image
What You’ll Be Creating

This tutorial was originally published in May 2012 as a Tuts+
Premium tutorial. It is now available free to view. Although this
tutorial does not use the latest version of Adobe Photoshop, its
techniques and process are still relevant.

If you’ve got a sweet tooth, then we’ve got a mouth-watering treat for you. In this tutorial we will show you how Photoshop CS6 Extended’s new 3D tools can be utilized to create a typographic illustration. We will also use plenty of free stock images and make full use of Photoshop’s non-destructive features, such as Adjustment Layers and Masks. Let’s get started!

Want an easier way to create tasty text? Browse the incredible selection of Candy Text Effects from GraphicRiver. Or enlist the help of a design professional from Envato Studio for all your typography needs.


Tutorial Assets

Note: The following references have been updated with workable links similar to the originals. But feel free to collect and experiment with your own.


1. How to Create 3D Letters

Step 1

Create a new canvas 14.85cm wide x 10.5cm high with the Resolution at 300dpi. Set the Color Mode to RGB and the Background Contents as White.

Create 3D Letters

Step 2

Grab the Type Tool (T) and add the first character at 160pt in this font, then click the color chip in the Character tab and recolor it to #5d1e0f.

Create 3D Letters

Step 3

Choose 3D > New Extrusion from Selected Layer. If you’ve not got the 3D workspace active, the following prompt will appear.

Create 3D Letters

Step 4

If you ever used CS5’s 3D Repousse Tool, you’ll know how far it was from being user-friendly. The 3D experience in CS6 has been totally overhauled and is much more intuitive as everything is built into your workspace. Grab the Move Tool (V), drag to reposition the 3d plane as shown.

Create 3D Letters

Step 5

You’ll see the Properties panel on the right. Click the Cap icon (1) and copy the settings shown. Now activate the Deform icon (2) and Copy these settings too. Now activate the Mesh icon and turn off both shadow options.

Create 3D Letters

Step 6

Duplicate your first 3D text layer. To modify text while still in 3D Mode, click the Edit Source button in the Properties panel. This will open a „child document”, Edit, Save, then close and your text will automatically update. Now Drag the new 3D layer along the X-Axis in 3D space to reposition it.

Repeat this until each word is complete, then place each character clearly labelled in a separate word folder as shown.

Create 3D Letters

Step 7

Now use the 3D Tools to Rotate/Move each character. Be careful not to use the Z-Axis, as this will move the object towards or away, making it appear larger or smaller.



Step 8

When you’re happy with the lettering arrangement, choose 3D > Render, then and sit back while until the render process is complete.

Create 3D Letters

2. How to Create the Background

Step 1

At this point I decided I would need a little more space at the top for the hand/strawberry. To do this, press Alt-Control-I to access the Canvas Size window, set the anchor point to bottom centre and increase the Height to 11.85cm.

Create the Background

Step 2

Place a new layer called „Pink solid” above the „Background”. Use the Color Picker to set your Foreground Color to #e2b4c1, then hit Alt-Delete to fill the layer with pink.

Create the Background

Step 3

Add a New Layer called „Floor shadow” above the previous one, change the Blend Mode to Multiply and reduce the Opacity to 94%. Choose the Gradient Tool (G) and set it to Linear and Foreground to Transparent in the Options bar. Set your Foreground to a slightly darker pink of #c18088. Now press Shift and Drag as indicated by the length and direction of the arrow.

Create the Background

Step 4

Add another layer called „Top shadow”. Keep the Blend Mode as Default, then set your Foreground Color to #e38da4. Shift-Drag a short Linear Gradient from the top, then change the Gradient to Radial and add two further gradients from both top corners.

Create the Background

Step 5

Change your Foreground Color to #f9f5f7 and add a central Radial Gradient on a new layer called „Inner glow”.

Create the Background

3. How to Create a Ground Shadow

Step 1

Now we’ll add a ground shadow. Grab the Elliptical Marquee Tool (M) and draw a selection below the text as shown. Add a new layer in Multiply Mode above the „Inner glow” and name it „Shadow 1”. Set your Foreground Color to #d0879c and Fill the active selection.

Create a Ground Shadow

Step 2

Go to Filter > Blur > Motion Blur, set the Angle to 0 Degrees and change the Distance to 531px. Next, use the same menu to choose Gaussian Blur and enter a Radius of 15px.

Create a Ground Shadow

Step 3

Reduce the „Shadow 1” layer to 53% Opacity. Now Duplicate and rename it „Shadow 2”. Nudge the layer content up slightly, then hit Control-T to access Transform and reduce in size as well. Finally, drop the Opacity of this layer to 31%.

Create a Ground Shadow

Step 4

To reduce the intensity of the background, add an unclipped Hue/Saturation Adjustment Layer, Copy these settings, then reduce the adjustment to 27% Opacity.

Create a Ground Shadow

Step 5

To break up the gradient banding and the solid pink, target the „Shadow 2” thumbnail and choose Filter > Noise > Add Noise, enter 3px and activate the Uniform button. Target the remaining layers in turn (as indicated) and hit Control-F to reapply the filter. Now place all these layers within a group folder called „BACKGROUND”.

Create a Ground Shadow

4. How to Add Texture to the First Letter

Step 1

Now we’ll move onto texturing the first letter. Use the Lasso Tool (L) to create a rough Selection of a chocolate image. Copy > Paste as a new layer above the type folders, then Duplicate and reposition next to the original. Use a soft-edged Eraser (E) to blend the hard edge of the duplicate, then hit Conrol-E to Merge Down and name the layer „Texture 1”.

Transform/position over the letter, then Control-Click the corresponding text layer to generate a layer-based selection. Ensure your new layer is targeted, then click on the Add layer mask icon located at the foot of the Layers tab.

Add Texture to the Letters

Step 2

This first layer will appear over the darker extruded areas of the letterform, so add a clipped (to affect this layer only) Levels Adjustment and set the whitepoint Output slider to 94.

Add Texture to the Letters

Step 3

Now we’ll add a toffee and chocolate topping. Use the Quick Selection Tool (W) to extract this a cookie. Place as a new top layer and Transform/Position as shown. Add a Layer Mask, then use an assortment of Soft and Hard brushes to blend into the top and front face of the letterform. Name this layer „Texture 2”.

Add Texture to the Letters

Step 4

Clip a Color Balance Adjustment to „Texture 2” and boost the Reds to +23.

Add Texture to the Letters

Step 5

Extract the same entire choc ice (as used on Step 19), then Rotate, Scale and Position as a new layer. Name this layer „Texture 3”, add a Mask, then hit Control-I to Invert the mask to black. Now use a selection of white brushes to reinstate the area as shown.

Add Texture to the Letters

Step 6

Clip a Levels Adjustment with these settings to the „Texture 3” layer to Darken the midtones.

Add Texture to the Letters

Step 7

Add the same entire choc ice again as a new top layer and label it „Texture 4”. Position over the bottom of the letterform, then repeat the masking technique as used the previous layer.

Add Texture to the Letters

Step 8

Clip another Levels Adjustment and increase the Midtones on „Texture 4” as well.

Add Texture to the Letters

Step 9

Place the same choc ice as a final layer and label it „Texture 5”, then mask as shown.

Add Texture to the Letters

Step 10

Place all these floating layers within a Group folder called „LETTER S”, then add a mask to the folder. Now Paint within a Selection from the letter „W” to hide the overlap.

Add Texture to the Letters

5. How to Add Texture to the Letter W

Step 1

Extract the chocolate bar from its background, with the select active, hit Control-J to Copy as a new layer and Disable the Visibility of the original layer. Target the new layer, activate the Move Tool (V), then hold Control and drag out the top anchor points to remove the perspective.

Add this as a top layer called „Texture 1” and Resize/Position over the second letterform. Reduce the Opacity to 32%, then use a selection from its corresponding type layer to create a mask.

Add Texture to the Letter W

Step 2

Duplicate this layer, rename it „Texture 2” and change the Opacity to 95%. Drag the mask into the trash icon and click Delete in the following window. Temporarily Switch Off the Visibility of both texture layers, then use the Magic Wand (W) to select the front face from the corresponding type layer (shown by the marching ants in the screenshot). Now press Shift-F6 and Feather by 3px, then Select > Modify > Expand By 5px. Finally, click the Add Layer Mask icon.

Add Texture to the Letter W

Step 3

Clip a Color Balance Adjustment to „Texture 2” and increase the Reds and Yellows.

Add Texture to the Letter W

Step 4

Now clip a Levels Adjustment to the same layer to boost the Contrast.

Add Texture to the Letter W

Step 5

Now Clip a Hue/Saturation Adjustment to the same layer and adjust the Master, then the Reds and Yellows as shown.

Add Texture to the Letter W

Step 6

As a final modification, clip a Selective Color Adjustment to the same layer and increase the Blacks to +72. Add all these floating layers into a group folder called „LETTER W”

Add Texture to the Letter W

6. How to Add Texture to the Letter E

Step 1

Repeat the process as before to add and Mask the reference image. This texture only need to cover the extruded areas, so don’t worry if it falls short on the left. Name this layer „Texture 1”

Add Texture to the Letter W

Step 2

Clip a Levels Adjustment to the „Texture 1” layer and set the Output whitepoint value to 59 to darken it.

Add Texture to the Letter E

Step 3

Add the same image again and name it „Texture 2”. Now apply the same masking technique as before.

Add Texture to the Letter E

Step 4

Clip a Levels Adjustment to „Texture 2” and copy these settings. Place these layers within a group folder called „LETTER E1”.

Add Texture to the Letter E

Step 5

Now clip a Hue/Saturation Adjustment to the same layer and reduce the Reds Saturation to -15.

Add Texture to the Letter E

Step 6

Extract and Place a cookie image over the next letterform. Mask, then lower the Opacity to 45% and name it „Texture 1”.

Add Texture to the Letter E

Step 7

Modify the Mask with a black-filled Selection from the face of the corresponding text layer.

Add Texture to the Letter E

Step 8

Clip a Levels Adjustment to the „Texture 1” layer and adjust the Midpoint slider to 0.84.



Step 9

Add the same texture as a New Layer, label it „Texture 2” and Mask as shown, including the top bite mark.

Add Texture to the Letter E

Step 10

Clip a Levels Adjustment to the „Texture 2” layer and Copy these settings.

Add Texture to the Letter E

Step 11

Now clip a Color Balance Adjustment to the same layer.

Add Texture to the Letter E

Step 12

Extract the right-hand broken portion from an eaten portion of a candy bar. Position over the bite, then access Warp (via the Transform menu) to bend it into shape. Add a mask and gently blend the edges into the underlying texture. Name this layer „Texture 3”.

Add Texture to the Letter E

Step 13

Clip a Hue/Saturation Adjustment to this layer and modify the Reds and Yellows as shown. Now place all your floating layers into a Group folder called „LETTER E2”

Add Texture to the Letter E

Step 14

Finally, add a Mask the original type layer and hide the area interfering with the bite mark.

Add Texture to the Letter E

7. Add Texture to the Letter T

Step 1

Extract and add a cake image as a New Layer and name it „Texture 1”. Use the same masking technique so only the extruded areas are visible, then reduce the Opacity to 90%.

Add Texture to the Letter T

Step 2

Clip a Levels Adjustment to this layer and Copy these settings.

Add Texture to the Letter T

Step 3

Add the same cake texture as another layer and label it „Texture 2”. Now mask, so just the front face is visible.

Add Texture to the Letter T

Step 4

Clip a Color Balance Adjustment to the „Texture 2” layer and apply the following settings.

Add Texture to the Letter T

Step 5

Now Clip a Levels Adjustment to the same layer.

Add Texture to the Letter T

Step 6

Add the same cookie texture as used on the very first letterform and name it „Texture 3”. Position as shown, then blend with a mask.

Add Texture to the Letter T

Step 7

Clip a Color Balance adjustment to this layer, then increase the Red to +17 and the Yellow to +7. Now clip a Levels Adjustment to the same layer and change the midpoint to 0.67 and the whitepoint to 215. You can now place these layers into a group folder called „LETTER T”.

Add Texture to the Letter T

8. How to Add Texture to the Rest of the Letters

Step 1

The letter „O” will be more straightforward. Extract and place a glazed chocolate image as a New Layer. Resize to cover the letterform and label it „Texture 1”. Use a Selection from the corresponding text layer to create a Mask, then deselect and carefully paint back areas as required around the outer edge and centre hole.

Add Texture to the Rest of the Letters

Step 2

Clip a Levels Adjustment to this layer and Copy these settings to darken the texture. Place these two layers into a Group folder called „LETTER O1”.

Add Texture to the Rest of the Letters

Step 3

Lasso a rough Selection from the darker edge of a chocolate image. Copy > Paste several times and position over the extruded areas of the next letterform. When you’re happy Merge them and name the layer „Texture 1”. Now use the original type layer to create a Mask.

Add Texture to the Rest of the Letters

Step 4

Clip a Levels Adjustment to the „Texture 1” layer and set the Midpoint to 0.86 and the Whitepoint to 236. Extract the same cake image from it’s background, then duplicate, Offset and Merge as you did with the very first letterform texture. Add as a New Layer, then position and mask as shown. Name this layer „Texture 2”. Place all these layers into a group folder called „LETTER N”.

Add Texture to the Rest of the Letters

Step 5

Repeat the process to add merged segments from this image as a New Layer over the next letterform. Mask as shown, then name this layer „Texture 1”.

Add Texture to the Rest of the Letters

Step 6

Clip a Levels Adjustment to this layer and set the Whitepoint Output slider to 148. Next, clip a Color Balance Adjustment to the same layer and copy these settings.

Add Texture to the Rest of the Letters

Step 7

Roughly Extract the same cake from its background and place as a new layer. Duplicate a feathered central portion and enlarge/stretch as shown. Merge both layers, then Mask so only the front face is visible. Name this layer „Texture 2”.

Add Texture to the Rest of the Letters

Step 8

Clip a Color Balance Adjustment to this layer and apply the following settings. Add these layer into their own Group folder called „LETTER Y”.

Add Texture to the Rest of the Letters

Step 9

The next letterform will be fairly easy to create. Open a donut reference and Extract it from its background. Place as a New Layer, then Transform to fit. Name this layer „Texture 1”, then disable the visibility of the original type layer.

Now Clip two adjustments to this layer: Levels and Color Balance with the following settings. Place these layers within a Group folder called „LETTER O2”.

Add Texture to the Rest of the Letters

Step 10

Extract and add a pie image and position over the final letterform. Transform and Mask to reveal the extruded type area, then name the layer „Texture 1”.

Add Texture to the Rest of the Letters

Step 11

Clip a Levels Adjustment to this layer and Copy these settings to darken it.

Add Texture to the Rest of the Letters

Step 12

Place the same cake texture as another layer and label it „Texture 2”. Resize and Position, then reduce the Opacity to 48%. Now Mask so just the front face is visible.

Add Texture to the Rest of the Letters

Step 13

Clip a Color Balance Adjustment to this layer and Copy the following settings.

Add Texture to the Rest of the Letters

Step 14

Extract and place a bitten chocolate bar as a New Layer and label it „Texture 3”. Flip Horizontal, Rotate, Resize and Position as shown, then blend with a Mask as shown.

Add Texture to the Rest of the Letters

Step 15

Clip a Levels Adjustment to this layer and Copy these settings to darken it.

Add Texture to the Rest of the Letters

Step 16

Clip a Color Balance Adjustment to the same layer, then mask the original type layer to reveal the bite mark. Finally, add all these layers into a Group folder called „LETTER U”.

Add Texture to the Rest of the Letters

9. How to Add the Strawberry and Hand

Step 1

Next, we’ll move onto creating the hand/strawberry layered file. Open a hand image and Crop (C) the excess background.

Add the Strawberry and Hand

Step 2

For this image we’ll need an accurate selection, so grab the Quick Selection Tool (W) and select the white background.

Add the Strawberry and Hand

Step 3

Hit Shift-Control-I to Inverse your selection, then click the Refine Edge button in the Options bar. In the next window choose On Layers (L) from the View Mode drop-down menu, Copy these settings and click OK.

Add the Strawberry and Hand

Step 4

You’ll now see a masked duplicate layer appear and the visibility of the original layer disabled. Drag the mask into the trash icon and click Apply in the next window, then delete the original layer.

The existing strawberry less than photogenic, luckily this is easy to fix. Open a strawberyy image and use the same Selection/Refine Edge workflow to extract it. Delete/Apply the mask, then add as a New Layer and Resize, Position over the hand.

Add the Strawberry and Hand

Step 5

Now Add a Mask and carefully blend the new strawberry into hand.

Add the Strawberry and Hand

Step 6

Clip a Hue/Saturation Adjustment to the „Hand” layer and slightly increase the Saturation levels as shown.

Add the Strawberry and Hand

Step 7

Now Clip a Levels Adjustment to the „Strawberry” layer to increase the Contrast.

Add the Strawberry and Hand

Step 8

Set the Clone Stamp Tool (S) to Current & Below, then fix any minor flaws in the hand on a New Layer above the Hue/Saturation Adjustment Layer.

Add the Strawberry and Hand

Step 9

Add another layer in Overlay Mode („Nails”) above the „Hand retouch” layer. Sample a color from the nail varnish (I used #814564) and Paint over the nails to accentuate them. To remove any overpainting, create a layer-based Selection from the „Hand”, Inverse and hit Delete on the new layer.

Add the Strawberry and Hand

Step 10

Clone over the white edges of the nails as indicated on a New Layer („Nails retouch”) and use the same method as the previous step to delete any excess. Now place all these layers into a Group folder called „HAND”.

Add the Strawberry and Hand

Step 11

Drag the folder thumbnail into your project file and Resize/Position as shown. If you notice any edge halos on the „Hand” layer, target it and go to Layer > Matting > Defringe and enter a pixel or two.

At this stage you may want to clip some more adjustments to the „Hand” and „Strawberry” layers so they sit more comfortably in the composition.

Add the Strawberry and Hand

10. How to Finish Your Text

Step 1

Use the Selection/Refine Edge extraction workflow on the melted chocolate images to add some puddles of chocolate. Use the techniques you’ve learnt to clip relevant Adjustment Layers and also recolor some to resemble drops of jelly. Place these layers within a new Group folder called „ELEMENTS”.

Finish Your Text

Step 2

Extract and add some white chocolate, then Warp over the donut and Mask accordingly. Clip a Levels Adjustment to boost the contrast and a Hue/Saturation Adjustment to recolor it pink. Next, select a a small area from a cookie image and place as a small cookie crumb within the „ELEMENTS” folder.

Add a New Layer in Multiply Mode at the bottom of the stack within the same folder. Now Fill selections from all your drips and crumb with dark brown. Transform as shown, then apply the same blurring and noise as you did at the start of the tutorial for the main shadow. Finally, reduce the Opacity to 90% and Mask with some black to transparent gradients.

Finish Your Text

Step 3

Place a New Layer above all the group folders and name it „Retouch”. Now grab the Clone Stamp Tool (S) and use a small brush at around 50% Hardness to clone around the edge of the lettering to make it less uniform.

Finish Your Text

Step 4

To wrap up, we’ll add some overall sharpening. Place an New Layer at the top, then go to Image > Apply Image. Set the Blending to Normal in the following window and hit OK (This command creates a composite from all visible layers). Name this layer „High pass”. Choose Filter > Other > High Pass and enter 3px. Change the Blend Mode to Overlay to render the grey invisible, then place both floating layers into a Group folder called „FINAL RETOUCH”.

Finish Your Text

Conclusion

I hope you’ve enjoyed this tutorial and discovered some new techniques along the way. I also hope it inspires you to create your own 3D typographic illustrations!

Sweet Candy Text Effect Adobe Photoshop Tutorial

Yummy Candy Text Effects from GraphicRiver

Want to create an awesome sweet-inspired text effect like the one above? Choose from the incredible selection of Candy Text Effects and Layer Styles from GraphicRiver to satisfy your sweet tooth. And check out one of our favorites below!

Delicious Sweet Layer Styles V2

Sink your teeth into this incredible selection of sweet layer styles. This package features 10 delicious layer styles ranging from sweet ginger cookies to a yummy birthday cake. Easy to use, simply add this layer style to the text or shape you want to apply the effect.

Delicious Sweet Layer Styles V2