In this tutorial, we'll colorize an image that has a consistent pattern with equal colored parts and white/neutral parts, such as gingham or plaid. Since this is basically a technique that can be applied to a wide variety of images, I'll just use a plain square of scanned gingham material.
Technique step 1

I used this technique in my last two colorization entries “Dorothy Gale” and “Bessie in the Kitchen” - check them out to see the colored & neutral ginghams in the context of a whole image.

This is the original black and white scan:

The first step is to create a hue/saturation adjustment layer by clicking on the icon in the bottom of the layers palate that looks like a half black/half white circle. Choose hue/saturation.

In the dialog box, click “colorize” and slide the hue slider to the left to a green shade; slide the saturation slider to your desired saturation; leave the lightness at zero and click “OK”. Now with the adjustment layer active, change the mode from “normal” to “color” in the drop-down box at the top of the layers palate.

We have a nice, bright patch of gingham. Problem is, the lightest squares have a green tint as well. Real gingham doesn't have a strong color tint in the light squares.


Technique step 2
To solve this, the first step is to adjust the blending mode of the green hue/saturation layer. You can access the blending options dialog quickly by double clicking on any gray area of the layer in the layers palate. Another way is by clicking on the icon at the bottom of the palate that looks like a black circle with a cursive “f”.

In the blending options dialog, locate the “Blend If” options at the bottom. We only want to color the dark parts of the underlying gingham layer, so slide the white slider to the left. This takes out the green in the light parts, but it's choppy and abrupt. To fix this, hold down the alt key and click one side of the white slider and drag – it splits into two halves. The further apart they are, the more gradual the blend.

Here I've set the left side to 120 and the right side to 200.
To get this result:

Technique step 3
We still have one more step, because the white squares look too dull and gray. So create a second hue/saturation adjustment layer, again clicking the “colorize” box. The hue we pick will be the complementary color to our base color, because it will balance out to white. For green, the complementary color is red, so slide the hue all the way to the right. Lower the saturation quite a bit because we don't want pink squares, we want white/neutral. Leave the lightness at zero and click “OK”. Change this layer's mode to “soft light”.

Now, since we only want the light squares affected by this adjustment layer, open the blending dialog box and this time slide the dark sliders to the right. Again, split them using the alt key while clicking & dragging one side of the triangle.
Here, I have the left side set to 140 and the right side set to 200.

Here's our final green gingham patch with nice neutral background squares:

Red Variation
This page and the next will show red and blue squares using the same exact techniques.
Red hue/saturation adjustment layer:

After adjusting the blending sliders on the red hue/adjustment layer:

After adding and blending the complementary green/cyan hue/adjustment layer for the neutral squares:

Blue Variation
Blue hue/saturation adjustment layer:

After adjusting the blending sliders on the blue hue/adjustment layer:

After adding and blending the complementary yellow hue/adjustment layer for the neutral squares:

Orange Variation
This page and the next will show yellow and orange gingham squares. The technique is basically the same, except that we'll change the mode of both hue/saturation layers to “hard light” instead of “color” and “soft light”. You might find that the first step alone is sufficient since the light modes don't transfer color information to white areas. But if it is too saturated or blown out, either adjust the saturtion sliders or add the complementary hue/adjustment layer.
Orange hue/saturation adjustment layer:

After adjusting the blending sliders on the orange hue/adjustment layer:

After adding and blending the complimentary greenish blue hue/adjustment layer for the neutral squares:

Yellow Variation
Yellow hue/saturation adjustment layer (remember, set this and the second hue/saturation layers to "hard light"):

After adjusting the blending sliders on the yellow hue/adjustment layer:

After adding and blending the complementary blue hue/adjustment layer for the neutral squares:

I hope you'll find a variety of uses for this technique in your images besides gingham - such as plaid, striped or polka-dotted patterns.

Getting started

The first thing you need, quite obviously, are source-pics to work with. I had the luck of finding two great ones to use: this and this.

Don't forget to check the usage restrictions on every pic you use. The pic of the girl has a lot of them, can't be used outside deviantart without permission, can't be chopped in certain ways and since it is a child worth demands me to ask for permission to use it even if it was free.

Anyway. I opened them both in photoshop, rotated, mirrored and cropped the sky picture and there after placed the girl in a position I thought would fit nicely.
Then I set the opacity of the girl to 100% and hid it, we will need it later.

Layers
I am a very organized person when working with photoshop, and I use a lot of layer-groups. So the first thing we are gonna do is to create groups to organize our work.

The lower group is where we are gonna do the changes to the clouds later on. The upper group contains a picture of the girl, which I have desaturated, blurred and then set the blend mode to "screen". This will make the brighter parts of the girl shine through, which will make a great guideline and also enhance the cloud's form. I did some rough masking:

At this point we don't need it to be any better, but later on we will refine it.


In liquify we believe
Now it is time to alter the clouds. The most important thing. To my help I have the liquify-filter, which is directly under the filter-menu. Mastering this filter will open so many doors. Nowadays I use liquify in nearly everything I do. I copied the original layer and opened it in liquify.
To alter the image I used the forward warp tool (1). The crucial thing here is the settings (2). Play with them and learn what they do!

Before I opened liquify I unhid the top layer of the girl so With backdrop (3) checked it will now show the girl-layer, you don't see it on the picture here because the opacity of the backdrop is 0. Changing the opacity up and down will make it visible and give you a guideline to how to change the cloud.

When I was happy with the result (which I was in the above picture) I closed liquify and masked the liquify layer so the transition was smooth. The piece in the above picture is just the bottom left of the dress, so I continued by creating a new layer above it and pressed ctrl+shift+e to copy everything visible. Then I used liquify to make the parts just above the bottom left of the dresses. I continued working like this with layer after layer until I had made most of the girl. Now and then I also cloned in blue areas where I didn't want any clouds. The progress looked like this.

As you might notice, I don't have any head and some parts don't really look good. This is because during all these changes I have had a look at my screen-layer, which you will read about in the next page...

Screen
Yes. The screen layers only shows the brightest parts of the images. Since clouds have a very bright color, the screen layers blend very well with it. During the whole process described in the page before I now and then looked at the screen layer and masked it to enhance the clouds, or even be a new part of it. The result is this:

Some parts of the girl where darker than others, so actually I divided the screen layers in three, one for the dress, one for the torso and on for the head. All with different brightness/contrast to give a good balance of white.


Finishing touches
That's the basic technique and for a while I thought picture was finished here, but after leaving the computer for an hour and coming back I realised that the clouds around the girl could be made much more effectful. Using the same technique as for making the girl, liquifying and cloning, I made much more vivid clouds that were more integrated with the girl.

But still I was not happy. It looked to boring. As a final touch I used a white brush and the smudge tool to paint some clouds. Those clouds were way too white so I created a layer above which I filled with a color I sampled from the clouds and pressed ctrl+alt+g to link it to the handbrushed clouds. I also did some changes to the screen layer which contains the head. Using the smudge tool I made the hair "flow" more. And ta-da, we have the finished picture:

This tutorial describes one of many methods for saving photographs in compressed format for the highest quality browser display within the file-size limits requested by webmasters. Simply put, we’re going to take a 100-pound photograph and place it into a 20-pound bag. Or, maybe you could consider this “freeze-drying” a photograph, with only small quality loss.
The Stuff:

SUMMARY: This tutorial describes one of many methods for saving photographs in compressed format for the highest quality browser display within the file-size limits requested by webmasters. Simply put, we’re going to take a 100-pound photograph and place it into a 20-pound bag. Or, maybe you could consider this “freeze-drying” a photograph, with only small quality loss.

The screenshots in this tutorial are of Adobe Photoshop CS2, although almost every photo-editor has similar features. If you don’t yet own a photo editor, I strongly recommend you look into Adobe Photoshop Elements 3.0; it contains most of the photographic features found in the full-blown CS2 version (including “Save for Web” which we'll use here). Photoshop CS2 costs as much as a pretty good camera, and can take a long, long time to master. "Elements 3.0" costs a fifth as much and offers the great advantage of being able to look down your nose with incredible superiority at your friends who stole their full version; you can ask them if they use stolen software to write the copyright protections on their photographs…

Why yes, actually I DO get carried away a lot, why do you ask? Let’s get started, un-huh, un-huh….

After one completes the editing of his photograph, and gets it *just* right (or omits the stupid editing because it came out of the camera soooo good), you want to save it with the optimal quality allowed by the website-guy, so you can beat-the-hell out your opponents and impress the chicks (but maybe that's just me). So, here’s one method.

FILE > Save for Web (Not too hard so far, huh?) the SAVE for WEB Dialog Box

This is the Save for Web dialog box. It looks scary, but it’s a pussycat.
We’re going to go around this photo, counter-clockwise (just because I’m just that kind of guy) and put these five circles to work for us.

#1) This is where we’ll set the size of our image, so let’s talk about that for a second.

I’m only going to remind you of something you already know, size matters. In photo contests, your image must be large enough to be seen clearly or you don’t have a snowball’s chance. Ever bring up a contestant’s image to discover it’s about three inches wide and two inches tall? Enough said. On the other hand, have you ever seen an image you have to scroll around on the screen to view? Sucks as well. If you make your photographs too large or too small, people will laugh at you behind your back, you will bring shame on your entire family tree, and your dry cleaning will always be late.

So, let’s assume almost everyone has a screen of at least 1024 pixels high and 768 pixels wide. If we subtract a fudge-factor for the scroll bars (at the side) and the menu bars (at the top); then 900 by 600 seems to be a pretty good guess at the minimum DISPLAYABLE screen size for our photographs.

To keep our entire photograph on the screen, we scale the LARGEST side of our photograph to the dimension above (either 900 OR 600); if a portrait format (taller than it is wide) scale the height to 900 *OR* we’ll scale the width to 900 in the case of a landscape format (wider than it is tall). We can let the computer figure out the rest (after all, it IS a computer).

We do that by clicking on the IMAGE SIZE tab on the right (#1) and entering either 900, or 600, in the appropriate box. Make sure “constrain proportions” box is checked and click “APPLY”.
There. I knew you could do it.
Continued
#2) Inside the red circle marked #2 is the zoom factor. I recommend you set this to 200%, which doubles the viewing size (it does not change the actual size, we’re only zooming), so at the end of step #5, we can scroll around and verify the quality is acceptable. If we scroll MORE than 200% we’re going to see things that are just not visible in normal viewing mode and therefore irrelevant.

On around the counter-clockwise circle….

#3) Click the 2-UP tab. 2-up is not a soft drink or ghetto talk (I just could NOT think of anything funnier to put there. Sorry), it just allows us to do a side-by-side comparison between our newly optimized version and our original photograph. See, step 3 was duck soup, a piece of cake, a walk in the park; getting carried away again...

#4) Set the #4 box to “JPEG”. JPEG was made for photographs, actually that’s what the “P” in JPEG stands for, photographic. If you are doing line drawings or illustrations, JPEG is not the best choice. We photographers have a compression format that’s our very own. Awww….


Continuation of "Continued"
#5) Click the little arrow marked #5 (from the previous picture) and you’ll get this:
(I’m hell on those little red circles, huh?)

Click on “Optimize to File Size” (marked #2), and you’ll get this box:
It’s a good idea to reduce the file size you want by 2% and enter that value in the box. We reduce the size by two percent so we don’t have to concern ourselves with all that propeller-hat-computereeze stuff. Our file will be under the desired size no matter what the computer-geeks throw at us. We’re artists; we’re above that…..

So in this case, I wished to make the best possible image in fewer than 200 KB, so I entered 196.

All right, compare the two images on the left and the right in the 2-UP (still, no better joke) view, and look for “show-stopper” errors. You won’t have to scroll very long; if they are there you’ll see them right off. The chances are very high that you’ll not be able to see much difference in quality between the images at all. If you do see “swirleys” (that’s a technical term I just made up), then reduce the physical size of your image about ten percent and try it again. But don’t be too picky here either; when it comes to looking for JPEG compression errors, you ARE your own worst critic. Remember, no one else will be zooming in on your image at 200% looking for JPEG artifacts. Well, maybe there’s a few that would; but I meant NORMAL people.

Now, just press “SAVE”. BUT DON’T SAVE IT TO THE ORIGINAL LOCATION, give it a new name, it’s useless for anything other than kickin’ butt in web-photo contests. Giving it a new name prevents us from writing over our original image. I recommend you start a folder called “Saved for Web” and put these images there, so they don’t get mixed in with your real photographs. Also, end the filename (not the file extension,Einstein) with WEB, so they can easily be spotted (i.e. thisphotoWEB.jpg). Remember, we’re creating images not much larger than your cell phone produces, so keep them separate, OK? I know where you live.


That’s it. Now, you know everything I know (well, plus what you knew before). I hope this works well for you; it is the way photographs are professionally sized for web sites. Think of me sometime while you’re polishing your trophies.

If you have problems, ..rather if you have "Save for WEB" problems, write me. I'd sure be glad to help.