Google Chrome is Google’s newest web browser, released on 3 September 2008 with much fanfare all over the world. Whether or not you actually want to use the browser for your daily browsing, there are 6 things about Chrome that you need to be aware of as a webmaster, since they actually affect your website.
Google Chrome from a Webmasters’ Perspective

1. Chrome is a Force to be Reckoned With: You Now Need to Test Your Site with It

No webmaster should underestimate Chrome. When Firefox wanted to increase its user-base, it had to launch a massive publicity campaign, involving probably millions of volunteers, paid advertisements in newspapers and so on. When Chrome launched, Google didn’t have to bother with any of that. Everybody on the Internet spontaneously talked about it. It was big news. The launch even made it into many newspapers without Google having to pay for any advertisements. Within a day or two after the release, some technical sites reported that their web statistics show that between 5% to 10% of their users were using Chrome.

There are a few things to be said about this:

• The exact percentage will probably stabilise over time. Right now, the sudden jump is probably because there are a lot of people curious about Chrome and are trying it out. They may or may not continue to use it. Only time will tell. And the fact that these are technical sites should also tell you that the users are more likely to be people who are willing to try out new technology. It doesn’t necessarily mean that they will stay with it.

• However, don’t fool yourself with this and be lulled into complacence. The huge publicity, and the fact that the publicity is not just through official channels (like some press release) but from ordinary bloggers and webmasters, will have long term effects. I have a feeling that Chrome’s rise through your website’s statistics will be nothing like the glacial rise of Firefox, Safari and Opera.

What I’m saying is that you will probably need to add Chrome to the staple of browsers you test your site with.

2. Chrome Uses the Same HTML/CSS Rendering Engine as Safari and Konqueror

Since Chrome was built using WebKit, the rendering engine used by the Safari browser and inherited from Konqueror, sites using purely HTML and CSS that rendered fine in Safari will probably appear the same way with Chrome.

In general, for most sites coded according to web standards, that have their HTML and CSS code validated, and are tested with standards compliant browsers like Firefox, Opera and Safari, Chrome’s release is a non-event. However, this applies to sites that only use HTML and CSS, and do not use JavaScript in any significant way.

3. Chrome Uses Its Own JavaScript Engine

If your site is heavily dependent on JavaScript, as it may be if it uses AJAX or makes use of JavaScript to do fancy tricks, testing your site in Chrome is a requirement. Chrome uses its own JavaScript engine rather than the one used by Safari or Konqueror, so its implementation may cause your code to behave differently.

4. Chrome Automatically Adds Your Site’s Search Box to the Browser’s Search Engine List

If your site’s visitors search your site from a search box on your main domain, Chrome will automatically your site’s search facility to its internal search engine list. After that initial search, those visitors can search your site directly from Chrome’s address bar.

For example, if you search for (say) “how to a register domain name” on the main page of thesitewizard.com, and later in a new tab want to search for “the fine print in web hosting”, just type “t fine print in web hosting” in the address bar, and the address bar’s drop down box will provide you the option of searching using thesitewizard.com’s search box. (The initial “t” followed by a space is merely the first letter in “thesitewizard.com”.)

What this means for webmasters is that if you have not added a site search engine to your site, now is the time to do so. A handy shortcut to search your website directly from the user’s machine is a fantastic way to remind your visitors of your site, and perhaps give them an incentive to return to it.

A couple of things to note, though:

• For this to work, the initial search must be done from a search box on your main domain. That means if you don’t have a search box on your main page, put one there.

• The search box should be a normal HTML search box, and not something fancy created in JavaScript or Flash.

5. Your 404 Pages Must Be Bigger Than 512 Bytes

I’m sure you’ve seen those “404 File Not Found” error pages in the course of surfing the Internet. Those error pages are displayed when you enter (or click) a web address that does not exist on the website in question. Some websites customise their 404 error pages so that it is less unfriendly.

If you want your own custom 404 error page to be displayed when a visitor reaches a non-existent page, you need to make sure that your page is larger than 512 bytes. Otherwise, Chrome will ignore your page and use its internal 404 error page. Its internal error page will include suggested alternatives to your visitors. Depending on the URL your visitor typed in, the page may show a link to your home page, as well as other possible alternatives. It also displays a Google search box, prefilled with what Google thinks the visitor is looking for, so that your (now former) visitors can try other sites to find the information they want.

(Before you rush out to condemn Google for this practice, you should note also that Internet Explorer also provides its own error page if your site’s error page is smaller than a certain size. So this behaviour is by no means restricted to Chrome.)

Although Chrome’s error page is (at this time) free of advertisements, and seems to provide relevant suggestions, the page is neutral with regards to your site. In other words, a visitor who arrived at your site originally intending to find Widget XYZ on your site, may well be distracted by the (pre-filled) Google search box and try searching for the widget elsewhere on the Internet. Not creating your own 404 error page in such a case, may lose you potential customers.

I personally think it’s best to create your own customized 404 File Not Found page. Your page doesn’t have to do anything fancy. Just point your visitors to your main page and provide them a way to search your own site for the missing page.

(For those who want to see an example of the 404 page that Google Chrome shows when you reach a non-existent page, try this link on example.com. You should, of course, be using Chrome when you click it, otherwise you’ll just get the site’s 404 page.)

6. Chrome User Agent String

For those of you who do browser sniffing in your scripts, or need to adjust your web statistics software, Chrome identifies itself on my Windows XP test machine as:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

(A script that does “browser sniffing” is one that checks what browser the visitor is using and works differently depending on the browser used.)

In other words, you can check for Chrome specifically by scanning for the word “Chrome”. If you want to classify browsers that use WebKit together in one category, it looks like a check for “AppleWebKit” or “Safari” should do the trick, although I don’t know if all browsers utilising WebKit place those words in their user-agent string (other than Safari and Chrome).

Chrome is new. But its features present both opportunities for webmasters as well as potential problems that they need to look out for. As a web designer and developer, this is not a browser you can ignore.

Copyright © 2008 by Christopher Heng. All rights reserved.

You may think that since English is so widely used all over the world, that if you create your website in English, it can be easily understood all over the world by those conversant in the language. While it is true that the English spoken in one country is mostly the same as that spoken in another, there are some variations that you may want to be aware of, so that you can reduce misunderstanding when your site is read by English users in another country.

Note that this article was written from the point of view of a webmaster who learnt things the hard way and is addressed to other webmasters so that they can benefit from the mistakes I’ve made. It is not designed to be an academic treatise on the subject. And it is definitely not exhaustive.

“… [We] have really everything in common with America nowadays except, of course, language.” — Oscar Wilde, Canteville Ghost.

Major Differences Between UK and US English

Here are the main things I find that I need to look out for, language-wise, when writing my content. Note that although I refer only to the differences between US and UK English, there are undoubtedly differences with the other English variants as well. The basic ideas below are, however, relevant to all variants.

1. The Most Obvious Difference: Spelling

Probably the most obvious difference between the various forms of English used in the world is the spelling of a large number of English words. I have written about this previously, from the point of view of search engine visibility, in my article “Your Website’s Spelling and the Search Engines”. For example, numerous commonly-used words are spelt differently in the US compared to the UK and most of the world. I recently had a visitor inform me that many words on my site were misspelt with an “-ise” ending (the UK/International spelling) when it should have had what was to him the correct spelling, an “-ize” suffix (the US spelling). The list of spelling differences between US and UK English is surprisingly long, and includes my very use of “learnt” and “misspelt” above (US English usually uses “learned” and “misspelled”).

Although this difference is very glaring, it is also the least problematic where the comprehension of your content is concerned. Most people encountering a variant spelling are unlikely to misunderstand it. At worst, they’ll regard it as a spelling error.

There are however implications for your site’s search engine listing. Since I’ve already discussed those implications at length in my above-mentioned article, I will simply refer you to that article.

2. Different Words for the Same Concept

Perhaps more problematic is that the different English variants have different words for the same concept. This extends even to the very basic things in the language like punctuation marks. For example, what UK English calls a “full stop” is in US English a “period”. What I call “capital and small letters” is in the US “upper and lowercase letters”. “Torch” and “petrol” in the UK are referred to as “flashlight” and “gas” in the US.

If you want your content to be understood correctly no matter which country your reader comes from, it may sometimes be necessary to add explanatory notes or qualify such words that do not occur in the other variant of English.

The problem for most webmasters, of course, is not that they are unwilling to add explanatory notes. Most of the time, the problem is that they don’t know that other countries use different words. After all, if you have lived all your life using a particular word for that object or concept, chances are that you won’t even think twice about using it. And quite frankly, it’s impractical to search both the US and UK dictionaries every time you need to use a word, particularly since variant terms seem to occur with everyday objects and concepts rather than esoteric terms.

3. Same Words with Different Meaning

Far worse than the above two categories is the situation where a word has different meanings in different countries. This can lead to a major misunderstanding of your web pages. For example, “football” means a completely different game in the UK from the US. A “public school” has opposite meanings in the US and the UK. “Brackets” in the UK refer to “(” and “)” while a number of US English speakers take it to mean the square brackets “[" and "]“. The “first floor” in the UK is the floor above the ground level while it is understood to mean the ground level in the US.

(Yes, I know. It’s a wonder we can communicate at all.)

Once again, if you are aware of such possible differences in meaning, you should either substitute with words that mean the same thing in both countries, or mention the alternative for the other variant.

Practical Suggestions

1. Anticipating Problems: Is There a Way to Know if My Language is Going to Cause Problems?

Apart from reading widely about the subject and being sensitive to the way those from other countries write/speak, I’m not sure that there is a simple method that you can use with 100% confidence to preempt communication hiccups. In fact, I notice that a number of books get converted from UK to US English (and probably vice versa) when they cross countries, probably for the same reasons I give in this article, so even if you were to buy (say) novels written by someone from another country, you may not be getting the words the author originally used.

2. Aids to Writing: UK and US Editions of Dictionaries

However, all is not lost. As you write the content of your site, look up crucial terms that you use in both the US and UK editions of your English dictionaries, to see if there are any variances that you need to take into account. Notice I said that you need both US and UK editions — it won’t do to simply have (say) the Merriam-Webster English Dictionary, which only gives the US version of English. You will also need a UK dictionary, like (say) Concise Oxford English Dictionary, to give the UK version.

If your use of the dictionaries is sporadic, you may be able to get away with just checking one of the online dictionaries: thefreecountry.com’s Free Online English Dictionaries page lists both US as well as UK dictionaries. I also note in my reviews on that page the variants of English supported in each dictionary, as well as those that provide both the US and UK variants of a word.

As I said earlier, it’s obviously impractical to look up every single word you are going to use in your website. Perhaps one way around this is to look up only important terms.

3. After the Fact: Feedback from Your Visitors

Another way to deal with this, albeit somewhat belatedly, is to learn from your website’s visitors after you publish your page. This happens every now and then on my site. Kind-hearted visitors sometimes write in to tell me of errors they spot on my site. Even if these are not real errors that must be fixed, they are helpful in that they point to a possible difference in English used on my site and that expected by my visitor. If the “errors” are such that they can cause misunderstanding, I modify the article to clarify. After all, one of the benefits of publishing to a website rather than to a physical book is that you can easily correct errors or clarify misunderstandings.

Divided by a Common Language

There are of course also other differences between the English variants, including differences in punctuation, colloquial expressions used, etc. As far as I know, where my sites are concerned, the other differences have not posed a signficant hurdle to my visitors understanding my content, so I’ve not bothered to mention them above. Nonetheless, to use a cliché, knowing that there are possible problems is already half the battle worn. Just the awareness of communication hurdles is enough to make one more careful.

It is my hope that this article will help you when writing the content for your site, so that you can minimise any misunderstanding arising from the many English variants extant in the world.

Copyright © 2008 by Christopher Heng. All rights reserved.

I’m sometimes asked by visitors thinking of starting their own website what terms like “HTML”, “CSS”, “JavaScript”, “PHP” and “Perl” mean. Or, on occasion, their questions on some other topic show that they have misunderstood the meaning of these words. This article explains the terms and discusses what knowledge is actually necessary for creating a website.

What is HTML?

When you write a normal document using a word processor like Microsoft Word/Office, your text is saved in a file with a special format. It is not simply saved as the string of words you typed since the document needs to preserve things like the font you chose, the size of the text, which words are in bold, which italics, and so on. The special format includes not only your words, but all these extra information so that the next time Word opens your document, it can display the document with the exact appearance you created earlier.

In the same way, web pages are simply strings of words put in a special format that web browsers are able to display. While the format of Word documents is simply called “Word format” (or “doc format”), loosely speaking, one might say that web pages are formatted using “HTML”. Take the paragraph of text in the box below for example:

This is an example paragraph to illustrate what HTML is, for the purpose of explaining common terms like HTML, JavaScript and PHP.

If you were to peek into the raw code for the above words, you will see the following:

This is an example paragraph to illustrate what HTML is, for the purpose of <a href=”http://www.thesitewizard.com/html-tutorial/what-is-html.shtml”>explaining common terms like HTML, JavaScript and PHP</a>.

Notice that it is more or less like the text given earlier, except that there is additional information embedded. For example, the portion that says <a href="http://www.thesitewizard.com/html-tutorial/what-is-html.shtml"> (which I placed in a different font above to make it easier to spot) tells the web browser that what follows, until </a> is reached, is to be regarded as a link pointing at the web address http://www.thesitewizard.com/html-tutorial/what-is-html.shtml

When the web browser sees this information, it makes the words “explaining common terms like… [etc]” appear as the blue underlined text that represents a clickable link. The rest of the text is just displayed as-is.

Do I Need to Learn HTML to Start My Own Website?

Just as you do not have to know the nitty-gritty of the “doc format” in order to create a document in Microsoft Word, learning HTML is optional for creating websites.

You can simply use a web editor to create your website, the same way you use Word to create a normal document. The web editor allows you to type your text in the usual way, underline your text, make it bold, add pictures, and so on, using an easy-to-use interface. Tutorials for the most-used web editors can be found on thesitewizard.com in the following pages:

• How to Create a Website with Dreamweaver CS3 – for the commercial Adobe Dreamweaver editor
• How to Design and Publish Your Website with KompoZer – for the free KompoZer editor
• How to Design and Publish Your Website with Nvu – for the free Nvu editor

You should also read The Beginner’s A-Z Guide to Starting/Creating Your Own Website because there are other things involved in making your own website besides designing the web pages.

For those who are curious, “HTML” stands for “Hypertext Markup Language”. Basically, it’s just a means for formatting your document. There’s nothing esoteric or fancy about it, just as there’s nothing special about the Word format or any other document format.

What is CSS?

Cascading Style Sheets, or CSS, allow you to specify things like the font you want on your page, the size of your text, whether the page is to have 2 columns, whether your text is to be in bold or italics, and so on. In other words, it is the part that lets you control the appearance of your web page.

You may be used to the Microsoft Word “doc” format, where everything from the text you type to the appearance of the document is specified in a single file, transparent to you. On the web, the raw information is specified in HTML and most of the appearance is determined by the CSS.

If you use a web editor like those I mentioned above, you won’t have to bother with which parts goes into the HTML portion and which parts goes into the CSS portion. Everything will be taken care of by the editor.

For those who like to know the gory details, you can read my Introduction To Cascading Style Sheets (CSS). However, if you are using a web editor, you don’t need that information since the editor does everything for you, so don’t worry if that article is too technical. (It wasn’t written for the absolute newcomer.)

What are JavaScript, PHP and Perl?

Since the HTML/CSS combination is analogous to the data found in a Word document, it is good only for displaying information.

If you want your web pages to do different things depending on the situation, you will need a programming language. For example, some websites want to provide a membership facility where people can log into the site, and access certain information. Other sites provide a feedback form so that visitors can contact them. All these things require facilities that a simple document format cannot do.

JavaScript, PHP and Perl are three of the most commonly-used programming languages on the Internet. They are used by websites to carry out more complicated operations.

Programs written in JavaScript run in the web browser itself, so if your website has a JavaScript program, the program be automatically fetched by your visitor’s browser and executed on his/her computer. PHP and Perl programs, on the other hand, run on the computer where your website is located, that is, on your web host. After the PHP or Perl program does what it needs to do, it sends the result to the visitor’s web browser, which merely displays the results.

Apart from the above difference, from the point of view of a non-programmer, there’s not much point asking what the difference is between the languages, say, between PHP and Perl. It would be like asking what the difference is between English and German, or some other human language. They’re just different languages that you can use to write web-based programs. Each computer language has its own strengths and weaknesses.

Learning a programming language is vastly different from creating a website whether with a web editor or directly in HTML. Although I have tutorials for things like learning to write programs in PHP (and the other languages), many people will find programming a difficult undertaking, unless they already have a programming background or an inclination towards programming.

For the most part, it is not necessary to learn JavaScript, PHP or Perl to create your website. In fact, even if you want your site to do complicated things, you can often find pre-written programs to do the job for you without your having to dabble in programming. For example, if you need a feedback form on your website, just use thesitewizard.com’s Feedback Form Wizard to generate one yourself. It will create a customized script for you — all you need is to plug and play. (Note: if you’re using one of my web editor tutorial series above, this is taught in one of the later chapters.)

Other pre-written programs can be found in the relevant sections on thefreecountry.com. There are too many pages on that site to list here, so you should just go to one of the following index pages and look for the program you need. (Note: the word “script” in the context below merely means “program”.)

• Free PHP Scripts (thefreecountry.com)
• Free Perl Scripts (thefreecountry.com)
• Free JavaScripts (thefreecountry.com)
• More Free JavaScripts (thesitewizard.com)

In general, when you’re looking for a script, you don’t really have to bother with the language, ie, whether PHP, Perl or JavaScript. Just look for the type of script you want. If you use a commercial web host, both PHP and Perl are usually supported, so the exact language doesn’t really matter (although PHP scripts tend to be easier for novices to install). As for JavaScripts, don’t worry. Since JavaScript programs run on your visitors’ computers (in their browsers), support from the web host isn’t needed (unless you use one of those free web hosts that delete JavaScripts from your pages).

It’s Not As Difficult As You Imagine

Creating a website is not as difficult as some people imagine. Yes, you will have to learn how to use new software (like a web editor), but some people hit a mental block because they are confronted with obscure jargon like “HTML”, “CSS”, “JavaScript” (etc) that are used everywhere. But as you can see, these terms aren’t really the gigantic obstacles they appear to be at first. And when using a good web editor and tutorial, you’re practically insulated from the technical hurdles and challenges that is suggested by these terms.

Copyright © 2008 by Christopher Heng. All rights reserved.

Technique 3: The Extract Technique

As with the Background Eraser technique, it’s a smart idea to set the source for the History Brush early in the procedure, in case you need to do some touch-up later on.

1434_22 (click to view image)

Now, let’s run the Filter > Extract command. (In earlier versions of Photoshop, this was located under the Image menu.)

1434_23 (click to view image)

The Extract dialog box will appear. With the Brush tool selected, draw an outline around the object you wish to extract. The outline should overlap both the object and the background. Use a Brush size that is big enough for you to outline comfortably, but small enough to outline any details of the picture. (You may switch Brush sizes while you’re outlining.) The outline will be highlighted in the window.

1434_24 (click to view image)

If you need to zoom in while you’re outlining, hold down the Space Bar to change the cursor temporarily to the “hand” icon. You can then click and drag to move around in the picture. Let go of the Space Bar when you’re ready to go back to drawing.

When you’ve completed the outline, change to the Paint Bucket tool.

1434_25 (click to view image)

Fill the areas that you wish to “keep” with the paint bucket tool.

1434_26 (click to view image)

Click the Preview button to see how the object appears when extracted.

1434_27 (click to view image)

Here’s what my preview looks like. It’s good enough for my purposes, so I click “OK” to apply the Filter.

1434_28 (click to view image)

Again, I use the History Brush to restore parts of the object that were erased or partially erased.

1434_29 (click to view image)

And again, I use the Eraser Tool to get rid of stray pixels around the edges.

1434_30 (click to view image)

Here’s the final picture (with drop-shadow applied):

1434_31 (click to view image)

Extract Filter Technique:

1. Set source for the History Brush in the History Palette.
2. Use Filter > Extract command to outline, fill, and Extract object (1:45 minutes).
3. Use the History Brush to restore parts of object (1:45 minutes).
4. Use the Eraser Tool to clean up the edges (1:30 minutes).

Total time: 5 minutes

My take: This method, while a little faster, didn’t seem much different from the Background Eraser technique. However, I have found that the Extract Filter works quite nicely when you have objects with a lot of fine details (like hair blowing in the wind, tree branches, etc.) that would be a pain to try to isolate. The Extract Filter works best with objects on solid-colored backgrounds.

Technique 4: The Quick Mask Technique

If you’ve never used Quick Mask mode in Photoshop, you’re missing out on a huge time-saver! Quick Mask mode lets you use brush, pencil, paint bucket, etc. tools to paint an “inverse selection” using shades of grey and black. (Black identifies parts that won’t be selected; grey identifies parts that, when selected, will have some level of transparency.) When you switch back to Normal mode, the “clear” parts of your Quick Mask are selected so that you can apply changes. We’ll use Quick Mask mode to paint the background of the image, then apply a Layer Mask to hide the background.

Click the Quick Mask icon in the tool palette to switch to Quick Mask mode.

1434_32 (click to view image)

Using a fairly large brush, with the foreground color set to black, I’ll start to block out the background. You’ll notice that the masked areas in which you paint will turn pink.

1434_33 (click to view image)

The large brush size allows me to color in the main areas of the background fairly quickly.

1434_34 (click to view image)

I can then use smaller brushes to fill in the details around the edges.

1434_35 (click to view image)

Eventually, I have the entire background colored in pink:

1434_36 (click to view image)

Tip: You may change the foreground color to white if you want to “paint back” parts of the object.

Switch back to Normal Mode, and you’ll see the selection. Because everything that’s painted in is not selected, the final result is that the bee is selected.

1434_37 (click to view image)

At this point, I click the Layer Mask icon at the bottom of the Layers Palette to create a layer mask, which essentially isolates the bee from the background.

1434_38 (click to view image)

So, here’s the final picture:

1434_39 (click to view image)

And in summary:

Quick Mask Technique:

1. Switch to Quick Mask mode and paint everything you want to get rid of.
2. Switch back to normal mode and use the resultant selection to make a Layer Mask.

Total time: 6 minutes

My take: A great method, because it gives you precision-control over what gets selected. This method works well for any picture — solid background color or not. The only unfortunate aspect of this method is that, for some objects, you may see a “color halo” where the edges have picked up on some of the background color. (One way to get around this is to take a little more time and paint around the edges with a grey airbrush to make the edges a little transparent.)

Note: This same type of effect can be achieved by creating a Layer Mask, then painting on the layer mask with black paint to hide the background. The two techniques are virtually identical — I just chose to write about Quick Mask because I’ve already covered the concept of Layer Masks in another article!

Pen Tool Technique

My final technique will be to use the Pen Tool to create a path that outlines the object, then use the path to create a selection for a Layer Mask.

Choose the Pen Tool. In the horizontal options bar, make sure that “Paths,” not “Shape layer,” is selected. Then, start using the Pen Tool to create a path around the object. I find that it’s helpful to zoom in for greater detail.

1434_40 (click to view image)

Here’s my completely outlined bee. You can see all the different points that I created using the Pen Tool, as well as the resultant path.

1434_41 (click to view image)

Open the Paths palette and Ctrl-click (Command-click for Mac) on the path layer. This creates a selection from the path. In the diagram, you can see the dotted line that shows the selection.

1434_42 (click to view image)

If you have a pretty solid-shaped object, you can skip the next step. Because I have a fuzzy, plush object, I’m going to feather my selection slightly so that the edges will be a little blurred. I choose Select > Feather and make a Feather Radius of 1 pixel.

1434_43 (click to view image)

Finally, I click the Layer Mask icon in the Layers palette to create a layer mask from my selection. This hides the background and isolates the bee.

1434_44 (click to view image)

Here’s the final picture:

1434_45 (click to view image)

In summary:

Pen Tool Technique:

1. Use the Pen Tool (set to “Paths,” not “Shape Layer”) to create an outline of the object.
2. Ctrl-click (Command-click for Mac) the path layer to make a selection.
3. Use the selection to create a layer mask.

Total time: 3 minutes

My take: This method works for any object, regardless of the background, and is also quite precise. It’s reasonably fast if you’re comfortable with using the Pen Tool; otherwise, this method might take a long time! This method is probably better for objects that have crisp, hard edges, and, similar to Quick Mask mode, you may have a slight color halo if the object has picked up some of the background colors.

Goodbye, Tension Headaches!

So, there you have it: five different ways to isolate an object from a background! Here’s a quick summary of the different methods and when I think they’re best used.

1. The Magic Eraser Technique Great for erasing backgrounds that are mostly all the same color that contrast with the object (set a high tolerance and use one click!), but may involve a bit of touch-up work at the end. No good for objects that are on multi-colored backgrounds.
2. The Background Eraser Technique This technique would be great on a photo object that is already “isolated” but has a solid, contrasting background color. Even still, I might pass up this technique for the next method, as they’re essentially the same and I think the Extract method goes a little faster.
3. The Extract Filter TechniqueWorks best for erasing mostly solid-colored, contrasting backgrounds. Photoshop also does a nice job of getting rid of the color halo problem – but you may have to do some additional touch-up work at the end.
4. The Quick Mask Technique Almost the ideal solution: relatively quick, pixel-perfect control over edges, and works with any kind of background. Plus, by using a layer mask, you don’t actually delete any part of the background. The only complaint I have with this method is that you may get a color halo.
5. The Pen Tool Technique Fantastic technique for objects with hard edges, and it works with any kind of background. You can be as detailed as you want to get a perfect outline, and you can always go back and modify the path if you need to. Plus, you get lots of practice using the Pen Tool.

Please feel free to download the sample file that holds all the layers with the different techniques applied, so that you can get a close-up look at how well each solution performed.

Page 1

from : http://www.sitepoint.com/article/masking-techniques-photoshop

Isolate objects. Extract objects. Cut out an image. Remove a background. Call it what you will, each of these phrases describes the same objective: take a photo and isolate an object in it from the rest of the image, without the background.

Browse any major Web store and you’ll see this kind of imagery used heavily within product catalogues. Go to any stock photo or image source, and you’ll find “photo objects” of various household items set against a blank white background.

But, without guidance, trying to achieve this effect with your own photographs can be time-consuming and frustrating. You might try to use the lasso tool to outline the edges of the object (and then have to start all over when your mouse slips), or use the eraser brush to painstakingly wipe away pixels from the edges of the object. But a few attempts with these techniques result in crossed eyes and the beginnings of a migraine headache. There must be a better solution!

In this article, we’ll explore five different methods to isolate objects in Photoshop. As you follow this tutorial, you’ll gain a how-to explanation for each technique. You’ll also get the stats on how long each method takes, and my opinions as to when each method is most appropriate.

The methods I’ll demonstrate include:

• Using Photoshop’s Magic Eraser tool
• Using Photoshop’s Background Eraser tool
• Using the Extract command
• Using Quick Mask mode to make a selection and layer mask
• Using the Pen Tool to make a selection and layer mask

Here’s the image I’ll be working with (the actual document is 800×600 pixels):

1434_1 (click to view image)

I found a slightly wrinkled piece of white silky cloth and placed a stuffed animal on it. If you have control over the photography, a good rule of thumb is to try to provide a solid-colored background that contrasts with your object. (If I had a white object, I’d probably use a darker piece of cloth.) Of course, sometimes you just have to work with what you have. Don’t worry, though: some of the techniques we’ll discuss will work for any kind of photograph!

Do you have a photograph ready,and Photoshop open? Then, let’s get started with the Magic Eraser technique…

Technique 1: The Magic Eraser Technique

1434_2 (click to view image)

The Magic Eraser tool (hold down the Eraser icon in the toolbar to access it) allows you to erase pixels that are all the same color (or are a similar color). If you used the Magic Eraser tool at its strictest setting, and clicked on a part of the picture that was orange, every other pixel in the picture of that exact shade of orange would be erased. We’ll use the Magic Eraser tool to erase the whites and greys in this photo.

First, we’ll change a few of the tool settings. By increasing the Tolerance, the Magic Eraser tool will erase “similar” colors as well (whites/greys). By checking the “Contiguous” box, the Eraser tool will only grab pixels of similar colors that are next to each other — that way, I won’t accidentally erase the whites of the bee’s eyes.

1434_3 (click to view image)

My first pass is set to a Tolerance of 72. I click outside of the bee, in the “white” area. After only one click, Photoshop erases most of the background in the picture – not bad! If the Tolerance is too high, you might inadvertently grab some bits of the object as well. If that’s the case, just Undo and try a slightly lower Tolerance level.

1434_4 (click to view image)

For my next few passes, I set the Tolerance to 32, and use the Magic Eraser tool a few more times in the grey “shadow” areas. In the diagram below, the left image shows the shadow before I used the Magic Eraser. The right image shows how a bit more of the shadow is erased with a single click of the Magic Eraser!

1434_5 (click to view image)

Unfortunately parts of the shadows are so dark that trying to use the Magic Eraser would end up erasing some of the black parts of the bee as well. So I stop using the Magic Eraser at about this point:

1434_6 (click to view image)

From this point on, I switch to the “normal” Eraser tool and set it to Brush mode. I zoom in and erase the shadow portions by hand. I also create a new layer underneath this one, and fill it with red (or any other contrasting color) so that I can see the “smudges” that were missed by the Magic Eraser. Then, I use the Eraser tool to wipe those out as well.

1434_7 (click to view image)

For the final touch, I add a drop shadow just to make the bee “pop out.”

1434_8 (click to view image)

Here’s the summary:

Magic Eraser Technique:

1. First pass using Magic Eraser Tool: 72 tolerance, contiguous, anti-aliased.
2. Second pass using Magic Eraser Tool: 32 tolerance, other settings same.
3. Used Eraser tool (brush mode) to clean up edges, stray pixels, and shadow area.

Total time: 4:08 minutes

My take: This technique makes it easy to isolate objects that are on solid-colored backgrounds, although you may need to spend some time with touch-up. Beware of stray pixels and forget about using this technique if you have a multi-colored background!

Technique 2: The Background Eraser Technique

1434_9 (click to view image)

The Background Eraser Tool (again, hold down the Eraser tool to access this option) is meant to be used along the edges of an object. The center of the brush determines which similar colors to erase. The Background Eraser Tool will also change the edges of an object slightly so that you don’t get a “color halo.” We’ll use the Background Eraser Tool to isolate and define the edges of the object, then erase the other pixels on the “outside.”

Before you progress very far with this procedure, open the History Palette and, in the left column, click on the state to which you’d want to revert if you needed to “clean up” later on. If you’re starting from scratch, this might be the only stage in the History Palette. In my case, I clicked on the state immediately before I started to use the Background Eraser (I got a little ahead of myself). We’ll refer to the state you choose as the “source” for the History Brush.

1434_9a (click to view image)

The next step is to select the Background Eraser tool and choose a brush size that isn’t too big, but will comfortably allow you to outline the image.

1434_10 (click to view image)

You’ll see a round cursor with a crosshair in the center. The important thing is to keep the crosshair from touching the actual object (if it does, the object will be erased). So, as you draw along the outside of the object, keep the crosshair just outside the object. You’ll see that the outside’s “similar colors” start to be erased.

1434_11 (click to view image)

Continue around the entire object. You may notice that parts of the image get “eaten away.” Don’t worry – we’ll use the History Brush later to bring those parts back.

1434_12 (click to view image)

Here’s the bee after I outlined it completely with the Background Eraser Tool:

1434_13 (click to view image)

Now, let’s get rid of the rest of the background. Select the Magic Wand tool, set the Tolerance to 100, check the Contiguous box, and then click on the background.

1434_14 (click to view image)

Most of the background should be selected:

1434_15 (click to view image)

Go ahead and hit the Backspace key to delete the background. Use the Eraser tool to clean up any obvious stray pixels.

1434_16 (click to view image)

Now, select the History Brush tool. The History Brush allows you to paint over the image and “restore” the parts you paint to the “original state” that you selected in the History Palette.

1434_17 (click to view image)

Adjust the brush size of the History Brush as necessary for detail work. Then, start to clean up the inside edges of the object, being careful not to go outside those edges.

1434_18 (click to view image)

Finally, I use my red background trick again to catch some of the stray background pixels, then use the Eraser tool to get rid of them.

1434_19 (click to view image)

My final image, with drop shadow applied, looks like this:

1434_21 (click to view image)

Here’s the summary:

Background Eraser Technique:

1. Set source for the History Brush in the History Palette.
2. Used Background Eraser Tool to outline the edge (2 minutes).
3. Used the History Brush Tool to touch up parts of the object that had been erased (1:30 minutes).
4. Used the Eraser Tool to clean up the stray background pixels (2:23 minutes).

Total time: 5:53 minutes

My take: This is my least favorite of the techniques because I had to zoom in a lot and use the History Brush Tool and Eraser Tool extensively. This technique would have worked better with an object that had solid edges (as opposed to the fuzziness of a plush animal), as well as a more-solid background color. A situation in which this technique might work well would be one in which you had a photo object that was already “isolated” on a white background, and you wanted to use it as a floating object in a layered composition.

Page – 2

from : http://www.sitepoint.com/article/masking-techniques-photoshop

In case you’re wondering if you need anything special to run JavaScript, the answer is no. You just need your browser. The only trick is to have JavaScript enabled in the browser, which is how most people have it set.

I am not trying to teach you JavaScript here. I am just trying to provide you some snippets of code you can use directly of-the-shelf to enhance your pages.

Display today’s date You can use this JavaScript small bit of code to display today’s date anywhere in the page. Just insert the code where you want the date to appear. Enclose all this code between script and /script tags.

var days = new Array(‘Sunday’,'Monday’,'Tuesday’,'Wednesday’,'Thursday’,'Friday’,'Saturday’); var months = new Array(‘January’,'February’,'March’,'April’,'May’,'June’,'July’,'August’,'September’,'October’,'November’,'December’); var d = new Date(); var weekDay = days[d.getDay()]; var month = months[d.getMonth()]; var day = d.getDate(); var year = d.getYear(); var suffix = ‘th’; if (day == 1) suffix = ’st’; else if (day == 2) suffix = ‘nd’; else if (day == 3) suffix = ‘rd’; document.write(weekDay+’, ‘+month+’ ‘+day+suffix+’, ‘+year);

This piece of code will display the date in this format: Monday, April 3rd, 2006 . If your site is in a language other than english, just replace the days and months names. You can replace the suffix letters so they don’t get displayed either, by changing ‘th’ to ”, ’st’ to ”, ‘nd’ to ” and ‘rd’ to ”. If you want to change how the date is displayed, to make it look like this, for example: Monday, 3 April 2006 , you need to move things around a little in the document.write line. This is how the document.write line should look to display the date in the format I just mentioned:

document.write(weekDay+', '+day+' '+month+' '+year);

You can notice we have removed the suffix part here.

If you’re wondering why would you like to display today’s date in the page, the answer I give you is: to provide your visitors the impression that your page is updated very often. That the page is up-to-date. Anyway, I think it is a nice touch.

Display a message in the status bar You can use this small bit of JavaScript code to display a custom message in the browser’s status bar. Enclose all this code between script and /script tags.

window.status = 'This is my message.';

Paste this piece of code somewhere in the body of your page, and replace the This is my message text with the message you want to show.

You can combine both pieces of code and display today’s date on the status bar if you wish. Just use the code piece to display the date, and replace

document.write(weekDay+', '+month+' '+day+suffix+', '+year);

with

window.status = weekDay+', '+month+' '+day+suffix+', '+year;

There is much more you can do with JavaScript to implement dynamic functionality in your page, including animation and menus. You will find scripts on the web you can use for free to implement these, or you can get someone to program the exact utility you need. In the meantime, I hope you enjoy these two snippets of code I provided today.

1. Browser Compatibility-If you are trying to use tables to control the appearance of your web site, you may be able to achieve the exact look you want on a single browser (such as Internet Explorer). However, when people visit your web site with browsers like Firefox, Opera or Safari, your layout may be completely broken. If you want to make sure that users from any browser get the best experience from your web site, you need to start using CSS. Although it’s not perfect, CSS will ensure that visitors don’t leave your web site because of a broken layout.

2. Easier to Update-Wouldn’t it be nice to change the font color with a single line of code? With CSS, it really is this simple. Although updating the appearance of a large web site that only uses HTML can take days or weeks, CSS keeps all your style information on a single page.

3. Faster Load Times-By using an external .CSS file, you can significantly reduce the load time of every page on your web site. This is because a browser can cache all of the style information for your pages instead of needing to load every tag over and over again.

4. More Attractive Pages-This is probably the most obvious advantage of CSS. CSS can accomplish things that a HTML only web page could never even come close to doing. CSS really does give you complete control over how you want your web site to look. An well-designed web site will always be perceived as more reliable than one that does not look professional.

Too Many Fonts

You should strive to keep the number of fonts to no more than two. I typically prefer a serif font, which is a font that has “feet” if you will, such as Times, for body copy. Then I create my headlines with a san serif font such as Helvetica to distinguish paragraphs from one another. Too often, a novice designer will attempt to experiment with too many different fonts in the same piece. Keep it down to two if possible.

Too Many Design Elements

Another issue concerning novice designers is that they tend to cram in as many visuals as they can. All in a bid to display their design skills. It’s important to remember that you are trying to convey a message and get the viewer to react to your design. You are not trying to show off your design skills because more often than not, you will create an eyesore and distract the viewer.

Colors

Like all of the other elements in your piece, you should control the amount of colors used. Generally, two complementing colors should be used, with a third color for accent. This is a general rule so you can be flexible. Just remember, keep it simple!

Keep It In The Family

It’s important that all of the elements in your piece complement one another. Each image you use should relate to any other image in the piece, thereby creating a consistent theme to your piece.

I hope these guidelines can help you be a better designer. Keep in mind that you want to reel the user in so keep it simple, legible and attractive. If you can master this idea, you’re on your way to a great career in graphic design.

Article Source: http://www.webmastertips.us/story

When you’re concerned about web design, Denver businesses should take into consideration their customers over anything else. While you want to make sure your site is filled with all of the SEO enhancers that you can find, making a site that’s accessible and pleasant for customers is what will keep your traffic numbers up. Here are some tips to make sure you’re getting the most out of your web design.

Easy to read pages – When customers arrive at a web site that’s difficult to read, they tend to leave almost immediately. If you’re not presenting clear web design, Denver businesses will see a decrease in their traffic counts and thus their profits. To help ease the reading for the customers, it will help to have large lettering that is simple in style as well as clear links and menu designs that are easy to follow and access.

Fewer colors – While some web sites try to shock a reader into reading what they have to say, this isn’t the best technique.When it comes to web design, Denver web sites that use muted colors tend to attract more return customers. It’s just not easy to read fluorescent colored pages or pages with conflicting color patterns. But when you use simple black and white with muted color accents, you create a site that is inviting and easy to read.

Simple opt in functions – Too many other sites want to ’show off’ what they know about web design. Denver web sites that keep things simple tend to fare better because they’re aren’t as complicated. Try to limit the features that your customers can use on each page as well as the steps that are required to use them.While you might want to offer new and exciting opt in functions, when your customer can’t figure out how to use them, they aren’t going to be successful. Also, try not to ask for too much information in the original opt in sections. Customers can be hesitant to provide this information, so they’ll avoid it altogether.

Multiple pages with continuous updates – When you continuously update your web pages, it shows your customers that you are as interested in the web site as they should be. In terms of web design, Denver sites that make sure that they have plenty of content are often the most visited by customers. Part of this is because of the fresh content, but another part is due to the fact that search engines rank these kinds of pages higher.

Links to relevant sites and content – By providing multiple venues for your customer to obtain the information they need, you’re increasing the efficiency and the usefulness of your web design. Denver businesses that include links to other pages will help customers feel as though you want them to succeed in their search, even if you can’t offer them what they need.

For great web design, Denver businesses need to look at their sites from the customer’s perspective and not just from the design angle.

Article Source: http://www.webmastertips.us/story

To your computer, everything is a number. After all, computers are much better at processing numbers than anything else. Unfortunately, we aren’t quite as good at numbers and we prefer words. When it comes to website addresses, DNS helps bridge that gap.

Every computer on the internet has a unique number, called an IP address. When you visit a website, you are connecting to the IP address of the website’s server and you are receiving information from that website’s server through that connection. In order to request a web page, you need to know the IP address of the website’s server. More specifically, your computer needs to know the IP address so that it will know what website you want to connect with. DNS to the rescue!

DNS stands for Domain Name Server and is a collection of servers that act like a phone book, storing an extraordinarily long list of domain names and their corresponding IP addresses, When you type “www.bravenet.com” into your web browser, it connects first to your Internet Service Provider’s DNS server and asks it for the IP address that corresponds to the domain name “bravenet.com”. If everything goes well, the DNS server replies with 65.39.176.94, and your web browser will then communicate with the Bravenet web servers and you will be able to exchange information.

If you were to call your long lost friend, you would take out your phone book and look up their name (Bravenet.com) to find the associated number (65.39.176.94). When you call the number, you are connected through to their house (server), where you finally talk to your friend (exchange information).

A phone book is updated yearly, while a DNS server is updated every 24-72 hours and this is why there is a wait period of 72 hours before your domain name will start pointing to the website that you are pointing it to.

by Jamie Macey