Entry 73 - Mastheads: The Way of the Hink

Mastheads: The Way of the Hink

Mastheads: The Way of the Hink

Masthead Images With Paint Shop Pro

Recently I was asked to jot down a few things about how I work with Paint Shop Pro -- I use PSP because I started with it about 5 years ago, and now a switch to Photoshop, though probably a good idea in terms of "valuable work experience", is damned near impossible. I have settled into a rapid and shortcut-driven workflow with PSP, and whenever I have tried to achieve the same proficiency with Photoshop (numerous times), I become frustrated with my lack of familiarity.

The subject here in particular is the banners at the top of my pages -- although I feel as if I am in a rut in terms of layout (long horizontal bar with a gradient and the logo positioned on the left), sometimes it turns out okay. For this particular banner I decided to go with a fractal pattern to add weight and interest to the otherwise plain header.

Firstly, it is necessary to establish the size of the header - in this case, I use a repeating CSS background image set at a specific height. Here it is 69 pixels high; no particular reason why, but I like to keep it under 100 pixels, as I have adopted that as an arbitrary rule in my head.

I create an blank image with a transparent background, keeping in mind the ultimate width, as I use a collapsing, percentage-based tables layout, and if the image within the table row is too long it tends to go bonkers at low resolutions like 640x480. With this layout I broke this rule (resize under 800x600 to see it go hinky) because I assumed that people using 640x480 need either get new glasses, or a new computer.

I fill the background with my color of choice - usually white. I zoom in to save my poor eyeballs some strain, and then I create a new raster layer in my layer palette. I leave it transparent. I have become pretty disciplined about using layers, and when I did finally realize how to work them, they opened up a whole new scope of design flexibility. For the sake of my own sanity, I also name the new layer background gradient.

I usually futz with the gradient's position and curve by using a bounding box of the right size (as the gradient is applied top-to-bottom in relation to the size of the selection). After I get it where I want it, I apply the gradient.

The most valuable tool I have in this arena are two gradient presets I created myself, which consist of a simple semi-transparent gradient fade adjusted to two levels - sharp and medium. The actual color of these gradients is determined by the background-color I have selected in the Materials palette.

Here are the background-fade gradients if you want them. Just unzip them and stick them in My Documents > My PSP [version number] Files > Gradients. I also have the hex-sorted swatches (#000 - #FFF) -- these go in My Documents > My PSP [version number] Files > Swatches.

I use these gradients for lots of stuff. To add molding and horizontal detail, I change the color of the gradient (controlled by adjusting the background color in the Materials palette).

Also, selecting the gradient properties tab allows you to change the direction of the gradient. For a quick change you can invert it as I did here for the bottom horizontal detail, in pine green.

Here, however, I am unsatisfied with the look of the green, but I like the shape of the gradient. what to do? Well, I open up my trusty Colorize filter (Adjust > Hue and Saturation > Colorize) and play with it until I get it where I want it (I have a lot of presets in this filter too, as once I see a hue/sat I like, I keep it - a great feature of PSP).

Once I get the coloration in line, I temporarily merge the layers. By pressing Control-C (copy) and then immediately pressing Control-V (paste as new image), I have a completely independent image from which to create the banner background. As I said before, I use CSS to establish the background repeat, so I usually snip the image off at 10 pixels wide by selecting the area I want and cropping the image with Shift-R. I then save it as something like mylayout-banner-bg-rep.gif. When saving, special care must be taken to NOT optimize the GIF, as it is crucial that the image be exactly the same horizontally as the resulting banner; in point of fact, I never optimize any of my images, as most of them are so small that the space saved is minimal and the palette corruption is unacceptable. If you did it right, the image looks like this:

The CSS looks like this:

<!-- CSS -->
TD.layout-logo {

margin : 0; 
padding : 0; 
color : #000000; 
background-color : #ffffff; 
background-image : url(mylayout-banner-bg-rep.gif); 
background-position : 50% 0%; 
background-repeat : repeat-x; 
border :  0 none inherit; 
}


<!-- end CSS -->

And all stuck together, it results in something like this:

* As an aside: If you have issues with odd vertical lines in your repeat, chances are you had anti-aliasing turned on on the Selection tool when you created the 10-pixel marquee. This happened to me a dozen times before I figured out what the hell was doing it, so I reckoned I would mention it to save you some grief.

Now, keeping my train of thought intact, I immediately return to my multi layered image and hit Control-Z to un-merge my layers (for safekeeping). Often I close the image I created, so it does not clutter my workspace and confuse me later, as I have learned that any ten second distraction can ruin a good run of design success. This might be a good time to save your image and establish a way point. In case something drastic happens you will not have to start over from memory.

This next step is a little fuzzy. I usually spend some time searching Google's image search for something I dig to add as a design element. This can take awhile, and more than a few times it ends in frustration, but there are lots of images to plunder out there, so don't give up too fast. For my banners, and for this example, I used images made by a guy who does some pretty amazing fractalscapes (a hobby I used to have back in the days of DOS) with Fractint and UltraFractal. I right-click, select Copy Image, and then minimize my browser window.

Opening my working image in PSP, I press Control-L, which pastes the fractal image as a new layer on top of my work. It is usually much larger than the dimensions of my banner, but that is alright.

I then name this layer "fractal overlay". After I get the image where I want it, I select the part of the image I want to use.

I then invert the selection (Selections > Invert or by pressing Control-Shift-I). Pressing delete at this point eliminates the fringes of the image, or what I don't want to keep around. Keep in mind that Control-Z is always there for you to undo a mistaken action.

The layer consists of the portion of the image I wanted, but most likely not in the color scheme I wanted. Once again, I can use the Colorize filter to get this to my liking. I never usually have a scheme in mind, I just wing it. In honor of the guy who requested this tutorial, here I went with a loud color.

Now that I have the layer in place, I have to manipulate the alpha properties to achieve the desired effect. In the layer palette, controls exist for the layer's transparency as well as specific filter types; I like to mess around with both of these settings until I have what I want. A word of caution about layers - a deep undo is not something you should rely on, as you might have done something in the interim of the work flow you do not want to destroy. To avoid the frustration of this problem, I suggest making a duplicate of the layer you are working on before you make any radical changes, and then hide it in the layer palette (click on the eye). This is is where being disciplined with naming your layer is important; Imagine this image, my template for the banners of this site (zipped pspimage format) without layer names - it is a nightmare, trust me.

I then use the erase tool, set to a low opacity, to remove the hard right edge of the layer so it appears to blend with the original gradient.

Sometimes this requires a deep zoom to make sure you get all the small bits on that end, because the GIF palette compression algorithm can really make such an error stand out, and that really blows after you have saved it and put it in place.

And there you have it! I know, it is not exactly striking right there, and the text can be a hassle (I am too tired to explain in this tutorial, and besides, I still suck at typography), but with a little patience and some exploration of PSP's features, you can really make some cool stuff happen. Any questions, or any points you think I failed to elaborate on (I am not the best teacher in the world, I know this), please leave a comment and I will spit it out. ◊

---