Today I’d like to say something about channels in Photoshop. Many beginners barely know how this works, so I’ve made a simple image that explains it all. You can find the channels tab in your layer window.

There you can see four channels. The first one -called “RGB” which stands for “Red Green Blue”- actually combines the three others below. Why these three colors? Because these are the three basic colors of your screen. By combining these colors you can make every other color you want. If you want to know more about this I suggest you read this wiki.

The red channel contains all the red colors of your image, the Blue channel the blues and the green channel the greens ofcourse. When you select the red channel for example, you only will see the areas that contain red, but in black and white style. This may sound weird, but if you look at the red 1 at the image it makes sense. The green two is only visible at the Green channel because it’s pure green and does not contain any red or blue. The white 4 is visible on all channels, because you need all the basic colors to make white. To make the orange 8 you need a lot of red and a bit of green.

Channels are often used to retouch photos or give them a special effect. Try playing with the levels, curves, brightness, contrast… of your channels to give to see the effect.

While browsing the Happy Cog Studios website, I noticed the unique navigation menu. It does not consist of a few simple words that link to another page, the menu is actually a sentence. This is the only site I know using such a special menu.

From SEO point of view this is a wise choice. Search enginge bots will use the text on top of the page to describe the website. This text contains the site’s keywords and link them to their pages. I think this is the best menu you can have if you want to rank high in search engines.

Since the menu is a sentence, the user is almost forced to read it. The visitor immediately knows what they can expect. But this is only effective for navigation menus with a small amount of links. You don’t want your visitors to read a whole book before they can navigate through your site.

Maybe I should make this kind of navigation too? I’ll start right away with thinking of a few scentences.

P.S.: I’ll be on holiday to Italy for 2 weeks, so I won’t be able to post then.

Today I’ve published another tutorial. In this tutorial I teach you how to make abstract glowing swirls. I think they give a relaxing effect, they would look good in a wallpaper or something. Enjoy!

Glowing swirls tutorial

Today I’ve optimized the layout for Internet Explorer 6. Some readers complained that the menu was pushed down to the bottom of the page. This was caused by (another) Internet Explorer bug. IE6 doubled the margin and padding of some elements. The hacks I tried didn’t work out very well, so I adjusted the width of my wrapper. The lack of a minimum height bug argrument (it’s not a bug, thanks Deathshadow) in IE6 was easy to fix with this hack:

min-height: 1148px;

height: auto !important;

height: 1148px;

This kind of bugs are very frustrating to webmasters and designers. In my opinion Microsoft is a bit lazy and doesn’t want to fix those bugs, although IE7 fixed some of them. I haven’t encountered a css bug in Firefox!

I’m seeing more and more people using Dreamweaver and Frontpage for webdesign lately. Please don’t use them to make ‘professional’ sites. They produce really bad code. You can put it to the test: make a simple site in Frontpage or Dreamweaver and validate it for HTML or XHTML. You’ll probably find a lot of errors, especially when it’s a big site. If you want to make professional websites, learn to code manually. It’s not that hard to learn HTML and CSS.

These kind of people use a lot of tables in their design too. Tables are the worst thing you could ever use to lay out your design. They take much longer to load than a div, and make your filesize unnecissarily large. Browsing through your code will make your eyes hurt and finding a specific element in your code will take much more time.Tables were designed to show you tabular data, not a whole layout.

deathshadows’ comment on the use of tables:

I would argue your bit on tables - They are usually only larger if you put the presentation in your markup as you can style a table with CSS, They are often LESS code which means they often take less time to LOAD, though I think you are thinking ‘render’ - which is not true either if you put add ‘table-layout:fixed’ to your CSS. As to browsing through the code if the designer used proper indentation and coding practices this should be no less painful than going through div’s.

So when you use your tables properly and not for your whole layout there shouldn’t be a problem.

Always been wondering how to take a screenshot of a webpage longer than your browser window? Me too. Until I discovered the Screengrab add-on for Firefox. Screengrab saves a webpage (or a selection of it) as an image. It saves your image automatically to your desktop. You can choose between a JPEG or a PNG format. I wish I had discovered this add-on earlier.

Click here to install the add-on right away.

id you see that button at the bottom of this page? That’s a W3C XHTML valid button. You can click on it to validate my site. The first time I validated my blog I got around 40 errors. After two hours of fixing errors I got my blog error free. But why would I want to have my blog XHTML valid? My blog worked without validation too, right?

Having a website with XHTML errors will also make the pages load slower, depending on the amount of errors. The webrowser has to fix the errors before loading the page. That’s why you can’t really see the errors (except with a validator or by looking at the source code).

There exist various webbrowsers, and they all fix these errors differently. So in some cases your webpage will look different in FireFox than in Internet Explorer for example. You’ll probably want all your users to see the same page.

I think validating your site is worth the effort. What about you?

A few days ago I made a RandomBase wallpaper with a 3D text effect. Then I thought: “Well why not let my readers know how to make some nice 3D text?” You can view the tutorial here. The tutorial is a little complicated but if you follow the steps carefully it will work. This is how the text looks on my wallpaper:

3D text tutorial

I’ve added a new tutorial to my blog. It’s a tutorial about adding a bloom effect to photographs. A bloom effect is a kind of dreamy effect. It makes your image look a bit sunny too. To show you the difference I’ve compared an image with and without blooming effect:

No bloom            |            Bloom

Bloom effect tutorial

As you can see I’ve added a tutorials page to my blog. I will regulary add Photoshop tutorials to this section. The first tutorial added is “How to make a nice userbar“. Make sure to check it out!