O documento apresenta uma introdução ao curso "Design de Interfaces" ministrado pela professora Heloisa Biagi. O curso tem como objetivos ensinar o uso do software Adobe Fireworks para edição de imagens e vetores, técnicas de planejamento e criação de interfaces, e desenvolvimento de protótipos de interfaces. O documento também fornece uma breve introdução ao Adobe Fireworks, explicando suas principais ferramentas e funcionalidades para edição de gráficos vetoriais e bitmap.

1. Design de Interfaces
Profa. Heloisa Biagi

2. > Heloisa Biagi
Designer e front-end developer no jornal Valor Econômico
Email: heloisa.biagi@gmail.com
Blog: www.heloisabiagi.com
Slideshare (materiais):
http://www.slideshare.net/HeloisaBiagi
Facebook: Heloisa Biagi
Linkedin: http://www.linkedin.com/pub/heloisabiagi/1b/572/90a

3. Design de Interfaces
Objetivo das aulas:
- Aprender a utilizar ferramentas de edição de
imagens e vetores (Fireworks)
- Aprender técnicas de planejamento e criação de
interfaces
- Desenvolver interfaces com o Fireworks.

4. Adobe Fireworks
- Software de Edição de Gráficos
- Trabalha com bitmaps e vetores
- Possibilita a criação de gráficos, gifs animados,
protótipos etc.
- Protótipo: versão ‘experimental’ de um site com
páginas e navegação.

5. Adobe Fireworks
Painel de transformações
Caixa de ferramentas
Painéis diversos
Painel de propriedades

6. Gráficos
- Bitmaps: são arquivos ‘fechados’ compostos por
uma seleção de pontos (pixel) alinhados.
- Vetores: são equações matemáticas que
resultam em formas.
- Diferença: um vetor pode ser facilmente
ampliado e modificado; basta refazer a sua
equação. Já um bitmap, para ser modificado,
precisa ter a modificação aplicada a seus pixels.

7. Gráficos
- Navegadores: trabalham principalmente com
imagens bitmap. HTML5 possibilita trabalhar
com vetores.
- Tipos de formatos para web:
GIF: 256 cores. Transparência e animações.
JPEG: +- 16 mi de cores. Sem transparência. É
possível escolher o nível de compressão.
PNG: +- 16 mi de cores. Suporta
transparência. Sem compressão (arquivos maiores).

8. Bitmaps no Fireworks
-
Abrir e Salvar imagens
Criar Novo Documento
Seleção
Pincéis
Carimbo
Filtros
Camadas