INTERFACE DO FIREWORKS

 

Olá pessoal sejam todos bem-vindos ao nosso primeiro artigo sobre Macromedia Fireworks.

 

Para aqueles apaixonados por designer e que pretendem seguir carreira como webdesigner, designer de interface e mesmo aqueles que querem apenas aprender a trabalhar com layout, esta ferramenta torna-se essencial para que o profissional desenvolva um serviço com qualidade.

 

Este aplicativo, desenvolvido pela Macromedia Inc, nos possibilita criar apresentações de layout com designer arrojado. Comprovaremos o leque de opções oferecidas por tal ferramenta durante os artigos.

 

Utilizaremos a versão Macromedia Fireworks MX para apresentação dos conceitos e funcionalidades.

 

Para iniciar tal aplicativo, acesse o menu Iniciar, Programas, Macromedia, Macromedia Fireworks MX.

 

 

Quando abrimos o fireworks pela primeira vez, poderão surgir várias janelas flutuantes ao lado direito da tela.

 

Podemos fechar todas estas janelas, deixando apenas a Caixa de Ferramentas e a Barra de Propriedades.

 

Caso feche as demais caixas, acidentalmente, acesse o menu Janela e selecione as opções Ferramentas e Propriedades, ou se preferir, utilize os atalhos Ctrl+F2 (Ferramentas) e Ctrl+F3 (Propriedades).

 

Para que possamos conhecer melhor a Caixa de Ferramentas e a Barra de Propriedades, criaremos um novo documento, somente a título de demonstração. Para se criar um novo documento, temos que acessar o menu Arquivo, Novo ou acionar o atalho Ctrl+N.

 

 

Surgirá a seguinte tela:

 

 

Nesta tela definiremos a largura, a altura, a resolução e a cor da tela para nosso site.

 

Trabalharemos sempre com Pixels. A largura definiremos como 778 pixels por ser a largura padrão da internet. Utilizando-se esta largura o site não irá gerar barras de rolagem horizontal. Este aspecto profissionalizará o projeto que está sendo desenvolvido.

 

A altura podemos definir qualquer uma, pois não sabemos ao certo, de princípio, qual será a altura do projeto final. Nos tutorais seguintes estarei mostrando como trabalhar com este atributo detalhadamente.

 

Quanto a resolução, deixamos como padrão 72 Pixels/Polegadas, que vem a ser também um padrão utilizado para desenvolvimento web. Isto devido ao aspecto carregamento. Se você define uma resolução acima de 72 Pixels/Polegadas, seu site irá demorar a carregar suas imagens e isto, conseqüentemente, desagradará os internautas que irão acessar seu website pelo fato de carregar com lentidão. Tenha sempre em mente o desenvolvimento de site dinamizados no aspecto carregamento.

 

Já a cor da tela, temos que definir de acordo com o planejamento feito para aquele projeto, ou seja, poderemos trabalhar com um fundo branco ou um fundo transparente ou ainda escolher uma cor personalizada para o site. Caso selecionarmos a opção Personalizar e dar um clique na caixinha ao lado, teremos um leque de cores pré-definidas. Nesta mesma janela que surgiu podemos manipular qualquer outra cor através de comandos, mas isso deixaremos para um momento futuro quando tiverem adquirido mais experiência com a ferramenta.

 

 

Após ter configurado todas as opções necessárias, teremos nosso documento devidamente criado.

 

Irei criar um objeto neste novo documento apenas para apresentar a Caixa de Ferramentas e a Barra de Propriedades. Vejam:

 

 

Na Caixa de Ferramentas, encontramos uma hierarquia de divisão das ferramentas. Temos as seguintes seções:

• Selecionar;
• Bitmap;
• Vetor;
• Web;
• Cores;
• Exibir.

Cada seção possui suas particularidades que serão vistas adiante. Utilizaremos todas as ferramentas ali presentes ao decorrer dos artigos.

 

Na parte inferior, encontramos a Barra de Propriedades, sendo esta de grande importância. A barra de Propriedade altera-se de acordo com os botões que estão sendo utilizados no momento.

 

Para o objeto criado com fins demonstrativos, podemos observar suas propriedades. Na lateral esquerda da Barra de Propriedades, encontramos o desenho de um balde de tinta. Este balde de tinta é responsável pela seleção da cor do objeto criado.

 

 

Já a opção ao lado direito do balde de tinta, que apresenta-se como Sólido, é o local onde podemos “brincar” com algumas formas existentes. Uma configuração bastante utilizada atualmente pelos profissionais da área é a Linear, que apresenta um resultado de degrade ao objeto. Para selecionar uma destas opções, clique na setinha. Abrirá uma lista na qual deverá escolher o modelo de seu gosto.

 

 

Ao centro da Barra de Propriedades encontramos a opção com o desenho de um lápis. Trata-se do contorno do objeto. A maneira para se configurar esta opção é a mesma utilizada para se escolher a cor do objeto, que foi explicada acima para o balde de tinta.

 

 

Ainda nesta barra podemos trabalhar com a manipulação do tamanho e posicionamento do objeto na tela.

 

No lado esquerdo, na parte inferior da tela, encontra-se as seguintes opções:

 

 

Segue explicação de cada opção desta seção:

 

A letra “W” indica a largura do objeto.

A letra “H” indica a altura do objeto.

 

A letra “X” indica o posicionamento em relação ao eixo “x”, ou seja, posicionamento horizontal.

A letra “Y” indica o posicionamento em relação ao eixo “y”, ou seja, posicionamento vertical.

 

Pois bem pessoal, neste primeiro artigo foi apresentado algumas características básicas do fireworks, que serão de extrema importância o seu conhecimento e domínio por parte do aprendiz nos próximos artigos.

 

Agradeço a atenção de todos e conto com o acesso de todos nos próximos artigos.

 

Surgindo qualquer dúvida a respeito da ferramenta Macromedia Fireworks e assuntos afins, favor contactar-me pelo seguinte e-mail: webdesigner.pro@pop.com.br.

 

Um cordial abraço a todos!

 

Fábio Almeida

http://fabioalmeida.z6.com.br