Procurar
Últimos assuntos
Entrar
Top dos mais postadores
Dark Maker | ||||
KLNMaker | ||||
andre masterx | ||||
Relodo | ||||
Nara Hayama | ||||
Markituh | ||||
L0l-King | ||||
mystery_boy_maker | ||||
Thiago_o_programador | ||||
Rincewind |
[Tutorial]Pixel Tutoriais
Página 1 de 1
[Tutorial]Pixel Tutoriais
Autor: Nedson
Aula 1:
Aula 2:
Aula 3:
Fim:
Até!
Aula 1:
- Spoiler:
- Ok pediram e eu acedi e portanto fica aqui o meu simples tutorial sobre Pixel Art. Espero que não fiquem desapontados visto os meus conhecimentos ainda serem muito básicos e a própria arte de trabalhar com pixeis é algo que tem mais de treino do que de aprendizagem tradicional mas vamos lá aos básicos…
Ponto 1: O que é?
Antes de mais para saber fazer Pixel Art é obviamente necessário saber o que é este tipo de arte. De forma muito simplista podemos definir Pixel Art como “o tipo de arte que envolve editar imagens digitais Pixel a Pixel” mas obviamente para tal precisamos de saber o que é um Pixel. Nada mais simples. Um Pixel é a unidade mais pequena que um monitor (não necessariamente mas regra geral) de computador consegue exibir.
E está assim definida a Pixel Art no entanto os mais atentos já notaram o facto do titulo do tutorial ser Pixel Art Isométrica e não meramente Pixel Art. Porquê? Porque este é o tipo de Pixel Art que sei e que pessoalmente sempre achei mais agradável visto proporcionar um ângulo bem fixo sobre o qual visualizamos a cena o que permite imensas aplicações praticas desde RTSs a RPGs. Sim pois foi na industria primordial dos videojogos que este tipo de arte cresceu e floresceu.
Devido á falta de meios técnicos nos computadores da altura (386 anyone?) os produtores de jogos viam-se forçados a recorrer a gráficos de baixa resolução e de entre estes o Pixel Art isométrico é conhecido por abranger uma panóplia de estilos desde o pseudo foto realista ao pseudo cartoon mas mais á frente explico como atingir estes aspectos quando referenciar a forma de colorir em Pixel Art mas agora passemos ao trabalho!
Ponto 2: Os básicos
Antes de mais nada vamos aos básicos: O que é perspectiva Isométrica? Perspectiva isométrica é aquela em que ambos os lados da imagem fazem um ângulo de 30º com o observador que está colocado no centro do papel (neste caso ecrã) … No entanto no computador não é possível fazer um ângulo de 30º usando pixeis logo temos de usar um ângulo aproximado de aproximadamente 26º/27º. Não vou entrar em grandes pormenores matemático-trigonométricos agora, para isso deixarei alguns links no final, portanto vamos avançar e passar ás ferramentas que vamos precisar…
Antes de mais nada não pensem que vão ter de gastar rios de dinheiro (ou de consumos) para obter as ferramentas necessárias visto que estas são as mais básicas possíveis e portanto abram o vosso menu iniciar e arranquem o Paint! Sim leram bem, apenas precisam do Paint (ou equivalente Linux/Mac) para fazer belos trabalhos de Pixel Art, simples não? Claro que eu pessoalmente recomendo que usem uma ferramenta que suporte Layers como é o caso do Photoshop ou do seu equivalente gratuito GIMP pois assim terão um controlo muito mais individualizado das várias partes do vosso trabalho. Outra falha do Paint é a conversão para outros formatos portanto se o querem usar assegurem-se que obtêm uma ferramenta de qualidade para fazer a conversão de BMP para PNG/GIF/JPG/etc.…
Eu pessoalmente uso o Photoshop e crio cada parte das minhas imagens individualmente. Tomando como exemplo o PixProject primeiro crio a rua, depois faço um quadrado que será o quarteirão onde vai encaixar o edifício e por fim crio o edifício num ficheiro á parte que mais tarde coloco de novo no ficheiro principal substituindo o quadrado que ocupava o local do quarteirão… Assim posso facilmente usar um esquema estilo “Lego” para construir a minha imagem sem ficar desorientado nem me preocupar com a existência de um curto numero de undos quando me engano (lembrem-se que cada pixel vai corresponder a um undo logo gravem sempre que terminam uma secção por mais insignificante que esta pareça).
E agora que terminamos estes básicos e já sabem o que vão fazer e com que aplicação vamos fazer os nossos primeiros rabiscos…
Aula 2:
- Spoiler:
- Ok vamos então passar á acção propriamente dita depois de eu tanto falar e vamos fazer a nossa primeira linha. O conceito da linha em Pixel Art Isométrico é muito simples: 1 para cima, 2 para o lado. Já vão perceber como isto se concretiza.
Vamos então abrir o Paint e fazemos: Ver –> Zoom –> Personalizar e escolhemos 800%
Sugiro que usem uma imagem pequena (entre 100×100px e 200×200px) para começar e preparem-se para fazer a primeira linha. Como já disse: 1 pixel para cima, 2 pixeis para o lado. Devem obter algo como isto:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
A partir de agora todas as linhas rectas que queiram fazer em Pixel Art serão feitas assim mas como podem ver isto é relativamente simples portanto vamos andar para a frente e fazer um pequeno quadrado, comece por adicionar mais um lado:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E pronto temos um quadrado feito, se quiserem façam ver –> zoom –> tamanho normal para ver como fica um pequeno quadrado em perspectiva.
Nesta altura uma boa sugestão seria copiar esta imagem variadas vezes e elaborar uma pequena grelha semelhante a um tabuleiro de xadrez sobre onde efectuaram os vossos trabalhos. Não é fácil faze-lo no Paint, regra geral é necessário efectuar as novas linhas á mão em vez de copiar portanto sugiro que se querem levar isto a sério usem software mais profissional como o GIMP.
Mas avançando, um quadrado não é muito útil: queremos cubos. Então vamos aproveitar este quadrado já feito para completar o cubo (eu não faço assim habitualmente mas sim começando de baixo para cima mas o facto é que rapidamente podem ficar confusos com o que estão a fazer dessa forma):[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Tenham atenção pois as 3 arestas verticais visíveis têm EXACTAMENTE o mesmo tamanho por isso contem os pixeis (quadriculas) e assegurem-se que os têm em exactamente o mesmo numero ou acabaram por obter um cubo estranho. Notem também os locais onde as 3 arestas se encontram com o quadrado do topo, é importante que definam desta forma se planeiam usar uma iluminação igual á minha mas falarei disso mais tarde, para já limitem-se a seguir-me.
Vamos então completar o nosso cubo, calculo que agora sabem como o fazer portanto vamos a isso:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E cá está o nosso cubo completo vamos passar á próxima fase.
Aula 3:
- Spoiler:
- Ok agora que já sabem fazer um pequeno cubo porque não passarmos ás pirâmides?
Para começar vamos ter de saber fazer linhas diagonais nesta perspectiva e aqui as coisas começam a ficar um pouco mais complicadas, não tanto como as esferas ou os círculos mas mais complexo do que um simples cubo…
Vamos começar por uma pirâmide quadrangular, a partir de agora vou pedir-vos que examinem as imagens uma vez que se torna demasiado extenso explicar passo a passo estes sólidos.
Pirâmides:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Esta parte vou deixar em aberto para aprenderem sozinhos visto eu próprio ainda não estar muito á vontade no assunto também. Deixarei links que vos serão úteis no fim do tutorial.
Ponto 5: Cor
Finalmente vamos dar cor á nossa criação: o cubo. Como disse antes primeiro vão precisar de descobrir a vossa fonte de iluminação. A minha por exemplo é regra geral da direita para a esquerda ou seja do lado direito está o meu sol imaginário e do lado esquerdo estão as minhas sombras imaginárias mas podem facilmente fazer o oposto…
Já que falamos em sombras deixo aqui uma pequena nota: criar sombreados em Pixel Art usando o Paint é deveras uma tortura tal como criar vidros e superfícies de água e a razão é simples: o efeito de estar á sombra/ do outro lado de um vidro/debaixo de água é apenas aplicar um tom mais escuro/azulado á imagem o que significa que terão de cuidadosamente escolher as cores “azuladas” do original que querem sombrear portanto, e se como eu decidirem usar um esquema cartoon, sugiro que esqueçam completamente as sombras e usem apenas os sombreados que vou de seguida enunciar.
Voltando ao nosso cubo e agora que temos o nosso sol sabemos que o lado mais iluminado obviamente será o que está mais exposto ao sol e neste caso será o topo da imagem, seguido do lado direito, seguido do lado esquerdo que será o mais escuro. Vejam o meu exemplo de duas formas distintas, a primeira com um rebordo negro e a segunda sem o mesmo rebordo procurando aumentar a sensação de realismo:[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Como podem observar o cubo do lado direito tem um aspecto muito mais realista do que o do lado esquerdo que poderíamos até apelidar de cartoon. Eu pessoalmente gosto de comparar com tecnologias modernas e defini-los como Cel-Shaded VS Anti-Alised. Notem também como a face mais iluminada é a superior seguida da direita e por fim temos a da esquerda que está na penumbra, isto dá a sensação de que existe uma verdadeira iluminação e sem ela as vossas imagens vão sempre parecer meio esborrachadas.
Um erro muito comum e que devo desde já avisar é que muita gente tem tendência a usar cores puras ou seja cores que apenas dispõem de apenas 1 cor primaria (verde, azul ou vermelho são as 3 cores primarias do espectro solar, não confundir com as cores primarias das tintas), isto é um gravíssimo erro pois resulta em cores berrantes que tornam a imagem desagradável á vista. Para corrigir isto no Paint é extremamente simples: dividam a paleta de cores em 3 e não a divisão que fica no meio.
Para conseguir os gradientes das cores no Paint simplesmente cliquem duas vezes nas vossas cores, escolham “Definir Cores Personalizadas” na janela que surge e usem a barra do lado direito da nova secção da janela subindo-a para clarear e descendo-a para escurecer. Nada mais simples.
Fim:
- Spoiler:
- E pronto assim chego ao fim do meu breve tutorial, não é deveras complexo e serve apenas como iniciação e com isto tudo já devem ter perdido pelo menos meia horita a aprender o básico dos básicos em Pixel Art e estranhamente praticamente tudo o que sei. Sim é muito pouco mas pouco é preciso para fazer coisas engraçadas usando este tipo de desenho, o que é preciso é paciência e saber ler tutorials mais avançados do que o meu.
E já que falamos em tutorials aproveito para deixar aqui 2 que eu considerei essenciais para a minha aprendizagem. Neles podem encontrar dicas para criarem esferas, círculos, texturas, “pessoas”, entre muita outra informação útil a qualquer pessoa que queira entrar neste mundo em tempos tão grande quanto a industria dos videojogos e agora abandonado em torno da modelação 3D:
º-- The Complete Guide To Isometric Pixel Art
º-- zoggles.co.uk - Isometric Graphics
Como ultima nota aviso que obviamente todas as minhas imagens aqui colocadas estão ampliadas a 800% e que usei o Paint para desenvolver todo o tutorial apesar de não o utilizar para os meus trabalhos nem o recomendar. Para um trabalho constante recomendo que obtenham o Photoshop ou o seu “equivalente” gratuito GIMP. Fiquem então com 2 links onde podem encontrar mais informação sobre estes dois programas e bom trabalho, divirtam-se com a
Até!
Dark Maker- Administrador
- Barra dos usuarios :
Barra de Controle :
Mensagens : 127
Reputação : 3
Data de inscrição : 06/03/2010
Idade : 26
Localização : São Paulo
Tópicos semelhantes
» [Tutorial]A Arte do Pixel
» [Tutorial]Tutorial basicão do maker Vx!
» [Tutorial]Tutorial para Iniciantes para 2003
» [Tutorial]Dicionário GM
» [Tutorial]FAQ do RPG Maker XP
» [Tutorial]Tutorial basicão do maker Vx!
» [Tutorial]Tutorial para Iniciantes para 2003
» [Tutorial]Dicionário GM
» [Tutorial]FAQ do RPG Maker XP
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Sáb Fev 25, 2012 4:19 pm por Ferri
» Char Set de Star wars
Dom Fev 05, 2012 12:39 am por carlosulysses
» Olá!!!!!!!!!!!!!!!!
Dom Jan 15, 2012 10:36 pm por ReidoVX
» Olá eu Sou o Rafael
Sex Jan 06, 2012 8:27 pm por modeski
» Criando um Jogo Básico no Game Maker.
Dom Jan 01, 2012 4:59 pm por gabriel188
» ajuda com evente de tiro
Sex Dez 23, 2011 9:37 pm por cledson2010
» Olá pessoal
Ter Dez 20, 2011 7:31 pm por cledson2010
» Sistema RMVX - FPS
Qua Dez 14, 2011 4:00 pm por nunesvinicius52
» ___Duvida ___[GM]
Seg Out 17, 2011 9:57 am por trfn