Request: Skin

19Jun08 - although this FR has been active within the past month, now moved to the Wiki Feature Requests page, because it relates very closely to an “Audacity Facelift” thread started by Fractalorangejuice which has also just been moved to Wiki. These two posts have now been merged for easy linking from the Wiki so that its readers can see the proposed themes and logo. - Gale

I think Audacity is a very usefully software but the look is very sad, and unlike.

Why don’t create a system for put a skin, or create a diferent skin nice…

i can help to create a skin, but i don’t know how to put in the program!

marcosba,

In Audacity 1.3.x there is a new "experimental feature called themability - accessed via Preferences/Theme.

So far most of us have not been brave enough to mess with this stuff …

Do give it a try and report back so we can learn from you.

WC

removed image due to later revision

I was playing with ideas based on the Audacity logo and I thought I’d give editing the colors and a few of the icons a shot. This is my first attempt and to be honest I went a little silly with it as the float over graphics are meant to look kind of like an old light bulb. I’ll make something a bit more practical soon. (see later in the thread)

I have to say that the way the graphics map for this is arranged is a little strange and limiting. It would work much much better if it was set up as(base graphic,rollover,button press) for each icon. As it stands having each base icon being 16 x 16 and the float over behind at 48 x 48 and shared between play,record,rewind and so on makes it impossible to make the float over do different things for each icon. Say I wanted to make the 16 x 16 colored part of the record icon to become inset with a mouse click. I think a single 48 x 48 image with a mouse-over and mouse-down image would be both simpler and more versatile. However if it’s done by sprite collision I can understand why they did it the way they did.

As a future improvement it would be very helpful in the graphic map(Audacity image cache) file if the colors were all in a row vertically and labeled so it wasn’t so difficult to determine what color affects what UI element color.

I love audacity by the way I use it on both Linux and windows… Linux only soon :slight_smile:

Also here’s a larger pic of my idea for the logo… just a thought…
audacitylogo.jpg

Something that would also be very useful for skinners is to separate the icons in the image cache by a single pixel so that filling and easily finding icon boundaries would be much easier. I realize that’s a lot of work to redefine the perimeters of each icon in the program so I’m not saying it “must” be done just that it would make skinning quicker. I think PNG is a fantastic choice for a graphics format with transparency and full color range.

I would be glad to offer my graphical “talents” such that they are to the audacity team just to see the project look sexier in the eyes of people who value more than the function of the program alone. I do think the interface that you look at for hours while editing makes a world of difference. The best interface I’ve ever seen is Ableton Live with a grey slate skin. example here–> http://www.tranceamericana.org/ableton.jpg Although that particular screenshot is kind of busy.

+10 points for the logo, I like it a lot.

I tried the “shiny buttons” theme. I’m not sure how much you’re limited to changing at the moment, so my criticism might not be worth much. There’s a little blurb in the Themes menu in Audacity saying most of the icons won’t be changed when using themes. I guess they hadn’t implemented everything yet when they released 1.3.3.

Anyway, here goes:
I don’t like the lack of contrast between the Track Data Text and the Track Data Background.
I also don’t like that the background of the audio tracks is dark. My Selection Tool cursor is black and it makes it impossible to see.
You changed the background color of the About Audacity window to a terrifying green. I cried. :wink:
And finally I don’t like the gold Slider control. I’m guessing you were trying to change the sliders too, but as it stands the new slider button and the old sliders clash horribly.

On the plus side, the main control buttons look great. I like them better than the original. And the logo looks fantastic.

I’d call this an excellent first pass. Unfortunately the feature isn’t yet implemented fully, so it might just have to wait.

Thank you for giving some honest criticism. I think I’m getting the hang of the color palette. I really should be documenting which color does what and I think I will on the next pass. I revised the shiny skin and you are indeed correct that the yellow sliders looked bad. I think a subtle grey looks better. I was able to change the text so it looks more visible but I have no idea what color I changed to make the input out put icons look garbled. I’ll probably figure that out when I go through all the colors to find out their specific uses.
ImageCache.png
The backdrop for the “about” was a surprise… wow that IS terrifying! :laughing:

Here is a current(at the time I typed this)screen shot of the skin in “action”.
screenshot.png
I did want to make the backdrop black but since I can’t change the cursor color for now, that won’t happen just yet.

Where can se find this theme to download? Or isn’t it ready yet?

n0ukf,

You have to save the .png file (name it “ImageCache.png”).

Then open up 1.3.3, go to the Themes menu, and click Save Theme Cache. Audacity will prompt you that it’s writing a file, make a note of where that file is.

Now, replace the file that Audacity just wrote with the ImageCache.png file that you just downloaded. Then when you click Load Theme Cache in Audacity you should see the buttons change. Viola!

You can click Defaults to go back to the original.

I’m sure they’ll streamline this process in the future. Right now we seem to be limited to just 1 different theme.


fractalorangejuice (great name),

I like the new grey slider icon, and I still like the buttons quite a bit, and you got rid of the scary green About screen. But I’m not big on the grey / green audio scheme.

I wonder if we’ll be allowed to change the colors used for the audio display by using an Audacity menu in the future, or if we’ll always be limited to what the Theme calls for. It seems like that will be something that people might want to personalize.

alatham thanks for the name compliment… you’d be the first… :slight_smile: I’m not sure when or where that one popped in my head.

But I’m not big on the grey / green audio scheme

Firstly… nice rhyme. :sunglasses:
I’m not really all that into it either. I’m just blanking on an alternative right now. If you have any ideas let me know keeping in mind that if I make it too dark it will again render the cursors invisible.

I’d really like to make the background black and the waveform navy/blue but unfortunately I can’t make the background black(see previous paragraph). The cursor graphics are in the template but changing them currently seems to do nothing. We’ll have to wait until they decide to add support for that.

I’d love to see some full fledged skinning capability in Audacity. And you’re absolutely right changing the colors for the UI from a preferences menu would be perfection.

Here is a variation on the skin with greyscale waveform colors–>


Also, if you happen to be unfortunate enough to be using a windows machine make sure that windows isn’t hiding folders on you, otherwise the application data folder will be invisible.

Hopefully helpful to other skinners here is a list of the few colors I’ve figured out in the Audacity image cache file.
I think I must have messed up the skin file somehow by tying the color of the backdrop to the text on the left hand side of the waveform window so I’m kind of stuck with a semi dark backdrop window until I iron that one out… whoops.

Here is another variation with (I think) much improved buttons.
and here is a shot of it in action
And that’s the I dream of Jeanie theme song in case you’re wondering why the title says ‘Jeannie’. :ugeek:

Hi,

Nice theme!

This might help you identify the palete colors:

  • Blank
    Unselected
    Selected
    Sample
    SelSample
    DragSample

MuteSample
Rms
MuteRms
Shadow

AboutBackground
TrackPanelText
LabelTrackText


MeterPeak
MeterDisabledPen
MeterDisabledBrush

MeterInputPen
MeterInputBrush
MeterInputRMSBrush
MeterInputClipBrush
MeterInputLightPen
MeterInputDarkPen

MeterOutputPen
MeterOutputBrush
MeterOutputRMSBrush
MeterOutputClipBrush
MeterOutputLightPen
MeterOutputDarkPen

RulerBackground
AxisLines
GraphLines
ResponseLines
HzPlot
WavelengthPlot

Envelope

MuteButtonActive
MuteButtonVetoed

CursorPen
RecordingPen
PlaybackPen
RecordingBrush
PlaybackBrush

RulerRecordingBrush
RulerRecordingPen
RulerPlaybackBrush
RulerPlaybackPen

TimeFont
TimeBack
TimeFontFocus
TimeBackFocus

LabelTextNormalBrush
LabelTextEditBrush
LabelUnselectedBrush
LabelSelectedBrush
LabelUnselectedPen
LabelSelectedPen
LabelSurroundPen

This is the meaning of each color!

May I ask you what program did you use to edit the PNG file?
I’ve tried many programs to edit the file (Windows paint, painter, PC image editor) but even just open&save will make the file unreadable by audacity!

Thanks for the theme.

WH

wh_hsn - thanks for the information. It’s great to know what color is for what. I used Photoshop7 but Gimp(wish they’d change that name as my father in law is a college professor with Cerebral Palsy- imagine me trying to recommend its use to him) or Paintshop Pro would work just as easily as well as any image editor that can save PNG 24 with transparency. So Pixel, Graphics Gale, possibly Inkscape. The Wikipedia article on PNG is somewhat misleading as ms paint doesn’t support PNG in all versions and then only minus the transparency channel.

So anyway- PNG 24 with transparency(or alpha channel-on) is the format to save in. I’ve found it’s useful to save with a solid block of color overall to identify what can be changed and the boundaries of each item. But as I’ve seen in the past revisions of the these skins it pays to remember to change that back or you end up with some strange effects. :wink:

Here’s a new version with glass buttons.
ImageCache.png
screenshot.jpg

Heres a logo variation for fun.
audacitylogo3.jpg

Here’s another alternative skin, let me know what you think as it’s work in progress.
audacity.png
ImageCache.png

These skins (and logo) are fantastic fractalorangejuice (and misterbassman).
OK, so it’s only eye candy, but when you spend a lot of time with a program it’s preferable to have a program that looks good. In terms “marketing”, packaging is important.

It would be great if Audacity was more widely used (hopefully drawing in more resources for its development), and a good looking, modern GUI will certainly improve it’s appeal. Or to put it another way, if it looks poor, people will assume that the program is poor and not give it a second look (which would be a great shame - Audacity rocks).

One question about these skins - is this only applicable to the Linux / Mac version? I’ve got Audacity 1.3 beta (Unicode) for Windows, and I can’t find anything in the “preferences” for changing themes.

I’d like to try these themes, but I can’t find anything in preferences about Themes.
Which version of Audacity are you using?
Could you post a screenshot of where the “themes settings” are?

Thanks.

I think the Theme option has been removed from 1.3.4. It was present in 1.3.3, but I can’t find it in the newest beta. It didn’t work very well in 1.3.3 as Audacity only read limited portions of the theme.