Creating rollover buttons in Photoshop for Adobe Captivate project

Adobe Captivate allows you to create and import custom buttons with 3 states: up, over and down and that’s what we going to create. We are going to create 9 buttons: 3 buttons with 3 states with 2 layers and 3 layer comps in Photoshop. The beauty is that we can continue and create 3300 buttons from 2 layers and 3 layer comps or save PSD file and use it later for future buttons.

First create new document. I want wide buttons for my project because they will serve as links to different parts of project. If you asking why buttons? The answer is because most of people know how to deal with buttons. So I will create new document 600 x 120 pixels with transparent background, you can create any size or choose Web preset and later crop extra area around button.
new_document_photoshop
Draw rectangle or rounded rectangle. Set foreground color, choose shape from Toolbox and just draw it. Or expand Geometry options in options bar and type size for a shape, turn on and Snap to pixels then just click in image area.
geometry_options_shapes
Hold down mouse button and reposition shape or do it in free transform mode: press Ctrl + T then manipulate with X and Y position in options bar. In my case I typed 300px for X and 60px for Y with reference point set to middle to center object (document is 600 x 120). Because we have only one transparent layer it will be converted to shape layer with our shape.
positioning_with_free_transform_photoshop
Lets apply some layer effects to rectangle. Here is tip to open Layer Style or Blending Options dialog. You can right click on layer thumbnail and choose Blending Options or hold down Alt key then double click on layer thumbnail in Layers palette. Use this tip to open Blending Options dialog for any non pixel based layer.
open_layer_style_alt_double_click
In Layer Style dialog I choose for my shape Drop Shadow (Distance 0, Spread 5 and Size 12), Bevel and Emboss with defaults and Gradient Overlay. For Gradient Overlay I created new gradient with white stops at end and beginning and gray 189,189,189 for middle stop. There is nothing special with those numbers. Watch your shape (it updates immediately) and decide by your own.

To create custom gradient click on Gradient rectangle with Gradient Overlay tab active in Layer Style dialog to open Gradient editor. Click on gradient stop then on Color: and type numbers in R,G,B fields or click on color at Select stop color dialog. Confirm on OK button. To add gradient stop click anywhere below gradient rectangle in Gradient Editor dialog.
create_custom_gradient_photoshop
Lets add and some text to our buttons. Select Horizontal Type Tool, choose what ever settings: font, size, anti-aliasing you want and center text. Centering text is important for this tutorial, of course you can change and later.
center_text_photoshop
Now type some text and center it with shape. Select Type layer, then Ctrl + click on shape layer. Select Move Tool and center text with alignment options on options bar.
align_objects_photoshop
Lets make our text more interesting. Alt + double click on Type layer thumbnail icon to open Blending Options dialog (you can open this dialog and from fx icon at bottom of Layers palette). I choose for my type in bevel and Emboss section: Style - Emboss, Technique – Smooth, Direction – Down, Size – 0 and Soften – 1.
Emboss_text_photoshop
I will also lower Fill for Type layer to 40%. Again there is nothing special with any number, you can experiment and decide for your project.
replace_text_photoshop
Its time to create layer comps. Go to Window > Layer Comps to show panel if its not visible. Expand Layer comps panel and click Create New Layer comp icon. Give a name to composition and click OK. Ensure that all options in Apply To Layers are checked (turned on): Visibility, Position, Appearance (Layer Style).
save_layer_comps_photoshop
We have just created first button state (Up state), lets create over state. For over state I will just inverse order of gradient stops. Double click on Gradient Overlay title in Layers palette to open Layer Styles dialog with this tab selected. Click on Gradient to open Gradient editor and reverse order of first and middle stops then change color for third stop to match first stop color.
swap_gradient_stops
Screenshots of my Gradient Editor with changes.
gradient_editor
Click OK twice to exit Gradient Editor and Layer Style. Now create new layer comps and name it for example OverState.
save_layer_comps_photoshop
To create down state first select both layers at Layers palette and with Move Tool selected in 100% view (this is important because Photoshop nudge one pixel per time only in 100% view) nudge down by pressing down arrow key on keyboard once or twice.
nudge_layers_photoshop
I will darken little bit gradient for down state (when user click on button). Again double click on Gradient Overlay effect at Layers palette, open Gradient editor, click on gradient stop then on Color: and darken first and last stop either moving down circle in Select stop color dialog or typing lower numbers in R,G and B fields. Click OK three times to confirm all changes and go back to Photoshop.
change_custom_gradient_photoshop
Create new layer comps and give it a name: DownState for example. Click on layer comps visibility for UpState at Layer Comps palette then go to File > Save As.
choose_layer_comps_photoshop
Navigate to for Windows users My Computer/Local Disk C/Program Files/Adobe/Adobe Captivate/Gallery/Buttons and create new folder: my buttons. Then save button in .png format and give it what ever name followed with _up. For example acb_up.png. Click Save button and in PNG Options dialog choose None. I like to work with PNG format but you are not limited to only this format. To insert button in captivate you can use .PNG, BMP, GIF, JPG and many other formats including and ICO.
save_button_for_adobe_captivate
You will be returned to Photoshop. Click on OverState layer comp visibility and repeat saving process. Button must be saved in same folder with button for up state. This time keep the same name for button followed with _over. For example acb_over.png. Save file and in Photoshop repeat process for DownState. Save it in same folder with same name followed with _down, for example acb_down.png.

Here I will mention Trim command which allows us to trim pixels we don’t need. When button is inserted in Captivate and Show Hand Cursor Over Hit Area is turned on, Captivate will count document dimensions to show hand over that area. Document dimensions includes and transparent pixels so you may want to get rid of some extra space around shape if is present.
show_hand_cursor_captivate
To trim pixels use Image > Trim command but don’t forget to check all three states especially down state if you have nudged shape for this state. Click on down state layer comp to show it on screen then go to Image > Reveal All to ensure that some required space to show everything from this layer comp or state isn’t trimmed out.

We have created button with three states so far, now you can save PSD file as it is and use it at any time. I will create two more buttons with same existing styles (layer comps) but different text.

To change text and keep existing styles for all three states, double click on Type layer thumbnail to select text on it. Because text is centered and aligned with shape all you have to do is to type new text and confirm.
replace_button_text_photoshop
Click on UpState layer comps visibility and save it. Click and on other two layer comps visibility and save and them. Text is updated automatically for all three layer comps. You must save all three buttons with unique names followed with _up, _over and _down. For example acp_up.png, acp_over.png and acp_down.png.
select_layer_comps_photoshop
Lets go in Captivate and see how to insert and use this buttons. Start Captivate and create new project, use existing or capture software simulation. When you want to insert buttons click on insert button then change Button Type to image.
insert_button_captivate
Click on Change (folder) icon and navigate to your buttons folder or where they are. Click on name_up to select it then click on Open. Repeat same operation and for other buttons, first click on insert button to insert new button, then repeat process.
insert_custom_button_captivate
Captivate file with three buttons and three states. Test it.
Unable to display content. Adobe Flash is required.

Reference:
Photoshop / Layer comps

Products used in this tutorial: Adobe Photoshop CS5, Adobe Captivate 5

Comments

  1. This tutorial was easy and clear. Exactly what I was looking for. Thank you!

    ReplyDelete
  2. My clients have always likes to have custom buttons. The only draw back is if the button text needs to be changes. Its still worth it, using custom button makes my products more professional.

    ReplyDelete
  3. Great tut. Very clearly explained so that everyone can understand. Congrats and thank you for taking the time to post this tutorial ;-)

    ReplyDelete

Post a Comment

Popular posts from this blog

Free Puzzle Pieces Actions For Photoshop and Elements

How to Change Artboard Size in Adobe Photoshop

Old Weathered Vertical Wooden Planks Free Image