Simulate professional studio backdrops for your products with ease by following these few steps.
To begin, lets use an product image sample (captured below) of a leather chair courtesy of AbsolutVision Photo Gallery.
Click image to download starter file.
AbsolutVision photos come complete with path outlines, so the process to separate the chair from the white background is a breeze.
Double click the background layer (A) to convert it to a free floating layer (B) to the default title of Layer 0.
Then create a new Color Fill Layer to your desired color (I used #534b4c – Later decide to change this color) and place it at the bottom of the stacking order in the Layers Palette (C), as captured below.
Switch to the Paths Palette (A), activate the path outline (B), then click the Load Path As Selection icon command at the bottom of the Paths Palette (C).
You should now see a marquee selection around the chair, as captured below.
Switch to the Layers Palette (A), activate the product shot, Layer 0 (B), then click the Add Layer Mask icon command at the bottom of the Layers Palette (encircled in red) (C).
This process will knock out everything but the chair subject, as captured below, allowing the Color Fill created earlier to come through. Explore other Color Fill colors depending on your subject matter.
Next, to account for more backdrop space, use the Crop Tool to enlarge your document canvas area and/or scale down the subject to the center of the canvas, as captured below. (I did both Crop and Scale)
Create a new empty Layer (Layer 1) between the subject and the Color Fill Layer as captured below.
I also changed the Color Fill to black as captured below.
With Layer 1 active, activate the Elliptical Marquee Tool from the Toolbar, set the Options Bar Feathering to 10 px, then click and drag to draw a selection as I have captured.
With the selection still active, go ‘Edit/Fill’ and in the USE select Color from the drop down list and choose red, as I have captured.
Still with the selection active, hit the Ctrl + T keys to enable Free Transform, then hold the Ctrl key and click and drag any of the corner handlers to reposition,as I have captured below.
With Layer 1 active (A) active, go ‘Filter/Blur Gaussian Blur’ and explore the settings (B) as I have captured, then click OK to commit the Blur changes.
Duplicate Layer 0 to get Layer 0 copy.
Activate Layer 0, right click and from context list choose Apply Layer Mask. (A)
Ctrl click the Layer 0 thumbnail icon in the Layers Palette to get its selection.
Then Edit/Fill and USE: Color of Black.
Ctrl + T to Free Transform and reposition the shadow to something similar to mine.
Next apply a Filter/Gaussian Blur to the Layer 0 shadow layer as I have captured below.
Finally, lets eliminate the halo around the chair, as captured below.
Click the Layer 0 copy LAYER MASK THUMBNAIL icon in the Layers Palette (encircled in red)
Then go Filter/Other/Minimum and set the radius to 1.
Once downloaded and unzipped, open the ticker.psd file in Photoshop and observe the contents as I have captured in the layers palette screen shot below.
Note the following from the above capture: 1. All layers are Vector layer objects (Text + Vector Shape Layers) 2. The top 3 layers in the stack are ‘Clipped’ with the fourth layer. 3. Layer 2 and 3 from the top are hidden while the others are visible. This represents the initial animation state and will be altered later. 4. Layer 4 & 5 are locked. I tend to do this for ImageReady’s sake since I always have Smart Guides on. (Optional)
After observation Jump to ImageReady and begin the rest of the animation below.
1. Go Window/Animation to bring the Animation Palette to the foreground. 2. Select the Move Tool (V) from the Toolbar 3. Hit Duplicate Current frame (1) from the Animation Palette 4. Activate/Select vector mask thumbnail (in the Layers Palette) of the first layer ‘panel’. 5. With Animation Frame 2 active, drag the Vector Mask into view as I have captured below.
This is the animation palette view thus far.
Next: 1. Duplicate Frame 2, to get get frame 3 2. Enable the ‘Photoshop CS2’ type Layer in the Layers Palette 3. Activate the first ‘panel’ layer and reverse it’s position from the previous procedure. Drag it out of view to the top.
Next: 1. Duplicate Frame 3, to get get frame 4 2. Disable the ‘Photoshop CS2’, and enable the ‘Creative Suite 2’ type Layers in the Layers Palette 3. Activate the first ‘panel’ layer and reverse it’s position from the previous procedure. Drag it into view again.
Next: 1. Duplicate Frame 4, to get get frame 5 2. Activate the first ‘panel’ layer and reverse it’s position from the previous procedure. Drag it out of view.
This represents the Core key frames for the animation.
Tweening: 1. Select Frame 2 2. Click the Tween icon on the bottom of the Animation Palette. 3. Set the desired settings as I have captured. Use ‘Previous’ and ‘Position’ Parameters’.
Tweening: 1. Select Frame 6 2. Click the Tween icon on the bottom of the Animation Palette. 3. Set the desired settings as I have captured. Use ‘Previous’ and ‘Position’ Parameters’.
Tweening: 1. Select Frame 10 2. Click the Tween icon on the bottom of the Animation Palette. 3. Set the desired settings as I have captured. Use ‘Previous’ and ‘Position’ Parameters’.
Tweening: 1. Select Frame 14 2. Click the Tween icon on the bottom of the Animation Palette. 3. Set the desired settings as I have captured. Use ‘Previous’ and ‘Position’ Parameters’.
Finally: 1. Select Frame 9 2. Set the Timer Playback control to 2 sec 3. Set the Loop Playback control to ‘Once’.
Optimize: 1. Select Frame 1 2. Select Animation Palette Menu ‘Optimize Animation’ option. 3. Select Optimize Animation options from the next prompt, then OK.
Finally, go ‘File/Export/Macromedia Flash Swf’ and set the next parameters, then OK.
Note: I have mine set to Loop ‘Forever’ for easy viewing. (Final flash animation is only 3kb)
Here is a simple way to create small tillable background images for your web pages using Photoshop and ImageReady. This tutorial assumes you are using Adobe Creative Suite and the fonts bundled with it.
For those not using the Creative Suite, substitute D below with an ornate dingbat font from your collection and ignore ‘Ornaments’ step that immediately follows.
A. Create a new document. Your preference choice. (The final output will be small, anyway’s) B. Set your foreground Color, your preference (I used #F4F8F1), & create a Solid Fill layer based on this color. C. Select the Type Tool from the Tool Bar. Go ‘Window/Character to bring the Character Palette to the foreground. D. Within the Character Palette browse to the ‘Adobe Caslon Pro’ Font and set your desired settings. (I used font color of #5A9221.) E. With the Type Tool active create a new type layer and use the letter ‘v’. (As captured below)
Next, from the Character Palette menu options select the Open Type ligature feature called ‘Ornaments’. And the standard ‘v’ is converted into the symbol I have captured below.
Next, lower the Opacity of this Type Layer to a reasonable integer. I used 25%. (Ultimately, you don’t want your background to be glaring to your viewers.)
Next, Ctrl/Command + Click on the Type Layer to select its pixel content, then go ‘Image/Crop’ to eliminate the surrounding unwanted areas as I have captured below.
Thats it for the Photoshop portion, next hit the ‘Edit in ImageReady’ button located on the Toolbar.
Once in ImageReady, select the Output menu option (encircled in Red) and from the list choose the ‘Other’ feature, as I have captured below.
Once in the Output dialog, hit the ‘Next’ command until you reach the Background settings. Tick the View Document as ‘Background’, then OK to commit the Output settings.
Finally, go ‘File/Save Optimized As’ as captured below.
Set the following options as captured. Unique filename. Save Type both .html & Images. Choose the ‘Custom’ settings created earlier.
Picking up from the previous lesson (II), I’ll show you how to tie in this nifty flash animation with multiple links without having to resort to slices.
The key to adding multiple links without slices to a flash animation is to use Image Maps.
Note: Output to flash does not allow Rollover effects, so it would be worth your while to indicate to your user what exactly is a hot spot link. (Ie. Click here, etc)
Picking up where lesson two left off:
Select the ‘Rectangle Image Map Tool (P)’ from the Toolbar and draw individual Image Map’s for the following three hotspots.Go ‘Window > Image Map’ to open the Image Map Palette, select the ‘Image Map Select Tool (J)’ from the Toolbar, click each of the newly created image map’s from step 1 and set the desired parameters as I have captured. (Note: URL = internal or external, realtive or absolute)URL= http://www.adobe.com
1. Prepare Vector based elements before you begin the animation process.
2. Avoid Layer Masks, Layer Styles and Bitmap’s where possible to minimize file size.
3. Tween – Only use the Parameter’s where necessary. IE – I only needed to use ‘Position’.
4. Place Iamge Map Hotspots for linking (internal or external).
5. Export as Swf – disable the Preserve Appearance feature when just using Vector shapes.
Picking up from the previous lesson, I added more vector components and more transition tween’s to beef up this animation.
As noted in the previous lesson, the premise of creating these animations as compact as possible relies solely on Vector shapes within Photoshop or ImageReady.
These include Text Layers and Shape Layers (with Vector Mask).
Ultimately, the trick here is to avoid using Layer Masks, Layer Styles or Bitmap images to make the file size as small as possible.
Another thing to note, ImageReady animations is LAYER Based. Though for .gif animation output, toggling LAYER SETS during tweening work perfectly fine. However, LAYER SETS do not translate into smooth transitions for Flash output and therefore you have to toggle all (individual) layers.
Follow along with this simple example.
Below are the additional vector components of this animation.
Screen capture 1 shows the custom vector ‘PSCS2Icon’ Layer Set elements and screen 2 shows a custom vector ‘PSCS2Suite’ Layer Set elements.
Open the above flash2.psd file in Photoshop, Jump to ImageReady and begin the rest of the animation below.
Note all the Vector Layers, and plenty of them.
To begin, lets add two new frames to the animation window.
Frame 6 1. Activate the Last Frame. (Frame 5) 2. Hit the Duplicate Current Frame Icon 3. To produce the new frame. (Frame 6)
For Frame 6 1. Expand ‘PSCS2Icon’ Layer Set. (Frame 6) 2. Toggle visibility to ON for all the sub set layers for ‘PSCS2Icon’ Layer Set. 3. You should now see its contents visible in the Frame 6 of the animation window.
Frame 7 1. Activate the Last Frame 6, hit the Duplicate Current Frame Icon to create Frame 7. Turn off all sub set layers under ‘PSCS2Icon’ Layer Set. 2. Expand ‘PSCSsUITE’ Layer Set and turn ON all sub set layers to see its contents in Frame 7 of the Animation Palette.
This is what the Animation Palette should look like.
Tweening 1. Activate Frame 6 2. Hit the Tween Icon on the bottom of the Animation Palette. 3. Adjust the settings as captured below. (Previous Frame/3/Opacity)
Then: 1. Activate the Last Frame (10) 2. Hit the Tween Icon on the bottom of the Animation Palette. 3. Use the same settings as captured above. (Previous Frame/3/Opacity)
Select Frame 9 and alter the Playback control from 0.1 sec to 2sec as I have captured below.
Save As Gif Select Frame 1, go ‘File/Save Optimized As’ flash2.gif to save it as an animated gif.
Remarkably, this animation now clocks in at 92 kb. (Note: My .gif has an additional tween from the last to first frame and is set to Forever) Still not too bad for all the additional layers added.
Export As Flash Select Frame 1 again, go ‘File/Export/Macromedia Flash Swf…’ and set the following options.
The below Flash output is now 16 kb, far less than half the original.
Summary: 1. Prepare Vector based elements before you begin the animation process. 2. Avoid Layer Masks, Layer Styles and Bitmap’s where possible to minimize file size. 3. Tween – Only use the Parameter’s where necessary. IE – I only needed to use ‘Position’. 4. Export as Swf – disable the Preserve Appearance feature when just using Vector shapes.
Here are a few ways to create rounded/cornered graphic panels in Photoshop.
Rounded Rectangle Tool (U) The easiest method is found in the ‘Rounded Rectangle Tool (U)’ on the Toolbar. Set your desired Foreground Color.
Activate the Rounded Rectangle Tool (U)
Go to the Options Bar and activate the Shape Layers option
Then to the mid-right of the Options Bar set the Radius integer. This controls the radius of the corners. Explore with other integers for the effect that best suits your design.
Option Two: Multiplier Keys Another method is to use the multiplier Options located on the Options Bar for an active Vector Shape.
Set your desired Foreground Color.
Activate the Ellipse Tool (U
Drag & Draw an Ellipse.
Ctrl/Command+R to enable Rulers & Drag Horizontal/Vertical Guides to the Bounding edges. More importantly to the center of the object.
Switch to the Rectangle Tool (U).
Activate the ‘Add’ modifier for the active shape.
Snap to the center Guide and drag to draw outward snapping to the top & bottom guides as you draw.
Deselect the shape Ctrl/Command + H to hide the Guides to preview the new shape.
Option Three: To build on the above shape.
Mouse over the mid Guide.
Hold the Ctrl/Command + Alt/Option keys, then Click once. Vetical Guide becomes Horizontal Guide.
With Rectangle Tool (U) still active, drag & draw downward to snap to the left/right Vertical Guides.
Switch to the Rectangle Tool (U).
Deselect the shape
Ctrl/Command+H to hide the Guides to preview the new shape.
Option Four: Pen Tool (P)/Paths Another method is to use the Pen Tool (P) with Options Bar Shape Layers enabled. Set your desired Foreground Color. Ctrl/Command + ‘ to enable the Grid. Enable ‘View/Snap’.
As below a simple Click (to Add Anchor Point) followed by Click & Drag (to Add & Convert Anchor Point) snapping to a desired grid line creates smooth curved shapes.