nav-left cat-right
cat-right


Simple Photoshop Grunge Brush...

This is a video tutorial to show you how to turn a photograph into a grungey Photoshop brush. It starts with the raw photo and leads you through to defining the brush for use. Please let me know if you find this useful and/or if you have any suggestions for the next video tutorial. Enjoy!

My Technorati Profile

Make a Photoshop Brush...

This is a tutorial to show you how to turn a photo into a creepy/grungy brush.

doorway-start  into a brush that looks like  doorway-finished

Start by downloading the photo here.

Open your photo in Photoshop. I’m using Photoshop CS3 for this tutorial.

On the left toolbar choose the quick selection tool.

 

quick selection

quick selection

Use the Quick Selection Tool to select the entire doorway.

 

select only doorway

select only doorway

Then go to Edit > Copy. When you copy something, Photoshop automatically takes the size of what’s on your clipboard to make your new image. So go to File > New and click OK. Then paste by going to Edit > Paste. When you paste, it will paste into a transparent layer on top of a white background. If your background isn’t white, simply delete the background layer.

doorway-alone

doorway alone

Make sure you foreground is White (FFFFFF) and your background is Black (000000). Then go to Filter > Sketch > Conte Crayon. The settings for this should be: Foreground: 11; Background: 7; Texture: Canvas; Scaling 100%; Relief: 4; Light: top. When you’re done it will look like..

dooryway-conte

conte crayon

Next go to Filter > Sketch > Torn Edges. The settings for this should be: Image Balance: 37; Smoothness: 12; Contrast 14.

 

finished product

finished product

Once you’ve got the image you’ll need to create the brush. Go to Edit > Define Brush Preset. Give your brush a name and it will be automatically added to the current list. Make sure that once you’re done making all your brushes you save them to a set so you don’t lose them. (set tutorial coming soon)

It had been a while since I made any brushes, so I want to thank Swimchick for her tutorial to get me back into it.

#1 Validate Your Code...

One of the first things you should do when coding your website is make sure it’s valid. It’s very simply to go to the HTML Validator and check for errors. The only errors you’ll see for Lala Land are those around the Twitter code, which I can’t change. Some exceptions like that are allowed, because Twitter uses the correct codes inside theirs (and it all works out in the end). You’ll want to check your validation often, especially if you update your site often. Valid code can be helpful in many ways, including search engine optimization. Most importantly, though, it will help you keep any visitor that comes to your site.

If you want help in validating your code, try installing EditPad Lite, and use it as your default text editor. When you view your source, EditPad shows you the line number. If you validate your site and it says “Line 220, Column 4″ then you go to your site, view the source, and scroll down to line 220. Then you will be able to see what’s on that line (which the validator also shows) and what’s on the lines around it. Usually this is all you need to fix those errors. Remember, valid does not make your coding work across all browsers, but it ensures you’re on the right track.

The number one mistake everyone makes that throws up red flags in their valdiation is not adding the alt=”" attribute to their image codes. Every image code must have this, it tells the browser and the user what the image is if it doesn’t load. Many people also think that an image code is like this <img src=”file.gif”> and completely leave out the end. A proper image code should include the image source (file name), the alt tag, the height and width, and the end. The height and width are not absoluately necessary, so at the very least it should look like <img src=”file.gif” alt=”file info” />.

How many errors does the validator give your main page?