Vous êtes sur la page 1sur 5

Josh The Egg and The Return of the Shadows

Introduction

The standard way to add a drop shadow to an image is to fire up GIMP or Photoshop, add a background layer, add a transparent layer, select a rectangular area the size of the image you want to give a drop shadow, blur it, add a new transparent layer, paste the image in the layer, move the layer with the blurred shadow a bit to the right and to the bottom and finally flatten the layers. If you know how to use GIMP or Photoshop, this is no big deal. If you never did this before, follow the steps in, say, 40 tutorials and you will have a good basic understanding of how to use these graphic programs. Take a look at Wintris, a T*tris Clone for Windows I've written. You can find Wintris on my site. The background of Wintris was painted in GIMP 1.x. Nice, innit? But if you don't have the time to learn how to use these programs, or you don't want to learn them just for adding a simple shadow to an image, maybe there's an easier way

Shadow is a fascinating program which can add drop shadows to images. It's a command line utility written in C#. Because it is a command line program, you can add drop shadows to images in batch. Suppose you have a site with 4000 thumbnail images, you could add a drop shadow to all these images in seconds. Shadow is based on GPaint, my program to generate Google-like logos.

To demonstrate the capabilities of Shadow, let's put Josh The Egg to work. Josh was born in Microsoft Expression, a wonderful vector graphics program. Here's a picture of Josh:

vector graphics program. Here's a picture of Josh: Usage If you invoke Shadow without any arguments,

Usage

If you invoke Shadow without any arguments, it will display the options:

Shadow without any arguments, it will display the options: If you provide a file name on

If you provide a file name on the command line and no options, Shadow will add a drop shadow to the image and put the image on a white background:

Collapse | Copy Code C:\>shadow josh.jpg

Collapse | Copy Code

C:\>shadow josh.jpg

Collapse | Copy Code C:\>shadow josh.jpg If you don't want to modify the input file, you

If you don't want to modify the input file, you can specify an output file:

Collapse | Copy Codeto modify the input file, you can specify an output file: C:\>shadow josh.jpg josh-with-shadow.jpg Options Option

C:\>shadow josh.jpg josh-with-shadow.jpg

Options

Option -s: shadow widthCode C:\>shadow josh.jpg josh-with-shadow.jpg Options The width of the shadow is specified in pixels. If you

The width of the shadow is specified in pixels. If you want a shadow of 20, you invoke shadow like this:

If you want a shadow of 20, you invoke shadow like this: Collapse | Copy Code

Collapse | Copy Code

C:\>shadow -s:20 josh.jpg joshs.jpg

Collapse | Copy Code C:\>shadow -s:20 josh.jpg joshs.jpg Option -b: border width The background of the

Option -b: border widthCollapse | Copy Code C:\>shadow -s:20 josh.jpg joshs.jpg The background of the picture of Josh The

The background of the picture of Josh The Egg is white. If you add a drop shadow to this picture and you put it on a white page, the edges of the picture are not clearly visible. A border can fix this problem:

are not clearly visible. A border can fix this problem: Collapse | Copy Code C:\>shadow -b:

Collapse | Copy Code

C:\>shadow -b: josh.jpg joshb.jpg

Option -m: margin The margin is the area around the actual picture which exposes the

Option -m: marginThe margin is the area around the actual picture which exposes the background. The margin

The margin is the area around the actual picture which exposes the background. The margin is expressed in pixels. Note that I've set the attribute border of the <img> tag to 1.

Collapse | Copy Codeset the attribute border of the <img> tag to 1. C:\>shadow -m:20 josh.jpg joshm.jpg Option -r:

C:\>shadow -m:20 josh.jpg joshm.jpg

Collapse | Copy Code C:\>shadow -m:20 josh.jpg joshm.jpg Option -r: shadow direction You can change the

Option -r: shadow directionCollapse | Copy Code C:\>shadow -m:20 josh.jpg joshm.jpg You can change the shadow direction by specifying

You can change the shadow direction by specifying the -r option on the command line. It's argument can be 0, 1, 2 or 3:

on the command line. It's argument can be 0, 1, 2 or 3: -r -r:1 Option
on the command line. It's argument can be 0, 1, 2 or 3: -r -r:1 Option

-r

the command line. It's argument can be 0, 1, 2 or 3: -r -r:1 Option -t:

-r:1

Option -t: shadow transparencycommand line. It's argument can be 0, 1, 2 or 3: -r -r:1 -r:2 -r:3 Shadow

can be 0, 1, 2 or 3: -r -r:1 Option -t: shadow transparency -r:2 -r:3 Shadow

-r:2

be 0, 1, 2 or 3: -r -r:1 Option -t: shadow transparency -r:2 -r:3 Shadow uses

-r:3

Shadow uses the concept of layers, just like in GIMP or Photoshop. You can change the opacity of the shadow layer by specifying a number from 0.0 to 1.0 as an argument of the -t parameter:

Collapse | Copy Codeby specifying a number from 0.0 to 1.0 as an argument of the -t parameter: C:\>shadow

C:\>shadow -t:0.5 josh.jpg josht.jpg

Option -a: background color You can change the color of the background specifying the color

Option -a: background colorYou can change the color of the background specifying the color in hexadecimal notation. Invoking

You can change the color of the background specifying the color in hexadecimal notation. Invoking Shadow like this will put Josh on a green background:

Shadow like this will put Josh on a green background: Collapse | Copy Code C:\>shadow -a:00FF00

Collapse | Copy Code

C:\>shadow -a:00FF00 josh.jpg josha.jpg

| Copy Code C:\>shadow -a:00FF00 josh.jpg josha.jpg Option -c: shadow color If you live on Mars,

Option -c: shadow color| Copy Code C:\>shadow -a:00FF00 josh.jpg josha.jpg If you live on Mars, maybe you appreciate a

If you live on Mars, maybe you appreciate a red shadow:

Collapse | Copy CodeIf you live on Mars, maybe you appreciate a red shadow: C:\>shadow -c:FF0000 josh.jpg joshc.jpg Option

C:\>shadow -c:FF0000 josh.jpg joshc.jpg

| Copy Code C:\>shadow -c:FF0000 josh.jpg joshc.jpg Option -d: border color Changing the border color is

Option -d: border color| Copy Code C:\>shadow -c:FF0000 josh.jpg joshc.jpg Changing the border color is also a piece of

Changing the border color is also a piece of cake (don't forget to specify a border width!). Note that the quality of the image is influenced by the image format. The red border in this example looks a bit dirty. When the image is saved as a BMP file, the border color is ok.

the image is saved as a BMP file, the border color is ok. Collapse | Copy

Collapse | Copy Code

C:\>shadow -b:2 -d:FF0000 josh.jpg joshd.jpg

Option -n: no soft shadow If you don't want a soft shadow, you can turn
Option -n: no soft shadow If you don't want a soft shadow, you can turn

Option -n: no soft shadow

If you don't want a soft shadow, you can turn it of by specifying the -n parameter on the command line:

it of by specifying the -n parameter on the command line: Collapse | Copy Code C:\>shadow

Collapse | Copy Code

C:\>shadow -b:1 -n josh.jpg joshn.jpg

| Copy Code C:\>shadow -b:1 -n josh.jpg joshn.jpg

http://www.codeproject.com/Articles/8418/Josh-The-Egg-and-The-Return-of-the-Shadows

5