jMar"s Blog DevSmash Developer Portal

Wednesday, May 28, 2008

A "Dirty" Photoshop Tutorial

Well, despite being a long time user of Photoshop, I've never sat down and attempted to make a tutorial. I realize that the web is chock full of text effects for Photoshop, but this is a particular look that I haven't seen described before. During the tutorial I share a couple of the hot-keys that I employ most often, so I'll apologize to the Mac users for only providing the Windows version (where they differ). From what I understand, they're all pretty close... so that's that. Let's dig in...

Create a New Project

Press Ctrl + 'N' to open a dialog for creating a new project. Normally I work at higher resolutions, but for the sake of this tutorial I chose 640px by 480px.

Create a Background

Something simple here will do. I set my foreground and background colors to darker shades of blue (#2C326E and #2D304A respectively). Pressing Shift + 'G' will let you toggle between your gradient and bucket tools. Using the gradient tool, click and drag your mouse from the upper left to the bottom right corners of the canvas. Your canvas should now look like this:

Create Dirt Layer

Press Ctrl + Alt + Shift + 'N' to create a new layer. We're going to create a new gradient just like we did in the step above, but this time, select two different shades of brown. I chose #A2702F and #7F561E for the foreground and background respectively. Your canvas should now look like this:

Add Noise to Dirt Layer

Next, in order to simulate the gritty nature of dirt, we're going to add a Noise filter to our dirt layer. Click Filter > Noise > Add Noise...

I used the options shown in the following image:

Add Text

Next we want to add some text. The exact font you use isn't important, although I have found that "round" works better than "sharp" for this effect. Also, you will want the font to be sufficiently thick (i.e., don't use Arial Narrow). I chose a font called "Elephant" and used 170pt for the size. The color is of no consequence here.

Create Mask from Text

This step requires performing the following actions:

  • Hide the text layer by clicking on the corresponding "eye" symbol.
  • Select the dirt layer.
  • Click the 'T' on the text layer while holding the Ctrl key.
  • You should now see that the outline of the text is selected.
  • Click the "Add Layer Mask" button shown below:

Your canvas should now look like this:

Add Loose Grains of Dirt

This is where we want to start adding in the random grains of dirt to make this look more natural. This step requires performing the following actions:

  • Select the brush tool (press 'B').
  • Choose a grainy looking brush. I chose one of the default brushes as shown below:
  • Now select the dirt layer's mask by clicking on the layer mask thumbnail, as shown below:
  • Ensure that your foreground color is white.
  • Now you need to rely on your artistic eye a bit and click around in various places to reveal the dirt texture behind the mask. Note that you don't want to drag the brush while clicking, since streaks will not look natural. Mine ended up looking like this:

  • The scattered dirt effect doesn't look quite right, so now we're going to switch the foreground color to black and selectively remove some of the dirt. Mine ended up looking like this:

Add Depth to the Dirt

The layer mask is finished now, but the dirt looks too flat. Double click on the dirt layer to bring up the Layer Style dialog. Make sure that "Layer Mask Hides Effects" is not checked. Now add a drop shadow with the following properties:

For the color, I used #3A2900.

It's getting closer, but let's add a gradient overlay to give the light a little more "play" on the dirt. I used the following properties:

Smooth Dirt

Some of you may wish to stop here, but I found that the Noise filter had left the dirt looking a little too grainy for the look I was after. To smooth it out a bit, I unlinked the layer mask from the dirt layer by clicking the unlink mask button...

...and then I applied a very light Gaussian Blur (Filter > Blur > Gaussian Blur...) to the dirt layer:

That's it! Here's the finished effect:

Mixing the random characteristics of scattered dirt with purposeful lettering can be tricky, but I feel this effect does a decent job of providing just that. If you have any suggestions on how to improve the realism, please comment!



16 comments:

Luis said...

Looks Cool! i will try it later!

wendylsmith said...

all apps is to open Safari Browser as well as kind in the complying with URL AC Market APK People this was the procedure for download

Syaniezt Barbie said...

The Article is very interesting and I like it. Agen jual fiforlif Balikpapan , Harga Fiforlif di Balikpapan , Jual Fiforlif Murah di Balikpapan , Manfaat Fiforlif , Distributor Fiforlif di Balikpapan

Terry Bogard said...

Thanks for Nice and Informative Post. This article is really contains lot more information about This Topic.
Do My C Homework

Wilson Larrie said...

Hi buddy, your blog' s design is simple and clean and i like it. Your blog posts about Online Dissertation Help are superb. Please keep them coming. Greets!!
online assignment help

Ales Noe said...

Good way of telling, good post to take facts regarding my presentation subject matter, which i am going to deliver in my college
BBA Project Help

Brian Joseph said...

My friend recommended this blog and he was totally right keep up the fantastic work!
White Paper Writing

Java Assignment Provider said...

This is really a great stuff for sharing. Keep it up .Thanks for sharing.
java homework

Ales Noe said...

This is great information for students. This article is very helpful i really like this blog thanks. I also have some information relevant for online dissertation help.
Law Assignment Help Service

Wilson Larrie said...

Get the dissertation writing service students look for these days with the prime focus being creating a well researched and lively content on any topic.
Psychology Assignment Help Service

Finance Assignments said...

This a good way to appreciate the teacher as they put their efforts to train students. UK dissertation Writers appreciates the teachers.
Finance Assignment Help Online

Unknown said...

There is no way to find a best free file explorer except http://rootexplorerapk.net .

pauledwards124 said...

Our website is number 1 in Case Study assignment help, online Case Solution & Case Analysis experts. Feel free to contact us to get your case studies done.
Case Solution Help

bao hanh tu lanh said...

Để tiện cho quý khách theo dõi những tình trạng cần được bảo hành chúng tôi liệt kê những lỗi của tủ lạnh Toshiba thường xảy ra:

Sửa tủ lạnh Toshiba không hoạt động
Sửa tủ lạnh Toshiba không lạnh ngăn dưới
Sửa tủ lạnh Toshiba hỏng Block.
Sửa tủ lạnh Toshiba không lạnh hoặc lạnh kém
Sửa tủ lạnh Toshiba không làm đá hoặc làm đá kém
Sửa tủ lạnh Toshiba không chạy quạt gió
Sửa tủ lạnh Toshiba bị chảy nước
Sửa tủ lạnh Toshiba có tiếng kêu lạ
Sửa tủ lạnh Toshiba bị lỗi hệ điều khiển
Sửa tủ lạnh Toshiba không xả tuyết.
Sửa tủ lạnh Toshiba bị thủng ngăn đá.
Sửa tủ lạnh Toshiba chạy không ngắt.
Sửa tủ lạnh Toshiba zoong cửa bị hỏng, hở, không sử dụng được.
Sửa tủ lạnh Toshiba ngăn mát không mát.
Sửa tủ lạnh Toshiba đóng tuyết.
Sửa tủ lạnh Toshiba không vào điện
http://dienlanhphucthinh.com/bao-hanh-tu-lanh/trung-tam-bao-hanh-tu-lanh-toshiba-tai-tphcm.html

ghantasingh said...

nice article

Rom TV said...

Hello! I'm Rom, I would like to challenge the whole world with the kind of games follows:
First, Super Smash Flash 2 v0 9b is a perfect upgrade of Super Smash Flash Game. A well-known, addictive game with millions of searches every month. Not many games surpass the number 1.000.000 like this game.

Second, You’ll have to be very ingenious to pass the levels in the game. At a high level, you will face many difficulties.
Rolling Sky 2 Online has 14 levels for you to conquer, if you pass level 14, you really are a top player.

And finally, Drag the ball left or right and avoid all obstacles. Do not deviate from track! Come on! Relentless pursuit of super speed. You can be faster along with the music rhythm!

Rolling Sky Game is a 3D game. There are many different levels of play at the levels of increasing difficulty. At a high level, you will have to overcome many more obstacles, requires ingenuity, agility and persistence.
Are you ready?