Photography 101: Photographing People

Photographing people, especially if you don’t know them well, can be one of the hardest things to do. Some people may not want to have their picture taken. In some cultures, taking someone’s picture is considered to be very bad luck. Your subject might just be very camera-shy. Taking photos of people requires flexibility, patience, and respect. Don’t take pictures of someone who really doesn’t want his or her picture taken. It probably wouldn’t come out well anyway.

You will also likely have to overcome some of your own trepidation when you begin photographing people, but, if done well, these images will be some of the most interesting and rewarding pictures you can take.

 So how do you make sure you get the best photo possible?

1. Get Close. It may make you nervous to get in someone else’s space, and you should probably ask permission before you do so, but you’ll be able to get a much more intimate, interesting photo this way.

2. Don’t Force It. Say cheese! Staged photographs can look cheesy, canned, or just plain boring. Sure, there’s a time and a place for people giving their best megawatt smiles all in a row, but the best photos of people tend to be the ones where they’re being natural (well, as natural as possible with a camera sticking in their face). People often start out quite stiff and nervous when you’re taking pictures of them “in the wild,” as I like to call it. My solution to this is to persist and stick around. After you take a gajillion photos, they will have stopped worrying as much about how they look and what you’re doing.

3. Take Some Time. If you have the luxury of hanging out with a person or group of people for a while, you’ll have more opportunity to get shots while they go throughout their days. This will provide you with some variety, and will give you a chance to take spontaneous, unstaged photos. Keep your camera on you at all times and be ready for any opportunity! Here’s a good tutorial if you want more info.

Color on the Web

Color on the Web

In the past, designers used to recommend "web safe colors," a list of 216 colors that would display exactly the same way, no matter what device they appeared on. This is no longer necessary as most devices can easily generate millions of colors. In HTML and CSS, color is expressed in a six digit "hex code." For instance, the hex code for white is FFFFFF. Here is a handy chart from W3 schools about hex colors. Hex codes correspond to RGB values, a three digit code specifying the amount of red, green, and blue light in a pixel. Most graphics editors and color scheme tools will display the hex code for a color along with the RGB values, which can be useful in editing the CSS of a page- you can make sure you are using the same hue and shade of brown for all of your headings and links, if you should so desire.

In working with images, photographic media is best displayed in bitmap color (24-bit) in the JPEG file format. Graphics such as logos and clip art are often best displayed in the GIF format, meaning they will be limited to 256 colors. In thinking about what format best suits your images, consider how much color gradation and variation there are in graphical elements. Also, consider that if you are attempting to match graphical color (in a logo for example) to a page's background color, the two may not always match up. You might end up with a box around your logo, like this:

 In this case, you will want to add transparency to the logo so that the page background color shows through, or use an unambiguous background color such as black or white. Matching shades of gray can be particularly difficult.

There exists a plethora of tools online to assist the would-be designer in working with color. Design Shack has a great review of tools available. We worked with Color Scheme Designer to help us choose which colors might work well for our blog. When selecting web colors, keep in mind that you are trying to create a scheme that helps the reader find the most important elements of your page quickly and allows them to read text clearly. Make sure your hyperlinks are distinguishable and keep large blocks of text simple- black and white may be boring, but when your readers are trying to concentrate on getting through a lengthy article, they're not going to want to be distracted by oddly colored text anyway.

Using Color Scheme Designer

What We Did- Color Scheme Designer

We wanted our site to look professional and subtle, but with a hint of youthful forwardness and fun. For a professional look, lots of white space is always a good way to go. We decided that the primary color scheme for our site should be lots of white with gray scale and highlighted with a few bright colors for contrast and energy. Emily noted that magenta was a good color to achieve this goal, so we headed over to the Color Scheme Designer to find another shade that would work well with magenta. We only wanted two "highlight" colors at most, so we selected the designer's complementary color scheme option:

Umm…. Okay. No. So, sometimes, complementary colors only look good together in theory. That blinding alien green color just won't do. This is why the human element is important in design! Let's try another combination, and analogic color scheme:

That's a lot less glaring. We can use magenta with a rich purple or orange tone to draw the eye to the important parts of our blog's layout. The colors are close enough together that they don't clash, but far enough apart that they're interesting to look at. It's still a bit bright for what we're going for though.

In the end, we decided on a color scheme completely independently of the designer's algorithms: purple highlights for our logo and turquoise for our links. Emilie and Verena toned down the saturation of the colors to go with the more understated grayscale tones, making our site more consistent. The design process involves a lot of tinkering, and fortunately it's fairly easy to tinker with colors up to the final stages of the design process.  

Remember: As with most principals of design, LESS IS MORE. Have fun playing with colors, but don't go overboard! Keep in mind our examples of professionally done websites above; The idea is to frame and highlight the content of your blog, and too many colors can be very distracting.

Exporting Your Work In Color Scheme Designer

In the far right hand corner, CSD's export tab gives you a number of options for exporting your color scheme. If you are manually entering the hex codes for your colors in a program such as Dreamweaver or Blogger, you can get the exact shades you want by exporting them using the HTML/CSS option. This will give you a grid of the hex codes representing the colors in your scheme, under various shades and saturations:

You're probably not going to use all of the colors in the palette. For instance, you could use colors in the first column for elements that stand out in your design, such as page titles and links, and colors from the third column for elements that stand back, such as page backgrounds or header bars. The HTML/CSS option also gives you a PURL to your palette, so you can link back to it or visit it another day.

The XML option will export your palette colors as an XML document. If you wanted to, you could use this option to create a database of different palettes and use XSLT to display them. This function won't help you add color to your webpage, however.

The text option merely generates a list of hex codes and RGB values for all of your colors. The ACO and GIMP options are for importing your palette into a graphics editor such as Photoshop or the GIMP.

Principles of Design: Color

Why Color Is Where It's At

We chose to begin our design process by selecting a color scheme for our blog. Color is incredibly important because it will influence most (if not all) of the other decisions you will make about logo design, layout, and so forth. This is because colors can lead the eye to certain parts of the page, make elements advance or recede towards the background, or make elements appear larger or smaller. Consider the following:

•  Lots of white or soft, light colors can give the illusion of space.

•  Warm colors tend to stand out, whereas cool colors tend to stand back.

• Saturated (ragingly bright) colors catch the eye, so you should use one of them to emphasize a single point

Selecting a Mood

Color schemes also are important in creating an overall mood for your site. In considering mood, keep in mind the audience you are trying to reach and the product or message you are trying to promote. For color scheme ideas, look to the professionals: Nordstrom is an upscale outfit and so they use a simple, formal black and white color scheme. Anthropologie has a vintage clothing theme going, so they use washed out colors and playfully bright highlights to express a mixture of romantic nostalgia and fun. Don't feel like you have to come up with a completely original color scheme- go with what has already been shown to work!

Here are some examples of webpages that really create a mood with color:

More Hazards More Heroes
 This is the webpage for a folk musical group based out of Nashville. They have selected a complementary color scheme of turquoise blue and orange. Notice how the interactive parts of the page (the "play" and "download" buttons) are graphically rendered in warm colors, whereas the static parts of the page, such as titles, are in cooler shades. The muted brown tones in the background echo the laid-back, simple acoustic music that the group plays.


Brunet Garcia

These people do a lot of marketing, so their website is very graphics heavy. The front page employs a high contrast monochromatic color scheme, which is bold and attention-grabbing, just what marketing is supposed to do! Once again, the interactive element, a movie, has a bright red mark to draw the attention. The monochromatic scheme seems simple, but it is a good choice because their other pages have graphics brimming with color, and the layout should not distract from these images.


Decode
Here is another design agency with a beautiful website. They have employed a triadic color scheme, using brown, fuchsia, and sea green. Notice how large blocks of color that are merely decorative (i.e. in the background) are understated, whereas the tiny hyperlinks are bright pink! These unlikely colors give the site a youthful, modern vibe, but are slightly muted so that they avoid recalling a 6 yr-old girl's bedroom. Chocolate is a great color because it can add a subtle tone of seriousness to its more outgoing neighbors. In this case, it is replacing orange as the third element in a triad.

You don't have to have a bunch of flashy graphics to make good use of color on your website. Basic shapes can be just as striking and often very appropriate. If you are interested in adding your own photographs to your design, check out our blog posts on photography- anyone can take artful, beautiful photos with a little practice, and it doesn't require thousands of dollars of equipment, either!