The Seven Deadly Sins represents vices and tendencies that were believed to be misdeeds in early Christian religion.

The sins are as follows: envy, pride, wrath, sloth, lust, greed, gluttony.

Each sin is said to be represented by a colour. For example, envy is best represented by the colour green, which — in many cultures — is also the symbolic color of money.

I thought it would be a fun experiment to compile a showcase of a few web designs based on the colours reflected by the seven deadly sins.

Note: The web designs featured were used for aesthetic purposes only, not to imply that they characterize the sins.

Green – Envy

Envy is best described as a desire for something more and to covet other people’s belongings and status. The opposite of envy is love.

Bam Creative

Free Gobbler

PSDChimp

Violet – Pride

Pride is when a person feels more special or important than others. At its worst, pride is narcissism. The opposite of pride is humility.

idt.net.cn

Newism

shizixiu.com.cn

Red – Wrath

Wrath can be best described as anger or hatred. It is the polar opposite of kindness.

Carsonified

KMX Karts

The Salon

Light Blue – Sloth

Sloth is the act of being lazy or idle. The opposite of sloth is zeal — or eagerness to achieve something good.

philipp doms

Iconjelly

Narhir Design

Blue – Lust

Lust is the act of giving into desire. The opposite of lust is self-control.

Strutta

Blue Water Productions

MediaCore

Yellow – Greed

Greed is the desire for wealth and status. The opposite of greed is generosity.

Nikon Festival

Booreiland

Champagne Warehouse

Orange – Gluttony

Gluttony is the act of consuming more than you need. The opposite of gluttony is temperance — being disciplined and wise with resources.

Cubicle Ninjas

scorchlondon

designedbynelleke

Why do you think these colours represent their respective sins? What emotions do you feel when seeing these colours in web designs?

Related Content

• How to Use Retro Colors in Your Designs
• Color: The Next Limited Resource?
• 14 Brilliant Tools for Evaluating Your Design’s Colors
• Related categories: Web Design and User Interface

About the Author

Nick Burd is a 23-year-old Freelance Web Developer from Ontario, Canada. He can be found at many places on the Net starting at his personal blog and portfolio, Twitter and LinkedIn.

Many people find it hard to picture a website as more than a bundle of content. This often makes explaining the mixture of languages used and the way everything comes together a difficult task.

Because what makes up a website can be related and linked to the physiology of a human body, this article’s comparison should help clients and beginners alike understand the complex nature of a site’s creation and components.

Disclaimer: It’s probably worth pointing out before we start the "autopsy" that I’m not a doctor. Therefore, I recommend you don’t practice this literally on your friends and family — they won’t appreciate you peeking inside their ears to look for meta information!

Designer DNA: Schemas and DTDs

Humans have predefined characteristics for how we look. These building blocks of life are passed down to us through genetics, and when arranged properly, give us our unique appearance.

This process of evolution takes millions of years to adapt to changing environments and certainly plays a part in limiting both our structural and visual appearance.

In terms of the Web, the regulators of code "genetics" are commonly known as Schemas (you’ll be aware of these devices from DTDs).

The human body contains DNA, just like a website. It explains how your body should react.

Of course, while the process of creating a schema doesn’t take millions of years, it does take a certain length of time for new languages to appear and become widely adopted, thereby evolving the building blocks of your website.

As a result, while sites may look different, you can be assured that they only use one of a family of structural languages that predefine many of its characteristics, and what you end up with will share common elements and tags with many millions of others.

Bonus: The very inclusion of a DTD in your document can set standards for your code and avoid the obscurities that quirks mode can present to your web browser. Therefore, having this DNA, which describes the language used, can prove beneficial in inheriting Web standards.

A language specification and DTD provide the genetic material all websites use and inherit.

Skeletal Structure: The Structural Markup

The structure of the human body is made up of bones that define our basic shape — the same is true of web documents in the sense that they are shaped from various interlinking elements that form the backbone of the Web.

Most web documents are formed through languages which describe the skeletal structure of the document, such as HTML and XML. RSS is also a classic example of a markup that structures a website’s content.

Without these core markup languages, your website would not be able to maintain its layout.

All the parts of a website join up, like the bones that interconnect within your body.

While each bone in the human body serves a specific purpose, entire groups of bones can serve a single job, such as the ribs (each protects your lungs) or your finger bones which help you grasp objects.

Because this repeating purpose can exist within a website’s body, they can be distinguished by attaching conventions like microformats that can give additional semantic characteristics and value beyond what a "generic" or reused element would offer, acting as a point of bodily recognition.

Bonus: Microformats are descriptive elements (usually as class or ID values) which give your structure some recognisable semantic values — this is much like recognising each finger bone by its appearance and unique characteristic. It’s labeling your anatomy for referral!

Bones are like web page elements: They build up a logical structure that gives the body its core appearance.

Mechanical Muscles: Client-side Scripting

Being able to move allows you to interact and engage with people you meet. Without muscles, we can’t turn thoughts into a reaction.

As people expect a certain level of involvement with your site, not enough interactivity could make your site appear unemotional.

Muscles work between the skin and bones to allow both to fluidly play their part in the interaction. The same is true about sites where behaviour underpins the style and structure of a site to "flex" only when interaction is required.

When you flex your muscles, movement occurs. When a website flexes, a reaction also occurs.

Client-side scripting is the muscular component of a site. Languages like JavaScript allow interaction when visitors click, move their mouse, press a key on their keyboard or make any other noticeable gesture. This response mechanism functions just like the body in that it reacts based on its surroundings.

Simply put, the "muscles" act as a way to interact and make noticeable changes in structure (standing up rather than sitting down) or appearance (smiling instead of frowning).

Bonus: Just as humans have multiple methods of input (such as sensory mechanisms like touch, taste, sight, smell and hearing), JavaScript and other client-side scripting languages can interact and react based on its own input methods like touch, speech, automated actions and movement.

Movement and reaction are key components to both human survival and website interaction.

Nervous Reactions: The Web Browser

With scripting included in your website comes the need to send and receive information that acts upon the interaction occurring within your design. In a website, the mechanism of communicating these signals belongs to the user-agent or server that handles the requests and reflects those requests to act into a mechanism that is visible to the end user. In short: Your web browser works the mojo!

In the human body, such requests are sent as electrical signals that pass through the various organs and are broadcasted to conduct the action determined from the receptor, such as when you feel pain.

In a website, while pain doesn’t exist (except for the end user who encounters an unusable interface element like a nasty webform) the code fires signals to the browser upon examination and triggers structure, style and behavioural reactions in turn.

Bonus: The rendering engine of a browser does everything from ensuring the sites "body" appears correctly, right down to reacting upon interaction. Even the likes of Flash,which attach themselves to a browser, have their own method of "nerve"-based interaction!

Flash websites are a great example of how information is rendered to progress effects.

The Heart: Content and the Community

The heart of a website is its content — if you’ve read any "Content is King" articles, you’ll know what I mean.

With the human heart, a constant supply of oxygen needs to be pumped around the body to the vital organs — otherwise you’ll suffer long-term damage.

The same is true for the Web, when a lack of quality regularly updated content exists, the site will become inefficient in producing visitors (the life blood of a site) and will starve (as it’s abandoned), thereby giving the site’s body a fatal blow.

If the heart is healthy, the pathways will be clear. If too much damage occurs, it may break.

The website’s content is encased within the structure, securing it where it needs to appear.

The more pages you add, the stronger the structure — both internal and external — of the website will become. Therefore, as a result, it will become more resilient for when illness appears. The outdated but still constantly visited W3Schools is proof of this.

The balance of getting visitors (blood) around the body of the site will depend on how much depth and energy is put into a content-rich website.

Bonus: While not enough visitors can cause the heart to be starved of oxygen, too many visitors can have a similar effect. Just like when your heart works too hard, a sudden spike in traffic could make the server where your website is located collapse under the pressure, just like a heart attack!

Poor quality content of little visitor value will simply result in your community dying.

Blood Vessels: Information Architecture

As mentioned above, the ability to get people (the blood) to the places they need to get (feeding the site’s popularity and architecture) is one of the key elements of building a website.

The way a site takes to interlink all the bodily elements which comprise a website is commonly referred to the information architecture. This — in simple terms — is the way we organize, structure and relate pages of a web design together (and how each page is structured in itself).

This well-organized method of interlinking the needs of various components of a website can be easily be recognised in the human body in terms of the blood vessels.

As described before, if visitors are the life blood of a website, the blood vessels would be the way we address the interlinking of pages, the findability of information and how files connect to feed each other (relative to the overall site structure).

Just as blood flows in the body, humans should flow between pages and sections.

Bonus: Usability and accessibility have their place in this analysis. When dead links or poor navigation occurs, the damage caused can haemorrhage visitors (as they leave your site). The case of where a button cost millions of dollars shows this relative link in full effect!

If pages don’t link together appropriately, it can result in a loss of your sites visitors.

Sexy Skin: Aesthetics and Web Design

What makes people look human? Well, part of it is their features such as their eyes, nose and mouth, but their skin and visual appearance play an important role.

Whether someone is tall, short, fat or thin, the skin adopts the form, and is fairly elastic and flexible in how it covers all of the structures of the body.

While you’ll want your site’s skin to appear beautiful (as design is as relevant as human beauty) you also want to make sure that nothing "hangs out", looks ugly, or out of place!

Things always look prettier with skin attached; your website is no different!

In terms of web design, the primary language dealing with the style of a website is CSS. This attaches itself to your structure and layers on elements of style, which give the visible physical appearance you desire.

If you want your site’s skin to be neon green and flashing pink, though not advised, it is entirely possible!

Just like in humans, the skin is simply the outer layer that works with the internal elements but has its own unique method of affecting how the body will look to the visitor.

Bonus: Unlike humans, a website design can alter its own physical appearance dynamically. Techniques include using behaviour like JavaScript to alter style on demand. This gives sites a chameleon-like quality because they can adapt to their conditions or surroundings.

When the skin is wrapped around something, it feels like an entirely different creature.

Brain Retain: Server-side Scripting and DBMS

The thing in your head allowing you to think, remember, and behave according to your surroundings, is the closest thing to a computer you have.

The brain allows decisions — the best method of dealing with complex situations — to be made.

How does this apply to a site? There are three things that must be taken into account which apply directly between human and website anatomy. These are referred to as the acts of behaviour, memory and identity.

The brain handles a lot of stuff, even your website’s server has to take in everything it’s told!

When we talk about the behaviour of the brain, I am referring to the things we think about doing and then override our bodies to achieve, such as when you instruct your body to punch someone (thereby carrying out the punching action).

While we have already mentioned behaviour in terms of muscles, you should remember that you do not think (actively) about breathing or walking — you go through a methodology of stimulus and response (and the brain controls reactions which occur).

Bonus: Server-side scripting for dynamic websites showcase a site’s brain at work, allowing your website to make decisions based on a situation (or previous knowledge as held in storage) and act upon them rather than automatically carrying out an action (like muscles).

The brain has the ability to remember many thousands of things, and computers can do the same. When you store information within a database, it holds the information until it is requested, deleted or damaged (this acts the same as a human’s long-term memory). This information is usually organized relative to what type of information is contained, and can be easily searched or referenced to access the information without suffering digital amnesia.

Servers have to relay the content you input to a place where it can be recalled, it’s just like human memory.

Of course, everyone also has short-term memory:  Both cookies (which retain stimulus specific data like usernames and passwords) and browser caching (which contain re-usable more generic visual stimulus — like images and client-side scripts) hold the purpose of storing small pieces of information for a limited period of time.

With both long and short-term memory that can be retrieved and used until deleted or committed to a permanent and secure form of memory, it’s easy to see the human resemblance.

Bonus: Of course, the human brain is much more powerful than that of current computer systems, but the diversity of information management, memory and organization gives computers a strong relationship in the likeness the human anatomy has to websites.

Last is the act of identity: being able to know who, what and why you are.

We all have our own personalities and this is something we take for granted, but sites can have their own unique sense of self in the form of metadata.

This information is held in the head (or as I call it, "thinking" code) of each page which is not visible to visitors but explains to search engines, browsers or applications wanting to associate with the contents contextual or semantic value, just like in a reference library.

Your head does the thinking and your body visibly reacts, just like your website.

Bonus: While a site’s identity may be produced by its title and meta information, the actual information and abilities which a website contains are ultimately what determine the real nature of a website (sort of like humans having personalities reflected in their appearance).

Nature versus Nurture

While all of the above may help you explain the process of web design to clients in a way they can understand (or perhaps just give you something fun to pass around the office), it’s important to know that lessons can — and should — be taken from the relative interlinking that a site can have with how the human body is formed.

A site, just like humans, can suffer imperfections. Some can be overcome, some can’t (without a total redesign), and therefore care and attention should be given to helping overcome problems of significance.

The evolution of a website can equally be put down to a mixture of nature (what the coder puts into the site) and nurture (what the end-user adds with growth), both of which have significant importance and shouldn’t be ignored.

A website’s survival depends on many things working perfectly in synchronization. I think most of us underestimate how complex rendering a website is. Frequent testing can spot early onsets of problems.

But the most important thing to consider is that websites (just like humans) are formed of many layers, all interacting together, to which you need to apply as required (without making the site obese).

Think of your website like a child, you don’t just feed it once and abandon it. The child requires time, money, effort, care and attention to keep it healthy and help it survive into adulthood.

Websites are like humans, they have layers, all interacting and working in synchronicity.

I think it’s a fair comment to make that while standards and the way we build websites evolve, the need to make our work less static and more interactive and dynamic will aid our continued progression towards the next level of the Web.

Who knows, in a few years we could yet again find ourselves becoming even more involved and emotionally tied into our brands than we are today!

Related Content

• 10 Simple Tips for Launching a Website
• The Ingredients of a Successful Website
• 7 Incredibly Useful Tools for Evaluating a Web Design
• Related categories: Web Design and User Interface

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Engaging your visitors (audience, community, users, members, customers, or whichever term you prefer) should be your top priority. Plain and simple. Engagement is all about maximizing the value of your audience – increasing the frequency they return to the site, the tendency to tell their friends and the probability of them making a purchase.

In other words, you need to be creating value for as many visitors as possible.

By creating value, you will be increasing retention, and as most of us have been taught, retaining an existing customer is substantially cheaper than obtaining a new one. The same holds true on the Internet. Visitor retention reduces your marketing expenses and increases revenue. 

Creating a "sticky" website, where visitors keep coming back for more, requires you to improve how your website approaches content, status, personality and usability.

Engaging Visitors with Content

If you’ve spent any amount of time working on a website, you’ve probably heard the phrase "content is king". As cliché as that saying might be, it’s true.

Content — whether it’s the copy on each page, the resources you provide, or the quality of your blog posts — is the hook that keeps your visitors coming back for more. 

Unfortunately, quality content can be the most time consuming aspect of developing a website. It also can be the least gratifying (in the short term). 

Let’s examine four key aspects of engaging content.

Fresh: Content Should Be Updated Regularly

Not only is this good for SEO, but it keeps visitors engaged and lets them know that the site is active. Without fresh content, people lose interest quickly.

Targeted: Content Should Be Aimed to Your Audience

Do you know what your visitors are most interested in? Have you done a survey or spoken to them one-on-one? Producing targeted content that is both timely and relevant can make all the difference.

Valuable: Content Should Be Useful to Your Users

Everything you add to your site, whether a new feature or a blog post, should add value for your visitors. Does it help them do their job better? Does it entertain or bring enjoyment? Does it provide knowledge?

In the words of Chris Brogan , "The real winners are relationship-minded people who make not only the first sale, but all the subsequent sales thereafter. By giving your community much more value (more content, more things they can use) than just promoting your stuff, you win longer term sales relationships."

Concise: Content Should Be Clear and Straightforward

This famous quote from William Strunk, Jr. in The Elements of Style (1918) says it all, "Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all his sentences short, or that he avoid all detail and treat his subject only in outline, but that every word tell."

Engage Visitors by Giving Them Status

People love to feel important, and your community is no exception. Status is part of human nature, so find ways to make your visitors feel special.

It doesn’t need to be complex, expensive or cheesy. Airlines, credit cards and night clubs do it every day, so why aren’t you?

You can get started with the ideas below.

Examples in Online Games and Virtual Communities

Virtual status and community competition may sound silly, but it sure is addicting. You may have noticed an emerging trend online of websites and apps using gaming to engage users.

Think about FourSquare , StackOverflow  and Yelp! . All of these places offer points, badges and other "virtual status" to keep users engaged.

Concept Feedback (my own project), an online community for website feedback, uses reputation points and rank to encourage activity and return visits.

Users offer valuable advice just for the chance to earn more points and boost their virtual status. It also provides an incentive for our members to provide quality and consistent feedback.

Offering Exclusives

Offering exclusive content, access or features to select users can help drive engagement. Websites like Dribbble and Forrst , restrict access to their communities, making visitors apply or get invited by a current member to get in.

Dribbble has done particularly well, with insiders gloating over their newfound status symbol and outsiders begging for access. There is something about not being able to get in to something that makes us want to get in that much more.

If your website doesn’t seem like it would lend itself well to gaming or exclusives, think about other ways to offer status to your visitors. It could be displaying a list of top commenter’s on your blog, a customer of the month club or exclusive sneak-previews at upcoming products or services.

Engage Visitors with Your Personality

In the age of the Internet, people still like interacting with people. That’s why marketers will tell you to put pictures of people on your website, include a phone number and have a friendly About Us page with your entire family background.

While it might not be necessary to include pictures of your extended family, it does help to be "real" and create a personal engagement with your visitors. Personal engagement fosters trust, which in turn creates loyal customers.

Be Yourself

Like mother always used to say, "don’t pretend to be something you’re not". If it’s just you and your computer, that’s fine, don’t be afraid to let your visitors know.

Stu Green at Project Bubble (and now Invoice Bubble ) engages with his users, always including a picture by his name. People know he’s building his app on his own, and they respect him for that.

In certain cases, like running a bank or a hedge fund (which I hope none of you are doing on your own), too much personality can be a negative. However, I think you’ll find that pulling back the covers a little will create a more interesting, engaging environment.

Communicate With Your Visitors Regularly

As much as you can, try to respond to complaints, questions and interactions with a personal response. Include your full name, phone number and any other contact information.

Getting an automated response or "submitting a ticket" can be frustrating. Quickly responding with a short, personal note can often change a user’s perception of your website, especially following a negative experience. Follow the Golden Rule and you’ll be just fine.

Use Humor

Lighthearted content, when done well, can create a loyal following. Companies like Moosejaw and MailChimp do a great job creating content that is both informational and interesting to read.

For example, check out Moosejaw’s purchase confirmation page:

However, before you start trying to generate laughs, keep in mind that interesting, funny content is difficult to produce. It may also not translate well with a global audience. It often requires having one person dedicated to writing, or editing, all content to keep the tone and personality consistent.

Can you — or someone on your team — write interesting content on a consistent basis? Can you convey your message in a way that is fun to read but still informative? Is your audience able to take a joke (I think a little humor is good for everyone, but I also realize there are some situations where it might not be appropriate ).

Engage Visitors with a Usable Website

The other day, I stopped by the ATM to make a withdrawal.

I had entered my pin, typed in the amount and was all set to go, when I pressed the Cancel button by mistake. For whatever odd reason, the Cancel button was color-coded green. What?! The transaction was canceled and I had to get my debit card out again and start all over.

The pain was minor, but that one experience affected my response and perception of the ATM and my bank (just a little bit).

The experience you provide your visitors on your website is essential to keeping them happy and engaged.

Intuitive Interfaces

Make your website foolproof.Ask your Mom or your Aunt Helga to complete a few tasks on your website and see how far they make it. Do they get stuck on the homepage, or are they able to find their way around. A user-friendly website can make or break your visitor’s impression of you.

You can use online tools like UserFly or UserTesting to get cheap insights in to how people use your site, where they get caught up and what you need to improve.

Keep it Simple

Minimize the bells and whistles. I hate going to diners. Somehow they find a way to include every possible dish from grilled cheese to pot stickers. It takes me forever to make a decision and I usually end up wondering if I made the right one.

I prefer Five Guys – burger, fries, drink, done. Content and feature overload are the downfall of many promising websites. It can be hard to stick to one key message and call to action, but it is a much better alternative than overwhelming your visitors with a hundred different options and losing their attention due to option overload. Think Twitter , or the web apps from 37 Signals .

Some Sites and Resources to Check Out

A list of the websites and resources mentioned throughout the article:

Sites That Engage Visitors by Status

• Concept Feedback
• FourSquare
• StackOverflow
• Yelp!
• Dribbble
• Forrst

Sites That Engage Visitors with Personality

• Project Bubble
• Moosejaw
• MailChimp

Sites and Resources for Usability

• UserFly
• UserTesting
• Twitter
• 37 Signals

Developing an engaging website is hard work, but it will pay dividends. Do you have other successful strategies to share? Please let us know in the comment section below.

Related Content

• How to Increase Conversions on any Website in 45 Minutes
• 9 Ways To Improve the SEO of Every Website You Design
• Why Branding Yourself is Important
• Related categories: Content Strategy and Web Design

About the Author

Andrew Follett is the founder and CEO of Concept Feedback, a website feedback community for designers, developers and marketers. Follow Andrew and Concept Feedback on Twitter.

The About page—just about every single website has one. The About page is where site users go to learn more about the site they’re on. If you want to convert visitors to users, capture opportunities to work with people, and give your regular users a deeper appreciation of what your site does, a well written About page is your ticket.

The About Page’s Mission

The About page is the section of a website where people go to find out about the website they’re on.

Readers will visit this section for many reasons and with various questions they want answered, but your objective is the same: to inform them why they are on the site or why they should be on the site.

Who Reads About Pages?

It’s helpful to define the audience you’re writing your About page for. I can name three types of About page readers.

Group 1: First Time Visitors

This group may have been referred to your site by a friend, or may have stumbled upon one of your web pages through a search engine result or social media service. They liked what they saw and they want to decide if they should keep coming back.

Your About page, then, is an opportunity to convert a visitor to a user.

Group 2: Regular Users

Your consistent readers or registered web app users want to know more about the site that they often use. The About page becomes a means to give them reasons to keep coming back and a way to develop a greater appreciation of your site.

Group 3: People Who Want to Work with You

This group can be advertisers, content contributors, site owners in your niche, job seekers, and researchers putting together a feature about you in their blog post, interview, or school paper.

This group is interested in two things: facts and your history.

For example, advertisers might want to know if your site covers the demographic they’re targeting. Content contributors will be interested in finding out about what your site publishes to determine if the content they wish to contribute will fit with your audience.

All three groups have one thing in common: they’re evaluating the website through the About page to decide if they’re in the right place.

With these audiences in mind, here are some helpful guidelines for writing a great About page.

Provide the Basics at the Top as an Overview

Your About page should answer the Five Ws:

• Who are you?
• What do you do?
• When did you start doing what you’re doing?
• Where are you?
• How are you accomplishing what you claim to do?

It’s best to answer all these questions as a 1-2 paragraph summary at the top of your web page so that you can give your audience a quick overview of your website without giving them the burden of reading through a lot of text.

Let’s give it a shot: Here’s the Six Revisions About page introduction.

Six Revisions is a website that publishes practical and useful articles for designers and web developers. We seek to present exceptional, noteworthy tips, tutorials, and resources that the modern web professional will appreciate.

Six Revisions was launched in February 2008 by professional web developer/designer Jacob Gube (who now functions as the Chief Editor of the site). Articles are written by talented professionals from around the globe, and a high emphasis on quality, comprehensiveness, and usefulness goes into each of the articles published.

Let’s break it down.

Who are you?

…web developer/designer Jacob Gube (who now functions as the Chief Editor of the site).

What do you do?

Six Revisions is a website that publishes practical and useful articles for designers and web developers.

When did you start doing what you’re doing?

Six Revisions was launched in February 2008…

Where are you?

Articles are written by talented professionals from around the globe…

How do you do what you claim to do?

We seek to present exceptional, noteworthy tips, tutorials, and resources…

I’ll be the first to admit that the current About page summary paragraphs can be better. Some fat can be trimmed off, passive voice can be converted to active voice, I could toss out some excessive adjectives and it could mention that we also run another website.

But it does answer the basic questions that people have when they’re gathering information—and isn’t that what About page readers are doing?

The Five Ws Applied in the About Page of MetaLab

MetaLab takes the Five Ws quite literally—they abandoned the paragraph structure and went with a list of phrases for answering the questions.

Here’s their About page overview.

Structure Your Content Using the Inverted Pyramid

The inverted pyramid is a writing style where you start with the most important information first, and then you work your way down to more detailed, specific, and less interesting information. It’s an effective web content strategy because web users are impatient.

Your 1-2 paragraph summary should be at the top of your About page. For most people, reading those paragraphs will (or should) give them enough information to decide if they’re in the right place or not.

For some—especially Group 2 and Group 3—the summary paragraphs might not be enough, so you can include more interesting facts about the website.

Anything that will enrich their understanding of the website is fair game.

Consider including the following:

• Biographies of people that run the website
• Website traffic statistics and interesting facts
• How the reader can contact you
• People you’ve worked with in the past
• Technologies that run your website or web app
• Your mailing address, phone number
• Other websites that you run
• Links to social media accounts
• Graphs of website traffic
• Your company’s values as they relate to your website

You might also want to preempt questions that all three groups of About page readers may have.

Possible Questions from Group 1: First Time Visitors

• How often do you update your website?
• How can I subscribe to your website’s content?
• How do I register an account on your web app?
• How can I contact you if what I’ve read here isn’t enough?
• Are there other places on the Web where I can find you, such as social media services like Twitter or Facebook?

Possible Questions from Group 2: Regular Users

• How can I engage with your site even more?
• Are there more things I can do besides what I’m doing now that I may not know about, like subscribing to a mailing list or other RSS feeds?
• Are there other places on the Web where I can support and follow you, such as social media services like Twitter or Facebook?
• How can I contact you? Can I contact you?

Possible Questions from Group 3: People Who Want to Work with You

• What are ways that I can work with you?
• Do you publish advertisement, accept articles for publication, have a public API to use for my web app mash-up?
• What’s your website traffic like?
• What can I expect in return by working with you?

A Great Example of the Inverted Pyramid: Smashing Magazine

Smashing Magazine’s About page is a great example of the inverted pyramid strategy applied to an About page.

They start with a succinct overview about their website, answering the Five Ws in three paragraphs.

For people who want to know more, they’ve included plenty of information, structured from important and broad information, down to specific and auxiliary information, giving all three About page reader groups the information they’re seeking.

You should visit their About page to see it for yourself, but here’s an annotated outline of their About page.

Smashing Magazine’s About Page Outline

1. Succinct overview: answers the Five Ws (for all Groups)
2. Who Produces This Fantastic Resource?: a detailed biography of the Smashing Magazine team
3. Interesting Numbers: website traffic statistics such as number of comments, articles, how many servers they have
4. Credits: Other people who’ve helped with their site (their editor and regular authors)
5. More Statistics: Even more detailed statistics, including a dynamic graph of website traffic
6. A Smashing Time Line: A timeline highlighting important Smashing Magazine milestones (more for Group 2 and Group 3)
7. Advertise On Smashing Magazine: Specific for Group 3
8. Contact Us: Further down, they include more specific geographic information— their mailing address
9. Sponsors: Shows Group 3 the people they’ve worked with before

Other About Pages that Use the Inverted Pyramid

Here are three other sites that use an Inverted Pyramid content structure for their About page.

37signals

They open with two taglines: "We make it easier to get work done" and "We make products for small groups." Terse, but effectively encapsulates what the company is about.

As you progress further down the page, you’ll see their philosophies, bios of team members, other stuff they’ve done outside their web apps (such as Getting Real and their company blog), a press kit (for Group 3), and how to contact them.

UX Booth

UX Booth opens with a succinct summary paragraph (in italics for emphasis). As you progress further down the page, you’ll get a detailed overview of the topics they cover, who they are, a list of their guest authors, core team member bios, and how to contact them.

MailChimp

The About page of MailChimp takes the inverted pyramid to another level by breaking up their About section into several pages.

The first page opens with their summary paragraph that answers the question, "What do we do?" The first page covers information for Group 1 and Group 2.

For Group 3, there are the Brand Guide, Press Releases, and Jobs pages.

Using the inverted pyramid structure gives our fickle web users a way to get just the information they need without alienating the more curious web users.

Write with Personality

How you write your About page is as important as what you put in it.

Your writing style infers many things to your About page readers, such as:

Where you’re from

Australians might say "favour" instead of "favor" and Texans might conjugate "you all" to "ya’ll" (and maybe even show you a photo of their pick-up truck).

What audience you’re targeting

Your writing style might be different if your site was for biochemists versus Cubs fans.

That nature of your website/web app

Are you a professional and serious company, or a fun and playful one?

Pretend you’re having a conversation with your audience in person. Read your current About page out loud: Is it how you’d address your audience if you were, say, in front of them speaking at a conference?

Perhaps most importantly, when writing an About page, you’re showing your readers that the site isn’t run by robots—there are people behind this show. This is why it’s also a good idea to add a photo of you or your team in your About page.

The OnWired Story

OnWired, a web design agency, gives their About page a lot of personality by using humor. Their first couple of sentences? "In the beginning, Al Gore created the Internet. Websites were without form, and darkness was upon the face of the Web."

Their About page readers—potential clients—receive clues about what it’s like to work with the design agency through their writing style.

It also hints at their willingness to take risks, as shown by them going off the safer path of marketese verbiage.

What do they infer to their About page readers by writing with personality?

• They’re fun to work with
• They’re willing to take risks for innovation
• They’re not a huge corporation, they’re people
• People who’ve worked with them are also fun, innovative, and small to medium-sized

Prospective stuffy suit-and-tie clients might balk at the humor, but I’m betting that’s not the types of clients they’re after.

By writing with personality, they’ve inferred many things that an astute reader will be able to tease out.

Some More Reading About… About Pages

• About Us Information on Websites (Jakob Nielsen’s Alertbox)
• Your About Page Is a Robot (A List Apart)
• Best Practices For Effective Design Of "About me"-Pages (Smashing Magazine)

What are your tips for writing a good About page? What should you include in the About page?

Related Content

• How to Write an Amazing Article
• 10 Definitive Tips for Writing Captivating Emails
• 11 Inspiring Lessons from Web Design Experts
• Related categories: Content Strategy and Website Management

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Retro and vintage designs are valued for nostalgia and sentimental memories. You can notice that retro and vintage design is created by using rich colors, grunge elements and various textures. In this collection, you’ll find 50 retro and vintage related Photoshop tutorials. These tutorials are useful and unique, so you will learn some new techniques that you can use in your next projects.

1. Make a Retro-Space Typography Poster with Colorful Lights

2. Create a Funky Retro Wavy Text Effect in Photoshop

3. Design a Retro Styled Poster

4. How To Create a Retro Apple Wallpaper in Photoshop

5. Design a Colorful Retro Futuristic Poster in Photoshop

6. Design a Retro Summer Poster Illustration

7. Create a Mock-Retro Poster Concept

8. Super Cool Retro Poster in 10 Steps in Photoshop

9. Design a Retro Futurism Space Scene

10. Retro Wallpaper Photoshop Tutorial

11. Create a retro grunge typographic poster in Photoshop

12. Create a Stunning Retro Futuristic Typography

13. How to Make a Worn Vintage Beach Ad in Photoshop

14. Tutorial: Create A Retro Cosmic Design in Photoshop

15. Create A Retro Typography Design

16. Creating the new retro

17. How To Create a Retro Grunge Apple Wallpaper in 5 Easy Steps in Photoshop

18. Retro Modernist Poster Design with 3D Typography

19. Create a Retro Design Poster in Photoshop

20. Create a Texture Based Vintage TV Poster in Photoshop

21. Create an Abstract Retro-Pop Wallpaper

22. Amazing Retro Rainbow Curves

23. Design a Stylish Retro Game Boy Poster in Photoshop

24. Creating a Space-Helmeted Future Retro Illustration

25. How to Create a Retro Boxing Poster in Photoshop

26. Retro Geometric Vectors in Space with Illustrator and Photoshop

27. Creating an Awesome Retro Collage

28. Create a Retro Pop Art in Photoshop

29. Create a Retro Photo and Background

30. Creating A Retro Grunge Poster

31. Craft a Vintage Fifties Letter

32. Creating A Cool Vintage Collage Design In Photoshop

33. How to Design a Rockin’ 80’s Party Poster

34. Hot Chick on a Muscle Car

35. Gigposter Design: The New Sex

36. Photoshop Serigraphs

37. Super Retro Game Cartridge Design

38. Mix Cool Retro Curves Into Your Photographs

39. Retro SunFlower Design

40. Retro Lighting – Ford Mustang

41. Retro Text

42. How to Quickly Create a Stylish Retro Text Effect

43. How to Make a Planet Terror Style Poster in Photoshop

44. Create A Simple And Effective Retro Logo With a Soft Grunge Background

45. Creating a Stunning Old-World Look in Photoshop

46. Create a Wicked-Worn Vintage Pop Art Design

47. Create Vintage Traveler Diary in Photoshop

48. Designing a Typographic Concept Poster

49. Create a Vinyl Record with Retro Photo Sticker in Photoshop

50. How to make a Typographic, Retro, Space Face

Related Content

• 40 Beautiful Examples of Vintage and Retro in Web Design
• How to Use Retro Colors in Your Designs
• 40 Beautiful Examples of Vintage and Retro in Web Design
• Related categories: Photoshop and Graphic Design

About the Author

Tomas Laurinavičius is interested in web design, graphic design and web development, based in Lithuania. He’s also the founder of Iniwoo, a site about photoshop, web design, wordpress and inspiration. If you’d like to connect with him, you can follow him on Twitter.

One of Google Chrome’s best features is its minimalist interface. The browser also already has many built-in features that satisfy even the most advanced web users. In order to keep Chrome’s uncluttered user interface, it’s best to avoid installing too many extensions. Here are the five essential Chrome extensions you should use for a better browsing experience.

1. AdBlock

AdBlock removes advertisements on web pages. The extension is configurable and can even selectively block just certain advertisements on a website that you visit with its blacklisting wizard interface. The extension is open source (released under the GNU General Public License), very optimized, and well supported—the developer, who goes by Michael, dropped to a part-time job just to develop and support the extension. If you’re looking for even more ad blockage action, also check out FlashBlock.

2. WOT

Chrome already has plenty of built-in browsing security features, and is regarded as one of the most secure web browsers to use. If you’re the paranoid type and you want to up the security of your web browsing experience, check out the WOT (which stands for Web of Trust) extension for Chrome. Other users of the extension (there are millions of them) rate websites they’ve visited, making it a socially collaborative approach to browsing security. Ratings show up on search engine results and popular website links and just for the fun it, they also protect your web-based email accounts.

3. FastestChrome

FastestChrome is an extension that improves page-rendering speed and provides the user with features that increases their browsing efficiency. Some features include preloading of pages that you’ll visit next, looking up the definition of a word just by highlighting it, improved Google search results with real-time search, and more. FastestChrome is a Chrome port of the popular Firefox add-on, FastestFox (which has 10 million users).

4. TooManyTabs

Tab management for heavy Internet users is essential for efficiency. TooManyTabs improves and extends Chrome’s tab management user interface with features such as instant tab search, a bird’s eye view of all your open tabs (which is helpful when you have 20 or more tabs open in Chrome), tab sorting based on date, domain and page title, and more. Another worthwhile extension for tab management to check out is Tab Menu, which gives you a vertical menu for searching and navigating to your open browser tabs.

5. Xmarks Bookmarks Sync

Nowadays, it’s rarer that a computer user only has one computer. It’s always frustrating to forget the URL of a web page you need, and then realizing that you bookmarked it with your computer at home. Xmarks, a free web service that syncs your bookmarks, has a Chrome extension that will change the way you manage your favorite links. Xmarks for Chrome synchronizes your bookmarks, gives you an intuitive feature for searching your bookmarks, backs up your bookmarks on the Web in case of a computer failure, and even shows you the popularity of a link or search engine result based on the number of bookmarks in their service. For Delicious users, you can use the Delicious Tools Chrome extension instead.

What other Chrome extensions do you find to be essential to your web browsing experience? Share your favorite Chrome extensions in the comments.

Related Content

• 15 Google Chrome Extensions for People Who Build Websites
• The Top 15 Google Products for People Who Build Websites
• Performance Comparison of Major Web Browsers
• Related categories: Tools and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

In this tutorial, we will show you how to create a social media share menu using CSS and jQuery. We are going to create the menu using basics CSS such as the CSS background-position property and a little jQuery to make the links animated.

Final Result

Click on the image below to view the live demo.

Create the HTML

1 Let’s create the HTML first. Here is our markup.

<div id="social_nav_horizontal">
  <h3> Bookmark or Share This Post </h3>
  <ul>
    <li><a class="delicious" href="http://del.icio.us/post?url=Your website title" title="Bookmark on del.icio.us">Delicious</a>
    <li><a class="facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com"  title="Share this on Facebook" >Facebook</a></li>
    <li><a class="stumbleupon" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/" title="Stumble This Page" > Stumble</a></li>
    <li><a class="twitter" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName" title="Tweet This Page" >Twitter</a></li>
  </ul>
</div>

Style the HTML with CSS

This is how our menu looks without any CSS.

Notice that there is a CSS class added to each link in our HTML. For example: delicious, facebook, and so on. We use different classes so that we can give the links their own icons on the left (more on this later).

2 We will make the list items display side by side by using the float property. Also, we have added some padding to the link elements (#social_nav_horizontal ul li a), including 28px padding on the left so that when we add the background, there is enough space for the social media icons.

#social_nav_horizontal {
  margin-left: 100px;
  font-family: Futura, Verdana, Sans-Serif;
  font-size: 18px;
  color: #8e9090;
}
#social_nav_horizontal h3 {
  display:inline;
  padding: 0px 10px;
  border-bottom:dashed 1px #ccc;
}
#social_nav_horizontal ul {
  margin: 0;
  padding: 0;
  margin-top:20px;
}
#social_nav_horizontal ul li {
  float: left;
  padding: 5px 0 0 5px;
  margin-left: 5px;
  list-style-type: none;
}
#social_nav_horizontal ul li a {
  padding: 4px 0 0 28px;
  height: 32px;
  color: #999;
  text-decoration: none;
  line-height: 1.45em;
}

Here’s how our menu looks with the above CSS style declarations.

3 After that, we add the CSS background to each class. You can use your own social media icon sets or check out the Freebies section here on Six Revisions to find free social media icons. Note that you will have to adjust the background-position and the left padding of #social_nav_horizontal ul li a depending on the sizes of the social media icons you use.

Here is the CSS for the first social media link (Delicious).

.delicious {
  background:url(images/delicious.png) no-repeat;
  background-position:0px -1px;
}

Here is the visual representation of this code:

This is how the Delicious icon should display:

4 We add a CSS declaration for each of the social media links.

.delicious {
  background:url(images/delicious.png) no-repeat;
  background-position:0px -1px;
}
.facebook {
  background:url(images/facebook.png) no-repeat;
  background-position:0px -1px;
}
.stumbleupon {
  background:url(images/stumbleupon.png) no-repeat;
  background-position:0px -1px;
}
.twitter {
  background:url(images/twitter.png) no-repeat;
  background-position:0px -1px;
}

If everything is right, here is how it should look.

Another version: Vertical menu

So, if you want to create a CSS only menu, you’re done.

But now, we are going to add a little jQuery and change the menu’s orientation to spice it up a little. This one will be vertical menu.

5 I just took off the CSS float property from the list item declaration (#social_nav_horizontal ul li) to covert it to a vertical menu.

Add animation effects with jQuery

Time to add some jQuery. First, do not forget to add the jQuery library to your HTML page (here’s a guide for that, if you’re not familiar with jQuery).

We will be adding an effect that nudges the link to the right when the user hovers over it.

6 In the first line of our jQuery script, we select the elements we want to apply the effect to: #social_nav_horizontal ul li a.

We apply an event listener method, .hover, which will listen to the event that the user hovers over (and out of) a link item. We feed the .hover method the functions we want to execute when the user hovers over a link item (first function), and also when they hover out of the link (second function).

We use the .animate method on the hovered-over element to move them to the right by modifying its margin-left CSS property.

We also use the .stop method before the .animate method to prevent the animation from queuing it up. Basically, the .stop method will stop any other ongoing animation events on $(this) element.

$(document).ready(function() {
  $('#social_nav_vertical li a').hover(
  // on mouse over move to left
  function() {
    $(this).stop().animate({ marginLeft: '20px' },300);
  },
  // on mouse out, move back to original position
  function() {
    $(this).stop().animate({ marginLeft: '0px' }, 300);
  });
});

Here is how it looks when someone mouses over a link.

You can check out the demo to see it working.

Wrap up

That’s it! Please feel free to add any suggestions to improve this in the comments.

Download Source Files

• social-share-css-jquery (ZIP, 0.017 MB)

Related Content

• Getting Started with jQuery
• 10 Easy jQuery Tricks for Designers
• Create a Slick and Accessible Slideshow Using jQuery
• Related categories: Tutorials and JavaScript

About the Author

Kawsar Ali is a web designer, graphic designer, and photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter and check out his Personal Website.

If you are looking to learn about grungy metal, glass, water, clouds, fire, wet ink Photoshop text effect tutorials, you will find some by reading up on these tutorials. Try to play around with settings and colors on each of these to end up with your own look and feel.

Hopefully you find something that inspires you, plus maybe a trick or two on how to do something a bit different from what you’re used to. Here the best Photoshop tutorials for making text effects.

This is a follow up to a post that was published a while ago called 30 Beautiful Photoshop Text Effect Tutorials that you should also check out.

Enjoy!

1. Wooden Type Treatment

2. Remarkable 3D Text

3. Cool Wet Ink Typography Effect

4. Copper Text Effect

5. High Quality Metal 3D Text

6. Vanity License Plate

7. Transparent Text Effect with Fresh Grass

8. Retro Text Effect

9. Torn Paper Edges

10. Gooey Text

11. Starry Text Effect in Photoshop

12. Patriotic Text

13. Ice Text Effect with Photoshop

14. Stylish Retro Text Effect

15. Colorful Glow

16. Semitransparent Amorous Text Effect

17. Eroded Metal with Photoshop

18. Horror Style with Dirt and Splatter

19. Papercraft

20. Grungy Metal

21. Luminous Glass

22. Burnt Wood

23. Abstract Text Effect

24. 3D Layered Text Effect

25. Metal Text Under 12 O’clock Spot Light

26. Folded Typo

27. Cloudy Text

28. Glowing Text in Space

29. Patch on Clothes

30. Easy Neon Style

31. Jelly Fish Delight

32. Advanced Glow Effects

33. Maddening Text Effect – Unlimited Variations

I hope you enjoy these tutorials and find them useful. Thank you for reading!

Related Content

• 30 Beautiful Photoshop Text Effect Tutorials
• How to Create Remarkable 3D Text in Photoshop
• How to Create Stunning and Bold 3D Text
• Related categories: Photoshop and Tutorials

About the Author

Hilde Torbjornsen is a graphic designer/freelancer from Norway. She owns the website Designer77 and is especially interested in Photoshop, Illustrator, freelancing and photography. Follow her on Twitter: @hildy77.

Branding yourself keeps you current in your chosen field, opens doors for you, and creates a lasting impression on clients. By developing your own brand, you’ll have control over people’s  initial perception. If you don’t brand yourself, someone else will, and the outcome might not be in your favor.

Relatively speaking, a strong brand influences its target audience and works overtime to engage those who may not have been targeted at all. A successful brand self-promotes, stimulates a unique experience, breathes loyalty, and offers consistency in the quality of the service it offers.

Brands are also used as a way to connect on a universal level. Here are a few reasons on why branding yourself is important.

You’ll be an Expert in Your Field

Not everyone knows who you are, and since that means they probably have no idea what you do and how good you do it, it’s vital for you to give your skills a bit of recognition.

Branding yourself isn’t entirely about who you are as an individual, but mostly about what kind of services and goods you can offer.

A client will usually choose someone they’ve previously heard of to work on their latest project and if you didn’t leave an impression that shows you’re quite the guru in your field, you’re straight out of luck.

It would be much of an inconvenience if a client knew who you were, but had no idea about the quality of services you offered. They’d have nothing in order to set you apart from the rest, and mediocrity will follow you.

Breaking free from this mold means that you have to brand your services.

Become an Asset

Having an asset that’s unique and commands respect is a good investment, especially if you’re a freelance designer. By branding yourself, you become the asset and the product you market is your set of skills or services. You’re your own unique product and no one can take that away from you.

Structuring yourself to become the asset will add value to not only your business, but also your skills and experience. When you’re the asset, your business revolves around you and therefore you’re irreplaceable.

You will be recognized for who you are and most importantly, what you do.

Be a Memorable Force

When companies annoyingly repeat TV and radio commercials, they aren’t trying to sell you the product at that instant, they do it so that the first thing you remember when you go to a department store is their brand. It doesn’t matter what line of product you choose, as long as you go with their brand.

Same concept when it comes to branding yourself. If your brand can successfully reach out and influence potential clients when they start up their browser or need a specific project to be worked on, your brand is the first thing that pops into their minds. Having a catchy name for your freelance business that’s easy to remember is a plus. For example, when you think about quality browsers with customizable elements, who do you think of? For me, it’s Firefox. The name and image behind the brand is simply compelling.

Stand Above the Rest

What defines a brand is the services or products behind it. For example, who would WordPress be without its content management services? Just a catchy name and nothing more.

Creating a brand that stands out requires you to develop an image that is consistent with what your brand has to offer. The image you choose to represent your brand should be simple, straightforward, and convey what you or your business does. The colors you choose should provoke interest, and you should use color theory to make your logo creative and unique.

Build Trust and Recognition

Branding yourself allows you to easily engage with your clients and build trust. Once your clients begin to trust you, they’ll never forget what you have to offer. Out of building trust comes recognition. Odds are if a client trusts you, then they won’t hesitate to refer their contacts to you. Over time, this evolves into a strong relationship, which in return turns your clients into loyal customers.

Easier to Find You

A brand that’s easy to remember is easier to find. If your brand has unique properties and succeeds in attracting attention, then you’ll have a much better chance of having potential clients hear about you and easily find you as well.

For example, Apple is a strong brand that has attracted new customers by breaking standards and reaching higher levels of innovation. If you type the word "Apple" in Google, the first thing that comes up is Apple.com, not the definition or content on the actual fruit. That’s a remarkable accomplishment. The Apple brand has become a staple in its own niche, and it will always be easy to find. You should apply these same principles, offer good services, break a few standards, create a unique representation, and your brand will flourish.

How Are You Branding Yourself?

What are ways to establish a self-brand? Who are good examples of self-branding? Share your thoughts and opinion on this subject in the comments.

Related Content

• 5 Branding Basics Every Logo Designer Should Know
• 70 Excellent Logo Design Tutorials and Resources
• 10 Definitive Tips for Writing Captivating Emails
• Related categories: Project Management and Resources

About the Author

Joel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. He works with standards-compliant HTML/CSS, PHP, JavaScript and WordPress development and design. Connect with the author via Twitter.

There are quite a few reasons why having basic Photoshop skills beyond slicing PSD’s to XHTML/CSS is essential to any web developer.

I have discussed some of those reasons in this article on my blog, but to make a long story short, there are times when you just need to do minor image editing tasks but don’t want to hassle your web designer for it.

Here are common tasks and processes that web developers often need to deal with when working on a web design/web interface using Photoshop.

1. Changing the background color of an icon

As a web developer, one of the most common tasks I encounter is changing the background color of an icon or making its background transparent.

Let’s take an RSS icon for example. RSS icons come in different shapes and sizes.

When you finally find the "perfect” icon, you sometimes need to modify it. One common issue is that if your site’s background color is one color and the icon’s background is another color, to make them seamlessly match, there is a little work we need to do to it.

If the image is in GIF format, I recommend converting it to PNG because they’re similar, but PNGs will usually be smaller in file size. Read about the pros and cons of using GIF versus PNG at W3C.

To do that, open the image in Photoshop, then go to File > Save for Web & Devices (Ctrl/Cmd + Alt/Option + Shift + S), then select either PNG-8 or PNG-24 under the Optimized file format drop-down on the right-side. You’ll have to see which one is better in terms of quality and file size.

(See a guide on how to save images for the web.)

Then close the original GIF file because we are done with it, and then open the image with the new format you have just saved.

Now if you look at your Layers Panel (if it’s not visible, hit the F7 key to toggle the panel’s visibility), you might see that there is a layer called Background.

Right-click on that layer, select Layer from Background from the menu that appears, and then click OK.

Second step: use the Magic Wand Tool (W) from the Tools Panel.

1. Click on the Magic Wand Tool.

2. Make sure that the Tolerance value is set to about 20 and that the Anti-alias and Contiguous options are checked as demonstrated below.

Then click on the white (or whatever color) background area surrounding the icon.

Make sure that the selected area doesn’t "eat" too much of the shadow below the icon. If it does, play with the tolerance value a bit (and reselect the background again with the Magic Wand Tool), until you get the desired result.

To delete the background color

To delete the background and make it transparent, simply press the Delete key to clear the area below the selection. Then save it again as a PNG by going File > Save for Web & Devices, making sure that the Transparency option is checked.

To change the background color

1. Click on your Foreground color, select the desired color from the Color Picker dialog window, and then click OK.

2. Click on the Paint Bucket Tool (G). If you don’t see the Paint Bucket Tool, right-click on the Gradient Tool icon and choose the Paint Bucket Tool from the menu that appears.

Then, click inside the selected are around the icon to apply the color you chose.

2. Selecting a layer with Auto-Select

Selecting a layer may seem obvious: you click on the layer’s name in the Layers Panel (press F7 if you don’t see it).

However, finding the relevant layer can be tedious when there are many layers in your work or if the layers aren’t named intuitively.

One option is to enable the Auto-Select option:

1. Click on the Move Tool (V) in the Tools Panel.

2. Choose Layer from the Auto-Select drop down.

3. Make sure to check the Auto-Select box.

After enabling Auto-Select, clicking anywhere in the canvas itself will activate the relevant layer.

3. Selecting a layer with Ctrl/Cmd + click

A second option for selecting a layer is to use the Move Tool (V)—leaving the Auto-Select option unchecked this time—and then Ctrl/Cmd + clicking on an object in the canvas to select a specific layer.

4. Isolating a layer

After selecting a layer, you may want to copy it to a new document where you can save it as a separate image.

One way to do it would be using the Crop Tool (C).

However, there is a quicker way that preserves the accurate size of that layer:

1. Hold down Ctrl/Cmd and click on the layer’s thumbnail. This should make an automatic selection around the objects in that layer.

2. Press Ctrl/Cmd + C (shortcut for Edit > Copy)

3. Press Ctrl/Cmd + N to create a new document. Photoshop detects the size of the layer you want to copy and creates a new document with the same size.

4. Click Ctrl/Cmd + V to paste into the new layer.

5. Copying a layer from one document to another by drag and drop

There are many ways to copy a layer or a group of layers from one PSD file to another. However, the easiest method is simply to drag and drop them.

1. Select a layer from the Photoshop document you wish to copy from. If you need to copy multiple layers, hold down Ctrl/Cmd and click on the layers in the Layers Panel.

2. Select the Move Tool (V).

3. Click anywhere in the canvas and drag the layers up to the tab of the document you want to copy the layers to.

The window will switch to the second document. Release the mouse button in the canvas where you wish to place the copied layers in the second document.

6. Refining a selection by contracting or expanding it

In the first tip, I demonstrated how to select the background of an icon. In some cases, the selection is inaccurate and you may want to expand or contract that selection from all directions.

First, to get a closer look at your selection, press Ctrl/Cmd + + which will zoom into your work.

Go to Select > Modify > Expand or Select > Modify > Contract.

Type the number of pixels you wish to expand or contract your selection by, and then click OK.

7. Using Layer Comps

When working with many layers, it is more efficient to capture different layer visibility states. In other words, it’s best to set a layer’s visibility to display only the layers you want to.

1. Display the Layer Comps Panel by go to Window > Layer Comps.

2. Click on the Layer Comps menu and select New Layer Comp or click on the Create a new layer comp button at the bottom of the Layer Comps Panel.

3. Type the name of your Layer Comp, check the Visibility option and click OK.

Toggle Layer Comps

To hide and show your layer comps, just click on the icon on the right side of the layer comp.

8. Basic image manipulation: changing colors

Another common task in Photoshop is duplicating a part of a layer for color changes or transformation.

Here’s an example. The following icon is used as a menu button:

How can you create a duplicate version of the house (only), and make it black and white? This is a situation that often occurs when you need to create mouseover effects on a web page.

1. Click on the Rectangular Marquee Tool (M).

2. Select the house on the canvas. Then press Ctrl/Cmd + J to duplicate it into a new layer.

3. Click Ctrl/Cmd + U to adjust Hue/Saturation for the new layer. Scroll the saturation left to turn the house to black and white.

The result:

Remember that you still have the colored version of the house. To view it, just toggle the duplicated layer’s visibility.

9. Using measurement tools

As a web developer, you often need to measure objects for pixel-perfect accuracy when rendered on a web page. A common example is calculating menu item sizes for creating CSS sprites.

Here are two methods to measure elements:

Rulers (Ctrl/Cmd + R)

1. Click, hold, and drag from the top left corner of your rulers towards the canvas.

2. Release the mouse button where you want to start the axes.

3. Zoom in (Ctrl/Cmd + +) to view finer increments of the rulers.

Tip: To change the measurement units of the rulers (from inches to pixels for example), double- click on the ruler itself to open the Units & Rulers Preference dialog window (or go to Edit > Preferences > Units & Rulers) and select the desired measurement unit.

The Ruler Tool (I)

1. Click on the Ruler Tool’s button on the Tools Panel (if you don’t see it, right-click on the Eyedropper Tool and switch it to the Ruler Tool).

2. Click and drag from the start to end-point that you wish to measure.

3. Check the width and height indications.

Got Photoshop tips for web developers of your own? Please share it with us in the comments.

Related Content

• 21 Advanced Photoshop Tips, Tricks and Tutorials Roundup
• The 50 Best Photoshop Tutorials of 2009
• 70 Excellent Photoshop Resources
• Related categories: Photoshop and Tutorials

About the Author

Omer Greenwald is a web developer, blogger and WordPress enthusiast. He specializes in HTML, CSS, JavaScript and PHP. You can check out his blog called WebTechWise, which shares tips and tutorials for bloggers and site administrators. To connect with the author follow him via Twitter as @WebTechWise.