Tudo o que você precisa saber sobre FireWorks
Página 1 de 1
Tudo o que você precisa saber sobre FireWorks
por D4N1L0X Sáb Nov 21, 2009 11:08 pm
Oi galera agora vou falar tudo que vcs precisam saber sobre o fireworks.
O Fireworks é um editor de imagens desenvolvido pela Macromedia,
posteriormente adquirido pela Adobe. Suas funcionalidades focam a
publicação gráfica na Internet, por isso inclui suporte a GIF animado,
PNG e imagens fatiadas, além de possuir ótima compressão de imagens.
Ambiente de Trabalho:
O Fireworks possui recursos que o fazem uma alternativa direta ao
ImageReady. A diferença principal está no suporte a gráficos vetoriais,
semelhante ao Adobe Illustrator, sendo o oposto do Adobe Photoshop que
suporta primordialmente edita bitmaps tendo poucos recursos únicos para
vetores.
Menus acoplados
A partir da versão MX 2004, o Fireworks passou a exibir os menus de
ferramentas mais organizados, acoplados. Eles podem ser ocultados e
suspensos trazendo uma área de trabalho imediata mais limpa.
A toolbar (barra de ferramentas) contém 34 botões. Sendo deles, alguns
com mini-menus que oferecem variações da ferramenta, chegando a marca
de 68 itens quando contados todos os ocultos.
ONDE:
Pointer - Seleciona e arrasta os objetos
Select Behind - Seleciona os objetos que estão atrás de outros objetos
Crop - Descarta partes de uma imagem
Export - Area Exporta uma parte do documento
Subselection - Seleciona um objeto dentro de um grupo ou pontos em um caminho
Marquee - Seleciona uma área de pixels retangular no modo Image Edit
Ellipse Marquee - Seleciona uma área de pixels elíptica no modo Image Edit
Lasso - Seleciona uma área de pixels à mão livre no modo Image Edit
Polygon - Lasso Seleciona uma área de pixels poligonal no modo Image Edit
Magic - Wand Seleciona áreas de pixels de cores semelhantes no modo Image Edit
Hand - Movimenta o documento
Magnify - Altera a ampliação da visualização
Line - Desenha linhas retas
Pen - Desenha caminhos por meio de pontos de ancoragem
Rectangle - Desenha retângulos, retângulos arredondados e quadrados
Ellipse - Desenha elipses e círculos
Polygon - Desenha polígonos e estrelas
Text - Cria blocos de texto
Pencil - Desenha traçados de lápis de um pixel
Brush - Desenha traçados de pincel usando as configurações do painel Brush
Redraw - Path Redesenha partes de um caminho selecionado usando as configurações do painel Brush
Scale - Redimensiona e rotaciona objetos
Skew - Inclina e rotaciona objetos e altera a perspectiva
Distort - Distorce e rotaciona objetos
Freeform - Estende ou reduz o segmento de um caminho usando um cursor redimensionável
Reshape Area - Faz a reformatação de um caminho selecionado dentro da área do cursor redimensionável
Path Scrubber (+) - Aumenta as características do traçado controlado pela pressão ou velocidade
Path Scrubber (–) - Diminui as características do traçado controlado pela pressão ou velocidade
Eyedropper - Faz a amostragem de uma cor, aplicando-a ao tinteiro de cor ativo
Paint Bucket - Preenche objetos com cores, degradês ou padrões e ajusta preenchimentos com as alças da ferramenta Paint Bucket
Eraser - Remove ou substitui partes dos objetos da imagem e recorta caminhos
Rubber Stamp - Copia partes do objeto de uma imagem
ReSumo:
Prós: Um programa
altamente poderoso para desenvolvimento de design e mídias para web.
Interfaces, banners, layouts, hotsites, qualquer coisa fica fácil com o
Fireworks. Fica ainda mais poderoso se aliado a Flash ou Dreamweaver.
Uma característica marcante é a presença de elementos para edição de
imagem, vetorização e design no mesmo programa. Altamente completo.
Contras: A falta de suporte a brushes como ocorre no Photoshop (se bem que não fazem tanta falta, mas seria útil se ele os suportasse).
A pedido Da moderação irei encinar algumas coisas basicas no fireworks...
1¿» Criando Banners, Rápido e prático
Por Fábio Costa de Souza e reformulado por Joshua
Nível: Básico
Vamos utilizar um dos mais usados hoje pelos sites na web, FULL BANNER, > Medidas: Horizontal: 468 x 60 ok?
1 - Crie um novo arquivo com as medidas acima 468x60, fundo transparente
2- Agora vamos importar uma imagem de sua preferencia para o arquivo
que criamos, se não sabe importar, basta ir ao menu File e clicar na
opção Import ou utilizar as teclas de atalho CTRL+R.
veja aqui minha prévia.
3- Feito isso, poderemos começar o trabalho de tipografia, tenha em
mente que, quanto mais simples for sua tipografia melhor será o
trabalho final apresentado, a pessoas que enfeitam muito nessa parte e
acabam pondo a perder um bom banner, pela quantidade de efeitos
aplicados...
Eu utilizei aqui, a fonte BASE 2, escrevi a palavra banner com tamanho
26px, adicionei um contorno a fonte preto de 1px, depois dupliquei,
apliquei um Modify>Transform>Flip to Vertical e tabém
Modify>Transform>Distort, deixando a opacidade desta camada em
20%, vejam como está ficando.
Reparem que, com pouca coisa feita em tipografia já deu um aspecto muito bom ao banner, continuando...
4- Vamos adicionar uma borda, para isso com a ferramenta Retangle ,
faça um retangulo do tamanho do banner e aplique um contorno de 4px de
largura, Pixel-soft, cor Branco, depois duplique este retangulo e agora
coloque 2px de largura, pixel-soft cor Preto, pronto você acaba de
construir uma borda dupla...
O simples pode ser muito bonito
5- Agora vamos dar um incrementada no lado direito deste banners, só
para fins estéticos, escrevi mais algumas coisas do lado direito, isso
fica a seu critério...
para fazer o efeito de iluminação do lado direito da imagem, basta
criar um Elipse com Eliptical Tool , utilizar o filtro
Filters>Blur>Gaussian Blur com raio de 10 colocar a opacidade da
camada em 30% e o mode em Lighten...
banner criado =D
CRIANDO UMA MARCA DE [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Creditos do tutoriaL: Mickdesigner
Vamos lá, vamos fazer algo simples mas que possa dar uma idéia das
possibilidades do fireworks. Começaremos criando um circulo, Usando a
ferramenta elipse tool.
Agora vamos modelar esse circulo para que ele adquira uma forma própria com a pen tool desenhe uma forma como está abaixo, seguindo o contorno do circulo.
Agora coloque a imagem criada em cima do circulo de acordo que fique
exatamente no contorno do circulo, ficando do jeito que está logo
acima. Agora vá em Modify -> Combine Paths -> Punch.
Isso irá fazer com que o circulo assuma a seguinte forma. Aproveite e já defina a cor da imagem.
Para agregar [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
a marca podemos inserir alguns detalhes como aproveitar o desenho já
feito por nós. Eu por exemplo optei em diminuir a imagem e inserir
dentro do espaço em branco aproveitando um pouco também do espaço em
branco para criar contraste entre as duas cores da imagem.
Isso é interessante também se trabalhado com cores complementares como
o símbolo principal é com a cor laranja vou colocar a parte como azul.
Agora é só dar volume a imagem aplicando alguns efeitos e poderá ter um resultado parecido com esse.
Botões do estilo do Windows XP
Creditos:Thiago Elias
1º Passo
Crie um documento 400×400 para poder trabalhar bem a vontade.
Em seguida
vamos criar a base do botão
Vamos fazer um círculo de aproximadamente 70×70, é um
bom tamanho para trabalhar (Segurando o Shift o círulo sai perfeito).
Na barra de Propriedades você pode estár acertando o tamanho,
( [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] de por em Full Hight a barra de propriedades).
Após a criação do círculo
vamos editá-lo.
Selecione ele com o mouse “branco” (a) e na
barra de Propriedades selecione Linear.
Na palheta de cores vamos usar tons de laranja cor 1
(#D37621) cor 2 (#F8DA64)
Apos selecionar as cores mude para o ponteiro preto (atalho= v), mexa
no eixo de cor e coloque ele na vertical com o ponto final no meio do
círculo.
Agora vamos usar a mágica ferramenta chamada Copiar e Colar,
selecione o círculo e aperte Ctrl + C e em seguida Ctrl+ V
(uau heim).
Agora nos temos 2 círculos iguais mas precisamos de 4, então
repita o processo até que tenha 4 círculos.
Agora selecione um dos 4 e vamos edita-lo com a setapreta (V), vamos
jogar o eixo na horizontal e voltaremos para a palheta de cores.
Primeiro passo, selecione o círculo (1), vá até a barra de propriedades
e clique na cor (2) e dentro da opção linear, deixe com Opacity 0 (3)
Repita o processo com os outros 2 círculos e mudeseu eixo e direção.
Agora selecione todos os layers e vamos Agrupar (Atalho Ctrl + G) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] de trabalhar com o ponteiro preto (v).
Vamos dar mais um efeito no círculo.
Selecione o Grupo, vá na
barra de Efeitos e aplique um Drop Shadow
vamos usar uma sombra bem leve somente para completar o efeito (vc pode add tambem outros efeitos com o grow...)
vai ficar +ou- assim
--O Brilho é uma coisa muito complicada de se fazer, a parte mais dificil desse compicado tutorial^^
Mude o ponteiro para o Branco (A) selecione um dos layers e vamos ao famoso Ctrl + C e depois Ctrl + V
Agora vamos editar as cores desse novo círculo.
Vamos deixar ele branco de um lado e com alpha branco do outro, alpha 0, vamos [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] o eixo do Linear para Vertical.
Agora vamos diminuir o círculo branco, em seguida selecionar o ponto de baixo do círculo e levanta-lo.
Agora vamos coloca-lo sobre o círculo.
Finalizando,
Agora você pode preencher o botão e vuala,
um botão tipo XP está pronto e a melhor coisa é que ele é vetorial
Ps.:
Demoro uma [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] de 1min para fazer esse botão.
Como dar um efeito de relevo ao cabelo de um personagem.
Creditos: Leonardo Vallim- Colunista de Fireworks do MXSTUDIO
O primeiro passo para fazer esse efeito no
cabelo é duplicar a layer do cabelo. Com isso vamos dar a sensção de contorno mais claro no cabelo, unido com o contorno escuro.
Agora, com a Subselection Tool
Agora, com a Pen Tool faça uma
forma parecida com essa que eu fiz no quadro
abaixo. Aqui siga a sua criatividade e
sua paciencia. Vá fazendo curvas, a quantidade que você achar necessária. Isso vai dar uma sensação de
relevo quando nós terminarmos. Lembre-se de
usar uma cor bem mais clara.
No painel de propriedades(Properties), com
a forma que você acabou de fazer selecionada,
deixe dessa forma: Edge - Feather > 10 e vá
deixando transparente até você achar que
está bom. Varia de vetor para vetor.
Eu usei para esse trabalho 35.
Agora, novamente com a Peen Tool, faça a
sombra na parte de baixo do cabelo da mesma
maneira que fez a parte mais clara. Use
Feather e transparência novamente, mas com
uma cor mais escura.
Pronto.
Acho q esta bom de dicas agora é com vcs, tudo depende da sua criatividade...
DOWNLOAD
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Programas citados acima:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
CRACKS
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Fontes:
ADOBE.COM
O Fireworks é um editor de imagens desenvolvido pela Macromedia,
posteriormente adquirido pela Adobe. Suas funcionalidades focam a
publicação gráfica na Internet, por isso inclui suporte a GIF animado,
PNG e imagens fatiadas, além de possuir ótima compressão de imagens.
Ambiente de Trabalho:
O Fireworks possui recursos que o fazem uma alternativa direta ao
ImageReady. A diferença principal está no suporte a gráficos vetoriais,
semelhante ao Adobe Illustrator, sendo o oposto do Adobe Photoshop que
suporta primordialmente edita bitmaps tendo poucos recursos únicos para
vetores.
Menus acoplados
 | Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 1260x800. |
A partir da versão MX 2004, o Fireworks passou a exibir os menus de
ferramentas mais organizados, acoplados. Eles podem ser ocultados e
suspensos trazendo uma área de trabalho imediata mais limpa.
A toolbar (barra de ferramentas) contém 34 botões. Sendo deles, alguns
com mini-menus que oferecem variações da ferramenta, chegando a marca
de 68 itens quando contados todos os ocultos.
ONDE:
Pointer - Seleciona e arrasta os objetos
Select Behind - Seleciona os objetos que estão atrás de outros objetos
Crop - Descarta partes de uma imagem
Export - Area Exporta uma parte do documento
Subselection - Seleciona um objeto dentro de um grupo ou pontos em um caminho
Marquee - Seleciona uma área de pixels retangular no modo Image Edit
Ellipse Marquee - Seleciona uma área de pixels elíptica no modo Image Edit
Lasso - Seleciona uma área de pixels à mão livre no modo Image Edit
Polygon - Lasso Seleciona uma área de pixels poligonal no modo Image Edit
Magic - Wand Seleciona áreas de pixels de cores semelhantes no modo Image Edit
Hand - Movimenta o documento
Magnify - Altera a ampliação da visualização
Line - Desenha linhas retas
Pen - Desenha caminhos por meio de pontos de ancoragem
Rectangle - Desenha retângulos, retângulos arredondados e quadrados
Ellipse - Desenha elipses e círculos
Polygon - Desenha polígonos e estrelas
Text - Cria blocos de texto
Pencil - Desenha traçados de lápis de um pixel
Brush - Desenha traçados de pincel usando as configurações do painel Brush
Redraw - Path Redesenha partes de um caminho selecionado usando as configurações do painel Brush
Scale - Redimensiona e rotaciona objetos
Skew - Inclina e rotaciona objetos e altera a perspectiva
Distort - Distorce e rotaciona objetos
Freeform - Estende ou reduz o segmento de um caminho usando um cursor redimensionável
Reshape Area - Faz a reformatação de um caminho selecionado dentro da área do cursor redimensionável
Path Scrubber (+) - Aumenta as características do traçado controlado pela pressão ou velocidade
Path Scrubber (–) - Diminui as características do traçado controlado pela pressão ou velocidade
Eyedropper - Faz a amostragem de uma cor, aplicando-a ao tinteiro de cor ativo
Paint Bucket - Preenche objetos com cores, degradês ou padrões e ajusta preenchimentos com as alças da ferramenta Paint Bucket
Eraser - Remove ou substitui partes dos objetos da imagem e recorta caminhos
Rubber Stamp - Copia partes do objeto de uma imagem
ReSumo:
Prós: Um programa
altamente poderoso para desenvolvimento de design e mídias para web.
Interfaces, banners, layouts, hotsites, qualquer coisa fica fácil com o
Fireworks. Fica ainda mais poderoso se aliado a Flash ou Dreamweaver.
Uma característica marcante é a presença de elementos para edição de
imagem, vetorização e design no mesmo programa. Altamente completo.
Contras: A falta de suporte a brushes como ocorre no Photoshop (se bem que não fazem tanta falta, mas seria útil se ele os suportasse).
A pedido Da moderação irei encinar algumas coisas basicas no fireworks...
1¿» Criando Banners, Rápido e prático
Por Fábio Costa de Souza e reformulado por Joshua
Nível: Básico
Vamos utilizar um dos mais usados hoje pelos sites na web, FULL BANNER, > Medidas: Horizontal: 468 x 60 ok?
1 - Crie um novo arquivo com as medidas acima 468x60, fundo transparente
2- Agora vamos importar uma imagem de sua preferencia para o arquivo
que criamos, se não sabe importar, basta ir ao menu File e clicar na
opção Import ou utilizar as teclas de atalho CTRL+R.
veja aqui minha prévia.
| Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 468x60. |
3- Feito isso, poderemos começar o trabalho de tipografia, tenha em
mente que, quanto mais simples for sua tipografia melhor será o
trabalho final apresentado, a pessoas que enfeitam muito nessa parte e
acabam pondo a perder um bom banner, pela quantidade de efeitos
aplicados...
Eu utilizei aqui, a fonte BASE 2, escrevi a palavra banner com tamanho
26px, adicionei um contorno a fonte preto de 1px, depois dupliquei,
apliquei um Modify>Transform>Flip to Vertical e tabém
Modify>Transform>Distort, deixando a opacidade desta camada em
20%, vejam como está ficando.
| Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 468x60. |
Reparem que, com pouca coisa feita em tipografia já deu um aspecto muito bom ao banner, continuando...
4- Vamos adicionar uma borda, para isso com a ferramenta Retangle ,
faça um retangulo do tamanho do banner e aplique um contorno de 4px de
largura, Pixel-soft, cor Branco, depois duplique este retangulo e agora
coloque 2px de largura, pixel-soft cor Preto, pronto você acaba de
construir uma borda dupla...
| Esta imagem foi redimensionada. Clique na barra para ver esta imagem maior. O tamanho da imagem original é 468x60. |
O simples pode ser muito bonito
5- Agora vamos dar um incrementada no lado direito deste banners, só
para fins estéticos, escrevi mais algumas coisas do lado direito, isso
fica a seu critério...
para fazer o efeito de iluminação do lado direito da imagem, basta
criar um Elipse com Eliptical Tool , utilizar o filtro
Filters>Blur>Gaussian Blur com raio de 10 colocar a opacidade da
camada em 30% e o mode em Lighten...
banner criado =D
CRIANDO UMA MARCA DE [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Creditos do tutoriaL: Mickdesigner
Vamos lá, vamos fazer algo simples mas que possa dar uma idéia das
possibilidades do fireworks. Começaremos criando um circulo, Usando a
ferramenta elipse tool.
Agora vamos modelar esse circulo para que ele adquira uma forma própria com a pen tool desenhe uma forma como está abaixo, seguindo o contorno do circulo.
Agora coloque a imagem criada em cima do circulo de acordo que fique
exatamente no contorno do circulo, ficando do jeito que está logo
acima. Agora vá em Modify -> Combine Paths -> Punch.
Isso irá fazer com que o circulo assuma a seguinte forma. Aproveite e já defina a cor da imagem.
Para agregar [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
a marca podemos inserir alguns detalhes como aproveitar o desenho já
feito por nós. Eu por exemplo optei em diminuir a imagem e inserir
dentro do espaço em branco aproveitando um pouco também do espaço em
branco para criar contraste entre as duas cores da imagem.
Isso é interessante também se trabalhado com cores complementares como
o símbolo principal é com a cor laranja vou colocar a parte como azul.
Agora é só dar volume a imagem aplicando alguns efeitos e poderá ter um resultado parecido com esse.
Botões do estilo do Windows XP
Creditos:Thiago Elias
1º Passo
Crie um documento 400×400 para poder trabalhar bem a vontade.
Em seguida
vamos criar a base do botão
Vamos fazer um círculo de aproximadamente 70×70, é um
bom tamanho para trabalhar (Segurando o Shift o círulo sai perfeito).
Na barra de Propriedades você pode estár acertando o tamanho,
( [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] de por em Full Hight a barra de propriedades).
Após a criação do círculo
vamos editá-lo.
Selecione ele com o mouse “branco” (a) e na
barra de Propriedades selecione Linear.
Na palheta de cores vamos usar tons de laranja cor 1
(#D37621) cor 2 (#F8DA64)
Apos selecionar as cores mude para o ponteiro preto (atalho= v), mexa
no eixo de cor e coloque ele na vertical com o ponto final no meio do
círculo.
Agora vamos usar a mágica ferramenta chamada Copiar e Colar,
selecione o círculo e aperte Ctrl + C e em seguida Ctrl+ V
(uau heim).
Agora nos temos 2 círculos iguais mas precisamos de 4, então
repita o processo até que tenha 4 círculos.
Agora selecione um dos 4 e vamos edita-lo com a setapreta (V), vamos
jogar o eixo na horizontal e voltaremos para a palheta de cores.
Primeiro passo, selecione o círculo (1), vá até a barra de propriedades
e clique na cor (2) e dentro da opção linear, deixe com Opacity 0 (3)
Repita o processo com os outros 2 círculos e mudeseu eixo e direção.
Agora selecione todos os layers e vamos Agrupar (Atalho Ctrl + G) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] de trabalhar com o ponteiro preto (v).
Vamos dar mais um efeito no círculo.
Selecione o Grupo, vá na
barra de Efeitos e aplique um Drop Shadow
vamos usar uma sombra bem leve somente para completar o efeito (vc pode add tambem outros efeitos com o grow...)
vai ficar +ou- assim
--O Brilho é uma coisa muito complicada de se fazer, a parte mais dificil desse compicado tutorial^^
Mude o ponteiro para o Branco (A) selecione um dos layers e vamos ao famoso Ctrl + C e depois Ctrl + V
Agora vamos editar as cores desse novo círculo.
Vamos deixar ele branco de um lado e com alpha branco do outro, alpha 0, vamos [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] o eixo do Linear para Vertical.
Agora vamos diminuir o círculo branco, em seguida selecionar o ponto de baixo do círculo e levanta-lo.
Agora vamos coloca-lo sobre o círculo.
Finalizando,
Agora você pode preencher o botão e vuala,
um botão tipo XP está pronto e a melhor coisa é que ele é vetorial
Ps.:
Demoro uma [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] de 1min para fazer esse botão.
Como dar um efeito de relevo ao cabelo de um personagem.
Creditos: Leonardo Vallim- Colunista de Fireworks do MXSTUDIO
O primeiro passo para fazer esse efeito no
cabelo é duplicar a layer do cabelo. Com isso vamos dar a sensção de contorno mais claro no cabelo, unido com o contorno escuro.
Agora, com a Subselection Tool
Agora, com a Pen Tool faça uma
forma parecida com essa que eu fiz no quadro
abaixo. Aqui siga a sua criatividade e
sua paciencia. Vá fazendo curvas, a quantidade que você achar necessária. Isso vai dar uma sensação de
relevo quando nós terminarmos. Lembre-se de
usar uma cor bem mais clara.
No painel de propriedades(Properties), com
a forma que você acabou de fazer selecionada,
deixe dessa forma: Edge - Feather > 10 e vá
deixando transparente até você achar que
está bom. Varia de vetor para vetor.
Eu usei para esse trabalho 35.
Agora, novamente com a Peen Tool, faça a
sombra na parte de baixo do cabelo da mesma
maneira que fez a parte mais clara. Use
Feather e transparência novamente, mas com
uma cor mais escura.
Pronto.
Acho q esta bom de dicas agora é com vcs, tudo depende da sua criatividade...
DOWNLOAD
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Programas citados acima:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
CRACKS
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Fontes:
ADOBE.COM
D4N1L0X- General of the Army
- Mensagens : 71
Lumber : 15
Data de inscrição : 02/06/2009
Idade : 29
Localização : No Forum~~* -
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|