Digging Up Deathly Pallor

Our model is the picture of health and that’s just unacceptable. After opening the first image, we’re going to Layer/Duplicate Layer. On top we will have a layer named “Background copy.” We click on the eye to the left of the top layer so we can see what we are doing beneath. We’re going to the original “Background” layer and go to Layer/New Adjustment Layer/Hue-Saturation. In order to get the greenish decaying vibe we need the Hue slider will be set at “+35,” Saturation will go to“-70” and Lightness will drop slightly to “-5.”

She’s already looking like she ate some undercooked burgers, so we’re going in the right direction. We return to “Background copy,” make it visible, and go to Layer/Layer Mask/Reveal All. Next, we set the foreground color to black, go to work within the mask with our brush tool, and dial in the opacity to 15% with airbrush enabled. We bring the greenish cast out gently in the skin, taking care to leave the eyes and hair alone.

We are not concerned about getting the tone uniform, as nature is rather chaotic and rotting is no exception. Next, we return to the “Background” layer on the bottom and go to Image/Adjustments/Brightness-Contrast. Since we have gone over the skin within the “Background copy” mask, we don’t need to render the top layer invisible to see the results. We accentuate the pallor by taking the Brightness slider down to “-80” and ramping up the Contrast slider to “+50.” Once we have our model looking more gaunt than goth, we are ready to push our subject over the edge into the land of the walking dead!

From “Ick” to “OMFG the Dead Have Risen From the Grave!”

We are going to highlight the “Background” layer at the bottom of the Layer Palette, and use our move tool to drag the rotting earth texture onto our workspace so it becomes “Layer 1” sandwiched between “Background” and “Background copy.” We set the style in the Layer Palette dropdown menu to “Difference” and we stretch the texture over subject’s entire body by going to Edit/Free Transform.

Now, just as we did with the “Background copy” layer, we create a new layer mask set to “Reveal All,” set our brush to 100% opacity, and touch up the edges of “Layer 1” so none of the texture goes past the skin, making sure the eyes, lips, and hair are untouched. Still in the palette, we return to “Background copy” and set the layer style to “overlay.” Now she’s starting to look like something that burst out of a cemetery plot.

“But wait,” you say. “What about all that purple? Looks kinda out of place.” We fix that by highlighting “Layer 1” and going to Image/Adjustments/Hue-Saturation and we slide the Hue down to “-30”, leave Saturation where it is and drop the Lightness slider down to “-60.”

Now that the rot has a more moldy feel, we may want to return to the “Layer 1” mask and, with our black airbrush opacity set to 15% once again, we go around the eyes and lips to make sure any of the texture doesn’t obscure any facial features that are overlaid, taking care to also hit around the jaw and hairline.

Now that the festering looks more embedded than overlaid, we return to the original “Background” layer and go to Image/Adjustments/Brightness-Contrast, then set the brightness slider to “-15” and ramp up the contrast to “+60.” This accentuates the shadows, getting our subject ever closer to punching through that coffin lid. Next we return to our “Background copy” layer’s mask with our black airbrush set to 15% and go over lips, as well as the skin and the hair.

Finally, to siphon out the last bits of vitality, we will make a new layer above “Background copy.” Guess what it’s called? That’s right! “Layer 2!” Our black airbrush should still be set at 15% and we’ll add shading around the eyes.

Zooming in as we shaded around the eyes, we saw areas on the picture where our texture may still look too purple from “Layer 1” or there’s not enough gray showing through underneath the “Background copy” layer. Before moving forward we’ll take a moment to touch up these areas.
“Okay, man,” you say, wiping sweat from your brow. “How dead is dead? Are we done yet?” Before we can pronounce the subject legally zombified, we need to do something with the eyes. We’re going to eliminate the sparkle. Nothing says “hide in the basement, they’re coming straight for the house” like a milky film over dead eyes.
First, we set the black airbrush to 100%, next, we create a new layer. In layer 3, we carefully eliminate the reflection in the eyes, because of the white film we are adding. Now the eyes look even colder and more cadaverous.

We now make “Layer 4” to finish off our subject’s undead corneas. In the Layer Palette, we set the Opacity to 30% and the layer style to Linear Dodge. We add the film with a gray paintbrush set to 100% opacity.

Next, so the eyes don’t lose their defined shape any further, we create a new layer set to Normal/100% we take a black paintbrush set to 15% opacity and delicately go around the edges of both eyeballs.

Now the last thing we have to do before we board up all the windows and make sure we have plenty of ammo is go to Layer/Flatten Image and then move to Image/Adjustments/Photo Filter. Select the Filter radio button and leave Preserve Luminosity unchecked. In the filter dropdown menu choose “Cyan” and set the Density to 40%.

Now, with the emphasis on the cool greens and blues, we have that just-punched-through-the-coffin-lid feel, and we are done!

We learned that thinking outside the box with layer effects, shading and the power of cool or warm hues enables us to use images we would never think of to push the pixels the way we want to, in this case turning a normal girl into the walking dead. Most importantly, we learned that layer styles sometimes don’t behave the way we would like them to. Revising and touching up our work isn’t just reserved for the end of each task, or even the end of all the hard work. It is an ongoing process the graphic artist must go through from start to finish. Now, if you’ll excuse me, I think I’ll kick back and enjoy another viewing of “Night of the Living Dead.”

Create a 3D Text Scene Using Photoshop3D Shatter Effect with Cinema 4D and Photoshop

Create a Nature/Fantasy Composition with 3D Text and Light Effects

How to Create Stunning and Bold 3D Text

Create a Cool 3D Text Using Photoshop and Illustrator

Shiny 3D Text in Photoshop

Poster 3D Text in Photoshop

Creating and Decorating a 3D Text

3D Text Effect

3D Cliff Text Effect

Create Glowing 3D Text

Create 3D Text with Extreme Lighting

3D Angled Text in Photoshop3D Text on Fire

How to Create Fast 3D Text in Illustrator

3D Text Effect: 2009

Create a Spectacular Grass Text Effect in Photoshop

Create a Spectacular Flaming Meteor Effect on Text

3D Typographic Effects

Create a Dream Design with 3D Typography

How to Create High Quality Metal 3D Text in Photoshop

Kaboom! Exploding Text

Stunning 3D Effects in 30 Minutes

Create a Vibrant 3D Pixel Type Treatment

Soft Stylized 3D Type with Photoshop and Illustrator

Create a 3D Flowery Text Effect

The New Way to Create 3D Text

Illustrator Tutorial - 3D Lighted Text Effect

3D-Typo Using Only Photoshop

How to Create Explosive Typographic Effects in Cinema 4D

And finally, check this new 3D text generating software:

Insofta 3D Text Commander

We’ll demonstrate how to realistically accessorize anyone by adding a sassy silver bracelet by Visualjenna-Stock to the wrist on this stock portrait by meglillyan. In order for our model to say it with silver, we first need to get that bracelet down to a size that will fit our portrait. We’ll go to Image/Image Size and set the width to 1000 pixels and the height to 750. Next, we go to Selection/Select All. With the entire bracelet jpeg highlighted we then move to Edit/Copy and then, on our portrait we select Edit/Paste to transfer the bracelet to our portrait. Now we need to get rid of the unwanted background from our bracelet, which is now “Layer 1.” We will go to Layer/Add Layer Mask/Reveal All. Using a soft-edged paintbrush with the foreground color set to black and the opacity set to 100%, we then zoom in and take our time removing the background from “Layer 1,” after making sure the mask space is highlighted in the Layer Palette. If we accidentally remove some of the bracelet, it’s no big deal. We simply set the foreground color to white to bring back any silver we need.

Formfitting Style

Now that our bracelet is free of any unwanted background, we get to give our eyes a breather as we zoom back out and get ready to fit the bracelet to the model’s wrist. We use the move tool to get “Layer 1″ over the subject’s wrist. Our next step involves going to Edit/Free Transform and then we turn, twist, and form fit it. We have to make sure that first, it’s not too loose, but not too tight for the bracelet to realistically sit on her wrist where it does. Second, we can’t go crazy with the transform tool and make the detail look too stretched or overly pinched. When we contract or expand horizontally, we must do so to the same degree vertically.

“Okay,” you tell me. “This looks sorta cool, so far, but the bottom left of “Layer 1″ doesn’t believably fit around the wrist.” Very astute! In order to seal the deal on our fit, we must go to Edit/Transform/Distort. We must be very gentle in using this tool. Remember, we don’t want the proportions too drastically altered in the bracelet’s ornate detail. We simply are going to make the bottom stretch a little bit more around the wrist. Distort lets us twist and bend any layers to ridiculous degrees, so let’s summon that patience that let us remove the background from “Layer 1″ and get to work. On the bottom corner points we’re going to gently pull them outward so the very edges of the bracelet extend slightly past the edges of her wrist. Remember, we want a close fit, but we’re not slapping cuffs on her. It shouldn’t look tight. If we have barely stretched those bottom edges it should look like something like this:

Making Less Seem Like More

Now that “Layer 1″ fits the subject correctly, we need to make it settle in realistically as well. The portrait’s detail isn’t as sharp as that of the bracelet, and the portrait’s color is also noticeably muted. To correct this we will go to “Layer 1″ in the Layer Palette (making sure the workspace and not the mask is highlighted,) then go on to Layer/New Adjustment Layer/Hue-Saturation. After making sure we check “Use Previous Layer to Create Clipping Mask,” we move the Saturation slider down to “-70″ and drop the Lightness to “-20.”

We managed to get the color and brightness to settle in better with the “Background” layer, but it still looks a little flat, like somebody, well… like somebody cut and pasted it on her. We’re going to fix this with some layer effects by going to Layer/Layer Style/Bevel and Emboss. We’ll take a cue from the model and remember that less is more as we choose “Inner Bevel” from the Style dropdown menu, then “Smooth” for our Technique. Depth is set at 1%, with the “Up” radio button checked for Direction. After that we move the Size slider to 5 pixels and Soften to 1 pixel. In the Shading adjustments we leave “Use Global Light” checked as well as the box next to Anti- aliased. Then we set our Highlight Mode dropdown menu to “Screen” at 45% Opacity, and our Shadow Mode to “Multiply” before moving that Opacity slider to 75%. This may not seem like a big difference at first, but if we check and uncheck Bevel and Emboss in the style menu to the left a couple times, we can see that “Layer 1″ has more depth and weight to it than before, but we’re not done yet.

We Return to Layer/Layer Style, but this time we go to Drop Shadow. As with our Bevel and Emboss effect, this will be very subdued in that we set our Blend Mode again to “Multiply.” We drop our opacity slider to 35%, Distance and Size both to 1 pixel, Spread to zero, and check the Anti-aliased box.

“Heeeey,” you exclaim. “That looks a lot better! But the level of detail in “Layer 1″ is much sharper than that of the “Background” layer. What’s up with that?” We’re going to fix that with some filter effects.

Let’s Get Fuzzy

We go to Filter/Blur/Gaussian Blur, making sure the Preview box is checked so we know exactly how much is enough. In this case the Radius slider should be set to 3.0 pixels.

We have matched the level of detail in the “Background” layer, and we must do the same with the noise. We return to the Filter menu and select Noise/Add Noise. Working the slider to match is easy, right next to “Layer 1,” and we drop the noise into lockstep by checking the Gaussian radio button, making sure to leave the Monochromatic box unchecked. Then we watch the noise come together by moving the Radius slider to 4.8 pixels.

With that, we have successfully accessorized our subject. Now this unpretentious young lady is showing a hint of sass, and maybe her expression shows a hint of embarrassment at her indulgence in ornate bling. Then again, maybe she just hates having her picture taken. Who can say?

We learned with this simple exercise that using very subtle layer effects and filters can easily help us realistically place jewelry like our silver bracelet, necklaces, and more onto people in photographs. Plus, we know that any adornments not only have to fit the person, but the color and levels of detail as well. Finally, placing such items on people can help us set a desired tone, whether in professional work or personal projects, a simple item attached to a wrist or any other part of the body can make the ordinary more intriguing, setting the viewer’s imagination in motion, and that’s what it’s all about.

Now, if you’ll excuse me, I have to remind one of my less fashion conscious friends that his next wristwatch should be stainless steel, because it goes with everything.

Meanwhile there have been some changes to report overnight regarding the Sydney Australia blog scraper site affiliated with Shift Interactive. Apparently my post was noticed, because all URLs on the webdesignsydneyaustralia.com domain have been redirected to shiftinteractive.net.  So for now at least my 53 consecutive stolen Spoonfed Design posts are off that site, and hopefully will remain so.  They are still indexed in Google with scraper URLs, but eventually these will drop out and my duplicate content problems from that particular site will be resolved. Gee, thanks, Shift Interactive!

Interestingly, a number of other domains hosted on the same dizinc server are also now redirecting to shiftinteractive.net, although the Google cache shows these sites were up and running within the past week. On socialmediaaustralia.com, for example, we can no longer see the numerous  fanboy.com posts that were there last week.  Likewise, the site seotipstricks.com no longer shows the material from the Stepforth marketing blog it had published there recently. In both cases with the author’s permission, I’m sure.

I enjoyed looking at web2.0newsroom.com (that’s web 2.0 newsroom, get it?) because up until a day or two ago it displayed the same Wordpress theme as the site that was robbing Spoonfed Design:

Apart from the visual appeal there was  some great content here too–great because it came from a great blog,  profy.com.  But now it’s all gone,  it all redirects to Shift Interactive.

Now I don’t know too much about this, but is it really good for SEO to have dozens of smammy-sounding domains on the same DNS all redirecting to your main business site? Well I guess these guys are the experts.

Thanks for the great supportive comments on yesterday’s post!

The last 53 posts on Spoonfed Design have been copied in their entirety, without permission or attribution, on the site webdesignsydneyaustralia.com. This is an example of blog scraping at it’s worst. All of SFD’s  original content published since February 12, 2009 has simply been lifted and republished on this site without so much as a thank you. The past 39 consecutive posts on the Sydney site, without exception, are posts from Spoonfed Design.

The offending site is part of a blog farm designed to funnel traffic to a Sydney-based design and SEO firm called Shift Interactive.  How do I know that? Well, Shift Interactive is owned by a gentleman named Jamie Harbison, who also turns up on a WhoIs search as the admin contact for the scraper site. When I sent a polite note to Jamie asking for removal of my material from his site, twice, I received no reply. But one thing did change: the scraper site URL stated above now redirects to shiftinteractive.net.   That has only made things worse from my perspective, as I’ll go on to explain. But first, here’s a look at the scraper site homepage as of a few days ago, from the Google cache:

Let me be clear, this is not a link blog posting titles and summaries of content with links to the original source. Click on any of those links and you are taken to the complete post with the original SFD title, author and page slug, but at the Sydney domain.   Internal links direct viewers to the previous and next post, also both from SFD of course.

The scraper homepage did previously include one single link to Spoonfed as a “contributor”  down at the bottom of the sidebar.  Good enough to justify swiping all my content? No! Because all of the actual content, all 53 individual posts, appear WITHOUT the sidebar and with no attribution or link of any sort.  And none of those pages have been removed or redirected.  With the homepage now gone the one tenuous line of credit to SFD no longer exists.  But all of the content at the Sydney web design URL still remains. 

The two header links I have circled in red are interesting. The anchor text consists of keywords related to web services in Sydney. Click on one of those and you’re taken to a page with almost no content, like this one:
Almost no content…just the chosen keyword. So what’s going on? This page accumulates page rank from all the internal links it receives  It gets one from every page in the blog.  And it has a single outgoing link with the same keyword anchor text, which of course is the whole point: passing the benefits of that page rank on to the target site, in order to boost its search ranking.  And that site is: This is the really sad part. Shift Interactive claims to be “one of Sydney’s leaders in corporate blogging, viral marketing, Social Media and Social Networking.” Elsewhere they say they are “a boutique Web 2.0 agency specialising in social media,” and “Sydney SEO specialists with over ten years’ experience in Search Engine Optimisation”. Jamie Harbison’s LinkedIn profile page makes similar claims, and boasts an impressive resume.  So why is this legit-seeming design firm going to the trouble of parasitizing Spoonfed Design?  Because they’re a bunch of unethical slimeballs I guess, and because they can get away with it.

It’s sad because there are so many opportunities to reach out and form positive connections and alliances within the design community.  This clumsy bit of SEO probably has yielded very little benefit to Shift Interactive, because all that lifted content doesn’t relate directly to their Sydney keywords.  But it’s hurting Spoonfed Design.

And that’s partly my fault.  I’ve made it easy for them. I’ve been intending to install a formal copyright notice for some time, but kept putting it off thinking it’s something I’ll get to when I finally do a full site/theme redesign.  Not that it may have made any difference in this case. I just added a copyright claim that will serve for the short term at least. All U.S. bloggers concerned about content theft should make sure they have a clearly written copyright notice such as this. It may not do much as far as prevention, but it will at least assert your rights and establish that anyone taking your content is guilty of copyright infringement, for which there are legal consequences.

I know there are some who may say, why does all this matter? I guess it doesn’t if you have no interest in traffic or search ranking for your site. But like most website owners I do have an interest in those things. Sites like webdesignsydneyaustralia.com impact me in two ways. All that duplicate content is a big negative for SEO and lowers my ranking in Google search results. In addition, the duplicate site is a competitor that may outrank me on searches directly related to my own content, even my own page titles. That’s how I discovered this site in the first place, trying to figure out why spoonfeddesign.com often shows up so poorly in Google SERPS. I get a lot of social traffic here but little from search, and here’s one reason why. These are results on a search for “color scales in Photoshop”.
Not a high traffic search term of course, but a blog like this gets its search traffic from lots of long-tail keywords such as this one.  Positions 5 and 4 are the Sydney rippoff site.  Three and two are Diggs, and I should be able to outrank those!  And what’s that site there at number one?  Could it be?  Yes! Another scraper blog, on the domain neurosoftware.ro.  Full text of SFD’s Photoshop tutorial on color scales with no links or acknowledgment.  I haven’t even begun to try to track this idiot down yet!

It’s demoralizing, and the reality is, there’s only so much time and energy one can devote to dealing with this sort of thing. The brazen nature of the Sydney design rippoff site really got to me though, so my next move is a formal complaint to Google under the Digital Millennium Copyright Act (DMCA). More to say about that in another post.

Does anyone else have experience dealing with this sort of thing? If you run a blog, how much do you care when other sites lift your content?

Summoning the Inner Tiger

In order to show a wild side to this demure young lady, we must first prepare our tiger. To save us time from doing lots of erasing on picture 1, we’re going to use the Lasso Tool to highlight around our noble beast in image 2. Then we go to the top menu bar and select Edit/Copy. From there we bring image 1 back up and select Edit/Paste.

“But dude,” you say. “That tat looks way too big for her arm. She looks more like a ballet dancer than a power lifter.” At this point it’s all good, because this is about way more than cutting and pasting. It’s about formfitting our body art to the model’s arm. Can’t you just hear the buzz of the needle and smell the green soap? Our Photoshop tattoo parlor is open for business!

Now we’ll go to Layer/Layer Mask/Reveal All on our tiger, which is now Layer 1. After making sure our foreground brush is set to black, we’re going to remove some of the white space. We’ll use a soft edged brush, size set to 65, Normal Mode, with 100% opacity, and we remove the white. Don’t worry about erasing the blue cloud effects near the tail. Since we’re masking, we can always bring back anything we need to make the image right later.

Impressing Mom

Once we have taken care to eliminate the white space adequately from Layer 1, our next task involves fitting this noble beast within the model’s arm. Go to Edit/Free Transform so we can set the first layer correctly and scale it down.

“Hey,” you say, over the buzzing of the tattoo gun. “It still doesn’t quite fit yet.” In order to make the tiger realistically form to the contours of her arm, we’re going back to Edit, but this time we’re going down to Transform/Distort. It’s okay if the proportions of layer one are out of whack since body art should fit the wearer, not the other way around. We may want to return to Free Transform at some point, and/or use the Move Tool to get it just right. Oh, and don’t mind her friends behind you taking pictures with their cameraphones. They still can’t believe she’s doing this.

Making It Sink in Forever

Once we have transformed, distorted, and moved Layer 1 to our satisfaction it should fit in like so:

Now, we are going to use layer effects to make the ink seep into the arm. After we make sure that we have the image itself highlighted instead of the mask in the layer palette, we go past the point of no return. She’s taking it like a pro, but she’s glad when you wipe down her arm with some green soap before firing up the gun once more. Go to the layer palette and set the style for Layer 1 to Darker Color. Note below how some of the white yields in the right places to the skin underneath, much like a real tattoo would.

Now to make it look more drawn onto skin than pasted onto pixels, we’re going to return to Layer 1’s mask, with our foreground brush color white. We’re going to carefully bring back some of the leaves around the edges as well as around the tiger’s paw to eliminate the fuzziness.

Now to send our valued customer off with an impressive bit of ink, we have to get Layer 1 to settle in with the existing levels of brightness, saturation and contrast. We go to Layer/New Adjustment Layer/Hue/Saturation and pull the Saturation slider back to -45.

Now we make another adjustment layer for Brightness/Contrast, setting the contrast all the way down to zero, and the brightness to -10. The colors are little more muted, which makes the tattoo look as if it has been there for a while.

Now we can’t send her off with some packets of ointment just yet. We need to warm Layer 1 up a bit so we’re going to make another adjustment layer, this time Photo Filter. Make sure the Preserve Luminosity box is checked, that we’re using Warming Filter (85), and the Density slider is set to 65%.

Now we’re going to gently soften the edges on Layer 1 (make sure it is highlighted in the layer palette, not the mask, nor the above adjustment layers we made) by going to Filters/Gaussian Blur and set the radius to 0.5 pixels. Now the hard work is done, and we can decide on our composition and mood. So after we take a break, flex our fingers, we’ll fire up the gun one more time to add the finishing touches.

Focusing on the contrast between the tiger’s energy and the model’s reflective expression, we can see how that is what drives this piece. So we’re going to crop it down to zero in on that. We will click on the Rectangular Marquee Tool and then go to Image/Crop, and select the area that is visible in the screenshot above.

Now go to Layer/Flatten Image, then to Filters/Filter Gallery/Distort/Diffuse Glow. Set the Graininess slider to zero, the Glow Amount to 4, and the Clear Amount to 9. Enhancing the gentle nature of this photo with this filter enhances the raw contrast of the tiger on her arm, making that orange seem to punch through. She is telling the world that she does indeed have teeth! RAWR!

Our customer handled her first tattoo extremely well. So now all that is left is to make sure she knows to take the bandage off after a couple hours, keep it moist with all those packets of ointment we gave her so it doesn’t scab, and don’t go swimming until it heals. Oh! I almost forgot, we need to take a picture for the studio portfolio.

We learned today that putting body art on a picture is much like an artist doing so to an actual person. We can show hidden strengths or weaknesses or even whimsy by using the tools at our disposal to make virtual body art as real as we can. Then we enhance those statements with careful use of filters, only after we are sure the hard work is done with a careful hand.

Now, if you all will excuse me, I think I may use some of the techniques we did with a picture of my cousin, a tattoo of anchor with “mom” written on it, and send a little something to my aunt to freak her out.

Accessible web design allows individuals who are visually impaired or non-readers to experience web content through screen readers, which translate text into speech. The practice of accessible design also includes modified or unique interfaces, like single button computer input devices and touch screens. It is a part of a larger movement called Universal Design, which seeks to make all parts of the world accessible for all people, regardless of ability.

This article will focus on web design. Future pieces may explore various computer interface devices designed for individuals with disabilities, but today we’ll be limiting our focus to how designers might better address the needs of all readers.

Incorporating basic principles of accessible design begins with two simple steps in the design process:

1. Use resizable fonts. Many visually impaired individuals use screen magnification programs to increase the readability of a site. Using images instead of actual text to display wordy content may look great, but will be impossible for someone using a magnifier to read.

2. Use the <alt> tag to give your images a description, which can then be read by a screen reader.

Additionally, you should avoid several other flashy trends in design, including white or pastel (or worse, darker colored) text on a dark background. Many web users complain that it is difficult to read. While dark text on a light background, preferably with a very high contrast, can be a little boring, visually, it will increase the usability of your site a great deal.

Several common sense steps can also be taken to increase accessibility, including using tables only to display truly tabular information instead of for layout (use CSS to style your pages, use HTML to build the structure.) Ensure your site remains visible and readable in HTML only, as many screen readers will use the underlying HTML to interpret the screen contents for the listener.

Another reason to focus on accessible design is that there is considerable overlap between designing web content for people with disabilities and designing content for delivery through mobile devices. The WC3 has issued guidelines for optimizing content both for accessibility and for the mobile web. Designing to meet both sets of guidelines together can make the process more efficient.

A full set of recommendations for accessible design can be found in the WC3 Web Content Accessibility Guidelines (WCAG). Recently updated in December of 2008, WCAG 2.0 presents 12 guidelines for ensuring web content is perceivable, understandable, and operable for all audiences.

Creating websites that can be experienced and enjoyed by everyone is the right thing to do; in certain cases it may even be a legal requirement. Accessible design is becoming even more important today, as many sites begin to utilize free-form or Flash based designs which render them unreadable to many individuals with disabilities. In fact, a focus on accessible design may go a long way to improving your site’s overall quality and attractiveness for all visitors.

Good header design

Here are over 40 beautiful and creative headers that do just that. Some stimulate emotions and aggressively capture attention; others are more simple and elegant. There are many different header styles in this showcase. We hope you see something you like and get inspired to try something new!

Dorotheu

Magouya

Dizzain

Dr. Martian

Enhanced Innovations

Web.Burza

Art Viper

The Octonauts

Digimuarai

Beautiful 2.0

Marchand De Trucs

Phizz

Web Designer Wall

Carton Blanc

Corvus Design Studio

Mail Chimp

Hopkins Design

Pally Giraffe

Devia

Kirdan

eruANNA

Branded 07

Cleverful

Kitschen Sink

Arbutus Photography

Octwelve

Mutiny Design

Toucouler

Orpheux Design

Cogitatur

Designwise Studios

Biola University

Lisa Moseley

Chris Hortsch

Dorian Design

Enrichmint

HTMLCut

New Era Cap Talk

Be Studios

Icon Dock

Cow & Monkey

Kimberly Coles

r0man

What if we want more organic natural color to leap out from the grayscale? The answer is not to add color to black and white, but rather to add black and white to color. We will also use filters and layer effects to insure that we manipulate the color spectrum to set the tone we are looking for.

Do You Hear Me, Butterfly?

First we’ll show the basic technique to add black and white. Using this photograph provided by Elisa Boomhower, we’ll make this butterfly leap off the screen.

First, we l go to Layer/New/Layer so we can paint over our image. Next, in the layer palette, we set the layer style to Color from the dropdown menu leaving the layer opacity at 100%. As the new layer is painted over, we can see the shades of gray take hold.

Once we have our flora and fauna in black and white, we go to Layer/Layer Mask/Reveal All. The foreground color on the brush tool should still be black and then we set the brush to a comfortable size to work up close to draw that colorful creature back out.

It is essential we take a deep breath, use a steady hand and be patient. We have to zoom in and make sure we get those little butterfly legs and the very edges of the wings in color while not going outside the lines on the flower or the grass in the background. If there’s a slipup it’s no big deal, simply change the foreground brush color to white to correct the errant cursor strokes and keep on colorizing. When our creature is completely set apart from the background, its natural hues should stand out. After we return what Mother Nature’s paintbrush gave, the finished product should look like this.

Now that we have the basic technique down, we will incorporate it with other effects to get something a little more abstract going on.

Turning a Gray World Purple

Below is a stock photo by Brittany Lincoln that we will use not just to make color stand out, but also bleed out into the surrounding water. For this the purple veil will be what is brought out for the effect.

Before we use the layer techniques and masks incorporated on the butterfly, we must first get the veil’s color to stand out a bit more. Go to Layers/New Adjustment Layer/Color Balance. We make the purple more rich by first, checking the “Preserve Luminosity” box and next ramping up the sliders for red and blue in “Midtones” up by 50 each. Finally we will have the veil ready to go after increasing the red and blue by 50 in “Shadows.”

“But,” you say. “You made the girl in the pool totally pink. What’s up with that?” The model’s extremely rosy complexion isn’t going to be a factor because we going to make a new layer and set the style in the layer palette to Color, just as we did with the butterfly photograph earlier,then paint it black. When we’re done we will have an apparently grayscale picture of our lady in the pool. Next we add that layer mask set to Reveal All, take a deep breath and patiently bring the fabric’s color back out.

Now, we need to do something a little differently compared to the straightforward emergence employed in the butterfly photograph. We see fabric just below the surface as well as parts at the far left where some of it is submerged next to parts floating on top. Keep your brush opacity set to 100% to bring out what’s above the surface but bring the brush opacity down to 20% to colorize what we can see in the water, as well as the reflection in the pool. Make sure you smoothly blend the transition points where the veil meets water by enabling the airbrush function.

When we’ve sweated enough blood making sure our pixels are straight, and have all the purple we need to emerge, our Lady in Liquid Mourning should look something like this:

The veil is set, so now what? We made the veil’s color more vibrant so it gives the impression it is almost as alive as the model wearing it, then we added our grayscale layer. We carefully brought the purple back out in another layer, making sure that even the reflection and the submerged fabric were also in color. Now we are going to make the pigment stain the gray water around it. First, we add another layer, set to Soft Light and make sure it is above the background and Layer 1.

Working in Layer 2, we’ll use our eyedropper tool to take a point sample from the veil-not too dark, but not to light either.

Now that we have our correct foreground color we are ready to make it diffuse into the water. Our paintbrush is set to 100% opacity on normal with airbrush enabled. We set the brush size big and fat to 300 and gently paint over the water in front of the model, making sure to also add the color around the model’s chest, just above the water also. For good measure we also paint a little of the water behind her to further enhance the bleeding purple effect. Next, we break out the eraser tool, set the opacity to 15% on airbrush and go over the edges of the purple field to make the diffusion a little more random.

Once we have diffused the color into the pool, our picture is almost complete, and looks like this:

Really, this picture could stand alone as it is, but purple is a rather somber color and the pool is a rather happy place, at least for those of us sweating it out in July. We’re going to finish this one off by going to Filters/Sketch/Water Paper, then setting the Fiber Length slider to 15, Brightness to 60 and contrast to 80.

When we have done that, our Lady in Liquid Mourning is complete.

We learned with this exercise that eye-popping combinations of color and grayscale can be achieved by not just adding color, but by adding black and white. We also are empowered to use the techniques above, along with other tools available to us in Photoshop, to set mood and tone in our designs after we highlight desired elements in a picture.

Whether creating more abstract pieces as we did here, or in professional designs, we are sure to create a lasting impression with anyone who is looking.

But contact pages are where things can get a little sloppy sometimes–especially if you use a contact form. A poorly designed or generic-looking contact form can create a negative impression, especially if the form look clashes with your carefully constructed design.

Contact form design may be as simple or as elaborate as you like, in keeping with the style of your site. Just make sure the form is seamlessly integrated, both visually and textually, with everything else.

Here are 30 examples of contact forms done right. There is something to be learned from each these about creative messaging and elegant design.

Christian Sparrow delivers a contact page that is simply stunning, down to the moving shadows on the drifting clouds. The hand-drawn form fits perfectly.

Stephen Reid definitely knows how to integrate his contact form with his site design.

Shylands goes all lower case and gives irregular edges to the boxes. It’s an inviting look.

Finch (Francisco Inchauste) uses compelling text design to deliver a compelling message. Brilliant.

The Fourth Star opts for a simple and neat contact form, and uses text to invite a response. “What Inspires You?” and the default “Just saying hi!” in the subject box encourage conversation.

Blank Habit sends an inviting message while making great use of font, and also announces his availability for work–a powerful combination.

Each page on Sean Geng’s site is it’s own little oasis of information set against the backdrop of space. The big drifting envelope that moves on hover makes this page’s purpose clear.

Chris Ansari makes no mistakes. This form is as simple as they come, yet still shows a fine designer’s hand.

In Sojourn has an elegant form that shows just how much can be done with size, placement and background color of entry fields.

Just two words in the right font make Daniel Oliver’s form a winner. The bold call to action is friendly and simple–makes me want to contact Dan!

Marcie Braden has a beautiful portfolio site with striking color and an unusual arrangement of elements. Why not place a contact form at the top of the page?

Neoteric Design uses a map not just to convey information but as a nice design element, with the map grid balancing the block layout of the form.

Spoon Graphics surrounds it’s simple form with some super-friendly, super-casual messaging. Nice set of icons too, an increasingly important part of any contact page.

Jared Christensen presents a stylish black on black look with his form, consistent with the rest of his site. Very appealing icon array as well.

Mark Boulton offers a classy two-column page with lots of information, including links to a brochure and project planner.

Jeff Sarmiento’s white on red SAY HELLO is the perfect touch to a beautifully designed page. The flickr images give it an inviting and personal feel as well.

Johnston North’s contact form is rich in design elements and information. The message is both a casual welcome and a call to action, supported nicely by the hand-drawn touches. He makes a statement with his choice of text links rather than icons for his social media.

Chris Christian achieves design ends with a bit of humor, rightly highlighting the inane nature of standard form text.

Ali Felski encourages visitors to contact her with a very simple contact form set within the elegant overall design of her portfolio site. That submit button is hard to resist.

Nice use of font and colors, 84 Colors! I like the many contact options including prominent Skype ID.

East 13th relies on strong contrasts and some nifty social icons. The comma after “Contact” kind of bugs me though.

At Digital Base the contact form is very nicely integrated into the larger whole. The repeated use of the logo in contrasting, muted colors gives a very professional look.

Helen Guttridge creates an artsy page built around a simple form that asks, how can I help you?

Olof Lonnroth gets all the details right in this simple contact form. The stamp graphic makes it great.

Creative Leaves gives us a breezy and elegant contact page, with a little mini-resume on the side. And another stamp!

MHebert Design reminds us that you don’t need an elaborate contact page to look good, just a very simple form perfectly placed.

Digo Art spreads the from fields horizontally across the page.

Rob Morris nails the contact page, just like everything else on his Digital Mash site. Many great features here, and there it is: the form.

Bold graphic elements make Jenny Chung’s IJC Design contact page a stunner.

Text, color, graphics–Guilherme Neumann has it all. This is just a beautifully designed page. Top honors!

OK, lessons learned: contact pages are important! And there are all kinds of great ways to incorporate contact forms in ways that enhance your overall site design.

Just watch your spelling so your contact FORM doesn’t look like this:And try to avoid this at all costs!: