Blog / grunge

Distressed Effect in Illustrator

Wednesday, April 29th, 2009

Here we go with a easy tutorial, kind of like the distressed grunge effect we had. The only difference is we are using Illustrator instead of Photoshop.

1. Prepare your image in Illustrator, and we are using our logo and see how it looks.

distressed illustrator 1 Distressed Effect in Illustrator

2. We will just add a couple of line with brushes effect. It does not have to be perfectly drawn. Open your brushed libary to explore different texture. I used the default chalk in this case.

3. And then go to Object > Expand Appearance to make the brush strokes to compound path.

4. After that, you can Subtract the texture part to your orignal image in the Pathfinder panel. (Open the Pathfinder panel under Window.)

distressed illustrator 3 Distressed Effect in Illustrator

However, if you have more than one color, you will need to do the process per color because technically we are making shapes by knocking out the texture. It maybe confusing, but you will definitely have fun after you master it.

distressed illustrator 4 Distressed Effect in Illustrator

Distressed Effect in Photoshop

Friday, April 3rd, 2009

In web design, it is always like make no mistake, nice, clean and crisp. However, adding some distressed or grunge effect might add a total different favor to the piece and may even fit more to the certain demographic like bikers, skaters, etc. Some people like to use filters for the effect, but knowing how to do it step by step is crucial and your ability should never be hinder by filters.

1. This is the original art that I use for this particular exercise, and you can certainly pick your own.

distressed photoshop 1 Distressed Effect in Photoshop

2. Then you will need a textured image in order to manipulated the original. You can Google words like “cement texture” or “crumpled paper.” This is the one I found: Link

distressed photoshop cement Distressed Effect in Photoshop

3. Open the picture we just found in Photoshop and change it to Grayscale mode. Then use Curves (Cmd + M / Ctrl + M) drastically adjust the contrast.

distressed photoshop 2 Distressed Effect in Photoshop

4. Select All and copy the almost black and white picture. Go back to the image that you would like to manipulate with. Create a new Channel layer and paste the texture image there. If you can’t not find your Channels panel, you can always go under Windows > Channels.

distressed photoshop 3 Distressed Effect in Photoshop

5. While holding the Cmd key (or Ctrl on PC), click on the channel thumbnail that we just added. It will load the
channel as a selection. Turn it back on RGB mode by click on RGB on the top of the Channels panel.

distressed photoshop 4 Distressed Effect in Photoshop

6. What you will do next is to delete (or keep) the selection you made. Go back to the Layers panel, press delete. Or you can add a vector mask, that you can keep the orginal of the image and do some more adjustment to it. And now, it has and totally different feel to it.

distressed photoshop 5 Distressed Effect in Photoshop

Let see the comparsion!

distressed photoshop done Distressed Effect in Photoshop

Isn’t it fun and easy to do? Maybe you would probably think that this is it, and that is all you can do with the effect. I guess I have to tell you that you are wrong, because with blending mode and this, you can create a masterpiece of your own. Maybe even something like this!

distressed photoshop sample Distressed Effect in Photoshop

So, don’t limit yourself and explore the fun of it.

 

About Promoting Group

Who We Are: Promoting Group is an internet marketing company whose priority is to make your organization rise above the competition. We are a group of talented and dedicated individuals with a passion for marketing and demonstrated skill in public relations and search engine optimization. We will custom-tailor marketing strategies that are right for you and ...

Read more