Hands On; Lighting Effects2, The Bulkhead Project

The Bulkhead Project

Here's what we're going to create in this lesson.

Here's the five elements we'll use to make it.

"fire.jpeg"

480x480, 49k.

"bulkheadbkg.gif"

180x180, 9k.

45% Grey

RGB=115,115,115

100% black

RGB=0,0,0

The Mask

332x96, 2k.

First, you need a 4 layer document in Photoshop. Make sure you're in RGB mode.

-Layer one has the flame image in it, use this one, it's the best picture of fire I own, and I use it a *lot*. Keep this large size version of it, and then shrink it down and paste it into other images. This version is 480x480 pixels, a handy size.

-Layer 2 is filled with black.

-Layer 3 has the dark grey in it, RGB code 115,115,115.

-Layer 4 has the grey background from my homepage in it. Open the background, "select all", and go to "edit/define pattern". Now go back to layer 4, and choose "edit/fill", and select "pattern" at 100%. It will tile that background into the layer.
We'll also need a new channel for our mask. Click on the little triangle, and select "New Channel". Select all, and paste the "mask" file into it. By default it will name the channel "#4". You can also double-click on the thumbnail image of the channel, and rename it, like I have here.

Here's what your main pallettes will look like if you've done everything correctly. You can substitute a different image for the mask, or the background, the technique is pretty much the same.

OK, we're ready to go. Working on the Channels pallette, drag the Mask channel onto the dotted circle at the bottom. This loads that selection. Go back to the Layers pallette again, and delete that shape from the top 3 layers, (2,3, & 4). Now you can see the fire showing through the grey background.
Back to the Channels pallette, and drag "The Mask" onto the little rectangle with the corner folded over. This duplicates the channel, naming it "The Mask copy". We'll want this to be a black image on a white background, so go to the menu and choose "image/map/invert", or "command+I". Drag this image onto the dotted circle, so the white is selected. Now we do 2 "gaussian blurs", first at 4 pixels, and then at 2 pixels. De-select the white, and give it a final blur of only 1 pixel. This is the channel we'll use for our texture channel in the "Lihgting Effects" filter.

Here's how everything should appear now, with a detail of "The Mask copy"...

Back to the layers pallette, and let's choose the top layer, #4. With nothing selected, go to the filters menu and select "lighting effects". When that fires up, (could take a few seconds), we're ready to go. I used 2 spotlights for this image. In the "styles" menu, choose "crossing". Click on the small white circle at the center of that ellipse, and move it to the side. This is one spotlight. The straight line is pointing towards the source of the light. Click on one of the outside dots, and turn the light so it's coming from your top left. Click on the other white dot, and now that spotlight is activated. We want to point this one from the bottom right, but we don't want it to shine white light. Unlike the real world, we can also shine darkness out of these spotlights. Cool, huh? Click on the white square in the "light type" window, and a color pallette will pop up. Let's choose a very dark purple, almost black. Say OK, and now we'll see how it looks. OK, let's make this thing 3D now. Go to the bottom menu, "texture channel", and select your blurred channel, it should be "channel 5". Select the check box, "white is high", and choose a height of about 16. Don't go overboard, that thumbnail drawing of what's going to happen is not super-accurate. If you have the height *too* high, you'll get some bizzare effects at the edges. Play with the settings in the "Properties" menu, the bottom two will control your brightness, "exposure" by just making things lighter or darker, and "ambience" by shing an overall light of the color in the square over the entire image. The top two settings, "Gloss" and "Material", will affect the final result the most. You can choose "shiny" and "plastic" at 100%, and your image will throw off a bright reflection, just like hard plastic.

For this image, I selected "matte" and "metal" at 50% each, because I didn't want any highlights mucking up the transition between the image and the background. Here's the Lighting Effects window with the selections I used. Note the White spotlight is shining down from the left. The black spotlight is not selected, but it is shining *up* from the right.

All right! We're almost there! Looks pretty good, but no-way is it going to merge with that background now. We want this image to melt into that grey layer, that color "#737373" is the average of the background colors. Let's load the original, un-blurred channel now. Working on the top layer, let's go to the "select" menu, and choose "modify/enlarge". Enlarge it by 4 pixels. Now, in the same menu, select "feather" at a setting of 2 pixels. Same menu again, and choose "invert". Now we've selected everything outside are text. DELETE all this, and the grey layer underneath show through.
This is almost it. All that's left is the shadow, layer #2. Click on the "move" tool, the 2 crossed arrows. Don't bother selecting anything, just use the arrow keys to move the black 3 pixels down, and 3 pixels to the right. Use the filter "gaussian blur" at 3 pixels.

The optional last step is to load that un-blrred selection one more time, invert it, and paste more black in on top of the blurred black. De-select and run a gaussian blur of only *.5* pixels, and the rough edges of our type get even smoother. Done. Change the mode from RGB to Indexed Color, and save it as a transparent GIF89a with that grey (115,115,115) selected as transparent, and you can now paste it into a web page, it will seam flawlessly with the "bulkheadbkg.gif" background.