[Tutorial] A arte do pontinho - Outline 1.01

[Insaend 155]

Ola Xtibia, hoje vamos ver Outline de itens.

1.01 - Vamos iniciar nosso Tutorial de Outline.

A outline e também chamada de line Arte, a linha que define o desenho. Podemos dizer então que e o rabisco; porque sempre que um spriting e feito ela some ou então e substituída pelos tons (cores) do desenho(sprite). No nosso caso ela e mais como a linha que define o que e o que: onde e desenho, onde e cenário onde e outfit, etc. No tibia temos como itens que contem a outline fixa os Itens (Armaduras, itens Other, itens que podem ser carregados, etc...) a outline e primordial no item e aconselho que a deixem no resultado final menos a outline interno que sempre deve ser removido e trocado por cores menos luminosas para diferenciar e poder ter uma compreensão melhor do Item.

Temos como dever entender que a outline e a parte final de um item, onde ele deixa de ser o item. Então sabemos que ele não deve ter defeitos e se tiver tentem corrigi-lo com o passar do tempo e trabalhando na sprite em questão.

 

Passo um:

Tipo e Tamanho da imagem:

O tibia e outros jogos do mesmo gênero utilizam o sprite como sua forma gráfica salvando ele em aquivos de extensão .BMP ou .PNG. Em outros projetos podem ser feitos com outros formatos porem vamos explora sempre essas duas formas de salvar com seu editores de imagem. Aconselho que usem o Paint. Se já tiver experiencia para com outros programas usem não e proibido. ( gargalhada )
Tamanho da Imagem deve sempre ser salva de 32.32 x1, x2, x3 e por ai vai. Entenda que x1 e o mesmo que 32.32 e x2 mesmo que 64.64 x3 e o mesmo que 96.96. salve-os sempre com o máximo de qualidade.

Topo: (.BMP ou .PNG)
Tamanho: (32.32/64.64/96.96) sempre seguindo essa conclusão!


 

Passo dois:

 

A outline sempre e bom começar com o Pixel de tom preto, porque só iremos alterá-la para poder trabalhar melhor suas curvas e suavizá-la.
Exemplos:

2: A imagem foi feita bruscamente como uma faca porem não esta correta pois a ponta dela tem que ser suavizada.

3: Apos termos modificado a imagem (Sprite Outline) para ficar mas agradável mostrando que a um corte melhor em sua ponta podemos novamente estudar se ela esta adequada. Notamos porem que sua guarda esta muito grossa e sua parte de cima também. Podemos diminuir ou deixar assim para trabalhara mesma.

4: Eu optei para que foce diminuído em um todo pois itens pequenos não devem se mostra grande em uma sprite!

A parte de impacto da primeira imagem danificaria o corte da mesma ou ate mesmo toda a faca.
A parte de impacto da segunda já suavizaria mais e aumentaria sua area de lesão sendo assim mais benéfica para seu usuário.
 

Em todo caso o acerto da Outline pode ser primordial para um bom trabalho. Ate que coisa simples sejam realmente facies de serem feitas em outline e de serem terminas como uma sprite e seus procedimentos, eu peço que não tentem fazer detalhes complicados de se fazer pois a riqueza de uma Sprite (desenho) esta em passar para a pessoa que veja a riqueza de uma imaginação produtiva e não um desenho feio com defeitos!
 

Evitando uma Outline Cerrilhada e com defeitos aparente.

01  02 03 

 

Sempre a procura de uma boa qualidade em seus rascunho de Sprite (outline), procure melhora-la sem medo de modificar.
 

 

Espero que tenham gostado da primeira aula do tema Item ( A arte do Pontinho - 1.01 Outline )

 

Vamos brincar de fazer Outline, bem galera eu agora peço que vocês façam outline de item detalhe vamos tentar não fazer anda em perspectiva pois ainda vamos chegar la e isso só veremos no segundo modulo de nossas aulas, peço que aguardem ate a hora de os fazermos.

1: Façam um Sprite dentro de 32.32 com curvas suaves pode ser uma lamina Imagem a cima 01 de faca, pode ser também uma lamina mais complicada tau como a do machado imagem 02 a cima e a mais complicada de todas em meu ponto de vista uma lamina com varias acentuações leves (imagem não disponível) modelo a baixo!

 

 

PS: se não derem conta ou derem postem para que possamos corrigir aqui no tópico suas Outline. Usaremos elas no próximo tutorial para fazemos a Iluminação e sombreamento.

ATT Insaend

A arte do pontinho - Sumario

A arte do pontinho - Iluminação/Sombreamento - 1.02

 

Editado Junho 10, 2017 por Insaend
Correção ortográfica e remodelação para continuação das tutorias, e atualização de Imagens de link quebrados.

[PsyMcKenzie 150]

Top mano, gostei muito do tutorial.

Continue assim.

Parabéns! REP+

[Roksas 846]

Muito bom Insaend, ótimo Tutorial, vou dar umas estudadas nos seus tutos, haha. Obrigado por trazer o conteúdo!

[PostadorHunter 99]

simplesmente épico

[dalvorsn 268]

Muito bom o tutorial.

Estarei seguindos as aulas.

 

Ps.: não ria ok?! kk

 

 

Eu queria ter feito ela mais curva atrás, mas nem consegui '-'

[Insaend 155]

Muito bom o tutorial.

Estarei seguindos as aulas.

 

Ps.: não ria ok?! kk

 

 

Eu queria ter feito ela mais curva atrás, mas nem consegui '-'

 

Onde você salvou sua sprite deve ter transformado em jpg tome cuidado.

sua sprite a lamina esta bem feita porem o efeito de dente vc pode fazer quando estiver pintando.

A guarda esta mais o menos porem o cabo esta muito curto tente aumentar mais.

 

Edit:

 

 

Veja se fico a gosto? agora tente vc!

[Gears 109]

Meu 1°o sombreamento O,o

 

Ps : usei a outline do tópico msm

 

Editado Abril 8, 2013 por Gears

[dalvorsn 268]

Muito bom o tutorial.

Estarei seguindos as aulas.

 

Ps.: não ria ok?! kk

 

 

Eu queria ter feito ela mais curva atrás, mas nem consegui '-'

 

Onde você salvou sua sprite deve ter transformado em jpg tome cuidado.

sua sprite a lamina esta bem feita porem o efeito de dente vc pode fazer quando estiver pintando.

A guarda esta mais o menos porem o cabo esta muito curto tente aumentar mais.

 

Edit:

 

 

Veja se fico a gosto? agora tente vc!

 

Hmm, copyded

 

To salvando em png normal, é que o paint que to usando é o do windows 7, é mo bosta mesmo '-'

enfim, tentei fazer o que tu disse, ve se ta melhor

[Insaend 155]

E isso aii agora vamos espera o próximo tuto para por Iluminação e Sombreamento.

 

Se qzer postar outros tipos como foi dito nos exemplos para melhora ainda mais a q ja tem e outras q viram fique a vontade que sempre que puder ajudo!

[kaiotp 42]

Parabens pelo topico

[HesLife 0]

muito bom, espero outros tutoriais =D to precisando aprender um pouco mais sobre

[Nu77 81]

Fica ai minha espadinha!

 

 

Com Textura ( To precisando de umas aula disso, '-' )

 

 

Se quiser dar uma avaliada ai no que eu preciso melhorar ( sei que é muito ) vai me ajudar bastante!!

[Insaend 155]

Fica ai minha espadinha!

 

 

Se quiser dar uma avaliada ai no que eu preciso melhorar ( sei que é muito ) vai me ajudar bastante!!

 

Obs: Removi a pintada do "Quote" para não distorce oque o tópico nos pede ok.

 

Bom sua sword esta bom principalmente o cabo gostei muito do cabo. Sua guarda ao ser pintada vai ficar ótima só que temos um erro...

 

A lamina fica menor antes de se juntar a guarda isso e errado pois em um choque de espadas ali ficar retido todo o impacto e não na guarda danificando ela muito no final das contas.

 

Edit:

[Gorenn 6]

Aê man , muito bom melhor spriter , sempre querendo ajudar tbn !!

 

Tentei fzr os 2 :

 

 

 

No estilo que você falou , vou tentar fzr uma espada também !! Valeu man , espero que continue com os tutoriais e as "tarefas"

 

Essa é de uma sprite minha :

 

 

Uma duvida , na proxima arte dos pontinhos iremos usar essas sprites na textura ?

Editado Abril 9, 2013 por Gorenn

[Insaend 155]

Pergunta para com a Arte do Pontinho:

 

Sim e não pois ate estamos trabalhando a iluminação e Sombreamento você já estarão melhores e com novas sprites para que possamos continuar essa brincadeira né. ( assim eu espero )

 

Então vamos as sprites!

 

 

As de baixa são as minhas.

Machado tente suavizar a lamina tanto para o corte quanto para dizer que ele e imponente o cabo mais fino te da mais impressão que o machado e maior!

Faca sua fico boa Gostei ^^ só mexi um poco para mostra outro ponto de vista.

Flecha as flechas não e muito benéfico ter uma lamina grande (ponta da flecha) e também suas penas para equilibrio.

 

............. Mais?

 

 

 

PS: As sprites que eu faço para com os tutorias e Edites que vou fazendo, peço que todos os usuários deixem eu doar os edites que eu faço nas sprites de você para o projeto do Xtibia sendo assim Livre Uso. ok!

Qualquer problema por favor digam nos tópicos que não querem que as usem!

Editado Abril 10, 2013 por Insaend