Adobe Flex Button with Photoshop (web 2.0 button skin)

[ad]

Here you can see the live result and also download the project source code by right clicking inside the application.

Step 1:
Create Up, Over, Down, Disabled states for the button with Photoshop

1.1 Open Photoshop and choose the desired button size. I will choose 90x28px with transparent background.

1.2 Using the “rounded rectagle tool” create the button to look like in the image

1.3 Duplicate the existing layer, set the “Fill” property to 0 and then apply a gradient effect like in the image below.

1.4 now let’s make the button cloured . Apply to the first layer (original) an horizontal gradient overlay like in the image.

1.5 To make the button look even better we add a border and some inner glow to the originl layer like in the images below

1.6 Duplicate the first layer (original) and edit the colors so you can get all 4 states of our button.

1.7 after getting ready all states for the buttons export them 1 by 1 as .png and name them button_up.png button_over.png button_down.png and button_dis.png

Step 2:
Add images to project and create CSS for the button

2.1 Create an Adobe Flex project and name it PhotoshopButton.

[ad]

2.2 Create a folder inside the /src folder and name it /images

2.3 Copy the 4 png images to /src/images/

2.4 Create a folder inside the /src folder and name it /css, inside this folder Add a new css file and name it main.css

2.5 Inside the main.css file add the following button style:


/* CSS file */
Button
{
     up-skin: Embed(source="/images/button_up.png");
     over-skin: Embed(source="/images/button_over.png");
     down-skin: Embed(source="/images/button_down.png");
     disabled-skin: Embed(source="/images/button_dis.png");
     selected-down-skin: Embed(source="/images/button_down.png");
     selected-up-skin: Embed(source="/images/button_down.png");
    
     color: #ffffff;
     roll-over-color: #000000;
     disabled-color: #efefef;
}



2.6 Your project should look until now like this

[ad]

2.7 Open the PhotoshopButton.mxml file and add the reference to your css file



<mx:Style source="css/main.css"/>

//Then add some buttons and let's see how does it look

<mx:HBox width= "100%" horizontalAlign="center">
    <mx:Button label= "Click Me!"/>
    <mx:Button label= "Disabled" enabled= "false"/>
</mx:HBox>




And again the result…

That’s all, enjoy!