(A edição de hoje está bem extensa, então talvez precise de 1h ou mais para ler, entender e, se quiser, anotar alguma coisa. Bom proveito!)
Hey ho, Habbos!
Eu sou o Motivo.ban e bem-vindos à segunda edição da Oficina de Pixels! Hoje falaremos sobre algumas ferramentas e funcionalidades importantes do Adobe Fireworks e como vocês podem usá-las, falaremos também de como remover o indesejável anti-aliasing das bordas. Eu iria falar sobre o hue shifting hoje (uma técnica de paleta de cores), porém pra falar sobre técnica de coloração nós precisamos entender mais sobre as cores: matiz, saturação, contraste, o impacto das cores em uma arte e etc, então nós teremos uma edição da Oficina dedicada apenas à Cores, ok? Espero que não fiquem chateados.
De antemão fiquem calmos, essas primeiras edições da Oficina serão bem mais técnicas do que práticas (voltadas principalmente para iniciantes), isso é muito importante porque quando a gente tá fazendo alguma coisa precisamos saber o que estamos utilizando e o que estamos fazendo, isso nos dará resultados melhores e otimização de tempo. Entender o processo é mais importante do que usar um passo a passo pronto, pois só assim você vai conseguir sair do automático e desenvolver suas próprias técnicas e a única forma de fazer isso é com prática e estudo.
O básico do Adobe Fireworks CS6
Creio que eu não preciso explicar aqui o por quê de eu trazer coisas apenas sobre o Fireworks, quem leu a edição da semana passada sabe que é o software que eu escolhi usar.
Já de antemão, eu vou falar sobre algumas coisas básicas do programa, ainda tem muita coisa no Fireworks que eu não faço ideia de para que serve, mas que também não nos é útil saber. O Fireworks originalmente é um software que foi criado para a o design de layouts web, até hoje é usado para isso pela maioria dos web designers, porém, por ser um software que consome muito pouca memória RAM, acaba sendo uma alternativa ao Photoshop para pessoas com computadores mais fracos. O Fireworks pode substituir o Photohsop nas principais áreas do design: vetorização, criação de banners e peças de marketing, entre outras.
Pixel art é uma das coisas que é possível fazer por aqui, até pintura digital, se você souber usar bem o programa. Porém o Fireworks é apenas uma alternativa ao Photoshop, ele não foi feito para esse tipo de coisa, mas dá pra se virar. Uma das principais diferenças é a remoção de objetos: o Photoshop conta com uma opção de localização de borda automaticamente, você só precisa ir contornando o objeto e a função vai se adequando a borda daquele objeto automaticamente, o Fireworks não tem isso para remoção de objetos.
(Você pode usar o botão F3 para pesquisar por algum tópico específico. São eles: Resolução, Propriedades, Alinhar, Camadas, Salvando um estilo, Opções de caminhos, Formas automáticas e Varinha Mágica).
Resolução
Ao criar um novo documento, tenho certeza de que você já se perguntou o que raios é isso. Ok, a resolução por padrão é dada por dpi (pixels/polegada) e a única coisa que vai mudar é a quantidade de pixels por polegada (dããããããã), como assim? Ao dar um zoom em uma imagem x pixels de cores diferentes aparecem por polegada, ao aumentar essa resolução, você vai aumentar também essa quantidade de pixels diferentes, fazendo uma imagem ser mais borrada ou mais definida.
Para pixel art isso não importa, então você não precisa mexer nisso. Como estamos trabalhando a nível de pixels, todos eles irão aparecer, não há suavização logo não há diferença mexer na resolução. Mas se você quiser fugir disso e fazer algo fora do padrão de pixel art, normalmente usam 150 dpi de resolução até 300 dpi, dependendo do tamanho do desenho (lembrando que isso também altera o tamanho do arquivo e o tempo de renderização).
Propriedades
Ali na barra de propriedades nós temos a opção "Tamanho da tela de desenho", nela você pode variar livremente a largura e altura. Ali demarcado de vermelho é a Âncora, você pode fixar um ponto e a imagem vai aumentar ou diminuir desse ponto. No caso, o que é selecionado por padrão é o meio, então ela vai expandir ou diminuir a partir do meio. Você pode fixar no topo se você quiser aumentar o tamanho da imagem para baixo, ou ficar no rodapé se você quiser aumentar para cima, o mesmo vale para esquerda e direita ou os pontos nos cantos.
Do lado nós temos a opção "Tamanho da imagem", onde você pode aumentar ou diminuir na proporção atual. Exemplo: você quer fazer uma imagem com a proporção 4:3 então você cria no tamanho 400x300 e a partir dessa opção você pode aumentar ou diminuir mantendo essa proporção. Lembrando que vai aumentar/diminui a partir do centro, não tem como escolher uma âncora.
A última é "Ajustar tela de desenho", esse botão basicamente ajusta a tela a tudo que tem nela. Se você tem um objeto 100x100 em uma tela 50x50 e clica nesse botão, a tela passa a ser 100x100.
Alinhar
Uma das ferramentas mais úteis do Fireworks. Aqui você pode alinhar, distribuir e igualar os objetos selecionados de diversas formas (passe o mouse em cima das opções para entender o que cada um faz). A opção selecionada de vermelho, quando clicada, além de alinhas os objetos entre si, você vai alinhar com relação ao centro da tela de desenho. A opção selecionada de azul espaça os elementos de forma igual, basta você escolher a quantidade de pixels de distância e escolher se quer espaçar horizontal ou verticalmente. Vá testando cada uma para entender melhor.
Camadas
Aqui você pode criar camadas ou subcamadas e ver o que tem dentro de cada uma. Você também pode renomeá-las clicando 2x na barrinha da camada. Essa função é importante porque permite que você possa separar uma camada para o fundo, outra para texto e assim vai. Você também pode mover um elemento de uma cada para outra arrastando ele. Também é possível bloquear uma camada inteira ou apenas um elemento clicando nesse quadradinho do lado, isso vai fazer com que ele fique parado e não selecionável até desbloquear. Aprenda a usar as camadas para ser mais organizado.
Salvando um Estilo
Para salvar um estilo basta clicar nesse botãozinho aí, uma janela desse tipo vai aparecer:
E aí você pode escolher o nome do estilo e o que quer salvar dele, é muito útil para poder replicá-lo e evitar perder tempo criando um igual toda vez, mesmo que só para mudar os parâmetros dos efeitos.
Os estilos salvos vêm parar aqui, clicando naquela opção demarcada você pode acessar o estilo de outra aba aberta no Fireworks ou estilos já prontos do próprio programa. Salvando o arquivo no formato .fw, os estilos são mantidos, então você tem ali salvo e pode reabrir e usá-los de novo em outros trabalhos.
Opções de caminhos
Essa janelinha só é importante para quem tá trabalhando com vetorização, não é nosso foco e tomaria toda uma edição só pra falar de vetorização e caminhos (parte disso é útil para logotipos, mas não falaremos disso hoje).
Formas automáticas
O Fireworks também tem diversas formas automáticas que você pode usar, vá tentando cada uma para aprender. Até hoje tô aprendendo a usar algumas delas.
Varinha Mágica
Com essa opção você pode selecionar uma cor do elemento, na barrinha das propriedades você tem isso:
Mantenha a opção de borda Intenso para pixel art. Alterando a tolerância você altera a tolerância da cor, olha um exemplo:
Na primeira a Tolerância é 0, selecionando apenas a cor que eu cliquei. Na segunda joguei a tolerância para 70 até pegar todos os tons de marrom. É assim que funciona.
(As outras funcionalidades, como lápis, borracha, os elementos de vetorização [quadrado, círculo, etc] creio que eu não precise explicar por serem bem óbvios, então vamos pular isso. Também há muitas ferramentas para a criação/edição de layouts de sites, faremos uma edição da Oficina apenas falando sobre layouts web :D).
Removendo o anti-aliasing
Estamos caminhando ainda a passos de formiga na Oficina, então esse é mais pequeno passo que você pode dar, mas que vai melhorar a qualidade da sua pixel art. Por padrão, o Fireworks coloca anti-aliasing nas bordas quando você usa filtro "Brilho", mesmo que você use um texto sem suavização de borda. Observem que quanto maior o brilho, mais AA o programa irá colocar, o que acaba dificultando muito tirar isso no Paint.
Para tirar o AA você vai selecionar o elemento, copiar e depois vai no Paint e cola. Você precisa remover esses pixels mais claros da borda e ela deve ficar assim:
Para remover você pode usar a borracha. Selecione o conta-gotas, clique com o botão esquerdo (cor primária) sobre esse pixel mais claro e depois remova passando a borracha por cima com o botão direito, isso vai fazer com que ela apague apenas o que estiver na cor selecionada. Agora você tem uma borda sem AA, faça isso sempre que por uma borda nova, ok?
"Ah mas como eu faço isso em uma logo inteira? Vai demorar muito!" fique calmo pupilo, você pode usar a Varinha Mágina no Fireworks para fazer isso. Primeiro coloque o fundo em uma cor totalmente contrastante com a borda, de preferência a cor negativa à ela (no caso de bordas pretas, não use branco). Você pode usar o famoso fundo verde. Dá mesma forma de antes, selecione o objeto e leve para o Paint. No paint, selecione uma área maior que o objeto, copie e cole no Fireworks de volta. Com a varinha máginha, coloque a Tolerância no máximo e clique no fundo, depois é so aperdar Delete e pronto.
Observem que mesmo com a Tolerância no máximo, a partir da espessura 2 você já não consegue mais remover o AA automaticamente, então aí só no Paint mesmo...
Por hoje é só pessoal, se você queria que eu falasse sobre alguma função do Fireworks em específico e não falei, comenta aí embaixo, ok? Tentei ser o mais sucinto possível explicando apenas o que quem tá começando agora vai sentir mais dificuldade. Espero que não fiquem chateados por conta da Oficina de hoje ser bem voltada para iniciantes, mas se eu pular essas partes, vou privar muita gente que quer ir aprendendo focando apenas em quem já sabe. Deixo minha DM do Twitter à disposição de vocês para qualquer coisa, só procurar lá: @MotivoHB.
É nessa que eu vou, valeu!
3/5 Episódios