Online Timesheet Software – TiMeister – Weblog

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 90×28px 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.

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

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!