net magazine article

.net technique how_we_built
how_we_built
Abductionlamp.com
Jason Williams and Steve Lorek of Willoughby Stewart explain how they used anaglyph 3D to
create the kind of retro-cool look the Alien Abduction Lamp’s website demanded
.net: Can you give us a brief description
of the site?
JW: Abductionlamp.com is the marketing
and support website for Lasse Klein’s unique
Alien Abduction Lamp. The website has a retro
sci-fi theme and uses anaglyph 3D effects to
enhance this.
.net: Where did your inspiration for the website
concept come from?
SL: The retro sci-fi theme was inspired by the
product itself. The Alien Abduction Lamp, with its
bovine abductee, very much evokes memories of
vintage alien invasion B-movies. We decided to
play on this theme and develop a brand that pays
homage to these movies.
.net: Who is the target audience for the site?
JW: Lasse Klein had already done a great job
building an audience. The Alien Abduction
Lamp had been very well featured on gadget
sites such as Gizmodo when it was in the concept
stage, and Lasse had built up a following on social
networking communities like Twitter. So we had
an audience there that was waiting for the product
to launch, and we gave them a limited edition
version, which could only be
ordered on the website.
We were also targeting
distributors in all
international markets to
enable the worldwide
launch of the product.
.net: What is the main aim
of the site?
JW: The aim of phase one
was to attract distributors and
promote the launch of the limited edition lamps.
People could pre-order the limited edition, or
‘warn a friend’ about the impending invasion. In
phase two, we sold 1,000 limited edition Alien
Abduction Lamps to people across the world.
Abduction
lamp.com
From the
beginning…
98
.net april 2010
Jan-Feb 2009
As Tiger Global’s partner
agency, we were in early on
the lamp’s development,
with access to prototypes
and designer Lasse Klein.
.net: Tell us a bit about the decision to use
anaglyph 3D in your design.
SL: A colleague visited the Goodwood Revival
motor race meeting and picked up a copy of the
official 60th Anniversary programme. This featured
some amazing anaglyph 3D artwork, which we
felt perfectly embodied the brand we were trying
to create. We decided to see whether it would be
possible to enhance our artwork with anaglyph 3D
on the website.
We had never seen a website use this before,
so it was very experimental. We didn’t know if it
would work. After several iterations, we felt that
it worked best when used to enhance individual
page elements, like titles and key images, rather
than applying the effect to everything.
.net: How much freedom were you given?
SL: We were quite lucky in that there were no
brand guidelines. The website actually led this
process and everything else: even the box it was
packaged in was based on the concepts used on
the website. The client gave us complete freedom
to realise the strong concept.
.net: What were the key tools used to develop
the site, and what did they enable you to do?
SL: Fortunately, we had some 3D glasses in
the office for some reason, so we were able to
experiment straight away. We tried a number of
specialist software tools, but in the end we found
Photoshop enabled us to get the best results.
We used Aptana Studio to develop the front
and back end using Rails and LESS. Because
we were frequently changing the design in the
browser, LESS helped us manage the large amount
of CSS alterations, by adding a lot of functionality
to CSS that, as a programmer, you take for granted.
.net: What has the reaction to the site been like?
JW: Reaction has been positive. As well as
excitement about the product itself, many people
have remarked about the 3D enhancements and
the overall site design. The 3D aspect was welltimed, with the 3D cinema revival now taking place
and 3D TV now being pushed by Sky and Sony.
.net: What advice would you give to
someone looking to design using
anaglyph techniques?
SL: Think carefully about how 3D is going
to enhance your visitor’s experience. For us
it tied in with the retro sci-fi B-movie theme
and was just a bit of fun, but there are
many possibilities. It probably wouldn’t be
appropriate for a corporate site, for example.
I’m looking forward to seeing some more
inventive uses of the technique on the web.
inspired the initial designs for the website
.net: What steps were taken to make sure that
the site performed well on as many different
platforms as possible?
JW: We felt it was essential to deliver the retro
theme to all viewers. We decided to build the site
Apr
Apr
Hot rod The 3D programme from the Goodwood Revival
We take the product as our
starting point and begin
work on ideas based
around 50s B-movies and
alien abduction.
Apr
We work on our ideas for
the site’s design. Our big
breakthrough is the 3D
twist that comes this week.
Back-end planning begins.
We test 3D image creation
software and refine our
own Photoshop technique.
Work starts on wireframing
and site designs.
May
The client signs off the
designs while Steve Lorek
begins work on the back
end. New lamp prototypes
arrive for the photo shoot.
.net technique how_we_built
The techie bit
Close up The Alien Abduction Lamp website
1
We used Ruby
on Rails as the
framework,
which provided a
solid foundation
on which to
build custom
functionality. The
Twitter feed was
implemented
using the Twitter
XML API, along
with a simple
cache to reduce
the number of API
requests. We also
integrated Google
Analytics to help
us track visitor
demographics.
The site was
developed with
Aptana Studio,
using the RadRails
plug-in and LESS
to manage the CSS
more easily. We
used Subversion
for version control
and Capistrano
to manage
deployment to our
Rails server. All the
graphical assets
were created in
Photoshop.
Enable 3D
This button toggles
between 3D and
Earthling Mode. The
change is applied with
JavaScript and CSS,
rather than requiring
a page reload.
2
Stand out
3
Tweet it
4
Destruction
1
2
3D effects enhance key
page elements, like the
page titles, space ships
and text boxes.
4
3
The Twitter feed hooks
into the Twitter XML
API to deliver updates
about the worldwide
release of the lamp.
Flash animations
are used to enhance
the visuals of the
destruction scene,
when supported.
primarily in HTML and CSS, while Flash was used to
enhance the visuals for those with Flash support,
and we ensured that the site worked in the
majority of internet browsers, including Internet
Explorer 6. We also made the 3D mode optional –
most people don’t own 3D glasses, unfortunately!
The Earthling Mode button gets you back to the
normal version.
.net: Which particular element of the site are you
most proud of?
JW: We’re proud of the fact that we were able to
make the anaglyph 3D work like this on a website.
We hope that it will provoke some alternative
creative thinking in other designers and maybe
they can use the technique in other, even more
inventive ways. l
Jun
With the designs applied
and testing complete, Stage
1 launches to replace the old
site. At time of press, it has
had over 3,500 sign-ups.
Aug
We work on developing
Stage 2. The project scope
grows to encompass
ecommerce as well as
order tracking.
Profile
Name Steve Lorek
Job Senior developer
Company Willoughby Stewart
Website www.wsa.net.uk
Steve specialises in applying his experience
and passion to produce elegant web apps. He’s
produced work for brands including Clinique,
Estée Lauder, Fairline and Zend.
Profile
Boxing clever The product packaging took its lead from
the retro look of the site, meaning the team had creative
control of the entire project
Sep
Name Jason Williams
Job Head of digital development
Company Willoughby Stewart
Website www.wsa.net.uk
Jason is responsible for overseeing the company’s
digital output. He has over 15 years’ experience
and has worked with brands such as Yamaha,
Panasonic, Pfizer and Costa Coffee.
Stage 2 of the site launches
to sell the limited edition
lamps. Over 200 lamps are
sold in the first day alone.
The perfect start.
Turn the page to learn how to
create anaglyph 3D elements
for your page>>
.net april 2010
99
next>
.net technique how_we_built
create add old-school
3D to your site
Willoughby Stewart’s senior developer, Steve Lorek, explains how to enhance
your site design by adding 50s B-movie style anaglyph 3D
Knowledge needed Basic Photoshop skills
Requires Photoshop, graphical assets,
3D glasses
Project time 30 minutes
This tutorial will demonstrate the basic
method for enhancing an element of
your design using anaglyph images,
as used by Willoughby Stewart on the website
we created to promote Lasse Klein’s Alien
Abduction Lamp (abductionlamp.com).
Anaglyph images are made up of two colour
layers which are superimposed, but offset with
respect to each other to produce a a stereoscopic
3D effect when viewed with red and cyan colour
glasses, like the ones free with this issue. The
process described below will add depth to your
website by making the chosen element appear to
float in the foreground. This should be seen as a
starting point, so feel free to experiment!
We’re going to start by adding a 3D title
to the homepage of the website. Begin by opening
Photoshop and creating a new document.
To achieve the best effect, a background image
or texture should be applied to the whole canvas
as a reference point for the eye to compare the 3D
element against.
A photo is as good as any to use for this
example. We’ll add a 3D title to our background as
an example of the effect that can be achieved. l
Don’t miss our 3D feature on page 44
START
Offsetting Duplicate the layer. Name the new layer
Right, and the original layer Left. Now you will create the
3D effect by offsetting the layers. Stretch the right layer
horizontally to the right, and the left layer horizontally to
the left. You can adjust the amount of distortion later.
4
Blending Make sure the left layer is positioned on
top of the right layer. Select the right layer and change
the blending mode from Normal to Screen. Now put your
3D glasses on and check how it looks. Don’t worry if it
doesn’t look perfect at this point.
Word up In your new document, add the
title text as a new layer using the Text tool. Apply any
effects and colours you wish. We’ve gone with the Men of
Science font with gradient overlays and drop shadows. We
added a perspective to the text to enhance the 3D’s depth.
Seeing red Now select the right layer and as
before, select Image > Adjustments > Levels. Select the
blue channel. Change the output level from 255 to 0. Now
select the green channel and do the same. Then hit OK.
This will make the layer red only.
<prev
100
.net april 2010
Expert tip Preparation
We’ve found that some people can process
the 3D effect better than others. So what
looks good to you can be a mess to others
– usually when the 3D effect is overdone.
To avoid this, try not to offset the layers
too much, and if possible have a number of
people test your design.
You can use the same technique with
photos to create a full scene in 3D. Take
two photos, moving slightly to one side for
the second photo, keeping the focus on a
common object. Combine the photos using
this technique for a cool 3D photo!
2
Colour drop Select the left layer and select Image
> Adjustments > Levels. Select the red channel. Change the
output level 0 and hit OK. This will remove the red channel
from the layer. You must do this on the left layer, so that
your image matches the configuration of the 3D glasses.
3
5
Adjustments Now it’s time to fine-tune
the 3D effect, by adjusting the offset and distortion of the
two layers to get the perspective and depth you want. Try
not to offset the layers too much, as some people may
have trouble seeing the effect.
FINISH