Como criar Skin - Neoncube

Olá pessoal, aqui ta um pequeno tutorial, feito por mim, sobre como cria skins para neoncube....

Bom, vamos la.
*****************************************************************
Primeiramente, vejam abaixo os skins que criei =)



**************************************************************************************************************





O que é necessario?

Para criar o seu skin...

*Photoshop ou Macromedia Fireworks 8 (Eu usei photoshop)
*Bloco de notas
*E paciencia

ATENÇÃO:
TODAS AS IMAGENS DEVEM SER SALVAS EM BMP!
*******************************************************************
Começando

Vá file/new ou se preferir ctrl + n (no meu caso, o photoshop cs3) e crie uma imagem de 500 x 500 como mostra a imagem abaixo.



Agora começa a parte divertida (e livre tbm, vc é livre para criar)

Aqui vc será livre para criar a imagem que quiser, o autopatch que quiser, mas para facilitar, irei usar de exemplo o primeiro skin cujo o qual eu selecionei um wallpaper e o redimensionei para 498 x 498 e coloquei pequenas bordas em 2 x 500.

Após vc desenhar todo o seu autopatch, é hora de criar os botões...seja livre, crie da melhor forma possivel para vc...desde que seja facil seleciona-los depois.

Os botões que devem ser criados são:

Iniciar (em media 117 x 26, porém seja livre para criar)
Registrar (em media 117 x 26, porém seja livre para criar)
Cancelar (em media 117 x 26, porém seja livre para criar)
Minimizar (em media 18 x 13, porém seja livre para criar)
Fechar (em media 18 x 13, porém seja livre para criar)

Bem, criado os botões (PS: Criem os botões em cima do BG (Background) para vcs terem noção de como ficara no neoncube)

Feito esse trabalho, vamos selecionar os botões...e anotar informações importantes...PRESTEM BASTANTE ATENÇÃO AGORA!.

Para selecionar os botões e IMPORTA-LOS individualmente, iremos usar uma ferramente chamada de Slice tool...com o slice tool, nos iremos selecionar os botões, porém, antes iremos verificar a posição do botão em X / Y e W / H, como mostra abaixo:



Bom... eu fiz um jeito diferente dos tutoriais mais deu certo então eu copio os botões como na imagem abaixo.

Selecione Rectangular Marquee Tool:


Após escolher a opção Rectangular Marquee Tool, selecione o botão desejado. Ex: Iniciar... selecione por completo como na imagem:


Agora vamos usar o famoso CTRL + C... vá em FILE/NEW aperte enter do geito que está mesmo e aperte apenas CTRL + V e salve em formato .bmp
Faça isso com todos os botões.

Pronto, vc exportou os botões \o/!!!!. No caso do iniciar, salve-o como
startgame


Agora vem a segunda parte... selecione uma segunda cor nos botões para ficar diferente do primeiro...faça o mesmo procedimento de salvar os botões acima,só que dassa vez, salvando como "startgame_hover".

Faça isso com todos os outros botões...veja abaixo o nome que cada um tem que ter.

Iniciar = startgame e startgame_hover
Cancelar = cancel e cancel_hover
Registrar = register e register_hover
Minimizar = minimize e minimize_hover
Close = close e close_hover

Agora vcs devem se perguntar, por que devo criar uma segunda cor para o botão e chama-la de NOME_hover?

Bem pessoal, o neoncube muda as cores dos botões ao passar o mouse, por isso é necessario que vc crie uma segunda cor...MAS NÃO É OBRIGADO...caso vc não queira que o botão não mude de cor, basta salvar o mesmo botão com os dois nomes.


Pronto, acabou de salvar os botões?, agora veja os layers no canto direito, descelecione todos os botões menos o que irá ficar no fundo (background) e salve agora essa imagem ai como BG. (A imagem que me refiro é a que vcs criaram em 500 x 500).

Pronto, seu skin está pronto...agora vem a parte mais chatinha.
Abra o bloco de notas e nele ponha isso

PS: NÃO FECHE O FIREWORKS OU PHOTOSHOP AINDA, VC VAI PRECISAR DELE.

;##############################################################################
;## NEONCUBE - RAGNAROK ONLINE PATCH CLIENT
;##
;## http://openkore.sourceforge.net/neoncube
;## 2005 Ansell "Cliffe" Cruz (Cliffe@xeronhosting.com)
;##
;## This program is free software; you can redistribute it and/or modify
;## it under the terms of the GNU General Public License as published by
;## the Free Software Foundation; either version 2 of the License, or
;## (at your option) any later version.
;##
;## This program is distributed in the hope that it will be useful,
;## but WITHOUT ANY WARRANTY; without even the implied warranty of
;## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
;## GNU General Public License for more details.
;##
;## You should have received a copy of the GNU General Public License
;## along with this program; if not, write to the Free Software
;## Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
;##
;###############################################################################

; neoncube.style
; configure the appearance of controls of the patch client.

; xcoord = X coordinate of a control
; ycoord = Y coordinate of a control
; width = width of a control
; height = height of a control

;minimize button
[minimize]
xcoord=20
ycoord=2
width=19
height=16

;close button
[close]
xcoord=2
ycoord=2
width=19
height=16

;start game button
[startgame]
xcoord=377
ycoord=19
width=37
height=163

;register button
[register]
xcoord=420
ycoord=19
width=37
height=163

;cancel button
[cancel]
xcoord=463
ycoord=19
width=37
height=163

;notice (browser) window
[notice]
xcoord=35
ycoord=269
width=440
height=146

;frame window
[frame]
xcoord=35
ycoord=424
width=440
height=40

;Status message
[text]
xcoord=35
ycoord=424
width=440
height=40

Agora vamos configurar esses valores ok?, abaixo vai o que cada um representa e como deve ser configurado.

;minimize button (botão minimizar)
[minimize]
xcoord=20 (selecione a coordenada em que seu botão esta, basta selecionar o botão pelo slice tool e clicar nele. Essa é a coordenada X)

ycoord=2 (selecione a coordenada em que seu botão esta, basta selecionar o botão pelo slice tool e clicar nele. Essa é a coordenada Y)

width=19 (Selecione o tamanho W de seu botão, basta selecionar o botão pelo slice tool e clicar nele)
height=16 (Selecione o tamanho H de seu botão, basta selecionar o botão pelo slice tool e clicar nele)


Feito isso repita o procedimento IGUALMENTE para os seguintes.

;close button
[close]
xcoord=2
ycoord=2
width=19
height=16

;start game button
[startgame]
xcoord=377
ycoord=19
width=37
height=163

;register button
[register]
xcoord=420
ycoord=19
width=37
height=163

;cancel button
[cancel]
xcoord=463
ycoord=19
width=37
height=163


Agora essa parte é um porre!!!...mas tenham paciencia

;notice (browser) window
[notice]xcoord=35
ycoord=269
width=440
height=146

Esse notice browser é aquela famosa janelinha aonde aparece as nossas noticias sabe?...bem, vcs vao seguir o mesmo procedimento acima. Para terem uma ideia de um tamanho e posição legal que se adapte ao seu skin, basta desenhar um quadrado no photoshop, em cima do seu BG e veja em que lugar fica melhor. Pegue os dados de posição e tamanho, e preencha de acordo com o que ficou

;frame window
[frame]xcoord=35
ycoord=424
width=440
height=40

Essa daqui é outra coisa chata, esta é a fomasa FRAME WINDOW (Sabe aquela janelinha que mostra o texto de status? é ela xD)

Faça o mesmo procedimento utilizado no "NOTICE WINDOW"

;Status message
[text]xcoord=35
ycoord=424
width=440
height=40

Preencha igualmente ao FRAME WINDOW

Bom pessoal, se vcs quiserem tbm aquela barrinha azul de progresso, basta adicionar esta linha antes de Status Messenger

;progress bar
[progressbar]xcoord=30
ycoord=410
width=440
height=15
style=1

E fazer o mesmo procedimento no photoshop, desenhando uma barrinha e ver aonde fica melhor;


Terminou no bloco de notas? Otimo! =)...agora salve isso como neoncube.style.

Para salvar .style basta quando for salvar no bloco de notas, na parte em que fala "Salvar como tipo", vc selecionar "todos os arquivos".

Coloque tudo em uma pasta (imagen e arquivo .style) e coloque o nome dasta paste como, por exemplo, meuskin.

E pronto, seu skin ta prontinho.

Parece ser dificil de começo, mas nem é, quando vcs pegam o jeito, fazem skins em até 15 minutinhos smile.gif .


Espero ter ajudado.

by: ERo-SeNin ~

Belo tutorial , ajudou bastante e tirou algumas duvidas minhas.

Obrigado.

Att , Line ~