top border

Design Notes

Building skills

October 28th, 2008

In an effort to build my Photoshop and Illustrator skills I try to do a tutorial every day. I recently discovered the tutorials at Photoshop Essentials. The lessons here are aimed at complete novices; they even explain how to show rulers and create guides. But I have found some helpful information here, in particular the lessons on creating a shallow depth of field and making a starburst pattern. Of course, for some skilled users, these too are novice techniques. As everyone who works with Photoshop opines, however, it’s such a complex piece of software that no single person knows how to do everything with it.

The starburst is fun. It’s a very ’60s psychedelic look. It’s a great design element for a retro web page or advert. Here’s one for Halloween.

starburst graphic

Color Palette Tutorial

September 25th, 2008

palette |ˈpalit|
noun
a thin board or slab on which an artist lays and mixes colors.
• the range of colors used by a particular artist or in a particular picture : I choose a palette of natural, earthy colors.
• (in computer graphics) the range of colors or shapes available to the user.
ORIGIN late 18th cent.: from French, diminutive of pale ‘shovel,’ from Latin pala ‘spade.’

color palette with resource images

Welcome to my first tutorial! Although it’s intended for the novice designer, there are tips here for finding source material that others may find useful too.

Let’s get started!

Choosing a color palette for a project can be a challenge for designers. Designers who create physical objects often work with Pantone guides, fabric swatches, or paint chips. While some web designers may use these tools too, many others will not stray far from their computers when figuring out a color scheme. Novice designers especially may not have the array of resources that more experienced designers have had years to collect nor the money it takes to purchase a Pantone library. There are a number of good resources for color palettes including Colour Lovers. However, I find that simply looking at colors alone, not in a larger context, doesn’t really work for me.

One bit of advice I’ve often seen is to take a photo that you like, open it up in Photoshop, and use the eye dropper tool to sample different colors in the image. In this tutorial I’ll recommend several sources for images and outline the steps to create a simple color palette in Photoshop.

Inspiration

Art reproductions in books or on postcards are an excellent source for color palettes. Expensive, beautifully printed art books are readily available at the public library, and if you live near or are visiting an art museum, you can pick up inexpensive reproductions in the form of postcards at the museum shop.

Korean Buddha postcard and color palette

Flickr is a good source for images, and because of Creative Commons licensing, you can use many of the photos there for personal or commercial use as well as for color inspiration.

green bottle fly and color palette

If you already buy them or can get cast-offs, high-end fashion magazines like Vogue have loads of images that were created by professional stylists and photographers who have labored to put together a pleasing or interesting composition of colors and textures. Choose from advertisements and editorial content. Rip out the pages and save them for reference.

If you don’t have access to free fashion magazines and wouldn’t be caught dead buying one, check out The Sartorialist, a fashion blog. The Sartorialist has excellent taste and a good eye for framing his subject. He uses a small aperture on his camera to throw the background out of focus, turning what might be distracting or unattractive into softness and color.

Woman in black and white dress

This photo of Daniel Radcliffe, from the September issue of Vogue, appealed to me for several reasons. The tones in the image reminded me of the work of Elliot Jay Stocks, a talented and influential designer who is well known for his grunge style. The colors in this image would be perfect for developing a grunge influenced project. The contrasts in the picture are also appealing, such as rough (the wood, the wool suit, the beard growth) and smooth (the shirt, the smooth areas of skin) and dark and light. The pallor of the skin gives the image a preternatural quality that is also attractive in a sort of dark gothic way.

Daniel Radcliffe in Vogue

Create a palette in Photoshop

If you’re working with a scanned image, you may need to descreen it if your scanner does not come with an automatic descreen. There’s a good article at Scantips about descreening in Photoshop.

In Photoshop create a document 1800 x 1200 pixels. This document will be the blank palette which you will fill with color. Place five guide lines 300 pixels apart. You will then have six strips. Use the marquee tool to draw a box around the first strip. Make your window slightly larger than your document and click just out outside the document in order to capture the full strip.

color palette with marquee

Now Command/Control + Shift + N to create a new layer. Place each color on a new layer so that you can easily rearrange them later. Next, use the eyedropper (keyboard shortcut I) tool to sample an area of the photo. You don’t have to adhere religiously to the sample; I often adjust it to what my eye perceives as a more pleasing tone or to a feeling I’m trying to convey. Press G to select the paint bucket tool, and you have the first color of your palette. Create a new layer, select the marquee tool, and drag the marquee to the next strip. Sample, fill, and repeat these steps until your palette is filled.

Select the move tool, and check auto-select. Move around the colors until you are pleased with the organization of your palette. You don’t have to have as many as six colors, and you can see that I eliminated one of the colors from this palette, or you could have more.

color palette completed

Put your palette to use

Here is an image of a palette in action. The Apple Command key symbol was created by following Veerle Pieter’s tutorial. She’s a wonderful designer who frequently publishes very useful tutorials on her website.

apple command key graphic

Photo credits

Daniel Radcliffe from the September 2008 issue of Vogue magazine; woman with umbrella from The Sartorialist, “On the Street…..Wet & Styled, NYC ,” September 18, 2008; Danny Masterson at Lollapalooza from Style.com; woman in black-and-white jumper from The Sartorialist, “On the Street…..Fay, NYC,” September 06, 2008; “Amitabha Buddha and the Eight Great Bodhisattvas” from The Art of Korea: A Book of Postcards; “Green Bottle Fly” by jpctalbot from Flickr.

Life on the Side(bar)

My Snaps

Recommended Reading