Ian Swenson .com

Working with Brushes

Now that we have our brushes set up, we procrastinate no longer and actually get going. Instead of telling you what you should do, since this is a highly individual process, I’m going to catalogue what I did.

The first thing I did was create a basic mock-up of a page. It appeared thusly:

A couple notes about that screenshot. First, the two right windows that I use by far the most are Layers and History. By default the history window will not be present, but you can find it under the Window menu.

Also, make sure your working file is large enough for an entire page to fit in and then some. Since working in the web medium you have to deal with varying screen widths, you have to accommodate them. Most common width now is 1024px. The smallest you should worry about is 800px, but many people ignore that now since Windows XP default is 1024px.

On my busiest web site 9.88% of my visitors have sported a resolution of 800×600 in the last four months (we’ll talk about how I know that in a later post). Since that’s a commercial site I need to worry about how I deal with that ten percent. But on this web site I don’t really care if you’re using a tiny resolution since you’re not my audience. I personally use a screen resolution of 1650×1050 with my widescreen monitor (btw, on that site 6.92% have had that resolution, so almost equally valid as 800×600).

Back to the process. All I did here was select my colors and create two boxes of the width I want for the main bar and the side bar. I also placed them apart the distance they’ll end up. In this instance (I’m repeating the process here, so things will not be exactly like the actual web page) the main box is 500px wide and the side bar is 200px with 76px seperating them. Height is not terribly important at this point because I’m just working with header. Later I will do the actual content areas with repeating sections. The widths are important because if this ends up working, you won’t have to redo your work.

The next step is to apply the brushes as desired. Vary the size of the brushes to achieve different results. They’re usually too large to use in most circumstances anyhow. In my case I used three brush styles on the top. Here’s what they look like when added:

A point on this step: Create layers (CTRL + SHIFT + N). It’s much easier to make changes in the future if everything is layered. I created a new layer for each brush. I could have even gone further and created a new layer for each application of the brush. The beauty of layers is that you can always move, rotate, resize, recolor, and merge them later. If you just modify your main layer, you lose a lot of your ability to adjust things later without affecting the rest of your project.