Category Archives: Tutorials

Tutorial: Use Stitcher Unlimited 2009 To Build Interactive Panoramas

Photoshop has been able to produce good panoramas for years with the Photomerge plug-in, and it’s a popular tool for some photographers who use Photoshop to build sweeping vistas from multiple shots. Other users find Photomerge very handy for combining images for use in QuickTime VR (QTVR) projects such as 360-degree online tours and other immersive interactive media.

st-stitcher

I have always used Photoshop and a $49 program called CubicConverter to build QTVR: I combine images in Photoshop and then output the movie file with CubicConverter. However, Autodesk offers an application called Stitcher Unlimited 2009 that handles both functions extremely well. There are some pros and cons to using Stitcher versus Photomerge, but I like the fact that it’s a complete solution for VR professionals.

Create your panorama

In this tutorial we’ll learn how to import images into Stitcher, stitch them together in a panorama, fix any bad stitching or mismatched exposures, and export to QTVR. The five images in this tutorial are of St. Stephen’s Green in Dublin.

st-photos
I stitched these five photos of St. Stephen’s Green.

1. Import your images into Stitcher.

The easiest way to do this is to drag the image files onto the Stitcher interface, but there are also menu and icon commands that do the same thing. I recommend that you make the exposures consistent outside of Stitcher. During the import process Stitcher will detect the lens type and focal length, which you can accept or revise.

2. Use the Stitch Shots command to automatically begin the stitching.

Stitcher does a good job stitching shots together on the fly, every bit as good as Photoshop’s Photomerge feature. You’ll have greater success if your shots have a healthy amount of overlap: in my example, the first and last shots have very little overlap with the image next to them and Stitcher did not attempt to stitch them together.

Photos that are successfully stitched are marked with green in the Thumbnail View strip below the main window. Stitcher uses green, yellow and red to mark successful and problem images. The stitched images show up in their panoramic glory in the main window, and the three tools to move around are in the View menu—pan, zoom and roll. The menu bar doesn’t show it, but there are vital keyboard shortcuts for the Pan (Alt/Opt-drag) and Zoom (Cmd/Ctrl-drag) tools. These shortcuts make moving a lot easier and the menu commands are comparatively slow.

st-auto
The Stitch Shots command is the easiest way to combine photos with Stitcher, as long as they don’t have exposure differences or too little overlap. Click the image for a larger view.

3. Manually stitch any missed images.

I dragged my two missing images from Thumbnail View to the main window. The left image stitches nicely just by dragging the image so it overlaps the image next to it. Stitcher fades the two images together to make a seamless transition, though in my case a man in the left image ended up losing some opacity due to blending with the second image’s background. Unfortunately, Stitcher does not have any retouching tools like Photoshop does, though you can stencil out part of an image and retouch it in Photoshop or another application.

st-left
See the man in the background who is 50% transparent? He’s right on the seam between two photos. These photos aren’t stitched, but Stitcher is smart enough to blend images when they overlap.

The right image is a good candidate for Stitcher’s Manual Stitch command—images that overlap and have common landmarks do well with Manual Stitch. Select the right image and the one to be stitched to it and choose the Manual Stitch icon or menu item. An interface appears that allows you to pin common points on both images. In my example, the statue in the background and one of the railing posts were good common points. Once the pins are in place, click Stitch and Stitcher brings them together. Note that manually stitched images are marked with yellow while non-stitched images (like my left image) are marked with red.

4. Equalize images

There are two methods for equalizing images: use the Equalize All Images command or, if you have 32-bit High Dynamic Range (HDR) images, use the HDR exposure controls in the HDR menu. In my example, the fourth and fifth images have some overexposure compared to the three on the left. However, Equalize All Images doesn’t seem to work with unstitched or manually stitched images and it of course can’t fix incorrect colors like the sky in my fourth photo. The sensitivity of Equalize All Images is also buried in Stitcher’s preferences, making it a chore to tweak it for the best results.

st-right
The transition between the rightmost image and the one next to it. I left the exposure difference in the final product; Photoshop is the best choice to fix this problem.

Photomerge seems to do a better job of automatically equalizing images, though it doesn’t have the specialized HDR features that Stitcher offers. Photomerge produced a fully equalized panorama with the St. Stephen’s Green photos, and even figured out how to stitch the right image so I didn’t have to do it manually.

5. Render the final QTVR output

st-render
Stitcher provides many options when producing the final output.

The real value of Stitcher is in the various formats it can produce: JPEG, QuickTime movies or QTVR, Pure Player Java or HTML and KML. The KML file is suitable for use with Google Earth. To publish a QTVR, select “Cylindrical QTVR” or “Spherical QTVR” from the Type menu and change the various settings as needed. The Render dialog box has four panels full of options for quality, output and scripting so it’s a complicated process but also very robust, and there’s a panel for saving and recalling settings so the process runs smoothly.

Conclusion

The coolest thing about Stitcher Unlimited 2009 is its range of features: there are several I did not write about, including hotspots, stencils, alignment and working with fisheye images and full spherical panoramas. I was impressed by the wide features that Stitcher offers to creators of panoramas and QTVR, and I think there is potential for more interactive images and multimedia with these tools.

Sky’s the Limit: AKQA Shows the Possibilities with Flash CS4 (Part 3 of 3)

NOTE: This is one of three articles commissioned by Adobe and written by separate design agencies to demonstrate the variety of techniques available in Flash CS4 Professional. In these examples, three techniques are shown for creating realistic fireworks effects; all require intermediate to advanced ActionScript 3 skills. Enjoy! —Jeremy Schultz

Introduction by Kristan Jiles, Senior Product Marketing Manager, Adobe Systems Incorporated

Three design agencies that are given an identical initial directive, using the same tool, will return with very different project results. The creative process is essential in determining the end result; it’s how professionals use their tools to bring their work to life. We asked design agencies AgencyNet, AKQA and Vasava to develop a tutorial on how to create a fireworks display using Adobe Flash CS4 Professional to demonstrate how the same tool used to design the same project can yield such unique and differing results. At Adobe, we’re inspired by seeing how each creative uses their knowledge of the product to create amazing and fun projects that can be shared with others. Flash was developed to provide a variety of design and development options for any project and this is only one example. With animation, 3D transformation, rich drawing capabilities, and ActionScript development, we encourage designers and developers to continue experimenting with Flash to produce amazing work!

Tutorial by AKQA

When trying to imitate nature and real-life motion, a significant understanding of math and physics is necessary. To create realistic fireworks shows in Flash involve some kind of particle effect. Making a particle engine from scratch to achieve the effect is not a particular easy task. It requires a certain level of math knowledge on the part of the Flash developer, and is a meticulous time intensive task.

Like any good cooking show, we cheat a little, and rely on one of the publicly available ActionScript engines that have most of the heavy lifting built-in. For this project we’ve chosen to utilize the Flint particle system, which allow developers of almost all levels to create a variety of particle effects with ease. Flint is also one of the more complete particle engines API made for AS3 that is easy to understand and use. It is an active open-source project with the support of a community on their website. Thanks for lending a hand guys!

In this tutorial, we will show you how to use Flint to easily create a cool fireworks effect that not only seems real, but also forms any desired graphic you specify. To showcase this we’ve chosen the AKQA logo.

akqa-image-1

Setup

1. Go to http://code.google.com/p/flint-particle-system/ and download the Flint Particle System codebase.

2. Create the desired PNG image with transparency for the fireworks to emulate. In this tutorial, we use the AKQA logo:

akqa-image-2

3. Create your class to hold the graphic. Make sure it extends the BitmapData class. In this case we are creating it for our logo:

akqa-image-3

4. Create a new FLA for your fireworks and name it Fireworks.fla.

5. Import your PNG into your library, then link your class from Step 3 to the PNG:

akqa-image-4

6. Create a new class, name it Fireworks.as, and use it as your document class:

akqa-image-5

7. Go to http://flintparticles.org/examples/logo-firework and copy the code from the demo and paste it into your document class from Step 6.

8. We are ready to do some coding.

Coding

1. Before we can edit the code to make the fireworks look right in our file, let’s first see what each line does.

Standard instantiating code:

var emitter:Emitter2D = new Emitter2D();
1500 denotes the amount of particles to create:
emitter.counter = new Blast( 1500 );

The particles use colors randomly picked between the two values given below:

emitter.addInitializer( new ColorInit( 0xFFFF3300, 0xFFFFFF00 ) );

How long this sequence of particles last before getting destroyed:

emitter.addInitializer( new Lifetime( 6 ) );

The DiscZone defines a circular area with a hole in the middle, telling where to start the particles:

emitter.addInitializer( new Position( new DiscZone( new Point( 0, 0 ), 10 ) ) );

Pass the PNG to the particles engine to emulate:

var bitmapData:BitmapData = new Logo( 265, 80);

Because the particles are moving according to Flash’s coordinate system, which is based on top left corner, the particles will move in a lower-right direction. Since the fireworks need to explode from the center, the values “-132” and “-300” offset the particles’ direction so that they are shooting out from the center:

emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, -132, -300 ) ) );

The following lines do the actual explosion of the fireworks and are pretty self-explanatory (If you’re on Eclipse or Flex, make sure Quadratic comes from the org.flintparticles.common.energyEasing package or it throws a wrong number of parameters compile error if it comes from another package):

emitter.addAction( new Age( Quadratic.easeIn ) );
emitter.addAction( new Fade( 1.0, 0 ) );
emitter.addAction( new Move() );
emitter.addAction( new LinearDrag( 0.5 ) );
emitter.addAction( new Accelerate( 0, 70 ) );

Restart the sequence once this sequence is complete:

emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart );

Tells the engine the area to draw the particles:

var renderer:PixelRenderer = new PixelRenderer( new Rectangle( 0, 0, 500, 300 ) );

Gives it a BlurFilter which seems to emulate fireworks’ sparks:

renderer.addFilter( new BlurFilter( 2, 2, 1 ) );

Gives a ColorMatrixFilter which helps to add to the realistic feel of the fireworks:

renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.96,0 ] ) );

Tie it all together:

renderer.addEmitter( emitter );

Add to display list:

addChild( renderer );

Position the particles emitter:

emitter.x = 250;
emitter.y = 300;

Have to call start() to get it going:

emitter.start( );

2. Now we need to pass our PNG to the fireworks so the particle engine knows what graphic to emulate.

We do this by changing the following two lines of code:

var bitmapData:BitmapData = new Logo( 265, 80);
emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, -132, -300 ) ) );

to take our logo:

var bitmapData:BitmapData = new AKQALogo( 0, 0);
emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, -bitmapData.width / 2, -bitmapData.height/2 - 50) ) );

3. Finally, knowing what the other values represent we adjust them to fit our file. The following is the complete source code from the class Fireworks.as:

package com.akqa.tutorials.fireworks
{
import flash.events.Event;
import com.akqa.mvc.AbstractSprite;
import org.flintparticles.common.actions.Age;
import org.flintparticles.common.actions.Fade;
import org.flintparticles.common.counters.Blast;
import org.flintparticles.common.energyEasing.Quadratic;
import org.flintparticles.common.events.EmitterEvent;
import org.flintparticles.common.initializers.ColorInit;
import org.flintparticles.common.initializers.Lifetime;
import org.flintparticles.twoD.actions.Accelerate;
import org.flintparticles.twoD.actions.LinearDrag;
import org.flintparticles.twoD.actions.Move;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.Position;
import org.flintparticles.twoD.initializers.Velocity;
import org.flintparticles.twoD.renderers.PixelRenderer;
import org.flintparticles.twoD.zones.BitmapDataZone;
import org.flintparticles.twoD.zones.DiscZone;
import flash.display.BitmapData;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.Point;
import flash.geom.Rectangle;
/**
* @author kenny lin
*/
public class Fireworks extends AbstractSprite
{
// how many particles to generate
private var particleAmount:Number = 1500;
// how long the fireworks last
private var lifeSpan:Number = 6; // seconds
// thickness of the area populated by particles
private var thickness:Number = 3;
// the BitmapData used as a guide for the fireworks to generate
private var bitmapData:BitmapData = new AKQALogo();
/*
* The fireworks shoot lower-right by default
* The following correct the direction (try setting them to 0 to see what happens)
*/
private var correctLogoOffsetX:Number = 0;
private var correctLogoOffsetY:Number = 0;
public function Fireworks()
{
correctLogoOffsetX = -bitmapData.width / 2;
correctLogoOffsetY = -bitmapData.height/2 - 50;
}
/*
* Because I want to reference the stage's dimension
* I set up all my stuff after it's been added to stage
*/
override protected function onAddedToStage(e:Event):void
{
// call super to remove event
super.onAddedToStage(e);
// setup starts
var emitter:Emitter2D = new Emitter2D();
emitter.counter = new Blast( particleAmount );
emitter.addInitializer( new ColorInit( 0xFFFF3300, 0xFFFFFF00 ) );
emitter.addInitializer( new Lifetime( lifeSpan ) );
emitter.addInitializer( new Position( new DiscZone( new Point( 0, 0 ), thickness ) ) );
emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, correctLogoOffsetX, correctLogoOffsetY ) ) );
emitter.addAction( new Age( Quadratic.easeIn ) );
/*
* Play around the the following to get the ideal effect
*/
emitter.addAction( new Fade( 1.0, 0 ) );
emitter.addAction( new Move() );
emitter.addAction( new LinearDrag( 0.5 ) );
emitter.addAction( new Accelerate( 0, 70 ) );
emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart, false, 0, true );
// defines the area to draw all the particles on, in this case the size of stage
var renderer:PixelRenderer = new PixelRenderer( new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ) );
renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.96,0 ] ) );
renderer.addEmitter( emitter );
addChild( renderer );
emitter.x = stage.stageWidth/2;
emitter.y = stage.stageHeight/2;
emitter.start( );
}
private function restart( ev:EmitterEvent ):void
{
Emitter2D( ev.target ).start();
}
}
}

Click here to see the final result!

And there you have it, a short and simple way of creating a spectacular fireworks show. Now go ahead and try, write your loved one’s name in the sky, or shamelessly promote yourself and use your company logo. Play with colors and shapes to create something just right for you!

Sky’s the Limit: AgencyNet Shows the Possibilities with Flash CS4 (Part 2 of 3)

NOTE: This is one of three articles commissioned by Adobe and written by separate design agencies to demonstrate the variety of techniques available in Flash CS4 Professional. In these examples, three techniques are shown for creating realistic fireworks effects; all require intermediate to advanced ActionScript 3 skills. Enjoy! —Jeremy Schultz

Introduction by Kristan Jiles, Senior Product Marketing Manager, Adobe Systems Incorporated

Three design agencies that are given an identical initial directive, using the same tool, will return with very different project results. The creative process is essential in determining the end result; it’s how professionals use their tools to bring their work to life. We asked design agencies AgencyNet, AKQA and Vasava to develop a tutorial on how to create a fireworks display using Adobe Flash CS4 Professional to demonstrate how the same tool used to design the same project can yield such unique and differing results. At Adobe, we’re inspired by seeing how each creative uses their knowledge of the product to create amazing and fun projects that can be shared with others. Flash was developed to provide a variety of design and development options for any project and this is only one example. With animation, 3D transformation, rich drawing capabilities, and ActionScript development, we encourage designers and developers to continue experimenting with Flash to produce amazing work!

Tutorial by AgencyNet (Flash 10 required)

Step 1: Preheat oven to 350 degrees.

Firstly, let’s setup the Flash stage and main FLA:

  1. Create a new Flash File (ActionScript 3.0).
  2. Set the size of the stage to 1000 x 500 (although your favorite size will work just fine).
  3. Set the background color of the stage to black or your preferred night sky color.
  4. Set the FPS to 30.
  5. Save your file as Fireworks.fla in a clean folder.

Now create a new Symbol (Insert > New Symbol):

create

  1. Name the symbol Firework Particle.
  2. In the Linkage group, check Export for ActionScript.
  3. Enter the Class name FireworkParticle (should be filled-in by default!).
  4. Click OK.

On the symbol, create a star by drawing a 2×2 yellow circle, and two 0.5 lines forming a cross, like so:

star

Alternatively, you can insert your favorite star bitmap, preferably no larger than 5×5 pixels or so.

Step 2: Bake until golden brown.

Now that we’re all setup, let’s create three .AS files in the same directory as the FLA. (File > New > ActionScript File):

  1. Fireworks.as – This will be our new stage class.
  2. Firework.as – This class will represent one launch/burst of a single firework.
  3. FireworkParticle.as – This class will support the Firework Particle clip we created earlier.

Briefly jump back to your Fireworks.fla file, and (ensuring nothing is selected), set the Document Class to Fireworks.

setup

In Fireworks.as, paste the following code:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.utils.Timer;
// Stage class, handles creation of fireworks and main timer
public class Fireworks extends MovieClip
{
public static const TIMER_BASE:Number = 900;
public static const TIMER_RANDOM:Number = 200;
public static const MAIN_TIMER_UPDATE_INTERVAL:Number = 20;
public static const MAX_FIREWORKS:Number = 7;
private var launch_timer:Timer;
private var main_timer:Timer;
// Stage class constructor
public function Fireworks()
{
startTimer();
main_timer = new Timer(MAIN_TIMER_UPDATE_INTERVAL);
main_timer.addEventListener(TimerEvent.TIMER, handleRuntime);
main_timer.start();
}
// Handler: TimerEvent.TIMER (main_timer)
private function handleRuntime(event:TimerEvent):void
{
for(var i = 0; i < numChildren; i++)
{
var firework = getChildAt(i) as Firework;
firework.update();
}
}
// Handler: TimerEvent.TIMER (launch_timer)
private function handleTimer(event:TimerEvent):void
{
launch_timer.removeEventListener(TimerEvent.TIMER, handleTimer);
// Prevent from having too many at once
if(numChildren < MAX_FIREWORKS)
{
var firework = new Firework();
firework.addEventListener(Event.COMPLETE, removeFirework);
addChild(firework);
}
startTimer();
}
// Launch new firework
private function startTimer():void
{
var duration = TIMER_RANDOM * Math.random() + TIMER_BASE;
launch_timer = new Timer(duration, 1);
launch_timer.addEventListener(TimerEvent.TIMER, handleTimer);
launch_timer.start();
}
// Handler: Event.COMPLETE (removes firework after it is completed)
private function removeFirework(event:Event):void
{
var firework = event.target as Firework;
removeChild(firework);
firework = null;
}
}
}

In Firework.as, paste the following code:

package
{
import flash.display.Bitmap;
import flash.display.BitmapData
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.ColorTransform;
import flash.geom.Vector3D;
// Firework explosion and launch
public class Firework extends MovieClip
{
public static const GRAVITY:Vector3D = new Vector3D(0, 0.018);
public static const LAUNCH_SPEED_X:Number = 0;
public static const LAUNCH_SPEED_Y:Number = -7;
public static const LAUNCH_PARTICLE_ALPHA:Number = 0.03;
public static const PARTICLE_RANDOM:Number = 30;
public static const PARTICLE_BASE:Number = 10;
public static const BITMAP_SIZE:Number = 300;
public static const BITMAP_OFFSET:Number = 150;
public static const DISPERSION_MULTIPLIER:Number = 1;
private var exploded:Boolean = false;
private var launching_particle:FireworkParticle;
private var particle_count:Number;
private var blit_array:Array;
private var trail_bitmap:Bitmap;
private var completed_particles:Number = 0;
private var particle_transform:ColorTransform;
private var transform_colors:Array = new Array
(
new ColorTransform(1, 1, 1, 0.92), // White
new ColorTransform(1, 0.9, 0.9, 0.92), // Red
new ColorTransform(0.9, 1, 0.9, 0.92), // Green
new ColorTransform(0.7, 0.9999, 1, 0.92), // Blue
new ColorTransform(1, 1, 0.9, 0.92), // Yellow
new ColorTransform(1, 1, 1, 0.5) // Black
);
// Firework constructor
public function Firework()
{
// Pick a random particle count and a random color for the trails
particle_count = Math.round(Math.random() * PARTICLE_RANDOM + PARTICLE_BASE);
particle_transform = transform_colors[Math.floor(Math.random()*transform_colors.length)];
addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
addEventListener(Event.REMOVED_FROM_STAGE, handleRemovedFromStage)
}
// Update: called by main timer
public function update():void
{
if(exploded)
{
for(var i = 1; i < numChildren; i++)
{
var particle = getChildAt(i);
particle.update(GRAVITY);
if(particle.alpha <= 0 && particle.alive)
{
particle.alive = false;
completed_particles++;
if(completed_particles >= particle_count)
{
dispatchEvent(new Event(Event.COMPLETE));
return;
}
}
}
}
else
{
launching_particle.oscillate();
launching_particle.update(GRAVITY, LAUNCH_PARTICLE_ALPHA);
if(launching_particle.y < BITMAP_OFFSET)
{
removeChild(launching_particle);
explode();
}
}
// Blitting
var newBitmapData:BitmapData = new BitmapData(width, height, true, 0x000000);
newBitmapData.draw(this, null, particle_transform, null, null, true);
blit(newBitmapData);
}
// Handler: Event.ADDED_TO_STAGE
private function handleAddedToStage(event:Event):void
{
// Initialize random target position on stage
x = (stage.stageWidth) * Math.random() - BITMAP_OFFSET;
y = (stage.stageHeight) * Math.random() - BITMAP_OFFSET;
// Initialize bitmap and container
trail_bitmap = new Bitmap();
addChild(trail_bitmap);
blit_array = new Array();
launching_particle = new FireworkParticle();
launching_particle.y = stage.stageHeight - y;
launching_particle.init(LAUNCH_SPEED_X, LAUNCH_SPEED_Y, false);
addChild(launching_particle);
}
// Handler: Event.REMOVED_FROM_STAGE
private function handleRemovedFromStage(event:Event):void
{
destroyBitmaps();
}
// Explode firework
private function explode():void
{
// Initialize particles
for(var i = 0; i < particle_count; i++)
{
var explodeworkParticle:FireworkParticle = new FireworkParticle();
explodeworkParticle.init(Math.sin((Math.PI*2 / particle_count) * i + Math.random()*DISPERSION_MULTIPLIER), Math.cos((Math.PI*2 / particle_count) * i + Math.random()*DISPERSION_MULTIPLIER));
addChild(explodeworkParticle);
}
exploded = true;
}
// Update trail_bitmap with fresh BitmapData
private function blit(bitmapData:BitmapData):void
{
trail_bitmap.bitmapData = bitmapData;
if(blit_array.length < 1)
{
blit_array.push(bitmapData);
}
else
{
blit_array.push(bitmapData);
// Destroy old bitmap data
var oldBitmapData:BitmapData = blit_array.shift();
oldBitmapData.dispose()
oldBitmapData = null;
}
}
// Clean up any lingering bitmaps after being being removed from stage
private function destroyBitmaps():void
{
var imagesLeft:int = blit_array.length;
for(var i = 0; i < imagesLeft; i++)
{
var img:BitmapData = blit_array[i] as BitmapData;
img.dispose();
img = null;
}
}
}
}

Finally, in FireworkParticle.as, paste the following code:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Vector3D;
// Firework particle
public class FireworkParticle extends MovieClip
{
public static const NORMALIZE_POSSIBILITY:Number = 0.7;
public static const SPEED_MULTIPLIER:Number = 1.2;
public static const OSCILLATE_AMPLITUDE:Number = 3;
public static const OSCILLATE_FALLOFF:Number = 150;
public var direction:Vector3D;
public var alive:Boolean = true;
private var frame_counter:Number = 0;
// Constructor
public function FireworkParticle()
{
x = 150;
y = 150;
cacheAsBitmap = true;
}
// Initialize particle direction and normalize
public function init(direction_x:Number, direction_y:Number, possible_normalize:Boolean = true):void
{
direction = new Vector3D(direction_x, direction_y);
if(Math.random() < NORMALIZE_POSSIBILITY && possible_normalize)
{
direction.normalize();
}
direction.scaleBy(SPEED_MULTIPLIER);
}
// Shake particle side to side
public function oscillate():void
{
direction.x += Math.sin(frame_counter / OSCILLATE_AMPLITUDE) * (frame_counter / OSCILLATE_FALLOFF);
}
// Update position, alpha, and framecounter (called by parent)
public function update(gravity:Vector3D, delta_alpha = 0.005):void
{
direction = direction.add(gravity);
x += direction.x;
y += direction.y;
alpha -= delta_alpha;
frame_counter++;
}
}
}

And voila! Make sure to save all files, and publish the Fireworks.fla to see some fireworks!

Step 3: Add salt and pepper to taste!

Now that you have some fabulous fireworks, turn your attention to the static constants (THEY_LOOK_LIKE_THIS) towards the top of the Fireworks.as, Firework.as, and FireworkParticle.as. These are constants that modify the behavior of the fireworks—feel free to tweak them to get the desired effect!

To kick things up a notch, you can also add a quick starfield, so that the fireworks have a nicer backdrop than plain black!

Here's one we put together (save it as Starfield.as):

package
{
import flash.display.Bitmap;
import flash.display.BitmapData
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
// Starfield backdrop
public class Starfield extends MovieClip
{
public static const STAR_AMOUNT:Number = 500;
public static const STAR_ALPHA_MAX:Number = 0.4;
// Constructor
public function Starfield()
{
cacheAsBitmap = true;
addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
}
// Handler: Event.ADDED_TO_STAGE
private function handleAddedToStage(event:Event):void
{
var bitmap:Bitmap = new Bitmap(new BitmapData(stage.stageWidth, stage.stageHeight, false, 0x000000));
var star:FireworkParticle = new FireworkParticle();
var translation_matrix:Matrix = new Matrix();
var color_transform:ColorTransform = new ColorTransform();
for(var i = 0; i < STAR_AMOUNT; i++)
{
var scale = Math.random() * 1.5 - 0.5;
translation_matrix.a = scale;
translation_matrix.d = scale;
translation_matrix.tx = Math.random() * stage.stageWidth;
translation_matrix.ty = Math.random() * stage.stageHeight;
color_transform.alphaMultiplier = Math.random() * STAR_ALPHA_MAX;
bitmap.bitmapData.draw(star, translation_matrix, color_transform, null, null, true);
}
addChild(bitmap);
}
}
}

To add it to stage, save the file in the same directory then, in the Fireworks constructor (public function Fireworks()), add the following code after the {

addChild(new Starfield());

Then, in the handleRuntime function, change the line that reads for(var i = 0; i < numChildren; i++) to:

for(var i = 1; i < numChildren; i++)

This ensures we ignore the starfield when updating the fireworks.

Have fun, and enjoy the show!

See the final result!

Sky’s the Limit: Vasava Shows the Possibilities with Flash CS4 (Part 1 of 3)

NOTE: This is one of three articles commissioned by Adobe and written by separate design agencies to demonstrate the variety of techniques available in Flash CS4 Professional. In these examples, three techniques are shown for creating realistic fireworks effects; all require intermediate to advanced ActionScript 3 skills. Enjoy! —Jeremy Schultz

Introduction by Kristan Jiles, Senior Product Marketing Manager, Adobe Systems Incorporated

Three design agencies that are given an identical initial directive, using the same tool, will return with very different project results. The creative process is essential in determining the end result; it’s how professionals use their tools to bring their work to life. We asked design agencies AgencyNet, AKQA and Vasava to develop a tutorial on how to create a fireworks display using Adobe Flash CS4 Professional to demonstrate how the same tool used to design the same project can yield such unique and differing results. At Adobe, we’re inspired by seeing how each creative uses their knowledge of the product to create amazing and fun projects that can be shared with others. Flash was developed to provide a variety of design and development options for any project and this is only one example. With animation, 3D transformation, rich drawing capabilities, and ActionScript development, we encourage designers and developers to continue experimenting with Flash to produce amazing work!

Tutorial by Enric Godes, project manager, Vasava

To develop the fireworks we used the Tweener caurina Stable version 1.33.74, ActionScript 3 (Flash 9+) library. This library can be downloaded from http://code.google.com/p/tweener/downloads/list. And, of course, we used Adobe Flash CS4 Professional.

1. Change the flash movie to 800×600 and 65 FPS (see below).

vasava-image-1

2. Draw a 4 px circle and transform it on symbol by pushing F8.

3. Edit the MovieClip and animate it from left to right on a straight line: These are the sprinkles going away from the center of the firework. We used a shape interpolation; later you can try some different animation types and change the timing to see new results. Insert a stop on the last frame (see below).

vasava-image-3

4. Find the MovieClip on the library and use the right button to open the properties window on the class field and change it to “Particle.” (See below).

vasava-image-4

5. Make a new symbol and put it on the scene. On the properties window change it to “nightSky.” This is where we will put the fireworks.

6. And now the coding. First, import the classes we are going to use:

import caurina.transitions.Tweener;
import flash.events.*;

7. Next, define the movie vars:

var fwParticlesCount:uint=200; // particles in each explosion
var fwTimer:uint=2000; // time between explosions
var timer:Timer = new Timer(fwTimer); // this adds a timer, in each step of the timer it will call fire() function
timer.addEventListener(TimerEvent.TIMER, fire);
timer.start();

8. We want to use a lot of random numbers, so we created the following function to save some time:

function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.random() * (max - min + 1) + min;
return randomNum;
}

9. And now the main function which is putting the particles in a circle, animating them, and setting their opacity and position:

function fire(event:TimerEvent){
// the origin coordinate for the firework
var x0:uint=randRange(100,700);
var y0:uint=randRange(100,500);
// now i'm going to create and define the properties of each particle in the firework
for(var i:uint=0;i var tempParticle:Particle=new Particle();
tempParticle.x=x0;
tempParticle.y=y0;
tempParticle.rotation=randRange(0,360)
tempParticle.scaleX=tempParticle.scaleY=randRange(.3,1)
//add to the stage
nightSky.addChild(tempParticle)
//the particle is going to start with the animation you prepared on the Movie Clip
//then with a little delay the Tweener animates the y an opacity,
//onComplete remove the mc from stage and deletes the particle
Tweener.addTween(tempParticle,{y:y0+200+randRange(-50,50),alpha:0,delay:1,time:2,transition:"easeInSine",
>> onComplete:function(){nightSky.removeChild(this);delete this}});}
}

See the final result!

Enric Godes is a project manager at Vasava. Started in Barcelona in 1997, Vasava is a communication studio with 18 young designers who specialize in cross-media projects: print, web, motion, 3D animation, and video. To unleash creativity and meet the deadline-driven demands of clients, Vasava relies on the integrated, cross-discipline tools found in Adobe Creative Suite Master Collection software.

Making PDF Porfolios With Adobe Acrobat Pro 9

One of the most exciting and fun-looking parts of the new Adobe® Acrobatâ„¢ Pro 9 is the ability to make slick-as-anything PDF Portfolios with a minimum of effort. After reviewing how to do it, I really wanted to make one of my own. Here’s how it all went down.

(If you want to get a look at the PDF Portfolio that results from all this play, go to this link at Acrobat.com and click “Download”. It will require Acrobat Pro 9 to be viewed).

Starting It Off

Starting off the fun isn’t terribly difficult. All one needs to to is go to the File menu and select Create PDF Porfolio. A window opens with a large blank area on the left and a sidebar on the right. The instructions in the gray area are simple and direct … Drag Files Here. Do so. That’s all I had to do.

First, of course, I had to choose the kind of Portfolio I wanted to create. I’ve always been a fan of Apple’s “Cover Flow” model, and the “Revolve” option is kind of cover-flow-ish.

Then all I had to do was drag files in from the Finder, and it was off to the races.

I even added a Flash video file that I had converted from a QuickTime movie I’d done. It took no trouble at all.

Populating PDF Porfolio

Populating the PDF Portfolio is as simple as dragging your files into the interface from the folder.

A Cover To Judge The Book By

The tautology is worn rather shiny, but true nonetheless; first impressions mean so much. PDF Portfolios give you a special chance to make a first impression: you can have a custom splash page, or a Start Page.

This is kept simple as well. On the Edit PDF Portfolio sidebar, clicking on the Welcome and Header tab causes that part to spring open. You have options to customize the Welcome Page and add a header to it as you see fit. I decided to go without the header and just come up with a welcome message and background image. Clicking in the resizable text box I typed in a short, friendly welcome message, and resized it a bit. Clicking on the image box brought up a file-open dialogue where I could search my drive and find a graphic. The text can be styled and colored with basic styles and controls, and the size of the illustration can be quickly scaled up and down. The pertinent controls appear when the appropriate object is selected.

Since I like a big splash, I really scaled up the image. The text had to be colored black in order to stand out against it. It was quickly and simply done with the controls.

Acrobat 9 PDF Portfolio Start Page

Type text, import image, style, scale, adjust. All very simply done.

I can’t go past this without pointing out that you have a good number of options for customizing this. You can have text only, text and picture, even a flash movie … or no welcome page at all.

Now, from here you can add a similarly-customizable header, but I chose not to do that, as the design really doesn’t depend much on such a thing and it would have been a bit cluttered.

In the final PDF Portfolio, the page has a “Get Started” Button at the bottom which takes you on to the rest of the document. As I said, very slick indeed.

Coloring Your World

The default color on startup is the sort of usual gray that you find in Creative Suite’s Bridge and on the Adobe hosted web services such as Acrobat.com. It’s not a bad choice, but if you’re a designer, you’re rarely satisfied with complete default. I thought a blue would be proper choice.

Clicking on the Select A Color Scheme tab on the Edit sidebar springs open access to a modest palette of preset color schemes … and, of course, the option to create your own.

acrobat 9 palette

Not happy with the default color choices? Use one of Acrobat Pro 9′s suggestions – or customize your own.

After applying my choices and clicking the “home” button on the top to go back to the files display, I found I was very pleased with the dark blue which allowed the content to stand out in front.

Acobat 9 PDF Portfolio Blue

The color scheme … just what the designer ordered.

May We Take Your Order?

The last tab in the Edit sidebar, Specify File Details, gives the tools necessary to add descriptions, titles, view file information and compression information, and arrange the files the way you want them to be presented. It’s easy understand and easy to use.

Clicking any Description field enables you to enter a witty, succinct, compelling description. You can select which fields you want to include in the table in the sidebar, and generate new columns as well. You can of course sort the table in any order the columns provide.

Acrobat 9 PDF Portfolio List

Information and arranging … power at your fingertips in the penultimate step


Setting It Loose In The Wild

The last step, Publish is what seals the deal for your PDF Portfolio. The Publish step allows you to either create a PDF on your desktop, go direct to email with your Portfolio, or if it’s a large one, upload to Adobe’s hosted service at Acrobat.com (you may have to create an Adobe ID for this, but that’s quick, easy, and integrated.

The PDF Portfolio functionality of Acrobat Pro 9 makes a lot of sense for those who are looking for a quick way to produce really good-looking PDF showcases. Sharing is easy, and assembling the Portfolio allows enough customization to make each one a unique piece. All anyone will need to view your PDF Portfolio is Reader 9, which should be available soon as a free download. Additionally, the PDF Portfolio interface is a full-featured one, including a search box that will search all documents, making it potentially a very powerful promotional and information delivery platform.

In extending the PDF into multimedia in this way, Adobe has given digital designers a wide range of powerful ways to exhibit their content and sell themselves. And it’s all very simple, indeed.

O’Reilly’s Fonts & Encodings Book Offers Much For Web Designers Too

fonts-encodings

If you haven’t read Samuel John Klein’s review of Fonts & Encodings, click here and take a look at the full range of this book. This article here is not another review, but a more detailed look at one particular chapter that will be interesting to web designers: Chapter 10, “Fonts and Web Pages.” I consider myself a typophile but I am also a web designer, and rarely do the two disciplines ever meet due to the limitations of the Internet, with its user-controlled presentation and weak typographic controls (it has gotten better with CSS, but it is still far away from the controls one has in print apps like InDesign).

The dilemma of type and web design

We web designers are in this predicament because a typeface is the only element of a webpage that does not actually belong to the author of that page: the font of that typeface is licensed, and while you can use it as needed you cannot distribute it freely, in the same way purchasing a license of Photoshop does not allow you to distribute it to whoever you wish. The webpage visitors needs his own legal copy of the font in order to display it in his/her browser. Technology has tried to get around this in three ways:

  • Tags: HTML, XHTML and CSS offer tags for font selection and formatting. While this gives the designer some control over typography, it still requires the end user to have the font handy either on his/her computer or downloaded from the Internet (more on this later).
  • Plug-ins: Microsoft, Bitstream and em2 Solutions have all produced plug-ins that enable browsers to pull the fonts they need to display webpages. This is maybe the best solution for displaying fonts perfectly but each plug-in has its limitations and requirements.
  • SVG: Adobe’s Scalable Vector Graphics format is emerging as a new W3C-supported standard for defining type geometry. It’s a promising alternative to plug-ins but not all browsers support it.

Each technological solution has its pros and cons. Let’s look at each one.

Tags mean nothing to fussy browsers

I’m sure many of you already know of or already use CSS so I won’t waste time here with typographic rules from CSS1 and CSS2 (if you don’t know anything about CSS, click here for a primer). Fonts & Encodings focuses on CSS3, the latest iteration of CSS that really comes into its own in terms of typographic rules. Here are some up-and-coming CSS rules:

  • font-size-adjust: When a preferred typeface is not available, this rule will change the type size on the fly so the font substitution still produces close to the same x-height on the page. For instance, the book shows that if your preferred typeface for a page is Centaur (which has an x-height of 0.366) and the substitution font will be the system’s serif typeface (usually Times) then specify the font-family as "Centaur", serif and font-size-adjust as .366, then when performing the substitution the browser will calculate what size Times should be displayed in so it has the same x-height as Centaur.
  • font-stretch: This controls the characters’ horizontal scale. You can use keywords from ultra-condensed to ultra-expanded and everything in between.
  • font-effect: Emboss, engrave, or outline type.
  • font-smooth: Smooth characters’ edges, similar to anti-aliasing. This one can actually make type look worse at small sizes, so a font can be set to smooth only when larger than certain sizes.
  • font-emphasize-style and font-emphasize-position: These two rules apply to ideographic languages (Japanese, Chinese and Korean) and allow use of the ideographic emphasis mark, a small circle placed next to a glyph to show emphasis. These marks are similar to the Western bold and italic for showing emphasis. These two rules control the style and placement of these marks.

All these CSS3 rules are wonderful, but I regret to inform you that none of these are supported by any web browser as of yet. It is yet another case of real-world technology not quite up to speed with the specifications being created by the W3C and other groups. I’m sure we will see these rules in a few years, but not now.

Now on to the fonts themselves: did you know CSS3 allows for controlled font substitutions, font downloading and even on-demand font synthesis? It’s true, and Fonts & Encodings shows how:

  • Substitutions (in CSS3) can do much more than just swap one font for another. You can actually place a typeface’s stem heights, slope, cap-height, x-height and other measurements along with its Panone-1 classification, and browsers that understand the code can select a local font that matches the data or comes close. If you don’t know what a Panose-1 classification is, pick up the book at your local bookstore and check Chapter 11 (hint: Panose-1 classifications look something like “2 0 5 3 0 0 0 2 0 4″).
  • Download a font with a simple src URL. This is easy enough to execute and takes the least code.
  • Synthesizing a font takes place within the browser, where data on units per em, bounding box coordinates and specific Unicode character widths are processed and used to create a typeface that fits the webpage. The best analogy for this process is PDF: a PDF that doesn’t have its fonts embedded will substitute Adobe Sans or Adobe Serif, modifying the characters’ widths and geometry so it fits the page correctly.

This is wonderful technology, but browsers do not yet support it as far as I can tell. In conclusion, tags are slowly developing as a robust method to control type in webpages but it has not been successfully implemented yet.

Plug-ins for downloading fonts

The idea of downloading fonts is not new: plug-ins have been available for awhile that do basically the same concept you see in the CSS3 method above. The idea is to download an encrypted font for use in displaying a webpage (the encryption is required so users can’t extract the font for unlicensed uses), and there are three products for this:

  • Bitstream’s TrueDoc. TrueDoc technology has been supported by only two products, one now defunct and the other out of distribution though still supported by Bitstream. The idea is to save a font in PFR (“Portable Font Resource”) format and then access it with an XHTML tag that supplies the URL of the PFR file. Note that this tag is not supported by CSS. Not surprisingly, browser support seems to have died off: the last browser that looks to have supported it fully was Netscape 4.
  • Microsoft’s Font Embedding. Font Embedding techology is not much better than TrueDoc. It works only with Windows (naturally) and the EOT (Embeddable OpenType) format that makes it work is not documented and is therefore unavailable to anyone other than Microsoft (of course) and is operational only with Internet Explorer (figures). It appears EOT files are created by the designer by scanning webpages and then selecting glyphs to go into the file. Other than the monopolizing actions of Microsoft, Font Embedding is a decent solution that is efficient and free to users.
  • em2 Solutions’ GlyphGate. em2 actually produced the technology behind Font Embedding, and they improved on it with a server-side plug-in that generates fonts in real-time for users and browsers on demand. The real beauty of this solution is that it works for every browser out there: if it can’t generate a font for a webpage, it will generate a graphic instead and substitute that for the text. GlyphGate can also apply advanced type features (ligatures, old-style figures, etc.) and even kerning, which browsers can’t even do yet. There’s no real downsides to this solution other than the fact that it needs to be set up on the web server: if you publish website through third-party hosts, GlyphGate will not be an option.

Using SVG to create type

Did you know SVG is a W3C standard based on XML? That web-friendly pedigree makes SVG very desirable:

  • SVG is readable and editable by human beings. There’s no proprietary formats or hidden technology involved with SVG, and SVG files can also be indexed like regular HTML pages.
  • XML tools are all you need to create and edit SVG graphics, and there’s plenty of options for such work.
  • SVG images can be indexed with metadata, making it easy to search and find graphic elements.

SVG graphics are described fairly simply with code in XML syntax. It looks like a bunch of numbers to regular folks (see page 350 in Fonts & Encodings) but at least it’s clean and organized. SVG type is even more clean because there are already several XML elements that can describe text: font-family, font-style, font-weight, font-size and more. These are all based on CSS and SVG defers to CSS specs when it comes to these properties. SVG also has a kerning element that can kern type, something that CSS can’t do. Entire fonts can be coded as SVG, plain-text files that dispense with the whole copyright issue altogether because it alone can’t be made into commercial font files (the W3C is encouraging developers not to write tools that do just that). A complete description of SVG fonts and their elements can be found in Fonts & Encodings.

Conclusion

Typography, fonts and the Web almost contradict one another. Fonts are a licensed product, purchased by one person and for use by only one person. Browsers and webpages are free and available anywhere. The conundrum is in how to allow users to have a font handy for browsing a website without actually purchasing the license. So far the solutions have come from various companies, each with their own agendas, and no one solution is perfect. However, I think a solution is not far away.

To Catch A (Twirled) Criminal

You’ve surely seen the news reports here, here and here: a Canadian pedophile was depicted in a bunch of photos online, but they were digitally altered to disguide his identity. German authorities magically restored the photos (almost) and were able to bring the man to justice. I remember watching the TV news when the story broke, and they made a big deal about the photos’ transformation from a swirled mess to a recognizable person. However, anyone who has experience with Photoshop and its filters can restore a photo like this quite easily.

About the Twirl filter

Photoshop achieves the swirled effect with the Twirl filter, available in Filters –> Distort –> Twirl…. As the name implies, the filter twirls the pixels around a center point. I don’t use the filter a whole lot, mostly in conjunction with other filters and other layers if I want some swirling motion. The twirl can be made clockwise or counter-clockwise, which is the key to reversing the effect: simply run the Twirl filter on a previously twirled photo in the opposite direction of the first twirl. The two cancel each other out and you end up with the original image. The reversal does degrade the resulting image somewhat, introducing some blurriness and possibly some artifacts, especially if the photo is in a lossy format such as JPEG (which would surely have been what the authorities were working with in this case.

Let’s try one

Twirled Spidey

Figures 1, 2 and 3: The original photo, the retouched photo, and the restored photo.

Twirled Spidey 2

Figure 4: Restoring a smaller photo does not work as well.

Figure 1 (left) is a mug shot of Spider-Man, which I chose for this example because he’s easily recognizable to everyone and has some details in the face such as the lines and eyehole shapes. Figure 2 (center) is the twirled photo, and to make things easy I’ve twirled the entire photo (you can twirl a selection if you choose) and used the maximum setting. To restore the photo in this case, selecting the entire image and using the maximum twirl setting in the opposite direction returns Figure 3 (right), which you can still recognize easily as Spidey and facial features are restored. One of the keys to retrieving a clear image is to start with the largest original you can find: the smaller the photo, the more pixels Photoshop needs to modify in order to create the twirl and the less data there is to recreate the original, unretouched photo. Figure 4 is the same restoration of the Spidey photo, but it is executed at a smaller size. The pixels on the edge of the twirl were so blurred and warped that Photoshop could not rebuild the original’s features.

Let’s see one of the real ones

Neil

Figure 5: One of the actual pedophile photos. The restored photo is at left, the retouched photo at right.

Figure 5 is an actual photo from the Canadian pedophile case (restored photo at left, original retouched photo at right). There are a few differences between this and the controlled Spidey experiment:

  • Only a portion of the photo is twirled—you can tell because the twirl effect is not reaching all the edges
  • The epicenter of the twirl is not on the center of the photo
  • This photo is from a news website and it’s quite small

The last one is really a killer: I can’t achieve the same results the authorities did because my photo is too small. I’d bet the photos the authorities used were large JPEGs posted on some message board or something. The other two factors—the location and position of the twirl—are not hard to overcome. The twirl’s epicenter is easy to spot—look for the “eye” of the storm—so if you use the Rectangular Marquee Tool, and drag from the center while holding Shift and Opt/Alt you will get a perfect square centered around the center spot. In this case the twirl ends on the left edge of the photo so drag the marquee until it can’t go any farther on the left. Once the selection is made, use the Twirl filter. Some tweaking of the controls may be needed.

Using Photoshop’s Color Settings To Generate A Plain Black Channel

The idea for this quick tutorial came from an article I wrote about converting CMYK images to spot color images with transparency. That article is fairly old but still gets some attention, and a reader wondered how to bring a duotone image into CMYK with proper channel separations. As you might know, by default Photoshop will create CMYK black with a combination of cyan, magenta, yellow and black ink even though the original document (a duotone in this case) uses a plain black ink. You can get around the problem by isolating the duotone channels:

  1. In Photoshop, make the duotone a monotone by selecting Image –> Mode –> Duotone… and changing the Type from Duotone to Monotone. This will leave you with only one ink.
  2. Create a new CMYK file and copy the monotone’s pixel data into one of its channels. If your monotone image displays the black ink, paste it in the black channel.
  3. In the monotone image, recreate the ink settings for the second color and then convert the image to CMYK. If the second ink is actually a process magenta, cyan or yellow, you can simply copy and paste the pixels into the corresponding CMYK channel.

There is an easier alternative to this method of mode conversion, copying and pasting: make Photoshop understand that black should separate as 100% black ink (plain black) and not a combination of CMYK inks (rich black). Here’s how:

Black Generation max

Figure 1: The Color Settings dialog box with the Black Generation drop-down menu set to Maximum.Insert caption here

  1. Go to Edit –> Color Settings…
  2. Click the CMYK drop-down menu and select Custom CMYK…
  3. In the Separation Options area, click the Black Generation drop-down menu and select Maximum (see Figure 1). The gray ramp graphic will change to show a single black line (actually, the black line is overlapping the CMY lines).
  4. Click OK twice to exit Color Settings.
  5. To convert the duotone to CMYK, just use Image –> Mode –> CMYK as usual.

That’s all there is to it: Photoshop will now generate as much black in the black channel as possible, which means rich blacks will be interpreted as plain blacks during CMYK conversion. The cool thing about this trick is you can set up a color settings preset to remember this setting, and you can even create an action that changes it at the push of a button. Let’s see the technique in action below on a logo for Imagetek, a digital document storage and management company in Des Moines. This logo works really well for the tutorial because it uses two colors, black and red. I’ve made this a Photoshop duotone graphic with process black and PANTONE Red 032. Standard Photoshop color settings will create the channels seen in Figure 1a: the red is separated into magenta and yellow but the black has been separated and added to all four channels. Figure 1b is what you get after setting the black generation to maximum: the red is separated into magenta and yellow but the black is in its own channel, leaving the cyan blank and the others untouched. This makes work much easier when working with spot color or CMYK printing!

Imagetek seps

Figures 2a and 2b: The Channels panel show the separations with conventional color settings (left) and with maximum black generation (right).Insert caption here

Illustrator CS3 Gets Kuler

The online color community from Adobe Labs delivers themes right into AICS3-via RSS

Many illustrators and Illustrator users now make use of an innovative new venture from Adobe Labs–Kuler. This is more than a source for inspiration. From your web browser you can compose, share, get feedback on, give feedback on, rate, and generally contribute to a color-interested community.

Kuler Web InterfaceThe Adobe Kuler web interface. It’s available to all–but Illustrator CS3 users are luckier than most, because Kuler is now a panel in AICS3.

Kuler on the web is definitely–well, cool, and a great place to get inspiration. That you can join for free and download the themes as Adobe Swatch Exchange files for use in Illustrator is icing. We don’t know about you, but we’d guess that the best way to make Kuler even more useful to Illustrator fans is to make it even more accessable–working around the web browser, for instance. And that is just what Adobe Labs have done.

Cutting Out The Middleman

Using Kuler via Adobe Illustrator CS3 is quite simple-though there might be a bit of trouble finding the panel. It’s found, from the Menu Bar, via Window>Adobe Labs>kuler. Kuler is still somewhat in an experimental stage, so Illustrator will courteously flash you a disclaimer caution before you get to use it. Carefully read and make sure you understand what it’s saying, then, if all is copacetic to you, click ok to accept the terms, and you’re on your way.

The Kuler panel shows you, based on RSS feeds from the Kuler web site, color themes from the Highest Rated, Newest, and Most Popular classifications; you can also create customized feeds. You can choose any individual feed, all feeds, or, via the search box, narrow it all down to just certain themes. Since you won’t need to fire up your web browser, load Kuler, download a swatch set, and import it, you’ve cut out at least a step or two.

A panel with the name ‘kuler’ on the tab will enter your workspace; it can be opened, closed, docked, maximized, and bucked about just like any other CS3 panel.

Kuler AICS3 PanelThe Kuler AICS3 Panel–Abstracting Kuler to a familiar form

Parts Is Parts

At first glance the interface may seem intuitive, and largely it is, but a bit of orientation may be in order. The Dropdown, at top, allows for quick selection between the RSS feeds that inform the panel. The search box works pretty much in the standard way (as illustrated, we searched with the word “sand”, and the panel returned us many sandy things). The small triangle at the left end of the theme name fires up your default browser to the the Kuler page on that particular theme. The buttons across the bottom allow you to, respectively, get the previous set of results (double-left triangles); get the next set of results (double-right triangles); Refresh feeds; Edit any custom feeds you might have; add a selected set to the Swatches panel, and upload any interesting sets you may have created to Kuler.

The flyout menu consists of two choices–Refresh Feeds and Edit Custom Feeds. In all, there are two ways to refresh RSS feeds and three ways to create custom feeds or open existing feeds for editing.

This article is meant to illustrate how you might fetch a set from Kuler, so lets go on to that.

Getting What You Need

After all this exposition, getting a Kuler set into your swatches panel is absurdly easy. Here’s all you need to do:

  1. Open the Kuler Panel (Window>Adobe Labs>kuler)
  2. Locate a theme you like, and click on it to highlight it.
  3. Click the “Add To Swatch Panel” button on the button bar on the bottom (second in from right)

That’s all there is to it; the selected theme should pop up as a swatch set, downloaded to your Swatches panel. The swatches are now yours to play with, save, move around, delete, or what-have-you.

Basic CSS: Inline, Embedded, External: What’s The Difference?

The cascade respects three kinds of styling implementation. What are they, and how do they differ?

What came before: In the previous exploration, we attempted to explain what the “cascading” in CSS meant, and why it was important to be aware of it. This time, we’ll explore the three main types of web page style sheet implementation; inline styles, embedded, and external.

simple web pageFigure 1: Our test subject; Not just another pretty face

Whether or not one chooses to style a web page with CSS, or uses styles within the HTML document, since each method is given priority over another it’s important to be aware of them and how they are implemented. To demonstrate we’ll show how we produced the illustrate browser output; a bare-bones HTML file with just three displayed elements, namely, an H1 header styled in default text at 150% of the browser’s default, an H2 header in default text at 130% of the browser’s default, and a paragraph (p) styled at 100% of the browser default.

The example, by the way, was copied from and inspired by an example in the CSS tutorial at W3Schools.com, which is an excellent free place to acquire a basic skill set in CSS as well as other technical web skills–check them out!

Figure 2:The basic, down and dirty, bare bones, just-the-facts-ma’am HTML code that will produce a default display.

Inline Styles

The most basic styling, called inline, should be familiar to anyone who knows basic HTML markup.

Every tag, from headings to paragraphs and beyond, can be individually styled by specifying attributes withing the tag itself. The styling attributes are simply placed after the tag selector (in our example, the selector is either the “h1″, “h2″, or “p” parts of the tags) and before the closing angle of the beginning tag. Figure 3 illustrates.

Inline styles exampleFigure 3: The bare-bones HTML with inline styling for the h1, h2, and p tags.

The advantage of inline styles is that they are reasonably quick to code and allow for customization on the individual element level, and they have the highest priority in the cascade. The disadvantage of them, however, and the reason that they are inappropriate for use beyond all but the simples HTML implementation is that they apply only to the tag in which they are found. Only those h1, h2, and p tags shown in Figure 3 will be styled as specified. If we later expanded this HTML code and added another paragraph, we’d have to remember to include the text-size inline, or it would be styled at browser default. Inline tags do not inherit.

Embedded Styles

Embedding is, in effect, taking the all the styles one will be using in the page and consolidating them in a single block at the top of the page. The browser is made aware of the embedded style coding by finding the <style type="text/css">...</style> tags in the head block of the file. All information between those two tags are interpreted as styling information. In Figure 4, we take the style information out of the tags and put them into an embedded style sheet in the head block:

embedded style exampleFigure 4: in the embedded style sheet above (found between the style tags in the head block) all styles used in the document have been consolidated into a single place.

The benefits of embedded over inline should be apparent. Each tag selector in the body of the HTML refers to a style rule defined in the style sheet, and if we later expanded the document by adding more headers or paragraphs, those new headers and paragraphs would automatically take on the style attributes assigned without having to add the information to every tag. This has the additional benefit of centralizing style administration; if one wanted to globally make a change to the paragraph style of the web document, there is only one place one needs to go.

If we wanted to custom-style in individual paragraph or header, we could still use an inline style to override the embedded style, of course, though if we want to maintain a unified design scheme across our presentation it’s not recommended.

External Style Sheets

The last and most advanced method of styling HTML is actually breaking the style code out of the HTML, placing it in a separate file all its own. The HTML refers to the file it is directed to by the <link> tag in the head block.

While it sounds a little tricky, it is actually all straightforward. All that’s needed to do here is to cut the embedded style sheet out of our file and create a plain text file containing just the styling information. assuming we’ve named our CSS file “style.css” and included it in the same folder as our HTML file, reference information is included in the header, thus:

External StyleFigure 5: The link tag in the head block points to a text file containing the style rules we’ve already defined. (click on it to see it closeup)

Essentially what the link tag is saying here is that we are linking to a stylesheet, that it can be found in the same folder as our HTML and it’s called “style.css”, that it is in fact a CSS, and that it is formatting the page for screen display. The only things in the CSS file are the three lines formerly found between the style tags in our embedded example.

The benefits of this are also apparent. Though it may be overkill for our tiny example, now not only will all h1, h2, and p tags in our current HTML file automatically inherit formatting from the external “styles.css” file without having to add any coding to our HTML file whatsoever. Not only that, but any other HTML file we refer to this CSS file with will also take on the formatting we’ve already defined for the h1, h2, and p tags.

Using external CSS for larger web page constellations is like having a central control panel for styling for an entire site that uses that CSS as its style reference. The increased efficiency and simplified ability to alter styles site wide should be evident–and extremely important to any designer who wants a quick way to keep a site’s design unified.

The Big Three

In this exploration we’ve seen that there are three basic important ways for implementing CSS in our HTML, and, moreover, we’ve gotten a good idea of what each one does as opposed to the other. By understanding the scope of the three types we can better understand just when one should be used over the other; and in the end, we find that external CSS is the best way to go when we find ourselves designing sites with many pages.

I’m Bananas for Illustrator’s Gradient Mesh Tool

Regular Feature: How-To's Day

gradient mesh banana

Illustrator’s Gradient Mesh lets you add shading you never though possible with a vector application. Here’s how to get started using it.

Using Illustrator’s Gradient Mesh feature you can make complex fills that have amazing realism. I have seen incredible examples of this, like the flower that was the logo for Illustrator CS and of course, Venus, who graced the Illustrator box and the top of the toolbox for many versions. So how do you use this wonderful tool? The best way to learn it is to jump right in and experiment with it.

To experiment with the tool, draw a simple shape like this ellipse. Use a solid color fill for this exercise; the Gradient Mesh tool will not work with pattern fills, and to keep a gradient fill you already have on an object there is an extra step. (Select the object, and go to Object > Expand and choose Fill. Then create the gradient mesh.) You can have a stroke, but the Gradient Mesh tool will remove it. One thing to remember when using the Gradient Mesh tool is that when you use this tool on an object, it converts it to a Gradient Mesh Object. Editing the points of the Gradient Mesh can also change the shape of the object as well as the color.

ellipseDraw a simple shape

Make sure the fill color is the active chip in the toolbox or the Gradient Mesh tool will have no effect. Activate the Gradient Mesh tool in the toolbox and click once on the ellipse. I clicked in the center just to show how much difference this tool can make even with one point of color added. The center point is selected; just use the color palette to change the color, and the color of the point changes, and shades into the rest of the ellipse.

changing point colorChanging the color of the point to add shading

Add points clicking with the Gradient Mesh tool, and change the color as desired with the color palette.

add colorsAdd colors by adding points

Points can be moved and edited using the direct selection tool or the Gradient Mesh tool, and the colors are redistributed on the mesh automatically. If you are using the Gradient Mesh tool, make sure you are exactly on the point you want to move, or the tool will add another point. Select multiple points to recolor or move by holding the shift key as you click on the point with the Direct Selection tool. You can also use the arrow keys to precisely move selected points.

move pointsMove the points to redistribute the colors

You can set up the mesh with as many points as you wish before coloring too. Go to Objects > Create Gradient Mesh and set the desired number of points across and down. For an automatic start to the shading, choose whether you want the mesh to shade to the center or to the outside. If you choose Flat, there will be points but no shading until you change the color of the points. Even though you can do it this way, I rarely do as I find it doesn’t always place the points where I want them, so I prefer to add them myself with the Gradient Mesh tool.

Create MeshCreate Gradient Mesh

Start off by drawing a rough design. The banana is very rough, but it’s all I needed since the majority of the work will be using the Gradient Mesh tool. The stem and the bottom are separate objects from the banana.

draw the basic shapesDraw the basic shapes

Use the Gradient Mesh tool for the shading.

banana with mesh in placeBanana with the mesh in place

When you are finished adding the colors, you will have something like the one below.

banana shapes with meshBanana shapes with Gradient Mesh

Use scatter brushes for the banana spots and other brushes to add accents.

bananaBanana after brushes

You can use also recolor clipart. There is some clipart already in Illustrator format in the Goodies folder on your Illustrator CD. Inside the Goodies folder is a folder called Clip Art and Stock Photos. Find a piece of clipart you like and start experimenting.

Tracing clipart works as well. Your initial drawing can be very rough, as mentioned before. Not only doesn’t it have to be perfect, the lines can overlap. Use Live Paint to fill the parts of the drawing with the base colors, and then use the Gradient Mesh tool to add the shading. After you start to use the mesh tool, the strokes are removed, and you’ll be able to move individual points to close any gaps.

rosesTrace clipart for a quick image

You could also use Illustrator’s Live Trace feature to trace a photo and use the Gradient Mesh tool for shading. This is an extremely powerful tool that is also a lot of fun to use!

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

Compound Shapes, Compound Paths, and the Pathfinder Palette

Regular Feature: How-To's Day

Should you use Illustrator’s Object menu to create a compound path, or should you use the Pathfinder palette? Are they the same? No, they aren’t…here’s the difference so you can decide which is the best for your illustration

A compound shape consists of two or more objects combined to make a single object. Each object used to create the path is assigned a shape mode. Compound paths act as grouped objects. I have created two circle objects in Illustrator that overlap.

overlapping circlesOverlapping circles

Select both circles. Open the Pathfinder palette (Windows > Pathfinder) and click the Subtract from Shape Areabutton. Now I have a crescent shape, much easier than drawing one with the pen tool. You can still see the outlines of both circles. This is because the shape can be released and returned to two circles using the Release Compound Shape command on the Pathfinder palette’s options menu.

Subtract from Shape AreaSubtract from Shape Area

Even though the shape appears to be only a crescent, using the Direct Select tool lets you select either circle; if you click on the cresent, you still see the outline of the whole circle. If you click on the area to the right of the crescent you see a circular selection: that’s because the second circle is still there: you just can’t see it. Note: To release a compound shape, open the Pathfinder palette options menu and choose Release Compound Shape. Your original shapes will reappear.

I can select the right circle, and use the direct select tool (A) to drag the right anchor point left as in the example here to alter its shape. When I release the mouse, the circle has been altered and I have a different compound shape.

alter the shapeAlter the shape

When selecting the new shape with the selection tool (V), the compound shape will behave as if it is two objects that are grouped, and move together, retaining the look of one object. If you switch tools to the direct select tool (A), each shape can be selected independent of the other, and each shape can also be moved independently of the other. If I select the white piece with the direct select tool (A), then change to the select tool (V), the white piece gets a bounding box. These handles can be utilized as they can on any shape, but will only affect the selected part of the compound shape. Parts of compound shapes can be edited indepdently of the other parts of the compound shape using the editing tools in the toolbar.

edit the shapeEditing the shape

But what if I wanted the crescent shape? What if it was the best shape I ever made and I don’t want it to be a compound shape? I want it to be a crescent so I can save it, and use it over, and hug it and squeeze it and call it George? (I don’t know why that cartoon popped into my head. Strange things happen when you write articles at 2 am!)

I’ll make two new shapes, but this time when I use the Pathfinder palette to Subtract from Shape Area>/strong> I will add another step:
clicking the Expand button on the pathfinder palette. It’s no longer a compound shape, but is a crescent-shaped object, or simple path.

Pressing and holding the option/alt key as you press the shape mode button on the pathfinder accomplishes the same thing with one less step.

expanded shapeExpanded shape

An Experiment: Pathfinder vs. Compound Shape

Step 1. Create a rectangle 150 pixels wide by 100 pixels high. Make it a solid color and give it no stroke. Duplicate it and set the duplicate aside.

rectangleCreate a rectangle

Step 2. Make a circle 100 pixels by 100 pixels. Give it a different color fill than the rectangle and no stroke.

make a circleMake a circle

Step 3. Go to Object > Path > Offset Path and enter a value of -15. This creates a second object on top of the first inset by 15 points. Make sure both circles are selected. Duplicate it and set aside.

offset pathOffset path

Step 4. Position the circles on top of the rectangle like this, and do the same with the duplicates and set them aside. We’ll use them in a minute.

position the shapesPosition the shapes

Compound Path Method

Step 5. First we’ll use the compound path method of combining the shapes. Go to Object > Compound Path > Make. Notice that the entire path is the color of the rectangle, which is the background element in the design.

make compound pathMake compound path

Step 6. Sometimes compound paths need reversed. If yours looks like the one above, use the direct select tool (A) to select the inner circle only. You will have to click the direct select tool on the edge of the small circle path, not the center, to select it.

reverse the pathReverse the path

Step 7. Open the Attributes palette (Window > Attributes). In the center in the middle are the path direction buttons. Click the one that’s up to change direction of the path.

attributes paletteAtributes palette

Now it looks right!

path reversedPath reversed

Step 8. You can use the group selection tool (it’s on the direct select tool flyout in the toolbox) to select the parts of the path you want to edit. You can move, reshape or transform the objects within the path. However, if you change the color, the whole path changes color.

change c0lorChanging color changes the whole path

Pathfinder Method

I’ll show you a different approach that will let you change the color of individual components as well as edit the shapes: using the Pathfinder Palette.

Step 9. Go to the duplicate shapes you set aside. They should be lined up and ready to manipulate.

duplicate shapesSelect the duplicate shapes you set aside previously

Step 10. Select both shapes and in the Pathfinder palette, hold the option/alt key and click the Exclude Overlapping Shape Areas button. This expands the path at the same time as it creates it. (The Exclude Overlapping Shape Areas button is the one to the immediate left of the Expand button.) This time the path is the color of the front element, the circle. When you use the pathfinder command, the attributes of the top object are retained.

retains top colorUsing the Pathfinder palette retains the color of the top object

Step 11. Using the direct selection tool (A) and clicking the edge of the different parts of the shape you want to change you will be able to change the colors as well as edit the shapes using the transform tools! If you want to be able to edit the colors, use the Pathfinder technique.

change colorsChange the colors

You can use this method when using text, but you will need one additional step. Make a shape and some text, and position the text behind the shape, but make sure it shows around the edges of the text. Choose the selection tool (V) in the toolbox so you have a bounding box around the text, and go to Type > Create Outlines. If this command is grayed out, make sure the text has the bounding box showing. This will change the type into objects.

create outlinesGo to Type >Create Outlines

As you did before, select the both type and the shape and go to the Pathfinder palette. Hold the option/alt key as you click the Exclude Overlapping Shape Areas button. All of the objects take on the color of the object in the front.

Exclude Overlapping Shape AreasExclude Overlapping Shape Areas

Use the direct selection tool (A) to adjust the letters and change colors.

adjust colors and shapesAdjust colors and shapes

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

Photoshop’s “Convert To Outlines” Command

Unlike InDesign and Illustrator, Photoshop does not have a “Convert To Outlines” command for outlining type in production situations…or does it?

More than one might expect, I often find myself creating my layouts in Photoshop rather than InDesign. Image-centric layouts, with only a few lines of type, are often more easily produced right in Photoshop, where the images will be coming from anyway. But there’s always the problem of getting the layout ready for the printer because Photoshop is way behind when it comes to packaging fonts and preflighting, all very important things when it comes to print production. InDesign makes it easy, but Photoshop wasn’t really designed for this even though it has most tools needed for print layout.

“Convert To Outlines” is the command available in InDesign and Illustrator that creates vector art out of type. Unfortunately, not only does Photoshop fail to package fonts, but there’s no Convert To Outlines command per se. However, there is a command that does practically the same thing:

Layer –> Type –> Convert to Shape

This command converts a type layer into a shape layer, which is a layer filled with a single color and masked by a path based on the pre-existing type. With this command, you can “convert to outlines” easily.

I often like to duplicate my type layers, turn off their visibility and stow them somewhere in the file so I can return to them if there’s changes to the type layers.

Using GCR To Separate A Black Graphic

Sometimes, a bitmap graphic (such as a logo or line art) needs to be converted into a CMYK file. When that happens, separation problems can happen. This technique exploits the power of Color Settings to make the conversion hassle-free.

Have you ever needed to convert a line art graphic�consisting of black and white�into CMYK? I do it sometimes when I get a CMYK logo from a client (JPEG, of course) and have to convert it into a two-spot color graphic. The biggest obstacle for a conversion like this is the fact that Photoshop usually converts black into a combination of cyan, magenta, yellow and black; you’ll see it if you look at the channels in the Channels palette after conversion. Black graphics (and even black type) becomes rich black that can cause problems if misregistration occurs when printing. If you need to convert to CMYK but the blacks must remain 100% black ink, you can do some cutting-and-pasting to get the right data into the right channel�or use the technique below.

Step 1: Before converting a grayscale graphic into CMYK, select Edit �> Color Setting… (Shift-Cmd-K/Shift-Ctrl-K) to access the Color Settings dialog box (see Figure 1).

fig1Figure 1: The Color Settings dialog box.

Step 2: In the Working Spaces area of the Color Settings dialog box, click the drop-down menu for CMYK and select Custom CMYK…. The Custom CMYK dialog box appears (see Figure 2).

fig2Figure 2: The Custom CMYK dialog box.

Step 3: In the Separation Options at the bottom of the Custom CMYK dialog box, you’ll find two types of separation�gray component replacement (GCR) and undercolor removal (UCR)�that dictate how Photoshop separates color into CMYK equivalents. UCR will build color using cyan, magenta and yellow but no black. GCR, on the other hand, uses black in varying degrees as dictated by the Black Generation drop-down menu below the GCR and UCR radio buttons. A setting of “None” creates the same CMYK combinations as UCR. As the settings increase�from “Light” to “Medium” and then “Heavy”�more and more black is introduced as cyan, magenta and yellow are removed. The highest setting, “Maximum”, will dictate Photoshop to use as much black as possible when converting to CMYK. It is this Maximum setting that makes this technique work; after specifying GCR and Maximum, click OK on both dialog boxes to return to the open grayscale graphic.

Step 4: Convert the graphic to CMYK with the usual Image �> Mode �> CMYK Color, then look in the Channels palette to see the cyan, magenta and yellow channels with no data and the black channel with the full logo. Congratulations�you’ve just generated a CMYK graphic that uses only black ink, very useful for logos and line art!

When Illustrator’s Save for Web Doesn’t

Regular Feature: How-To's Day

Fixing Illustrator’s Save for Web

Has Illustrator’s Save for Web stopped working the way you know it should? Tried resetting program preferences and it didn’t fix it? Here’s why, and how to get Save for Web back!

When I first upgraded to Adobe® Illustrator CS2, everything worked great for a while. Illustrator is the application I turn to most often, and I use it for web work as well as print. So when my Save for Web quit working properly, I was stumped. Everything I tried to save was jagged and grainy, and looked like a jpg saved at a too low quality setting, no matter what the quality setting was. They were so bad as to be unusable.

The first thing I tried was resetting the program preferences. That didn’t help. I tried reinstalling the application. That didn’t help. I tried sending the items I needed saved for web to my editor, and having him save them for me. That worked, but I could hardly call it a workable solution!

I went digging through the Finder and found something I had never known before: Save for Web preferences are not the same as the general program preferences stored in the aiprefs file. So when I reset the program preferences, absolutely nothing changed in Save for Web.

Resetting Save for Web Preferences on the Mac

Close Illustrator.

Go to Home > Library > Preferences > Adobe Save for Web AI 9.0 Preferences and drag the file to the trash.

Restart Illustrator and the preferences will rebuild.

Resetting Save for Web Preferences in Windows

Close Illustrator.

Go to C:\ Documents and Settings > Owner (where “Owner” is your username) > Application Data > Adobe > Save for Web AI > 9.0

Drag the 9.0 folder you just found to the trash.

Restart Illustrator and the preferences will rebuild.

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

Straightening Buildings, Part 2: How-To Use Distort And Perspective

Back in April and May I had a couple articles showing how to straighten buildings with the Crop tool and the Lens Correction filter. Now we’ll look at a more basic method that can do the job: Distort and Perspective transformations.

fig1Figure 1: The original image.

In Figure 1 we have the same building used in the previous tutorials: Salisbury House in Des Moines, IA. This technique makes use of Photoshop’s transforming options (found under the Edit menu), which are now augmented in CS2 with the same warp tools as those found with Type tool (more on warping in a future post). Depending on your skill level, you may find using Distort and Perspective more intuitive than Crop or Lens Correction; I used Distort and Perspective early in my career, back when I was a relative novice with Photoshop.

Step 1: Select the image (Select –> All, or Cmd/Ctrl-A).

Step 2: Select Edit –> Transform –> Distort. You’ll see anchor points on the four corners of your selection, which will be familiar to those who used the Crop tool earlier to straighten this building.

Step 3: When working with the Crop tool technique here, the anchor points are dragged so the crop area’s boundaries match the skew of the building. When working with Distort, however, the anchor points are dragged so the building’s edges become vertical. In this case, dragging the upper-left anchor point to the left and the upper-right anchor point to the right will bring the verticals in line with the image boundaries (see Figure 2). Remember that you can hold Shift and drag to keep the anchor point from moving vertically, as you can in practically any other dragging action in Photoshop.

fig2Figure 2: The Distort anchor points and guides are visible.

Remember that you can hold Shift and drag to keep the anchor point from moving vertically, as you can in practically any other dragging action in Photoshop.

Step 4: When the image looks straight, press Return/Enter to execute the distort. The image may look a bit stretched out after this, so select Edit –> Free Transform (Cmd/Ctrl-T) and drag one of the side anchors to stretch the picture to proper proportions. Hold down Option/Alt while you do this in order to stretch the opposite side at the same time (see Figure 3). Press Return/Enter to execute the transformation, and you’re done!

fig3Figure 3: Stretching the (final) image to restore proper proportions.

USING PERSPECTIVE

The Perspective transformation is almost exactly the same as the Distort transformation; the only difference is that, while Distort treats the anchor points separately, Perspective treats the anchor points as pairs. If you drag one, the other will move to maintain perfect horizontal or vertical perspective. This is great if your image is skewed upon a horizontal or vertical axis; if the image is more cock-eyed and perspective is more diagonal, Distort is more suitable.

In the case of Salisbury House, the photographer was pretty much in line upon the vertical axis so Perspective may be a helpful tool in this case.

Step 1: Select the image (Select –> All, or Cmd/Ctrl-A).

Step 2: Select Edit –> Transform –> Perspective. You’ll see anchor points on the four corners of your selection.

Step 3: Drag the upper-left (or upper-right) anchor point away from the image horizontally. Because Perspective is based on horizontal or vertical perspective, the anchor point will move upon a horizontal axis. You’ll also see the other upper-left/upper-right point move to match the change in perspective. The image will change to match the new perspective, which you can use to judge when perspective is appropriate.

Step 4: Press Return/Enter to execute the transformation. As with the transformation using Distort, you’ll probably want to use Free Transform to stretch the image a bit to compensate for the change in proportions.

3-D Type With The Radial Blur Filter

A couple weeks ago I wrote about a technique adding 3-D motion to an image with the Radial Blur filter. Now you’ll see how a variation of that technique can actually create three-dimensional type.

The key to this technique is in creating the proper radial blur based upon your original type, and then adding a Stroke layer style to it which makes the fuzzy blur hard-edged but retains the three-dimensional quality. Figure 1 is where I will begin: an appropriately loud bit of text on its own layer, positioned with some extra space around it. If you read my article on 3-D effects and the Radial Blur filter, you’ll know that you need some extra space around your object so when you create the blur it doesn’t go beyond the edge of the page—unlike other layer objects, pixels caught outside the document boundaries will be cut offv.

fig1Figure 1: The original image.

Step 1: Duplicate the text layer (Cmd/Ctrl-J).

Step 2: In the Layers palette, select the text layer that’s below the other and then select Filter –> Blur –> Radial Blur…. Photoshop will ask you if it’s okay to rasterize the type; this is okay (the upper type layer will remain vector).

fig2

Figure 2: Our Radial Blur settings.

Step 3: In the Radial Blur dialog box, match the settings shown in Figure 2. The positioning of your blur’s epicenter may be different depending on your text layer’s position, but it should be positioned where you want the vanishing point of the 3-D effect to be. In my case, I want the text to tower above our perspective so I placed the epicenter so the bottom text would be at eye-level. Click OK to commit to the blur (see Figure 3). Execute the radial blur again if you want a longer blur (Cmd/Ctrl-F to use the same filter and settings, or Opt-Cmd-F/Alt-Ctrl-F to use the same filter but change the settings).

fig3Figure 3: Radial Blur.

Step 4: We add bulk and depth to the radial blur by adding Stroke and Color Overlay layer styles to the layer (Layer –> Layer Style, or using the Layer Style button in the Layers palette). In Figure 4 below (sans type layer) I used a black stroke and bumped up the size slightly so we wouldn’t see a stroke around every single pixel in the radial blur; instead, I want enough thickness to the stroke that the pixels blend together into a large mass. While that takes care of the shape and outline of the receding type, the Color Overlay affects the blur pixels inside, giving the shape depth. Any color that adds contrast works well here; I used an earth tone to give the type the texture of earth and mud. When you’re satisfied, click OK to commit. If you keep your file with layers, you’ll be able to tweak these layer styles in the future.

fig4Figure 4: With the Stroke and Color Overlay layer styles added.

Step 5: Right now the original type layer does not match up with the three-dimensional counterpart. Now’s the time to use Free Transform (Cmd/Ctrl-T) and fit one to the other. It doesn’t matter which one you transform, but in the end your type should line up as mine does in Figure 5. I also added some layer styles to the type layer to complete the hard-core effect.

fig5Figure 5: Sunday! Sunday! Sunday!

How To: An Explanation of Illustrator’s Blending Modes

Regular Feature: How-To's Day

Illustrator’s Transparency palette sets the opacity of objects, and allows you to use blending modes determine how the colors of objects mix with the colors of objects they cross. Here’s how the blending modes work.

Blending modes control how the colors of the objects on the page interact with each other. Using Illustrator’s Transparency palette, you can set the blending modes to get the effect you want.

When you first open a blank document in Illustrator and draw objects on the page, the transparency palette shows the opacity is set at 100% by default. You can change this by either changing the opacity using the opacity dropdown menu by either typing in a value or using the slider to change it. This affects the selected object or objects. 100% is fully opaque and 0% is fully transparent.

opacity

The dropdown menu on the left contains the blending modes. Choosing a mode from this menu applies it to the selected object or objects. The mode determines how the colors in the objects interact with the colors of the objects below.

menu

Normal is the default, and the objects interact with each other as if they were both solid color objects, at 100% opacity. Normal mode displays the full value of the colors of all of the objects.

normal

The blue square above is partially obscured by the floral square. In normal mode, you can’t see the hidden part of the blue square. The rest of the modes interact with each other in different ways. If you are used to Photoshop, you know in Photoshop these are referred to as layer modes. They affect everything on the layer and you can have only one per layer. Not so in Illustrator! Every object can have its own blending mode. The modes go with the objects, not the layers.

Therefore you can have three objects with three different blending modes, and they will all react to each other differently.

Darkening Modes

There are three darkening modes: Darken, Multiply, and Color Burn. These modes create darkening effects when colors are used that are darker than 50% gray, which refers to colors whose luminosity is less than the luminosity of gray that is 50% white and 50% black.

Darken: In Darken mode, Illustrator compares colors in the blended layer with colors in the lower layer, and calculates which is darker. Wherever a pixel is darker on one layer than on the other, the darker pixel replaces the lighter pixel. It ignores values that are darker than the blending layer.

darken

Multiply: This mode darkens all pixels. Colors in the base layer or object are multiplied by the blended layer to produce a combination of both, which is always darker that the original. If you multiply any color with black, you get black and multiplying with white leaves the other color unchanged and the area that was white will be transparent (which in this case means it will show through as if there were no blending mode applied.) One of my favorite uses for this mode is to add scanned line art or handwritten text that is on white paper. Copy the scanned image to the photo and it will be on its own layer. Change this layer to Multiply, and the line art or text will show but the scanned page will be invisible.

multiply

To illustrate this, in this example there are two objects: one object is blue, and one object is a black and white pattern:

multiply

When the upper object, the black and white pattern, is dragged on top of the blue rectangle, in normal mode it hides the blue rectangle.

multiply

After the blending mode is changed to multiply, the white background disappears and all that is visible is the black pattern.

multiply

Color Burn: Colors in the blended layer are applied to those in the base to enhance contrast. The degree of color change depends on the intensity of tones in the blending layer. The darker the color the more intense the effect, and white areas remain unchanged.

color burn

Lightening Modes

These modes create lightening effects when colors are used that are lighter than 50% gray, which refers to colors whose luminosity is more than the luminosity of gray that is 50% white and 50% black. There are three lightening modes: Lighten, Screen, and Color Dodge.

Lighten: This mode is the opposite of Darken. In Lighten mode, Illustrator looks at the colors in both layers or objects and replaces the darker values with lighter values. It ignores values that are lighter than the blending layer.

lighten

Screen: Colors in the blending and base objects or layers are multiplied in inverse values, resulting in a lighter image with less contrast. Screen is the opposite of multiply.

screen

Anything black in the blended layer will be transparent, letting the base layer show through. Using the same two rectangles as we used before:

screen

Changing the blending mode to Screen results in the blue from the bottom object showing through the areas on the top object that were black:

screen

Color Dodge: This blending mode lightens the light tones and increases contrast, and does not affect dark image areas. This is the opposite of Color Burn but you may not always get exactly opposite results.

color dodge

Contrast Blending Modes

These modes increase contrast by changing highlights and shadows. We find Overlay, Soft Light, and Hard Light modes in this section. Overlay and Hard Light are useful in composites for dramatic effects, while Soft Light is more subtle, and gives a softer, but very effective, blending.

Overlay: Overlay is a mix of multiply and screen and works by multiplying the dark values and screening the light values of the base layer. It retains the brightness, so is often harsher than its companion, Soft Light.

overlay

Soft Light: While Overlay is a mix of Multiple and Screen Mode, Soft Light is a mixture of Darken and Lighter mode, so it works the same as Overlay except the effect is more subtle and softer.

soft light

Hard Light: When over 50% grayscale, the pixels on the base layer are screened, and when lower than 50% they are multiplied. Hard Light is similar to Overlay, but more dramatic.

hard light

Comparative Blend Modes

These modes use mathematics to compare layers with one another. There are two modes here, Difference and Exclusion.

Difference: Difference reacts to the differences between the upper and lower layer pixels. Identical values of the two layers are shown as black, and everything else shows as inverted colors.

difference

Exclusion: Exclusion is less contrasted than Difference.

exclusion

Image Component Blending Modes

These modes, Hue, Saturation, Color, and Luminosity, change the attributes of the object or layer.

Hue: Hue changes the hue of the lower layer to the hue of the upper layer but leaves brightness and saturation levels alone.

hue

Saturation: Saturation changes the saturation of the lower layer to the hue of the upper layer but leaves brightness and hue levels alone.

saturation

Color: Color changes the base layer to the hue of the blending layer but leaves luminosity of the base layer alone. Color mode is a great way to change the color of an image.

color

Luminosity: Luminosity changes the luminosity of the base layer to the luminosity of the blending layer while leaving hue and saturation the same on the base layer.

luminosity

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

Quick Tip: Masking A Layer With Layer Styles

Some layer styles can cause problems when the layer subsequently gets a layer mask. This quick technique will get around the problem.

fig1Figure 1: The original image.

Figure 1 shows a foreground object on its own layer and a background (which, coincidentally, is a shot of rural southeast Iowa where I grew up). The top layer, with the foreground object, has a strong Outer Glow layer style. I sometimes face a problem when I add a layer mask to the top layer and mask it with a soft brush: the layer style affects all pixels, so unless I mask all pixels completely in an area I’ll end up with a thick Outer Glow that I can’t mask effectively by masking the layer. See Figure 2.

fig2Figure 2: I masked the object, but the Outer Glow remains.

What I need is a way to mask both the pixels and the layer style, and it can be achieved by adding the layer to a group and masking the group. Photoshop’s masking capabilities are more complex than we often realize: we can mask layers, groups and even vector masks. We can even mask a layer with a layer mask and then mask that combination with a vector mask!

Pressing Cmd/Ctrl-G when your layer (or layers) are selected will place them in a group (you’ll see a folder icon in the Layers palette). Once that’s done you can apply a layer mask to the group and mask away. The result is something like Figure 3 below.

fig3Figure 3: The final image.

3-D Motion With The Radial Blur Filter

The Radial Blur filter is a great Photoshop filter, creating not only circular blur but also blur in three dimensions. This quick tutorial will show how to add three-dimensional motion to an object.

The Radial Blur filter is a lot of fun to use and can add a lot of energy and motion to your Photoshop designs. I especially like to use it to create three-dimensional type (I hope to do a tutorial on this soon) but it’s also great to add some three-dimensional motion to an object. Here’s how to do it:

Step 1: Start with an object on its own layer. Here I have a softball image on its own layer (no white pixels around it).

fig1Figure 1: The original image.

Step 2: Duplicate the object onto another layer (Cmd/Ctrl-J is the keyboard shortcut for copying a layer).

Step 3: Select the top object layer and then select Filter –> Blur –> Radial Blur…. The Radial Blur dialog box (Figure 2) appears.

fig2

Figure 2: The Radial Blur dialog box, with settings.

Step 4: Duplicate the settings shown in Figure 2. The settings are self-explanatory and the diagram in the lower-right of the dialog box helps a lot, but basically we are creating a full zoom effect with draft quality. You can step up the quality if you like, but I find draft quality to be good enough for most work. If you haven’t noticed, you can drag the midpoint in the diagram to specify where the zoom originates. By placing it in the lower-left quadrant, we will be creating motion from lower-left to upper-right.

Quick tip: In the Radial Zoom dialog box, drag the midpoint in the diagram to specify zoom direction.

Step 5: Press Return/Enter to create the zoom. The zoom moves away from the midpoint so the motion we end up with is actually of the ball moving toward the midpoint from the foreground (Figure 3). If that’s your intent then you are practically done; however, let’s take it a step further and modify the zoom blur so the ball is truly moving from left to right.

fig3Figure 3: The blur has been created, but it’s moving from foreground to background.

Step 6: Using Free Transform (Edit –> Free Transform, or Cmd/Ctrl-T) rotate and scale the blurred image until it looks like the zoom is terminating on the object (see Figure 4). Depending on how the image was blurred, you may have a sharp edge to the right where the blur met the right edge of the image. We’ll clean that up next.

fig4Figure 4: The blur has been moved.

Step 7: Add a layer mask to the blurred layer and, with a soft-edged brush roughly the size of the softball (or other object), mask the pixels on top of the object as well as any stray pixels. Depending on your taste you can mask all the pixels on top of the object, or do what I did and leave a small bit of pixels on top of the object so the elements of it can seem a bit blurry. Figure 5 shows my final image.

fig5Figure 5: The final image!

Live Bookmarks–RSS In Firefox

Bringing RSS content into your bookmarks, dynamically.
Regular Feature: How-To's Day

Of the major browsers, Firefox seems to have little, if any, obvious support for syndicated feeds–commonly known as RSS, or Really Simple Syndication, the XML file format that provides many avid web surfers with dynamically updated content.

As with many applications, however, it’s just a matter of terminology. Firefox does support RSS feeds but calls them Live Bookmarks. They have their pluses and minuses, but exist as a standard feature in Firefox, requiring no add-ons or plugins, and has the benefit of being simple to create and administer. Here’s how you approach them.

Identifying Sites that Supply Feeds

The first step in implementing a site RSS feed as a Live Bookmark in Firefox involves knowing whether or not the site you’ve loaded actually has one. In many cases, Firefox will tell you. If the current version detects a feed, the orange RSS icon will appear on the far right end of the location box, next to the pulldown arrow (in versions 1.0.x, the RSS icon appeared in the lower corner of the browser):

Firefox locaton bar w/RSS iconFirefox has found a RSS feed associated with my blog; the icon gives it away (click to enlarge)

Adding the Feed

To add my blog’s feed to your Firefox browser as a live bookmark, do the following:

  • Click on the RSS feed icon. This will deploy a sheet which allows you to specify where you want the bookmark saved. You can either use the simple dropdown or click the down-arrow button next to the dropdown to open a folder navigation display.
  • Navigate to the bookmark folder you want the Live Bookmark saved in. If you want to create a new folder for storing them, you can do this with the New Folder… button. When you’ve decided on where you want this stored, clicking Add will commit the choice.

Bookmark navigationNavigating to the folder we want to save this Live Bookmark into.

Sometimes a site you frequent will have RSS feeds but Firefox won’t see them. You’ll know they’re there because many sites that supply syndication will say so, oftentimes with the RSS or XML badge, or a simple textual link. In the case where Firefox doesn’t detect the feed, here’s how you add the feet to Firefox manually:

  • Right-click (or control-click) on the feed icon or link, then copy the link to the Clipboard.
  • From the Menu Bar, do Bookmarks>Manage Bookmarks…. The Bookmark Manager will open.
  • In the Bookmark Manager, from the Menu Bar, do File>Add Live Bookmark….
  • Fill in the dropdown sheet when it appears: Give your Live Bookmark a name, paste in the feed URL in the next box, and add a description (which is optional)
  • Once okayed, the Live Bookmark will appear in the Bookmark Manager’s sidebar. In the main listing pane, the Live Bookmark can be drug and dropped anywhere in the list you want it to appear

Reading and Managing Live Bookmarks

Naturally, the one reason any web surfer and information junkie would subscribe to an RSS feed is to read it. Since it obeys the general paradigm of the book mark, you use a Live Bookmark just like a regular one.

In my case, I stowed my LB for The Zehnkatzen Times in a folder on the Toolbar I called Live Bookmarks (descriptive titles, always!) that I created to keep all my future LBs in for quick retrieval. When I clicked on that toolbar folder, here’s what I found:

Live BookmarksA Live Bookmark displaying its contents (click to enlarge)

The content of a Live Bookmark can be quickly identfied by the distinctive icon, which combines the icon for a document with the “ripple” symbol from the RSS icon. Clicking any of these post titles will open the post in your browser window.

Live Bookmarks are managed as regular bookmarks are also, and can also be read, from the Bookmark Manager. They obey the same basic physical laws that other bookmarks do: they can be moved about, sorted into different folders, and even deleted just like any other bookmark, and clicking on any LB in the Manager display will also cause them to open up in the browser.

Pluses and Minuses

Live Bookmarks are a good way to quickly add RSS content to your browsing experience in Firefox. They are rather a basic implementation, however.

On the plus side:

  • They are quick to implement and simple to install.
  • They require little technical knowhow outside of basic browser usage knowledge.
  • They are easy to use and easy to manage.
  • They understand RSS, RDF, and ATOM formats, the most common ones you’re likely to find in the current version.

The quickness and convenience seem to come at a price, however. On the minus side:

  • LB does not support OPML feeds.
  • LBs provide post titles only; they don’t provide previews or summaries.
  • They don’t provide email links (such as available under Wizz Reader, as an example).
  • The posts can’t be marked as read/unread, or screened in any way.
  • There is very little customization.

Live Bookmarks may not be the power-users way to go at the present time, but their quickness and usability makes them accessable by, pretty much, everyone. Requiring no extra installation, they can significantly enhance the browsing experience of the basic web surfer and info gourmet (and gourmand).

(Thanks to tipster Ross Chrystall for the suggestion that led to this article)

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

How To: Explaining the Illustrator 3D Filter

Regular Feature: How-To's Day

using the 3D filter

Illustrator’s 3D Filters can be confusing until you understand how each of the three filters of this trio work. Here’s how to know what to choose for the effect you want.

Illustrator CS and CS2 have a 3D Effects filter. These effects can be found on the Effect > 3D submenu, and there are three to choose from. Which you choose depends on the effect you want:

  • The 3D Extrude and Bevel filter makes three dimensional shapes from flat shapes.
  • 3D Revolve spins a path in a circular direction around the vertical axis of a path.
  • 3D Rotate alters the perspective of a 2D object in three dimensional space, like rotating a piece of paper to look as if it is lying on a table.

Several features are common across all three 3D Effects. Let’s look at these before we use the effects.

Position Menu

The position menu in all three 3D Effects contains many presets that you can choose. These presets simulate looking at the object from different angles. Open the popup menu and make your choice. That may be all you need to do. Make sure the preview box is checked so you can see the effect in real time on the object.

position

TIP! While using the 3D effect, save OFTEN. It’s very processor intensive and Illustrator can crash without warning, even if you have lots of ram, especially if you’ve been working for a long time.

Custom Rotation

All three of the 3D Effects let you set custom rotations by clicking and dragging the cube, and if you check the preview box you can see the effect on your object. Be aware, however, that this can be slow to render, and take a lot of processing power. Depending on the complexity of the object, the settings you select, and the power of your computer, rendering the final effect could take a while, so be patient. You might want to turn preview on and off as you work in the 3D dialogs so you don’t spend so much time waiting.

Now let’s look at the different 3D effects.

Effect > 3D > Extrude and Bevel

This effect makes an object appear 3D by adding depth. A solid or hollow appearance can be made by capping or uncapping the extruded object. The Position menu has presets you can choose, or you can click and drag the cube to rotate your object, or type in angles in the boxes. You also have the option of choosing preset bevels and adjusting the height. The preview area lets you click and drag the preview cube to rotate your object in three-dimensional space; or, if you prefer, you can type in precise measurements.

extrude

Click the More Options button to change the light settings and shading color.

more options

The appearance of the original object also makes a difference how the effect works on the object. A stroked object with no fill looks like an uncapped object. In the following examples the same settings were applied to the same object, but it had different strokes and fills.

extrude

extrude

extrude

extrude

extrude

This effect is great for making boxes, 3D text, and other 3D objects.

extrude

TIP! Whenever you’re using the 3D filters and you want to start over from within the 3D dialog boxes, hold the opt/alt key and the Cancel button turns into a Reset button. Click the Reset button to start over.

Effect > 3D > Revolve

Next we’ll look at the 3D > Revolve effect. The 3D revolve effect spins a path in a circular direction around the vertical axis. It creates great cylindrical shapes and spheres.

To try 3D Revolve, draw a circle with the ellipse tool with no fill and a light blue stroke. Make sure to hold the shift key to draw a perfect circle. I used light blue because I want to make a globe using the map be using the circle in a project in a few minutes.

Use the scissors tool to cut the top and bottom points so you have a semi-circle. To “cut” the circle, click once with the scissors exactly on the top and bottom points of the circle.

scissors

Click on the right side of the circle and delete it. You should have a blue semi-circle left. You could actually use either side of the circle, but it will make a difference in the settings in the Revolve effect dialog if you use the right side, and I want to show you a common hiccup new users of this effect often get stuck on.

Go to Effect > 3D > Revolve to open the Revolve filter.

revolve

In the Position Menu, choose Off-Axis Front. The preset will work fine here. The Revolve Angle in the center section is set to 360º; this means it will revolve a full circle around the vertical axis. If you entered 180º, it would only revolve half way around the circle, which is a great way to show something in cutaway view.

Make sure the solid cap is chosen as in the screenshot, and make sure Preview is ticked. Offset should be 0 pt. Any higher than 0 and it will leave a hole down the middle.

From: Change this to Right Edge. The vertical axis we want to revolve around is on the right edge of the semi-circle; if you leave it set on Left Edge, you would see something like this:

revolve

Of course, if you were using the right half of the circle, then the opposite would be true and the sphere would result from using the Left Edge setting. Basically, what this means is if you get something off-the-wall like the above, switch to Right Edge or Left Edge, whichever you are not using, to correct it.

Choose Diffuse shading for Surface. In different projects you will want other shading, most of the time Plastic Shading because it is shinier, but this time, use Diffuse. Your sphere should look very much like this one:

revolve

If you want to try mapping a texture to the sphere as I did in the map art tutorial, save the sphere document now. You can use this effect to make vases, bowls, and other objects you want to be totally three-dimensional.

Effect > 3D > Rotate

Any flat artwork can be rotated in 3D space with the 3D Rotate effect. The object in this effect, however, remains two dimensional. Either drag the cube in the preview area to rotate the object or type in measurements and perspective.

rotate

rotate

To learn to map artwork to the 3D shapes you create, try this tutorial.

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

How To: Mapping Artwork onto 3D Objects with Illustrator

Regular Feature: How-To's Day

globe

Using Illustrator symbols, artwork can be mapped onto the 3D objects you create. Here’s how!

Textures and artwork can be mapped onto the 3D objects you create. I’ll use the blue sphere I made in the 3D Filter How-To to create a globe. I need a map, so I downloaded one from Nasa Reusable Images. I used “World Map with Solid Red Continents”. I actually wanted my continents green, but the green one available on this page would not open for me so I just recolored the red map green.

With the map file open in Illustrator, zoom out or scroll until you can see the whole map.. Drag the selection tool around it to select all parts of it. Cmd/ctrl + G (or Object > Group) to group it. If you used the red map, change the color to a dark green using the Swatches palette.

Edit > Copy to place a copy of the green map on the clipboard. Edit > Paste in Front to paste the copy directly on top of the original. You won’t see any difference, but it’s there.

map

Change the color of the top copy to bright green. The top copy will already be selected, so just click on the bright green swatch in the Swatches palette. Now use the arrow keys to nudge the top copy up and to the left three pixels.

Select > All, then group (cmd/ctrl + G). The map now has some dimension.

map

Converting the Map to a Symbol

Any artwork used for mapping to 3D object in the 3D filters has to be a symbol. Drag the maps group to the Symbols palette and drop it in to convert it to a symbol. You can also open the Symbol palette options menu and choose New Symbol, and then you would have an opportunity to name it, but it isn’t necessary. After the map has been converted to a symbol, you can delete it from the page. You won’t need it anymore. Save this file as globe.ai, and do not close it. The map symbol is now a part of the document globe.ai.

Open the sphere image you created in the 3D Filter How-To. Select it and copy it to the clipboard.

Make the globe.ai document active again and Edit > Paste to add the sphere to the globe document. The reason you need to put the sphere into the globe document is you need the map symbol you defined to be available. Since symbols are document level resources, that is, they are not saved with the program preferences but rather with specific documents, the only place that symbol exists is in the document it was created in, which is globe.ai. In order to map it to the sphere, the sphere has to be in the same document as the symbol.

You’ll need to use the 3D Revolve filter again to get the map on the sphere; but if you go to Effect > 3D > Revolve, Illustrator will want to add another instance. What you want to do is to edit the instance you already have. To do this, open the Appearance palette and double click on the effect icon in the palette. This will let you edit the existing effect.

map

TIP! To completely get rid of an instance of the 3D Effects, drag the effect icon in the Appearance palette to the palette trash.

The Revolve dialog opens again. Make sure you drag the dialog off to the side by its title bar so you can see the sphere. You don’t need to change the rotation, you just need to map the art to the sphere, so click the Map Art button at the top right side of the dialog.

The light areas in the diagram are the surface areas you can see in the image at its present rotation. The dark areas are hidden, or more accurately will be on the side of the sphere that is rotated away from you. Notice the sphere is relatively simple: it has 2 surfaces that can be mapped. Move from side to side with the arrows. Place the map on surface 1.

map

Open the Symbol menu. The symbol you saved will be at the bottom of the list. Double click on it to add it to the diagram.

map

It’s too large for the diagram. You can resize by dragging corner handles the same as any object, or you can resize it instantly to fit by clicking the Scale to Fit button. Click the button now to resize the map.

map

map

Click the Preview button so you can preview the map on the sphere. This might take a while to render. Notice how the maps of North and South America show up, but the maps of Asia, Africa, and Australia are hidden on the other side of the globe.

globe

Shaded artwork takes longer to render and takes more computing power, but it usually looks more realistic. Try checking the Shade Artwork box and letting it render to see which version you prefer. On some images it will make a big difference, and on others it won’t, and if there is transparency in the artwork it might even look strange. You’ll have to decide as you use the Effects which way to proceed on an image by image basis.

globe

If you are happy with the result, click OK in the Map Art dialog.

globe

You could actually rotate the globe in the 3D Revolve dialog if you wanted a different part of the globe showing. When you’re done rotating by dragging the globe in the preview window, click OK in the 3D Revolve dialog to apply the mapped art to the sphere, and you now have a globe. Save the file.

globe

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

The Basics on Technorati Tags

“Tagging” posts is one of the hottest current ways to be connected to other content and to be noticed. But you don’t have to have an application to tag posts for Technorati: here’s how you can do it ‘by hand’.”
Regular Feature: How-To's Day

If you design, chances are you blog. It’s fun, increasingly easy, free, and therefore a low-(or no-added-)cost way of self-promotion. It gives the designer a chance to hone their expertise, polish their writing (something all too few designers have a handle on is communication through the written word, and it’s powerful) and do a sort of public research and share and attract like minds.

What Tags Do

These days, one of the fashionable ways to connect to community is through tags. Tags are sort of like keyword categories and live at the end of your blog posts, and are addressed by services such as Technorati. In this case, if one writes a post and decides that good keywords to describe the content are “design”, “illustration”, and “print”, each of these words can be indexed by Technorati by those keywords. anyone can go to Technorati, keyword-search for “design”, and any blog post you have tagged with that word will pop up–along with a whole lot of others, naturally.

There is an art and style to tagging, but that’s not what we’re going to concentrate on here–what follows is the nuts and bolts.

A Technorati Tag

The Technorati tag looks like this:

<a href=”http://technorati.com/tag/tagnam” rel=”tag”>tagnam</a>

The trick here is to replace each instance of tagnam with your keyword. If I tagged a post “design” for listing on Technorati, then, it would look like this:

<a href=”http://technorati.com/tag/design” rel=”tag”>design</a>

A post thus tagged will appear–along with all others so tagged–at the URL http://www.technorati.com/tag/design. Clicking on the linked word in the posting will take the surfer directly to this URL, which lists this and all other posts so tagged.

The Tag List

How many times have you seen the following at the bottom of a blog post:

Technorati Tags: design, Adobe, InDesign, QuarkXPress

From above, we know if this was a real tag list, clicking on each of the words in the list would take us to a Technorati page listing posts for each keyword. This is also easy to accomplish. Recall that our examples were “design”, “Illustration”, and “print”. The tags would, respectively, look as follows:

  • <a href=”http://technorati.com/tag/design” rel=”tag”>design</a>
  • <a href=”http://technorati.com/tag/illustration” rel=”tag”>illustration</a>
  • <a href=”http://technorati.com/tag/print” rel=”tag”>print</a>

Now, if included at the end of the post with no other glyphs or punctuation, the words would show up thusly: designillustrationprint with no explanation. Adding the rest is easy; this is actually elementary HTML. All it takes is a comma and space between the tags and the string “Technorati Tags:” just before this string of tags, Thusly:

Technorati Tags: <a href=”http://technorati.com/tag/design” rel=”tag”>design</a>, <a href=”http://technorati.com/tag/illustration” rel=”tag”>illustration</a>, <a href=”http://technorati.com/tag/print” rel=”tag”>print</a>

Which will produce the following in the browser:

Technorati Tags:, ,

The above tags are active links. Click each and see what happens. This is connecting in action, and why design bloggers owe it to themselves to used tags.

What next?

The next step is to ping Technorati to index your blog. There is a manual ping page here, and many blogging apps support automatic pinging. Some popular services, most notably Blogger, however, do not, and it’s suggested that the avid tagging blogger bookmark the page for easy reference.

After a short time, your post will be included in any keyword listing.

Seems a lot of work…

Tagging seems to involve a lot of HTML coding. While there is much of that to do, there are shortcuts. Once again, however, while Blogger does allow embedding of tags, the Blogger-based blog owner has to make the tags up themselves. There are assists to do this (watch for an upcoming Freeware Friday for a Firefox-based bookmarklet that will be mad assistance) but it never hurts one to learn from the ground up on such things. One possible thing is to have a macro–either software-supported or a text clipping of some variety–that can be cut and pasted into the blog posting. It’s standard HTML, and easily repeatable.

Once you have Technorati linking your posts to others on the same subject, given the amount of self-promotion this can enable, it won’t seem all that much work.

Lastly, a couple of general hints

  • Keep your tag words descriptive and appropriate to the post. This will enhance the post’s ability to be listed with other appropriate posts under the same tag.
  • Two-word tags require a plus-sign to link together. If, instead of “Adobe” and “InDesign” you wanted the link to be “Adobe InDesign”, the tag would look like this: <a href=”http://technorati.com/tag/Adobe+InDesign” rel=”tag”>Adobe InDesign</a>. The link will show up in the tag list without the plus sign; there will be a space between the words in the compound term

It’s worth it to foster a little connectivity. Tag! You’re it!