Making Brushes in Adobe Photoshop CS3

August 30, 2008 at 8:01 pm (Free stuff, Tutorials) (, , , , , , , , )

I started this tutorial with the intent of making some woodgrain brushes. The tree image I picked to work on yeilded better grunge brushes though so that is what we will look at today but stay tuned for some free wood grain brushes later this week.

Also remember to save your work regularly. I had Photoshop crash on my part way through writing this and lost a bunch of work. Don’t be stupid like me.

Today we will look at building some grunge brushes in Photoshop CS3. You can download the source picture and all of the brushes I created from here. It’s a big file with print quality brushes and fairly high rez photos. If you want to add these brushes to an existing set see the end for an explanation of how to do that. Also see the bottom for the licensing.

For things that naturally exist I like to start with some source pictures so for wood I obviously took pictures of wooden objects around my house. When taking thebpictures you want to make sure that you are getting as much detail as possible, so don’t be afraid to play with macro modes or different angles to get more contrast. For objects that are not shiny (like stucco which is useful in developing grunge brushes) using a flash to bring out more contrast can yield some amazing results.

Today we will start with a picture of a tree outside my house. Which can be found in the download at the beginning of the tutorial.

The first thing I do is to duplicate the layer and save it out as a native photoshop file so that I no matter what I do I have a copy of the original. Brushes in photoshop are based on gray scale. If a part of a brush is totally black then it will paint with 100% of the colour you have selected. If it is totally white then it will not paint anything at all. This also follows that any percentages of black will be percentages of the colour that you selected.

With that in mind we will start by using an adjustment layer with the black and white adjustment layer.

Black and White Adjustment layer

Black and White Adjustment layer

What we  are looking for now is a high degree of contrast. I just play around with the sliders till I get something that starts to look cool. Depending on your picture some sliders will have no effect on the image. You can see below the settings that I used on this picture.

Black and White Adjustment Layer Settings

Black and White Adjustment Layer Settings

With our adjustment layer in place select the image again and lets adjust the levels. This is found under Image/Adjustments/Levels (CRTL + L or Command + L). Again what we are looking for is a high degree of contrast between black and white. I just play with the sliders till I see what I want but look below to see the settings that I used for this particular picture.

Level's Settings

Level's Settings

Now we have the basis for a good brush or really many brushes. Before we can continue we need to select the adjustment layer and the tree and convert them into a smart object. This will allow us to come back and adjust the image later if we want. If you are in an earlier version of Photoshop that doesn’t support smart objects just merge the layers. There are a number of cool spots in this tree so I will make some selections with the marquee tool and layer them via copy (accessed with a right click or control click over the selection). I generally like to make a new group and put each brush in the group just to keep things organized. Try to keep your selections roughly square if possible as we will be making square brushes later. To constrain proportions hold the shift key while making the selection. The exact size isn’t as crucial as we will use Illustrator to vectorize the images in a second so we can make all of them the maximum of 2500px x 2500px at 300ppi. So layer away till you feel you have all of the parts you want. Also don’t forget to select the main layer of the image after each new ‘layer via copy’ action. Don’t forget that you can also turn off the main layer to see which parts have been used or not used for brushes.

Preview of Layers Panel

Preview of Layers Panel

Now we need to open Adobe Illustrator so we can make the brushes the maximum Photoshop size. In Illustrator just make a basic print document size is irrelevant.

New Adobe Illustrator Document

New Adobe Illustrator Document

Now we need to go back into photoshop and use the move tool (V) to drag a layer into Illustrator. Just do one layer at a time. To do this select a layer and select the move tool. Once you start moving the layer you can press ALT + TAB on PC (Command + Tab on Mac) to switch between applications and let go of the layer in Illustrator.

With the new object in Illustrator selected to to the Object menu and down to Live Trace/Tracing Options. Check the preview box so that we can see what is happening with the tracing. For my image I just used the stock settings but don’t be afraid to play with them till you have something you like. I always check off the ‘ignore white’ box as well because I feel it gives me a better idea of what the brush will look like in the end. Try it without if you want and let me know what happens or just keep along with us. You can see the stock settings I used below. Commit the tracing by clicking on the trace button.

Live Trace Options

Live Trace Options

Now lets copy the object in Illustrator which can be done with a key command (CTRL + C in windows or COMMAND + C in Mac) or can be accessed from the edit menu. Once we move back to Photoshop we need to create a new document. It should be 2500px X 2500px at 300ppi so that we are building a brush for the maximum size available in Photoshop. If you are planning on making brushes often as I do then I would save this document set up at a preset to save time over the long haul.

New Photoshop Document Preset

New Photoshop Document Preset

When you go to paste the object into Photoshop make sure you choose to paste it as a smart object. Use the handles on the corners of the object to stretch it to the full size of the new document. Now we are almost there. At this point if you are happy with the brush then we would continue. If you don’t like it then you can ‘paint’ on it with other brushes till you get what you are looking for. Remember that you need to paint in black to add to the brush and white to subtract from it. I like what I have so I will get ready to save it as a brush.

Before we can save a brush we need to make sure that it will be in the group we want. I have lots of grunge brushes already so if I was just doing this for myself I would go to the brush panel and select the grunge brushes I wanted to add to.

If you are starting a new brush ‘group’ then we need to clear the brush panel first. You do this by going to the edit menu and selecting the ‘preset manager.’ Once in the present manager select the first brush and then hold shift while clicking on the last brush. Now we are going to click on the delete button. Don’t worry we are not deleting these brushes from our system just from the brush panel

Once you are happy with the brush you need to save it. We do this by going to Edit/Define Brush Preset. Now Photoshop is going to ask you for a name for the brush. I’m not entirely sure why it does this. I can’t recall ever seeing the name of a brush again. If anyone know please let me know. I just save the brush out and don’t worry about it.

Once you have saved a new brush to the brush panel you need to save the brushes or you will loose them (I learned this the hard way months ago). To do this go to the fly out menu and click ‘Save Brushes’.

save your Photoshop brushes

save your Photoshop brushes

If you want Photoshop to automatically load the brushes each time you open it then you need to save them in the correct spot. On a PC you find it at C:/Program Files/Adobe/Photoshop/Presets/Brushes. On a Mac you find it at Applications/Photoshop/Presets/Brushes. I have slighly simplified the paths as ‘Photosop’ will usually include the exact version you are using and sometimes the name ‘Adobe’ infront. So that’s about it. If you make some more brushes pleaes provide links for the rest of us to download and use. Also if you make any artwork with the brushes I would love to see it.

To combine brush sets use the flyout menu and select the first set you want. Use the replace option that is offered. Then select the second set and click the append option. Now with both sets loaded use the flyout menu and save the brushes as whatever name you want.

Below is a picture of the 10 brushes I created from the 2 tree pictures.

Photoshop Grunge Brushes

Photoshop Grunge Brushes

Advertisements

Permalink 3 Comments

Switch back to IE

August 28, 2008 at 4:05 pm (News) (, , , , , , , )

This is spawned from an article on ArsTechina regarding the new IE 8 beta 2. (edited) I have now also found and article on Lifehacker. Check them both out for details on IE 8

I am an avide Firefox user. That is what I use on my PC at home and my Mac at work. I use it because of the greater security offered (especially from FF2 verses IE6) but more importantly I love the extensions that you can use with Firefox. Stuff like Ubitquity which I wrote about yesterday and have been using tonnes at home and at work.

With the new version of IE 8 beta 2 out though there are some very cool features that at least entice me to try out IE 8 in the future. Probably one of the most compelling features to me is the suggested sites. Basically it suggests sites that are similar to the sites that you are on. Seems kind of like stumbleupon (which i love but kills my time). I wonder if it would help in finding some design inspiration.

Think you would view a site with cool art work and then hit suggested sites. Voila now you have other sites that have some interesting arty thing to them.

There are lots of other neat features, most of them covered in Firefox 3. The only thing that will continue to hold me back from jumping into IE 8 as my fulltime browser is the lack of my favorite extensions like Ubiquity and the web developer tool bar. If IE 8 can catch up in the extension category I would consider making the switch.

Permalink Leave a Comment

Cool Web Developments

August 27, 2008 at 4:38 pm (News) (, , , , , , , , , )

Surfing through my RSS feeds today I came upon a number of very cool web developments that I thought I would bring to your attention.

IE 8 InPrivate browsing. Pulled from ArsTechnica. Looks like IE 8 may mean that analytics programs we use to track our site traffice will no longer work. One of the features of InPrivate will be blocking of objects embedded in your sites (like google analytics). If a user has this turned on  us web designer may never know for sure that IE 6 is dead or what screen resolutions best suited for a particular clients website. While there are benefits to this technology from a user’s privacy point of view it could be tough for people designing websites.

Our second chunk of news I first saw at Lifehacker but now also appears on ArsTechnica. Ubiquity is a prototype Firefox extension that adds a command line interface to your browser. To send a link to someone now you have to right click and then roll down to ‘send link.’ Ubitquity works something like Quicksilver or Launchy in that invoking it with a key command would allow you to start typing “email this to wife” and suggestions for the action would come up. A neat way to interact quickly with web pages but if your not already a Quicksilver or Launchy user it may be hard to get people on board. I don’t see my wife using this. If you’re interested head to the download and watch the tutorial video.

We’re almost done…. Many of us web professionals are devote followers of the Twitter (at least I am). I sometimes wonder how much information is gleaned about me from my posts. Not from the people that I follow or the ones I don’t block from following me but from the public timeline. I know that I can make my tweets private but that means I have to approve everyone and that is a waste of my time. Enter Status a project from Chris Coyier over at CSS-tricks. While not exactly like twitter there are some similarities. Many companies use twitter for tracking quickly where each other are. While twitter works for this it does expose people to the scrutiny of the wider public. Status is designed around private groups. You can start one or be invited into one. The purpose is to simply list where you are and what you are doing. This really has applications for distributed companies or companies dealing with some remote employees. I personally don’t have a great application for it right now but it has been bookmarked.

Finally how about some advice to budding web designers and developers. Basically it is a round up of advice for those that are starting out in the web industry. A good read for anyone who has been in for a long time or those just starting.

Enjoy the reading.

Permalink 2 Comments

Today’s News

August 25, 2008 at 5:19 pm (News) (, , , , , , , , , , , )

While reading  through my feeds today I noticed a post from Sitepoint regarding the use of IE 6. While most of us web designer’s wish IE a quick and painful death we always wonder if we really can stop supporting it. Many notable sites have stopped (37signals) but for the rest of us can we really stop supporting IE 6 when we build sites for our clients?

Die IE 6

Die IE 6

I don’t think that we can, I know that I can’t yet. The reality is that many of my user’s still use it. I could take an elitist stance and tell them to move forward with the times but I think web users are too fickle. If you head to a site and it doesn’t work they’ll just move onto another site. Your competitors are only a click away.

I have always thought that I would drop support for IE 6 when Microsoft did. They have made a practice of only supporting the 2 most recent versions of a browser. In theory that means when IE 8 comes out (in a few months) I could drop IE 6. Really though if lots of people are using it still can I stop.

As a freelance designer it can even be a selling feature. “I still support IE 6 which many of your users are using. No extra cost.” At the very least it is an interesting selling feature.

Ultimately until IE 6 drops below about 5% usage on a client’s site I will still support it.

The second bit of news comes from a fellow designers site. Niki Brown was given a free gift for her readers. If you are interested in getting some business cards printed head over to her blog and participate in the competition. I know I will.

Permalink Leave a Comment

Free Shape Brushes for Photoshop CS3

August 18, 2008 at 7:29 pm (Free stuff) (, , , , , , , )

I made some brushes for Photoshop of some shapes. They are free to use but not to distribute. If you use them send a link my way. I would love to see what you do.

Shape Brushes

Permalink 2 Comments

Next page »