Olá, galerinha!
Vou apresentar para vocês, algumas técnicas para melhorarmos a aparência dos nossos trabalhos com Fireworks.
O original encontra-se em http://fireworks.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
***(original:Benjamin De Cock, Smashing Magazine)***
Vamos começar aqui, traduzindo e apresentando para compartilharmos nossas idéias:
Embora, certamente, não seja tão conhecido como o Photoshop, o Adobe Fireworks é uma grande ferramenta para a criação de interfaces, websites, protótipos, wireframes, ícones e muito mais. Entretanto, muitos designers que utilizam o Photoshop há anos podem estranhar um pouco o Fireworks à primeira vista. O Fireworks tem um fluxo de trabalho um pouco diferente e requer uma abordagem também diferente daquela que você está acostumado a usar com Photoshop.
Nesse artigo, vou compartilhar algumas dicas que uso em meu trabalho com o Fireworks que poderão ajudá-lo a melhorar a qualidade dos seus projetos e fluxo de trabalho. Algumas dessas dicas são apenas explicações rápidas de recursos que você pode não conhecer, enquanto outras são técnicas e métodos para melhorar o padrão visual dos resultados. Vamos começar!
Aperfeiçoar contornos delicados:
Uma das características do Fireworks é que ele dá ao usuário um monte de opções, mas um dos mais importante está faltando: a capacidade de adicionar um gradiente num stroke (traçado, borda). Além disso, o efeito do Stroke não é sempre bacana – por exemplo, quando usamos uma borda com cantos arredondados.
O Fireworks permite especificar a posição do contorno: para fora (outside), ao centro (centered) ou interno (inside), mas os melhores resultados são quando o contorno está para fora.
O contorno pode ser definido com alinhamentos diferentes no painel de propriedades. Contorno alinhado para fora (outside, exemplo3) apresenta melhores resultados que as outras opções para contornos finos.
Mas, nestes casos, recomendo um caminho composto em vez de um contorno para ter mais controle do resultado e para poder aplicar um gradiente.
Comece desenhando dois retângulos com cantos arredondados, um deles, 2 pixels maior que o outro, na altura e largura. Coloque o retângulo menor sobre o maior (você pode verificar se ele está acima, no painel Layers), e diminuir o arredondado da, como mostrado aqui:
Outra alternativa: você pode selecionar os dois retângulos e vá em Modify > Combine Paths > Punch.
Dica extra: Caso você decida mais tarde que precisa redimensionar esta forma (sem distorcer seus cantos perfeitamente arredondados), a ferramenta “9-slice scaling tool” pode ser sua salvação:
Desenhando Triângulos Melhores:
Os triângulos estão em todos os lugares nas interfaces: setas nos botões, breadcrumbs, indicadores pop-over e assim por diante.
Enquanto o Fireworks oferece recursos vetoriais prontos como a seta e a seta de linha, eu recomendo seguir a rota personalizada e desenhar você mesmo essas formas vetoriais.
O autoshape de seta vetorial no Fireworks. Os pontos de controle amarelos permitem uma customização mais fácil da largura, algura, espessura, tipo de ponta, arredondado, tamanho e mais.
O vetor smart polygon no Fireworks. Você pode facilmente transformar em um triângulo.
Para ilustrar o nosso novo fluxo de trabalho, vamos desenhar uma seta simples como a do botão de início de download:
Botão de início de download.
Vamos começar pelo desenho de um triângulo. Na maioria das vezes, você vai querer um número ímpar de pixels para a base do triângulo de modo que sua ponta fique centralizada a meio-pixel, resultando em uma seta pontiaguda:
À esquerda, o triângulo com largura ímpar. À direita, o triângulo com largura par.
Para criar um triângulo como o da esquerda, começamos por desenhar um simples quadrado com 7×7 pixels usando a ferramenta Retângulo (encontrada no painel Ferramentas, ou simplesmente pressione U). Para excluir seu ponto inferior direito, use a ferramenta Subselection(pressione A, ou use a seta branca no painel Ferramentas), selecione o nó inferior direito, em seguida, pressione a tecla Delete; o Fireworks irá lembrá-lo que você está tentando mudar um ponto de um retângulo primitivo e que deve ser desagrupado para a mudança ocorrer, para isso, clique em “OK” para transformá-lo em um vetor, e apagar o ponto. Após deletado, você ficará com isso:
Nosso quadrado com o ponto inferior direito deletado.
Precisamos agora colocar o ponto inferior esquerdo exatamente no centro, que está localizado a 7 pixels ÷ 2 = 3,5 pixels de sua posição atual. Quando você usa as setas do seu teclado, o Fireworks move os elementos de pixel em pixel e os alinha perfeitamente à grade de pixels. Isto é conveniente, na maioria dos casos, mas não neste. Felizmente, Fireworks nos dá o recurso “Move Points ” (no painel Path) que nos permite especificar valores numéricos:
Mover 3,5 pixels horizontalmente irá centralizar o ponto inferior.
Se o triângulo está um pouco pontiagudo demais para a nossa seta, use a ferramenta Subselection para selecionar o ponto central novamente e pressione a seta para cima do teclado duas vezes para mover o nó.
Estamos quase terminando! Nós precisamos apenas inserir a parte retangular de nossa seta, com 3×5 pixels e, em seguida, usar o “Union Paths” de comando (Modify > Combine Paths > Union, ou pressionar Control / Command + Alt / Option + U) para soldar os nossos dois caminhos em uma forma vetorial única final:
As formas separadas estão à esquerda e a forma soldada está à direita.
Desenhar Elipses Melhores
Por alguma razão, o Fireworks tem dificuldade em desenhar círculos elegantes (especialmente os pequenos), e os círculos tendem a ter também uma borda em linha reta:
Um círculo padrão no Fireworks. Observe que os lados do topo, da direita, da base e da esquerda não estão arredondados suficientemente.
Nós vamos usar a janela “Numeric Transform” (Control / Command + Shift + T, ou no menu Modify > Transform > Numeric Transform) para fazer o círculo apenas um pouquinho menor:
Diminuir o tamanho do círculo um pouquinho para fazê-lo parecer mais arredondado.
O original à esquerda e nosso resultado depois da transformação à direita.
Você vai notar que o círculo da direita está mais nítido e regular, isso porque temos menos pixels “cheios” nas bordas:
O original à esquerda, e nosso círculo perfeito (depois da transformação) à direita.
Pontos em Filete
Fillet Points arredonda todos os seus ângulos.
Vamos usar a forma pronta de Estrela vetorial padrão como um exemplo. Note que você precisa desagrupar formas prontas e retângulos primitivos antes de usar o Fillet Points, feito isso, você pode selecionar a forma vetorial inteira para arredondar todos os cantos de uma só vez ou usar a ferramenta Subselection para selecionar determinados pontos para arredondar.
A forma original à esquerda, e com o Fillet Points aplicado à direita.
Isto pode representar uma enorme economia de tempo quando você quiser modificar formas complexas com muitos filtros e efeitos. Agora você não terá que redesenhar as formas de novo e de novo, só porque o raio está alguns pixels cortado.
Caminhos Internos
Outra ferramenta vetorial muito útil desconhecida pelos designers é a Inset/Expand Paths.
Inset/Expand Paths é também acessada via menu Modify > Alter Path > Inset Path.
Como você já deve ter adivinhado pelo seu nome, esta ferramenta permite que você altere um caminho vetorial e torne-o menor (inset) ou maior (expand), sem perder suas proporções.
Vamos dizer que nós queremos fazer a nossa estrela acima com 10 pixels a menos:
O comando Inset/Expand Paths.
Esta caixa de diálogo pode ser confusa se você não sabe o que todas as opções e abreviaturas significam. O terceiro parâmetro (“corners” – cantos) é o menos óbvio, porque o significado de “BE, RO, MI” não está definido. As letras são as abreviações de “Bevel“, “Round” e “Miter“. Você não pode usar essas abreviações no campo de texto, de modo que você precisa saber o que significam. “Bevel” cria cantos quadrados, “Round” cria cantos arredondados, e “Miter” cria cantos pontiagudos, o “Miter limit” especifica o comprimento máximo dos cantos pontiagudos antes do Fireworks substituí-los com as pontas cortadas (ou quadrado). Vamos usar “Miter“, em nosso exemplo, porque nós obviamente queremos manter nossas linhas retas.
E voilà!
Gradient Dither
Adicionar um gradiente entre duas cores semelhantes (cores próximas em matiz) em uma forma grande, muitas vezes produz um efeito desagradável de estrias, como mostrado aqui:
Banding (efeito de estrias) é visível neste gradiente, especialmente em telas LCD do tipo “twisted nematic”, que exibe apenas 6bits por pixel e não 8.
Para evitar isso, no Fireworks CS5 foi introduzida a opção Gradient Dither que pode ser usada como se as bordas do objeto forem definidas como “Anti-alias” e se você usar o tipo “Radial” ou tipo “Linear”, para preenchimento de gradiente. fill.
Gradient Dither (localizado no painel Properties) fazem com que os gradientes pareçam melhores.
O resultado é um gradiente suave, único e linear, semelhante ao que você teria no navegador com aplicação do CSS:
Com a opção “Dither” aplicada, o gradiente fica muito mais suave.
Da mesma forma bons resultados podem ser alcançados por gradientes radiais.
Evitar Sombras Grandes
Fireworks não é muito bom em renderizar grandes sombras (se você usa o filtro “Drop Shadow“). Se você está curioso sobre as sutilezas envolvidas, um artigo detalhado no WebDesignShock compara efeitos de sombra e brilho no Fireworks, Photoshop e Illustrator.
Em vez de uma bela sombra que desaparece lentamente para um valor transparente, a borda da sombra pode parecer que foi cortada antes de desaparecer completamente com a transparência. A questão é particularmente visível na versão do Fireworks para Mac:
O efeito de sombra criado com o filtro Drop Shadow. Observe as laterais (no fireworks CS5 para Mac) – eca!
Aqui estão as configurações para usar para obter este efeito de sombra no Windows e Mac:
Configurações para o efeito drop-shadow no Mac. De novo, observe o corte nas pontas das sombras.
Configurações para o efeito drop-shadow no windows. As configurações são as mesmas, mas as pontas das sombras estão quase perfeitas.
Então, em vez de usar um filtro, eu costumo duplicar a forma (o retângulo branco neste exemplo), definindo sua margem para “Feather” e preenchendo-o com preto.
Configurações possíveis para a “sombra” vetorial atrás do objeto.
Colocando esta forma atrás do retângulo branco, produz-se uma sombra mais bonita e maior do que com o método interno:
A sombra original à esquerda e o “método feather” à direita.
Exemplos Práticos
Falar sobre gradientes, preenchimentos, contornos, formas automáticas vetoriais, retângulos arredondados, pixels e meios-pixels é emocionante, mas alguns exemplos reais seriam ainda melhores. Abaixo estão algumas ilustrações, ícones e desenhos de interface do usuário que eu fiz exclusivamente com o Fireworks. As dicas e truques faladas anteriormente fizeram os resultados mais elegantes e refinados.
Ícone pasta de arquivos.
Interface de usuário para selecionar data.
Ícone Free – Grátis.
Ícones para um FAQ – Frequently Asked Questions / perguntas feitas com frequência.
Ícone envelope.
Conjunto de ícones monocromáticos.
Ícones de chamada.
Ícones de contas de email.
Barra de ferramentas com navegação por ícones.
Como você pode ver, tem tudo a ver com precisão de pixel, e o Fireworks produz grandes resultados!
Conclusão
O Adobe Fireworks é uma ferramenta poderosa, oferecendo recursos de edição de vetores e imagens e até escondendo algumas preciosidades. Sim, ele impõe um fluxo de trabalho diferente, e alguns de seus efeitos padrão são decepcionantes, mas as vantagens superam os pequenos equívocos aqui ou ali.
Ter que mudar hábitos de trabalho é sempre frustrante. Talvez algumas ações que você faz em poucos minutos com sua ferramenta tradicional de design agora lhe pareçam incrivelmente lentas. Acostumar-se a um fluxo de trabalho diferente leva tempo, e pode ser que você não veja, de imediato,a vantagem de usar o Fireworks. A melhor coisa que você pode fazer é comprometer-se a fazer UM projeto real, do início ao fim, usando apenas o Fireworks. Escolha um projeto pequeno ou um projeto pessoal para este fim e coloque as mãos na massa por algumas horas (ou alguns dias). É a única maneira de ser capaz de julgar se o Fireworks realmente se adapta às suas necessidades. Se você estiver trabalhando com design de interface, eu aposto que o Fireworks será uma excelente ferramenta!
Se você estiver interessado em aprender mais sobre Fireworks, eu recomendo assistir aos vídeos produzidos por Rogie King. Eles oferecem muitas dicas e truques para refinar projetos e obter resultados mais ainda mais precisos do que neste artigo.
Além disso, o trabalho dos outros pode ser uma boa fonte de inspiração e conhecimento, portanto, dê uma olhada na série Fw PNG Week de Craig Erskinee baixe e desconstrua seus arquivos fonte gratuítos.
Feliz experiência com Fireworks!
Galerinha linda 🙂
Vou encerrando por aqui e espero novamente ter contribuído e despertado a imaginação de todos.
Este post também está publicado no grupo ADOBE FireworksBR:
http://fireworksbr.groups.adobe.com/index.cfm?event=post.display&postid=42888
Vocês podem passar por lá para conhecer mais do Fireworks e de quebra, podem se inscrever para participar dos nossos sorteios de brindes.
Agradeço pela atenção e até nosso próximo post!
Beijos,
Marta Roberta Teles
Marta Roberta 