Thayam

Gostei da textura, mais precisa aplicar o esquema de luz nela também para ficar ainda melhor Obrigado pelo elogio, estou disposta a ajudar todos que precisarem, mas quero ver uma feita por você, faça outra e poste aqui haha Abraço!

Muito bom Dani!! Obrigado por compartilhar conosco, para mim este tutorial será muito útil haha Abraço!

Saudações queridos amigos do TK! Hoje venho trazer um tutorial mais básico porém muito útil. Vejo que algumas pessoas tem vontade de começar a vida em sprites, porém, ficam meio perdidos a como começar, veem em alguns tópicos agente falar sobre Hue, Dithering, AA e pensam "WTF?!". Então venho aqui hoje tentar explicar um pouco melhor sobre alguns conceitos e programas utilizados para tal ação. Vamos lá!: 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: Bom, vou finalizar o tutorial aqui, já ficou bem grande haha Espero que eu tenho ajudado vocês a enter um pouco mais sobre Sprites, e ter dado a alguns, um norte para começar Vamos juntos mobilizar esta seção que ta meio down ultimamente haha Até a próxima pessoal! Créditos: Pixelaria (Tutorial) Thayam (Trazê-lo ao TK) Way20 (por indica-lo quando comecei minha jornada)

Amigo, tente explicar melhor sua dúvida, como por exemplo: Qual servidor você usa? O único problema é ele não sair da ball? Ou ele não funciona em nada? Você usa icon system? Tenho um tutorial explicando sua dúvida, dê uma olhada: Tópico by Thayam Assista com paciência (pois o vídeo é longo haha) e me diga se funcionou, qualquer problema é só postar aqui Abraço

Bom, vamos lá: Cada material absorve a luz em uma proporção diferente, jóias no geral absorvem muita luz, é comum ver um reflexo no lado oposto da fonte. Como a nossa fonte de luz é o noroeste, vai haver um pequeno reflexo no sudeste. Exemplo: Créditos da imagem: Redshrike. No caso da sua jóia, o reflexo aparenta estar vindo do norte, e não está refletindo em lugar algum, o que nos tira a noção de que este objeto é um jóia brilhante, faltou também um pouco de hue, como o caronte disse, você se limitou muito as cores externas, usando apenas 4 tipos de cores (praticamente, tirando os contornos) para realizar a coloração, não tenha medo ou insegurança de usar muitas cores, tornam sua sprite muito mais bonita e completa. Pesquisei no google e achei algo parecido com o seu desenho, vale para observar a questão da iluminação na foto, a iluminação vem do noroeste, assim como devemos fazer: (créditos alibabá, que lorgo perdeu a joia pros 40 ladrões) Achei o tamanho que você escolheu suficiente para se trabalhar com este tipo de material então tente manter-se nessas proporções. Quando aos contornos, um contorno todo preto como você fez é interessante somente em alguns casos, pois como aconteceu com sua imagem, ele tirou um pouco na noção de arredondamento da sprite (esses chanfros que vemos na imagem), fazendo parecer que é uma chapa, com uma elevação na face superior e sem nada na face inferior, tente utilizar um outro tom para criar a sensação de que a jóia está chanfrada, e que ela não se limita somente a parte de cima dela. Mantendo as noções de que sua joia é retangular, e não esférica como nos exemplos, editei ela, deixando com umas cores um pouco mais escuras para fins didáticos: Perceba como os "brilhos" que você provavelmente contornou antes de pintar a sprite limitaram o brilho da sprite, não é regra, afinal cada spriter tem seu jeito de trabalhar, porém acho válido começar sempre pelas partes mais iluminadas, parece me dar uma sensação de tranquilidade maior escolher cores escuras ao invés de tentar visualizar o brilho após a sprite estar pintada, mas como disse, cada um tem seu jeito!. Use e abuse das cores, crie uma paleta de cores enorme se necessário, o importante é trabalhar livre, sem se prender a poucas cores. Espero que tenha entendido o que eu quero dizer, e que essas dicas te ajudem em seu caminho Aguardo um retorno com novas edições Você leva jeito, gostei de suas sprites anteriores, você evolui bastante desde a primeira sprite! OBS: Deixo aqui três tutoriais que podem te ajudar com isso: http://fc06.deviantart.net/fs71/f/2010/342/b/4/tutorial__texture_color_theory_by_ostwyn-d34i1vr.png (esse infelizmente está em inglês) http://www.tibiaking.com/forum/topic/50061-tutorial-coisas-para-evitar-spriting/#entry291704 http://www.tibiaking.com/forum/topic/50012-tutorial-usando-e-escolhendo-cores-spriting/?view=findpost&p=291272

Agora estou pelo celular, mas amanha de manha te darei umas dicas que irão ajuda-lo muito

O fundo rosa garante a invisibilidade do fundo da sua sprite amigo, portanto é crucial que o fundo de todas as sprites sejam de tal cor. Você pode usar outras cores de fundo para garantir que sua sprite esta solida em qualquer ambiente em que ela for usada

Muito obrigado amigo!

Excelente, irá me ajudar muito daqui a um tempo rsrs Obrigado por compartilhar conosco Bruno!

Sem problemas, já a desenhei apontando aos quadrantes, mas fazê-la se movimentar é mais chatinho, pois tenho que mecher em sua estrutura Em breve vo ta colocando ela aqui pra você

Eu que agradeço cara, vamos movimentar esta seção tão daora, porém ultimamente meio vazia :/ abraço

Fala ai meus amigos do TK! Durante a noite recebi algumas PM's sobre alguns sprites feitos, e neles percebi alguns erros básicos, que eu também cometi e que você também irá cometer haha! Então resolvi trazer este novo tutorial para a comunidade, que fala sobre "Coisas para se Evitar" na hora de fazer sua sprite, acredito que será uma mão na roda para aqueles que estão iniciando neste mundo Enfim, chega de enrolar vamos lá: Coisas para evitar na hora de criar sua sprite! AA Ruim: Muito AA (anti-aliasing demais) – você só quer usar o AA necessário para suavizar a borda. Se você usar muito, as bordas podem parecer borradas, e você perde a nitidez da linha: Muito pouco AA – aqui o artista usou pixels independentes para facilitar a transição, mas ele apenas conseguiu embotar a borda um pouco. Ele podia ter feito uma transição mais suave usando linhas longas para mostrar uma transição mais gradual como no segundo exemplo: AA banding - quando segmentos de AA se ligam com as linhas que estão suavizando, o AA banding ocorre. Estarei criando um tópico para melhor explicação do AA banding Anti-aliasing (o temido pelos bravos jovens aventureiros haha ) A não ser que sua linha esteja perfeitamente horizontal, perfeitamente vertical, ou em 45 graus, as bordas de seus segmentos de linha, naturalmente, serão um pouco irregulares. Por conta da natureza quadrada do pixel e do padrão de grade, estamos restritos a fazer linhas angulosas e curvas difíceis de retratar. AA é a contramedida correta nestas situações. Dithering ruim: Existem várias maneiras comuns em que o dithering é mal utilizado. O erro mais comum é simplesmente o uso demasiado do dithering. Se o dithering está cobrindo metade do Sprite, provavelmente só será melhor se você adicionar uma nova cor à paleta. Pontilhados deveriam idealmente ser utilizados para afunilar as extremidades e bordas de um campo opaco de pixels. Quando muito dithering é usado, a área pontilhada se transforma em um campo próprio: Neste ponto o dithering não está mais servindo como um amortecedor entre as cores, mas criando texturas indesejáveis. Criação de textura pode ser um aspecto útil de dithering, mas apenas quando usado corretamente. Se você está tentando suavizar ao invés de adicionar textura, então o dithering não está funcionando como deveria. Banding: Banding, mais simplesmente, é quando os pixels se alinham. Quando pixels vizinhos terminam na mesma coordenada x ou y na grade subjacente, a grade imediatamente se torna mais evidente, os pixels estão expostos e a resolução aparente se torna menos legal. Aqui estão vários exemplos de banding, os quais ocorrem porque os pixels se alinharam. Estes nomes não são linguagens comuns, mas vão funcionar para os fins deste tutorial: Hugging: Aqui um campo de cor opaca é contornado por uma fileira de pixels. É bom usar contornos, mas certifique-se o contorno e a forma que ela contém não se alinham e revelam a grade. Pixels gordos: Pixels gordos podem ocorrer sozinhos em quadrados pequenos, juntos como linhas gordas, ou multiplicados como largas linhas (escadas de banding). Banding pula-um: Mesmo se houver um espaço negativo entre duas coligações, a mente irá preencher a lacuna e a coligação permanecerá. Banding 45 graus: Embora as linhas de pixels se alinhando tenham apenas 1 pixel de espessura, coligações ainda estão presentes. Pillow-shading: Sombreamento cercando uma área central com tons cada vez mais escuros. O Pillow-shading é ruim porque não presta atenção à fonte de luz, e conforme a forma da área e não da forma que ela representa de como a luz a afeta. Pillow-shading é, muitas vezes, mas nem sempre, combinado com banding. A maneira de corrigir o Pillow-shading é simplesmente prestar atenção de onde vem a direção da luz: A razão pela qual o pillow-shading está errado não é porque a fonte de luz é frontal (da direção do espectador). Você não tem que colocar a fonte de luz no canto. A razão pela qual o pillow-shading é incorreto é porque segue formas planas e não se concentra em como as formas tridimensionais são literalmente. Assim, é possível usar uma fonte de luz frontal, desde que você preste atenção às formas: Ruído: Na maior parte do tempo, pixels independentes (pixels que não pertencem a um grupo de pixels) são incapazes de transmitir informações suficientes por si só, e a sua inclusão normalmente só cria ruído. O ruído é qualquer tipo de informação que não contribui para a peça e serve apenas para interromper a área que habita e distrair o espectador. No pixel art, o ruído é muitas vezes composto de pixels independentes. Para os fins deste tutorial, o ruído de pixel único será o que eu estou me referindo quando eu uso o termo "ruído". A razão pela qual é preciso ter cuidado ao usar um pontilhado 25% (ou qualquer dithering, na verdade) é por causa do ruído que todos os pixels independentes criam. Pixels independentes expõem a grade subjacente, revelando a resolução da imagem. Lembrem-se, na natureza, pixels viajam em grupos. É a natureza de um pixel pertencer a um lugar num grupo de pixels. Por esta razão, pixels independentes só devem ser usados por razões muito específicas e propositais. Casos justificáveis da presença de pixels independentes: Usado como realces especulares Detalhes independentes chamam bastante a atenção para si, mas às vezes isto é exatamente o que você deseja. Para brilhantes reflexos especulares, pixels individuais, muitas vezes, funcionam muito bem. Para um exemplo, veja o pixel branco usado no nariz do monstro abaixo. Representando detalhes pequenos mais essenciais Normalmente, será apenas uma questão de detalhes em imagens muito pequenas, como os olhos em um sprite pequeno, ou o bico de um pássaro pequeno. Ou estrelas, ou pequenas bolhas. Sel-out (contornos quebrados) Sel-out (abreviação para selective outlining, traduzido para linhas quebradas) é suavizar uma linha para a cor do plano de fundo. Isto significa que o sel-out é realmente um tipo de AA ruim, mas o termo se tornou popular o suficiente para justificar sua própria seção. A ideia é geralmente escurecer o contorno para aproximar-se de uma cor mais escura, de modo que o sprite será bem interpretado em qualquer fundo, ao invés de fundir em um fundo da mesma cor. Sel-out não é o sombreamento de um contorno de acordo com uma fonte de luz. Um contorno completo com variação de luz não criará acentuações tão pior quanto uma linha quebrada irá: Talvez este seja um exemplo mais simples. O semicírculo à esquerda é sombreado de acordo com uma fonte de luz (mais uma vez, vindo do canto superior esquerdo). A parte superior do semicírculo à direita tem sel-out aplicado: É Isso ai pessoal, não vou prolongar mais o assunto pois já ficou um tópico muito grande. Mas esses são erros comuns, mas que são fáceis de serem evitados, nesse final de tutorial você já deve ter rabiscado alguma coisa ai no seu pc não? Porque não posta aqui, para que possamos avaliar e compartilhar conhecimento? haha Agradeço a atenção de todos e até o próximo Tutorial Créditos: Pixelaria (Tutorial) Thayam (Trazê-lo ao TK) Way20 (por indica-lo quando comecei minha jornada)

Meus parabéns amigo! Não sou o maior fã de HM mais tenho que admitir que seu trabalho (ao menos pelas imagens) está sensacional, desejo toda sorte para seu projeto, e quando tiver um tempinho, estarei entrando para jogar haha

Aqui está dlç: http://www.tibiaking.com/forum/topic/30590-spell-maker/

Muito provavelmente nas sources haha

up

Imagina cara, acredito que com pequenas atitudes possamos melhorar o mundo em que vivemos, como disse antes, você me ajudou muito, além de poder retribuir a ajuda, posso aprimorar minhas habilidades como spriter haha Refiz sua mermaid um pouco mais escura, acho que mais que isso ela fugiria um pouco da coloração da imagem que você deu de base haha, mas se quiser alguma alteração é só pedir, e assim que você gostar de uma, eu começo a fazer os movements dela para você E ai, o que achou?

Excelente cara! Reputado com certeza! Esperamos mais conteúdos de qualidade como esse haha!

Realmente não é, também procurei por aqui e não achei, desculpe mas não tenho a menor ideia de como o fazer, se descobrir por favor entre em contato comigo? Desculpe não poder ajudá-lo mais

Não entendi se foi ironia ou não, mas de qualquer forma, nunca nem sequer pensei na possibilidade de trocar esse efeito haha, espero que tenha ajudado em algo

Se você já tem eles no formato correto, basta procurar pelos efeitos em seu editor e trocá-los

Huahauhaushauhauaha maluco, você deve ser o único usuário proposital do baidu. Eles devem te patrocinar, não é possivel

Obrigado amigo! Já ajudou alguns e espero que continue ajudando haha abraço

Obrigado Fábio

Obrigado gatão! AHAUHAUH Podem ter certeza que mais conteúdos como esse virão, estou muito empenhado na questão de sprite e quero junto aos amigos interessados, movimentar mais esta seção do fórum! Grande abraço