How to Create Player with PhotoShop - Part 1

[nina7683]

When embedding video to your site, do you want to create a custom player with the images you prefer? Do you think you shall run Flash with ActionScript? With this guide, you can imagine what your player should be like and create one with ease.

Here is the guide for you to create a player like above using Adobe Photoshop or picnik and Moyea PlayerBox.

Part I. Create image with Adobe Photoshop

1. Create new clipboard.
Choose File > New to create new clipboard, and set the image size to 80 x 30 pixels. I would like to set the foreground color to gray. Thus, click the upper color selection box in the toolbox and choose the preferred color.

2. Added text to image.
Choose the Text icon, i.e. the 8th icon on the right of the toolbox, and draw the position of the text. By default, Horizontal Type Tool is selected.

3. Enter characters.
Enter the word "Play", choose it and select the font style, size in the option bar under the menu bar. Here I choose Matura MT Script Capitals as font family, and 18 pt as font size.



4. Draw symbol.
Right click on the 9th icon on the right of the toolbox, and choose Polygon Tool. Enter 3 for Sides in the option bar and draw on the clipboard, as a triangle will be needed here.



5. Add effects.
You may notice three layers in the Layers palette. If the Layers palette does not show, just choose Window > Layers. Choose the background layer and check if the f icon for layer style is active. If yes, choose Blending Options and face the Layer Style window.



Choose Sunset Sky (the first one in the third line) as Style, and tick the checkbox for Bevel and Emboss, Gradient Overlay.

Well, the normal status of the play button is done. Save as .jpg file and remember to choose Baseline as under Format Options.

To create the hot status of the play button, just change the Sunset Sky to Chiseled Sky (the six one in the second line) and save as another file in jpg format.

To create the pause skin, change the characters to "Pause" according to step 3. In step 4, right click on the 9th icon on the right of the toolbox, and choose Rectangle Tool. Two parallel rectangles shall be added to show the pause symbol.

Use the same effects for normal and hot status of the pause skin like the play skin. 4 images shall be created to show different status.

[gengye]

Hi, nina7683

Thanks for the nice tutorials.

All the best,