Author Topic: Skinning Guide - Part 2 - The Elements: Image Elements  (Read 52194 times)

Rotem K.

  • Sr. Member
  • ****
  • Posts: 499
Hey guys,

Sorry for the delay, I was busy with the new site and forum lately and didn't got to update the skinning guide.
But as I see it does help people developing more skins for the community I feel I should continue.  

Before I begin this part I remind you that if you have any questions about skinning, please address those to me or any member who had already posted skins and may have the experience those answer those questions. if a member can't solve whatever trouble you are having then ask Steven.  

PART TWO – THE ELEMENTS - IMAGE ELEMENTS
I've decided starting with the image elements because they are the ones most easily missed when doing a skin and I get asked about those the most.

Image elements differ from the Color Elements, which are fixed with RGB numbers, in that that here you'll need to place an image code within the element.
To generate that code you'll need to open your image file with Base64. you can get it from here: http://www.mediafire.com/?kwxek8bzx8z1s2j.
It will encode the image file to a string, and copy it to your clipboard. then just paste it inside the image element.

IMAGE ELEMENTS:
1. Splash Screen:
    <element id="SplashScreen"> CODE </element>
    - any image will do here. When we're done with the new site, I think I'll post a RAR with the logo and text used there, so anyone who wants to use that will be able to.
    - has 3 pixels on each corner that offer transparency. so I you want a round corners on your splash screen, pixels [0,0 | 0,1 | 1,0] - for top left corner and respectively in the rest of the corners needs to be transparent and saved in PNG format.

2. Border Elements [ FormBorderTop , FormBorderTopRight , FormBorderTopLeft , FormBorderRight , FormBorderLeft ,    
    FormBorderBottomRight , FormBorderBottomLeft , FormBorderBottom ]
    Sizes for those are:
       FormBorderTop --------------------------------------------- 28x1 [pixels].
       FormBorderTopRight , FormBorderTopLeft ------------ 28x5.
       FormBorderRight , FormBorderLeft  --------------------- 1x4.
       FormBorderBottomRight , FormBorderBottomLeft ---- 4x4.
       FormBorderBottom  ---------------------------------------- 4x1.

    I usually take a screenshot of musicBee with the skin in development that has the interface colors right but borders that needs addressing,
    paste it in an image editing software. work it to my liking and then slice it according to the sizes.

    if you want rounded Bottom borders, make sure settings element UseRoundWindowBorders is enabled:  
Quote
<element id="UseRoundedWindowBorders">true</element>

    images can be downloaded from : http://www.mediafire.com/?b6kr7ra1kvda6eo

3. Window Buttons Elements [ FormMaximiseButton , FormMinimiseButton , FormRestoreButton , FormHelpButton , FormCloseButton ]
    images can be downloaded from : http://www.mediafire.com/?m3dy8z9mbml4ke5
    I usually paste those files on to a screenshot of the skin in development with the border colors right, then work that button layer and slice.  

    ADDED AFTER v1.2.4054:
    Highlight Window Buttons[ FormMaximiseHighlightButton, FormMinimiseHighlightButton, FormRestoreHighlightButton, FormHelpHighlightButton, FormCloseHighlightButton ]
   Note that you must use all of those Highlight elements or none.

4. Last.fm Love icons in main player:
    image can be downloaded from : http://www.mediafire.com/?awvab6bwu3i6a9e

    <element id="PlayerLastFmNotLove">CODE</element>
    This element fixes the image that will be displayed in the main player when the song is not loved.

    <element id="PlayerLastFmLoveBright">CODE</element>
    This element fixes the image that will be displayed in the main player when the love icon is highlighted [mouse over].

    <element id="PlayerLastFmLove">CODE</element>
    This element fixes the image that will be displayed in the main player when the song is already loved.

5.  Last.fm Love icons in mini player:
    image can be downloaded from : http://www.mediafire.com/?awvab6bwu3i6a9e

    <element id="MiniPlayerLastFmNotLove">
    This element fixes the image that will be displayed in the mini player when the song is not loved.

    <element id="MiniPlayerLastFmLoveBright">
    This element fixes the image that will be displayed in the mini player when the love icon is highlighted [mouse over].

    <element id="MiniPlayerLastFmLove">
    This element fixes the image that will be displayed in the mini player when the song is already loved.

 6. Check Boxes
    images can be downloaded from : http://www.mediafire.com/?53qsj90sf9l95b3

    <element id="CheckTick">CODE</element>
    Checked tick in a checkbox.

    <element id="CheckTickDisabled">CODE</element>
    Checked disable tick in a disabled checkbox.

    <element id="CheckUnknown">CODE</element>
    Never seen this one myself in musicBee but I guess it will appear when some options are ticked and some aren't.

7. Wait Indicator
    ELEMENT IS IGNORED AS FOR NOW.

    <element id="WaitIndicator">CODE</element>
    This one you can get from http://www.ajaxload.info/#preview. Select INDICATOR from the drop-list, color and background color,
    then import to Base64 and paste into your skin.
    appears in the status bar whenever a background prosses is running (ripping, looking up tagges and album arts).
    
    note that this icon also appears on the right side panel whenever right clicking an album art and then chossing "Search Internet" unless you'll use the next element:

   <element id="WaitIndicatorArtwork">
    appears on the right side panel whenever right clicking an album art and then chossing "Search Internet".


8. Inprogress Indicator
    <element id="InProgressIndicator">CODE</element>
    This one you can get from http://www.ajaxload.info/#preview. Select ARROWS from the drop-list, color and background color, then import to Base64 and paste into
    your skin.
    appears in the left side panel when ever downloading files from the browser, near downloads.
    

9. <element id="Delete">CODE</elements>
    image can be downloaded from : http://www.mediafire.com/?lgnu4xes0ggw459
    this one appears when wait indicator does in the status bar, an? isn't so much delete as cancel.
    


10. Music Library icon in the library tab
    image can be downloaded from : http://www.mediafire.com/?iwuceh4pp27t9jx  
    <element id="MusicLibraryInTab">CODE</element>
    


11. Missing Album Art Image
    <element id="NoArtwork">CODE</element>
    Will apear when ever a song is missing it's album art.


12. MiniPlayerNowPlaying and MiniPlayerNowPlayingBright
    <element id="MiniPlayerNowPlaying">
    <element id="MiniPlayerNowPlayingBright">
    these two effect the "Show now playing list toggle", Bright effects the highlight color(mouse over).
    

  
13. <element id="AzJump">CODE</element>
    effects the little AZ icon in the main panel field columes.
    



That's it so far, if more image elements will be added I'll update this thread.

Next up: Setting Elements and Color Elements

Go to PART THREE

In the mean time feel free to ask any question.

Rotem
Last Edit: May 31, 2012, 02:43:30 PM by Rotem K.

Blinghound

  • Sr. Member
  • ****
  • Posts: 319
This is brilliant Rotem, it answers all of the questions I had (about images/string etc) when I started to skin :D Thank you

Blinghound

  • Sr. Member
  • ****
  • Posts: 319
One thing that may puzzle people. The Wait Indicator and In Progress images (downloaded from the site) are GIF files, which Base64 does not open. I find that simply renaming the extension to .png in windows explorer works, but you may have a better idea :)

Rotem K.

  • Sr. Member
  • ****
  • Posts: 499

OrB

  • Guest
Thank you - that makes some things more clear to me. Nice that you implemented the screenshots.

VX

  • Guest
Rotem, could you update the guide to cover the new skin elements that have been introduced with the latest beta  ???

Skimming recent posts on the forum I found a few questions about dependent skins. There are a lot of useful informations about the feature but it seems new skinners are having some problems to find it easily as the issue is divided into too many topics. Apart from the one linked above it's worth to look at this bug report and your Pop Blue skin as it could be very useful example.

How to use a dependent skin with different root skins

Quote
VX: Greb, just tried to use Your colour choices form dependent skins with other skins (Asylum White, Honeycomb, Midnight, MusicBee Default, Smooth Grey, Spotify B...) and it looks awesome 
The only drawback with changing the root name in a dependent skin to make it work with another one is that I have to write the name in the line <root dependsOn="NEW NAME"> manually. Not a big deal even for a lazy guy, but I hope it could be automated somehow. What do you think 

Greb: A very easy way: I renamed the NEW NAME as Basic. So it's only needed to name the folder as the original skin and to place the skin inside with the name 'Basic.xml'. It works automatically.
That would be the case with Spotify Black, for example: http://www.mediafire.com/?99nn26v2r294he8
But you can use the skin you want as long as the folder has the name of the skin and the skin is named as 'Basic'

VX: I downloaded the Spotify Black folder and renamed it to Asylum White, then copied the original Asylum White skin to it and renamed it as Basic. Works like a charm. Thank you very much for the tip   

I wish every time a dependent skin is selected, the pop up menu appears: 'Choose the root skin to apply the changes' 
You won't need to duplicate dependent skins in separate folders this way.

I like the concept of dependent skin and find it to be great advantage for the skinners as it allows to maintain the skins up to date with almost no effort  :D Furthermore, it's much easier to start skinning with a dependent skin - you can introduce the colour changes for a few chosen elements only  :)

Rotem, your skins seem to be the most popular choices for root skins. Congratulations  :) Could you update the skinning guide to take the full advantage of this great feature  ??? You can use the comments below the guides to enhance them if you think it could be useful somehow.

Thank you very much  :)
Last Edit: March 19, 2011, 09:03:42 PM by VX

Rotem K.

  • Sr. Member
  • ****
  • Posts: 499
I would but non of the new elements are Image Elements.
 
They belong to the next part which I haven't got around to yet, color elements.

About dependents skins, I'll mention it somewhere.
Last Edit: March 08, 2011, 01:01:46 PM by Rotem K.

silasje1

  • Member
  • Sr. Member
  • *****
  • Posts: 652
could the play/next/backstop images be changed too?
HDMI GTX570->YAMAHA RX-V471->DALI ZENSOR 1

Dutch Translation

WMP 12 Skin


silasje1

  • Member
  • Sr. Member
  • *****
  • Posts: 652
oke, i will just prepare them then :) you maybe know a good size (pixels width height?)
HDMI GTX570->YAMAHA RX-V471->DALI ZENSOR 1

Dutch Translation

WMP 12 Skin

Rotem K.

  • Sr. Member
  • ****
  • Posts: 499
Can't say I do.

you should PM Steven about the new elements needed.
That way, if the request is feasible, it will be just what you need.

dannyboiii

  • Guest
I have a few questions.

1. Every time that I attempt to make and image for the "close", "maximize", etc. buttons, they appear to be extremely stretched out or something. I can't seem to figure out what I'm doing wrong.  What is the preferred method and settings for making these images? (PPI, resolution, etc. )

2. It seems like the Last.fm images are no longer being hosted where you linked to them. Is there another place where I can get these images?

3. Does anyone know where exactly in an xml file I can find the "Albums Grouped by" text color?

Rotem K.

  • Sr. Member
  • ****
  • Posts: 499
Hi dannyboiii,

1. if you're using photoshop, try opening each image in paint.net, copy it to a new canvas. and save it.
2. The last.fm love icon.
3. It derives from the fg color on element "Panel.SectionHeader.Default".

Good Luck with your new skin, looks great

KylePolansky

  • Newbie
  • *
  • Posts: 13
I think the dimensions are a little off. Here's what I used:

       FormBorderTop --------------------------------------------- 28x1 [pixels].
       FormBorderTopRight , FormBorderTopLeft ------------ 28x5.
       FormBorderRight , FormBorderLeft  --------------------- 4x1. <Switched
       FormBorderBottomRight , FormBorderBottomLeft ---- 4x4.
       FormBorderBottom  ---------------------------------------- 1x4. <Switched

After spending about 2 hours I finally got my left right and bottom borders working!