Ir para conteúdo
Faça parte da equipe! (2024) ×
Conheça nossa Beta Zone! Novas áreas a caminho! ×

  • Quem está por aqui   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.

[Tutorial] Criando Skin Para Neoncube

fenixmaia

Por ,
em Rag - Tutoriais

 Compartilhar

Posts Recomendados

Novato

fenixmaia 3

Postado
Postado

Olá pessoal da comunidade eAthena, bem, sou novo na comunidade, tanto

na do eAthena, como na comunidade do Ragnarök em si, e graças ao

eAthena eu tenho aprendido a cada dia que se passa, e agora, chegou a

hora de eu retribuir com um pequeno tutorial, feito por mim hehe, sobre

como cria skins para neoncube, desculpe-me se algum tutorial do genero já foi postado.

 

Bom, vamos la.

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

Primeiramente, vejam abaixo os skins que criei =)

 

Elemental Wiz

(IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

E esse é o skin do meu servidor, o ragnanagels...

Ragnangels Official

 

(IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

 

Se quiserem baixar meus skins, fiquem avontade (IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

ELEMENTAL WIZ:

RapidShare Webhosting + Webspace

 

RAGNANGELS OFFICIAL:

RapidShare Webhosting + Webspace

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

Gostaram? hehehe, sei que eu fui meio relaxado no do wiz, mas bem, vamos la.

 

 

O que é necessario?

 

Para criar o seu skin...

 

Photoshop ou Macromedia Fireworks 8 (Eu usei fireworks) (baixe gratuitamente a versão trial no site da macromedia

É necessário se cadastrar para acessar o conteúdo.

Bloco de notas

E paciencia (IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

ATENÇÃO:

TODAS AS IMAGENS DEVEM SER SALVAS EM BMP!

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

Começando

 

Abra o seu editor de imagens (no meu caso, o fireworks) e crie uma imagem de 500 x 500 como mostra a imagem abaixo.

 

(IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

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 o exemplo do patch "Elemental Wiz", 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 depos (IMG:

É necessário se cadastrar para acessar o conteúdo.
) .

 

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 (IMG:

É necessário se cadastrar para acessar o conteúdo.
) )

 

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 e Y, como mostra abaixo:

 

(IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

DICA: W e H mostram o tamanho da imagem, basta selecionar o mesmo tamanho no slice (IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

Visto o tamanho de seu botão, basta agora selecionar a ferramenta slice tool e selecionar o botão (IMG:

É necessário se cadastrar para acessar o conteúdo.
) . Selecione do mesmo tamanho e posição da sua imagem, caso contrario, ira dar erro (IMG:
É necessário se cadastrar para acessar o conteúdo.
) ...veja abaixo:

 

(IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

Agora selecione o slice (clique nele (IMG:

É necessário se cadastrar para acessar o conteúdo.
) e clique novamente com o botão direito do mouse e selecione "Exporte Selected Slice"

 

(IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

Pronto, vc exportou um botão \o/!!!!. No caso do iniciar, salve-o como

startgame

 

 

Agora vem a segunda parte...tire o slice de cima do botão (isso é facil, só pegar com o mouse e arrastar (IMG:

É necessário se cadastrar para acessar o conteúdo.
) ) e selecione uma segunda cor no botão (IMG:
É necessário se cadastrar para acessar o conteúdo.
)

...coloque o slice em cima novamente, seguindo a regra do X e Y e faça

o mesmo procedimento, 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 (IMG:

É necessário se cadastrar para acessar o conteúdo.
) .

 

 

Pronto,

acabou de importar os botões?, agora tire o slice dai, e salve agora

essa imagem ai como BG. (A imagem que me refiro é a que vcs criaram em

500 x 500 (IMG:

É necessário se cadastrar para acessar o conteúdo.
) ).

 

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

;##

;##

É necessário se cadastrar para acessar o conteúdo.

;## © 2005 Ansell "Cliffe" Cruz ([email protected])

;##

;## 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, faça isso olhando no fireworks (IMG:

É necessário se cadastrar para acessar o conteúdo.
) . Perto do tamanho da imagem. Essa é a coordenada X)

 

ycoord=2 (selecione a coordenada em que seu botão esta, faça isso olhando no fireworks (IMG:

É necessário se cadastrar para acessar o conteúdo.
) . Perto do tamanho da imagem. Essa é a coordenada Y)

 

width=19 (Selecione o tamanho W de seu botão, basta olhar no fireworks (IMG:

É necessário se cadastrar para acessar o conteúdo.
)

height=16 (Selecione o tamanho H de seu botão, basta olhar no fireworks (IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

 

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 fireworks, 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 (IMG:

É necessário se cadastrar para acessar o conteúdo.
)

 

 

;frame window

[frame]xcoord=35

ycoord=424

width=440

height=40

 

Essa daqui é outra coisa chata (IMG:

É necessário se cadastrar para acessar o conteúdo.
) , 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 fireworks, desenhando uma barrinha e ver aonde fica melhor (IMG:

É necessário se cadastrar para acessar o conteúdo.
) .

 

 

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 (IMG:

É necessário se cadastrar para acessar o conteúdo.
) .

 

 

Espero ter ajudado vocês.

Um grande abraço

 

Renato Von SS

 

 

By insane.br

ﾠﾠMural de Coleçõesﾠﾠ

Clique aqui e adquira suas medalhas
Link para o comentário
Compartilhar em outros sites
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos
×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.

 Accept Cookies  Reject Cookies