June 20th, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The Official Design Newsletter of SitePoint
by Alex Walker (design@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=46
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved. -- Alex Walker
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- Peekaboo Animation: the Concept
- Peekaboo Animation: the Method
- What's New on SitePoint!
- Hot Forum Topics
- New Blog Entries
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
HostGator eats up the Competition with their newly priced plans!
Whether you are a web designer, or a small site owner; HostGator
offers a web hosting plan to fit your needs. With their Hatchling
Plan starting at $4.95 ranging to their Reseller Plans and Dedicated
Servers you will definitely have room to grow.
Host Unlimited sites on our Baby Plan!
- Disk Space: 600 GB
- Bandwidth: 6,000 GB
Along with superior support and a features like instant backups,
99.9% Uptime plus an all new 45 day money back guarantee you will
be glad you chose HostGator.
Sign Up Now and Receive the first month Free!
http://secure.hostgator.com/cgi-bin/affiliates/clickthru.cgi?id=sitepoint-062008&page=http://www.hostgator.com/shared.shtml
Coupon: SitePoint
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
Welcome to Design View #46.
This week Mozilla learned one of the major rules of the Web in
2008: "Souped-up marketing is not much good without souped-up
servers" -- a rule which we know only too well.
Coming into the Firefox 3 launch, the Moz dev team had done a
mighty job talking up the prospect of breaking a daily download
world record [1].
Unfortunately, the team's servers were found wanting in the heat
of battle, spending large chunks of the launch day offline [2]
and taking a little of the gloss off the launch. I guess Paris
keeps her record for a little longer (jk).
Still, the launch was hardly a flop. As I write this, the
Firefox 3 download counter is reporting an impressive 13+
million downloads to date. If only ol' IE6 was so easy to stomp
on.
Launch glitches aside, Firefox 3 [3] is a very fine browser. For
me, the improvements in performance alone justified the upgrade
in the first five minutes. It feels like I've added RAM to my
machine.
If you're interested in finding out exactly what's new,
what's hot, and what's not in Firefox 3, you're in luck!
We've just published a new eBook by Fabio Cevasco called Firefox
3 Revealed [4] that covers all the important changes.
Now, this is a completely FREE download and a great read, so
grab yourself a copy and get yourself up to speed.
DOING MORE STRANGE THINGS WITH CSS
For the rest of this issue, I'm going to tell you about an
interesting CSS trinket I've been fiddling with of late. In part
1, I'll explain the concept, and in part 2 (if you're feeling
particularly brave), we'll get into the nitty gritty of building
it.
Warning: if you're relatively new to CSS and/or
Fireworks/Photoshop this technique will probably test your
mettle, but stick with it.
There's little doubt this is a relatively marginal technique as
it stands, and it probably won't change the way you design for
the Web.
However, it's a new and original way to use CSS (to my knowledge
anyway). In 2008, it's not too often you can say that.
Enjoy.
Alex Walker
Editor
SitePoint Design View
[1] <http://arstechnica.com/news.ars/post/20080529-mozilla-aims-for-record-breaking-firefox-3-launch.html>
[2] <http://tech.slashdot.org/tech/08/06/18/121207.shtml?tid=154>
[3] <http://www.mozilla.com/en-US/>
[4] <http://www.sitepoint.com/books/firefox3/>
PEEKABOO ANIMATION: THE CONCEPT - - - - - - - -
Read the HTML version of this article, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=46
A few weeks ago I was shopping with my two-year-old daughter
when we came across a brilliant little picture book -- Gallop! A
Scanimation Picture Book [1] by Rufus Butler Seder. [2]
Now to be honest, the written content of Gallop is fairly
standard kids' fare -- "Can you see the horse gallop?" is
probably the literary highlight there. However, the little
animation trick it employs is quite beautiful.
The effect works something like this:
1. Take a six-frame animation and slice it into wafer-thin
vertical strips.
2. Throw away 5 out every 6 strips.
3. Re-assemble the remaining strips into a single composite
image, containing parts of all six frames.
4. Cover this composite image with a black acetate sheet that
contains thin, transparent lines running from top to bottom.
This sheet obscures most of the image behind it, allowing only
one frame to be seen at a time.
As the reader opens and closes the page, the illustration is
pushed and pulled sideways behind the sheet. The result is a
pretty nifty illusion of movement.
Now, this technique mightn't sound like it would give a
convincing result -- after all, there's a lot of black and not
much image to see. However, as the animated GIF above shows, the
effect is surpringly impressive. Impressive enough, in fact, to
get me wondering if it might be possible to adapt it to work
online as users resize their browsers.
I'm going to cut straight to the chase by showing you the test
case [3] I mocked up, and then I'll talk briefly about some of
the challenges and issues I came across in building it.
Later, in part two, I'll explain the somewhat hairy process
involved in creating your own.
SOME RANDOM THOUGHTS - - - - - - - - - - - - - - - - - - - -
1. This is a first take. There are quite a few lessons I'd bring
through to any updated version.
2. This is a three-frame animation. I originally tried a simpler
two-frame version of this animation. This was clearer, but
generated too much lightning.
While it's perfectly possible to design four-, five-, or
six-frame animations using this method, the reality is that each
additional frame makes the animation progressively darker,
reducing the clarity of the animation.
3. They aren't straight vertical lines in your example, right?
No, vertical lines aren't the only transparent shapes that work.
In fact, I found that grids and checkerboard patterns seem
generally to give a clearer result.
[1] <http://www.random-good-stuff.com/2008/05/15/gallop-scanimation-picture-book/>
[2] <http://www.random-good-stuff.com/2008/05/15/gallop-scanimation-picture-book/>
[3] <http://www.sitepoint.com/examples/scanline/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
EXPAND YOUR BUSINESS WITH W3 MARKUP
Rely on us to get more projects completed each week! We provide:
* Pixel-precise hand-coded Valid CSS & (X)HTML for any project
* Theme or "skin" implementation into popular software like:
WordPress, Drupal, Joomla, MovableType, Blogger, Pligg,
Textpattern, Typo3, osCommerce, Shopify, X-Cart, SMC, even
HTML Email templates, Server Side Includes
* Same-day turnarounds and pricing discounts
* Search engine friendly semantic coding
* 100% cross-browser, cross-platform browser compatibility
* Money back guarantee and 100% non-disclosure
Get started here: http://w3-markup.com/p/sitepoint-newsletter-tech-times
PEEKABOO ANIMATION: THE METHOD - - - - - - - - -
Okay, so you're inspired to give it a try. Let's look at the
nuts and bolts of creating the effect. It does require some
precision, so try not to get distracted halfway through the
process.
It's not the easiest process to explain, but I'll do my best --
so stick close. I'm going to use Fireworks for the example, but
it shouldn't be difficult to get a similar result in Photoshop
or a variety of equivalent graphic apps.
Step 1. Create your animation.
This part is up to you, but you'll need to create each frame on
its own layer.
Step 2. Create your Peekaboo Grid.
The Peekaboo Grid is the semi-transparent grid that overlays our
image, allowing only one frame to peek through at any moment.
I built my grid in Fireworks, and it's nothing more than a
customized pattern fill.
Here's a small seamless tile [1] section for you to download. It
should allow you to create as much grid as you need.
To use the tile in Fireworks, create a new square shape, set its
fill to 'Pattern' and select 'Other...'. You'll then be able to
select the tiling PNG. Resizing the shape should automatically
tile the shape with the repeating grid pattern, giving us as
much grid as we need. Export a chunk of grid (as a GIF) that's
big enough to comfortably cover your animation area.
Step 3. Create the Peekaboo Grid Mask.
Now things get a bit trickier.
Copy the grid shape we just made, and paste it as a new layer
covering your three frame layers. Align the grid to the top,
left corner of your document.
Step 4. Recolor the Mask flouro blue
Those involved in TV production might be aware of the chroma key
[2] technique, which allows producers to target a (usually) blue
screen behind a weather man, and replace it with animated
weather information. We'll use a variation on this technique
now.
Select your black Peekaboo Grid layer, and apply a
'Hue/Saturation..' filter to it (Filters/Adjust Color/Hue
Saturation...). Adjust the sliders until you've turned the grid
a bright, fluoro blue color.
The exact color you choose isn't important. You simply need to
ensure that the color isn't used anywhere in the animation, so
bright, fluorescent colors are usually best.
Step 5. Export Frame 1
Switch on both the Frame 1 layer and the blue grid layer, then
launch Firework's 'Export Preview' screen (CTRL+ALT+X).
Set your export format to GIF and use the Eyedropper tool to
select the fluoro blue color chip from our color palette (see
illustration below).
Hit the EXPORT button, call the image Frame1.gif, and put it
somewhere safe.
Step 6. Export Frame 2.
Switch your layers so that the second frame shows. Now very
carefully select the grid layer and use the arrow keys to move
it exactly one pixel to the left.
Take special care here, because if you bump or drag the grid
accidentally, it will become "out of phase" with our first
frame, meaning you'll need to repeat Step 5.
Export the image as Frame2.gif, once again making the blue color
chip transparent.
Step 7. Export Frame 3.
You're probably able to guess this step now. Make the frame 3
layer visible, and once again carefully jog the blue grid one
pixel to the left. Export the result and call it Frame3.gif. You
should now have three new images that are essentially "lacework"
copies of our animation frames.
Step 8. Combine the images into a composite.
This is where you find out if you were careful enough in the
previous steps.
Open all three of your freshly exported frames.
Copy Frame2.gif and paste it into Frame1.gif. Do the same with
Frame3.gif. If everything has gone to plan, the three frames
should knit together perfectly, as the image at right shows.
Getting this image just right is the key to this technique, and
it's easy to make mistakes. Don't give up if it doesn't quite
line up the first time. It took me some time to get it right.
Export this composite image to a single file (I called mine
stormy-sea.jpg).
Step 8. Create the HTML structure.
Okay, if you got this far, award yourself a gold star for
bloody-minded persistence!
Now, start a new HTML document and add the following markup to
the body:
<div id="header_outer">
<div id="header_inner">
<h1>Here is the Header</h1>
</div>
</div>
This is very simple structure -- simply two DIVs wrapping an H1.
Step 9. Add the CSS.
Finally, add the following CSS to the HEAD:
<style type="text/css">
#header_outer {
background:#000 url(images/stormy-sea.jpg) left top no-repeat;
}
#header_inner {
background: transparent url(images/bigw.gif) right top;
border-top:1px solid #000;
height:200px;
position:relative
}
h1 {
color:#fff;
position:absolute;
bottom:0px;
left:1em;
font-size:400%
}
</style>
The outer DIV holds our composite animation image in its
background and is aligned to the top left, so it won't move when
we resize the browser.
The inner DIV contains our black Peekaboo Grid, and is always
aligned to the top right. This means that when we resize the
browser, our grid always slides sideways across our composite
image.
This basic page should look like something like this [3].
FINAL WORD
So, there it is. If you managed to slog your way through to
create your own version, I doff my hat to you. Producing the
composite graphic seems more like an act of faith than a
graphics technique.
Unfortunately, at the moment I can't think of a simpler way to
do it, short of writing a custom application designed to
generate the image automatically.
In my testing I generally found that strongly loop-based
animations (i.e. things like wheels, spinning gears or running
horse) aren't as effective.
While turning a page produces a very smooth, measured motion,
resizing a browser is typically much jerkier, making it much
more likely you'll skip over frames.
Instead, animations that actually benefit from a certain amount
of randomness seem to work best. For instance:
- twinkling stars
- headlights on a distant highway
- lights on a city skyline
- reflections glittering off the water
- insects buzzing around a light
Obviously, some will question whether they could justify the
time and resources to develop an effect that might not even be
seen by all users. No doubt many budgets and projects wouldn't
be suited to this type of trick.
But there may be other projects that would benefit from a
variation on this method, and the opportunity to surprise and
intrigue your users -- to cut through the clutter for a moment
-- isn't to be underestimated.
P.S. I'd love to see anyone else's experiments with this idea,
so drop me a note if you come up with something cool.
[1] <http://www.sitepoint.com/examples/scanline/3frame-grid.png>
[2] <http://en.wikipedia.org/wiki/Bluescreen>
[3] <http://www.sitepoint.com/examples/scanline/simple.php>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
That's all for this issue -- thanks for reading! I'll see you in
a few weeks.
Alex Walker mailto:design@sitepoint.com Editor, The SitePoint Design View
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Morae: Usability Testing for Software & Web Sites. An all-digital tool
that enables you to:
-Quickly identify website and software design problems
-Affordably conduct user testing. Quickly calculate metrics & graph results.
-Deliver professional results in a fraction of the time.
http://www.techsmith.com/morae.asp?cmp=StPtUX3
WHAT'S NEW ON SITEPOINT! - - - - - - - - - - - - - - - - - - - -
Firefox 3: What's New, What's Hot, and What's Not
by Fabio Cevasco
It's Firefox 3 Download Day! To celebrate the latest release of
everyone's favorite open source browser, Fabio takes you through
the ins and the outs of what's new in Firefox 3.
http://www.sitepoint.com/article/1649
Walk on AIR: Create a To-do List in Five Minutes
by Akash Mehta
Adobe AIR is a platform for building web apps that run on your
desktop. In this introductory tutorial, Akash shows how easy it
is to quickly create a simple to-do list desktop application
using only HTML, CSS and JavaScript!
http://www.sitepoint.com/article/1648
Make Your Mark with Affiliate Marketing
by Peter T Davis and Georgina Laidlaw
Affiliate marketing can be more lucrative than online
advertising sales -- but only if you know the tricks of the
trade! In this step-by-step tutorial, Peter and Georgina reveal
some of the common -- and less well-known -- ways to make a
solid income through affiliate marketing.
http://www.sitepoint.com/article/1647
Create a 3D Product Viewer in Flex 3
by Jack Herrington
If you're going to experiment with Flex 3, you might as well
create something cool, right? With only a small amount of code,
Jack shows you how to create an awesome 3D model of a light
cycle from the movie Tron that your users can view, rotate,
change the color of, and more!
http://www.sitepoint.com/article/1646
How to Code HTML Email Newsletters
by Tim Slavin
Browser idiosyncracies, spam registers, and various mail clients
are just some of the pitfalls that must be faced by email
marketers. Make sure your HTML email gets through with Tim's
essential how-to.
http://www.sitepoint.com/article/1422
Beyond CAPTCHA: No Bots Allowed!
by James Edwards
The popular CAPTCHA solution can help lock out robots and reduce
spam, but it's far from failsafe -- and it causes major
accessibility headaches. In this article, James looks at the
problems, issues, and alternatives to requiring a human to prove
that they're not a bot.
http://www.sitepoint.com/article/1645
HOT FORUM TOPICS - - - - - - - - - - - - - - - - - - - - - - - -
Firefox 3 to be released June 17th
<http://www.sitepoint.com/forums/showthread.php?threadid=553621>
Opera 9.5 Is Now Available
<http://www.sitepoint.com/forums/showthread.php?threadid=553645>
Weird Photoshop Eraser Problem. Help?
<http://www.sitepoint.com/forums/showthread.php?threadid=553007>
how did they do that!!!
<http://www.sitepoint.com/forums/showthread.php?threadid=542458>
NEW BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - - - - -
Web Tech Blog: TECHNICALLY SPEAKING
Internet Explorer Extinct By 2013? (54 comments)
http://www.sitepoint.com/blogs/2008/06/19/internet-explorer-extinct-by-2013/
WebDU Day 1: AIR, Ajax, CS4 and a little bit of usability
http://www.sitepoint.com/blogs/2008/06/19/webdu-day-1-air-ajax-cs4-and-a-little-bit-of-usability/
JavaScript & CSS Blog: STYLISH SCRIPTING
In-browser Development Tools: Firebug Still King (10 comments)
http://www.sitepoint.com/blogs/2008/06/17/in-browser-development-tools-firebug-still-king/
Two Hidden Features New in Firefox 3 (24 comments)
http://www.sitepoint.com/blogs/2008/05/23/two-hidden-features-new-in-firefox-3/
Design Blog: PIXEL PERFECT
Four Days Left To Win A MacBook From 99designs! (2 comments)
http://www.sitepoint.com/blogs/2008/06/16/four-days-left-to-win-a-macbook-from-99designs/
Google Changes Favicon, Challenges You To Do Better (7 comments)
http://www.sitepoint.com/blogs/2008/06/10/google-changes-favicon-challenges-you-to-do-better/
Adobe Fireworks CS4 beta released
http://www.sitepoint.com/blogs/2008/05/29/adobe-fireworks-cs4-beta-released/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach thousands of opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's Design View.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
mailto:design@sitepoint.com
To subscribe, send a blank email to:
mailto:subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Design View is hosted by SparkList:
http://www.sitepoint.com/newsletters/sparklist/
The SitePoint Design View is (c) 1998-2008 SitePoint Pty.
Ltd. All Rights Reserved. No part of this Newsletter may be
reproduced in whole or in part without written permission. All
guest articles are copyright their respective owners and are
reproduced with permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>
To leave this list:
<http://sitepoint.sparklist.com/u?id=2266615.6a281def5c7ecb5efcb2dd35473f5a18&n=T&l=designtext&o=2160173>
<a href="mailto:leave-2160173-2266615.6a281def5c7ecb5efcb2dd35473f5a18@sitepoint.sparklist.com">AOL Users Click</a> to unsubscribe
Do Not Reply to this email to unsubscribe.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No comments:
Post a Comment
Keep a civil tongue.