Salve, comunidade MX Studio!

O Fireworks é, vamos dizer assim, uma espécie de software multi-uso, quase tudo relacionado a imagens pode ser feito com ele, desde uma simples edição a uma grande criação, como o layout de um web site.

“Layout”, de todas as funções do Fireworks essa sem dúvidas é a principal. Para os que não sabem, layout de um site é o projeto gráfico do mesmo, sempre ao desenvolvermos um devemos fazer esse projeto, e só depois montá-lo no Dreamweaver ou qualquer outro editor de web. Por essa razão, escolhi esse como tema dessa coluna.

Nos parágrafos abaixo aprenderemos a fazer o seguinte layout. O mesmo é sobre uma empresa fictícia chamada “mx design”, que trabalha com a criação de sites pessoais e profissionais.

Para tornarmos o site acessível, se não a todos, a pelo menos a enorme maioria dos internautas, o faremos na resolução de 778px de largura, assim ele poderá ser visto perfeitamente por pessoas que usam como resolução do monitor a partir de 800x600px (são 778px e não 800, pois há os 23px da barra de rolagem).

Portanto, crie um novo documento no Fireworks com o tamanho de 778x700px.

Crie um retângulo que cubra toda a largura do documento. Para altura defina 215px. Posicione-o no topo do documento (X=0; Y=0).

Crie agora outros dois retângulos mais escuros (#510051) que, em largura, cubra o que você criou anteriormente. Faça um com 4px de altura e outro com 2px.

Coloque o maior em cima e o menor embaixo, assim como visto na figura seguinte.

Duplique (CTRL+SHIFT+D) o retângulo do fundo, o mais claro, o maior. Com a ferramenta pen (tecla de atalho: P) edite-o para que fique da seguinte forma:

Aplique a essa forma um gradiente linear das cores #890089 opaco para #770077 transparente com a disposição como mostra a figura a seguir:

Duplique (CTRL+SHIFT+D) a forma em que estamos trabalhando e inverta a cópia surgida horizontalmente (Modify > Transform > Flip Horizontal). Posicione-a do outro lado do topo.

Mude a disposição do gradiente para “de baixo para cima”, lembrando que a bolinha indica o começo e o quadrado o fim do mesmo. No gradiente mude também a cor inicial de #890089 para #A800A8.

Faremos agora o menu. Para isso crie um retângulo de cor prata num tom claro (#F1F1F3) de 5px de altura, logo abaixo do retângulo roxo, que cubra toda a largura do documento.

Com a ferramenta Rounded Rectangle crie um retângulo arredondado de 115x65px.

Posicione-o a 5px de distância da lateral esquerda. Mais precisamente na posição x=5 y=76.

Toda forma construída através das ferramentas de formas pré definidas do Fireworks (Círculos, retângulos, retângulos arredondados, trapézios, dentre outros) vem agrupada, sendo assim, para podermos editá-la com as ferramentas de edição vetorial, como a pen e a knife, deveremos desagrupá-la. Para isso selecione-a e pressione CTRL+SHIFT+G.

Ainda com esse objeto selecionado, usando a ferramenta knife (tecla de atalho: Y) corte-o de forma que a maior parte fique em cima. Tente cortá-lo no rumo do retângulo roxo. Para cortar basta clicar com o botão esquerdo do mouse e arrastá-lo para a direção em que você deseja cortar.

Com o corte, você partiu a forma em duas, já que usaremos apenas a parte de cima, delete a de baixo. Selecione a que sobrou, a de cima, e aplique nela um gradiente linear de prata claro (#F1F1F3) para um prata um pouco mais escuro (#BBBBC4). Disponha-o como mostra a figura abaixo:

Duplique a forma. Da cópia que surgir diminua 2px da largura e 1px da altura. Após isso centralize-a com a forma do fundo, a maior. Isso deixará um efeito de contorno gradiente quando acabarmos o menu. Altere o gradiente para a disposição “de cima para baixo” e as cores para “branco opaco para branco transparente”.

Faremos agora a setinha que indica o item do menu. Para isso, crie um triângulo roxo (#930093) com a ferramenta pen como mostra a figura abaixo:

Duplique esse triângulo e inverta verticalmente (Modify > Transform > Flip Vertical) a cópia que surgirá. Posicione-a abaixo do outro triângulo de forma que se forme uma seta. Mude a cor do preenchimento para um roxo mais escuro (#710071).

Agrupe (CTRL+G) esses dois triângulos que agora forma uma seta.

Escreva o nome da seção a que esse item do menu corresponde. Como fonte, usei a Trebuchet MS no tamanho 15 com “Smooth Anti Alias” para suavizar as bordas.

Agrupe (CTRL+G) todo o menu para facilitar o trabalho.

Duplique esse grupo de objetos e mova a cópia para a direita deixando-a 5px de distância do outro grupo.

Com a ferramenta Subselection (tecla de atalho: A) selecione o texto e altere-o para o nome da seção a que esse item do menu corresponde.

Repita esse mesmo processo para criar o restante do Menu.

Importe (Arquivo -> Import…) o logotipo de sua empresa e posicione-o no topo do layout, acima do menu.

Crie uma setinha, assim como a usada no menu, só que com a cor branca. Ao lado dela escreva o slogan de sua empresa com a fonte Trebuchet MS, tamanho 14, Itálica. Posicione-os junto ao logotipo.

Para dar um toque bem legal no layout é sempre bom usar fotos, essas achamos aos montes na internet, algumas com direitos controlados, outras gratuitas.

Pesquise no Google ou em qualquer outro sistema de busca por “Banco de imagens” que você achará muitos sites legais sobre o assunto. Usei para o topo uma foto de uma mulher dando a entender “Bem vindo”. Tente fazer o mesmo, procure fotos que se encaixam bem no seu layout e depois veja como elas ficam nele.

O topo, nesse caso a parte mais complexa, está pronto, faremos agora a parte de baixo – geralmente chamada de “button”.

O button foi feito com os mesmos princípios do topo, diferenciando-se apenas no retângulo maior que é um gradiente linear de roxo claro (#A800A8) para roxo escuro (#750075) com um contorno da cor #750075.

Assim como no topo, é preciso criar também o retângulo de cor prata claro acima do retângulo principal (roxo maior) e também os outros dois roxos escuros na base.

No Button geralmente coloca-se os direitos da página e, se couber, uma lista simplificada de todas as áreas do site também. Para escrever isso use a fonte Verdana no tamanho 10 com a cor #DAB3DA.

A parte inferior do layout já está pronta. Falta agora só preencher a seção que exibe o conteúdo. Essa será aquela que se altera de acordo com o que for requisitado pelo menu. No layout a representaremos com a página inicial, a “Index”.

Organize o layout em quatro partes, que é o ideal para o que nossa empresa fictícia precisa expor em sua página de boas vindas. Para separar use retângulos de cor de preenchimento cinza claro (#FAFAFA), com 2px de distância dos cantos. Faça como mostra a figura a seguir:

Para dividir melhor, crie também com a ferramenta line (tecla de atalho: N) uma linha vertical e outra horizontal de cor #EDEDF1 nas extremidades dos retângulos. Veja na primeira figura da matéria, a do layout completo, como deve ficar.

No topo do conteúdo, na parte da direita colocaremos um chamativo para a empresa que terá o título “Por que escolher a mx design”. Na parte esquerda do mesmo colocaremos uma foto para dar uma realçada na parte do conteúdo.

Para o título do conteúdo ao lado direito no topo utilize a fonte Trebuchet MS em smooth Anti Alias no tamanho 14 e cor roxa (#710071). Para separá-lo do conteúdo faça dois retângulos de cor #EDEDF1, um com 1px de altura (o de cima) e outro com 3px (o de baixo), para ambos dê uma largura de 300px. Separe-os por 1px em distância vertical.

Selecione o retângulo maior, o de baixo, e aplique a ele a textura “Line-Diag 1” com intensidade 100. Isso fará com que ele fique cortado por várias linhas diagonais, dando um efeito bem bacana.

Adicione um texto a essa parte do layout, e formate-o para Verdana, tamanho 11 e cor #51545E.

Dica: Caso você ainda não saiba o que irá escrever utilize uma linguagem que não significa nada a não ser que ali virá um texto ainda não desenvolvido. Essa linguagem tem um nome, chama-se Lorem Ipsum, quase todos os textos nesse layout foram escritos nela, por isso que se você leu algum não entendeu nada.

Você pode achar parágrafos prontos no idioma inventado – apesar de baseado no latim – no site da Lorem Impsum – www.lipsum.com.

Para a foto, na parte esquerda do topo, quis colocar uma idéia de “olhe a interação entre nossa equipe de trabalho e a qualidade da mesma”. Tente colocar a que você achar melhor ali. Animações em Flash geralmente também ficam muito legais se bem feitas.

Na parte inferior esquerda do site colocaremos um sistema de Newsletter – notícias enviadas periodicamente através de e-mail -. Na inferior direita colocaremos os trabalhos ou acontecimentos mais recentes da empresa.

Dê uma olhada na primeira imagem da matéria, o layout. Veja que tudo o que foi feito na parte de Newsletter já foi explicado antes, menos a caixa de texto e as caixas de marcar, mas esses são apenas uma representação já que formulários só podem ser feitos pelo Dreamweaver. Portanto, usando as mesmas técnicas usadas anteriormente faça a seção “Newsletter”.

Na parte inferior direita colocaremos três notícias, portanto a dividiremos em três partes verticais. Para isso crie um retângulo com um cinza bem claro (#FDFDFD) que cubra toda a altura dessa parte, mas apenas um terço da largura desta. Veja na figura abaixo:

Divida essas partes também com linhas verticais da cor #EDEDF1 usando a ferramenta line.

Adicione o conteúdo das notícias que serão nada mais que fotos e breves textos de descrição.

Os textos usados para essas notícias foram escritas com a fonte Verdana de tamanho 10. Sendo as descrições na cor #51545E e os títulos na #710071.

Como vai galera da MX Studio?

Cruzeiro de novo?! Aposto que é o que vocês estão se perguntando… Mas, sim, de novo, entretanto uma figura completamente diferente, técnicas completamente distintas do artigo anterior. O que aconteceu foi um desentendimento entre a equipe de colunistas da MX Studio, na primeira coluna da maratona eu disse que a próxima matéria seria sobre o cruzeiro, mas o Fábio Massarato não leu – nem tinha obrigação disso, claro -. Por já ter escrito que iria fazer na própria coluna nem registrei isso no fórum de colunistas. Acabou que o Fábio postou a coluna dele e depois que foi ver que eu já ia fazer, acontece que eu já tinha escrito quase todo o artigo, portanto não termina-lo, nem posta-lo seria um desperdicio, visto que, apesar de ser sobre o mesmo clube, as imagens ficaram bem diferentes.

Para quem quiser ler o artigo do Fábio Massarato: Maratona de Símbolos de Clubes de Futebol – Parte 3

O objetivo do tutorial é construir a seguinte imagem:

Nele você vai aprender alguns efeitos que poderão ser usados em vários tipos de ilustração e não apenas no escudo do Cruzeiro, portanto vale a pena faze-lo, mesmo que não torça para o time.

Requerimentos: Conhecimento da ferramenta Pen

1 – Crie um círculo azul (#234F84) de 112px de latura e 112px de largura.

2 – Duplique esse círculo (Ctrl + Shift + D). Selecione o de trás (mais abaixo no painel Layers – veja a figura 2.1) redimensione-o numericamente (Modify -> Transform -> Numeric Transform; ou Ctrl + Shift + T), na caixa onde se pergunta a porcentagem do redimensionamento coloque 146%.

3 – Mude o preenchimento desse vetor, agora o maior, para branco e o contorno para azul (#234F84).

4 – Com a auto-forma “Estrela”, desenhe quatro estrelas brancas no círculo azul como mostra a figura à seguir:

5 – Escreva “CRUZEIRO ESPORTE CLUBE”, note que há dois espaços entre “Cruzeiro” e “Esporte”. Formate o texto com as seguintes propriedades:

6 – Duplique o círculo do centro, o com preenchimento azul. Redimensione numericamente (Ctrl + Shift + T) a cópia para 105%.

Observação: A cópia é a que aparece mais em cima no painel Layers.

7 – Com o círculo que você acabou de aumentar e o texto selecionados simultaneamente, vá em (Menu Text -> Atach to Patch; ou Ctrl+ Shift + Y).

8 – Com a ferramenta Scale ( – Q ) rotacione o texto até ficar como a figura abaixo.

O símbolo está pronto. Vamos aplicar alguns efeitos agora.

9 – Agrupe as estrelas (Ctrl + G).

10 – Torne todos os objetos invisíveis, menos o círculo azul do centro, não iremos usa-los agora.

11 – Modifique o preenchimento do círculo azul para um gradiente radial das cores #39A4CC para #234F84.

12 – Aplique ao círculo a textura “Oilslick” em 8%.

13 – Adicione uma sombra interna na cor #28517D com distância 13, opacidade 65%, softness 13 e ângulo 90º. (Filters, em Propriedades -> Shadow and Glow -> Inner Shadow).

14 – Adicione outra sombra, igual à de cima, mudando apenas o ângulo para 270 º.

15 – Duplique o círculo (Ctrl + Shift + D), selecione a cópia, o objeto mais acima. Redimensione esse objeto numericamente (Ctrl + Shift + T) para 90% de largura e 100% de altura.

Obsevação: Não se esqueça de desmarcar a caixa “Constrain proportions”, ela torna o redimensionamento proporcional assim não permitindo que se coloque valores diferentes nas duas caixas.

16 – Modifique a cor das sombras nesse novo objeto criado. Para isso selecione o objeto e clique duas vezes no primeiro inner shadow, na caixa “Filters”, em propriedades. Mude a cor para #49ABCA. Faça o mesmo com o outro inner shadow.

17 – Coloque esse vetor em Feather de intensidade cinco.

18 – Defina a opacidade desse objeto para 25%.

19 – Duplique (ctrl+shift+d) o maior círculo, o do fundo. Redimensione a cópia numericamente (Ctrl + Shift + T) para 98%.

20 – Utilizando a Pen Tool ( – P ) crie dois pontos (circulados em verde na figura abaixo) no círculo redimensionado no passo anterior e delete outros dois (circulados em vermelho).

21 – Com a Subselection Tool ( – A ) mova o ponto mais inferior no circulo para cima, como mostra a figura abaixo.

Dica: Utilize a tecla Ctrl para alternar entre as ferramentas Pen e Subselection.

22 – Retire os dois inner shadows e também a textura.

23 – Altere o preenchimento desse vetor para um gradiente linear de transparência da cor branca.

24 – No painel layers, altere a posição desse objeto para cima de todos os círculos.

25 – Duplique (ctrl+shift+d) esse objeto. Modifique o novo vetor (o mais em cima no painel layers) com a ferramenta Pen e Subselection para que ele fique como a figura a seguir:

Obs.: Não expliquei esse passo detalhadamente pois isso levaria pelo menos mais uns 10 passos, portanto caso não consiga fazer, aconselho que leia o artigo “Vector – Parte 1” e/ou assista o vídeo sobre como fazer esse passo.

26 – Modifique a disposição do gradiente para que fique como a mostrada na imagem abaixo.

27 – Duplique o círculo principal (o maior). Redimensione a cópia numericamente (Ctrl + Shift + T) para 98%.

28 – Através das ferramentas Pen e Subselection modifique o vetor surgido na duplicação para que fique como a imagem abaixo:

Caso não consiga aconselho que leia o artigo indicado no passo 25 e/ou assista o vídeo sobre como fazer esse passo.

29 – Retire os efeitos de inner shaddow e de textura, assim como foi feito no passo 22.

30 – Altere o preenchimento para branco sólido e a opacidade para 7.

31 – Duplique (ctrl+shift+d) esse vetor e vire horizontalmente (Modify -> Transform -> Flip Horizontal) o que surgiu.

32- Mantenha-no posicionado na mesma altura, mas do outro lado do círculo.

33 – Agrupe todos os objetos desse círculo (ctrl+shift+g) e torne visível a grupo de obejetos que contém as estrelas.

34 – Altere o blend mode desse grupo para “Soft Light”, caso você não tenha o Fireworks 8 ou superior instalado, alterar a opacidade para 50% dá um efeito parecido, mas não igual.

35 – Torne visível o maior dos círculos, aquele que circula o principal.

36 – Altere o traçado para branco e o preenchimento para um gradiente linear de prata(#D9D9E1) para branco para prata(#D9D9E1), fazendo um efeito metálico.

37 – Para terminar o efeito metálico duplique (ctrl+shift+d) esse círculo e selecione o que aparecer mais em baixo no painel layers para aplicar o passo seguinte.

38 – Altere o traçado para a cor #B5B5C1 e defina sua disposição para “Outside Patch”.

39 – Torne visível o texto “Cruzeiro Esporte Clube”.

40 – Aplique ao texto um gradiente em forma de cone alterando entre azul claro (#2C96BE) e azul escuro (#234F84):

41 – Adicione a esse texto um efeito glow branco de Raio=1; Opacidade=65%; Soft=2.

Coluna Fireworks – Efeitos de Texto – Parte 2

Salve, comunidade

Em primeiro lugar, bem vindos! Nessa coluna ensinarei à fazer mais 3 efeitos de texto. Como dito na primeira parte esse tipo de efeito é encontrado com cada vez mais frequência em nosso dia-a-dia, os vemos em logotipos, em anúncios, blogs, flogs, etc. Portanto é de extrema importância aprender tais técnicas para que com nossa criatividade possamos desenvolve-los.

Texto 3D

Requerimentos: Macromedia Fireworks 8

Como primeiro efeito abordarei um 3D, é bem bacana e a técnica pode ser utilizada de diversas formas assim permitindo vários resultados com apenas algumas trocas de valores, como cor, posição, fonte e alguns filters.

1. Com a fonte Tahoma no tamanho 110 em negrito escreva seu texto, nesse caso utilizei “MX STUDIO”

2. À ele aplique um preenchimento gradiente linear de um verde claro para um verde escuro.

3. Com a Skew tool incline a parte superior do texto para dentro para dar a impressão de que o mesmo se encontra deitado.

4. Duplique (ctrl+shift+d) esse texto e torne a camada mais superior invísivel (clique no olho ao lado da mesma no painel layers). A usaremos mais tarde.

5. Adicione ao texto (o único visivel agora) o efeito Solid Shadow com as seguintes configurações:

Seu texto deverá ter a seguinte aparência:

6. Como pode notar o texto não tem muito contraste entre a parte superior e a solid shadow, que da a profundidade. Para isso usaremos a camada tornada invísivel no passo 4. Torne-a visível e modifique a cor do texto, que se encontra em gradiente, para solid – branco.

7. Adicione à ele um Gaussian Blur (Filters – no painel propriedades – -> Blur -> Gaussian Blur) de intensidade 1.4 e mude o blend mode da camada para Fuzzy Light.

8. Para um efeito à mais e deixar o texto com maior destaque duplique (ctrl+shift+d) o texto com solid shadow.

9. No que ficou mais embaixo mude a cor para preto e aplique um Gaussian Blur de intensidade 1.2.

Pronto! Terminamos o primeiro efeito. Caso ele não tenha ficado igual verifique se as camadas estão corretamente ordenadas:

Veja outro efeito usando os mesmos principios:

Bélissimo

“Bélissimo” é uma brincadeira com a atual novela das oito, ou melhor, das nove. É o logotipo, o qual acho realmente muito bonito.

Requerimentos: C onhecimento básico de vetores

Utilizei o fundo azul, pois o efeito não fica tão legal ao ser usado com o branco, as sombras se destacam muito, nem com o preto, onde as sobras não aparecem.

1. Dê ao fundo a cor #2A79A9.

2. A fonte usada é uma variação da famosa Times New Roman, portanto, usando a mesma no tamanho 74 e em itálico escreva seu texto, utilizei “Belíssima”.

3. Com a Skew tool incline o texto mais ainda, a formatação itálico não é o suficiente.

4. Iremos agora fazer algumas mudanças na fonte. Para isso transforme o texto em vetor (ctrl+shift+p).

5. Com a ferramenta subselection () modifique o acento no primeiro “I” e aa pontas dos “S” de acordo com a seguinte figura:

6. Aplique o seguinte gradiente linear ao texto:

#FEFC81

#D3C014

7. Nomeie essa camada como “Principal”, sempre que quiser me referir à ela direi “camada ‘Principal’”. Duplique-a e renomeie a na posição mais superior como “Efeito”.

8. Mude o gradiente linear do texto da camada “Efeito” para:

*Note que a direção, que antes era de baixo para cima, mudou para de cima para baixo.

9. Selecione a Skew Tool e incline o mesmo texto para a direita até ele ficar da seguinte forma:

10. Duplique a camada “Principal”, com isso fica duas camadas “Principal”, nomeie uma para “Máscara”.

11. Coloque a camada “Máscara” acima da “Efeito”, mude a cor da mesma para solid – branco.

12. Selecione em conjunto com a camada “Máscara” a camada “Efeito” e os grupeie como máscara (Modify – no menu do topo – -> Mask – > Group as mask).

13. Duplique a camada “Principal” novamente, das duas camadas, a original e a cópia, renomeie uma para “Inner Shadow”.

14. Mova a camada “Inner Shadow” para cima de todas. Adicione à ela o efeito Inner Shadow (Filters – no painel propriedades – -> Shadow and Glow -> Inner Shadow) com as seguintes configurações:

15. Faça outra duplicação da camada “Principal”. Renomeie a na posição mais inferior no painel layers das duas camadas iguais para “Sombra 1″.

16. Mude a cor do texto da camada “Sombra 1″ para solid – preto e seu modo de suavização (edge) para Feather – 2. Por último diminua sua tranparência para 75%.

17. Outra duplicação da camada “Principal”… Renomeie uma das duas camadas “Principal” para “Sombra 2″.

18. Mova a camada “Sombra 2″ para baixo de todas as outras. Nela ainda mude a cor do texto para solid – preto e seu modo de suavização (edge) para Feather – 2.

19. Selecione a camada “Principal” e adicione á ela uma Drop Shadow (Filters – no painel propriedades – -> Shadow and Glow -> Drop Shadow) com as seguintes propriedades:

20. Para finalizar, ainda na camada “Principal”, para ajustar a cor, adicione o efeito Brightness and Contrast (Filters – no painel propriedades – -> Adjust Color -> Brightness and Contrast) com as segintes configurações:

Mais um efeito terminado! Caso não tenha conseguido chegar ao resultado desejado confira a organização das camadas:

Efeito 3

Esse terceiro efeito da a impressão de que o texto está prestes a explodir e possui um efeito de brilho bem bonito. procure aplica-lo com fundos escuros.

1 – Usando a fonte Deloise no tamanho em que desejar, nesse caso utilizei o 78, digite o texto.

2 – Aplique ao texto um gradiente linear:

Branco

3 – Nomeie essa camada como “Principal” e a duplique. Para a camada mais inferior dê o nome de “Glow”.

4 – Na camada Glow adicione um Gaussian Blur de 3.1.

5 – Duplique novamente a camada Principal. Para a camadab malis superior dê o nome de “Explosion”.

6 – Mude a cor do texto da camada Explosion para branco e adicione à ele o filter add noise (Filters – no painel propriedades – -> Noise -> Add Noise):

7 – Ainda no texto do passo anterior adicione o filter glow (Filters – no painel propriedades – -> Shadow and Glow -> Glow):

8 – No mesmo texto adicione por último o filter zoom blur (Filters – no painel propriedades – -> Blur -> Zoom Blur):

9 – À camada Explosion atribua o modo de transparência (blend mode) a opção glow.

Fui… ]]> http://www.mxstudio.com.br/design/fireworks/efeitos_de_texto___parte_2/feed/ 0 http://www.mxstudio.com.br/design/fireworks/reproduzindo_botoes/ http://www.mxstudio.com.br/design/fireworks/reproduzindo_botoes/#comments Sat, 29 Oct 2005 00:00:00 +0000 tiagoperes

Bem vinda à mais uma coluna comunidade!

Nessa coluna estarei abordando o tema “botões” nela ensinarei à fazer botões já conhecidos por grande parte dos internautas, como do Windos e do Mac. Bom aprendizado!

Windows Vista

Esse é um dos vários botões do novo sistema operacional da Microsoft, Windows Vista. Veremos à seguir como faze-lo passo à passo. Lembrando que os tamanhos não precisam ser os mesmos descritos aqui, basta os objetos terem a mesma proporção.

1 – Com um novo documento aberto crie um círculo de 81x79px (pixels), para seu contorno utilize a cor #43647C e preenha-o com o seguinte gradiente:

2 – Adicione dois “Inner Shadow” ao círculo com as configurações abaixo:

* Para aplicar o Inner Shaddow selecione o objeto, em suas propriedades, clique no “+” ao lado de Filters (Effects na versão 7.0), aponte “Shadow and Glow” e então “Inner Shadow”.

3 – Duplique o círculo (ctrl+shift+d), retire desse novo círculo os inner shadows aplicados e defina o contorno para transparente. Diminua 2px de sua largura (W), 2 de sua altura (H) e o posicione ao meio do círculo maior.

4 – Adicione ao círculo diminuido no passo anterior um inner shadow com as seguintes configurações:

* Não se esqueça de marcar a opção knock out, é de extrema importância.

5 – Duplique o círculo usado no passo anterior e modifique o inner shadow do vetor surgido na duplicação para:

6 – Com a “Line tool” (N) desenhe a seguinte seta:

7 – Selecione as três linhas criadas vá ao menu “Modify” (Localizado na barra superior do programa), aponte “Alter Patch” e selecione “Expand Stroke…”. Aparecerá uma caixa de configuração, nela coloque as seguintes configurações:

8 – Com as linhas já expandidas agrupe-as com a função “Union” (Modify -> Combine Patchs -> Union), agora, nesse novo vetor, defina o traçado (stroke) para: cor: #1B2172; tamanho: 1; tipo: 1 pixel soft. Defina seu preenchimento para branco e o centralize no círculo.

9 – Duplique o círculo utilizado no passo 4 ou o utilizado no passo 5 (o que importa é que ele seja 2px de altura e 2px de largura menor que o círculo maior e que esteja centralizado à ele). Retire o “Inner shadow”, coloque-o acima de todas as camadas, e modifique-o com a pen tool () e a subselection tool () até ele ficar da seguinte forma:

* Para saber mais sobre a pen tool e a subselection tool colsulte a coluna “Vector – Parte 1“

10 – Defina o preenchimento desse vetor para um gradiente de branco para transparente (60%), em seguida defina a transparência da camada para 65% e aplique o efeito “Gaussian Blur” com valor de 0.5.

* Para aplicar o Gaussian Blur selecione o objeto, em suas propriedades, clique no “+” ao lado de Filters (Effects na versão 7.0), aponte “Blur” e então “Gaussian Blur”.

11 – Duplique o primeiro círculo criado (o maior), aplique nele a função “numeric transform” localizada em “Modify -> transform” com as propiedades à seguir:

12 – Mova a camada em que o efeito foi aplicado para baixo de todas, retire dela todos os efeitos (filters; effects) e traçado (deixe-o transparente). Aplique ao círculo um gradiente linear da seguinte maneira:

13 – Duplique o vetor utilizado no passo anterior e acione-o um “Inner Shadow” com as configurações abaixo:

Pronto! Você acabou de reproduzir um dos botões do Windows Vista!

Player do iTunes

Agora iremos reproduzir o botão “Pause” do player iTunes da Apple, os outros botões do player possuem a mesma formação.

1 – Crie um círculo de 31x31px, adicione à ele um preenchimento gradiente radial de branco para cinza:

2 – Adicione ao círculo um “Inner Shadow” com as configurações:

3 – Adicione agora um “Drop shadow” ao mesmo círculo:

* Para aplicar o Drop Shaddow selecione o objeto, em suas propriedades, clique no “+” ao lado de Filters (Effects na versão 7.0), aponte “Shadow and Glow” e então “Drop Shadow”.

4 – Duplique o círculo, na forma que surgiu retire todos os efeitos aplicados (inner shadow e drop shadow), defina o preenchimento para sólido de cor branca e o edite com a pen tool () e a subselection tool () para ficar da seguinte forma:

5 – Modifique o modo de suavização do vetor editado no passo anterior para “Feather – 1″ (Propriedades -> Edge).

6 – Agora é só fazer o símbulo de “Pause”, para os outros botões do player (play, stop, next…) é só mudar esse símbolo. Para faze-lo crie dois retângulos, um do lado do outro e à eles adicione um “Drop Shadow”.

Prontinho, vc acaba de reproduzir mais um botão pertencente ao “Hall da fama”!

Mac Button

Esse é um dos botões do Sistema operacional da Apple, Macntosh, o encotramos em botões como OK e cancelar.

1 – Crie um “Rounded Rectangle” () de 74x26px, para os que usam a versão 8.0 o arredondamento vale 10 (para editar no painel “Auto Shape Properties”, para os que usam versões anteriores use os quadrados amarelos no retângulo para arredonda-lo como na imagem à seguir. Para preenchimento use um gradiente radial:

2 – Adicione o seguinte “Inner Shadow” ao rounded rectangle:

3 – Crie a seguinte forma sob o vetor utilizado nos passos anteriores:

4 – Atribua à ela: cor: Branca; edge: feather – 1; transparência: 40.

5 – Como no passo anterior, faça outra forma sob o vetor mais abaixo:

6 – Atribua à essa nova forma: preenchimento: gradiente radial; edge: feather – 2.

7 – Escreva algo no botão, nesse exemplo escrevi “MX Studio” com a fonte Tahoma, 11px, no anti-alias.

8 – Agrupe tudo e aplique o efeito Drop Shadow:

Pronto! Um botão mac com seu próprio texto!

Deixo vocês por aqui, espero que tenham gostado da coluna e com ela tenham aprendido técnicas bacanas para aplicar em seus botões. Qualquer dúvida poste em nosso fórum.

Bem vinda comunidade!

Continuaremos nessa coluna o tema Fireworks 8. Nela estarei falando sobre as restantes novas funções e organização do programa. Vamos à coluna!

Fatiamento

Nas versões anteriores do Fireworks, para inserir um slice em um círculo, por exemplo, era preciso inserir um em forma de retângulo ou então passar um “tempão” contornando a forma com a polygon slice tool. Nessas versões, ao clicar com o botão direito do mouse sobre o vetor, para inserir um slice existia só a opção “insert slice”, que inseria um slice retangular sobre o vetor. O Fireworks 8 deixa de usar a expressão “insert slice” das antigas versões e em seu lugar usa “insert rectangular slice”, que exerce a mesma função da extinta “insert slice”, e “insert polygon slice”, que inseri um slice preenchendo apenas o vetor automaticamente, sem ter que desenha-lo ponto à ponto usando a polygon slice tool.

Batch Process (Rename)

A função “Rename” do processo em lote (batch process) do Fireworks 8 foi muito bem incrementada, agora, ao invés de se poder somente adicionar sufixos ou prefixos também pode-se substituir caracteres em branco, letras e palavras. Veja a janela do processamento em lote usando a função “Rename”:

Veja um exemplo:

Os arquivos à sofrerem o processo em lote serão:

As configurações do processo em lote serão as seguintes:

Veja o resultado:

Trancar camadas ()

Uma das funções mais úteis adicionadas ao Fireworks 8 na minha opinião. Permite a tranca de camadas, ou seja você pode visualizar a camada sem edita-la, como se ela não existisse. É muito útil para se trabalhar com fundos, você edita a imagem sem mexer no fundo. Veja aqui um exemplo.

Novos formatos para salvar

O Fireworks 8 conta com vários novos formatos para salvar, BMP, GIF, Animated GIF, Illustrator 7, JPEG, SWF, Flattened PNG, Photoshop, TIFF e WBMP.

A maioria desses formatos não salva perfeitamente o projeto, formatos como o JPEG salva apenas um bitmap no arquivo. No formato AI há perca de efeitos, o único formato que salva perfeitamente o projeto continua sendo o PNG. Ao selecionar um formato para salvar aparecerá uma mensagem na parte de baixo da janela. Essa mensagem significa: Esse formato transformará todas as camadas , vetores e outros objetos editáveis em objetos não editáveis, bitmaps. Se essa mensagem não for exibida é por que o projeto será salvo perfeitamente ou faltando apenas alguns efeitos.

Outras Novidades

• Patterns, gradients, textures e semelhantes possuem uma nova organização, agora, ao invés de mostrar a figura direto no menu mostra-se apenas os textos, a figura é mostrada apenas quando se passa o mouse por cima do texto correspondente à ela, o que deixa o visual do programa bem mais limpo.
• Foi adicionada uma barra de progresso ao processamento em lote.
• Há maior compatibilidade na transição de vetores do Fireworks para o Flash.
• As camadas correspondentes à textos são automaticamente nomeadas com seu conteúdo.
• Os vetores que possuem um texto atachado também podem ser editados.
• No topo da caixa de escolha de fonte são listadas as fontes usadas recentemente.
• Agora o Fireworks também importa QuickTime Image, MacPaint, SGI & JPEG 2000.
• A “grid” do fw8 está bem mais limpa, agora é pontilhada e possui uma cor mais clara.
• Pode-se salvar mais de uma seleção.
• Movimentos consecutivos agora são tratados como apenas um movimento, veja um exemplo:

Bem vinda comunidade!

Como provavelmente a maioria já sabe a Macromedia lançou mês passado uma nova versão de seu pacote “Studio”. O Studio 8 conta com o Fireworks 8, o tema de nossa coluna, Dreamweaver 8, Flash e Flash Player 8, Contribute 3 e Flash Paper 2. O Fireworks 8 conta com diversas novas funções e uma nova organização. Essa coluna tem o objetivo de mostrar e explicar essas novas funções e organização. Bom aprendizado!

Blend Modes

Não poderíamos deixar de falar do maior destaque do Fireworks 8 né? Os novos Blend Modes são de impressionar, com eles podemos adiquirir diversos novos efeitos numa imagem, principalmente em fotos. Além dos antigos “normal, darken, multiply, lighten, screen, difference, hue, saturation, color, luminosity, invert, tint e erase” o novo Fireworks conta com 25 novos, “average, color burn, inverse color burn, soft burn, color dodge, soft dodge, overlay, soft light, fuzzy light, hard light, exclusion, negation, red, Green, blue, reflect, glow, freeze, heat, additive, subtractive, subtract, interpolation, stamp e XOR”.

Para usar os novos blend modes basta selecionar uma camada e alterara-lo na caixa de blend modes (figura acima).

Shadows (sombras)

O novo Fireworks conta com dois novos estilos de sombra, a solid shadow e o comando “Add shadow” . A solid shadow adiciona um efeito 3d ao objeto, veja um exemplo:

Para aplicar esse efeito selecione “solid shadow” em “filters -> shadow and glow”, lembrando que esse “filters” é o que fica em “properties” (propriedades), não o que fica na barra do topo da janela do programa.

Ao selecionar “solid shadow” uma caixa de configuração aparecerá:

Altera a direção da sombra.

Altera o comprimento da sombra.

A caixa marcada permite a escolha da cor, desmarcada segue a cor do vetor.

Altera cor da sombra.

Exibe uma pré-visualisação da sombra no vetor.

O comando “add shadow” adiciona uma “perspective shadow” ao vetor. Veja um exemplo:

Para adiciona-la á um vetor selecine “add shadow” em “commands -> creative”, commands se localiza no topo da janela do programa.

Ao contrário das demais sombras, o comando add shadow adiciona um vetor como sombra, ou seja a mesma pode ser modificada através de ferramentas vetoriais. Esse vetor é adicionado como “auto-shape”, portanto possuí propriedades adicionais, as quais veremos à seguir:

Altera a direção da sombra

Altera o tamanho da sobra

Para alterar as propriedades é preciso arrastar os losangos amarelos, para volta-las aoo padrão clique sobre eles.

Vetor Seleção

O Fireworks 8 conta com uma função muito inovadora, a conversão de vetores para seleção, o que ajuda muito, pois é bem mais fácil desenhar uma seleção com ferramntas vetoriais que com ferramentas de seleção. Essa nova função também pode ser feita ao contrário, ou seja, também podemos tranformar uma seleção num vetor. Veja alguns exemplos abaixo:

Para converter um vetor para seleção, selecione o vetor e em seguida selecione “Convert patch to marquee” no menu “Modify”, cujo se localiza no topo da janela do programa.

Para converter uma seleção em vetor, faça a seleção e logo depois selecione “Convert marquee to patch” no menu “Select”, que também se encontra no topo da janela.

Novos painéis

O Fireworks 8 conta com 3 novos painéis, Special characters (caracteres especiais), Image editing (edição de imagem) e Auto shape properties (propriedades das auto-formas). Os painéis image editing e auto-shape não apresenta nada de novo, são apenas novas maneiras de acessar as antigas ferramentas:

Para saber mais sobre edição de imagens consulte a série de colunas sobre bitmap da MX Studio: Parte 1, 2, 3. Ainda há mais partes dessa coluna, agurdem-nas.

Para saber mais sobre auto-shapes consulte a primeira parte da série de colunas sobre vetores da MX Studio.

O Painel Special Characters é uma nova função muito útil do Fireworks, nas versões anteriores tinhamos de utilizar outros métodos para iserir um caractere especial, como ir ao dreamweaver, inserir o carectere e depois copia-lo para o fw. Agora é só o selecionarmos nesse novo painel que ele aparece automaticamente no texto.

Caso seu Fireworks seja o 8 e esses painéis não estejam aparecendo vá ao menu “Window”, localizado na parte de cima da janela do programa, e verifique se eles estão abilitados.

Pen tool

Ao contrário do que muitos pensam, não foi adicionada novas características à pen tool, sua diferença com a do 2004 é que a opção “Preview pen tool” se tornou habilitada por padrão.

Essa opção permite que se veja como irá ficar seu vetor enquanto você o edita com a pen tool, veja um exemplo:

Para os que não gostaram da opção tornada padrão é só desativar “show pen preview” em “edit -> preferences -> editing -> pen tool options”

Para habilita-la faça o mesmo, só que habilitando a opção “show pen preview”, tanto no Fireworks MX 2004 quanto no 8.

Novo modo de seleção de camadas

Diferente das versões anteriores do programa, o Fireworks 8 deixa de usar a tecla shift para a seleção de várias camadas, uma à uma, no painel layers (camadas), lembrando que na área de trabalho nada foi alterado em relaçaõ à isso. A antiga função da tecla “Shift” agora é atribuída ao “Ctrl”, antes sem função nenhuma no programa. Na nova versão, a tecla shift seleciona um conjunto de camadas, ao selecionar duas camadas com a tecla shift pressionada, automaticamente, todas as camadas entre essas duas selecionadas são selecionadas também. Veja um exemplo:

A tecla shift e ctrl nos permite selecionar várias camadas simultaneamente, sendo que a ctrl, uma à uma, independente de onde se localizam, e a shift, um conjunto, todas entre duas outras camadas.