Design de Interfaces
Profa. Heloisa Biagi
> 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
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.
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.
Adobe Fireworks
Painel de transformações

Caixa de ferramentas
Painéis diversos

Painel de propriedades
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.
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).
Bitmaps no Fireworks
-

Abrir e Salvar imagens
Criar Novo Documento
Seleção
Pincéis
Carimbo
Filtros
Camadas

Design de Interfaces - Aula 01 (Introdução a gráficos e ao Fireworks)

  • 1.
  • 2.
    > Heloisa Biagi Designere 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 Objetivodas 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 - Softwarede 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 detransformações Caixa de ferramentas Painéis diversos Painel de propriedades
  • 6.
    Gráficos - Bitmaps: sãoarquivos ‘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: trabalhamprincipalmente 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 - Abrire Salvar imagens Criar Novo Documento Seleção Pincéis Carimbo Filtros Camadas