INTERAÇÃO ENTRE O FIREWORKS E O DREAMWEAVER PARA EDIÇÃO DE IMAGENS

 

Olá galera, tudo bem com vocês?! Com tantos tutoriais já publicados sobre esta maravilhosa ferramenta de design, como anda o conhecimento de todos? Espero que estes tutoriais possam estar agregando um valor significativo para a vida pessoal e profissional de vocês.

 

Nesta semana vamos aprender a editar imagens no Dreamweaver utilizando o Fireworks. Isso é perfeitamente possível devido ao fato do pacote Macromedia Studio possuir esta interatividade entre seus aplicativos, neste caso o Dreamweaver se comunicando com o Fireworks.

 

Utilizamos o Dreamweaver, principalmente, para estruturar nossos projetos web. No desenvolver destes projetos não raramente nos deparamos com o tratamento de imagens que devem ser feitos. Neste tutorial ensinarei a editar uma imagem que tenha extrapolado o tamanho limite de uma determinada tabela no Dreamweaver.

 

Acompanhe:

 

1) Veja a tela abaixo onde tenho uma tabela criada no Dreamweaver e que tem 450 pixels de largura.

 

Figura 01: tabela com 450 pixels de largura criada no Dreamweaver.

 

2) Imagine que tenha que inserir a imagem “Audi-tt.jpg” que tem 1024 pixels de largura. Veja o que acontece:

 

Figura 02: imagem inserida em uma tabela de largura inferior.

 

3) Perceba que a imagem “estourou” o tamanho da tabela. Isso porque a tabela tem 450 pixels de largura enquanto a imagem tem 1024 pixels de largura (mais do que o dobro).

 

4) Para editar a imagem para o tamanho correto da tabela, clique na imagem e logo após no botão Edit Fireworks. Veja:

 

Figura 03: botão para edição usando o Fireworks.

 

5) Ao clicar no botão, automaticamente o Fireworks será aberto. Aparecerá a seguinte mensagem:

 

Figura 04: mensagem que surge ao clicar no botão Edit Fireworks.

 

6) Clique em Não. Sua imagem estará disposta no palco, pronta para receber as modificações. Agora vamos diminuir o tamanho da imagem, que é o nosso objetivo.

 

Clique na imagem e acesse o menu Modificar, Tela, Tamanho da imagem....

 

Figura 05: menu responsável pela modificação do tamanho da imagem.

 

7) Surgirá na tela a janela Tamanho da imagem. Nesta janela, preencha de acordo com o tamanho que deseja que a imagem fique lá na tabela criada no Dreamweaver. No nosso exemplo, redimensionarei a imagem para 450 pixels (que é o tamanho da tabela criada no Dreamweaver). Veja:

 

Figura 06: inserção da primeira linha da horizontal.

 

Observação: Note que o tamanho segue a proporção da imagem. Quando indicamos o valor para a largura, automaticamente o valor para a altura é preenchido.

 

8) A imagem admitirá o tamanho correto.

 

Figura 07: imagem redimensionada para adaptar ao tamanho da tabela.

 

9) Você pode aproveitar o momento e aplicar os efeitos que desejar, pois pelo Fireworks conseguimos aplicar efeitos diversos, como os que já estudamos até o momento.

 

10) Ao finalizar as modificações no Fireworks, o nosso único trabalho para que todas estas modificações sejam aplicadas no Dreamweaver é clicar no botão Concluído, que se localiza na parte superior a esquerda do palco.

 

Figura 08: botão concluído.

 

11) Quando clicamos neste botão, somos redirecionados para o Dreamweaver novamente, de forma automática.

 

12) Aparentemente não notarás diferença. Sua tabela ainda continuará “estourada”. Daí o árduo trabalho a ser feito é clicar na setinha da “Skol” (isso é brincadeira). Temos que clicar na setinha em forma de rotação, que fica localizada na parte inferior a esquerda de seu palco. Veja:

 

Figura 09: botão redimensionar do Dreamweaver.

 

13) Ao clicar nesta setinha a mágica acontecerá. A imagem estará redimensionada para os padrões da tabela criada no Dreamweaver e você não terá mais problema algum com esta imagem.

 

Figura 10: imagem de acordo com o tamanho da tabela.

 

A interação entre os aplicativos do pacote Macromedia Studio é grande, basta explora-los.

 

Espero que tenham gostado de mais esta dica.

 

Finalizamos assim, mais um tutorial da série Fireworks.

 

Estou à disposição de todos! Envie suas críticas e/ou sugestões para o e-mail webdesigner.pro@pop.com.br. Terei todo prazer em atendê-lo.

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 

Pessoal, trago uma boa notícia a todos os que acompanham a série de tutoriais da série Fireworks aqui no site do Júlio Battisti. Já está a venda o curso de Fireworks Básico – Passo a Passo, de minha autoria. É uma maneira fácil e didática de se aprender esta maravilhosa ferramenta de design. São inúmeros exemplos práticos que irão te levar a um mundo totalmente real em se tratando de design em geral. Clique aqui para saber mais sobre este curso. Veja também o lançamento Fireworks – Aprenda na Prática, ebook este também de minha autoria.

 

Galera, participem do Fórum de Fireworks no site https://juliobattisti.com.br/ e troque conhecimentos com diversas pessoas. Acesse já!

 

Chegamos ao final de mais um tutorial da série Fireworks. Caso tenha dúvida(s), entre em contato comigo através do e-mail webdesigner.pro@pop.com.br

 

Para desenvolvimento de Sites, Layout, Apresentações, Flyes, Banners, Identidade Visual, Diagramação, Vetorização e Serviços Gráficos em geral, enviem e-mail para: webdesigner.pro@pop.com.br e solicite seu orçamento. Profissionalismo sempre!

 

Até a próxima!

 

Um cordial abraço a todos,

 

Fábio Almeida