Elementary Shoppin – Nova’s Guide To Decent Header Banners

I was quite pleased when my IRC client’s aggregator finally reported a new post on OEG. I was getting worried that the guys had already called it quits. Anyway, the latest OEG round made me uncomfortably aware of how full of fail some blogs are in regards to their visual appearance. Now, as a fellow nerd I do understand that the external appearance might not always be the priority no.1 to a whole lot of you, but some blogs just have so inexcusably bad header images that something has to be done about it. Thus I decided attempt helping my fellow bloggers make their sites look better. Unfortunately I don’t know jack about webdesign, CSS and shit like that (I count on JTFish on that), so my only option was to share the little knowledge I have in making decent-looking header banners.

This guide goes through the creation process of a website header banner (the banner I am using at the time of writing this) step-by-step. The program I use is Corel Photo-Paint X4 which I do realize being inferior to Photoshop and not all that popular, but the principles are universal. The main difference between programs is the naming of different tools and their location in the GUI but that’s what the Help-files are for. The reason why I stick with Corel is the fact that I’ve been using its different versions for at least the last ten years and it gets this kind of light-weight non-professional work done just as well as more advanced programs. Anyway, let’s get started.

Tabula rasa. To begin you need to know what size the header banner for your theme needs to be. If there isn’t any sample image included with the theme, a simple method is just taking a screenshot of the site and measuring it with Photoshop or whatever you’re using. Click to see a larger version of the image and observe the GUI layout. The vertical bar on the left side is the toolbar. The most important tools you should consider right now are the top two ones. The one depicted as a plain arrow is the object pick tool which lets you to select, move and manipulate objects. Whenever you need to deal with objects, use this to select them.

Second from the top in the toolbar is the mask tool which lets you deal with masks in a similar fashion as the object pick lets you deal with objects. Masks are basically restricted areas that you can create. Whenever there is a mask present, any effects applied to the image only affect areas within the mask. Keep this in mind as masks are of critical importance in almost anything you do with an image processing program. Lastly, note the docker on the right side next to the palette. It can show you several things such as objects, color channels and whatnot, but in simple stuff like banner creation we only need it to view the objects. In this mode it lists all the objects in the image. You can select and manipulate them from here as well as set their exact order by drag-and-dropping them up and down. If you drag an object onto the top of the list, it will appear on top of other objects in the image. When dealing with images with a lot of different objects layered on top of each other, it’s easier to select them using the docker rather than poking around with the object pick tool.

I start off a banner by selecting a suitable background image, usually some scenic art that can be found lying around such sites as konachan tagged “scenic” or the like.

After selecting a nice-looking background just drag-and-drop it into the image. It might pretty damn large like this one, so zoom out (mouse wheel in Corel) and downscale it to fit. Select the new object with the object pic tool and you notice hollow boxes appear around it. Click and drag one of the corner boxes to shrink the image. It will automatically stay in the correct scale and once you’re done, anti-aliased for a smooth result. Once you’ve scaled it down to a good size, you can right click and select “Apply” to apply the changes. Note: Do not upscale if you think you overdid it a bit after applying as it will blur the image. Instead either press Ctrl-X or select Edit->Undo to do things over. As long as you do not apply the scaling changes, you can upscale and downscale all you like without any effect on the result quality.

There we go. Now if this is good enough for you, congratulations! Just add you blog’s name in there and you’re done. However, you might want to add some extra stuff like a character and this is where it gets a bit more tricky. Hold on to your butts, we’re going in.

Say hello to Mio. This is an example of many vector images you can find on moe.imouto. These PNGs contain only the vectored character with no background. Corel automatically recognizes this and you can just copy & paste the character object to your banner right off the bat. Couldn’t be simpler!

However you might not find a nice vector like this to work with. That’s when you need to rely on the complex mechanics of character extraction.

Let’s use a random pic of Tenshi. The source image is JPEG with only a background with no additional objects for you to select. What you need to do is use mask functions to manually extract the character out of the image background. Optimal source image has clear contrast between the character and the background – a dark character on a plain white background is a piece of cake but change the background to something more complex and you have trouble. You should try to find the biggest possible version of the image you want to extract from as it will give you a lot of breathing room. The bigger the extracted character is, the less you need to be concerned with the quality of extraction as downscaling with hide much.

Expand the tool menu for mask operations. I prefer the Magic wand tool. It will select an consistent area of more or less similar colors. Now take a close look at its settings.

These are the settings I generally use. The box with a plus highlighted with green means the mask selection is additive; that is, you can select several areas instead of just one. The one to the right is negative selection in additive mode; it does the same as normal additive but by removing existing selections in its area. If you apply it when no masks exist, it will create a mask that covers the entire image except the location where the tool was applied. Next, take note of the Tolerance-value. This determines how sensitive the tool will be with its selections. The higher the value, the more tolerant the tool will be to color changes. I prefer the range 8-12 in the easiest operations. Lastly, make sure the icon with a ring on the right is enabled as it means anti-aliasing.

The result of a bit too high value with magic wand. I have highlighted the parts where the tool selected something it shouldn’t have. However, redoing it with a lesser value may result in too rough edges in general, so it may be better to manually fix the few mistake spots.

Select Mask->Invert to invert the mask selection. Now you have the character selected instead of the background. Usually some straggling pixels appear around the edges of the character, use the negative additive mask tool to get rid of them. With a simple background as this, you can also just start out with the negative so you don’t need to invert at all, but I’ve found it easier to get better results the other way around whenever the background is even a bit more complex. Doing it the hard way is good for learning.

Time to correct the mistakes from before. Select the Brush mask tool. This is essentially the same as a basic paintbrush tool but just paints mask instead of color. Be sure to check the anti-aliasing icon and set the additive selection mode.

There, all fixed. The red line shows where the mask border used to be.

The extraction is done. You can turn the mask into an object by using this option or simply ctrl-c & ctrl-v it into your banner image.

Downscale and position. With a big downscaling ratio the result object appears a bit blurry. A sharpening tool can make it a bit better.

Go to Effects->Sharpen and select the tool you want to use. I generally use the two first ones, Adaptive unsharp and Directional sharpen. In this case it doesn’t really matter which one you use.

Do not go overboard with sharpening. The tools have a nasty side effect of increasing the contrast as well, making the character appear paler. Click to see the full image.

Sometimes a bit tinkering with the brightness-contrast-intensity-values can pay off. The can be found at Adjust->Brightness-contrast-intensity. In this case, reducing the brightness value a bit makes Tenshi stand out of the background better. Click to enlarge.

Time for the text. Before I settled with my current basic layout, I found text to be the hardest part. It’s not easy trying to determine the best spot for it right off the bat but personally I say stick with the left side since that’s where people usually first look when they access your site.

To turn an object like this, you can either select the appropriate options from the Objects-menu or click on the object with the pick tool once after it has been selected. The boxes around it will turn into arrows that you can use to spin the object around. By holding control you can constraint it to some cardinal directions.

I forgot to take screencaps of how I finalized the text, so here’s a bit of a rough example. To get the text to be translucent, you must apply an object transparency tool.

Select the Object transparency tool from the menu. Now click anywhere where you want the transparency gradient to start and drag to wherever you want it to end. Now where you started dragging is the last point where your selection is completely opaque and the point where you stopped is where it becomes completely transparent. The bar in the middle determines the mid-point of the transparency gradient.

There you have it. This is some of the elementary stuff and once you figure it out, very simple to use. Remember, image processing is easy enough for even a simple factory worker like me to understand. The basic knowledge is no rocket physics and makes a lot of thing considerably more convenient. I’m no expert at it but don’t hesitate to ask for help if you need it. Happy shoopan. In the other news, I will be leaving for the United States in a few days and won’t be back until 7th of March. I don’t think I will have any regular access to the internet during my time there so Jinx! will probaby be in a some sort of a hiatus (unless JTFish has something planned).