Criando um ícone de nuvem no Fireworks | MarketingRJ
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.
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.
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.
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.
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.
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.
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.
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.
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.
É 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.
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.
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%.
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.
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.
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.
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: