Criando um ícone de nuvem no Fireworks

Crie um ícone de nuvem no Fireworks para seu site.

Utilizando esse excelente programa, veja como criar, de forma rápida, um ícone de nuvem no Fireworks para utilizar em seu site.

Ao criar um ícone, é útil rascunhar as idéias no papel. Entretanto, uma nuvem é algo que possui geometrias circulares, por isso você pode já ir diretamente ao Fireworks. A parte principal é baseada em círculos. Ao contrário do Photoshop, o Fireworks é muito baseado em objetos, não em camadas, por isso você não precisa se preocupar tanto com os nomes das camadas. Arraste o objeto no documento diretamente ao seleciona-lo com a ferramenta Pointer.

Defina seu canvas para 800px de largura e 1000px de altura. Defina um fundo cinza #CCCCCC e selecione a ferramenta Ellipse.

Com a ferramenta Ellipse, pressione Shift e crie um círculo de 180 px de diâmetro. Copie e cole esse círculo e redimensione esse novo círculo para 191px de diâmetro.

ícone de nuvem no Fireworks

Os dois círculos seguem uma regra comum de matemática encontrada na natureza, normalmente chamada de proporção de ouro, baseada na teoria de Fibonacci. A proporção de ouro identifica as relações entre duas proporções. Os dois círculo seguem um aproporção (chamada Fibonacci) de 1:1.61. Isso significa que, se o primeiro círculo é de 180px, ao se multiplicar o valor por 1.61 é possível obter o diâmetro do outro círculo, de aproximadamente 290px.

No design em geral, o uso da proporção de ouro é bem comum, pois cria composições agradáveis ao olhar.

Copie o círculo menor (180px) e mova-o para a esquerda até que a primeira metade do círculo faça intersecção com o quadrado ao centro. Selecione essa cópia e  e mova no eixo horizontal.

ícone de nuvem no Fireworks

A nuvem começa a ficar parecida com a forma desejada. Por enquanto há apenas os contornos. Neste ponto, copie as formas do lado esquerdo do círculo grande, reflita-as e posicione-as ao lado direito para criar uma forma simétrica. Para isso, selecione as formas da esquerda, clique com o botão direito e, no menu, escolha Transform> Flip Horizontal. Agora, mova essas formas para a direita.

ícone de nuvem no Fireworks

ícone de nuvem no Fireworks

Agora você pode começar a se livrar das formas extras (como os círculos do lado esquerdo e direito.

Depois de apagar as formas desnecessárias, preenchas as três formas que ficaram com a cor #BBBBBB.

ícone de nuvem no Fireworks

Agora abra o painel Path. Com a ferramenta Sub-Selection, selecione todas as formas circulares. Assegure-se de utilizar a ferramenta Sub-Selection e que os três círculos não fazem parte de um grupo.

Após selecionar as três formas, clique no ícone Union Paths para uni-las. Essa ferramenta é muito semelhante à ferramenta Pathfinder do Illustrator, mas com alguns truques extras que você verá em seguida. Agora você terá uma única forma em seu canvas, e verá seus pontos de controle.

ícone de nuvem no Fireworks

ícone de nuvem no Fireworks

Agora você terá uma forma básica de nuvem. O trabalho agora será de refinar os detalhes para garantir que o ícone faça sentido. Selecione a ferramenta Rectangle e crie uma forma retangular de 264px x 64px. Posicione-a na parte de baixo  da nuvem para torna-la uma forma reta.

ícone de nuvem no Fireworks

No Fireworks tudo se alinha aos pixels por padrão. Não é preciso ativar essa opção, como no Photoshop. Se você redimensionar uma forma vetorial e deseja se livrar de pixels ao meio, pressione Ctrl + K para resolver o problema.

ícone de nuvem no Fireworks

Agora vamos tornar esse ícone em apenas contornos. No painel Property, defina o preenchimento para nulo ou transparente e outline stroke para 30px e preto. Defina o valor de Edge para 3, para que o traço fique suave. Faça o alinhamento do traço para a parte externa com o comando dedicado a isso, que fica abaixo do tamanho do contorno no painel Property. Você terá sua forma agora contornada em preto. Com a ferramenta Pen remova os pontos que você considerar desnecessários.

ícone de nuvem no Fireworks

Alguns ajustes são necessários para acrescentar outro elemento. De modo ideal, uma seta apontando para cima representa o upload de arquivos para a nuvem. Para fazer isso, é preciso modificar o traço. Aqui você verá um dos recursos mais interessantes do painel Path. Selecione a forma e, no painel Path, clique no ícone semelhante a 2S, chamado Convert Strokes to Fills. Ele expandirá o contorno para uma forma sólida, e isso pode ocupar um pouco de memória. É algo similar à função Expand do Illustrator, mas mais simples de se alcançar.

ícone de nuvem no Fireworks

É preciso criar um espaço para a seta. Para isso, crie um circulo de 180px com a ferramenta Ellipse. Posicione esse círculo no centro e abaixo da nuvem. Use o painel Align para ter mais precisão. No menu Window, escolha Align.

Uma vez que a forma tenha sido alinhada ao centro, volte ao painel Path e acione a ferramenta Punch Path.

ícone de nuvem no Fireworks

ícone de nuvem no Fireworks

ícone de nuvem no Fireworks

A forma que você tem agora precisa ser refinada para que não haja arestas mal recortadas na região inferior da nuvem.

Crie dois novos círculos de 30px x 30 px e posicione-os nos cantos onde a forma circular foi recortada, para tornar a silhueta mais suave. Ao terminar, faça a união dos círculos com a forma da nuvem ao usar o painel Path, com a ferramenta Union Path.

ícone de nuvem no Fireworks

Antes de prosseguir, veja a geometria do ícone. Tudo deve ficar bem alinhado e suave. A proporção de ouro usada ajuda a tornar o produto final mais agradável aos olhos.

Agora, a seta. Com a ferramenta Retangle, desenhe uma forma retangular vertical de 36px de largura e 200px de altura. Então, no painel Property, defina o valor de Roundness para 100%.

ícone de nuvem no Fireworks

Agora é possível finalizar a formada seta, apontando para cima. Garanta que a parte de baixo da seta esteja alinhada com o contorno da nuvem.

ícone de nuvem no Fireworks

Crie uma forma retangular de 35px x 120px e gire-a em 45 graus. Alinhe com a parte de cima da base da seta. Copie e cole a forma girando-a horizontalmente para criar a seta arredondada.

ícone de nuvem no Fireworks

Agora que a forma da seta está pronta, una os vetores e aplique um  gradiente para tornar o ícone mais interessante. Aplique um gradiente linear que vá do topo para baixo com as cores #0085B2 até #0059B2 para ter graduações de azul que lembrem as cores de um céu limpo.

ícone de nuvem no Fireworks

Verifique novamente a geometria. Veja como tudo se alinha perfeitamente e como a forma foi criada com lógica e consistência.

Agora que o ícone está pronto, você pode posiciona-lo onde preferir. Como é vetorial, é possível redimensiona-lo sem perda de detalhes.

O WordPress é um CMS todo feito em PHP.

Você gostaria de aprender essa liguagem tão poderosa e não tão difícil?

Assim você poderia construir o seu próprio CMS do seu jeito! Clique na imagem abaixo e receba, em seu e-mail, um mini-curso gratuito de PHP:

arte_sequencia_free

Receba o e-book com dois efeitos de texto em PHOTOSHOP

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.