SitePoint » Web Design

Two Ways to Remove a Color Cast from a Photo with Photoshop

Jennifer Farley — Tue, 09 Feb 2010 13:36:34 +0000

Some images contain color casts, which are simply imbalanced colors. You see color casts frequently in photographs that were taken indoors with artificial light; they tend to have a yellowish hue. Or photographs taken outdoors on cold days, which often have a blue hue. Color imbalance can also happen when you’re scanning photographs. Luckily, it’s incredibly easy to fix in Photoshop, and here are two ways to get rid of the problem. Let start with the really easy method suitable for mild color casts.

Really Easy Color Cast Removal

1. Open up your image in Photoshop. This picture is from the wonderful Library of Congress Flickr Group, taken in 1882 and you can see it has a yellow, aged hue.

2. Choose Image > Adjustments > Auto Color and immediately you’ll see a dramatic difference.
Note: In Photoshop CS4 the command is Image > Auto Color.

And that’s with just one click.

Slightly More Steps But Still Easy Color Cast Removal

If you have an image that has a severe color cast, this method is a little more powerful than using the Auto Color adjustment.

1. Open a photo that has a strong color cast. This is a picture I took where the white balance was way off on the camera so it came out very blue.

2. Choose Image > Adjustments > Match Color

Match Color is usually used when you have two images and you want them to have a similar feel, so you can match the color of one with the other. In this case we only have one image so it’s still extra easy.

On the Match Color dialog box, simply click the Neutralize checkbox and voila!, the color cast will disappear.

And here’s how my picture looks. It was a particularly dark, gloomy Irish day but the intense blue cast is gone.

If you find that the Color Match takes too much color out of your photograph, drag the Fade slider to the right until some color comes back. To increase the intensity of the color, drag the Color Intensity slider to the right. When you’re happy with how it looks click OK.

Hope you find that useful either for your own digital photography or as a method to quickly correct client images with color casts.

20 Varied Script Fonts For Valentine’s Day

Jennifer Farley — Mon, 08 Feb 2010 12:49:08 +0000

If you buy into the Hallmark festival that is Valentine’s Day, thoughts of buying a card for your loved one may be on your mind. But why buy when you can spend a bit of time and LOVE and attention on your own card? Hmmm? Designers you are designing your card, aren’t you? Well if you’re looking for some typefaces that ooze class or look like some crazy handwriting, here are some suggestions from the script typeface category. If you’d like to read more about script fonts, check this post, it has some nice font examples, too.

I’ve divided the fonts up as follows:

Classic calligraphy style
Calligraphy meets distortion
Handwriting
“Bordering on Psycho” Handwriting

Let’s start with the more traditional end of the scale. These are the classic script typefaces that wouldn’t look out of place on a wedding invitation. But don’t let that put you off!

If the last set of fonts are a bit too clean for you and you like to say “I love you” with grunge, here’s some dirty, distressed and distorted calligraphy style fonts that you may like.

Hurricane SupaDupa

Porcelain by Misprinted Type

Dirty and Classic by Billy Argel

Ginga also by Billy Argel

Selfish

This next set of fonts look like “normal” everyday handwriting, perfect for ahem, when you’re too tired to write your own and don’t want to leave the computer.

Dear Joe

Learning Curve

Journal (I picked this because the set of characters includes a little heart)

Honey Script

Simpson Font

Joyful Julianna

The final set of fonts below are the typefaces that look like they are handwritten, but with a touch of madness!

Dark Theatre by Mark Bellaire

Jellyka Waterways Seafarer

Do Not Exist

El&Font Static

Do you like any of these fonts? What other script style fonts would you add to the list?

Design Tweets of the Week Ending 07/02/10

Jennifer Farley — Mon, 08 Feb 2010 10:41:59 +0000

Here are some of the interesting design-related links that came up on Twitter this week.

Archive of Australian Graphic Design 1960-1980. Plenty of work here not only standing the test of time, but also looking trendy again as retro styles become popular.

If you’re debating about whether you should move to Chrome but are afraid you’ll miss Firefox extensions, this article from 1st Web Designer might convince you to change: 30 Irreplaceable Chrome Extensions.

Nice effect of creating depth and 3D ribbons using only CSS3.

Interesting thoughts on the revised font stack.

Creative Pro review of the new wireless Intuous tablet from Wacom. I have the one with the wire, but now I want this one!

New York Public Library has photos on Flickr complete with source and rights information. Great resource.

Why it’s best to pretend you don’t know anything about computers.

The web design sketchbook is a 52-page book featuring pages of varying canvas sizes complete with grids and browser chrome and areas for taking notes, adding descriptions and rating your concepts.

Maybe a little bit late for this one but, HongKiat have a nice collection of free printable 2010 calendars and desktop wallpapers.

How to get organized and make those connections you need for your design business. Networking tips for the busy designer from Vandelay Design.

UXBooth have an article on the history of eye-tracking, a very important topic for web designers.

I think design-related laugh of the week goes to this image of Kulala Air’s clever paint job. (via gadling.com)

There Is No Page Fold

An essay on the future of web design. “To see beyond today’s limits of the web all we need to do is see what is needed.”

Super Bowl XLV Logo Unveiled By NFL

Jennifer Farley — Thu, 04 Feb 2010 18:34:22 +0000

The new standard logo for the American Super Bowl XLV was unveiled today by the NFL and there’s a buzz on Twitter and some design blogs about it, although not very many images. There has been a new logo every year for the Superbowl but starting with the 2011 Super Bowl, the logo will basically remain almost the same. The only difference is that the Roman numerals and the stadium backdrop and will change for every year thereafter.

Image From ESPN

The silver XLV logo features the Lombardi Trophy, Roman Numerals and the Cowboys Stadium. Mark Waller, chief marketing officer for the NFL, said that this logo will be the permanent design for the Super Bowl, with each host city allowed to regionalize the logo. Waller said there will be a style guide for the logo which can be customized with the colors of the city. If you’re not up to scratch with your roman numerals XLV is 45.

Last years logo, a big, brasher, bolder affair was designed by Attik and was designed to look like a football whizzing through the goal posts with the Roman Numeral XLIV sitting either side.

Below you can see the schematic Attik have released giving an overview of how their logo was built up.

Any thoughts on the new logo? How do you think the shiney silver look compares with last years colorful, more brash logo?

*Update: Apologies, in my excitement with the new logo I pressed publish on this before the post was finished with a pic of the new logo!*

Color In Design: Yellow

Jennifer Farley — Thu, 04 Feb 2010 00:43:24 +0000

Last week we took a look at the warm and vibrant orange in design. Today we’re staying on the same side of the color wheel with the color yellow. Just like orange and red, yellow is a warm color. It has connotations of nature, sunshine and spring and is generally considered to be a happy and hopeful color. Having said that, it can be a difficult color to work with and does not seem to be as popular in web design as the other colors we’ve looked at.

Yellow is a high visibility color, hence its use in health and safety equipment and hazard signs. This high visibility is obviously eye-catching, but possibly too eye-catching on screen. Yellow sitting on a white backround is extremely hard on the eye. As mentioned yellow has many positive connotations, but it does also have associations with cowardice and deceit, “yellow-bellied” and “yellow journalism”.

Using Yellow

There are several shades of yellow, ranging from cream to lemon to golden. Yellow works extremely well as a companion to darker colors. It can brighten up a dark design enormously and can have a similar effect to red and orange in terms of catching the eye without being as bold. Yellow and blue are a popular combination, the yellow perking up more subdued blues and creating high contrast. Purple is the complementary color to yellow and it is also a high contrast combination. For more earthy color schemes, mix yellow with brown and moss and olive green. Combined with light green and orange, yellow creates a citrus or fruity palette. Black and yellow can be combined to create an industrial look.

Yellow in logo design

Here’s a few internationally recognized logo designs featuring yellow:

Yellow In Web Design

Below you’ll find a selection of web site using yellow either as a main background color or to highlight particular areas of the site.

What do you think of the color yellow in design? Is it a color you like or avoid? Have you seen any well designed yellow sites that you really like?

Cheeky South Butt Go To Court With North Face Over Logo

Jennifer Farley — Wed, 03 Feb 2010 13:22:56 +0000

The South Butt is an American online clothing store selling hoodies, jackets, t-shirts and shorts. They’ve recently found themselves in hot water over their logo design and its likeness to another (and very well known) clothing store, The North Face. Trademark infringement, trademark dilution and unfair competition are the issues in the case which started last Wednesday.

The South Butt logo (left) and North Face logo. Easy to distinguish?

The South Butt store was set up by Jimmy Winkleman and targets “who don’t want to be part of a herd with The North Face logo emblazoned on their chest.” (quote from the Maneater)

In reference to the North Face’s complaint that the infringing trademarks are “likely to cause initial confusion, mistake and deception among consumers who are drawn to the infringing products believing they originate from, are associated with or are otherwise authorized by” The North Face, The South Butt have a disclaimer on their web site stating

We are not in any fashion related to nor do we want to be confused with The North Face Apparel Corp. or its products sold under “The North Face” brand. If you are unable to discern the difference between a face and a butt, we encourage you to buy North Face products.

Now there’s no excuse for getting the two mixed up. The hearing last week was to establish dates and deadlines for the case. It will be interesting to see what happens. You can read more about it on the South Butt web site news section and on the Maneater Website.

So what do you think about this? Is the South Butt logo too much like the original North Face design? Will you be rooting for the little guy or do you think South Butt are making money on someone else’s coattails?

Create A Better, More Realistic Drop Shadow In Photoshop

Jennifer Farley — Tue, 02 Feb 2010 05:34:58 +0000

You can add a simple drop shadow to any object on its own layer in Photoshop by clicking on the “Add a layer style” button at the bottom of the palette and choose Drop Shadow from the drop down menu. This opens up the Layer Style dialog box and you can choose your drop shadow settings from there. Simple. The drop shadow adds a little extra dimension to objects but it doesn’t always look particularly realistic. Most objects such as paper or photographs do not always lie completely flat so let’s take a look at how you can create a more realistic drop shadow with of a hint of a curl.

Open up a photograph that you want to apply the effect to.
Create a new document which is larger in width and height than your photograph.
Now draw a shape like the one below which will eventually become the shadow under the photograph. You get the best results using the Pen Tool here, but you can also make the shape using a Brush if you don’t feel happy using the Pen. The shape should be slightly bigger than your photograph.
Blur the edge of the shape by using Filter > Blur >Gaussian Blur. I used a radius setting of 4 so that you get something that looks like this.
Drag your photograph over the curl drop shadow. They should be on separate layers, with the photograph on the layer above the drop shadow.
Once the photograph is placed over the drop shadow, select the drop shadow layer and Press Ctrl + T (windows) or Cmd + T (Mac) to Free Transform. You may need to scale the curl drop shadow up or down or even skew it, depending on the effect you want to achieve. Hit Enter/Return to commit the transformation.
At this stage the shadow is too dark. Make sure the Shadow layer is selected and the reduce the opacity to about 40% to make it less obtrusive. If the shadow looks too big, or the picture looks like it is floating too far above the shadow, just drag the shadow so it is sitting mostly hidden under the photograph.
Once you’ve made your drop shadow you can create different effects by transforming it. For example you can give the impression of lifting up three corners of the photo by offsetting the drop shadow horizontally and enlarging it vertically.
You can also give the impression of lifting the photo higher off the “page” or surface by showing a larger but softer shadow. Or you can make it look like the top of the photo is lifting by shortening the shadow vertically.
Finally, tilt the photograph and shadow together for a more natural look. Select both layers in the layers palette, then press Ctrl + T or Cmd + T to free transform. Then bring your mouse close to one of the corner so that it turns into a double curved arrow and drag around one corner. Press Return/Enter to commit the transformation.
Ta da! So it does involve a little more work than a simple layer style but you can certainly achieve some nice effects by playing around with it.

Design Tweets of the Week Ending 31/01/10

Jennifer Farley — Sun, 31 Jan 2010 13:10:24 +0000

There are so many brilliant resources out there, it’s hard to keep up with what’s going on. Using Twitter is one way to attempt to keep up because there are tons of links whizzing backwards and forwards between followers. So here’s some of the best/most useful/most interesting design-related links discovered in 140 characters or less through Twitter this week.

How to roll a can using pure CSS by Roman Cortes

The myth of the page fold, evidence from user testing.

Ten lessons of a web startup by Evan Williams (who started Blogger and Twitter).

Some very nice calendar desktop wallpaper from Smashing Magazine readers.

Steve Jobs doesn’t mince his words regarding Google and Adobe.

Six Revisions have 10 tips for designers using Twitter.

Gajitz asks have animated gifs matured from being annoying to being arty? (I’d err on the side of annoying but there are a few nice examples, including this one.)

The Guardian shows 4 new covers for re-issued JD Salinger books all with a heavy emphasis on typography.

Design observer has an article about “who owns student work.” It’s a particularly interesting read for anyone who might be creating work in university.

Tips to follow when designing a lead generation page, from Carsonified.

Woorkup has a really nice collection of six flash websites which tell a story.

Web Designer Depot has a great post of tips on how to improve your website print style sheets.

Using SVG for flexible, scalable and fun backgrounds. Part 1 and Part 2 on a List Apart.

If you’re a Typekit user you might be interested to see screenshots of all their fonts in every browser and every platform.

Web Design Ledger has some cool eye candy in the form of creative ads from around the world.

Typography: Readability & Legibility (Part 2)

Jennifer Farley — Fri, 29 Jan 2010 13:12:36 +0000

Last week we looked at the major factors which can affect the readability of text. This week we’re looking at legibility. As a quick refresher on the difference between the two:

Readability is whether an extended amount of text—such as an article, book, web page—is easy to read.
Legibility is whether a small burst of text such as a sign or a headline is instantly recognizable.

Unless text is perfectly legible, it takes longer to read it. The situations where it’s most important for text to be legible is where information is scanned quickly or skimmed through by the reader. And we all know most people skim through web pages, glance at signs and headlines and scan catalogs. So if you’re designing anything like that you need to make sure the text is legible otherwise information will be missed or simply ignored. If you’re running from a burning building or trying to find your way using road signs, it’s vital that they should be instantly recognizable. The sign below on the left is not ideal.

Word Recognition

A major factor which influences legibility is the word or words themselves. Some words lend themselves to almost any typeface and people will understand it, while more unusual or less frequently used words need to be clear and legible.

Avoid very small or very large x-heights

Very large x-heights in typefaces decrease legibility. The x-height is defined as the distance between the baseline and the mean line in a typeface. This is generally considered to be the height of the letter x in any font (it also includes the letters u, v, w, and z.)

Image Credit: Wikipedia

For example in some typefaces if the x-height is too large, then the letter i can barely be differentiated from the letter l. A very small x-height also decreases legibility. Our eyes find it distracting when the body of the letter is too small compared to the ascenders and the cap height.

Lowercase letters

As mentioned in the post on readability, TEXT SET IN ALL CAPS IS THE LEAST LEGIBLE BECAUSE OUR EYES RECOGNISE WORDS BY THEIR SHAPE AS WELL AS THE LETTERS THEY INCLUDE. ALL CAPS MEAN EACH WORD IS THE SAME SHAPE. You might have found that you read the last two sentences ever so slightly slower than the rest of this post. All caps are suitable for very short sentences or headlines.

Another Problem Occurs When You Use Title Case In Sentences. Title Case Is A Mixture Of Upper And Lower Case And Is Suitable For Titles Only Because It Is Too Hard To Read.

Avoid extra heavy or condensed fonts
In the paragraphs below, the paragraph on the left is easy to read set in Myriad Pro Regular. The paragraph on the right is also Myriad Pro but the style is Condensed Bold and it’s much harder work to get through the full paragraph.

To sum up, text needs to be most legible where it will be scanned or skimmed over very quickly. Some guidelines to make type most legible:

Use typefaces with average x-heights
Use lowercase letters with capitals where appropriate
Avoid condensed or slanted type
Add extra letter space in very small point sizes and less letter spacing in larger sizes

These are of course just guidelines. Even if you break these rules and go for unusual typefaces, the type is still readable but it just might take longer to read. It really depends on the project you’re working on, but if you’re aware of some of the issues it can help you choose your typefaces.

What else would you add to the list?

Color In Design: Orange

Jennifer Farley — Wed, 27 Jan 2010 13:51:18 +0000

Moving on from last week’s versatile Green, today we’re taking a look at the color Orange and its use on the web and in logos. Orange is combination of red and yellow, a warm vibrant color with connotations of energy and flamboyance. It’s less intense or aggressive than red but can be used in a similar fashion to grab attention and highlight important areas of a design.

Orange designs often convey a sense of friendliness and in the right hands can maintain seriousness and professionalism. On the downside, orange is sometimes associated with cheapness thanks to companies such as Easyjet which plaster all of their products and services in bright orange. In general though, it’s a great color to attract attention without offending or stopping anyone in their tracks.

Orange as a citrus fruit conveys thoughts of summer, sun, vitamin C and health. It also has connotations of autumn and change; autumn leaves changing from green to orange to brown. Depending on your audience you might choose a very bright yellow-orange or a more autumnal orange-brown.

Using Orange

As already mentioned, you can use orange as a foreground color to highlight important elements or as a main background color to convey feelings of enthusiasm, vibrancy and warmth. Without screaming, orange makes a big statement.

Red-orange is highly energetic and fiery while softer yellow-orange is more soothing and less flamboyant. Black and orange appears in nature in pumpkins and have a strong association with Halloween. Blue and orange really pop together. Green and orange together provide a tropical feel while the complimentary colors of purple and orange are eye-catching without being too overpowering.

Orange In Logo Design

Let’s look at some examples of websites using Orange as a main background color, or as a minor color to highlight important areas of the site such as navigation.

Saturized

Easyjet

Lightway Software

Mulley Communications

Guide Dogs South Australia

Qodo

Monolinea

And there you have it. What do you think about Orange in web and logo design? Have you seen any particular orange favorites of your own?