Email Color Scheme FAIL

Are you familiar with FailBlog? This could be a worthy submission.

Color Me Happy

Light, as some of you science folks probably already know, is a pretty tricky thing. It is often described as waves or particles or radiation or energy. We see it reflected off the surfaces of objects or projected from computer monitors. Light is received by our optic nerves and transmitted to the brain which interprets it. Different wavelengths of visible light are interpreted as different colors. While physics or physiology are important, in this class we're mostly concerned with how we interpret and use color in our layouts and designs.

Thevisible spectrum (above) can be visualized as a rainbow: red, orange, yellow, green, blue, violet. NASA image, Wikimedia Commons

We see color that is reflected from an object. If all colors of the visible spectrum are reflected, we perceive the object as white (all the colors of the spectrum combine to make white light). If only the red light waves are reflected, we perceive the object to be red. If little or no light is reflected, we perceive the object to be black. Reflected light is described as subtractive (if you mix colors together, color gets absorbed, subtracted or taken away.) Remember mixing all your finger paints to make that yukky brown? That's subtractive.

Subtractive Color Model (RYB)

Stated above, but we'll repeat here for emphasis: We see color that is reflected from an object. If all colors of the visible spectrum are reflected, we perceive the object as white (all the colors of the spectrum combine to make white light). If only the red light waves are reflected, we perceive the object to be red. If little or no light is reflected, we perceive the object to be black. Reflected light is described as subtractive (if you mix colors together, color gets absorbed, subtracted or taken away.) Remember mixing all your finger paints to make that yukky brown? That's subtractive.

The Visible Spectrum and a simple RYB (Red-Yellow-Blue) Color Wheel

Another RYB Color Wheel,
"Primary, secondary, and tertiary colors of the RYB color model" —Wikipedia

 See more color wheels here.

Color Relationships (RYB)

Primary colors are red, blue and yellow. Think of them as prime numbers. They are as simple as it gets. The secondary colors are a mixture of two primary colors: red + blue = violet. Equal mixtures of primaries (or secondaries) makes a neutral(ish) gray.

RYB Color Model -- Primaries, Secondaries and Neutral

Now refer back to the color wheel. Colors opposite each other on the color wheel are considered to be complementary*. They have nothing in common. For instance red is complementary to green, green is made of the primary colors blue and yellow which have nothing in common with red. Complementary colors seem to vibrate when placed next to each other and have an energizing and sometimes shocking effect on a color scheme.

Colors near each other (adjacent) on the color wheel are called analogous. They are harmonious color combinations because they are similar or have something in common. For example, violet, blue and green are analogous because they have blue in common.

Another way to think of color is in terms of temperature. Warm colors are red, orange and yellow. Cool colors are green, blue and violet.

Another word for color is hue. If a color is fully saturated, it is at its most intense. If it is desaturated, it is less intense. "Baby blue" is less saturated than "cobalt blue."

A tint is a color that is a color that has been lightened, as if it had white added to it. Pink is a tint of red. A shade is a color that is darkened. "Navy blue" is a shade of blue.

White and black are neutrals. White reflects all the wavelengths of light, and black absorbs all. Grays can be neutral if composed of equal amounts of color. Sometimes grays can lean toward a color, and be considered warm or cool accordingly (blue-gray, for example.)

Here is Photoshop's color picker with examples of saturated and desaturated colors, tints, shades and neutrals:

Photoshop's Color Picker

Wikipedia explains this better than I can:

In colorimetry and color theory, colorfulness, chroma, and saturation are related but distinct concepts referring to the perceived intensity of a specific color. Colorfulness is the difference between a color against gray. Chroma is the difference of a color against the brightness of another color which appears white under similar viewing conditions. Saturation is the difference of a color against its own brightness. …

A highly colorful stimulus is vivid and intense, while a less colorful stimulus appears more muted, closer to gray. With no colorfulness at all, a color is a “neutral” gray (an image with no colorfulness in any of its colors is called grayscale). With three attributes—colorfulness (or chroma or saturation), lightness (or brightness), and hue—any color can be described.

Saturation is one of three coordinates in the HSL and HSV color spaces. Note that virtually all computer software implementing these spaces use a very rough approximation to calculate the value they call "saturation," such as the formula described for HSV and this value has little, if anything, to do with the description shown here.

The saturation of a color is determined by a combination of light intensity and how much it is distributed across the spectrum of different wavelengths. The purest color is achieved by using just one wavelength at a high intensity, such as in laser light. If the intensity drops, so does the saturation. To desaturate a color in a subtractive system (such as watercolor), you can add white, black, gray, or the hue's complement.

Colors also have cultural, social and emotional baggage. There was a time when you would seldom see anything but red, white and blue used in political advertising because of the patriotic sentiment that the designers are trying to evoke. Likewise, blue is an unappetizing color so it might be used judiciously in food packaging. On the other hand, reds, yellow, browns and greens — colors which we readily associate with edible items — are frequently employed in food advertising and packaging. Think about that the next time you have a blue M&M or sports drink.

Colors are subject to trends, too. Every so often fashionistas elevate certain colors while others fall out of favor. I wouldn't expect to see a trendy new house appointed with avocado green carpet and harvest gold appliances like those of my 1970s childhood.

Additive Color Model (RGB)

Many of us -- artists, painters, commercial printers, designers of printed products, and so forth -- work with the subtractive (RYB) color model described above. As users of computers and mobile devices, we need to grasp RGB representation (in the additive color model) and learn to understand its relationship to RYB. 
If we project colored light, we will discover that it behaves differently than reflected light (paint, for instance). In this case, the prime units of color are red, green and blue. Your TV screen and computer monitor use this scheme to represent colors and thus pictures. Grab a magnifying glass and put it up to the monitor and you'll see. (Really! It's cool!) 

This model of representing color is known as RGB.

RGB Color Model -- Primaries, Secondaries and Neutral

When red, green and blue light (RGB) is mixed equally at full intensity it creates white light. This is known as additive color. By adding the red, green and blue light together you create white light, the full visible spectrum. On the other hand, if you take light away, it becomes black --- the absence of light.

Notice that the combinations of red, blue and green don't make the same colors as you might expect them to based on the subtractive (RYB) color wheel. Red and green light mixes to make yellow light.

Printing Color Images (RYB)

Full color images are printed by what's known as four color process (or process color). Generally, just four colors of ink are used to approximate the colors we see in the visible spectrum: Cyan (blue), Magenta (red), Yellow and Black or CMYK (K = "key" or black). There are special instances where additional colors can be added during printing.

A full color image, such as the one at right is separated into the four colors below for process printing. These separations are made into negatives which in turn are used to make printing plates. Each of the plates is used to print its corresponding color, and the colors are registered or aligned so that the colors match up and create the "full color" image we see on the page.

CMYK Composite image

Below is a representation of each separation of the full color picture above. As each ink is printed on the page, the colors combine to create the full color image. Think back to the color wheel and the primary colors... blue...red...yellow.... Since there is a lot of green in the foliage, it's natural to see lots of yellow and blue in that area. But what you might find enlightening is the amount of magenta and black there too. These colors help make shadows and highlights and give depth and richness to the color of the foliage.

CMYK Separations: Cyan, Magenta, Yellow, Black

Process printing inks are semi-transparent which means that they allow some of the other inks to show through. Inks are also printed as halftones (see below), so that some of the paper will show through too.

And even though we talk about the color building up, keep in mind that it's really "subtracting" light. Dark colors (created by densely printed inks) absorb more light rays than they reflect and thus subtract light that your eyes would otherwise see.

How process color builds up to appear to be "full color"

Halftones**

Halftone screens consist of dots that control how much ink is deposited at a specific location. Varying their size and density creates the illusion of variations of gray or continuous color. For a process color image (four color or full color), four halftone screens are used: cyan, magenta, yellow, and black-one for each ink used in the printing process.

Three examples of color halftoning with CMYK separations.
From left to right: The cyan separation, the magenta separation, the yellow separation, the black separation, the combined halftone pattern and finally how the human eye would observe the combined halftone pattern from a sufficient distance. (Wikipedia)

In traditional print production, a halftone is produced by placing a halftone screen between a piece of film and the image and then exposing the film. Digital halftoning uses a raster image or bitmap within which each pixel which may be on or off, ink or no ink.

Get out that magnifying glass again and take a close look at newspaper and magazine photos to see the tiny dots which create the "photo." Note also how high quality glossy magazines use a finer screen (dots) and newspapers use a coarse screen. This is because of the type of paper, printing processes and machinery unique to each medium.

Grayscale image, halftone screen with black ink.
Light areas have smaller dots, dark areas have larger dots.

CMYK color image, halftone screens with process ink
at different screen angles; correctly registered dots form rosettes.

Spot Color (Pantone or PMS Colors)

Sometimes you might want to just use a single color of ink, or perhaps black plus one color called a spot color. You'll be specifying a Pantone or PMS (Print Matching System) color. Printers have books of color swatches from which to select these colors. These colors come either ready-mixed or are custom-mixed by the printer. 

Pantone colors libraries are available in InDesign, Illustrator and Photoshop. These libraries, as well as specific CMYK colors, allow designers and printers to speak the same language because what is baby blue to you might be a horse of a different color to your printer.

Models vs Modes of Color

Until now we've been discussing color models. Models are methods of defining color, whereas modes are particular to Photoshop, specifically, how the application defines color. Here is a list of Photoshop's modes:

• Bitmap
• Grayscale
• Duotone
• Indexed Color
• RGB Color
• CMYK Color
• Lab Color
• Multichannel

In the case of RGB and CMYK, the color models share the same name as the color modes. In all other cases, the modes are specific to Photoshop. In our work, we will concern ourselves with only these modes:

• Bitmap - uses only two colors, black and white, to represent images. (Note: This is not the bitmap file format ".bmp" you might see generated from some PC applications.)
• Grayscale - uses 256 shades of gray.
• RGB - based on the primary colors of red, green and blue. This is how your monitor displays colors and how scanners scan images. After a picture is scanned, it needs to be converted to CMYK for printing.
• CMYK - based on the Cyan, Magenta, Yellow and Black process printing model. This is the color mode used for printing color images.

InDesign and Illustrator create images in either RGB or CMYK modes.

Color gamuts (Photoshop)‡

A gamut is the range of colors that a color system can display or print. 

The term gamut was adopted from the field of music, where it means the set of pitches of which musical melodies are composed ….

In color theory, the gamut of a device or process is that portion of the color space that can be represented, or reproduced. Generally, the color gamut is specified in the hue–saturation plane, as a system can usually produce colors over a wide intensity range within its color gamut; for a subtractive color system (such as used in printing), the range of intensity available in the system is for the most part meaningless without considering system-specific properties (such as the illumination of the ink).

When certain colors cannot be expressed within a particular color model, those colors are said to be out of gamut. For example, while pure red can be expressed in the RGB color space, it cannot be expressed in the CMYK color space; pure red is out of gamut in the CMYK color space.

A device that is able to reproduce the entire visible color space is an unrealized goal within the engineering of color displays and printing processes. While modern techniques allow increasingly good approximations, the complexity of these systems often makes them impractical.

While processing a digital image, the most convenient color model used is the RGB model. Printing the image requires transforming the image from the original RGB color space to the printer's CMYK color space. During this process, the colors from the RGB which are out of gamut must be somehow converted to approximate values within the CMYK space gamut. Simply trimming only the colors which are out of gamut to the closest colors in the destination space would burn the image. There are several algorithms approximating this transformation, but none of them can be truly perfect, since those colors are simply out of the target device's capabilities. This is why identifying the colors in an image which are out of gamut in the target color space as soon as possible during processing is critical for the quality of the final product.

— http://en.wikipedia.org/wiki/Gamut

The visible spectrum of colors (those able to be seen by the human eye) is wider than the gamut available in any color model:

Color gamuts: A. Lab color gamut
B. RGB color gamut C. CMYK color gamut

Among the color models used in Photoshop, Lab has the largest gamut, encompassing all colors in the RGB and CMYK gamuts. Typically, RGB gamuts contain the subset of these colors that can be viewed on a computer or television monitor (which emits red, green, and blue light). Therefore, some colors, such as pure cyan or pure yellow, can't be displayed accurately on a monitor.  

CMYK gamuts are smaller, consisting only of colors that can be printed using process-color inks. When colors that cannot be printed are displayed on-screen, they are referred to as out-of-gamut colors — that is, outside of the CMYK gamut. (See Identifying out-of-gamut colors, Photoshop.)

A comparison of RGB and CMYK color spaces. The image demonstrates the difference between the RGB and CMYK color gamuts. The CMYK color gamut is much smaller than the RGB color gamut, thus the CMYK colors look muted. If you were to print the image on a CMYK device (an offset press or maybe even a ink jet printer) the two sides would likely look much more similar, since the combination of cyan, yellow, magenta and black cannot reproduce the range (gamut) of color that a computer monitor displays. This is a constant issue for those who work in print production. Clients produce bright and colorful images on their computers and are disappointed to see them look muted in print. (An exception is photo processing. In photo processing, like snapshots or 8x10 glossies, most of the RGB gamut is reproduced.)
— http://en.wikipedia.org

:: :: ::

*com·ple·men·ta·ry
Pronunciation: "käm-pl&-'men-t(&-)rE
Function: adjective
1 : relating to or constituting one of a pair of contrasting colors that produce a neutral color when combined in suitable proportions
2 : serving to fill out or complete
3 : mutually supplying each other's lack
4 : being complements of each other
5 : characterized by the capacity for precise pairing of purine and pyrimidine bases between strands of DNA and sometimes RNA such that the structure of one strand determines the other
- com·ple·men·ta·ri·ly /-'men-t(&-)r&-lE, -(")men-'ter-&-lE/ adverb
- com·ple·men·ta·ri·ness /-'men-t(&-)rE-n&s/ noun
- complementary noun

com·pli·men·ta·ry
Pronunciation: "käm-pl&-'men-t(&-)rE
Function: adjective
1 a : expressing or containing a compliment b : FAVORABLE
2 : given free as a courtesy or favor
- com·pli·men·ta·ri·ly /-'men-t(&-)r&-lE, -(")men-'ter-&-lE/ adverb

source: http://m-w.com


** Adapted from Adobe Photoshop Help.

‡ Gamut adapted from Adobe Photoshop 7.0 Help


More about Color on Wikipedia (try to not get lost)

• Color Theory
• Additive Color
• Subtractive Color
  
• Primary Colors 

What would you say about the color scheme of this logo?
What relationships do these colors have to each other?
Cool? Warm? Complementary? Analogous?

 

Paletton: An Interactive Online Color Schemer

Choosing and identifying color schemes is a click-and-drag away. Paletton's interactive online color scheme generator features a range of color schemes and options. It also has a simulator for several types of color-blindness so you can choose colors that work together no matter the viewer's perception.

http://paletton.com/

Paletton's Colorpedia and Color Schemes pages are good resources for your Color Theory worksheet.

This type of interactive color schemer can be utilized in the other direction too, giving those with color-vision impairment the ability to see relationships of colors on an interactive color wheel and choose colors using RGB hex numbers.

Resolution, Resizing and Resampling

Computer graphics fall into two main categories: bitmap and vector images. Let's review the difference between the two. Understanding this will help as you create and edit digital images.

Bitmap and vector review


Photoshop and other paint and image-editing programs generate bitmap images, also called raster images. Bitmap images use a grid (the bitmap or raster) of small squares known as pixels to represent images. Each pixel is assigned a specific location and color value. For example, a bicycle tire in a bitmap image is made up of a mosaic of pixels in that location. When working with bitmap images, you edit pixels rather than objects or shapes.


Rasterizing is a process of converting vector images to bitmap images.


A bitmap image is resolution-dependent meaning that it contains a fixed number of pixels. Bitmap images are the best choice for representing subtle gradations of shades and color — for example, in photographs or painted images — to represent its image data. As a result, a bitmap image can lose detail and appear jagged if viewed at a high magnification on-screen or printed at too low a resolution.

High resolution images offer you the best quality for printing photos. Examine a photo's image size for its dimensions and resolution before you place it in your layout and enlarge it. (To find this information in Photoshop, go to Image Menu > Image Size.) See below for a comparision of a low resoluion and a high resolution image enlarge four times (400%).

Low Resolution

72 dpi enlarged 400%

High Resolution

300 dpi enlarged 400%

Drawing programs such as Adobe Illustrator create vector graphics, made of lines and curves defined by mathematical objects called vectors. Vectors describe graphics according to their geometric characteristics. For example, a bicycle tire in a vector graphic is made up of a mathematical definition of a circle drawn with a certain radius, set at a specific location, and filled with a specific color. You can move, resize, or change the color of the tire without losing the quality of the graphic.


A vector graphic is resolution-independent -- that is, it can be scaled to any size and printed on any output device at any resolution without losing its detail or clarity. As a result, vector graphics are the best choice for type (especially small type) and bold graphics that must retain crisp lines when scaled to various sizes (logos, for example). Because computer monitors represent images by displaying them on a grid, both vector and bitmap images are displayed as pixels on-screen.


Resolution, Resizing and Resampling

• Resizing does not change the file size, but changes the relationship of the file dimensions and dpi. You can resize the image to specified pixel dimensions or to a percentage of the original size.

• Resampling changes the pixel dimensions (changed the numbers of pixels in the file) and thus the file size -- see below.

Resizing


Start with a 1x1-inch file with a resolution of 300 dpi (Fig. A). Its file size is 264k.

Fig. A

Increasing the width and height dimensions but not resampling leave the file and data at its original size of 264k (Fig. B).

Fig. B

Resampling


Changing the pixel dimensions (and therefore display size) of an image is referred to as resampling.


When you downsample (or decrease the number of pixels), information is deleted from the image. You can also upsample, or increase the number of pixels, but it doesn't necessarily improve the quality of the image. When Photoshop upsamples it interpolates new pixels based on existing data.


Downsampling


Start with that same 1x1-inch file with a resolution of 300 dpi at 264k (see Fig. A above). Constraining proportions and resampling the image to 72 dpi will decrease the file size to 15.2k (Fig. C). A lot of file information was lost in this process.

Fig. C

Upsampling
When you resample up (or increase the number of pixels by either changing dimensions or resolution), new pixel information is added based on color values of existing pixels. Changing pixel dimensions  affects the size of an image and also can affect its quality.


Begin with a 1.5x1.5 inch file with a resolution of 72 dpi.

Resample (upsample) the image to 6x6 inches.

 Left, upsampled image; right, detail of upsampled image showing image quality.

Take note of the increase of file size, but not necessarily of image quality. Photoshop interpolates (inserts) new pixels for the increased size (or resolution) based on existing data. However, the image quality may not be adequate since Photoshop is essentially guessing at the new data.



To change dimensions of an image


1. In Photoshop, resize an image by choosing Image menu > Image Size.


2. To maintain the current proportions of pixel width to pixel height, select Constrain Proportions. Leave Resample Image box unchecked. Constrain the image proportions by selecting:

• Width, to constrain proportions using the new width value.
• Height, to constrain proportions using the new height value.
• Percent, to constrain proportions while resizing the image by a percent value.

3. Click OK.


Read more about pixel dimensions and resolution from the experts at Adobe: http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WS75D24624-A761-40b6-832E-8AB0E2383C90.html

Exerpted and adapted from Adobe Photoshop Online Help.

Photoshop File Formats

Photoshop's file format menu is lengthy, but don't let it intimidate you. Each option has it purpose, and knowing what what they are will keep you from becoming overwhelmed.

First, "file format" refers to how an image file is saved, and is determined by how the image is to be used. In Photoshop, when you choose "File / Save" (or "Save As" or "Save a Copy") you will see the menu below.

The end use of a file will determine the best file format choice. If you don't know what your end product will be, stick with the native Photoshop (.psd) format, then "Save As" when you figure it out. The annotated charts below discuss the most commonly used Photoshop file formats.

Common File Formats for Graphic Applications

File Format	File Extension	Notes
Photoshop	.psd	The native Photoshop format -- supports Photoshop's layers and transparency. Good option for the CS workflow.
Photoshop EPS	.eps	Encapsulated Postscript File -- supported by Adobe CS but not necessarily by all other graphics applications. Supports Paths, but not transparency.
PDF	.pdf	Portable Document Format -- a versatile cross-platform format.
TIFF	.tif	Tagged-Image File Format -- a cross-platform format that supports lossless compression (no image data is discarded as it is saved; see JPG below). Supports transparency, but not Paths.
Note: Photoshop, EPS, TIFF and PDF formats are supported by all Adobe Creative Suite applications.

Common File Formats Used on the Web

File Format	File Extension	Notes
GIF	.gif	Prounounced "jif" or "gif," it stands for Graphics Interchange Format. Good choice for line art or art with limited palettes, animation; supports transparent backgrounds.
JPG or JPEG	.jpg	Joint Photographic Group Experts File -- a good option for displaying or sharing images on the web or via email, but degrades image through "lossy" compression. Image data is discarded in order to compress file size, that is, to make the file size smaller. Each time a file is saved in jpg format it continually degrades the image.
PNG	.png	Portable Network Graphic. It was developed an alternative to the GIF format and supports lossless data compression and transparent backgrounds. Does not support CMYK colorspace.
Note: Choose "File / Save for Web" when saving images for use on the Internet. For more details, see Photoshop's Help menu.

Other File Formats

File Format	File Extension	Notes
Bitmap	.bmp	Windows-compatible format; lossless (loses no data when saving, unlike lossy formats such as JPG).
PCX	.pcx	A Windows file format.
PICT	.pct	A Macintosh format.
Pixar	.pxr	For use with high-end 3-D imaging programs.
PNG	.png	An alternative to GIF format. See above.
Raw	.raw	Saves files as a stream of bytes, good only for moving between applications and platforms.
Scitex	.sci	For high-end graphics, such as super-high resolution drum scans.
Targa	.tga	For systems using Truevision® video board.

— Adapted and updated from: Teach Yourself Photohop 4 in 14 Days. D. Bront Davis, Steven Mulder, Carla Rose, Hayden Books, 1997.

Further reading

http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WSfd1234e1c4b69f30ea53e41001031ab64-7784.html

http://www.creativepro.com/article/graphics-fundamentals-understanding-photoshop-file-formats-

http://ezinearticles.com/?Photoshop-Files-and-Formats&id=36741

About Photoshop Masks

When you select part of an image, the area that is not selected is “masked,” or protected from editing. So, when you create a mask, you isolate and protect areas of an image as you apply color changes, filters, or other effects to the rest of the image. You can also use masks for complex image editing such as gradually applying color or filter effects to an image.

Examples of masks
A. Opaque mask used to protect the background and edit the butterfly
B. Opaque mask used to protect the butterfly and color the background
C. Semitransparent mask used to color the background and part of the butterfly

Masks are stored in alpha channels. Masks and channels are grayscale images, so you can edit them like any other image with painting tools, editing tools and filters. Areas painted black on a mask are protected, and areas painted white are editable.

Use Quick Mask mode to convert a selection to a temporary mask for easier editing. The Quick Mask appears as a colored overlay with adjustable opacity. You can edit the Quick Mask using any painting tool or modify it with a filter. Once you exit Quick Mask mode the mask is converted back to a selection on the image.

To save a selection more permanently, you can store it as an alpha channel. The alpha channel stores the selection as an editable grayscale mask in the Channels panel. Once stored as an alpha channel, you can reload the selection at any time or even load it into another image.

Selection saved as an alpha channel in Channels panel

Note: You can mask or hide parts of a layer using a layer mask.

You can create a new alpha channel and then use painting tools, editing tools, and filters to create a mask from the alpha channel. You can also save an existing selection in a Photoshop image as an alpha channel that appears in the Channels panel. See Save and load selections.

About layer and vector masks

You can use masks to hide portions of a layer and reveal portions of the layers below. You can create two types of masks:

• Layer masks are resolution-dependent bitmap images that are edited with the painting or selection tools.
  
• Vector masks are resolution independent and are created with a pen or shape tool.
  
  
  Layer and vector masks are nondestructive, which means you can go back and re‑edit the masks later without losing the pixels they hide. Read more about nondestructive editing here.
  
  In the Layers panel, both the layer and vector masks appear as an additional thumbnail to the right of the layer thumbnail. For the layer mask, this thumbnail represents the grayscale channel that is created when you add the layer mask. The vector mask thumbnail represents a path that clips out the contents of the layer.
  
  
  Note: To create a layer or vector mask on the Background layer, first convert it to a regular layer (Layer > New > Layer from Background).
  

  Masking layer

  A. Layer mask thumbnail B. Vector mask thumbnail

  C. Vector Mask Link icon D. Add Mask

You can edit a layer mask to add or subtract from the masked region. A layer mask is a grayscale image, so areas you paint in black are hidden, areas you paint in white are visible, and areas you paint in shades of gray appear in various levels of transparency.

Basket layer mask: Background painted with black;
description card painted with gray;
basket painted with white

A vector mask creates a sharp-edged shape on a layer and is useful anytime you want to add a design element with clean, defined edges. After you create a layer with a vector mask, you can apply one or more layer styles to it, edit them if needed, and instantly have a usable button, panel, xr other web-design element. 

— From http://helpx.adobe.com/photoshop.html.
Read more about Layer Masks at http://helpx.adobe.com/content/help/en/photoshop/using/masking-layers.html and http://helpx.adobe.com/content/help/en/photoshop/using/masking-layers.html

Making Selections in Photoshop

A selection isolates one or more parts of your image. By selecting specific areas, you can edit and apply effects and filters to portions of your image while leaving the unselected areas untouched.

Photoshop provides separate sets of tools to make selections of raster and vector data. For example, to select pixels, use the marquee tools or the lasso tools. You can also use commands in the Select menu to select all pixels, to deselect, or to reselect. To select vector data, you can use the pen or shape tools, which produce precise outlines called paths (just like in Adobe Illustrator). You can convert paths to selections or convert selections to paths.

Selections can be copied, moved, and pasted, or saved and stored in an alpha channel. Alpha channels store selections as grayscale images called masks. A mask is like the inverse of a selection: it covers the unselected part of the image and protects it from any editing or manipulations you apply. You can convert a stored mask back into a selection by loading the alpha channel into an image.

Marquee tools

The marquee tools let you select rectangles, ellipses, and 1‑pixel rows and columns.

1. Select a marquee tool:

   Rectangular Marquee 

   Makes a rectangular selection (or a square, when used with the Shift key).

   Elliptical Marquee 

   Makes an elliptical selection (or a circle, when used with the Shift key).

   Single Row or Single Column Marquee

   Defines the border as a 1‑pixel‑wide row or column.

2. Specify one of the selection options in the options bar.
    
   

   
   

   Selection options

   A. New, B. Add To, C. Subtract From, D. Intersect With

   
   

3. Do one of the following to make a selection:
   • With the Rectangle Marquee tool or the Elliptical Marquee tool, drag over the area you want to select.
     
   • Hold down Shift as you drag to constrain the marquee to a square or circle (release the mouse button before you release Shift to keep the selection shape constrained).
     
   • To drag a marquee from its center, hold down Alt (Windows) or Option (Mac OS) after you begin dragging.
     
     
     

     
     

     Dragging a marquee from the corner of an image (left), and from the center of an image (right) by pressing Alt/Option as you drag
   • With the Single Row or Single Column Marquee tool, click near the area you want to select, and then drag the marquee to the exact location. If no marquee is visible, increase the magnification of your image view.
     
To reposition a rectangle or elliptical marquee, first drag to create the selection border, keeping the mouse button depressed. Then hold down the spacebar and continue to drag. Release the spacebar, but keep the mouse button depressed, if you need to continue adjusting the selection border.
Lasso Tool
The Lasso tool is useful for drawing freeform segments of a selection border.
1. Select the Lasso tool , and select options.
2. Drag to draw a freehand selection border.
3. Specify one of the selection options in the options bar (see diagram above)
4. To draw a straight-edged selection border when no other pixels are selected, press Alt (Windows) or Option (Mac OS), and click where segments should begin and end. You can switch between drawing freehand and straight-edged segments.
5. To erase recently drawn segments, hold down the Delete key until you’ve erased the fastening points for the desired segment.
6. To close the selection border, release the mouse without holding down Alt (Windows) or Option (Mac OS).

Polygonal Lasso Tool

 The Polygonal Lasso tool is useful for drawing straight-edged segments of a selection border.
1. Select the Polygonal Lasso tool , and select options.
2. Specify one of the selection options in the options bar (see diagram above)
3. Click in the image to set the starting point.
4. Do one or more of the following:
   • To draw a straight segment, position the pointer where you want the first straight segment to end, and click. Continue clicking to set endpoints for subsequent segments.
     
   • To draw a straight line at a multiple of 45°, hold down Shift as you move to click the next segment.
     
   • To draw a freehand segment, hold down Alt (Windows) or Option (Mac OS), and drag. When you finish, release Alt or Option and the mouse button.
     
   • To erase recently drawn straight segments, press the Delete key.
     
5. Close the selection border:
   • Position the Polygonal Lasso tool pointer over the starting point (a closed circle appears next to the pointer), and click.
     
   • If the pointer is not over the starting point, double-click the Polygonal Lasso tool pointer, or Ctrl-click (Windows) or Command-click (Mac OS).
     

Magnetic Lasso Tool


When you use the Magnetic Lasso tool , the border snaps to the edges of defined areas in the image. The Magnetic Lasso tool is not available for 32‑bits-per-channel images.

The Magnetic Lasso tool is especially useful for quickly selecting objects with complex edges set against high-contrast backgrounds.
1. Select the Magnetic Lasso tool.
2. Specify one of the selection options in the options bar (see diagram above)
3. Set any of these options:

   Width

   To specify a detection width, enter a pixel value for Width. The Magnetic Lasso tool detects edges only within the specified distance from the pointer.
   

   To change the lasso pointer so that it indicates the lasso width, press the Caps Lock key. You can change the pointer while the tool is selected but not in use. Press the right bracket (]) to increase the Magnetic Lasso edge width by 1 pixel; press the left bracket ([) to decrease the width by 1 pixel.

   Contrast

   To specify the lasso’s sensitivity to edges in the image, enter a value between 1% and 100% for Contrast. A higher value detects only edges that contrast sharply with their surroundings; a lower value detects lower-contrast edges.

   Frequency

   To specify the rate at which the lasso sets fastening points, enter a value between 0 and 100 for Frequency. A higher value anchors the selection border in place more quickly.
   

   On an image with well-defined edges, try a higher width and higher edge contrast, and trace the border roughly. On an image with softer edges, try a lower width and lower edge contrast, and trace the border more precisely.

   Stylus Pressure

   If you are working with a stylus tablet, select or deselect the Stylus Pressure option. When the option is selected, an increase in stylus pressure decreases the edge width.

4. Click in the image to set the first fastening point. Fastening points anchor the selection border in place.
5. To draw a freehand segment, either release or keep the mouse button depressed, and then move the pointer along the edge you want to trace. The most recent segment of the selection border remains active. As you move the pointer, the active segment snaps to the strongest edge in the image, based on the detection width set in the options bar. Periodically, the Magnetic Lasso tool adds fastening points to the selection border to anchor previous segments.
   
6. If the border doesn’t snap to the desired edge, click once to add a fastening point manually. Continue to trace the edge, and add fastening points as needed.
    
   

   Fastening points anchor selection border to edges
   
   
7. To switch temporarily to the other lasso tools, do one of the following:
   • To activate the Lasso tool, hold down Alt (Windows) or Option (Mac OS), and drag with the mouse button depressed.
     
   • To activate the Polygonal Lasso tool, hold down Alt (Windows) or Option (Mac OS), and click.
     
8. To erase recently drawn segments and fastening points, press the Delete key until you’ve erased the fastening points for the desired segment.
9. Close the selection border:
   • To close the border with a freehand Magnetic segment, double-click, or press Enter or Return.
     
   • To close the border with a straight segment, hold down Alt (Windows) or Option (Mac OS), and double-click.
     
   • To close the border, drag back over the starting point and click.
     

Quick Selection Tool

You can use the Quick Selection tool  to quickly “paint” a selection using an adjustable round brush tip. As you drag, the selection expands outward and automatically finds and follows defined edges in the image.
1. Select the Quick Selection tool .
2. In the options bar, click one of the selection options: New, Add To, or Subtract From. New is the default option if nothing is selected. After making the initial selection, the option changes automatically to Add to.
   
3. To change the Quick Selection tool brush tip size, click the Brush menu in the options bar and type in a pixel size or move the Diameter slider. Use the Size pop‑up menu options to make the brush tip size sensitive to pen pressure or a stylus wheel.
   When creating a selection, press the right bracket (]) to increase the Quick Selection tool brush tip size; press the left bracket ([) to decrease the brush tip size.
4. Choose Quick Selection options.

   Sample All Layers

   Creates a selection based on all layers instead of just the currently selected layer.

   Auto-Enhance

   Reduces roughness and blockiness in the selection boundary. Auto-Enhance automatically flows the selection further toward image edges and applies some of the edge refinement you can apply manually in the Refine Edge dialog with the Smooth, Contrast, and Radius options.

5. Paint inside the part of the image you want to select. The selection grows as you paint. If updating is slow, continue to drag to allow time to complete work on the selection. As you paint near the edges of a shape, the selection area extends to follow the contours of the shape edge.
   
   
   

   
   

   Painting with the Quick Selection tool to extend the selection
   If you stop dragging and then click or drag in a nearby area, the selection will grow to include the new area.
   • To subtract from a selection, click the Subtract from option in the options bar, then drag over the existing selection.
     
   • To temporarily switch between add and subtract modes, hold down the Alt (Windows) or Option (Mac) key.
     
   • To change the tool cursor, choose Edit > Preferences > Cursors > Painting Cursors (Windows) or Photoshop > Preferences > Cursors > Painting Cursors (Mac OS). Normal Brush Tip displays the standard Quick Selection cursor with a plus or minus sign to show the selection mode.
     

 Selecting with the Magic Wand Tool


The Magic Wand tool lets you select a consistently colored area (for example, a red flower) without having to trace its outline. You specify the color range, or tolerance, for the Magic Wand tool’s selection, based on similarity to the pixel you click.

You cannot use the Magic Wand tool on an image in Bitmap mode or on 32‑bits-per-channel images.
1. Select the Magic Wand tool .
2. Specify one of the selection options in the options bar. The Magic Wand tool’s pointer changes depending on which option is selected. (See diagram above.)
3. In the options bar, specify any of the following:

   Tolerance

   Determines the similarity or difference of the pixels selected. Enter a value in pixels, ranging from 0 to 255. A low value selects the few colors very similar to the pixel you click. A higher value selects a broader range of colors.

   Anti-aliased

   Creates a smoother-edged selection.

   Contiguous

   Selects only adjacent areas using the same colors. Otherwise, all pixels in the entire image using the same colors are selected.

   Sample All Layers

   Selects colors using data from all the visible layers. Otherwise, the Magic Wand tool selects colors from the active layer only.

4. In the image, click the color you want to select. If Contiguous is selected, all adjacent pixels within the tolerance range are selected. Otherwise, all pixels in the tolerance range are selected.

Optional: After you make any selection, click Refine Edge in the Control Panel to further adjust the selection boundary or view the selection against different backgrounds or as a mask. See Refine selection edges.

— From http://helpx.adobe.com/content/help/en/photoshop/using/making-selections.html