Kalanart Blogs











I just went through this tutorial on Lynda .com about making masks, layering, and selecting. It was time-consuming but it’s only the icing on the cake I am sure. I can’t post many graphics due to Lynda.Com’s terms of service,; you have to subscribe. I am subscribing due to my class requirements but it’s great!

I can tell you what we learned about channels and masks and selecting:We selected a woman’s face and hair blowing in the wind in strands and then put a desert background behind it. We did this by creating a color range selection which is in the Select menu and then selecting an area of base color with the eyedropper tool when The Color Range Dialog box opens up. I am going to go over the color range command first, then tell the story of the selected woman.

The preview in the box is black and white: black means no pixels are selected, white means selections were made. Any gray areas are going to lack detail in your selection. The Color Range Dialog Box is quirky. It is not available for 32-bits-per-channel images, as it says in the help documentation.

The first color you click on is your base color. Add base colors by shift+clicking You remove colors by alt+clicking(Windows) or Option+Click(Mac). Selecting the eyedropper with the + sign adds to the selection, therefore the -sign deletes from the selection.Shift+click in the dialog box preview window as well. You are granted one undo (ctrl+Z) in the dialog box. The “Fuzziness” Slider is the amount of luminance levels you want to select when you click, similar to the tolerance levels. A higher number means a higher amount of colors you can select from 0-200, incrementally from the point you click. Select your base color before messing with the Fuzziness Slider. The “Fuzziness” value is different from tolerance in that it’s selections are, “Organic,” as Deke McClelland of Lynda.com says in his Tutorial: Photoshop CS3: Channels & Masks: The Essentials. I recommend you start with Photoshop CS3: One-on-One: The Essentials first, and finish the “One-on-One” Series if you’re a beginner. What Deke means by Organic is that it partially selects pixels based on the settings in a relative way; It’s not an absolute selection with jagged edges.

The color Range Command also selects “non-adjacent” pixels, unlike the Magic Wand Tool.You can invert the selection by checking the box under the “cancel” button. There are two radio buttons at the bottom of the preview window labeled “Selection” and “Image”: Selection shows you the mask it’s creating and Image shows the full color image in the preview window.

Color Range Dialog Box PS CS3 with nothing really selected

Color Range Dialog Box PS CS3

When you click “OK” it generates a marching ants selection the is actually just a 50% representation of your selection. In order to view your selection, you have to create a channel mask/alpha channel by clicking on the mask button (the one that is a square with a circle in the middles) on the bottom of the Channels Palette and it generate a channel mask. View this by turning off the other channels and then make a selection and a mask with the wand and compare the masks and you can see the difference in the selections. Use a Gradient Background to select an area with both and you’ll see how the color range tool flows naturally with the gradient.

Color Range With Selection of Colors

Color Range With Selection of Colors

By default, the Color range Command is set to use the foreground color set in your toolbar as the base color when you first open it, so if it is set to black the you will see black when the preview image opens up at first. You can change this by canceling out of the Color Range and choose the eyedropper tool and click in your background color of choice and click inside the foreground button on the bottom of the toolbar.

For a quick full color preview inside the preview of the dialog box, click+ctrl in the window. (just a handy tidbit).

The Selection Preview Drop-Down Menu allows you to preview your images in several ways:
1.Grayscale: 256 shades os grayscale in the main window.

2.Black Matte: Image against a Black matte background.

3. White Matte: Image against a Black matte background.

4.Quick Mask: Quick Mask Mode is a whole other topic, but it shows a rubylith overlay on your non-selected parts and the true colors on the selected in the main window.

The Drop-Down Menu at the top is the Color Range Selection Menu in which you can select a color range to create the selection from that automatically and you cannot edit the selection with these options. The “Out of Gamut” option only works with RGB and Lab images, and cannot be printed. BUT you can select one color range and then click ok and save it and then go back in and sample or choose another color range to add to the selection.

Color Graph

Color Graph

Right click and copy the image above and save it as .jpeg in photoshop. Use the select drop-down menus and view each one and you can see what colors it selects. This color wheel is all the RGB and CMYK colors together, 60 degrees apart. The colors toward the center gray out and lose their saturation. The select menu has all the colors on the wheel plus highlights, midtones, and shadows. Don’t forget “Out-of-Gamut”! which cannot print. It’s nice for analysing purposes but I haven’t had a use for them yet.

Using the Color Range Command you can make a lot of great selections which you may have go in and refine, but it is a far better way to select than any other method.

Once you’ve made your selection, with it active you can click on the mask button on the Channels Palette and create a mask. There are several routes you can take from there. You could save your selection, which I recommend. Then you could enter Quick Mask Mode for more refinement, or use the refine edges command with a selection tool active(in the options bar is the button to refine edges).

If you want to get rid of the background completely you could load the selection and ctrl+drag to another background then hold shift before you let go of the mouse to align the images properly.OR

One could enter “Quick Mask Mode” by pressing the icon at the bottom of the toolbar that commonly represents masks throughout Photoshop, and then paint away the background you don’t want using the paintbrush or by selecting areas and pressing delete or backspace. The selection could be made with many other tools, like the lasso, or the marquee tools, or even the quick select tool depending on your needs. The Quick Maks Mode is beyond this Post, I want to go into the selecting technique used I learned to select hair strands and make them look as natural as possible using The Channels Palette.  See My next Post!



{07/04/2008}   Xhtml & CSS

Original Template

I’ve been up all night working on my final Project for this class I am taking this summer called a “Bargain Blast” Website. I used a template with css from OpenSourceDesigns.org called Lotus

that is licensed under The Creative Commons Attribution 2.5 License. I altered the layout by switching the #sidebar div to float right, and the #content div left. I called my cyber-shop “Vibe Quest”: a place to request good thought, energies, and vibrations to be sent your way by a (imaginary in this case)network of people. The assignment was to set up a page as a cyber-shop and sell anything free or under $10.00 with three reasons listed as to why you need this service or product, a link back to the school’s catalog, a link to the class’s homepage, an image link, an image map, and an email link. It had to have two graphics at least. A fake address was also to be added. It had to have a background color or graphic as well.

As I said I altered the template by switching the float attributes on the content and the sidebar. I like my menus on the left, as it makes more sense to me being right handed mostly. Here’s a snapshot of the finished product which I’ll explain following the image:

vibe_quest250x

The top image came with the template, as is licensed under Creative Commons (The Lotus). The two mandalas are actually botanical/Flower Mandalas. One was taken from “The Flower Mandalas Project”, which is website dedicated to photographing Mandalas in flowers. The pink and red is an Iris Germanica ii supposedly. It’s a small image map. The right side links to The Mandalas Project’s Website and the left links to a blog called Goodness Gracious which is really good reading on life and the human condition, as well as how to find peace and happiness.

The Top Purple One was was taken from Wikipedia and it links to The Article On Wikipedia. it ’s up on my website: Vibe Quest.

The title bars are images linked through the css. I had to use hard links, soft/relative never work for me. I put a bunch of links to related websites. Check it out!!



et cetera