Introduction

In this tutorial I will show you how to create a lovely floral style 3D text effect using only Photoshop and Illustrator. The idea is to add the elements we like while keeping the design subtle, pleasing to the eye, and having some fun along the way.

We’ll be using Illustrator for the 3D effect because it’s more user friendly than other 3D programs like 3ds Max, and it can do an equally good job for what we require.

Resources

If you’re following along, you’ll want to grab these resources.

• Levenim MT Bold
• Flower Pack
• Nebula 1
• Nebula 2
• Nebula 3
• Elephant
• Flowersn’swirls
• Parrot
• Butterfly Brushes III

Thanks to the artists who provided these. Please remember to follow their rules and credit them where it is appropriate. Let’s get started.

Step 1

To start, create a new document sized at 1200 x 770, and fill the canvas with a radial gradient that goes from #a1dbff to #f0f9ff, transitioning from dark in the center to light at the edges.

Step 2

Download this font, Levenim MT Bold. Load the font, then open up Illustrator, and type out ‘MYINKBLOG’.

Step 3

In Illustrator, select the text and choose effect 3D, extrude and bevel. Proceed by choosing the settings shown below. At this stage it is a good idea to play with the different 3D settings and see what results you like, but for now the following are a good selection.

Step 4

Copy and paste the text into your Photoshop document as a smart object, this allows you to resize the text as much as you like without losing quality.

Step 5

The next step is my favorite part, we need to cut out the faces of the letters with the pen tool. Make sure you save your path, and cut out the letters on the same work path too. Now select the faces of the letters, inverse the selection, and  fill them with a gradient from #ffd24e to #ecb207, leave the gradient defaults as they are. Finally, add a stroke of yellow set to 2 pixels and an opacity of 38%. These will blend in subtly with the addition of other elements.

Step 6

Select the text , Ctrl + Shift + D should reselect it, fill with any color and reduce the fill to zero. Then, add an outer glow set to white  with the settings shown below. This will add a nice glow to the edges of the text, subtly increasing the overall energy.

Step 7

Download this flower pack, I used 7 on the right, and 8 on the left. Arrange them to face upwards on one side and down on the other, so they balance each other. Change the blend mode to multiply to eliminate the white areas.

Step 8

Next download nebula 1, 2 and 3. Place them into your document and change the blend mode to either hard light or screen and lower the opacity to around 30%. As you can see it’s a delicate effect. If it needs further reducing, add a layer mask and brush over areas so the whole image blends in better.

Step 9

Download this image of an elephant, and extract it. Place the extracted elephant in the image, underneath the nebula, and the text layers. Reduce the size to approximately twice the height of the letters.

Step 10

Now, for the flowery part download these amazing brushes. Using the first brush in the pack make a shape on the top left hand side. Here we can see the composition really beginning to take effect, keeping the design simple and refined.

Step 11

Now, we’ll add a gradient overlay. Double click the layer to get to the layer styles, and use a light pastel green gradient. We use a layer style because it’s a lot easier to change at a later stage.

Step 12

Continue adding floral elements until you are pleased with the look, just remember less really is more, and subtle is more effective than having too many patterns. The gradients and the positioning of the flowers give the peaceful sense of movement.

Step 13

Download this image of a parrot. Then extract it using your favorite extraction method and paste it into the composition. Next, add some adjustment layers with the follow settings.

Step 14

Add a butterfly or two with these brushes. You can continue to add additional butterflies, or other creatures, just be sure to keep it simple.

Step 15

Add another layer, select the text, and add an outer glow with the following settings, remember to reduce the fill to “0″.

In Conclusion

This is a good tutorial to practice combining elements to create a well-rounded composition. You should now have a firm understanding of 3D text, and how to blend objects together in Photoshop.

I came up with the idea for creating a skyline made of text after some creative thinking and seeing this amazing stock photo. After a brief look around the web, I still can’t find a manipulation quite like it.

In this tutorial, we will be creating the text ‘MIB’, in the night skyline of a Seattle cityscape. To create this effect we will be cutting buildings and repositioning them seamlessly. This means we will have to line up the buildings flawlessly, blend them together and then alter the lighting, to give the illusion that this is how they were constructed. To accomplish this task, we will use a combination of layer masks and adjustment layers, with some cutting and selection methods.

Step 1

To get started, fire up Photoshop and create a new document sized at 3872×2592. It’s advantageous to use such a high resolution image because it allows us to create detail and accuracy. Place this Seattle cityscape into the document, it should fit flushly.

Step 2

Type out the letters ‘MIB’ in a bold font. I used ‘Autumn’, I think it’s a standard font. If you don’t have it, any similar blocky font should work.

Step 3

Now we’ll set the tracking so that the letters are spread over a larger horizontal area. Go to your character palette and set the tracking to +75. The size of the font should be around 260 points.

Step 4

Identify the first road from on the left side of the image and go back to the first row of tall buildings, now place the beginning of the letter ‘M’ to the left of the road. Use the image provided for reference, 1 shows the original text with rounded edges on the inside edges of the M, 2 shows the M with these edges removed , and 3 shows the selection outline of the cut out M, over the original M.

Rasterize the type so its editable by right clicking the type layer and choose rasterize from the list of options that popup. Because we want straight lines, use the polygon lasso tool to cut straight edges where your font is rounded.

Step 5

Set up guides across all the major lines where the type will become the buildings, this will really come in handy. Do this by dragging from the side or top where the rulers are, include any lines you think may help.

Step 6

Copy the background (ctr + j) so we can easily change things. It’s always a wise idea to keep an original copy of a layer before you start any sort of destructive process. In the areas referenced in the image below use the clone stamp tool to copy buildings from the front to make the horizontal line at the bottom of the buildings the same. Making sure you are on this copied layer press ‘S’ on your keyboard to get to the clone stamp tool. Now holding down ‘Alt’ to sample an area, copy/clone samples of surrounding buildings to cover over the circled areas in the images below. Then find the area you wish to cover and replace it with the sampled building, remember to resample when you need to.

Step 7

Beginning with the left hand side of the ‘M’ start cutting out the buildings and repositioning like this image. Lower the opacity of the letters to get a better view of how the buildings look. Use the polygon lasso tool for the straight lined shapes, make the selection as accurately as you can, photoshop will help you by telling you when the line is straight. With the selection made using the Polygonal Lasso Tool or your favorite selection method copy the building as many times as you need to cover the left upright of the ‘M’, press ‘Ctrl + J’ to copy, or simply drag the selection with the move tool selected.

Step 8

Build up the first upright of the letter ‘M’ until it’s filled like this. Make sure the windows and lines on the building are all in sync with each other as much as possible.

Step 9

‘Ctrl + click’ the letters layer so it is selected then go to each of the cut out layers and add a add layer mask on the cut out buildings to blend their edges in; this is working non destructively so if anything needs changing later on it can be done easily. The layer mask will hide the area that overlaps the text, they are not erased and can be easily brought back using a white brush or fill.

Step 10

Before we continue cutting out the top of the building directly behind the ‘M’, add a layer mask and blend it in with a soft black brush. If you want to see the overall effect hit ‘ctrl + H’ to hide the guide-lines, click the eye icon on the letters layer to hide the letters, and hit ‘ctrl + 0′ to zoom out. Select all these layers that make up the left side of the M and hit ‘crtl + G’ to group them and rename them left side of M.

Step 11

Where the lower v shape of the ‘M’ covers buildings cut out the buildings as a whole rectangle, using the polygon lasso tool. Reposition them over the left side of the v that makes up the ‘M’, use the move tool and the ‘alt’ key to copy the building. Add layer masks to these buildings, found at the bottom of the layers palette.

Step 12

Then ’ctrl + click’ the letters layer so the letters are selected. Now we’ll inverse the selection by hitting ‘ctrl + I’, which selects everything outside the letters. Making sure your on the layer mask we created in the previous step, brush over the areas that stick out over the letters area with a black brush, until they blend in.

Step 13

Repeat this process for the right side of the v that makes up the ‘M’, cut out the building below it, reposition it, add a layer mask, ‘ctrl + click’ the letters, inverse the selection and brush with a soft black brush over the areas outside the letters.

Step 14

Now for some more photo manipulation. The effect we are creating is going to blend the buildings in seamlessly. We’ll now create more of a contrast between the buildings that make up the ‘M. So copy the background layer that we used the Clone Stamp Tool on before, so we can correct any mistakes easily. ‘Ctrl + click’ the letters and using the Clone Stamp Tool copy the buildings either side of the v in the ‘M’. Use the image below as a reference. Because the image is high resolution and viewed from further back, the buildings do blend in seamlessly.

Step 15

Now we’ll create the right hand side of the ‘M’, using the same techniques as before. Cut out the building directly behind the right upright of the M out. This is the building we’ll be using to create the last part of the letter.

Step 16

Cut out the shape that we need to connect the right side of the ‘M’, copy this to a new layer and position it in place. Turn the visibility of the letters on and repeat this process for the entirety of the right side of the ‘M’.

Step 17

Select all the layers and merge them. Then add a Brightness/Contrast adjustment layer to them to blend the whole building together.

Step 18

Using the eye drop tool, sample one of the windows with no light, then create a new layer on top of the previous one. Spray in randomly where there are groups of light so the building looks more natural, do this for the whole letter ‘M’. This is a subtle effect and only needs to be done sparingly, from a distance the details blend together, which is how pixels work.

Step 19

Now we’ll move onto the ‘I’. Hide the ‘M’ for now and find the first tall building on the right (the one we cut the top off before) and cut out the main body of this building from the background copy, use the Polygonal Lasso Tool. Then place it at the bottom of the ‘I’ and rotate it counter clockwise so it lines up with the shape of the letter.

Step 20

Using the move tool hold ‘alt + shift’ to copy this layer vertically. Then free transform (ctrl + t) it and flip it vertically.

Step 21

Cut the top of the building three from the right with the triangular top a quarter of the way down and position it on top of the ‘I’ building.

Step 22

Add a layer mask to the top layer and blend in the edges with a soft black brush, using a pen tablet really helps here.

Step 23

Now we’ll create the final letter ‘B’. From the original image of the city, cut out the triangular shaped building below the ‘B’.

Step 24

Using the move tool and holding down ‘alt’ copy the cut out so it covers the right side of the ‘B’ like the following image. Now add a layer mask to each cut out, select the text and add a layer mask to the letters. The buildings should have a slight 3d effect because of the angle of the photograph.

Step 25

Now we’ll make up the rest of the ‘B’ using the same methods as the other letters. We’ll finish the rest of the ‘B’ by filling in the gaps with cut outs from the building, adding in the back of the ‘B’ and middle areas.

Step 26

With the ‘B’ finished we’ll add a Gradient Fill Adjustment Layer on top of all the layers with the first stop set to #a0050a and the last transparent at – 90 degrees. Then add another a Gradient Fill Adjustment layer on top of all the layers with the first stop set to #fbda3e and last set to transparent, at 90 degrees.

Step 27

For each group that makes up the letters, we’ll change the brightness and contrast starting with the ‘B’. Copy the group and merge it, then add a Brightness/Contrast adjustment layer and clip it to the merged group, set the brightness to 24, and contrast to 15. For the ‘I’ set the brightness to 20 and contrast to 35. And for the ‘M’ set the brightness to 18 and contrast to 36. Lastly, add an adjustment layer on top of all layers set to brightness 27 and contrast 8.

Final Thoughts

Finding a good stock photo to start a project off with really pays off. I’m sure we can all agree this one works well. This is really good practice for manipulating images into a space you want them in, and blending them together.

Introduction

3D text effects are a growing and awesome design trend. They can add angles, lighting and interest that many 2D text effects can’t bring. Here is an awesome Showcase of 3D Typography that was put together a little while back by Angie Bowen. I’ve also been seen and been inspired by tutorials like 3D Text on Fire and this Fresh Text Effect.

After some experimenting with what can be accomplished using Illustrator’s 3D capabilities and Photoshop’s texturing I came up with the design for this tutorial. In the steps that follow you will learn some pretty helpful techniques and tricks all while designing your own slick 3D ice text effect. Let’s get started.

The Preview & PSD

• Preview the final result
• Grab the PSD file to follow along

Step 1

Fire up Illustrator and type in your word(s) at the size you are designing for. I used Diavlo bold for my font of choice. Be sure to change the font color to a mid-tone gray. It’s not important to choose a specific color yet, but we do need something that will have a strong enough contrast to stand out when we transform the text into 3D.

Step 2

Now it’s time to utilize Illustrator’s simple, but awesome 3D capabilities. With your text selected choose Effect->3D->Extrude & Bevel. Make sure to tick on the preview option so that you can view your results as you go along (be warned this 3D effect with preview turned on is a huge memory hog — slower computers beware). Then manipulate the text into the angle that you desire. Bear in mind, perspective is the trickiest and most important part of a 3D text effect, so take your time here. The cube in the top left is a great visual tool. Simply click and drag on different parts to manipulate the x, y and z axis. Or if you prefer the cliff notes, just alter the settings to what is referenced below.

Step 3

Now it’s time to move our project over to Photoshop. Open up a new document in Photoshop, then click back to Illustrator and put the two documents side by side. Grab the move tool in Illustrator and drag the 3D text from Illustrator into the Photoshop document. Then in Photoshop select the background layer and fill it with black.

Step 4

Filters offer a huge range of possibilities, but they can lead to some pretty horrific results when they are overdone or used inproperly. In our case, we are going to add a couple of minor tweaks, to start the illusion of highlights and shadows on raised ice.

The Filter Gallery is a very handy interface that you can use to add and combine various filters. To get started click Filter->Filter Gallery. First, add ‘Accented Edges’. Play around with the settings until you have some simple, but not blown out highlights on the edges of your 3D text. Below are the settings that I used. Now, click to add a second filter (using the small ‘Add Filter’ button in the bottom right), choose ‘Plastic Wrap’ and select settings similar to what is referenced below. Then click ok.

Step 5

Our filters gave us some nice highlights on the edges of the 3D text, but I think we could do a little better yet. Let’s take advantage of some of the things layer styles have to offer. Double click on the 3D text layer to bring up the layer styles box. Add a bevel and emboss, and a drop shadow to our text. The drop shadow will be rather unnoticeable against our black background, but it will look good when we set up the ice background. Use settings that are similar to those shown below.

Step 6

That’s starting to look cool, but we could definitely use some more contrast. To add some, click Image->Adjustments->Shadows/Highlights. There are a ton of sliders to play around with in here, and quite honestly moving them around and experimenting is the best way to learn what they do. It’s also good to note, that since we brought over this text from Illustrator it should be a smart object. Which means that these filters are non-destructive and can be easily tweaked at a later point.

Step 7

In this step we are going to start working on the background ice. We need an interesting ice texture with some bright colors (even though we’ll be altering them later). I found this really cool ice texture on Flickr. Download that one or something similar and place it on a layer below the text layer and above the black background. Add a layer mask to your new layer by clicking Layer->Vector Mask->Reveal All. We want to gradually fade our design out to the black background, so add a radial gradient to that layer mask that goes from black on the outside to white on the inside. Touch up some of the mask with a soft brush with low opacity if necessary. Lastly, drop the opacity of this layer to about 90%.

Step 8

The background is starting to look interesting, but the texture could definitely be simplified and smoothed out a bit. I personally like to make those kinds of changes on a smart object so that I can adjust them later if I change my mind. So, right click on the layer and choose ‘Covert to Smart Object’. Then click Filter->Blur->Surface Blur. Use this blur to soften the texture and contrast some. Then add a bit of simple noise back in by clicking Filter->Noise->Add Noise. The settings I used are shown below as a reference.

Step 9

Let’s add some of this same texture to the text to help with realism and consistency. Duplicate the ice background layer and place it at the top of the layers palette. Add a layer mask to this layer just like you did before. Fill the layer mask with all black. Then select the shape of the ice text by ‘cmd + click’ on the thumbnail in the layers palette as circled below. Fill the shape that you just selected on the layer mask with white. This will reveal the texture only on the ice text. Now, change the layer mode to Overlay and the opacity to about 85%. Lastly, you can unlink the mask and the layer to move the texture independent of the mask. This give you great flexibility to change the texture on the text to something you find visually striking.

Step 10

In the next two steps I want to work on the coloring. Add a new layer to the top of your layers palette. Then grab the gradient tool and make a colorful gradient that begins and ends with the same color and goes to two other colors toward the middle. This gives our illustration a nice smooth base color to work from. Drag out a linear gradient horizontally across your canvas. Change the blend mode for this layer to overlay.

Step 11

Create a Hue/Saturation adjustment layer by clicking on the icon at the bottom of the layers palette (referenced below). Adjust the sliders until you have a nice cool colored gradient.

Step 12

Since our subject is ice and we have some cool lighting effects going on we definitely need to add a nice reflection. This can be a tad tricky with 3D objects, as the extra dimension can play tricks on your eyes. Because the refection on the ice is really only 2D I found the best and simplest way to add that is to create a new flat text layer that mimics the size and perspective of the 3D text. Make a new text layer and retype ‘ice’ or whatever the word you choose to use was in the same font. Then click ‘cmd + t’ to bring up the free transform tool. Click and drag downward from the top middle anchor to reflect the text. Next rotate it by hovering over a corner point to get the rotate cursor. Then adjust the corners while holding down ‘cmd’ to skew the text. Get it to the point that it fits pretty well over the 3D text, like the image below, bear in mind that it doesn’t need to be perfect.

Step 13

Now drag the refection into place and move the reflection layer below the 3D text layer. Change the blend mode to overlay and the opacity to 45%. Rasterize the layer by right clicking and choosing ‘Rasterize Layer. Then click Filter->Blur->Gaussian Blur and blur the shadow a bit. Lastly, add a layer mask and fade it out toward the bottom of the reflection.

Step 14

We’re almost done here, but a lot of times it’s the finishing touches that can take a design from good to great. I went on the look out for some cool brushes and found this awesome set. Go ahead and download them or something similar. Add a new layer and use the same masking technique that you used in step 9, so that the brush you use will only show on the 3D text. Then grab a star brush, use white for your color and dab on some interesting texture. Change your blend mode to overlay and drop your opacity to about half.

Step 15

Lastly add a couple more layers and utilize a couple of the star brushes to make some sparkle highlights. Be careful not to overdo this step. It’s also a good idea to put each one on a different layer, so that you can experiment with where the sparkle looks best and vary the brightness by lowering the opacity a bit.

Final Thoughts

There are so many creative directions you can take these techniques. The main thing I wanted to get across was the simplicity of 3D text in Illustrator and the power of combining Illustrator and Photoshop.

What do you think of this effect? If you come up with a cool variation, please showcase it at MyInkBlog Flickr group.

Pressed lettering is showing up more and more these days in web design. Like any other trend, you have to be careful not to over use it. Already you can recognize those people that are doing it well and those that are not. Recently, I read a post at Smashing Magazine that highlighted pressed lettering as one of the Web Design Trends for 2009.

All this got me to thinking about how to create such an effect. Turns out, it is rather simple. This tutorial will layout the steps to design pressed lettering so you can use this effect on your next project. So here we go!

A Quick Preview

I’m not a big fan of having to scroll to the bottom of a post to find a final result of a tutorial, so we’ll start with this quick preview.

Step 1

Bring up a new document in Photoshop at a size of your choice. Fill the background layer with black. To do so, change the foreground color to black and hit ‘alt + backspace’ alternatively you could set the background color to black and hit ‘cmd + backspace’.

Step 2

We need to create a background of interest for our pressed letters to be punched out of. I decided it would look rather sleek if we used an abstract space background. So we’ll spend the next few steps creating this. Start by making a new layer above the background layer and call it ‘Stars’. To create a new layer click the shortcut icon in the layers palette or click Layer->New->Layer. Again fill this layer with black. Next, click Filter->Noise->Add Noise and drag the slider all the way to the max of 400%. Make sure uniform and monochromatic are checked, then click ok.

Step 3

Now blur the stars layer. Click Filter->Blur->Gaussian Blur and change the radius to 0.6px.

Step 4

In this step we’ll adjust the levels to bring the stars into focus. Press ‘cmd + l’ on the keyboard and drag the black slider to the right, close to the white one, like what is referenced below. Play around with this until you have an amount of stars you are happy with.

Step 5

The reason we started with a black background and then the stars layer on top was so that we could keep things flexible. Now if the stars you made are a little too bright for your liking, just drop the opacity on the stars layer a touch. I dropped mine to 70%.

Step 6

Add a new layer and call this one ‘Clouds’. Of course naming your layers is optional, but it helps keep things organized, and provides an easy way for me to reference back to them. Set your foreground color to black and your background color to white. Then click Filter->Render->Clouds.

Step 7

Grab the smudge tool, which is tucked away under the blur tool by default (shortcut ‘r’ on the keyboard). Change your brush size to something around 1/4 of the size of your canvas and change the strength to about 75%. Then click and drag upwards a few times over to smudge the clouds until you have something that resembles the image below.

Step 8

Next up, we are going to use a couple of gradient layers to add some interesting colors to our space background. Make a new layer at the top of the layers palette and call this one ‘Gradient 1′. Choose the gradient tool and make a simple purple to red to purple gradient like the one that is referenced below. Click and drag out the gradient from the top left to the lower right. Then change the blend mode of the ‘Gradient 1′ layer to Multiply.

Step 9

Add another layer and call this one ‘Gradient 2′. This time make an even more colorful gradient. I used the one that is referenced below that goes from purple to yellow to purple to red. Any gradient similar to this will do the trick. It’s a good idea to experiment with different color and layer combinations, as well as different blend modes. Just keep in mind it’s a space scene, so bright colors tend to work best. I used soft light for my blend mode and this is what I have so far.

Step 10

Add another layer at the top and call this one ‘Lens Flare’. I know, I know, the lens flare filter is cheesy and played out, but I can’t help myself :) Plus, it’s a quick and effective technique for a simple space background. Alright enough rationalizing it. Fill that layer with black. Then click Filter->Render->Lens Flare. Make sure the type is set to 50-300mm Zoom. Set the brightness to around 95%. Then drag the Flare Center to the top left area. Click ok. Then change the blend mode of that layer to ‘Lighten’ and the opacity to around 70%. You should now have a lens flare like the one pictured below.

Step 11

In this step we are going to use a layer mask to bring more of the starry background back into play. First off, create a new layer group by clicking Layer->New->Group. Call that group ‘Space Background’. Then click and drag the ‘Clouds’, ‘Gradient 1′, Gradient 2′ and ‘Lens Flare’ layers into your newly created group. With the ‘Space Background’ group selected, add a layer mask by clicking Layer->Layer Mask->Reveal All. Then grab the gradient tool and set it to a light gray to a dark gray radial gradient. Note, the radial gradient option is the second icon from the left in the gradient styles options at the top in the gradient properties. Click and drag a gradient on the mask to reveal more of the stars around the outside of your image. Keep playing with this technique until you have a space background that works for you. Here is where I’m at so far.

Step 12

OK, now that the preliminary work on the space background is complete, we can go to work on our text portion of this tut. We’ll need a block to press the text out of. So add another new layer, this time above the ‘Space Background’ group. Call it ‘Rounded Box’. Grab the Rounded Rectangle tool (it’s nestled under the Rectangle Tool) set it’s radius to about 10px. Don’t worry about the color for now, just click and drag out a rounded rectangle and center it in your canvas.

Step 13

Double click on the ‘Rounded Box’ layer to bring up Layer Style window. Add a gradient overlay that goes from near white to a light gray similar to the settings shown below.

Step 14

Now we need some text to work with. You’re welcome to come up with a cool saying, or just follow along with what I did below. The key is to pick a thick font for the large and important text. I used two of my favorite free fonts to achieve my design. They are Delicious and Museo. I centered everything and added a couple of lines for good measure. As a tip, if you are going to rotate any text like I did with the word ‘BLOG’ use the free transform tool (‘cmd + t’) hover over a corner then hold shift as you drag to increment the angle by 15 degrees at a time. Alternatively you could change the rotation amount in the properties of the free transform tool. No matter what you come up with just keep it plain text for now and ignore the color, because we won’t need it when we press the letters. I used black just so I could see it easily.

Step 15

In order to punch out the text, you will first need to select it. Hover over the thumbnail of one of your text layers in the layers palette, then hold ‘cmd’ and click the mouse. This will select the letters in the layer that you clicked.

Step 16

Now click back on your ‘Rounded Box’ layer. Then right-click on that layer and choose ‘Rasterize Layer’ from the list of option that come up. It’s also a good idea to make a copy of the ‘Rounded Box’ layer at this point, before we add the next few destructive steps. To do so hit ‘cmd + j’ to copy the currently selected layer.

Step 17

With the top (if you made a copy in the last step) ‘Rounded Box’ layer selected press ‘cmd + x’ to cut the pixels on that layer. Then click the eye icon in the text layer to hide it. If you made a copy of the ‘Rounded Box’ layer in the previous step be sure to hide that as well.

Step 18

Repeat the last two steps on all the rest of your text layers until everything is punched out. A couple of quick notes; if you hold shift down while you ‘cmd + click’ you can select multiple layers at once. Also, if you made a small text layer like my little sentence at the bottom, it is best to not punch that part out. You should end up with something like what I have below.

Step 19

Lastly, we need to add some depth to our layers. Double click on the ‘Rounded Box’ layer to bring up the Layer Style Window then add a drop shadow to it, with similar settings to what is shown below.

The Final Result

Here is what I ended up with.

Final Thoughts

It’s really quite simple to add this sleek effect to your designs. It works great for a little extra flare on headers. Let me know what you think of this tutorial and growing trend. Drop me a comment below.

Since I’m not about to go out and spray paint my website on the side of a city wall, I figured I could at least simulate the look in Photoshop. With the help of some awesome brushes from Bittbox and Deviant Art and a cool font I found at Dafont. The effect is rather easy to create, here’s how…

This tutorial has been updated to include the vanishing point filter thanks to the advice of Andre and Erika. I also took the liberty of adding a couple of extra steps to help improve the realism.

Step 1

Find a picture of a brick wall or a building that you’d like to use as a background. The one I used can be downloaded here. Create a new document in Photoshop at the size you’d like and place the bricks on the top layer.

Step 2

Step 3

Add a thick stroke to your text. Open up the layer style window by double-clicking next to the layer name.

Step 4

We need to alter the perspective of this text to make it work with this wall. Right click on the text layer and choose Convert to a Smart Object from the options that appear.

Step 5

Press ctrl, click on the thumbnail next to your text layer’s name, this will select that layer, hit ‘ctrl, c’ to copy that layer to the clipboard. Now hide the layer by clicking on the eye next to the layer. Hit ‘ctrl, d’ to deselect your selection. Click to add a new layer to the top and name it ‘perspective text’ or something of that nature. This is were you will place your text after using vanishing point.

Step 6

With the ‘perspective text’ layer selected click Filter->Vanishing Point. With the create plane tool selected, click for the four points of the perspective. Use the brick lines to help line things up. Also make sure the grid is large enough to hold all your text.

Step 7

Hit ‘ctrl, v’ to paste in your text. Now hit ‘ctrl, t’ and transform your text into place. When you have it the way you like click OK.

Step 8

Make a new layer and place it behind your text layer. Then grab a splatter brush and use the same color as the stroke on your text. I used these brushes, for this effect. Dab some paint so it drips a little below the text and add some small splatters around.

Step 9

Merge the splatters and the text layers by highlighting both the layers, right clicking on one and choosing ‘merge layers. Ctrl, click on the thumbnail in the layer palette next to the name of the newly merged layer to create a selection of just the text and splatters. Now click on the bricks layer, and hit ‘ctrl, c’ to copy just the bricks that are below the text and splatters that you have selected. Create a new layer at the very top of the palette and name it something like ‘brick overlay’. Press ‘ctrl, v’ to paste the bricks on this new layer. Press ‘ctrl, shift, u’ to desaturate this layer. Change the blend mode to hard light and the opacity to 80%.

Step 10

Add a layer mask to the ‘prespective text’ layer. Now grab some of your favorite grunge brushes. I used these brushes from Bittbox. Change your foreground color to black and with the grunge brushes paint away some of the mask revealing some of the brick layer below. Be subtle with this step.

Step 11

The effect is pretty sick already. Let’s just add a little more illusion of depth. Make a new layer at the top and name it ‘shadows’. Grab the gradient tool make a radial gradient go from gray to white. Click on the right side and drag to the left, creating the gradient. Change the blend mode to linear burn and the opacity to 75%.

This is a really effective and fairly simple to create text effect. I hope you can find some use for this in your own projects. If you have any questions or comments, don’t hesitate to use the comment form below.