Meat Text Effect in PhotoshopListThumbs

Meat Text Effect in Photoshop

Last week I published a tutorial showing how to mix a custom font created in Illustrator with some stock photos of milk to create a nice effect. Now on this tutorial we will sort of repeat the technique but this time using stock photos of meat and add perspective to create a word made from beefs. Also we will play with blurs to create a depth of field effect.

We will use Adobe Illustrator and Adobe Photoshop to create the composition also I will be using images from Shutterstock, but feel free to use the stock photos you want.

Step 1

In Adobe Illustrator create a new document and go to View>Show Grid and View>Snap to Grid. Then with the Rectangle Tool (M) create 4 squares that will be the 4 letters of the word MEAT. After that select the Pen Tool (P) and create the letters M, E, A and T like the image below.

Image from the Meat Text Effect in Photoshop

Step 2

As we're going to create a font made from meat, it's necessary to make the letters with round corners. To do that, select the letters and go to Effects>Stylize>Round Corners. Use 10 pixels for Radius.

Image from the Meat Text Effect in Photoshop

Step 3

Copy the letters from Illustrator and paste them in Photoshop in different layers. Each letter will be in a layer.

Image from the Meat Text Effect in Photoshop

Step 4

Let's use a photo of a beef for the first letter, the photos I'm using are from Shutterstock as I got a susbcription to download quite a few images per day. But you can use different images. This one can be downloaded at http://www.shutterstock.com/pic-3079359-piece-of-a-beef-on-white.html

Image from the Meat Text Effect in Photoshop

Step 5

Holding the Command (MAC)/Control (PC) click on the thumbnail of the layer of the letter M to create a marquee selection liket the image below.

Image from the Meat Text Effect in Photoshop

Step 6

Go to Layer>Layer Mask>Reveal Selection. But as we can see the edges are too perfect so we will need to make them less uniform.

Image from the Meat Text Effect in Photoshop

Step 7

Let's create a brush to paint the mask then we will be able to make the edges more real and less uniform. Go to Window>Brushes and then select a regular brush preset, then use the settings below for the Brush Tip Shape, Shape Dynamics, Texture and Other Dynamics.

Image from the Meat Text Effect in Photoshop

Step 8

With the Brush Tool (B) select the brush we have just created and then in the Layer Palettes click on the thumb of the layer mask. Using white for the color paint over the edges of the letter like the image below.

Image from the Meat Text Effect in Photoshop

Step 9

Repeat the same thing we did on the Steps 4, 5, 6, and 8 for the E, the image I used can be downloaded at http://www.shutterstock.com/pic-3681127-raw-ribeye-steak.html

Image from the Meat Text Effect in Photoshop

Step 10

Again for repeat the same technique for the A. The image I used the same image as the previous step but I rotated it to use another part of the beef.

Image from the Meat Text Effect in Photoshop

Step 11

For the T I used another stock photo, you can download it here.

Image from the Meat Text Effect in Photoshop

Step 12

The letters M and T need some color adjustments. Select the T and go to Image>Adjustment>Brightness /Contrast. Use 50 for the Brightness. Do the same with the letter M.

Image from the Meat Text Effect in Photoshop

Step 13

Let's reduce the saturation of the M. Select the M image and go to Image>Adjustments>Hue/Saturation. Use -26 for the Saturation and 8 for the Lightness.

Image from the Meat Text Effect in Photoshop

Step 14

Let's add wooden texture to create the board or table where the beefs will be on. The one I used was from Shutterstock as well and you can download it at: http://www.shutterstock.com/pic-23743900-wooden-texture.html

Image from the Meat Text Effect in Photoshop

Step 15

Select the 4 letters and go to Layer>Smart Objects>Convert to Smart Objects. Then go to Edit>Transform>Distort. After that holding the Shift Key distort the layer like the image below.

Image from the Meat Text Effect in Photoshop

Step 16

Now that the beefs are in the right perpsective go to Layer>Layer Style>Bevel and Emboss. Use Inner Bevel for the Style, Chisel Soft for the Technique, 530% for the Depth, Down for the Direction, 30 pixels for the Size and 10 pixels for the Soften. Also on the Shading options use 90º for the Angle, 0 for the Altitude, Black color for the Highlight Mode with Linear Burn and 30% Opacity. For the Shadow Mode use Overlay change the opacity to 0%.

Image from the Meat Text Effect in Photoshop

Step 17

After the Bevel and Emboss select the Drop Shadow Option. Use Color Burn with black for the color and 90% for the opacity. For the Angle use 90º, 9 pixels for the Distance, 0 for the Spread and 10 Pixels for the Size.

Image from the Meat Text Effect in Photoshop

Step 18

After the Layer Styles your meat will be like the image below. To make the beefs thicker or thinner, just change the values of the Bevel and Emboss.

Image from the Meat Text Effect in Photoshop

Step 19

Add an image for the background and go to Filter>Blur>Gaussian Blur. Use 20 or more for the radius that way the backgound image will be out of focus.

Image from the Meat Text Effect in Photoshop

Step 20

You can add more elements like vegetables I added letuce to give a nice green to the image. You can download the one I used over here.

Image from the Meat Text Effect in Photoshop

Step 21

Select all layers that are used to create the composition and go to Layer>Merge Layers. Then go to Layer>Layer Mask>Reveal All. Select the Gradient Tool (G) and using the black and white preset fill the mask with a gradient with the black from the top to white (1).

After that go to Filter>Blur>Lens Blur. Use Faster for the Preview, for the Depth Map use Layer Mask . For the Blur Focal Distance use 75 and Invert. Over the Iris Options, use Hexagon for the Shape and change the Radius to 30. Press OK. The Lens Blur will create a nice depth of field effect.

Image from the Meat Text Effect in Photoshop

Conclusion

Well, the effect is pretty much done, even though the word is a bit difficult to read, that was the idea to create the word with beefs. You can add your logo and more elements, however the most important thing will br to try to match the perspective, otherwise the effect won't be so convincing. With this technique you will be able to create some nice photo manipulations. I hope the tutorial was useful and let me know your opinion or suggestions for future tutorials.

Image from the Meat Text Effect in Photoshop

Another example

You can try different perspectives as well, the idea is just to play with the tool ;)

Download the Files

Download the Photoshop file used for this tutorial

About the author

User picture

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

41 Comments

Starchild06/01/2009

I like this effect. You've managed to continue using the basic block text without making it seem repeated and old. Well done.

Anonymous06/01/2009

Really nice tutorial.
Maybe i wouldnt have chosen that kind of font in perspective...it's quite difficult to recognize letters. By the way great!

em06/01/2009

Man, sorry, but this tut sux!!

gabriel06/01/2009

2/5 sorry nice try but mask, layer effects, strange perspective and a bit unrealistic end result, thank you anyway the blog still rocks

BogDinamita06/01/2009

sorry man, i think it's a nice try, but those chunks of meat don't really have much to do with letters, not to say tipography

Neil_c06/01/2009

Sorry dude, but this tut is not good and not useful.
Also, the final image is horrible.

abduzeedo06/01/2009

Hey guys thanks a lot for the comments and the criticism, it's really helpful and I think that's the idea behind abduzeedo: share experiences and skills ;)

PauloGabriel06/01/2009

I actually thought this tut good. Whether or not it is a good tutorial, the final image is pretty realistic, and there's no way to say otherwise. I can read MEAT there, but it still looks like raw, randomic meat. ;)

Sedinal06/01/2009

Well, I dont really like it... Your letters look kinda strange.
But thanks for the tut!

B-8206/01/2009

not so useful, but cool ^^

Diogo Glovatski06/01/2009

good tutorial, final image is pretty realistic.

Varius06/01/2009

This hard to read, but I like new ideas and this too.

Michelli06/01/2009

I liked it!

Kee06/01/2009

Im not sure about the tilting of the letters, but overall a great tutorial, looks so realistic!

Qateel06/01/2009

i loved the tutorial and also the steps, but i'd love to say MEAT word is unclear at all.Like someone see it hardly to understand it.

Alvaris Falcon06/01/2009

After all, you're the king of typography!

I must say Abduzeedo gives me most inspiration, keep it up man!

Brukhar06/01/2009

Short and sweet tutorial as usual guys.

Featured here: http://www.presidiacreative.com/web-picks-23/

Marcel Muller06/01/2009

Excelente, Fabio!

Jaybo06/01/2009

Although the fist final image comp is kinda bad, the second comp was a lot better (the one with the blood and knife). You used layers of meat to create depth; much better.

Lost_Artz06/01/2009

gr8 idea but as another other people have said it could still use some more work :)

Yopladas06/02/2009

I like the second one better... more interesting... also maby this is a good place to use a tilt shift lens effect?

bcrosbie06/02/2009

Hey Fabio,

This is great!

It’s sad to see so many people diss the tutorial. I guess they don’t realize that you are the master, and only when they are ready to be students will you be able to guide them.

Thanks for sharing all of your experience for free!

You have to give it away in order to keep it.

Heather06/02/2009

I think this is very clever! Another way of incorporating real images and photos with text to make something unique. Thanks for sharing your technique.

Fonseka06/02/2009

Well it is good tutorial to improve the imagination, it can be useful for who is looking for adversiting idea. It couldn't be a digital art...everything worths.

Vim06/02/2009

Great Tutorial, I use photoshop quite often, so I'm not experienced with illustrator, but this tutorial will be very helpful. Can we have more illustrator tutorials?

Sjaak 06/02/2009

Its not about the end result, its about the steps and how you do something like this so you can use it in your own work, so in my opinion its really usefull. So dont whine if the result isnt all that superb, its all about how.

Anonymous06/02/2009

Yes, is very useful. You can use on your breakfast

igoz06/02/2009

Not quite understand how to do step 8. You can show more detail?

underdog06/03/2009

oh my god ..it's very interesting and nice.kkkkk. look like very real

akuji rocks06/03/2009

i like the tutorial
featured here http://www.flickr.com/photos/akuji_rocks/3589036927/
thank for teaching you are a real master

Anonymous06/04/2009

looks great :D
the only thing is that i dont want to spend m money on stock photos...........and i cant find any good meat pieces ;D hah..

photoshop masking 06/06/2009

Nice tutorial!!!

samwild06/07/2009

Fantastic Tutorial! Great new concept for meaty text effects :D

arcadiacreative06/12/2009

Nice, simple tutorial and concept. Thanks for the inspiration.

However in the first outcome I think depth of meat needs to be out of focus like the rest of the image and the meat needs to cast more shadow on the wood___

faze one studio06/12/2009

very awesome as always....!

Exidium06/13/2009

hey man,

Maybe if you use a more defined typography, it´ll be easier to read.

Maybe something really fat and bold. The concept is great, I would just tweak a little more.

praetoriaen06/18/2009

Awesome tut I was looking for a while how to tilt letters ;)

Paul Velocity06/23/2009

Some good techniques here that can be used for other kinds of lettering, not just meat. Thanks for sharing

Moksha Solutions08/21/2009

its totally sometime new, never thought of making meat text but its really Amazing.........!

K2cougar08/30/2009

This effect could be useful if the letters were more distinguished, but all four of those letters look identical so it really does no good.

GregP11/16/2009

I don't know if people here are blind or ignorant or what... but the tutorial is useful (for the love of god, modify the letters yourself if you don't like how similar they are...) and the end result is realistic. The second sample is neat as well, but not as realistic as the original one made by the tutorial.

Thanks for sharing! It takes a creative mind to come up with it in the first place, and what some of the numpties above (astonishingly) don't realize is that they can take the principles taught here, and apply them to something different (non-meat, with different font) in order to use their own creativity to produce something interesting.

Thanks for the tutorial.

Greg

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?