Tutorial Fireworks : Criando flores

Um dos tutoriais que tive a oportunidade de criar e que teve uma ótima repercussão foi esse aqui, o Criando Flores.

Há três anos ninguém tinha idéia de como criá-las, não havia nenhum tutorial que pudesse explicar por onde começar, que ferramenta utilizar, enfim…

Hoje vejo que existem muitos tutoriais explicando como criar flores no Fireworks, onde os usuários baseiam-se na idéia explicada por mim, que agora você poderá ver aqui, no Tutorial Fireworks.

Tutorial: Criando Flores com Fireworks

1º – Crie um novo documento de 300px height por 300px width fundo branco.

2º – No painel de ferramentas vector selecione a opção Star e clique no palco. Automaticamente surgirá uma estrela com o tamanho definido em 190px height por 181px width.

Esta estrela contém pontos de controle (amarelo) em posições específicas, trata-se de um auto-shape (forma automática) do Fireworks. Veja em detalhe:

3º – Crie um mais um lado nesta estrela, de cinco vamos para seis.

Para dar a forma desejada, é preciso arrastar o ponto de controle arredondamento exterior.

A forma vai diminuir e ficar mais ou menos com este aspecto:

4º – Aumente a forma com a ferramenta Scale tool (atalho = q).

No próximo passo vamos começar a colorir a flor.

5º – Selecione a forma e no painel de propriedades clique em preenchimento, escolhendo a opção gradient > radial.

Resultado:

6º – Duplique a forma (ctrl + c e ctrl + v ou ctrl + shift + d) e em seguida diminua com Scale tool (atalho = q) para posicioná-la ao centro:

Em detalhe a copia posicionada ao centro:

No próximo passo vamos começar o uso de filtros, indo painel de propriedades > live filters.

7º – Com a copia selecionada vamos usar quatro filtros em seqüência.

Shadow and Glow > inner glow

Noise > add noise:

Blur > zoom blur:

E Sharpen > sharpen more:

Perceba como já vai tomando forma:

8º – Duplique a forma do centro e diminua um pouco:

Em seguida posicione também ao centro:

9º – Através do ponto de controle de adição de lados, vamos criar até o número 18:

Hum… quase lá…

Veja que a flor já está com aspecto bem bacana, mesmo assim vou adicionar mais um detalhe:

10º – Selecione está última forma duplicada e altere para preto a seguinte cor de seu preenchimento radial:

Pronto! Basta selecionar todos os objetos, agrupá-los (ctrl + g) e em seguida adicionar sombra em live filters > shadow and glow > drop shadow:

E aqui vai uma ilustração com flores, tendo naturalmente esse tutorial como base.

Read more...

Tutorial Fireworks : Criando layout - empresa de tecnologia: parte 1

Apresentação

Salve-salve Fireworkseiros de plantão!

Neste tutorial, veremos como criar um layout para uma empresa de tecnologia, utilizando algumas técnicas ainda não empregadas em tutoriais anteriores.

Pré-Requisitos

Facilidade quanto ao manuseio do Fireworks CS3/CS4

Objetivo

Criar um layout para uma empresa de tecnologia utilizando o Fireworks

Conteúdo

1º Passo – Definindo a Estrutura do Site

Como mencionei no tutorial Criando um Site Passo-a-Passo: Parte 5, a utlização de um Wireframe, ou seja, a criação de uma estrutura antes do desenvolvimento em si, faz com que economizemos tempo e otimizemos o processo de criação. Pensando nisso, vejamos como está dividido o layout a ser desenvolvido:

Fig. 01 - Wareframe - Estrutura do website

2º Passo – Utilizando Modelo do 960 Grid System

Grande parte dos layouts desenvolvidos por mim, utilizo como base para alinhamento e proporções, modelos do 960 Grid. Portanto, façamos o download no site oficial – 960.gs e descompactemos os arquivos PNG. Ao descompactarmos, veremos dois modelos: um 12_col (contém 12 colunas) e outro, 16_col (contém 16 colunas).

E qual deles usar?

Simples. Geralmente (eu disse: geralmente), se o layout tiver 3 caixas (exemplo: “Sobre a Empresa, Atendimento e Notícias, como na Fig. 01″), utilizaremos o modelo 12_col. Isso porque 12 é múltiplo de três. Já para um layout com 4 caixas, utilizaríamos o 16_col, devido o fato de 16 ser múltiplo de quatro.

Então, ao abrirmos o arquivo 960_grid_12_col.png, teremos:

Fig. 02: 960 Grid System - 12 Colunas

3º Passo – Criação do Topo – Tarja

Com um retângulo de 940 x 05 pixel, de preenchimento #28333C, criaremos uma pequena “tarja”:

Fig. 03 - Criação da tarja do topo

4º Passo – Criação do Topo – Barra de Menu

Criemos outro retângulo de dimensões 940 x 30 pixel, com a mesma cor da tarja e posicionamento X: 40 e Y: 70:

Fig. 04: Barra de menu

5º Passo – Criação do Topo – Logotipo, Feed e Twiter

Realizando os downloads do logotipo e ícones, complementaremos o topo como mostra as orientações das figuras 05 e 06 a seguir:

Download do Logotipo do Layout
(40,9 KiB, 255 downloads)
Você precisa ser um usuário registrado e fazer o LOGIN DE ACESSO para completar download deste arquivo. CADASTRE-SE! É de graça ;)

Download dos ícones: Feed e Twiter
(20,2 KiB, 403 downloads)

(desenvolvedor, o Dry Icons)

Fig. 05: Posicionamento do logotipo

Fig. 06: Ícones, Feed, Twiter e links do topo

Vejamos o resultado até aqui:

Fig. 07: Resultado até aqui

6º Passo – Criação do Topo – Barra de Menu

E concluindo o topo, utilizando a fonte Arial Narrow, tamanho 13 e cor #D7E1E8, posicionemos os itens como na imagem a seguir:

Fig. 08: Barra de menu - links

7º Passo – Criação do Background

Passemos agora para a criação do background do site. Façamos um retângulo com as dimensões 940 x 350 pixel. Em seguida, vamos aplicar um preenchimento gradiente do tipo barra (bars) com as cores branca e azul conforme a imagem abaixo:

Fig. 09: Criação do background

8º Passo – Inserindo Imagem dos Computadores

De acordo com a imagem abaixo, após realizarmos o download dos computadores, posicionemos nas coordenadas – X: 379 | Y: 71. E Complementemos com o slogan da empresa: “Empresa Especializada em Tecnologia WEB”

Download da Imagem dos Computadores
(27,9 KiB, 306 downloads)

Fig. 10: Inserção do slogan da empresa e imagem ilustrativa

9º Passo – Lista de Serviços – Textos

Criaremos agora a lista de serviços da empresa, juntamente com seus botões e ícones.

Posicionemos os textos conforme a imagem abaixo:

Fig. 11: Lista de serviços da empresa

10º Passo – Lista de Serviços – Ícone

Agora, criaremos os ícones para cada item da lista.

Primeiramente, façamos um círculo na cor branca e com as dimensões 14 x 14 px. Depois uma estrela que se transformará num triângulo de 7 x 6 px.

Fig. 12: Criação do ícone

11º Passo – Lista de Serviços – Botões

E para concluirmos esta seção, criaremos os botões “Saiba Mais…” e “Adquira Já!”

Fig. 13: Criação do botão

O mesmo processo deverá ser aplicada para a criação do outro botão.

Vejamos o resultado até aqui:

Fig. 14: Resultado parcial da primeira parte do tutorial

Bom, pessoal

No próximo tutorial, concluiremos o layout.

Até lá.

Read more...

Tutorial Fireworks : Background dots

Começarei a partir de hoje a explicar através de dicas e tutoriais, o que podemos fazer com os plugins do Richard Rosenman, mencionados há alguns dias aqui no blog.

Os plugins são totalmente compatíveis com qualquer versão do Fireworks, e podem ser a solução para muitas coisas, como por exemplo, na criação de um interessante background, cujo qual vou mostrar logo abaixo.

Para criar o background precisamos ter uma imagem bacana, de preferência com uma boa variação de cores, como essa:

Agora vamos utilizar o primeiro plugin, chamado Pixelate. Com a imagem selecionada, clique em Filters > Richard Rosenman > Pixelate

A imagem é distorcida em grandes pixels, como pode ser visto no preview do plugin.

Agora vamos partir para os dots, bolinhas em português, são elas que darão o toque desejado.

Selecione a imagem, clique em Filters > Richard Rosenman > Halftone

E o resultado do background:

Gostou? Tenha certeza que com mais alguns efeitos, do tipo: ajuste de contraste, adição de blur e até utilizando mais um plugin do Richard, o Solid Border, podemos deixar o background assim:

E para finalizar… dots…

Espero que tenha gostado. Qualquer dúvida fique a vontade para utilizar os comentários.

Read more...