Tutorials

Here is how to load, ready to use, downloaded Pattern .pat files within Photoshop.

Go to the downloads page and select the available Pattern download and follow along with this simple procedure.

Option One

Close Down Photoshop.
Download the select Pattern file.
Uncompress the file to your Program Files\Adobe\Adobe Photoshop CS2\Presets\Patterns folder (Adobe Photoshop X been your version of Photoshop)
Reload/Start Photoshop
Start a New Document or an existing document.
A. Select/Activate a layer from an existing document or create a new layer within a new document.
In my case, I created a new document with just a vector shape layer.
B. Right-Click/ Control-Click on that Active Layer (from the Layers Palette) and from the context list choose 'Blending Options' as I have captured below.
At the Layer Blending Options Panel:
A. Tick and Select the 'Pattern Overlay'.
B. Then select the 'Pattern Preset Picker' (Encased in Red).
C. Finally, from the Picker preview pane, select its menu command (Encased in Red) to see the new Pattern file item in the list.
Selecting the new pattern item will prompt you with the below 'OK/Cancel/Append' option.
Clicking 'OK' populates the Custom Pattern Preset list with just that newly selected list (bottom left),
while 'Append' adds the newly selected pattern to the current list -In this case the default one. (bottom right)

Then proceed to use a selected pattern preset for the activate layer.

Option Two

Open Photoshop.

Download the available Pattern file.
Uncompress the file to any preferred location on your hard drive.
(Dosn't necessarily need to be in the Photoshop directory as outlined in Option 1/Step 3)
Back to Photoshop and go 'Edit/Preset Manager'.
Select Patterns from 'Preset Type' drop down list.
Click the 'Load' menu command on the right of the Preset Manager dialog.
At the next 'Load' dialog prompt, locate the .pat file on your hard drive.
Click 'Done' command option to commit the changes.

Proceed to use the new Pattern picking up at Step 5 of Option One above.

Vertus Fluid Mask Cut Out Filter

Sun, 05 Oct 2008 00:00:00 GMT

If your familiar with Photoshop's Quick Mask feature, as well as, the native Extract Filter, then you will feel right at home using Fluid Mask.

Fluid Mask combines these two features into a compact intuitive user interface that can create cut-outs from a variety of images.

Follow along with the tutorial to see for yourself the benefits of using Fluid Mask.

Below is the original image I will use in conjunction with Fluid Mask.
Though the background area is a neutral color and is normally a snap to isolate; it's the transition between the fine hairlines and the background that can prove difficult and time consuming to render in Photoshop.

Step 1 - Start Fluid Mask Filter
With the target Layer active (Background), go to the Filter>Vertus>Fluid Mask menu command, as captured below.

Step 2 - Auto Edge Detection
Fluid Mask instantly renders an Edge Detection scan of the image and displays a Workspace (1) with defined pockets of transitions at the default Edge Detection Options Palette settings (6).

In this particular case the default Edge Detection suited just fine.

Other points of interest (User interface related):
2. Toggle Show Edges for on screen/off screen of Edge Detection preview.
3. (Delete/Keep/Complex) Mask Overlay Opacity Slider control.
4. Photoshop like (Masking) Toolbar Panel.
5. Active Tool Options Palette (Equivalent to the Photoshop Options Bar parameters for the active Tool)

Step 3 - Apply DELETE Mask
With the Edge Detection in place, we now need to define areas to KEEP and areas to DELETE.
Obviously, the grey background will be the focus of deletion.

To begin:
1. Activate the Delete Local Brush on the Toolbar (Shift + D)
2. Set Delete Brush Tool Option's: Brush Size, Strength and choice of Actions.
3. Then click in the areas (in my case all the grey) outside the model to flood fill for deletion.

As you can see below, not all areas were flood filled.

Simply continue with the Local Delete Brush onto those other areas (1).

Step 4 - Apply KEEP Mask
Now lets define the remaining of the image as a KEEP Mask.
1. Click the Image menu command option.
2. Then select Auto-Fill Image (Ctrl+F) from the context menu list, as captured below.

So far we applied auto Edge Detection (blue overlay lines), applied a DELETE Mask (red overlay fill) and a KEEP Mask (green overlay fill).

As you can see there are quite a bit of fly away hairline's that are not clearly defined, in either in the Keep or Delete Masked areas.

So now we need to apply an EXACT Complex Brush to the entire edge of the hairline so that Fluid Mask can accurately detect those complex transitions.

1. Active the Exact Complex Brush from the Toolbar.
2. In the Tool Options Palette adjust the Brush Size and set the Complex actions.

Then brush to fill the boundary of the hairline as I have captured below. (purple overlay)

Then click the Cut-Out (Ctrl+U) Toolbar (encircled in red below) command icon to render the output.

Finally, go File > Save and Apply (Ctrl+S) menu command option to return the cutout back to Photoshop.

Though the original image Layer was a (locked) Background Layer, Fluid Mask returns it as a free floating Layer with exact transparency from the above process.

To see the benefit of the cut-out, I added a Gradient Adjustment Layer for contrast.
Quite remarkable! No halo's and the transition of the complex hairlines appear flawless.

To further realize the complex mask, let's capture the cut-out as a permanent Layer Mask into this Photoshop file.
Ctrl+Click the Layer 0 Thumbnail (encircled in red below) to activate the cut-out selection (marquee lines).

Then click the Add New Layer Mask icon command located at the bottom of the Layers Palette (encircled in red below).

Then Ctrl+Click onto the Layer Mask Thumbnail (encircled in red below) to preview it as a live Alpha Channel.

Original image courtesy of AbsolutVision Photo Gallery.

MediaLab - Sitegrinder

Sun, 05 Oct 2008 00:00:00 GMT

Turn your designs into xhtml web standard and css driven layouts in minutes with this innovative Photoshop plugin.

Utilizing smart Layer (Layer Set & Layer Comps) caption 'hints', Sitegrinder bypasses the need to slice your layout. A user friendly Control panel that provides accurate error reports (if any) and accessible options to finalize the output of your site.

SiteGrinder is everything ImageReady was meant to be!

SiteGrinder Core Audience:
Designer, Photographer, Web Developer, Template Creators

Select from the available on-site Sample Sitegrinder Features at the bottom of this page.

For a complete list of Site Grinder Standard and Site Grinder Professional features visit the following MediaLab.com learning resource sections:

Learning Center | Video Tutorials | Example Pages | Forum

Media Lab Webinar's

These classes are being offered exclusively to those people who have downloaded demos of SiteGrinder.

Seminars cover:
an overview of SiteGrinder 2's features, demonstrations of common techniques, Q & A with a SiteGrinder expert » Media Lab Webinar Schedule

On Site Sitegrinder Tutorials

Photoshop Custom Shapes (Loading)

Sun, 05 Oct 2008 00:00:00 GMT

A quick guide load, ready to use, Custom Shape .csh files within Photoshop and ImageReady.

Go to the downloads page and select one of the Custom Shapes and follow along with this simple procedure.

Option One

Close Down Photoshop.
Download any one of the available Custom Shape files.
Uncompress the file to your Program Files\Adobe\Adobe Photoshop X\Presets\Custom Shapes folder (Adobe Photoshop X been your version of Photoshop)
Reload/Start Photoshop
Start a New Document
Select the Custom Shape Tool (U) from the Toolbar.
From the Options Bar Select the Preset Picker (Encircled Red), then from the Preset Picker Panel select its menu command (Encircled Green), and from the list you should see the newly added Custom Shapes. (As captured below)

(Everytime Photoshop is started these newly added shapes will always be available.)
Selecting any of the newly added Custom Shapes, you will be prompted to replace the default list of shapes.
Clicking 'OK' populates the Custom Shape Preset list with just that newly selected list (bottom left),
while 'Append' adds the newly selected shape to the current list -In this case the default one. (bottom right)

Option Two

Open Photoshop.
Download any one of the available Custom Shape files.
Uncompress the file to any preferred location on your hard drive.
(Dosn't necessarily need to be in the Photoshop directory as outlined in Option 1/Step 3)
Back to Photoshop and go 'Edit/Preset Manager'.
Select Custom Shapes from 'Preset Type' drop down list.
Click the 'Load' menu command on the right of the Preset Manager dialog.
At the next 'Load' dialog prompt, locate the .csh file on your hard drive.
Click 'Done' command option to commit the changes.
Proceed to use the new Custom Shape picking up at Step 5 of Option One above.

Pixel Border: Menu Box

Fri, 03 Oct 2008 00:00:00 GMT

1. Start with the Pen Tool from the Toolbar, and work your way across.(Hold Shift Key to constrain to a straight line)

2. Define the shape of your Menu Box as I have done, working your way around to connect to the initial Pen Anchor Point.

3. Once you have made the connection to the initial Anchor Point, right click on the new Path Selection and choose 'Make Selection'.

4. Leave the default settings and click OK.

Try changing the Feather Radius to a higher integer other than the default, and you will notice your corners smooth out.

5. Go to the Layers Palette and Menu Box right click on your layer and choose 'Rasterize'.

6. Ctrl + R to get your Rulers visible on the document. Click and drag from the Rulers bar 2 horizontal and 2 vertical guides as i have done. Go to View and make sure 'Snap' is turn on. Then with the Rectangular Marquee Tool (M) drag a new selection as I have done.

7. Then go 'Select/Modify/Contract' on the top menu bar and choose 2 pixels as I have done. Then hit the 'Delete' key on your keyboard to cut out the Marquee Selection area.

8. Now we'll apply Styles formatting to the layer. Right click on the layer and choose 'Blending Options' and start with the 'Drop Shadow' options that I have set up.

9. Then move down the same Blendings Options palette and choose 'Bevel and Emboss' and match my settings.

10. Then with the 'Color Overlay' options.

11. Then with the 'Stroke' options.

Presto! Pixel Border Menu Box. And a few enhancements could really make it look eye pleasing.

Slicing

Fri, 03 Oct 2008 00:00:00 GMT

1. Here is a few simple things to watch out for when using 'Slices' for your web designs/layouts.

Click here to Preview the Mock Layout.

2. Organization and Naming Conventions

The above is an example of a single page layout.

Iv'e got all my layers organized into Folders for easy management. And i also have them properly named so that I can easily find them.

The naming also helps in the final stage of slicing. Any future changes of any particular layer will have to be considered in the final html page, because Photoshop/ImageReady automatically generates the proper javascript as you specify with your slices.

You can also 'Color Code' each 'Layer' for further organization, by simply right clicking (Mac: Shift Click) on a 'Layer' (or 'Layer Set') and choose a 'Color' from the 'Layer Properties' dialog. (Color coding a set automatically sets the color code to the Layers within that set.)

3. Preflight

The thing to realize about slicing a layout, is determining how you want to display your web layouts' contents. Particularly, when templating your design (header area, content area, footer area) its crucial to determine the exact 'Rows and Columns' in relation to a 'Table'. (This is usually and often decided at the storyboard or planning stage of your site design.)

In simple web talk, a 'Table' (<table></table>) consists of table data (<td></td>), positioned in table rows (<tr></tr>).
The entire Photoshop Document represents a single Table, and a 'Slice' in Photoshop equates to an individual table data element (or Column) within a table row.

As you can see, in the below link, this document (when 'Saved for the Web') will create a single 'Table' (the entire width of the document) with three Rows, and two Columns in each Row.

Click here to Preview the 'Sliced' Mock Layout.

4. Depending on the complexity of your design positioning your Slices wisely could maximize your pages' load time.

First, hit 'Ctrl + R' (key) to make the Horizontal & Vertical Rulers visible. (Alternately - 'View (menu option)/Rulers')

Then, go back to 'View' (menu option) and Select 'Extras' -- This allows you to toggle between any Slices and or (Ruler) Guides on your screen.

Go to 'View' (menu option) again & Select 'Snap'. This will allow for easy click and drag of slices to Snap directly onto your guide. (If you have any laid out?)

With the preliminary preparations out of the way, and you've decided where to lay out your guides, then choose the 'Slice Tool' on the 'Toolbar'.

Click and Drag your first Slice starting at the upper/left portion of your design until you feel it 'Snap' to your (in my case) center guide. Photoshop automatically numbers your 'Slices' in succession.

Sweep across your design until it's completly Sliced. Any areas you do not slice, Photoshop will Auto-Slice it for you.

*** In my case above I,ve Sliced it into a Grid. Two Columns, three Rows. Row One and Row Three are solid colors, so in the final stage I can eliminate these images & replace them with the appropraite html color (in this case -- #5779A0) code.

5. With the Slice tool still active (Pressed on the toolbar), mouse over the 'Slice Number & / Slice Handlers' (as captured below), then right mouse click choose ‘Edit Slice Options...'.

6. The Slice Options dialog box appears. Here's a quick run down on the options.

Name = image file name
Url = link **
Target = same/new window **
Message Text = Status Bar Text Message**
Alt Tag = Image ToolTip Message **

** = Optional

If this slice were a Menu button, then it would be appropriate to have the Name the same as the Menu (example, Guestbook), and the Optional items i would fill in so they will be already complete in the final .html file.)

Fill in your appropriate options and then click OK.

7. Now go to 'File/ Save for the Web...', and you'll see the ‘Save for the Web' dialog box. Choose you optimized Settings on the right side of the panel, then Click ‘Save'.....

You'll be prompted to ‘Save Optimized As' to a location on your computer.

Notice the File name: by default, Photoshop automatically names it to the default name of my .psd file name.

Select the 'Save As Type/Settings/Slices' options as I have captured below.

Info Panels Interface

Fri, 03 Oct 2008 00:00:00 GMT

1. Here's a useful web design element tutorial on how to create and reuse the 'Info Panels' you see throughout my site. (ie, as in the below example)

The great thing about this is, when sliced properly and with the right html code manipulation, I can reuse them as much as I want to whatever size I see fit.

2. The design is quite simple.
Only three elements used, two shapes and a text element.
Realize the main goal here is to minimize on the amount of graphics to optimize your site.
So I started off with a document size of 209 x 139.
Set the foreground color to your choice (for my site I used #D6E1CF)

Then select the Shape Tool (U) from the Toolbar, and choose the 'Rectangle Shape Tool', and (hold Shift Key to constrain to proportion) draw in a rectangle as I have captured.

Next in the 'Layers Palette', right click on that new rectangle shape layer, and choose 'Blending Modes'. Only check the 'Stroke Layer Style'.(Size=1,Position=Outside,Blend Mode=Normal,Opacity=100%,Fill Type=Color, Color=(your choice)I used #000000/Black.)

3. Next set your foreground color to white (Hit the X key on the keyboard).

Again select the Shape Tool (U) from the 'Toolbar', and choose the 'Rectangle Shape Tool (U), and draw in (click and drag) the new shape as I have captured. Make sure this layer is uppermost in the layers palette stack, above the previous shape you made.

Again, as above, go to the 'Layers Palette', right click on that new rectangle shape layer, and choose 'Blending Modes'. Only check the 'Stroke Layer Style'.(Size=1,Position=Outside,Blend Mode=Normal,Opacity=100%,Fill Type=Color, Color=(your choice)I used #000000/Black.)

TIP: To save yourself that round trip of having to set up that layer style, simple go to layers palette and right click on the previous shape that already has it, and from the menu options, choose, 'Copy Layer Style'. Then go to your new shape in the layers palette, right click on it and from the menu options, choose, 'Paste Layer Style'.(Provided you want them to have the exact styles!)

4. Lastly, add a text caption(header) for the info panel.

5. Next, lets begin to slice this Info Panel.
Select the 'Slice Tool (K)' from the 'Toolbar'. Now one thing to note here, also, we're going to have to zoom in on areas to get just the right slice we need. (Zoom = Ctrl + Plus Sign Key / I used 300% Zoom to slice).

I will not walk through each slice, but from the Zoom shot below you can very well see how it's sliced, and how many I've used. A little complex, but necessary, to reuse it as how often I choose on my site.

The two important ares are Slice 5 and Slice 11, as they will contain the information areas.
The surrounding slices are even more important as they control how the Panel will actually look once you start adding content.

NOTE: For the first slice, turn off Snap (view Snap), then after that one, turn Snap back on and every slice you now make should Snap (line up properly).

6. Here's a bigger shot of what it all looks like.

Zoomed in further, now you can really see just how particular this slice is.
TIP: Use the Ctrl + H key to toggle visibility mode of your slices.

7. Next, go to 'File/Save for the Web'.
Here's a bigger shot of what it all looks like.
Verify that your options are the same as mine. I used Transparency mode in my case (optional).
Then hit the 'Save' command option.

8. You'll then be prompted with the 'Save' dialogue box, and choose the options I have captured.
Make sure 'Save As type' is set to 'Html and Image (*.html)'.
(Also pay attention to the location on your hard drive where this will be saved to.)
Then choose the 'Save' command option.

9. Ok, now we have the panel designed in Photoshop, and all the necessary .html code generated , lets optimize this thing for reusability.
Open the new .html file in your browser, verifying its intact.

10. Next, lets open this .html file in your favorite editor (I use homesite), and do a cleanup and some tweaking.
Below is the actual code for this page, that Photoshop generated.

Here's the photoshop generated code.

11. All I did was took out the meta tag, the comment lines and cleaned up the line breaks.

Here's what the cleanup code looks like.

Now it's easy to see just how Photoshop did this.
Basically, each Slice occupies a td tag (table data). And if you remember (or view the zoomed final sliced image above), there were three slices going in the horizontal position.(labeled appropriately 1, 2, 3 ...) Those three slices(td) occupy a tr (table row), and these tr are grouped inside a single table at a fixed width of 209.(which was the width of our original photoshop document).

NOTE: This is actually a simple slice example.

12. From here on it's strictly html manipulation, to apply content to the panel.

First lets remove that center slice (infopanel_11.gif) and replace it with some text (ie. Info Panel Content will go here.)

Here's the modified code at this stage.

TIP: Use the comment code tags as I did for testing until absolute certain that what your doing works properly, then delete those lines later when it's ready.

Here is what it actually looks like now.

13. Next, lets align that new content to the top of the Panel area, by applying a valign=top code inside the td tag that it occupies.

Here's the modified code at this stage.

Here is what it actually looks like now.

14. At this point, you'd think your ready to use this as is, on your site.
Actually, no!

To prove my point lets, suppose the actual content in the panel exceeds the width and length of it's surrounding images? (This could be a new image or text.)
Well have a look at the next 2 links, and you'll see what I mean.

Here's the modified code at this stage.

Here is what it actually looks like now.

Exactly, a mess!
For the modified code, all i did was add new text without a break on the first line and multiple line breaks thereafter.
Just a few html tweaks will fix this.

15. To fix this, it's almost instantly easy to see what to do. Obviously the left and right images need to shift to the top.
So thats the first answer, apply valign=top to the two td tags in which those images occupy.(ie left image= infopanel_10.gif and right image= infopanel_12.gif)

Here's the modified code at this stage.

Here is what it actually looks like now.

Thats a little better, theres still some elements to fill in though.

16. Next I'll fill those same td tags background area with the very images that occupy it.

Here's the modified code at this stage.

Here is what it actually looks like now.

Thats much better. We're almost there.

17. Apply the same td background fill to the bottom.(ie, the td that contains infopanel_14.gif)

Here's the modified code at this stage.

Here is what it actually looks like now.

Almost complete!

18. What remains is the top empty bg area. We'll apply the same background trick where infopanel_02.gif & infopanel_08.gif resides and a background color to infopanel_05.gif td.

Here's the modified code at this stage.

Here is what it actually looks like now.

Just the way we wanted it

19. Now add real content and also try altering the original table width beyond the 209.

Here's the modified code at this stage.

20. That wraps up this tutorial. There are other thing to reconsider, like replacing image infopanel_05.gif (Info Panel header) with real text when considering reusing the panel elsewhere.

Menu Image Rollovers

Fri, 03 Oct 2008 00:00:00 GMT

1. Here's how to do image rollovers as quite common with menu items created in Photoshop and then completed in ImageReady for final output.
I'll begin with four simple Rectangular shapes as the buttons background layer, and four Text items as the buttons caption.

2. Start by choosing a foreground color for the face color of your 'Up' button state.( I used #47759D)
Next, with the Rectangular Shape tool draw four same size separate items as I have captured below and four separate Text (#ffffff) captions for each button.

Note: The layer stack order in which they appear is important.
Tip:For same size proportional buttons, lock guides to the left and right of the first button, then switch to the 'Move Tool (V)', Ctrl click on that button layer to select it and hold the 'Shift + Alt' keys to duplicate one by one as you glide them along the previously made guides.

Here's the Layer Stack Order.

3. Next, slice the individual buttons for ImageReady import.
Now there's a few options and things to consider here before we begin.
'Slice from Guide' or 'Layer Based'! What about the surrounding empty data (white space)?
Decisions you have to make before you bring them into final production.
I'll just deal with the Slice methods for now and move onto the rollovers.

Slice from Guide: Position guides around all the 'Shape1,2,3,4' elements. (As I have captured below)

Once that is complete, select the 'Slice Tool (K) from the ToolBar and up on the 'Options Bar' choose 'Slices From Guides'.

That will produce a slice order as below.

Main Benefit of this method: As you can see this option takes care of the surrounding empty data. And this feature is not in ImageReady so this decision is obviously made here first.

Layer Based Slice: Select 'Shape1' layer, and go to 'Layer/New Layer Based Slice'. Repeat process for the other three shape layers until you have the below.

4. Since this is just a RollOver tutorial I've stuck with the 'Layer Based Slice' method.

Another thing to note and you've probably noticed by now, are the Blue Envelope symbols and the corresponding numbers. Well the numbers correspond to the Slice stack order from the top of your document, downward. If you double or right-click on the envelope you can modify other features of this slice that influence your final output.

This feature is available in ImageReady (Window/Slice) so it can be ignored till then or altogether for edit in your favorite html editor.

5. Now, lets switch to ImageReady by pressing 'Shift+Ctrl+M' or by pressing the 'Jump To' button located at the bottom of the 'Toolbar', as I have captured

Click Here to see a screen shot of ImageReady layout. (Note: I've closed unneeded panels)
If your RollOvers panel is not visible go to 'Window/Rollovers'.

6. Next, lets add the rollover affects. Start with the first slice thats numbered '03, right + click and choose 'Add Rollover State' from the context menu options. (As I have captured below)

And here's what the rollover state looks like.

7. Next, with that overstate selected, select the background layer in the Layers Palette that corresponds to that slice, in this case 'Shape1'.
Then right click and choose 'Layer Style' and any of the options from the list. (I selected 'Color Overlay').

Alternately, select the 'Add Layer Style' (f symbol) option at the bottom of the 'Layers Palette' and choose from the list.

8. After selecting the 'Color Overlay' option, it's panel opens to a default of Red, but I'll change mine to a green. (As captured below)

9. Next, I'll add a 'Drop Shadow ' affect to the caption 'Text' of that button using the same routine. (Still on the Over State of 'rollovers_03') Select that text layer that corresponds to the first background layer we just altered. In this case layer labeled '1'. As before right-click and choose 'Layer Styles' and from the list choose 'Drop Shadow'. (Below is the capture for the 'Drop Shadow' panel. The default 'Distance' and 'Size' is 5, so I changed them to 2.

10. Here's a preview of where we are thus far.

On Mouse Over event is recorded for the first button as outlined from above procedures.

11. Now lets continue with the rest of the buttons.

Instead of having to labour through all those steps individually, here's a work around.
Add the remaining rollover states (Right click, Add Roll Over State) to the remaining three slices from within the 'Roll Over Panel'. So that your panel looks like what I have captured below)

12. Now have the over state of the first one we did selected, (rollovers_03) and also select the background that layer that corresponds to this rollover (shape1), as I have captured below...

13. Then right click on the background layer that already has the over state style, and from the context menu list choose, 'Copy Layer Style'.(As I have captured below)

14. Then for each remaining over states that corresponds to that particular slice, right click on that layer choose 'Paste Layer Style'.
Repeat the process for the 'Drop Shadow' style from the first step for the others.

15. When your ready for export, go to 'File/ Save Optimized As' (Ctrl+Shift+Alt+s) as I have captured below.

16. Then from the save as options dialogue box set your final output results. (As I have captured)

Click here for the Final Result.

Smooth Vector ImageReady Flash Animations (Part One)

Fri, 03 Oct 2008 00:00:00 GMT

Here is a great way to create compact animations exported as Flash files via ImageReady CS.

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.

Follow along with this simple example.

Below are the basic vector components of this animation.

A. Layer Set called PanelButton that contains the vector elements.
B. Vector background layer created with the 'Rounded Rectangle Tool (U).

Download the zipped base psd file to continue with the rest of the animation.

Open the above flash.psd file in Photoshop, Jump to ImageReady and arrange your Workspace I have captured in the below linked screen shot.
Workspace.

First step is to select the 'PanelButton' Layer Set and drag it below (out of view), as I have captured below.

In the Animation Palette hit the 'Duplicate Current Frame' icon as I have captured to create a new frame.

Now reverse the position of the PanelButton layer set as I have captured below. Simply drag it back into position.

This what the Animation Palette should look like.

Next select the Tween icon on the Animation Palette as I have captured below.

Set the Tween options as I have captured below.
A. Make sure the 'Previous Frame' Tween With feature is selected.
B. Number of frames depends on how smooth you want the transition to be. Explore various integers, but for the purpose of smaller file sizes I chose 3.
C. Select the 'Position' Parameter.
D. Then hit OK to commit the Tween changes.

Your Animation Palette should now reflect the Tween transition as I have captured below, adding three new frames (2,3,4) 'in beTWEEN' the two original frames (now 1 & 5).

A. Select the First four frames and change the tween playback control from nodelay to 0.1 sec.
B. Select the last frame and change the tween playback control from nodelay to 2 sec.
C. Finally, adjust the Loop playback control from 'Once' to 'Forever'. (I only did this step for the sake of viewing it, though in a real web page example you probably want to control this with a click event.)

Select Frame 1, go 'File/Save Optimized As' flash.gif to save it as an animated gif.

Remarkably, this animation only clocks in at 4kb. Not bad for an animated gif this size.

Select Frame 1 again, go 'File/Export/Macromedia Flash Swf...' and set the following options.

The below Flash output is only 2 kb, half the original.
Not bad for a frame based animation and certainly room for many possibilites.

Smooth Vector ImageReady Flash Animations (Part Two)
Adds additional vector components and tween actions.

Summary:
1. Prepare Vector based elements before you begin the animation process.
2. Avoid Layer Masks, Layer Styles and Bitmaps where possible to minimize file size.
3. Tween - Only use the Paramters where necessary. IE - I only needed to use 'Position'.
4. Export as Swf - disable the Preserve Appearance feature when just using Vector shapes.

Rounded/Cornered Shapes Simplified

Fri, 03 Oct 2008 00:00:00 GMT

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.

A. Activate the Rounded Rectangle Tool (U)
B. Go to the Options Bar and activate the Shape Layers option
C. Then to the mid-right of the Options Bar set the Radius integer. This controls the radius of the corners. Explore will other integers for the effect that best suits your design.

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.

A. Activate the Ellipse Tool (U)
B. Drag & Draw an Ellipse.
C. Ctrl+R to enable Rulers & Drag Horizontal/Vertical Guides to the Bounding edges. More importantly to the center of the object.
D. Switch to the Rectangle Tool (U).
E. Activate the 'Add' modifier for the active shape.
F. Snap to the center Guide and drag to draw outward snapping to the top & bottom guides as you draw.
G. Deselect the shape
H. Ctrl+H to hide the Guides to preview the new shape.

To build on the above shape.
A. Mouse over the mid Guide.
B. Hold the Ctrl + Alt keys, then Click once. Vetical Guide becomes Horizontal Guide.
C. With Rectangle Tool (U) still active, drag & draw downward to snap to the left/right Vertical Guides.
D. Switch to the Rectangle Tool (U).
E. Deselect the shape
F. Ctrl+H to hide the Guides to preview the new shape.

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 + ' 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.

Smooth Vector ImageReady Flash Animations (Part Two)

Fri, 03 Oct 2008 00:00:00 GMT

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.

Download the zipped base psd file to continue with the rest of the animation.

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)

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.

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.

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.

Smooth Vector ImageReady Flash Animations (Part Three)
Completes the animation by adding hotlinks through Image Maps.

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.

Smooth Vector ImageReady Flash Animations (Part Three)

Fri, 03 Oct 2008 00:00:00 GMT

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:
1. Select the 'Rectangle Image Map Tool (P)' from the Toolbar and draw individual Image Map's for the following three hotspots.
2. 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

URL= http://store.adobe.com/store/products/master.jhtml?id=catCreativeSuiteSTD

URL= http://store.adobe.com/store/products/master.jhtml?id=catCreativeSuite

Select Frame 1 again, go 'File/Export/Macromedia Flash Swf...' and set the following options.

Here is the final output.
Click the three newly created hotspots to go to the appropraite links.

(Refresh the page to preview again or CLICK HERE to preview in its own window.)

Part One | Part Two

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. Place Iamge Map Hotspots for linking (internal or external).
5. Export as Swf - disable the Preserve Appearance feature when just using Vector shapes.

Photoshop Background Patterns

Fri, 03 Oct 2008 00:00:00 GMT

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 + 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.

View the final output of this tutorial here.

Here is a smaller version of the tiled background.

Plenty of room for possibilities here.
Click the below thumbnails for variations.

Ticker Flash Animation

Fri, 03 Oct 2008 00:00:00 GMT

Here is a simple way to create small flash ticker animation.

Download the base (zipped) .psd file to get started with this tutorial.

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)

Studio Backdrops

Fri, 03 Oct 2008 00:00:00 GMT

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.

Final version with a few embellishments.

Text Outlines

Fri, 03 Oct 2008 00:00:00 GMT

1. Here's a simple trick to create Outlined/Border Text.

First, select the 'Type Tool (T)' on the Tool Bar, and click and type the necessary text onto the canvas.

2. Next in the Layers Palette, right click on the new Text Type Layer, and from the menu list, choose 'Blending Options'.

3. From the Blending Options Layer Style Panel, all I selected was the 'Stroke' option.
Select from the options I have captured to the right.(Color= #000000 [Black])

Then choose OK.

4. Back to the 'Layers Palette', set the 'Fill' Opacity level to 0% as I have captured. (Drag the slider to the far left, as I have boxed in red.)

Note:

The Opacity Option sets the Master opacity for the layer. Simply meaning, it applies opacity to the layer and all underlying Blending Modes & Styles.

The Fill Option sets the Interior opacity for the layer. Simply meaning, it applies opacity to the master layer only, ignoring underlying Blending Modes & Styles.

5. So by using the Fill option and a simple 'Stroke' Style, its easy to create Outlined text.