Administrador

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Tópico movido para Lixeira Pública por conter link offline.

Alguns membros haviam me pedido algo referente ao AA, se alguém se interessar em postar seus resultados, à vontade. Por quê um Tutorial em imagem? Acho mais prático. Base:

ANATOMIA HUMANA O corpo humano, como no corpo de todos os animais, consiste de sistemas, esses quais nôs humanos, somos constituídos de: 1.Cabeça e pescoço 2.Membro superior: Mão, antebraço, braço, ombro, axila e região peitoral. 3.Abdômen 3.Costas 5.Membro inferior: Coxa, perna e pé. Tendo em mente que o sprite precisa de todas essas partes, vamos lá: Cabeça e pescoço: É preciso definir o rosto, colocando feições humanas. O pescoço pode ser representado com um pequeno espaço abaixo do rosto. Membro superior: Mão, antebraço, braço, ombro, axila e região peitoral: É muito importante que cada parte seja feita e principalmente visível. E sempre em proporções similares (nunca peitoral ou braço mais fortes que outras areas). É representada pelo volume, por isso as bordas e areas mais claras. Obs: Os braços vem de encontro a um centro pré determinado abaixo da cintura dependendo da posição. Abdômen Só precisa representar os musculos da barriga/umbigo com volume. Mas cuidado, devido ao pouco espaço, é preciso muito cuidado aonde vai por os pixels (como qualquer area com pouco espaço). Membro inferior: Coxa, perna e pé. Por ultimo, porem definitivamente não o menos importante e também a parte que o pessoal mais erra...AS PERNAS! Não é nada extremamente dificil, mas o pessoal acha que ambas as pernas são iguais, é aqui que esta o erro, não são. Ao contrario dos braços as pernas seguem uma direção opostas umas das outras. Enfim, também não esqueça o basico: Créditos: Ethebeur

CONTRASTE, LUZ, SOMBRA E PILLOW-SHADING! Contraste é a diferença entre duais coisas. Quanto mais uma coisa é diferente da outra, maior é o contraste entre elas. Na figura abaixo, estamos analisando o lado ESQUERDO (em azul) e o lado DIREITO (em vermelho) do nosso "sprite" que está no meio. Conforme vamos adicionando LUZ no lado ESQUERDO e adicionando SOMBRA no lado DIREITO, vamos aumentando a diferença entre os lados. Isso significa que estamos AUMENTANDO o contraste entre eles Existe luz...luz média e sombra. Mas existe também um pouco de reflexo que ilumina parte da sombra. Por exemplo: I - Luz forte II Luz média III - Sombra IV - Reflexo Perceba que a cor do reflexo é um pouco mais clara que a cor da sombra. Como se fosse uma luz baixa, na sombra. Quanto ao Pillow-Shading: Quando acontece o Pillow-Shading? * Quando você usa pouco contraste entre a sombra e aluz. * Quando você suaviza demais as cores com AA (AA serve pra diminuir o contraste) * Quando você usa uma cor dentro da outra em progressão de luminosidade (branco dentro do cinza claro, centro do cinza escuro, dentro do preto - Como na terceira ombreira) Prefira... * Trabalhar com reflexos * Usar só UMA camada de AA (só um pixel entre cores que tem contraste alto entre elas) * Não usar AA em todas as " bordas" de uma "mancha" de cor, para suavizar ela com o fundo. Use apenas em lugares que o contraste é extremamente alto ex: Quinas e cantos de ombreiras) Créditos: André

MADEIRA Toda a textura no caso da madeira, deve ser bem suave. Logo você precisa usar cores com baixo contraste entre si. Mas que ainda mantenham um nível legal de saturação, do contrário a madeira ficaria cinza demais e parecida petrificada. Analise esta caixa: Foi dividida em 3 partes: + Cima (+ claro) - Cor simbólica "Vermelho" + Frente (normal) - Cor simbólica "Verde" + Lado ( - claro / + escuro) - Cor simbólica "Amarelo" Perceba que existe um contraste LEGAL entre as 3 partes do sprite. E cada parte foi individualmente feita com 3 cores, por causa da textura. A parte de cima por exemplo, teve sua textura feita com 3 cores: + Cima (+ claro) - Cor simbólica "Vermelho" + Frente (normal) - Cor simbólica "Verde" + Lado ( - claro / + escuro) - Cor simbólica "Amarelo" Créditos: André

MAGIAS/SPELLS Fazer suas primeiras magias/spells é sempre um passo importante para um spriter. Poucos são aqueles que se aventuram nesse ramo, visto que é importante ter uma boa noção de perspectiva, cor e animação para alcançar um bom resultado. Este tutorial é uma boa forma que encontrei para treinar cada um de vocês na arte das magias, algo que demorei um bom tempo para aprender mas que agora, será passado a vocês de forma muito mais simples: Toda spell, para ser bem fluida (sem intervalos estranhos ou imperfeições - smooth) precisa ter no mínimo 8 FRAMES. O grande macete é começar com 4 frames, que chamamos de Frames Principais para depois adicionarmos Frames Intermediários. Um dos grandes problemas que enfrentei no começo era o fato de sempre ter que voltar para corrigir frames das spells que fazia. Então minha grande dica para solucionar esse problema é RASCUNHAR SUA SPELL COM COR BRANCA como veremos abaixo: Começamos então com uma animação de 4 frames: -> Levamos em consideração: 1. A spell começa 2. Tem um efeito sobre o personagem/monstro 3. Começa a desaparecer 4. Desaparece.Em seguida adicionamos os Frames Intermediários - Marcados em Vermelho Com isso, chegamos a nossa animação rascunho, que agora está pronta Por fim, nos resta adicionar cor (spells não levam outline), e no final do processo teremos nossa spell pronta: Créditos: André

TEXTURA DE CORRENTES (CHAIN ARMOR) Pensem no seguinte: Uma chain armor é algo parecido com o que vemos na Figura 1. do Esquema abaixo. Esta armor é formada de vários anéis...um dentro do outro. E... Cada anel recebe luz de forma difeente, como é mostrado na Figura 2. É importante perceber que cada anél está perto de - no mínimo - outros três anéis. Isso inclui os anéis que estão nos lados horizontais desse anel, e os que estão nos lados verticasi. Mas cada anel deixa um vão (um espaço) entre os outros anéis que estão perto dele. E esse espaço é mostrado na figura seguinte. Na Figura 3 podemos ver como vamos representar os anéis e toda a sua organização na Chain armor, em PIXELS! Hehe. 1. Primeira linha da Figura 3: Primeiro é preciso saber o quanto de luz um anel recebe. Se ele recebe BASTANTE LUZ, ele também receberá REFLEXO na parte de baixo (como mostrado). E os pixels precisarão demonstrar isso. Por isso a representação de UM ÚNICO ANEL...é feita de DOIS PIXELS, um em cima do outro. O pixel de cima representa a luz e o debaixo representa o reflexo. 2. Segunda linha da Figura 3: Quando vamos colocar este anel perto dos anéis que estão AO LADO dele... nós PRECISAMOS adicionar pixels para representar o VÃO/ESPAÇO entre eles. E essa representação é feita novamente com DOIS PIXELS. Sendo estes pixels mais escuros do que os pixels que representam os anéis (para criar um contraste legal). Isso formará nossa linha horizontal de anéis. 3. Terceira linha da Figura 3: Por fim, quando vamos colocar estes anéis perto dos anéis dispostos verticalmente (os que estão em cima e embaixo) precisamos INTERCALAR as linhas de anéis, para mostrar o efeito desejado de CORRENTE. Quando terminar, você já terá um aspecto de corrente. Bastará agora organizar as cores dos pixels de cima dos anéis para demonstrar quais deles recebem mais ou menos luz. Créditos: André

Criar barras diagonais em paredes 1. Desenhe um quadrado 32x32, com uma diagonal (esse quadrado é pra ser sua parede). 2. Selecione-o e vá em Image > Skew/Stretch (Imagem > Esticar/Alongar em português, creio hehe)... ou aperte CTRL + W para abrir a janela. 3. Na opção Skew (Divisão de baixo da janela), altere a barrinha que diz "Horizontal" de 0 para "-45". Ilustração: Créditos: André

ÁRVORES E ARBUSTOS Passo 1: Desenhe o outline em galhos, sem folhas! Passo 2: Adicione pequenos grupos de folhas nos galhos usando um tom escuro de verde. Passo 3: Adicione folhas por cima das que acabou de adicionar utilizando um tom mais claro de verde (de preferencia faça este segundo grupo de folhas um pouco mais espalhado sobre o primeiro, de modo que se consiga ver que existe um grupo de folhas por baixo - que teoricamente está sombreado pelo grupo de cima, por isso tem menos luz). Passo 4: Adicione mais um grupo de folhas seguindo a mesma metodologia do passo anterior. Deixe espaços para que o observador perceba que existem outras camadas de folhas por baixo (não importa que uma folha cubra a outra que você fez anteriormente, o importante é que percebam os pontos sombreados pelas folhas mais altas da árvore) Exemplo: É muito interessante observar como crescem as folhas na árvore, assim fica mais fácil fazê-la: Quando falamos de arbustos e grupos de folhas a ideia é sempre pensar na sobreposição de folhas. Logo, em meio a duas folhas que recebem muita luz, pode existir uma que recebe menos luz, ou uma que recebe MUITO MENOS luz...pois está a níveis muito abaixo. Veja o exemplo: Algumas árvores possuem copas, ou seja, a regra da iluminação começa de novo: Créditos: André Etchbeuer

Quero fazer sprites, por onde eu começo?!?! Pixel art é sobre os pixels – simples assim. Esses tipos compartilham um ponto comum: Ter certeza que o seu foco está nos pixels. Comece devagar – Quanto mais larga a imagem que você está tentando fazer, mais tempo e trabalho levará pra completá-la. Não faça isso, use um canvas size (largura x altura) pequeno. Um pixel art pode transmitir uma série de informações pelo seu tamanho, você ficará surpreso com o pouco espaço que você precisa se você controlar os pixels corretamente. Use uma paleta limitada - Se você não pode fazer um bom sprite com 4 cores, usar 40 não vai ajudar. Usar uma paleta pequena é especialmente bom para iniciantes porque te força a ter foco na posição dos pixels e da relação entre grupos de pixels. A paleta original de 4 cores do GameBoy é uma boa escolha para iniciantes, porque você só precisa se preocupar com o valor, e não tons ou saturação. Programas Existe uma gama de bons programas por aí para pixel art, muitos desses são gratuitos. Eu uso Grafx2 porque é gratis, mas GraphicsGale, Pro Motion, Photoshop, Pixen e MS Paint são todos boas escolhas. Alguns são mais amigáveis que outros, por isso que eu escolhi algo com atalhos de teclado como grafx2, o que me salvou de muitas viagens para a barra de ferramentas (e fez muito fácil o manuseio de paletas) Tipo de arquivo Um erro comum que os novos pixel artistas cometem é salvar suas artes como JPEG/JPG. Esse tipo de arquivo pode ser legal para outros tipos de imagem, ele causa compressão, o que destrói a qualidade de uma peça de pixel art. Nunca salve como JPG. Salve como PNG ou GIF. Seja cuidadoso assim mesmo, pois alguns programas (como MS Paint) não suportam propriamente o formato GIF, e vão arruinar sua imagem. Nessas instâncias, você vai precisar de um conversor de arquivo (Como o Giffy) se você quiser salvar sua imagem como GIF. Mas como eu começo a imagem? É completamente pessoal. Alguns artistas preferem criar o lineart primeiro, e depois vão adicionando cores: Outros artistas preferem a definição das formas principais com um pincel grosso, e então continuam refinando a imagem até que ela chegue a um nível certo nível: Ambos os métodos são legais, todos dependem de como você está confortável, ou as especificidades do projeto. O Linework é um bom método se você está traçando uma imagem digitalizada (como foi o caso do exemplo do monstro do mar acima). Se você está começando a imagem no seu programa, e não é um sprite pequeno, definir as formas com um pincel grosso pode ser mais útil. Ok, mas o que diabos significa AA, Hue (br?) e os outros termos que são usados? Ok, acomodem-se em suas cadeiras (ou sofás, para aqueles que gostam de utilizar o computador na sala) e vamos nessa: Termos que devemos, ou melhor, precisamos saber! Anti-aliasing (AA): Anti-aliasing é o método de fazer bordas acentuadas parecerem suaves. Você deve estar familiarizado com anti-aliasing, porque um monte de programas e ferramentas faz isso automaticamente. Quando estamos falando sobre pixel art, de qualquer maneira, anti-aliasing significa anti-aliasing MANUAL. Manual AA significa suavizar as áreas acentuadas por posicionamento manual de pixels de uma diferente cor para facilitar a transição. Aqui vai um exemplo: Acima você vê a mesma imagem sem AA na esquerda e com AA, na direita. Há várias armadilhas frequentemente encontradas ao aplicar anti-aliasing, que são discutidas na seção "Coisas para evitar”. Dithering: O Dithering consiste de diferentes padrões de pixels. É tipicamente usado para facilitar a transição entre duas cores, sem adição de uma nova cor à paleta. É também usado para criação de textura. Nos dias de monitores CRT, o dithering foi particularmente útil porque a tela borrava a área pontilhada e obscurecia o padrão. Agora que monitores LC nítidos é a norma, os padrões não são mais fáceis de esconder, o que significa que o dithering não é tão versátil como era antes. Mesmo assim, o dithering ainda é usado. A forma mais comum de dithering que você vê é o 50/50 pontilhado, conhecido como 50% de dithering ou o padrão pontilhado. Como mostrado no exemplo acima, você pode criar vários outros padrões para amortecer ainda mais entre uma cor e um padrão 50% pontilhado. Esses padrões são mais fáceis de detectar do que um 50% pontilhado, por isso tenha cuidado! O Dithering estilizado é outra técnica, e é caracterizada pela adição de pequenos formatos no padrão. O Dithering interlaçado permite que duas regiões pontilhadas se interlacem. É chamado de dithering interlaçado, pois as duas regiões pontilhadas se interlaçam nas bordas. Esse tipo de dithering permite a você misturar dois pontilhados para formar uma gradiente. O Dithering aleatório é uma versão menos comum do dithering, e não é geralmente recomendado, pois adiciona ruídos de pixel à imagem. Embora tenha algum uso em doses muito pequenas, o dithering aleatório é algo que muitas vezes você vai querer evitar. Tão útil como o dithering é, muitas vezes é mal utilizado por artistas inexperientes. O Dithering ruim será discutido mais adiante na seção “Coisas para evitar.” Grupos de pixels: O conjunto de pixels é feito a partir de pixels individuais. No entanto, um único pixel é na maioria das vezes quase inútil e sem sentido se não tocar em pixels da mesma cor. O pixel artista está preocupado com as formas que ocorrem quando pixels de cores similares tocam a si mesmos e convém uma forma opaca, plana. A maioria dos triunfos e derrotas possíveis no pixel art ocorrem naquele momento exato em que o artista faz um aglomerado de pixels. -Helm Nós falamos muito sobre pixels individuais, mais estes são raramente pixels independentes. Um pixel sozinho, isolado, é um pontinho numa tela – é um ruído. Mas pixels não são normalmente encontrados sozinhos, ao invés disso, eles são encontrados fazendo parte de grupos de pixels – grupos de pixels da mesma cor que juntos formam um campo de cor sólida. Enquanto o pixel isolado é nosso bloco básico de construção e a menor unidade, os grupos de pixels são a unidade a qual muitas de nossas decisões sobre posicionamento de pixels se basearão. E enquanto é importante perceber que pixels individuais não são independentes, também é importante perceber que grupos de pixels não são independentes. Como peças de um quebra-cabeça, as bordas de um grupo de pixels determinam o formato do grupo de pixels que ele faz fronteira. Aqui vai um exemplo de como interferir no formato de um grupo de pixels pode causar efeitos drásticos nos seus grupos vizinhos: Enquanto pixels solitários são vistos como ruídos, um pixel solitário de uma cor diferente do campo que toca, se usado como AA, pode ser visto como parte do grupo, e é, portanto, a solução dos problemas: Créditos: Pixelaria (Tutorial) Thayam