With multimedia becoming such a vital part of online communication these days, everyone is now using media players. Whether you are listening to MP3 files or watching digital videos, you are interacting with a system of controls to playback the media. When a media player interface is well designed, we rarely notice it at all—it is just the software being used.

Working as a designer is a wonderful opportunity to express yourself. Media players are often the main focus of a website. If you add creative flourishes to make your media player unique, you'll increase the aesthetic of the site and encourage more visitors to use it.

In this article, I'll take you through the step-by-step process I used to create a custom skin for a media player I recently designed. This particular interface is inspired by the first "Batman" movie, specifically based on the performance of Jack Nicholson in the role of The Joker.

This design features swooping wings and curved shapes that resemble the character's sinister smile. When I create flowing lines, I use the Pen tool. The drawing tools and Combine Paths feature provide a great deal of freedom when working with vector objects. And I use the Subselection tool all the time because it offers precise manipulation of Bezier curves. I also incorporate a wide range of layer effects, including Live Filters that are essential when designing user interfaces. For these reasons, Adobe Fireworks is my tool of choice because it combines all of these capabilities in one easy to use, efficient environment workflow.

Requirements

In order to make the most of this article, you need the following software and files:

Fireworks CS3

• Try
• Buy

Sample files:

• media_player_skin.zip (ZIP, 196K)

Prerequisite knowledge

This article assumes that you have experience working with Fireworks CS3 at a basic level.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 7

Next Page

About the author