Varios Tutoriais

[GuilhermeSM 0]

Olá pessoal...

Bom... este é meu primeiro tutorial... e espero que possa ser o primeiro de muitos outros...

Atendendo a pedidos do Fórum, resolvi fazer um tutorial de 'Como fazer um CD' no Fireworks

 

Vamos lá...

 

1) Crie um novo documento de tamanho 380 x 380 px, com fundo branco.

 

2) Fundo do CD:

 

» Selecione a ferramenta Ellipse Tool (U) e fa´a um circulo com medidas de 350 x 350 px, sem borda, na cor cinza claro (#F7F8F8).

 

» Feito isso, já temos pronto a 'base' para a cria´ão de nosso CD. Selecione o círculo criado, Aperte CTRL + C e logo após CTRL + V para fazer uma cópia do mesmo.

 

Selecione o novo círculo criado, e no painel de Propriedades defina como preenchimento do círculo a op´ão 'CONE'.

 

 

 

Abra o painel de configura´ões de cores do efeito de preenchimento ( ) e escolha a op´ão COBALT BLUE, em Preset. Sua imagem ficará assim:

 

(Clique na Imagem para Ampliar)

 

 

Feito isso, configure a paleta de cores conforme a figura abaixo, fazendo as modifica´ões necessárias:

 

 

 

Após configurar as op´ões do Degradê, altere os valores da camada para opacidade de 75% e Modo COLOR (Cor.)

 

 

 

3) Fazendo as 'linhas' do CD:

 

Fa´a um novo círculo de 340 x 340 px, Sem cor de preenchimento, com borda na cor Cinza Escuro (#9D9DA1), alinhe-o ao centro dos outros círculos (CD) e ajuste sua opacidade para 5% (Modo Normal).

Repita esse processo, fazendo novas circunferências, sempre diminuindo uma propor´ão de 10 px a cada novo círculo criado. Mantenha a opacidade sempre em 5%. Repita o processo até chegar num círculo com medidadas de 210 x 210 px.

 

Abaixo, uma imagem de como deverá ficar seu resultado semelhante ao exemplo abaixo, porém com os círculos interiores mais claros. No caso, dexei numa cor mais escura para melhor visualiza´ão de como deverá ser o processo!

 

 

 

Pronto. Agora vamos entrar nos detalhes..

 

4) Furo do meio e detalhes ao redor do CD

 

» Fa´a um novo círculo de 123 x 123 px, com cor de preenchimento #9D9DA1 e borda na cor #ECEBED, coloque opacidade de 10% e alinhe-o ao centro.

 

» Crie um novo círculo, no tamanho de 110 x 110 px, com cor de preenchimento branco (#FFFFFF) e borda cinza claro (#E0DFE3). Mantenha a opacidade de 100%.

 

» Crie um novo círculo, mantendo o tamhno de 110 x 110 px, na cor #E0DFE3 e borda #ECEBED. Coloque esse círculo acima do anterior. Coloque opacidade de 10% no Modo Darken.

 

» Agora, fa´a um círculo de 50 x 50 px, de preenchimento branco (#FFFFFF) e borda cinza (#D6D3DA). Mantenha opacidade de 100% e alinhe-o ao centro, acima de todos os outros círculos.

 

» Agora, crie mais um, o último círculo, no tamanho de 353 x 353 px, sem cor de preenchimento e borda na cor #E0DFE3. Centralize esse círculo aos outros

[GuilhermeSM 0]

Surgiu no nosso fórum uma dúvida de como melhorar uma foto, dando uma impressão diferente a esta. No caso foi citado que o programa Photoshop poderia fazer maravilhas, e todos nós sabemos que pode, mas ainda sim os usuários queriam saber se era possível no Fireworks. A resposta é sim, mas com uma certa limita´ão. Na coluna de hoje iremos ver uma aplica´ão. Então vamos lá:

1) Abra uma imagem, no nosso caso estaremos utilizando esta:

 

 

2) Selecione esta imagem, copie-a(Ctrl+C) e cole-a(Ctrl+V), de modo que esta segunda imagem fique sobre a imagem base.

 

 

3) Com esta segunda imagem selecionada vá em Filters » Noise » Add Noise, e coloque o valor 5. Você ficará com uma imagem assim:

 

 

4) Com esta imagem selecionada, vá em Filters » Blur » Gaussian Blur, e coloque valor 3.5, sua imagem ficará assim:

 

 

 

5) Selecione a imagem originar, copie-a(Ctrl+C) e cole-a(Ctrl+V) de modo que ela fique sobre as outras duas imagens.

 

6) Com esta imagem selecionada, vá em Filters » Sharpen » Sharpen More, repita este passo mais uma vez, sua imagem ficará assim:

 

 

7) Agora no painel de layers, oculte as duas primeiras imagens, clicando nos "olhos" ao lado do nome de cada layer:

 

 

Você deverá visualizar agora apenas a nossa imagem original.

 

8) Vamos dar uma cor diferente aos olhos. Para isto com a ferramenta Oval Marquee Tool(M) selecione os dois olhos, assim:

 

 

9) Vá em Filters » Adjust Color » Hue/Saturation e coloque estas especifica´ões:

 

 

10) Agora no painel de Layers, clique no local dos "olhos" para que os layers apare´am novamente. Selecione o layer superior. Coloque-o em modo Lighten.

 

 

11) Selecione o layer do meio, e coloque-o em modo Screen.

 

12) Pronto, a nossa imagem ficou com um aspecto de digitalizada. Agora é só ter coriosidade e ir aplicando vários efeitos para conseguir melhora-la.

 

 

Eu adicionei algumas scan lines e obtive este resultado:

 

 

Créditos ao Insider e ao seu tutorial para PS:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Espero que tenham gostado, e até a próxima.

[GuilhermeSM 0]

Salve Comunidade! Nesta matéria abordaremos o ambiente 3D no Fireworks.

 

 

 

Abra um novo documento de 300 x 300 px. Com a ferramenta elipse (U), crie um circulo de 100 x 100 px e depois aplique a cor (#666666). Clone a elipse (CTRL+SHIFT+D), aplicando a cor (#000000) na elipse debaixo.

 

 

 

 

 

 

Com a ferramenta distorcer (Q), vamos agora aplicar a perspectiva à elipse para dar um efeito de sombra . Após esta etapa, vamos aplicar um desfoque para que nossa sombra não fique com uma aparência estranha. Filtros>>Emba´ar>>Desfoque Gaussioano...

 

 

 

 

 

Aplique um desfoque de 7.2 .Sua elipse deve estar com esta aparência:

 

 

 

Agora vamos trabalhar na elipse que está em cima. Aplique um preenchimento radial, com as cores da imagem:

 

 

 

Troque a posi´ão do efeito radial como segue na imagem:

 

 

 

Aplique um efeito de Matiz/Satura´ão, Filtros>>Ajustar cor>>Matiz/Satura´ão...

 

 

 

Com os seguintes parâmetros:

 

 

 

Para finalizar, aplique novamente o efeito Matiz/Satura´ão, sendo que agora na elipse de cima, com o parâmetro=1.

 

Desta forma a imagem terá o seguinte resultado.

.

Semana que vem conversamos mais.

 

 

Todos os artigos de Felipe Macena

20/02/2004 - Fireworks x Director 02/02/2004 - Efeitos luminosos 16/01/2004 - Efeito Plástico 06/01/2004 - Integra´ão Fireworks x Director 17/12/2003 - Integra´ão Fireworks e Photoshop 11/12/2003 - Desmistificando Exporta´ão 03/12/2003 - Eye Candy 4000 27/11/2003 - Otimiza´ão de Imagens 20/11/2003 - Integra´ão - Fireworks e Flash 13/11/2003 - Album com Thumbs - Parte 02 05/11/2003 - Álbum de fotos com thumbs 30/10/2003 - Camuflando JavaScript 23/10/2003 - Efeito Reflexo 14/10/2003 - Mp3 Player - Parte 03 08/10/2003 - Mp3 Player - Parte 02 01/10/2003 - Mp3 Player - Parte 01 24/09/2003 - Curvas 16/09/2003 - Pixel Art 08/09/2003 - Ambiente 3D 04/09/2003 - Tradu´ão do Firewoks MX 27/08/2003 - Fireworks 2004 e combinando tra´ados 19/08/2003 - Novas texturas 13/08/2003 - Processo em lote - 02 05/08/2003 - Processo em lote 28/07/2003 - Integra´ão Fireworks + Dreamweaver 22/07/2003 - Site completo pelo Fireworks - Trabalhando com frames 15/07/2003 - Site completo pelo Fireworks - Banner animado 07/07/2003 - Site completo pelo Fireworks - Parte 02 30/06/2003 - Site completo pelo Fireworks 25/06/2003 - Tracejados 17/06/2003 - Menu drop down 09/06/2003 - Botões rollovers 02/06/2003 - Mini botões 27/05/2003 - Um novo botão Falar com o autor Indicar para um amigo Postar um comentário Intera´ão com a materiaÁrea exclusiva e gratuita para os usuários logados (expandir)expandir fecharLeitor: Seu painel de controle sobre cada matériaAvalie esta matéria Indique a um amigo Poste um comentário Grave suas anota´ões Fale com o autor Conhe´a o painel "Meu iMasters"

 

 

Personalize o iMasters de acordo com sua opinião!

O que você pode fazer:

Avaliar esta matéria entre 1 e 5 estrelas e poder gravar suas matérias preferidas Indicar esta matéria a um amigo Escrever um comentário, que ficará visível para todos os leitores Gravar suas anota´ões particulares sobre esta matéria Falar com o autor

[GuilhermeSM 0]

Salve Comunidade! Dando continuidade a nossa série de colunas na constru´ão de um layout completo pelo Fireworks, veremos a parte do banner (gif animado).

 

Todas as imagens utilizadas neste tutorial você poderá ter acesso clicando aqui.

 

 

 

1ª Semana - Formas arredondadas, efeitos de sombreamento, ilumina´ão e brilho.

2ª Semana - Menu rollover com descri´ão na barra do navegador.

3ª Semana - Banner (gif animado)

4ª Semana - Usando frames no Fireworks, efeito tipo arquivo.

 

Trabalharemos com um banner tamanho 468 x 60px (full banner).

 

Abra um novo documento com tamanho 468x60 e adicione um fundo na cor branca. Com as imagens que foram disponibilizadas no início desta coluna, vamos montar a primeira moldura do nosso banner, mostrada abaixo.

 

 

 

Agora vamos por partes:

1º - As linhas horizontais;

2º - O fundo em degradê;

 

Para fazer o fundo em degradê utilizaremos a propriedade LINEAR

 

 

 

Desenhe um retângulo com tamanho 467x60 utilizando a ferramenta retângulo (U). Após terminar o desenho, retire a borda e aplique a propriedade linear utilizando as cores (#FFFFFF) e (#FFFF00).

 

.

 

Para aplicar as linhas horizontais, aplique a textura linha horizotal 4 e aplique 100%..

 

 

 

Ao término destas etapas, sua imagem será a seguinte:

 

 

 

Monte o restante do banner com as imagens que disponibilizamos no início da coluna. Aplique uma borda utilizando um retângulo sem cor e com cor de borda preto de 1px.

 

Para criar uma nova moldura (frame), deveremos duplicar a moldura1, deste modo não teremos que redesenhar alguns ítens que serão iguais.

 

Para duplicar a moldura seguimos os passos abaixo:

 

 

 

 

 

 

 

Repita estes procedimentos duas vezes para que tenhamos três molduras.Clicando na moldura 2 vamos editá-la.

 

 

 

Permanacendo com o mesmo fundo, sé acrescentaremos as imagens que faltam e deletamos as outras que sobraram na moldura 1, de modo que fique com o formato abaixo.

 

 

 

Clicando na moldura 3, vamos editá-la.

 

 

 

 

 

Agora temos as três molduras do nosso banner prontas. Vamos configurar o tempo de cada uma delas. Dando um duplo clique em cima da numera´ão que se encontra ao lado da janela molduras, teremos o tempo que cada moldura aparecerá.

 

 

 

Lembrando que para 1segundo, temos que colocar 100 e assim por diante. No nosso exemplo colocamos 250 que representa 2,5 segundos.

 

Vamos agora exportar o nosso banner. Clicando CTRL+SHIFT+X

 

 

 

Escolhemos o op´ão gif animado e deixamos o restante do mesmo formato.

 

No guia Anima´ão colocaremos no relógio o tempo de 250.

 

 

 

Exportamos o nosso baner com 32 cores e aí teremos o seguinte resultado.

 

 

 

Pronto chegamos ao final da nosso terceira etapa. Qualquer dúvida é só mandar um email, ou acessar o Fórum iMasters na sessão Fireworks.

 

Todos os artigos de Felipe Macena

20/02/2004 - Fireworks x Director 02/02/2004 - Efeitos luminosos 16/01/2004 - Efeito Plástico 06/01/2004 - Integra´ão Fireworks x Director 17/12/2003 - Integra´ão Fireworks e Photoshop 11/12/2003 - Desmistificando Exporta´ão 03/12/2003 - Eye Candy 4000 27/11/2003 - Otimiza´ão de Imagens 20/11/2003 - Integra´ão - Fireworks e Flash 13/11/2003 - Album com Thumbs - Parte 02 05/11/2003 - Álbum de fotos com thumbs 30/10/2003 - Camuflando JavaScript 23/10/2003 - Efeito Reflexo 14/10/2003 - Mp3 Player - Parte 03 08/10/2003 - Mp3 Player - Parte 02 01/10/2003 - Mp3 Player - Parte 01 24/09/2003 - Curvas 16/09/2003 - Pixel Art 08/09/2003 - Ambiente 3D 04/09/2003 - Tradu´ão do Firewoks MX 27/08/2003 - Fireworks 2004 e combinando tra´ados 19/08/2003 - Novas texturas 13/08/2003 - Processo em lote - 02 05/08/2003 - Processo em lote 28/07/2003 - Integra´ão Fireworks + Dreamweaver 22/07/2003 - Site completo pelo Fireworks - Trabalhando com frames 15/07/2003 - Site completo pelo Fireworks - Banner animado 07/07/2003 - Site completo pelo Fireworks - Parte 02 30/06/2003 - Site completo pelo Fireworks 25/06/2003 - Tracejados 17/06/2003 - Menu drop down 09/06/2003 - Botões rollovers 02/06/2003 - Mini botões 27/05/2003 - Um novo botão Falar com o autor Indicar para um amigo Postar um comentário Intera´ão com a materiaÁrea exclusiva e gratuita para os usuários logados (expandir)expandir fecharLeitor: Seu painel de controle sobre cada matériaAvalie esta matéria Indique a um amigo Poste um comentário Grave suas anota´ões Fale com o autor Conhe´a o painel "Meu iMasters"

 

 

Personalize o iMasters de acordo com sua opinião!

O que você pode fazer:

Avaliar esta matéria entre 1 e 5 estrelas e poder gravar suas matérias preferidas Indicar esta matéria a um amigo Escrever um comentário, que ficará visível para todos os leitores Gravar suas anota´ões particulares sobre esta matéria Falar com o autor

 

Comentários desta matéria (3) Avalia´ão desta matéria: Banner solitário... Publicado por Rom Gyver, 07/12/2004 16:12 Seus tutorias são fantásticos!!! Esse do site completo é incrível... Mas não sei como integrar o banner no projeto do site. Você não disse como fazer isso... problemas ao salvar Publicado por helinaldo costa, 04/02/2006 10:02 fa´o sempre como vc explica, fica legal. mas qd salvo ele ta todo divido por partes , de modo que não consigo inserir ele no site? Banner Publicado por mauro souza, 02/08/2006 16:08 Como fa´o para colocar junto com o projeto pronto? Obrigado