CD ART DISPLAY – CAD (Animated Skin)

How to make this skin!?
CD ART DISPLAY – CAD (Animated Skin)
Tools for this skin:
Ferramentas para essa skin
CD Art Display is a great piece of software. And it already includes the Skin Editor to create our skin.
The only tools that we need for this skin is the Image Editor of our choice, CAD and our imagination.
O Cd Art Display é uma poderosa parte de software. E ele já inclui o “Skin Editor” para criarmos nossa skin.
As únicas ferramentas que vamos precisar para essa skin é um editor de imagens de sua escolha, CAD e sua imaginação.
OK! Tighten your belts, and here we go!
Ok, apertem seus cintos e aqui vamos nós!
Creating the Directory of our Skin (criando o diretório da sua skin).................................................................. 2
 Adding the Folders (Adicionando as pastas )................................................................................................... 3
 Knowing the Skin Editor (edit tab) (Conhecendo o editor de skins)................................................................... 5
 Starting the Skin, adding files and customizing the Toolbar (Começando a skin, adicionando arquivos e
customizando a Toolbar) ................................................................................................................................... 6
 Configuring the Text Lines (Configurando as linhas de texto )........................................................................... 9
 Progress Bar and Rating (Barra de progresso e Notas )................................................................................... 13
 Lyrics Panel (Painel de letras )...................................................................................................................... 16
 Transition & Effects (Transição [mudança de capas] e efeitos )........................................................................... 17
 Cover (Capas )............................................................................................................................................ 19
 Case and Cover Effects (Caixa e efeitos nas capas )......................................................................................... 20
 Panel (Painel )............................................................................................................................................ 21
 Finishing the Work (terminando o trabalho )................................................................................................. 24
 Closing Remarks (Observações Finais )......................................................................................................... 25

Creating the Directory of our Skin (criando o diretório da sua skin)
With CAD opened, right click the app and choose “Skin Editor”
Com seu CAD aberto, clique direito nele e escolha “Skin Editor”
*** por padrão seguiremos o idioma do CAD em Inglês
Click now in “New Skin”
Clique agora em “New Skin”
Click “New Skin” and write
Clique “nova skin” e digite
The name of our skin.
o nome da sua Skin.
Ok, now our Skin directory has been created!
Ok, agora a pasta da sua skin foi criada.
“.../docments and settings/cd art display/skins/name of your skin”
Or for some this can be “custom folder/CD Art Display/Skins/name of your skin”
For this tutorial I used the SimpleOne name
Para esse tutorial eu vou usar o nome SimpleOne
Adding the folders (Adicionando as pastas)
For now we only have the skin.ini our “SimpleOne” directory. We need to add the other folders and the
files to start our configuration.
Por enquanto temos apenas o Skin.ini dentro do diretório “SimpleOne”. Nós precisamos adicionar as outras pastas e os arquivos
para começar a configuração.
The folders for a complete skin, with all elements possible are:
As patas para uma skin completa, com todos os elementos possíveis são:
Don't leave empty folders
Não deixe pastas vazias
 Toolbar – Contains all the buttons of our skin.
 Toolbar – Contém todos os botões da sua skin.
 Rating – Contains the rating files, our “stars” for example.
 Rating – Contém os arquivos referentes as notas, suas estrelas por exemplo.
 Volume – For volume files: back.png, fill.png and knob.png
 Volume – para os arquivos de volume: back.png, fill.png e knob.png.
Progress bar – For Progress files: back.png, fill.png and knob.png (alterantive: 0.png, 1.png… for an
animation)

 Progress bar – para os arquivos da barra de progresso: back.png, fill.png e knob.png (alternatives: 0.png, 1.png . . . para uma
animação)
Panel – When the skin has a animation (in the skin body - open/close/slide), all the files that make this
animation need be into a “Panel” Folder. (panel.png); [for animated panel (anim0.png, anim1.png…to the
last, which is panel.png again)]. Graphics for an “Extended Panel” are located in here too!

 Panel – Quando a skin tem uma animação (no seu corpo - abrir/fechar/deslizar), todas os arquivos que fazem essa animação
devem ser colocados na pasta Panel. (panel.png); [para um painel animado (anim0.png, anim1.png . . . para o ultimo, que é
panel.png novamente)]. Os gráficos um “extended panel” são colocados aqui também.
 Lyrics – For the images of the lyrics panel, backgrounds, buttons, and others.

Lyrics – Para as imagens do painel da letra da musica, fundo, botões e outros.
 Effect – for other animation, as a visualization, shine or a any effect in our skin.
 Effect – para outra animação, como uma visualização, brilho ou qualquer outro efeito na sua skin.

Transition – Another folder for animated effects; this one is for the cover transition.
 Transition – Outra pasta para efeitos de animação, esta é para a transição das capas.
Text – I see this folder in only a few skins, but it makes a great effect. Is for effects on our textlines, like
a fading or textures.

 Text – Eu vejo esta pasta em poucas skin, mas faz um grande efeito. Ela é para os efeitos nas nossas linhas de texto, como um
fading ou uma textura.
 Styles – When you want to create the same skin with other styles or colors, put the skins folders here.
 Styles – Quando você quiser criar uma mesma skin com outros estilos ou cores, coloque a pasta das skins aqui.
Fonts – Put in the fonts files that we used in our skin. While installing the skin, this opens so we can
install the fonts.

 Fonts – Coloque aqui os arquivos das fontes que usamos na nossa skin. Quando sua skin é instalada, esta pasta se abre para
que possamos instalá-las.
Hotspot – Works like a button (visible/invisible). Access via “Appearance” tab -> “Case/Cover area
mouse click”. Used images are: hotspot.png (normal) and hotspot1.png (mouseover).

 Hotspot – trabalha como um botão (visível/invisível). Acessado pela tab “appearance” -> “case/cover área mouse click”. As
imagens usadas são: hotspot.png (normal) e hotspot1.png (mouse over)
 Skin Root Directory – We need to put some files in here, too (Case.png, Nocover.png, Overlay.png,
Seaching.png, Video.png, Webradio.png our preview image and some more)
 Diretório raiz da skin – No diretório da skin você precisará colocar alguns arquivos também ( Case, Nocover, Searching, Video,
Webradio ou sua imagem de preview e algo mais)
Knowing the Skin Editor (edit tab) (Conhecendo o editor de skins)
Tab buttons (from left to right): Botões da aba ( da esquerda para a direita)
1.
Save: Save our changes.
1. Save: Salva suas modificações
2. Save
as...: We can save the current style as a new one (this is the easiest way to make more styles while
keeping the initial work)
2. Save as... : Você pode salva o estilo atual como um novo ( é um modo fácil para se fazer novos estilos mantendo o trabalho
inicial
3.
Undo: going back to the previous setting
3. Undo: Volta ao ajuste anterior.
4.
Reload: reloading the skin
4. Reload: Recarrega a skin
5. Change style: Click to see a list of skin styles, so you can change from one to another
5. Chanve style: Clique para ver a lista de estilos da skin, assim você pode mudar de uma para a outra
6.
Batch tool: Easily commit several changes in all styles (or the ones we select) at once
6. Batch tool*: Facilmente fará mudanças em todos os estilos ( ou nos que você selecionar) de uma só vez.
7.
Zip current skin: this is the recommended way to pack a skin for distributing; in addition, this method
will assure the drag and drop to install feature will work
7. Zup current skin: Este é o modo recomendado para se comprimir uma skin para a distribuição. Alem disso, esse método ira
garantir que o modo “arrastar e soltar” para instalar ira funcionar.
8.
Help: once pressed it'll automatically open the help file in the related section ***
8.Help: quando pressionado, automaticamente abrira a ajuda na seção relacionada
*** All options and tools are explained here. So….read it!
*** todas as opções e ferramentas são explicadas aqui. Então... leia-o!
Starting the skin, adding files and customizing the Toolbar
Começando a skin, adicionando arquivos e customizando a Toobar
All files in PNG format
Todas as imagens em PNG
Put the case and nocover image in our Skin’s root folder (searching, overlay and video graphics can be
added too). The case.png is the “body” of our skin.
Coloque as imagens de Case e Nocover na pasta de origem da skin. (Searching, overlay e Video também poder ser adicionados).
A case.png é o “corpo” da sua skin
Now we can create a “Toolbar” folder and add the images into.
Agora podemos criar a pasta Toolbar e adicionar as imagens dentro dela.
How to know the correct names?
Como saber os títulos corretos?
Here the list of all Supported buttons: Aqui a lista com todos os botões suportados:
Play and Pause
play.png = normal state
play1.png = mouse over state
play2.png = mouse press state
pause.png = normal state
pause1.png = mouse over state
pause2.png = mouse press state
Stop song
stop.png = normal state
stop1.png = mouse over state
stop2.png = mouse press state
Previous song
prev.png = normal state
prev1.png = mouse over state
prev2.png = mouse press state
Next song
next.png = normal state
next1.png = mouse over state
next2.png = mouse press state
Show CAD menu
menu.png = normal state
menu1.png = mouse over state
menu2.png = mouse press state
Toggle repeat Repedir
repeat.png = off state
repeat1.png = on state
repeat2.png = mouse over off state
repeat3.png = mouse over on state
Toggle shuffle Aleatório
shuffle.png = off state
shuffle1.png = on state
shuffle2.png = mouse over off state
shuffle3.png = mouse over on state
Minimize CAD to system tray Minimizar
min.png = normal state
min1.png = mouse over state
min2.png = mouse press state
Show lyrics viewer Abrir painel da letra
lyrics.png = normal state
lyrics1.png = mouse over state
lyrics2.png = mouse press state
Show/hide player Mostrar ou não o player
player.png = normal state
player1.png = mouse over state
player2.png = mouse press state
Maximize CAD Mazimizar
max.png = normal state
max1.png = mouse over state
max2.png = mouse press state
Exit CAD Sair
exit.png = normal state
exit1.png = mouse over state
exit2.png = mouse press state
For now we have the background of our skin (case.png) and the different buttons. Now we have to set
the buttons to the position they should appear finally.
Temos por enquanto o fundo da skin (case) e diferentes botões. Agora temos que configurar a localização que eles deverão
aparecer no final.
Select “Toolbar and Volume” in
the side tab
Selecione “toolbar and volume” na aba
lateral
- Draw Guide lines:
Activate to see the pink border.
It shows the “toolbar area
width/height”. We can position
our buttons within this area!
Ative para ver as linhas rosas, Ela
mostra a “toolbar área width/height”.
Podemos posicionar nossos botões
nessa área.
To change the placement of a
button, just mark it in the
“button settings”, and adjust the
value for left and top.
Para mudar o posicionamento de um
botão, apenas selecione-o em “buttons
settings” e ajuste o valor para left e top.
Done with all buttons, we can
configure the Volume Bar. Add
the Volume folder to
“SimpleOne directory” and put
in the “back.png” and
“knob.png” files.
Feito com todos os botões, podemos
configurar a Volume Bar. Adilcione a
pasta “Volume” no diretorio da skin e
coloque dentro os arquivos “back.png”
e “knob.png”.
Reload our skin and change the left and top values (as the other buttons), in the Volume area to make it
fit perfectly. Optionally we can give it a label. That shows us a text response while changing the volume
in the finished skin (e.g. “Volume” or “Output-Level”). Mouse over fade in/out (used for an optionally
mouseover.png), Zoom and Opacity don’t need further explanation, I think.
Recarregue sua skin e mude os valores de left e top (como nos botões), na área Volume para encaixa-los perfeitamente.
Opcionalmente podemos dá-lo um “label/rótulo”. Este nos mostra o texto enquanto mudamos o volume em uma skin pronta.
(ex. “volume” ou “output-level”). Mouse over fade in/out (usado para um opcional mouseover.png). Zoon e Opacity não
precisam muitas explicações, eu acho.
Ok, for now, our skin makes this
Ok, por enquanto nossa skin já parece com isso
Configuring the text lines
Configurando as linhas de texto
Now we add the text lines “author”, “title”, “time”, “album” and others. It's – like everything else - very
easy. Just find a nice Font and start the work.
Agora vamos adicionar as linhas de texto “autor”, “título”, “tempo”, “álbum” e outros. È muito facil - como tudo também é - ,
apenas escolha uma boa fonte e comesse o trabalho
Create a new folder in the skin directory with the name “Font” and put some nice TrueType fonts in
there! “SimpleOne” uses “Lucida Grande” for the text and “7barSP” for the numbers (e.g. Time).
Crie uma nova pasta no diretório da skin com o nome “Font” e coloca alguns bons arquivos “Truetype” dentro, SimpleOne usa
“Lucida Grande” para os textos e “7barSP” para os números. (ex. tempo)
Select the Text tool on the editor’s side bar and activate the “draw guide lines”. We can activate up to 5
text lines. Each line has a list of different Tags. Click on “Tags” to show the list. (Note: It is possible to use
more than one tag per text line!)
Selecione a ferramenta “Text” na barra lateral e ative “draw guide lines”. Podemos ativar mais que 5 linha de texto. Cada linha
tem uma lista de diferentes tags. Clique em “Tags” para ver a lista (nota: É possivel usar mais de uma tag por linha!)
In Line1, activate “Enable
Line” and write %title%. Now
our skin displays the song’s
title information. To place it
where you want, just use the
“Area” options below.
Na line1 ative “Enable Line” e
escreva %title%. Agora nossa skin
mostra, a informação as
informações sobre o titulo da
musica. Para coloca-lo onde você
quer, apensa use as opções de
“Area” abaixo.
Configure as many lines as you want. But keep in mind, that the only line able to show the time
elapsed/remaining is line 4. The tags are %00:00% or %-00:00%
Configure todas as linhas que você quiser, mas tenha em mente que, a única linha que mostra o tempo percorrido/faltando é a
line4 . As tags são %00:00% e %-00:00%
The divider area works like this: We put the tag %divider% and select the number of pixels we want to
show empty space between 2 tags! Example: select a divider of 75 px and put the tags in line 4 like
shown below.
A área divider trabalha neste modo: Colocamos a tag %divider% e selecionamos o numero de pixels que queremos mostrar como
um espaço vazio entre as 2 tags! Exemplo: selecione como divider o numero 75 e coloque sua tag na line4, como mostrado
abaixo
%-00:00% %divider% %00:00%
%-00:00%
(75px in blank space)
%00:00%
Things we must not forget!
Coisas que não podemos esquecer!
• Max Char: This value sets the maximum amount of characters that can be displayed in a text line. Make
tests to find the right value, so the line doesn't show more characters than your design supports. This
can cause an ugly visual bug. You don't you believe it? See for yourself!
• Max Char: este valor define a quantidade maxima de caracteres que podem ser exibidos em uma linha. Faça testes para
encontrar o valor correto, para que a linha não mostre mais caracteres que seu design suporta. Isto pode causar um bug visual
horrivel. Você não acredita? Veja você mesmo!
• Horizontal text scrolling: causes the text to scroll from right to left. Enable this in addition to “max char”. But take care to find the right value so the
scrolling looks smooth.
• Max horizontal do texto: Causa uma rolagem do texto da direita para a esquerda. Ative esta juntamente com “max char”. Mas
tenha cuidade para encontrar o valor correto para a rolagem parecer suave.
Horizontal direction for lines 1, 2 and 3 and vertical for line 5.
It is NOT available (1.) for Line 4; or (2.) if you use %newline% tag in
a horizontal scrolling; or (3.) if you set text rating for Line 3.
Direção horizontal para as linhas 1,2 e 3 e vertical para a linha5.
Não esta habilitada para: (1) a linha 4; ou (2) se você usar a tag %newline% em
uma rolagem horizontal; ou (3) se você usar as notas por texto “text rating” na linha 3
 Common text scrolling settings:
Scroll divider size is the distance between the end and the beginning of a horizontal scrolling text.
Check “Always show line mask image” to NOT hide the line mask if the text scrolling is not necessary in the
current song.
“Scroll divider size” é a distância entre o final e o início de um texto de rolagem horizontal.
Ative “Always show line mask image” de linha para NÃO esconder a máscara de linha se a rolagem de texto não for necessária na
música atual
Mask is an optional feature to add e.g. a fade in/out effect over the text. Each line has their own mask: for
line 1 the file is mask1.png, for line 2 mask2.png, for line 3 mask3.png, for line 4 mask4.png and for line
5 mask5.png.
“Mask” é uma característica opcional para por exemplo, colocar um fade in/out sobre o texto. Cada linha tem sua própria mascara.
Para a linha o arquivo é mask1.png, para a linha 2 mask2.png, para a linha 3 mask3.png, para a linha 4 mask4.png e para a linha 5
mask5.png
The Line 4 does NOT support scrolling, it supports mask (mask4.png) to improve some skins concept
overall looking.
A linha 4 não suporta a rolagem, ela suporta mascaras (mask4.png) para melhorar alguns aspectos visuais da skin
Mask graphics (mask1.png, mask2.png...) are located in a skin sub folder named “Text”.
As imagens de mascara são colocadas em uma pasta chamada “text”
Now we change the fonts, colors and effects on text.
Agora nós mudamos as fontes, cores e efeitos do texto.
Click on the “Text Style” on sidebar. We can see four parts: Text Style, Shadow, Outline and line transition
Clique em “text style” na barra lateral. Você pode ver quatro partes: text style, shadow, outline e line transition
In the Text Style part, we can select:
Na parte “Text style” podemos selecionar:
The font (just click on font and choose one) A fonte (apenas clique em font e selecione uma
Uppercase Todas maiúsculas
Filling Preenchimento
Color (select only in the first picker) Cor (selecione apenas no primeiro picker)
Gradient (gradient of two colors) Gradientes (gradientes com duas cores)
Texture (to use the Mask files on your text) Texture (para usar os arquivos Mask no seu texto
Shadow: Sombra
Outline: Bordas
Line transition: select the time fade in/out of text Transição da linha: selecione o tempo para o fade in/out da linha
Progress Bar and Rating
Barra de progresso e Classificação
We can add a progress bar and/or rating in our skin in two different ways:
Podemos adicionar uma barra de progresso e/ou uma classificação na nossa skin em dois modos diferentes.
Progress bar:
1- We create a new folder in the skin directory named “progress bar” and put the back.png and knob.png
files in there. Reload your skin and click on “progress bar and rating” in the editor’s sidebar. In Style, we
choose “graphic” and configure it. Or, if you don't want to create images for the progress bar, select
“draw”, new tools are able now to configure colors and positions.
1- Criamos uma nova pasta no diretório da skin, chamada “progress bar” e colocamos os arquivos back.png e knob.png dentro.
Recarregue sua skin e clique em “progress bar and rating” na barra lateral. Em style, escolhamos “graphic” e configuramos. Ou, se
você não quiser criar imagens para a barra de progresso, selecione “draw”, novas ferramentas estão disponíveis agora para
configurar as cores e posições.
2- The second way, is using the line1 options. Under the tag box, if we activate “enable song progress
seek”, the progress bar is used with the tag of this line. Example: if we use %title%, we can click the title
song information in our skin, dependent where we click here the song position jumps!
2- O segundo modo, é usando as opções da linha1. Abaixo da caixa de tags, se ativarmos “enabe song progress seek” a barra de
progresso é usada com a tag desta linha. Ex: Se você usar %title%, podemos clicar no titulo da musica na nossa skin, dependente,
onde clicarmos aqui, a musica ira saltar.
Rating:
1- We create a new folder in the skin’s directory named “Rating” and put the rating files in this one.
The graphics for the rating are usually based on a 5-star system.
0.png shows an unrated state. Uneven numbers aren’t used for the other ratings.
So we have left 5 different ratings (2.png, 4.png, 6.png, 8.png and (surprise!) 10.png.
2over.png, 4over.png, 6over.png, 8over.png, 10over.png are used in addition to show a mouseover effect.
1- Criamos uma nova pasta no diretório da skin chamada “rating” e colocarmos os arquivo da classificação nesta.
Os graficos para a classificação são geralmente baseados no sistema 5 estrelas
0.png mostra um estado sem classificação. Números impares não são usados para as outras classificações
Então deixamos 5 diferentes avaliações (2.png, 4.png, 6.png, 8.png e [surpresa] 10.png)
2over.png, 4over.png, 6over.png, 8over.png, 10over.png são usados como adicinais para mostrar um efeito “mouseover”
It’s possible to create horizontal, vertical and also squared ratings. This depends on the size of the rating
images.
Examples: 100x40px – horizontal; 40x120px – vertical, 100x100px - squared
É possível criar classificações horizontais, verticais e também quadradas. Isso depende do tamanho das imagens de classificação.
Examples: 100x40px – horizontal; 40x120px – vertical, 100x100px - quadrado
Above you can see the images of active rating - 0, 2, 4, 6, 8, 10 - and the images for mouseover rating 2over, 4over, 6over, 8over and 10over acima você pode ver as imagens da seleção ativa - 0, 2, 4, 6, 8, 10 - e as imagens para a seleção para “mouserover” - 2over, 4over,
6over, 8over and 10over -
After we created all images, we go to the Skin Editor and click on ProgressBar and Rating on the sidebar,
and select “Enable” in the Rating. We configure the positions and select the two options below.
Depois de criarmos todas as imagens, vamos para o editor de skin e clicamos em “ProgressBar and Rating” na barra lateral e
selecione“enable” em “rating” . Configure as posições e selecione as duas opções abaixo
2- Another method of displaying a rating, is using the line3 adds. Under the tag box, if we activate “enable
text”, we can put two characters for the rating! The first one is for the empty rating and the second for
selected rating!
2- Outro método para mostrar a classificação, é usando os adicionais da linha 3. abaixo da caixa de tags, se você ativar “enable
text”, você poderá colocar dois caracteres para suas notas. O primeiro para a seleção vazia e o segundo para a nota selecionada.
e.g. If you put
(= and Y, using the Webdings font)
the rating 3 for a song is 
Lyrics Panel
Painel de letras
The lyrics panel is very simple to configure. Create a “Lyrics” folder and click on Lyrics on sidebar!
Into the Lyrics folder, we can put these files:
O painel de letras é muito simples de configurar. Crie a pasta “lyrics” e clique em lyrics na barra lateral!
Dentro da pasta lyrics podemos colocar estes arquivos.
Background:
Back.png
Close:
Close.png
Close1.png (over)
Close2.png (selected)
Menu:
menu.png
menu1.png (over)
menu2.png (selected)
Page Down:
Next.png
Next1.png (over)
Next2.png (selected)
Page Up:
Prev.png
Prev1.png (over)
Prev2.png (selected)
masktop.png (an optional image that is used to
fade in the text at the top of the lyrics area)
maskbottom.png ( an optional image that is used to
fade out the text at the bottom of lyrics area)
(uma imagem opcional que é usada para um “fade in” do texto
no topo da área da letra.)
(uma imagem opcional que é usada para um “fade out” do
texto no topo da área da letra.)
These buttons are only visible, when the Lyrics panel is opened.
Estes botões são mostrados apenas quando o painel de letras esta aberto.
At the configuration of the lyrics panel, we can change the text alignment and the position for the same.
Furthermore we can use the “Fine Adjustment” to fine-tune the position of the text.
Na configuração do painel de letras, podemos mudar os alinhamentos do texto e a posição do mesmo. Além disso, podemos usar
o “Fine adjustment” para ajustarmos melhor a posição do texto.
We can change our text style like for the other lines like I explained before. Go to Text style on sidebar and
click on Lyrics. The Lyrics supports the mask5.png for gradients
Podemos mudar o estilo do nosso texto como todas as outras linhas como eu expliquei anteriormente. Vá para “Text Style” na
barra lateral e clique em “lyrics”. As letras suportam a Mask5.png para os gradientes.
Transition & Effects
Transição (mudança das capas) e Efeitos.
The transition is very simple to configure, maybe it could be hard to create the images, but you can ;)
As transições são muito simples para configurar, talvez possa ser difícil fazer as imagens, mas você consegue ;)
Let us create a new folder named “Transition” where we can put in our animation graphics. The name of
these files are:
Vamos criar uma nova pasta chamada “transition” onde colocamos nossos arquivos da animação. O nome desses arquivos são
trans0.png; trans1.png; trans2.png . . .
The trans0.png is the centre image of our animation!
O trans0.png é a imagem central na nossa animação.
Example: if we have 5 files, the order on the animation would be
Exemplo, se tivermos 5 arquivos, a ordem da animação será,
trans5 - trans4 - trans3 - trans1 - trans0 - trans1 - trans2 - trans3 - trans4 - trans5
An example of transition
images.
(by Otis Bee)
Make a transition in the
same dimensions of you
plan to do the cover!
Faça a transition no mesmo
tamanho que você planeja
fazer a Cover
Now that we have all the images we
continue with the configuration!
Agora que temos todas as imagens vamos
continuar com a configuração!
Click on “Case and Cover” on the
sidebar and change the interval of the
animation.
Clique em “Case and Cover” na barra lateral e
mude o intervalo de animação
Effects (Efeitos)
The effects we can use in CAD skins work the same way like the transition!
We could create a flame, shine, animated bars or anything that we can imagine :D
It works the same way. We create a folder called “Effect” and continue with the animation steps…
Os efeitos podemos usar no CAD da mesma forma que a transição!
Podemos criar uma chama, brilho, barras animadas ou qualquer coisa que você possaos imaginar :D
Este trabalha da mesma forma. Criamos uma pasta chamada “Effect” e continuamos com os passos de animação...
The names now are :
Effect0.png; effect1.png;
effect2.png . . .
Os nomes agora serão:
Different things!
Coisas diferentes
The order of the
animation sequence is
now: 0 – 1 – 2 – 3 . . .
A ordem da animação agora é:
0 – 1 – 2 – 3 ...
Let’s click on the Special
Effect on the sidebar!
Select enable and click
through! (disable the click
options on the animation! advanced skin)
vamos clicar em “Special Effect” na
barra lateral .
Selecione “enable” e “click
through” (desabilita as opções de
clique na animação - skins
avançadas)
in Show effect when, select
Em “show effect when”, selecione
the best for your skin and
choose (if necessary) the time to repeat.
Escolha (se necessario) o tempo para a repetição
a melhor para sua skin e
We can change the frame interval here too. It’s the velocity that our animation/effect works!
Podemos também mudar a “Frame Interval”, é a velocidade que sua animação/efeito trabalha!
Covers
Capas
Oh yeah, finally! (Did you think that I forgot it, ahnn?)
Oh yeah, finalmente! ( você achou que eu tinha esquecido ahnn?)
No, no! But I prefer to do it now, because now you know how to use the configurations on skin editor!
Não, não! Mas eu preferi fazer isso apenas agora, porque vocês já sabem como usa as configurações no editor de skins!
For the simplest cover, click on “Case & Cover” on sidebar.
Para as capas mais simples, clique em “case & Cover” na barra lateral
In “show at front” we can choose: Case, Cover and Only Case.
Em “show at front” podemos escolher: Case, Cover e Only Case.
When you use the “Case”, the case.png (not the overlay.png) will be in front the cover.
The cover area must have been cut out of the case.png here. Else we won’t see a cover!
Quando você usa “Case”. A case.png (não a overlay.png) ficará na frente da capa.
A area da capa devera será “cortada” na case.png. Caso contrario não veremos a capa.
“Cover” is the normal state. The cover will be shown in front of the case!
Cover: é o status normal. A capa será mostrada na frente da “case”
And we can use “Only Case”, if we don't want to use covers in our skin.
E podemos usar “Only Case”, se não quisermos usar capas na nossa skin.
Select the size of our cover with the width and height options, and the position with the left and top
values! (remember to choose the same dimensions for cover and transition!)
Selecione o tamanho da nossa capa com as opções “width” e “height” e a posição com valores para “left” e “top”! (lembre-se de
escolher o mesmo tamanho para a capa e transição.)
Slide show, defines the time that our covers images change (back, front and others images)
Slide Show, define o tempo que nossas capas são trocadas (atrás, capa e outras imagens)
And Full Screen Skin! When we would create a full screen skin, we select the location of the same for left
and top here.
E Full Screen Skin! Quando quisermos criar uma skin de tela cheia, selecionamos a localização da mesma para esquerda e topo
aqui
To use Covers we have another way. Using the panels! I use this way for implementing a cover in our skin!
Para usar capas nós temos outro jeito. Usando os painéis! Eu usei esse modo para colocar a capa na nossa skin!
Case and Cover Effects
Caixa e efeitos de capas
In this tab, we have different effects to apply. The first is the mirror! You can choose from a solid mirror to
mirrors with different sizes and opacity.
Nesta tab, nós temos diferentes efeitos para aplicar. O primeiro é o espelho (mirro)! Você pode escolher de um espelho sólido a
espelhos com diferentes tamanhos e opacidade.
The first drop down menu is for the size of the mirror ( 100% - 90% … 10% ) and the second for the fade
effect! The minor the number, the bigger the fade effect. When you are working in your project, make
tests with all possibilities to get the best result!
O primeiro banco é para o tamanho do espelho (100% - 90% . . .10% ) e o segundo ara o efeito do gradiente. O menor numero é
o maior gradiente. Quando você estiver trabalhando no seu projeto, faça testes com todas as possibilidades para ter o melhor
resultado
Cover Radius: Make your cover a circle!
Cover Radius: faz da sua capa um circulo!
Case/Cover Rotation: this option rotates only the case and cover, not the other elements! If you plan to
use it, you need to make your buttons, bars and so on, so that they fit in your skin.
Case/Cover Rotation: esta opção gira apenas a caixa e a capa, não os outros elementos! Se você planeja usar-lo, você precisa fazer
seus botões, barras e assim por diante, de modo que se encaixem na sua skin.
Case and Cover Shear - x and y axis: to be sincere, I never saw this option enabled in a skin! This distorts
your case and cover in x and y axis ( how the name says). Can help to create a perspective effect!
Case and Cover Shear – x and y axis: Para ser sincero, eu nunca vi essa opção habilitada em uma skin! Ela distorce sua caixa e capa
nos eixos x e y (como o nome diz). Pode ajudar a criar um efeito de perspectiva.
Extra Area: this is the area of your skin elements! You can define the size of area and position (applied on
case and cover [you need configure it before the buttons]). The resources can't be showed out of this
area.
Extra Area: Esta é a area dos elementos da sua skin! Você pode definir o tamanho da área e a posição (aplicado na caixa e capa
[você precisa configurar-lo antes dos botões]). Os recursos não podem ser vistos fora desta área.
Panel
Painel
Here our trump! The animation on the body of skin! We have seen other animated resources before, but
the panel is the best option in CAD (in my opinion)
Aqui nosso trunfo! A animação no corpo da skin! Nós vimos até o momento recursos animados, mas o Painel é a melhor opção do
CAD (na minha opinião)
For the images we need (besides a “Panel” sub folder): Para as imagens precisamos: (além da subpasta “Panel)
Panel.png – the image of your panel opened A imagem do seu painel aberto
And optionally anim0.png – anim1.png – anim2.png and more, more, more for the animation! E
opcionalmente para a animação
As you can see
the anim0.png is
the first image
and refers to the
closed panel
Come você pode ver,
o Anim0.png é a
primeira imagem e
refere-se ao painel
fechado.
Now, we reload the skin and select
Panel from the sidebar
Agora vamos recarregar a skin e selecionar
Panel na barra lateral.
When we reload the skin, the image of the panel that is shown is the anim0.png. Select “draw guide
lines” and put the panel in its correct place. Before we configure the velocity of the animation, we need
to define the “hotspot” for open and close the panel.
Quando recarregamos a skin, a imagem do painel que é mostrada é a anim0.png. Selecione “Draw Guide Lines” a coloque o
painel no lugar correto. Antes de configurarmos a velocidade da animação, temos que definir os “hotspots” para abrir e fechar o
painel.
From the dropdown menu above
select “On hotspot show/hide
elements/panel”.
Apartir do menu drp-down acima, selecione
“on hotspot show/hide elements/panel”
Alternative: “Show/Hide
Elements/Panel” doesn’t need a
hotspot. A click on the cover/case
opens the panel instead.
Alternativo: “show/hide Elements/panel” Não
precisa de um hotspot. Um clique na
cover/case abre o painel
Select “Appearance” “Hotspot area and position”, and again select “Draw Guide lines”. In width and
height select the size of your “button” to open/close the panel (the little pink square).
Selecione “Appearance” “hotspot area and
position”, e novamente “draw guide lines”.
Em width e heigth selecione o tamanho do
seu botão para Abrir/fechar o painel (o
quadrado rosa pequeno)
And at the Position (left/top), define
the location of the button for our skin
which opens/closes the panel.
E em Position (left/top), difina para o local dos
botões para nossa skin que abrem/fecham o
painel
There is also an option to use an Extended Panel to show additional song information. The graphics go
into the “Panel” subfolder and are labeled as followed:
Panel1.png (and for an animation panel2.png, panel3.png and so on).
Há também uma opção para se usar um “Extended Panel” para mostrar informações adicionais. Os graficos vão dentro da
subpasta “Panel” e são rotulas como os seguintes:
Panel1.png (e para a animação panel2.png, panel3.png e assim por diante)
Furthermore an extra hotspot is available here.
Além disso um hotspot extra esta disponivel aqui.
Extended Panel closed:
hotspotex.png = mouse over
hotspotex1.png = mouse down
Extended Panel opened:
hotspotex2.png = mouse over
hotspotex3.png = mouse down
These should be located in the “Hotspot” subfolder.
Estes podem ser colocados em uma subpasta chamada “hotspot”
Ok, backing to our panel! Test the animation and configure the velocity in Animation (ms).
ok, voltando para nosso painel! Teste a animação e configure a velocidade em “Animation (ms)”
“Select elements to show over panel”: Select here only what you want to see when the panel is opened.
Selecione aqui somente o que você quer ver quando o painel estiver aberto.
Draw Cover: I used this option to show the cover in this skin! Configure the size and position!
Draw Cover: Eu usei esta opção para mostrar a capa nesta skin! Configure o tamanho e as posições.
Save your work and close the Skin Editor.
Salve seu trabalho e feche o editor de skins!
Finishing the work
Terminando o trabalho.
Go to skin directory and find the skin.ini. Open it using notepad or a similar editor
Vá para o diretório da skin e procure o Skin.ini. Abra usando o bloco de notas
Find the text [Author] and change this info:
Encontre o texto [AUTHOR] e mude essas informações:
Author= Put your name dude :D Coloque seu nome cara :D
Contact= Put your e-mail or another way to contact you in this line coloque seu e-mail ou outra forma de
contacta-lo nesta linha.
Comments= This line can contain e.g. info for the users or special skin information. Esta linha pode conter por
exemplo, informações para os usuarios ou informações especiais da skin.
Add the Fonts folder to skins root directory and put the necessary font(s) inside!
Adicione a pasta Fonts para o diretório da skin e coloque os arquivos necessários dentro!
Review your skin, searching for bugs or design/position errors!
Revisione sua skin procurando por bugs ou erros de design/posição
Add a preview file to directory skin. Make a square image named preview.jpeg/.png (attention, this is the
only image file which can also be a jpg image!)
Adicione um arquivo de preview no diretório da skin! Faça uma imagem quadrada chamada Preview.jpeg/.png (atenção, este é o
único arquivo que também pode ser uma imagem Jpeg!)
Delete your PSD files around the folders
Delete seus arquivos PSD pelas pastas
Open the Skin Editor again, select the edit tab on the top bar and click on ZIP Current Skin!
Abra novamente o editor de skin, selecione a tab edit na barra superior e clique em ZUP Current Skin!
Congrats man, you finished your skin! :D
Parabéns cara, você terminou sua skin :D
Closing remarks
Observações finais
This tutorial is meant as a help to create your own skins! Maybe my style can be hard for you to
understand, but I tried my best. Below I have left some hints for you, to improve your skins.
Este tutorial pretente ser uma ajuda para criar suas proprias skin! Talvez meu estilo seja difícil de você entender, mas eu tentei
meu melhor. Aqui vou deixar algumas dicas para melhorar suas skins!
Make the Mockups before you start! It makes the skinning process a lot faster, if you have a finished
design you can work with.

 Faças as Mockups (projetos) antes de começar! Isso faz o processo de criação ser muito rapido, se você tiver um design pronto
você pode trabalhar com ele.

Always search for new skins, impressions, new designs and also new techniques.
 Sempre procure por novas skins, impressões, novos designs e também por novas técnicas

Try to be innovative!
 Tente ser inovador!

Always read the ReadMe files and Help screens!
 Sempre leia os arquivos ReadMe e as janelas de ajuda!
----------------------------------------------------------------------------------------------------------------------------------------I used the “How to make a skin” thread from the official CAD forum as a reference for many parts of this
tutorial, and CAD’s help file (written by Carlos)!
http://www.cdartdisplay.com
My works are located here:
http://www.burnsplayguitar.deviantart.com
Big thanks to my friend Giuseppe (BarberioX), that helped me with this tutorial! You can see his works at:
http://www.barberiox.deviantart.com
You can download the example skins by OtisBee at:
http://www.otisbee.deviantart.com