Use o Fireworks para criar detalhes requintados em ícones

Neste artigo, usamos o software Fireworks para criar alguns detalhes em uma imagem de ícone pronta para deixar o ícone mais refinado e bonito!

Há dois pontos principais a serem observados ao usar o Fireworks (doravante denominado FW) para design de ícones:

Primeiro, o FW se concentra em web design e não é adequado para criar alguns efeitos PS excessivamente complexos. Você pode esperar pelos filtros PS do FW CS5;
Em segundo lugar, o método de edição do FW é semelhante ao AI. Se você está acostumado a trabalhar em um ambiente de sombreamento de pixel semelhante ao PS, pode ignorar este tutorial.

A seguir, vamos direto ao ponto. Vamos copiar um ícone relativamente padrão para explicação, o que facilitará o entendimento de todos.

A imagem abaixo é um conjunto de ícones criados pelo conhecido design doméstico eico. O objeto que queremos copiar é o ícone de envelope emoldurado na imagem. Deixe-me explicar antecipadamente que devido ao tema do tutorial, iremos adicionar alguns detalhes a este ícone, para que o nosso resultado final da cópia seja diferente da imagem original.

Passo 01

Recorte o ícone que deseja copiar como referência e bloqueie a camada. O painel de caminho do meu FW aqui foi extraído do Fireworks CS4, mas não tem impacto nas operações subsequentes porque utilizo todas as funções incluídas no CS3.

Etapa 02

Use a ferramenta Retângulo arredondado para desenhar um retângulo arredondado semelhante à imagem de exemplo, use os quatro pontos de controle de canto arredondado para ajustar o raio dos cantos arredondados e pressione Ctrl+Shift+G para quebrar a forma.

Em seguida, copie o primeiro retângulo arredondado, use a ferramenta de seta branca para mover um pixel em quatro direções e crie dois retângulos arredondados como mostrado na imagem (observe que os oito nós nos cantos arredondados são processados ​​com setas brancas, eles precisam ser alinhado).

Não podemos usar o Stroke para adicionar uma borda externa a um retângulo, porque a borda virtual vai te matar. Se o retângulo arredondado que você desenhou com a ferramenta Retângulo arredondado tiver bordas virtuais sem traço, espalhe os nós, selecione o Caminho com a ferramenta de seta preta e clique em Arredondar pontos para pixels no painel Caminho para retornar todos os nós do caminho .posição para a interseção de pixels (você também pode usar a ferramenta de seta branca para selecionar um nó para localização individual).

Etapa 03

Copie o retângulo grande e arredondado e coloque-o na camada superior. Use a seta branca e as teclas Shift+seta para obter um triângulo invertido. Em seguida, copie-o com gradiente linear. defina o enevoamento de 1px.

Etapa 04

Use as setas brancas para selecionar os nós mostrados no meio e, em seguida, use as teclas de seta do teclado para mover dois pixels para baixo e fazer o envelope parecer mais longo (porque um único ícone aqui não é limitado pelo estilo geral).

Passo 05

Vire verticalmente o triângulo invertido preenchido com gradiente desenhado anteriormente, faça uma cópia e posicione-a como mostrado na imagem abaixo. Os dois triângulos invertidos são separados por pouco mais de 1px de cima para baixo. Você pode usar a ferramenta de seta branca para selecionar os quatro nós acima do triângulo invertido marrom escuro e arrastar o mouse com a linha auxiliar para mover os nós para cima 0,3 ~ 0,5 pixels. Isso fará com que o marrom escuro pareça menos desfocado primeiro (e depois. Mais uma vez, desista da ideia de usar o Stroke para bordas o mais rápido possível, isso não é photoshop).

Etapa 06

Observe que há um destaque acima do ícone na imagem de amostra e não é um destaque radiante comum de pixel único (o destaque de 1px acima do destaque de cerca de dois pixels é mais brilhante do que 1px abaixo), então você pode considerar o uso de um radiador elíptico como o Ellipse Filling consegue esse efeito.

Selecionamos e copiamos o retângulo arredondado inferior duas vezes. Depois de mover a posição, obtemos dois retângulos arredondados separados por 2px. Usamos o método de subtração dos dois caminhos retangulares para obter um novo caminho e preenchemos-o com Ellipse (branco 0). -100 transparência) e finalmente defina o modo de sobreposição deste caminho de destaque para Sobreposição.

Passo 07

Adicione um destaque de 1px na parte inferior.

Passo 08

O resultado atual é mostrado abaixo. Vamos fazer uma pausa e tomar chá. A seguir, adicionaremos detalhes.

Etapa 09

Mudando temporariamente o fundo para branco, podemos ver que por causa do enevoamento usado no triângulo invertido anterior, alguns pixels transbordaram um pouco de ambos os lados do envelope.

Existem dois métodos para processar esses pixels. Um é Achatar como Bitmap e o outro é mascarar, mantendo o caminho. Prefiro o último porque mantém o caminho e pode ser editado posteriormente, se necessário. abaixo:

Etapa 10

Vamos voltar ao fundo escuro. Você acha que as laterais do envelope estão um pouco planas. Vamos usar um preenchimento de Barras ou Radial para adicionar algum efeito.

Etapa 11

Em seguida, adicione realces de pixel único aos triângulos superior e inferior do envelope. Como a operação de subtração de caminho (Punch Path, você pode encontrá-la no menu Modificar – Combinar Caminhos) foi discutida repetidamente antes, não vou explicá-la. aqui, como mostrado abaixo:

Etapa 12

Da mesma forma, adicione destaques ao triângulo abaixo.

Etapa 13

Como o fundo é de uma cor mais escura, podemos considerar adicionar um brilho. Aqui não usamos o filtro de projeção ou luminescência do FW, mas usamos o Path Why? Podemos fazer um novo retângulo arredondado que seja 1px maior na parte superior, inferior, esquerda e direita do que o retângulo arredondado inferior do envelope, sem difusão e com transparência de 30.

Etapa 14

Em seguida, adicione um destaque de 1px abaixo.

Etapa 15

Neste ponto, o ícone está basicamente concluído e agora entramos na fase de polimento. Selecionamos todas as camadas e as "copiamos", depois pressionamos rapidamente Ctrl+Alt +Shift+Z para nivelar as camadas em bitmaps e, em seguida, definimos o modo de sobreposição para Sobreposição e a transparência para 60, para que possamos ver a saturação de o ícone. O grau e o contraste foram melhorados. Este é meu método favorito para polimento rápido, mas nem sempre é aplicável. Às vezes, você precisa usar manualmente os filtros integrados do FW para ajustar parâmetros como curvas, contraste. e saturação.

Terminar

O efeito final (o triângulo sob o envelope usa Path como projeção)