Desafio Semanal #01 – Processo

Agora o post que prometi na semana passada. O passo a passo!

1) Comecei definindo a grade (tiles de 16×16) e coloquei o cubo do tutorial #00 para ajudar a determinar a escala da altura. Também coloquei logo a região correspondente ao tamanho da tela.

Passo01

2) Como o tema precisa de espaços urbanos, tratei de elaborar um tileset para as ruas, e montei um mapa para verificar a escala. Achei que ficou bom dessa forma. Nessa etapa ainda não estava me preocupando com detalhes e com relação às cores, só me preocupei com os valores para mostrar uma certa iluminação.

Passo02

Passo02_2

3) Com base numa referência, comecei a elaborar o primeiro prédio. Decidi que cada andar terá altura de 4 pixels. Ainda sem detalhes no objeto, apenas o valor.

Passo03

4) Continuei fazendo outros prédios, baseados nas referências, seguindo as formas retas e quadradas da época que se traduzem bem em pixel art.Passo 4

5) Depois já estava atrasado com o desafio, e comecei a pensar apenas no mock up. Resolvi criar uma determina região da cidade. Defini algumas ruas, onde terá água e um pequena região num nível mais elevado.

Passo04

6) Pensei em colocar alguma textura no tile para as calçadas das ruas. Essa textura só tem 3 cores. Usei modo tiling da PSDAnim para verificar como ficaria a repetição dos tiles. Todos os tiles tem esse mesmo padrão. Para evitar copiar o padrão para cada tile, usei os patterns do Photoshop. Defini o tile como um pattern, selecionei a região da calçada de cada tile e dei um Fill Pattern.

Passo05

7) Depois pensei nas cores finais. Como foi definido que terá um efeito sépia na tela. Resolvi usar um cheat. Criei um Adjustment Layer do tipo Gradient Map e ajustei as cores do degradê. Nesse ponto não estava satisfeito com as valores do asfalto e da água.

Passo06

8) Comecei a fazer os tiles para representar a mudança de nível do terreno. Sempre me preocupando com a perspectiva e os valores.

Passo07

9) Apliquei uma textura ao prédios da mesma forma que foi feita com as calçadas.

Passo08

10) Tendo já boa parte do material, comecei a montar o mapa. Combinei alguns tiles de prédios para fazer um prédio maior. Nesse ponto eu já tinha ajustado os valores da água e do asfalto. Outro detalhe importante são as sombras dos prédios. No fim, não gostei da legibilidade em geral dos prédios.

Passo09

11) Então resolvi colocar um outline para separar mais.

Passo10

12) Então chegamos no resultado final:

Passo11

13) Ficou faltando adicionar a água para representar a inundação. Para isso, foi bom ter separado cada os elementos em camadas desde o início. Os tiles das ruas e calçadas estão numa camada e os prédios em outra camada. Então bastou criar uma camada entre eles e preencher com os tiles de água. Em seguida foi só criar outra camada por cima para representar a água que aparece na frente dos prédios.

Passo12

É isso. Espero que tenha gostado. Amanhã começa o segundo desafio! Até lá!

DesafioSemanal01_result

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s