Fortunately, it’s possible to put facts on the table. W3C has issued guidelines for making web content more accessible, and these guidelines contain a formula for determining the readablilty of any combination of text color and background color. I think proper use of this formula would go a long way in ending readability discussions.

There are several web tools for determining if the readability is approved or not. I have not been able to find any iPhone, so I decided to write one myself.

Contrast for iPhone

Contrast for iPhone

Contrast for iPhone is an app that lets you enter the foreground color and background color and instantly receive a preview and a readability approval. You can enter the color in HSV, RGB or HEX values.

I personally think the best thing about this app is the bar that shows how far you are from meeting the requirements, and I think the best way of using the app is to apply a reasonable amount of fuzzy logic when deciding on the best color combination. Keep in mind that the formula is pretty strict about font sizes, and it doesn’t consider font faces at all, so I recommend using common sense if you are using very large or very small fonts, or fonts that are thinner or thicker than average.

I made this app and put the smallest possible price tag on it in order to learn by getting first hand experience about iOS development and iTunes marketing.

I hope you will like it, and if you do or don’t, please let me know below!

We have now published the new website for The Alien Abduction Lamp, and we are showing a picture of a prototype for the first time! The picture shows the last prototype, and there will only be very small changes (if any) before production starts.

If you have been following the progress for this lamp since the start, you will notice that we have managed to produce a lamp that is very true to my original 3D renderings. The way from concept to prototype has gone very well, without having to compromise on any important details. The few changes that have been made from the renderings to the final products have been by will and by listening to your feedback in my little survey rather than by necessity. The most noticeable change is the removal of the ornaments and pattern to arrive at a more timeless and clean result. You probably also noticed that it has taken quite a while, but seeng the beautiful result, I think it has been worth the extra time.

The UFO itself is very solid and cast in metal with a beautiful black pearl finish (you can’t really see how nice the finish is in this otherwise great photo). The antenna functions as the on off switch, and it also has a third position for pulsing light. And of course it comes complete with glow-in-the-dark aliens, real fake grass and a poor removable bovine abductee!

The Alien Abduction Lamp. Photo by Tiger Global

Now, pull out your 3D glasses and head over to abductionlamp.com to take a look for yourself!

(Those of you who have sent me a message with your email from the old website do not need to send a new one now.)

Freshome were among the first to write about the Alien Abduction Lamp back in june 2007, and I have been following them since then. They have now included the Alien Abduction Lamp in their list of 40 of the most creative lamp designs ever. I recommend this article to get a look at the other lamps. I am very happy to see the Alien Abduction Lamp in such great company.

Two Alien Abduction Lamp prototypes arrive at Oslo airport

Standing before me on my desk at home is a fully functional prototype of the Alien Abduction Lamp – complete with lights and alien pilots.

As the designer of this lamp, I am not going to begin to describe the feeling of holding a physical version of the lamp that I have been working with renderings and models of for the the last year and a half. 

I suppose that your first reaction is to want to see a picture or a video, but I am afraid that I can not show any images yet. This is after all a prototype, and as with all prototypes, the overall look is somewhat different from what a final product.

Please trust me for now when I say that the lamp looks fantastic! I am convinced that those of you who wanted a lamp after seeing the computer generated images will definitely want to own the real thing.

When will it be available?

I have had a long and productive meeting with the representative from the company in London who is in charge of sourcing this lamp from a highly experienced lamp factory in China. We were both very happy with how the lamps look, and we agreed on a relatively short list of amendments that need to be made before we can say it is finished.

Messages keep ticking in daily from abductionlamp.com to ask me if this lamp is available yet, so I know there are many people wondering how long it is going to be before we start shipping the lamp. Drew agrees with me that making the product as good as possible is more important than rushing to meet a specific date.

All I can say right now is that the heaviest work is behind us, and that we are rapidly ironing out the last minor issues. We are working to have the lamp ready as soon as possible, but we have not set a final deadline yet. I think you will agree with our priorities and be happy that we are making no compromises once you see the final product.

Limited edition

We are considering a special opportunity for all of you who have followed the lamp faithfully by sending messages at abductionlamp.com and by posting comments with your email here at herrklein.com. You will be the first to know, and we will invite all of you to be the first to get a chance to order a limited edition sample with a certificate that I will personally sign for you as soon as we get the lamp ready.

Kind regards,

Lasse

I am happy to announce a project that I have been working on for a while now.

The Abduction Lamp is not meant to be a toy. It is supposed to be made in high quality from metal and glass. It is my hope that someone with a playful mind like yourself would want to have a lamp like this in their home.

How does it work?

A light source inside the UFO body lights up the windows and the cone shaped glass beam. The beam glass is frosted to diffuse the light enough to spread it in all directions.

A true UFO Lamp

I got the idea for the abduction lamp as I was driving past a lamp store one late evening and saw how the light fell from one of the lamps in the window. The idea stuck in my head, and I returned the day after and saw that it was a quite common lamp.

I have spent a while building and rendering it in Maya, and I will return with some of my experiences with the visualisation process in a future post.

A new theory on abduction

Visit abductionlamp.com for more images. You will also find my new theory on why aliens are busy abducting cows and people..

Update

The Alien Abduction Lamp is moving from concept to prototype.

To publish or to protect

Like many others, I have a few ideas that I am constantly playing around with. And like many others I even think that some of these ideas may one day be materialized into releasable products. It appears that one should worry more about waiting too long before publishing an idea than about having the idea “stolen”.

My Concept Watch

Below is the first quick sketch that I made of watch concept back in 2002. It is hardly a beauty in this first rendering, but the point here is the concept itself. I have not done anything with it since then, so I guess I deserved what I had coming…

Research

A little research told me that the idea of presenting time in this fashion is nothing new. I found Mark Newson’s ingenious version of the same general concept. This is a wall mounted clock where tiny magnetic balls indicate the time.

Newson’s watch put me off the idea a little at first, but I still felt that my own concept added something to this because it was a wrist watch without any glass. The idea was that it should be made entirely out of metal. But I did not give up on the watch entirely, and I was planning on pursuing the idea after finishing a couple of other projects I am working on in my spare time.

Recent Events

I was quite disappointed to find this post the other day. It is basically the same thing, but obviously taken a lot further in the visualization process:

Preparing for the Future

Fortunately, this was not my favorite among my three concept watches. But this certainly makes me think. Ideas are volatile entities that pop up where you least expect them, and it is just a question of time before someone else comes up with a similar thought.

I would be very happy to hear some thoughts on this. Is it best to publish the idea and hope that nobody grabs it from you? Should the idea be patented first? Is it better to try to sell it as soon as possible?

I guess the answer to the above is whether one is doing it for fun, fame or fortune. But who says you can’t have them all

I was recently hired by Opera Software to give a course on television design for the team responsible for adapting the Opera web browser for Nintendo Wii. With more than six years of experience in designing interactive applications and motion graphics for television, I found that this was a great trigger to write down some of the knowledge I have gathered throughout the years.

What does a designer need to know?

There are many resources on TV design out there. Most articles tend to be very technical and detailed, so I will attempt to keep this article focused on what you really need to know as a graphic designer. I have often seen that otherwise great designers without TV experience struggle with getting TV design right, and I have received designs for television from external consultants in many strange sizes and formats. A large and well known advertising company once delivered their final designs in Powerpoint !

These are transitional times as people are moving to the new and slimmer LCD or Plasma TVs. But it will take a while for the fat old CRT TVs to disappear, so we may need to consider both old and new systems for quite a while yet.

Cathode Ray Tube Televisions – CRT TVs

Traditional television sets have a series of flaws and quirks that tend to puzzle novice tv designer. CRT TVs may have quite a lot of overscan (see “lost real estate”). One would expect newer CRT screens to have less overscan than older screens, but this is not always the case. The fact that TVs are judged by the flatness of the screen and the sharpness in the corners make many tv manufacturers increase the overscan in order to score higher on these parameters.

The refresh rate of CRT screens can be quite low, which may accentuate horizontal flickering in your images due to the interlaced signals (see “flickering images”).

PAL and NTSC pixels are not square. An image that looks fine on your PC screen will look stretched on TV, and a raw TV image will look squeezed on your PC. NTSC pixels are taller than they are wide, while PAL pixels are wider than they are tall. This is something you should be aware of to help you fix it if your design looks stretched, but you shouldn’t get too hung up in this unless you are drawing logos or circular elements that need to be accurately rendered. You may apply one of the following workflows to fix images that appear stretched on television:

• Design in 768×576 px and scale down to 720×576 px to adjust for non square pixels for PAL.
• Design in 720×540 px (some prefer 640×480 px) and scale to 720×486 px to adjust for non square pixels for NTSC

LCD and Plasma Televisions

LCD and plasma screens have a fixed number of “dots” or pixels in width and height that make up the image. This is called the native resolution of the screen. The native resolution of the screen determines if the screen is HD ready or not. If your image has the same dimensions as the screen, it will be shown as it is. If not, it will be scaled to fit the screen with a slight reduction in image quality.

Plasma screens are particularly vulnerable to graphics “burning” into the screen. This is also an issue with LCD screens, but to a lesser degree. You can help avoid ruining your users’ expensive screens by reducing the contrast of graphical elements that stay in the same place for longer periods of time.

Modern LCD- and Plasma screens have less overscan than traditional CRT screens. Most have square pixels, but there are a few exceptions.

Both LCD- and Plasma screens have square pixels. Interlaced signals will be converted to progressive images again with a slight reduction in image quality.

Lost Real Estate

The hardest to get a grip on for a non-TV designer is the fact that the entire screen can not be used freely. A certain amount of the picture area will get cropped off along the edges of almost all television screens. This is called overscan. Zero percent overscan means that the entire picture is visible, but this is hardly ever the case.

A CRT TV may have more than 10 percent overscan. An HDTV will have about 5 percent or more overscan. If you believe that your HD designs will be viewed on an SDTV, you may need even more margin to compensate for the fact that the sides are cut off to reformat the footage for SD.

For these reasons, you should not place anything that you want to be sure that the viewer sees outside an area covering 80% of the full picture. This is called the “Title Safe” area. Similarly, everything you would like to be visible should be within 90% of the picture. This is referred to as the “Action Safe” area.

Keep in mind that these are just general guidelines. All TVs have different amounts of overscan, and these numbers are only meant to make sure that important elements are visible on all TVs. Still, many designers tend to take these numbers too literally. They falsely make the assumption that they can align design elements to these guidelines, only to find that some TVs cut off parts of their design, while others leave an unintended margin. A CRT TV may even present the image off center, leaving different margins on each side.

Resolution Chart

TVs come in a wide variety of flavors. Here is an overview of the most important TV formats for reference:

Flickering Images

Televisions either draw the whole image at once, called progressive scan, or they draw every second line every other time, called interlacing. You do not need to worry too much about this, but as a designer you need to know the following about interlacing:

• Thin horizontal lines will flicker on an interlaced screen. Make sure all lines are at least two pixels high, and with a height divisible by two.
• Your image will get slightly blurred if an interlaced signal is deinterlaced and presented progressively by a tv or a set-top-box.

Apply 0.5 to 1.0 pixel vertical blur to your graphics to reduce flickering on CRT TVs. If your graphics are to be subject to compression, that may take care of the flickering for you.

Typography

You need to use fairly large fonts when designing for television. I am often asked for a minimum size, but there are no fixed rules for this. The perceived size of the text is most important, and the actual font size, capitalization, tracking, color and contrast all play important parts.

Consider using fonts created specifically for television. Tiresias is one of these. Be sure to avoid serif fonts and italics for small sizes and larger text areas.

Colors

There is no such thing as color management for TV design, because you have absolutely no way of controlling the settings on the viewers’ TV sets. You should know that bright or highly contrasting colors tend to bleed on CRT TVs, and that some colors, especially heavily saturated colors like red, white and yellow tend to be tricky.

Bright areas on a darker background tend to appear to grow in size horizontally and push the entire image out of shape on CRT screens, making the sides appear wavy.

You should avoid using pure white in your designs. Use an adjustment layer in Photoshop or your compositing package to take the pure white areas down to a level of 240 or lower. If your design is to be broadcast using mpeg-2 compression, that may take care of this for you automatically. If you are using an adjustment layer, all you have to do is turn it off to get a nice, bright image for showing your work to your client or manager on a pc screen.

And Most Importantly: Always Preview Your Work!

This is not a suggestion. If you are going to design for television, you have to see your work the way your viewers will see it. Only then can you be sure that your choice of typography, color and graphics are actually working as intended.

Get as close as you can to all possible target configurations. To preview your work for a CRT TV, you may either get yourself an extra graphics card or you can use a DV camera with firewire to get your work on TV. Always use quality cables like HDMI, S-Video or Scart, and avoid composite cables as they introduce further problems in your images.

Design Templates

You may use the following templates when designing for television:

Stay tuned

I will continue to update this article with more illustrations and facts. Please leave your comments if you disagree with anything I have written here so that I can correct any errors. If you are returning to read this article again, here is a list of the major updates:

060927 Added Design Templates

Personal experience

A colleague and I did a large project involving green screen photography last year, and here are a few words about what we learned from that experience.

There are quite a few sites with blue- and green screen tips and tutorials out there, but most concentrate on video, which is a little different from photography. Whether you should choose green screen or blue screen is much debated, but there seems to be a general understanding that green is better for photographing people since it is further from skin color.

The green screen

The whole point of the green screen is to get an image with a background that’s easy to erase afterwards. If you´re on a budget, you can probably achieve this by painting a wall in the right color, but to avoid reflections you’d be better off using fabric. The background should be large enough to give the photographer some freedom of movement.

Lighting

Using separate lights for the background and the models gives more control over the lighting. The background should be lit evenly and not too brightly. Position the model as far from the background as possible to avoid spill light from the background on the model and shadows from the model on the background. Use barn doors or black screens to further protect the model from spill light from the background. A hair- or separation light hitting the model from the back also helps reduce green spill light.

Casting

Hiring professional models saves a lot of time and frustration, and ensures a better result. This is time consuming work, and a trained model helps getting it right the first time

Styling

The model should obviously not be wearing anything green, but this is less crucial for photo than for video as long as the color is not next to the background. Avoiding loose hair, curls, higly reflective or semi-transparent fabrics and furs etc. will make post production much easier.

Shooting

A photographer will always be tempted to compose the image in camera, but in this case that’s not a good idea. It’s important to allow for a little air on all sides of the model to make the pictures more flexible to work with later. You can always cut off half the head in Photoshop, but painting it in because it was cropped in camera is far trickier…

The photographer should avoid using selective focus. Objects that are out of focus get blended with the background, which makes it really difficult to separate them afterwards. Use an aperture small enough to ensure sufficient depth-of-field to get the entire model in focus, including contour lines. If you absolutely must have selective focus, I would recommend faking it in photoshop afterwards instead.

The image should be slightly overexposed rather than underexposed, but this goes for all digital photography. By shooting in the RAW format, you will be able to tune the white balance losslessly in your RAW editor of choice afterwards.

Stay tuned

Check back for a follow up on keying and color adjustment!

Digg this article