Jun 13

Written by:
Sun, 13 Jun 2010 16:55:45 GMT 

Here is my first draft of producing the Video Player controls that will feature in Michael’s new article. This design is obviously open to reworks, as I’m not sure about the volume control at present. Looks like a Ventilation grill!!! It is possibly all a bit over the top, but this is excise, so some room to go a bit nuts!!!
The colour scheme is all tied to a single colour resource for easy editing, although this does presently restrict me from setting different colours for the framework & infill elements. However, when designing CONTRAST is King! if it works in one colour, it will look even better in multiple colours. But enough chat, here are some (mono-colour) 1st Draft screenshots:

 

 

This control grid is built using a simple frame structure, as shown in the image below.

I made this grid in Expression Design, by laying out a selection of Ellipses & Rectangles, grouping & aligning them as needed. The used a variety of “Path Operations” to join & trim the elements as needed. Once you have this grid you can instantly make the inner control elements, just like using a “Pastry Cutter” or “Cookie Cutter” on an ellipse, the result is shown below.

I don’t show it here, but to give the buttons a chamfer (inner & edge detail) i shrunk the individual elements shown above, & scale them to about 90% of the original. Then using them as overlays on the main/full button area.

To give the frame an extra element of design & control, I created a set of Path lines (Stroke/edge lines) to match the grid, this allows for a variable width highlight line alone the centre lines of the frame. (A little tweaking is needed to the scale, when the Stroke thickness is changed. As do the applied blur effects…

 

The Icons were also created in Expression Design.

Whole article coming soon!!!

I still trying out different styles for the ProgressBar, Volume & Details areas of the panels, as shown below. (A bit of a mismatch so far!!!)

 

I’ll get it sorted for the final version, as well as a multiple coloured version! :-)