Coluna Fireworks – Avatares para Copa – Parte 1

Introdução

Salve comunidade MX Studio! Tudo bem com vocês? Estarei abordando nessa coluna a criação de avatares para Copa, está será a primeira parte, então chega de papo e vamos ao que interessa. Bom aprendizado!

Pré-requesitos

Adobe – Macromedia Fireworks 8.

Apesar desta coluna ser escrita de modo simples e claro será necessário conhecimentos das ferramentas vetoriais e de preenchimentos:

Vector – Parte 1
Vector – Parte 2
Atalhos da Pen Tool
Desenhando objetos vetoriais

Objetivos

Criar avatares para Copa com auxilio das Ferramentas Vetorias e de Preenchimentos.

Importante: Uma citação do Leonardo Vallim, que achei bem importe: “Lembrando, não siga 100% a forma que eu estou fazendo, estou mostrando somente para uma questão de estudo. Exercite sua criatividade, utilize outros preenchimentos, outras cores. Pode parecer bobeira falar isso, mas muitos seguem ao pé da letra e acabam não exercitando a própria criatividade.”

Avatar 1

1) Abra o Fireworks e crie um novo documento File » New (atalho: ctrl + N) de 100×100 pixels com fundo branco:

2) Com auxílo da ferramenta Rectangle Tool (atalho: U, 1) crie um quadrado de 100×100 pixels e desagrupe-o: menu Modify » Ungroup (atalho: ctrl + shift + G):

3) Selecione a ferramenta Subselection Tool (atalho: A, 1) e delete o ponto superior direito do quadrado:

4) Agora Clone a forma criada (ctrl + shift + D), depois gire horizontalmente (menu: Modify » Transform » Flip Horizontal) e verticalmente (menu: Modify » Transform » Flip Vertical) de modo que fique como a imagem abaixo:

5) Com auxílio do preenchimento Gradiente, preencha a Forma 1 com o seguinte Gradiente Linear:

	Cor: #F4C400
	Cor: #F4EE00

6) E a Forma 2 com o seguinte Gradiente Linear:

	Cor: #329B00
	Cor: #44D400

7) Em seguida configure os gradientes como mostrado na figura abaixo:

Com auxílio da Elipse Tool (U, 2) crie um círculo de 125×125 pixels e posicione-o em X: -53 e Y:-53:

9) Selecione o cículo e aplique o seguinte Gradiente Radial:

	Cor: #0052FD
	Cor: #0040C4

10) Configure o gradiente como mostrado na figura abaixo:

11) Vá até o painel de Filters e aplique o efeito Drop Shadow como mostrado na figura abaixo:

Até agora se avatar deve estar semelhante ao mostrado na figura abaixo:

12) Com o auxílio da ferramenta Star crie 6 estrelas com tamanho aproximado de 25×25 pixels e distribua sobre o círculo como mostrado abaixo, aplique também um efeito Drop Shadow nas estrelas:

13) Para finalizar, vamos escrever HEXA no canto inferior direto do avatar, eu utilizei a font Impact em caixa alta, tamanho 22 pixels e coloquei o seguinte Gradiente Linear:

	Cor: #003DBB
	Cor: #0052FC

14) Finalmente, configure o gradiente como mostrado abaixo e coloque um contorno branco no texto de 5 pixels. Pronto!

Avatar 2

1) Abra o Fireworks e crie um novo documento File » New (atalho: ctrl + N) de 100×100 pixels com fundo branco:

2) Com auxílo da ferramenta Rectangle Tool (atalho: U, 1) crie um quadrado de 100×100 pixels e aplique o seguinte Gradiente Linear:

	Cor: #329B00
	Cor: #46D900

Configurando assim:

3) Com auxílo da ferramenta Rectangle Tool (atalho: U, 1) crie um retêngulo de 100×53 pixels em cima do quadrado anteiror e desagrupe-o: menu Modify » Ungroup (atalho: ctrl + shift + G):

4) Com auxílio da Pen Tool (atalho: P, 1) crie um ponto no meio da linha inferior do retêngulo e desloque-o 11 pixels para baixo, como mostrado na figura abaixo:

Dica: Para achar com mais facilidade o meio linha você usar as Réguas, Guias e Grades explicadas nessa coluna: Clique aqui!

5) Feito isso aplique o seguinte Gradiente Linear:

	Cor: #003DBB
	Cor: #0052FC

Configurando assim:

6) Com auxílo da ferramenta Rectangle Tool (atalho: U, 1) crie um retêngulo de 100×42 pixels, faça o mesmo processo do Passo 4, mas deslocando o ponto para baixo 20 pixels, como mostrado na imagem abaixo:

5) Feito isso aplique o seguinte Gradiente Linear:

	Cor: #F4C400
	Cor: #F4EE00

Configurando assim:

6) Com o auxílio da ferramenta Star crie 5 estrelas com tamanho de 16×16 pixels e 1 estrela com 22×22 pixels, distribua como mostrado abaixo, aplique também um efeito Drop Shadow nas estrelas:

Dica: Para alinhaR com mais facilidade as estrelas você usar as Réguas, Guias e Grades explicadas nessa coluna: Clique aqui!

7) Para finalizar, vamos escrever BRASIL na parte superior do avatar, eu utilizei a font Impact em caixa alta, tamanho 29 pixels e coloquei o seguinte Gradiente Linear:

	Cor: #003DBB
	Cor: #0052FC

14) Finalmente, configure o gradiente como mostrado abaixo e coloque um contorno branco no texto de 5 pixels. Pronto!

Considerações Finais

Bom! Chegamos ao fim de mais um coluna onde abordamos a criação de avatares , espero que tenham gostado e aprendido um pouco mais.

Até a próxima e muito obrigado!

Marcelo Ariatti – Colunista de Fireworks

Qualquer dúvida envie um email para marcelo_ariatti@mxstudio.com.br ou acesse o nosso fórum .

Voltar ao topo

Coluna Fireworks – Usando Rulers, Guides e Grids

Introdução

Salve comunidade MX Studio! Tudo bem com vocês? Espero que sim. Segue abaixo mais uma coluna, essa será uma coluna básica, elaborei a mesma pois ainda não consta no portal. Portanto, espero que gostem e tenham um bom aprendizado.

Pré-requesitos

Adobe – Macromedia Fireworks 8 (Pode utilizar outras versões, mas nessa coluna usarei o 8).

Apesar desta coluna ser escrita de modo simples e claro será necessário conhecimentos na criação de formas.

Vector – Parte 1

Objetivos

Expor as funcionalidades e a utilização das ferramentas: Rulers (Réguas), Guides (Guias) e Grids (Grades).

Usando as Réguas (Rulers)

As réguas são uma característica padrão de quase todos os editores gráficos. As réguas nos permitem visualizar com mais precisão o tamanho e a localização dos objetos na tela.

Para visualizar as réguas crie um novo documento com um tamanho qualquer, vá até o menu: View » Rulers ou utilize o atalho: Ctrl + Alt + R. Aparecerá duas réguas, uma na parte superior da tela e outra na parte esquerda. Observe na imagem abaixo:

	Régua superior
	Régua esquerda
	Botão para configurar o ponto (0,0) da régua, veremos mais detalhes a seguir
	Ponto (0,0) do documento

Configurando o ponto (0,0) das Réguas (Rulers)

Por padrão o ponto (0,0) da régua é posicionado no canto superior esquerdo da tela, como mostrado na figura acima. Para configurar este ponto clique no botão indicado na figura abaixo e arraste para o local desejado. Observe na imagem abaixo:

Neste exemplo eu configurei meu ponto (0,0) na extremidade superior esquerda do retângulo, a partir de agora todos os objetos que forem alinhados terão como referência este ponto como (0,0), não mais o canto superior esquerdo. Este foi apenas um exemplo mas você pode configurar o ponto (0,0) no lugar que desejar.

Para ver na prática a mudança, crie uma nova forma qualquer e posicione em X=0 e Y=0.

Dica: Para posicionar os objetos utilize a caixa de medidas no painel de propriedades:

Finalmente, para voltar ao ponto (0,0) padrão do Fireworks, dê um duplo clique no botão que você usou para configurar o ponto.

Usando as Guias (Guides)

As Guias são simplesmente linhas que você pode posicionar para marcar pontos importantes em seu projeto, elas são originadas das réguas (Rulers). As Guias não são impressas nem exportadas, ficam acima de todas as camadas.

Adicionar uma Guia ao seu projeto é muito simples. Com as réguas visíveis (View » Rulers ou utilize o atalho: Ctrl + Alt + R), clique sobre a régua e arraste para o local desejado para criar a Guia, você pode criar Guias horizontais e verticais. Observe na imagem abaixo:

Neste exemplo criei três Guias, duas horizontais para me auxiliar no alinhamento horizontal dos objetos e uma vertical para por um limite à esquerda. Este foi apenas um exemplo mas você pode criar quantas Guias quiser para diferentes utilizações.

Configurando as Guias (Guides)

Para configurar as Guias vá até menu: View » Guides. Observe na imagem abaixo:

	Show Guides: Ativando esse recurso faz com que as Guias fiquem visíveis e invisíveis desativando. Tecla de atalho: Ctrl + Ç
	Lock Guides: Ativando esse recurso faz com que as Guias sejam trancadas não podendo movimentá-las. Tecla de atalho: Ctrl + Alt + Ç
	Snap to Guides: Ativando esse recurso faz com que as Guias tornem-se “imãs”, quando os objetos chegam perto das Guias eles são puxados automaticamente para ajudar no alinhamento. Tecla de atalho: Ctrl + Shift + Ç
	Edit Guides…: Painel para configurar as Guias, veremos a seguir.
	Slice Guides: Ativando esse recurso faz com que sejam criadas Guias quando você usa a Slice Tool para fatiar seu projeto. Tecla de atalho: Ctrl + Alt + Shift + Ç

Painel Edit Guides…

Para acessar e configurar esse painel vá até o menu: View » Guides » Edit Guides…. Observe na imagem abaixo:

	Color: Configura a cor das Guias.
	Propriedades que foram explicadas acima.
	Clear All: Deleta todas as Guias de seu projeto.
	Slice Color: Configura a cor das Guias criadas pela Slice Tool.
	Show slice Guides: Ativando esse recurso faz com que as Guias criadas pela Slice Tool fiquem visíveis e invisíveis desativando.

Finalmente, para deletar as Guias de seu projeto sem utilizar o botão Clear All, apenas arraste cada Guia para fora da área visível da tela.

Usando as Grades (Grids)

As Grades, semelhantes as Guias, servem para alinhar objetos em posições padrão definidas pelo usuário. As Grades não são impressas nem exportadas, ficam acima de todas as camadas.

Adicionar Grades ao seu projeto é muito simples. Vá em View » Grid » Show Grid ou use a tecla de atalho Ctrl + Alt + G. Observe na imagem abaixo:

Com o auxílio das Grades você pode alinhar com mais facilidade os objetos em seus projetos. A seguir vamos ver as configurações das Grades.

Configurando as Grades (Grids)

Para configurar as Grades vá em View » Grid. Observe na imagem abaixo:

	Show Grid: Ativando esse recurso faz com que as Grades fiquem visíveis e invisíveis desativando. Tecla de atalho: Ctrl + Alt + G
	Snap to Grid: Ativando esse recurso faz com que as Grades tornem-se “imãs”, quando os objetos chegam perto das Grades eles são puxados automaticamente para ajudar no alinhamento. Tecla de atalho: Ctrl + Alt + Shift + G
	Edit Grid…: Painel para configurar as Grades, veremos a seguir.

Painel Edit Grid…

Para acessar e configurar esse painel vá em View » Grid » Edit Grid…. Observe na imagem abaixo:

	Color: Configura a cor das Grades.
	Propriedades que foram explicadas acima.
	Espaçamento horizontal entre as Grades
	Espaçamento vertical entre as Grades

Dica: Para exercitar as ferramentas abordadas nessa coluna, convido vocês para lerem a coluna do Rafael Silva Vaz onde ele aborda essas ferramentas na vetorização do escudo da seleção Brasileira:

Vetorizando o escudo da Seleção Brasileira

Bom aprendizado!

Considerações Finais

Bom, chegamos ao fim de mais uma coluna. Está foi um coluna básica mas que ainda não constava no portal, de qualquer forma espero que tenham gostado e aprendido mais um pouco com mais essa coluna.

Vimos nesta coluna as funcionalidades e a utilização das ferramentas: Rulers (Réguas), Guides (Guias) e Grids (Grades).

Então, até a próxima e muito obrigado!

Marcelo Ariatti – Colunista de Fireworks

Qualquer dúvida envie um email para marcelo_ariatti@mxstudio.com.br ou acesse o nosso fórum .

Voltar ao topo

Coluna Fireworks – Criação e Exportação de Paleta de Cores

Introdução

Salve comunidade MX Studio! Minha primeira coluna de 2006! Meio tarde, pois tive alguns imprevistos e falta de tempo foi grande, mas agora está tudo bem. Então chega de conversa e vamos ao que interessa, espero que gostem da coluna e tenham um bom aprendizado.

Pré-requesitos

Macromedia Fireworks 8.

Macromedia Flash. (opcional)

Apesar desta coluna ser escrita de modo simples e claro será necessário conhecimentos da ferramenta Gradient Tool.

Objetivos

Criação e exportação de paleta de cores. Nesta coluna veremos como criar, exportar e utilizar a paleta de cores.

Criando a Paleta de Cores

1) Vamos começar criando o nosso arquivo. Vá em File » New (Atalho: Ctrl+N) e crie um arquivo de 500×72 pixels. Coloque como cor de fundo (Canvas Color) a cor branca #FFFFFF.

2) Agora vamos determinar as cores da nossa paleta, neste exemplo vou utilizar as cores: #C6027D e #89C818. Crie um retângulo de 520x90px com um gradiente Linear com as cores citadas anteriormente e alinhe o retângulo ao centro do documento, como mostrado abaixo:

3) Com o gradiente pronto vamos preparar nossa paleta de cores para exportação. Abra o Painel Optimize » Window » Optimize (Atalho: F6) e configure como mostrado na figura abaixo:

4) Determinamos que nossa paleta de cores terá 8 cores, para conferir como ficarão as cores clique no botão Preview que fica no canto superior esquerdo do documento:

5) Clicando no botão Preview você verá 8 cores, como mostrado na figura abaixo:

6) Depois de configurar nossa paleta de cores, vamos a exportação.

Exportando a Paleta de Cores

7) Para exportar nossa paleta de cores é muito fácil, depois de ter criado e configurado volte ao Painel Optimize » Window » Optimize (Atalho: F6)) clique em » Options » Save Palette… Observe na imagem abaixo:

Aparecerá o painel para salvar, coloque um nome qualquer e clique em Salvar. O tipo de arquivo das Paletas de Cores é o Color table e a extensão do arquivo é .act. Observe na imagem abaixo:

9) Pronto, nossa paleta está salva, agora vamos aprender a utilizá-la.

Utilizando a Paleta de Cores

10) Podemos utilizar nossa Paleta de Cores no próprio Fireworks ou também por exemplo no Flash. Primeiramente vamos utilizar no Fireworks:

Utilizando no Fireworks

11) Vá até o Painel Color Swatches » Window » Swatches (Atalho: Crtl + F9) clique em Opções, você verá as seguintes opções:

	Botão de Opções
	Add Swatches…: Adiciona uma Paleta de Cores a Paleta de Cores atual. Replace Swatches…: Substitui a Paleta de Cores atual. Save Swatches…: Salva a Paleta de Cores atual. Clear Swatches…: Limpa a Paleta de Cores atual
	Paleta de Cores Padrão do Fireworks.

12) Vamos escolher o Add Swatches.. e depois o Replace Swatches…, após clicar aparecerá o painel para procurar a Paleta de Cores, vá até o diretório que você salvou, selecione a paleta e clique em abrir. O Painel Color Swatches ficará como mostrado na imagem abaixo:

13) Agora é só utilizar as cores normalmente, caso queira voltar aos padrões é só selecionar as Paletas de Cores Padrão nas Opções do painel como mostrado anteriormente.

Utilizando no Flash

Para utilizar essa mesma Paleta de Cores no Flash, faça o mesmo processo feito no Fireworks. Os paineis são os mesmos.

Dica: Agora quando você fazer seus projetos no Fireworks e depois for passar para o Flash, você poderá criar uma Paleta de Cores para cada projeto e terá sempre as cores que utilizou a mão.

Dica 2: Você podecriar a paleta com quantas cores quiser e não necessariamente com gradiente, pode ser com cores sólidas individuais.

Considerações Finais

Bom, chegamos ao fim de mais uma coluna. Espero ue tenham gostado e aprendido muito com mais essa coluna.

Vimos nesta coluna a criação, exportação e utilização de paletas de cores.

Então, até a próxima e muito obrigado!

Autor: Marcelo Ariatti – Colunista e Moderador de Fireworks do MXStudio.

Qualquer dúvida envie um email para marcelo_ariatti@mxstudio.com.br ou acesse o nosso fórum .

Voltar ao topo

Coluna Fireworks – Entendendo e utilizando o History Panel

Salve comunidade MX Studio! Tudo bem com vocês? Espero que sim. Bom, nessa coluna estarei abordando um dos muitos painéis do Fireworks o History Panel, veremos o que esse incrível painel pode nos proporcionar e automatizar nosso trabalho.

Peço a vocês que desliguem o som, pois nos vídeos tem um barulho meio irritante do mouse (risos), sendo que eu tirei a barra de controle dos vídeos, para que os mesmos ficassem com um peso menor de carregamento.

Então chega de conversa e vamos ao que interessa, espero que gostem da coluna e tenham um bom aprendizado.

History Panel

O History Panel (Painel Histórico) contém um registro de todas os comandos feitos por você, o painel permite um controle preciso para refazer e desfazer comandos, bem como repetir e salvar determinados comandos. O History Panel contém um slider especial que permite você navegar pelas opções do painel, desfazendo e refazendo comandos. Para acessar o History Panel vá ao menu Window » History ou aperte Shift + F10. Vamos observar o painel na figura abaixo:

	Essa é a lista de comandos feitos por você no decorrer do trabalho e é neles que você pode navegar com o slider.
	Slider: como descrito acima, você pode navegar pelos comandos com ele, desfazendo e refazendo comandos.
	Replay: repete os comandos selecionados. Para selecionar vários comandos segure Ctrl + Clique em cima do comando.
	Copy Steps: copia os comandos selecionados. Use a dica acima para selecionar vários comandos.
	Save as Command: salva os comandos selecionados.
	Clear History: limpa a lista de comandos.

Desfazendo e Refazendo comandos

Agora que já estamos cientes das funcionalidades do History Panel, vamos observar essas funcionalidades na prática. Observe o vídeo abaixo:

Como visto no vídeo acima, notamos que podemos desfazer e refazer comandos deslizando o slider. O Fireworks pode deixar listado até 1.009 comandos, sendo que esse valor está diretamente ligado a configuração do Undo Steps (quantos Ctrl + Z você pode dar) nas preferências do Fireworks,vale ressaltar também que o número de comandos listados afeta a memória do computador, ou seja, quanto mais comandos você deixar listado, mais memória será consumida, para alterar esse valor vá ao menu Edit » Preferences… e observe a imagem abaixo:

Coloque o valor que desejar, sendo que esse valor será a quantidade de comandos que serão armazenados/listados no History Panel.

Usando o Replay

Como dito acima quando conhecemos o History Panel o Replay repete os comandos selecionados, então vamos ver isso na prática, observe o vídeo abaixo:

Note que podemos repetir quantas vezes forem necessárias os comandos, claro que essa foi uma aplicação simples, mas podemos repetir os mais diversos comandos, por exemplo um efeito de sombra que você aplicou em um objeto, você pode selecionar o comando na lista do painel e selecionar outro objeto e colocar a mesma sombra com o auxílio do botão Replay. Outras formas úteis de repetir comandos são gradientes, posições, alinhamentos, etc… O resto deixo pela criatividade de vocês.

Copy Steps

A função Copy Steps é semelhante a função Replay, ela copia os comandos selecionados, a diferença é que cada vez que você copia um comando o que fica armazanado na memória é o próprio código de Javascript. A princípio vamos ver como funciona o Copy Steps, depois faremos o teste pra ver se ele copia o próprio Javascript mesmo. Então observe o vídeo abaixo:

Agora que estamos cientes de como funciona o Copy Steps, estamos esquecendo de algo? Ah! Claro, o Marcelo disse que o Copy Steps copia o próprio comando Javascript, vamos ver se isso é verídico. Lembra no vídeo quando clicamos no botão Copy Steps? Então, invés de colar em cima de um objeto, abra o o bloco de notas e dê um Ctrl+V para ver o que acontece. Irá aparecer um comando considerávelmente grande, então eu vou pegar um código menor pra exemplificar aqui, como a criação de um círculo, que o comando executado pelo Fireworks é esse:

Bom, agora comprovamos que ele copia mesmo o comando Javascript. Mas Marcelo, o que farei com isso? No momento nada, falei sobre isso para que todos tenham conhecimento geral sobre o programa.

Save as Command

Talvez em seu papel mais importante, o History Panel é capaz de salvar os comandos listados no painel e atribuíndo ao menu Commands do Fireworks. O processo é simples, mais este realce de produtividade pode ser completamente notável. Então vamos a um exemplo prático: uma função que eu uso bastante é de alinhar os objetos na tela, então porque não automatizar essa função? salvando isso em um comando? Então, é isso que vamos fazer agora, observe o vídeo abaixo:

Agora você pode verificar no menu Commands que o comando está salvo lá, para ver se funciona na verdade crie alguns objetos na tela, depois selecione todos e aplique o comando que você salvou para ver o que acontece. Com certeza ele alinhará os objetos à esquerda e espaçado verticalmente.

Limitações do History Panel

Nem tudo é um mar rosas, nosso querido History Panel tem algumas limitações, observe abaixo:

Clear History

Dentre as funcionalidades do History Panel essa é a mais simples e sem segredos, ela limpa a lista de comandos, liberando assim espaço na memória. Observe na prática vendo o vídeo abaixo:

Gerenciando Comandos Salvos

Outra funcionalidade do Fireworks é que você pode gerenciar os comandos salvos pelo History Panel, deletando ou renomeando os comandos. Para fazer isso é simples, vá ao menu Commands » Manage Saved Commands…, aparecerá a seguinte tela abaixo:

Nessa tela você pode verificar a lista de comandos salvos, bem como renomear (Rename…) e deletar (Delete) os comandos.

Já estamos na reta final deste ano, portanto essa será minha última coluna do ano, agora só o ano que vem, falta muito ainda! (risos)

Queria desejar a todos um Feliz Natal e um Próspero Ano Novo, que todos nossos sonhos se realizem, que 2006 seja uma ano de muito sucesso para todos nós.

Queria agradecer todos que prestigiaram meu trabalho desde quando comecei a escrever até hoje. E com certeza deixar um agradecimento especial para o MX Studio pela opotunidade de poder escrever pra um Portal de tanto renome como este. Um forte abraços para todos os Moderadores, Colunistas, Coloboradores e Administradores, enfim, a todo que de alguma forma fazem parte desta grande comunidade. Desejo todo o sucesso para esses novos projetos do MX Studio, dentre eles a revista MXMagazine.

E que venha 2006!

Então, até a próxima e muito obrigado!

Autor: Marcelo Ariatti – Colunista e Moderador de Fireworks do MXStudio.

Qualquer dúvida envie um email para marcelo_ariatti@mxstudio.com.br ou acesse o nosso fórum .

Voltar ao topo

Salve Comunidade MXStudio!

Bem vindos a mais uma coluna! Estamos abordando nessas últimas colunas as Ferramentas do Fireworks e eu fiquei encarregado das Ferramentas de Bitmap, sendo assim não explicarei todas de uma só vez e sim farei em partes, quantas forem necessárias para o melhor aprendizado de vocês.
Então vamos ao que interessa! Nessa primeira parte começaremos com as Ferramentas: Marquee Tool e Oval Marquee Tool.

Marquee Tool e Oval Marquee Tool (M)

_______________Adição, Subtração e Intersecção de Seleções

Bom… todos devem estar pensando: “O que esse cara tá pensando? Vai dar aula de matemática agora?” Hahahahaha! Não é isso não, tem umas formas de seleção muito interessantes que podem ser feitas atráves desses modos, então vamos lá!

1) Adição: Você cria uma seleção qualquer e depois segurando a tecla Shift você cria mais uma seleção que passe por cima dá seleção criada anteriormente. Observe o exemplo abaixo para entender melhor:

_______________________________Estilos e Bordas da Seleção

No inspetor de propriedades das Ferramentas acima abordadas existem duas propriedades: Style e Edge. Sendo Style ( Normal, Fixed Ratio, Fixed Size ) e Edge ( Hard, Anti-alias, Feather ). Segue abaixo a explicação de cada item para melhor entendimento.

marcelo_ariatti@mxstudio.com.br ou acesse o nosso fórum .