Instituto Federal Do Mato Grosso - Campus Cuiab

Instituto Federal de Educao, Cincia e Tecnologia

Criao Para Web Guilherme Zazu Simes

1

Agenda de Hoje
O que faremos hoje ??? Bastante Coisa Apresentar ementa da disciplina Mtodo de Avaliao Discusso sobre ferramentas de trabalho Atividade Inicial

Ementa da Disciplina
Alguns pontos importantes que veremos durante a disciplina: Conhecer ambientes que possibilitem o desenvolvimento de projetos Conhecer as facilidades oferecidas pelos ambientes Trabalhar com ferramenta para criao de vetores Manipular paleta de cores Conhecer formatos de imagens
3

Ementa da Disciplina
Alguns outros Integrao XML com ferramentas de criao Trabalho com Texturas Trabalho com Tipograas Processos de exportao de imagens E muito mais
4

Mtodo de Avaliao
No tenha medo , a minha avaliao somente para saber se voc realmente entendeu o que eu disse !

Criao de Artefatos !! Avaliaes Tericas !! Avaliaes Prticas !!

Ferramentas de Trabalho
Vamos conhecer algumas ferramentas para criao ?

Atividade Inicial
Realize uma pesquisa comparativa das ferramentas discutidas anteriormente dissertando acerca dos seguintes tpicos:

Vantagens e Desvantagens Finalidade especca de cada ferramenta Licena de Uso & Custos

Agenda de Hoje (17/08)

Alguns pontos que trabalharemos hoje FeedBack de Atividade Instalar a ferramenta de trabalho (Adobe Fireworks) Conhecer interface da ferramenta Conhecer os itens da barra de ferramentas e suas respectivas funes. Vamos l
8

Feedback Atividade
Feedback de atividade: Pesquisa Comparativa entre ferramentas Vantagens, Licena de Uso, Facilidades

Voc encontrou todas as informaes que procurava? Qual a sua opinio sobre a ferramenta Inkscape? Quais vantagens voc poderia apontar para prossionais que utilizam ferramentas Adobe?

Interface Adobe Fw
Interface bastante simples e intuitiva.
Nvel de Zoom do palco

Ferramenta Mo

Barra de Menus

Barra de Ferramentas

Initial Screen

Painel de Propriedades

10

Interface Adobe Fw (1)

Criando um novo documento
Unidade de Medida utilizada

Largura do Documento Altura do Documento Resoluo do Documento

Largura, Altura, Resoluo De nio de Unidade de Medida Controle de Palco (Cor)

Fundo do Palco

11

Interface Adobe Fw (2)

Conhecendo a Barra de Ferramentas o caminho mais simples para resolver tudo o que precisaremos Nos proporciona um srie de funcionalidades teis Customizvel Vamos conhecer cada um de seus elementos

12

Interface Adobe Fw (3)

Conhecendo a Barra de Ferramentas > Ferramentas de Seleo

Selection Tool (V) Select Behind Tool (V)

Sub-Selection Tool (A)

Scale Tool (Q) Skew Tool (Q) Distort Tool (Q) Crop Tool (C) Export Area Tool (C)

13

Atividade
Aplicando o conhecimento adquirido. Pesquise no google images por uma imagem qualquer, aps selecionada a imagem de sua preferncia salve a mesma em seus desktop. Crie um novo documento no reworks com as seguintes medidas: 800px X 600px Cole a imagem que voce selecionou no palco e teste as funcionalidades ja detalhadas em sala.
14

Agenda de Hoje (24/08)

O que faremos na aula de hoje ?? Feedback da atividade de criao de artefatos Gabarito dos artefatos passo a passo Continuao apresentao interface Adobe Fireworks Atividade Vamos l
15

Gabarito Artefatos
Processo de composio (Tela Inicial PGE-MT) Quadrado texturizado, com linhas verticais e transparncia. Background Descritivos textuais do sistema Algumas estrelas cone com bandeira de Mato-Grosso cone de acesso ao sistema
16

Gabarito Artefatos
Processo de composio (Tela Inicial PGE-MT) - Background

1
Fundo branco

Quadrado com textura (Line-Diag 1) 6% Transparncia

17

Gabarito Artefatos
Processo de composio (Tela Inicial PGE-MT) - Desc. Textuais

Descritivo Textual (Fonte Arial)

18

Gabarito Artefatos
Processo de composio (Tela Inicial PGE-MT) - Estrelas

Estrelas 3% Transparncia

19

Gabarito Artefatos
Processo de composio (Tela Inicial PGE-MT) - cone Bandeira
Forma
Linear (#FFFFFF - #EEEEEE) Textura Line-Horiz 1 1 px borda (#FFFFFF)

Contorno
1px Borda (#CCCCCC) - Hard Rounded Quadrado com 8 % arredondamentos nos cantos

Smbolo Bandeira -MT

Crop Tool (Imagem)

Espelho
Preenchimento (#FFFFFF) , 50% Transparncia.

20

Interface Adobe Fw (4)

Conhecendo a Barra de Ferramentas > Ferramentas de Bitmap
Marquee Tool (M) Oval Marquee Tool (M)

Lasso Tool (L) Polygon Lasso Tool(L)

Magic Wand Tool (W)

Brush Tool (B)

Pencil Tool (B)

Eraser Tool (E)

Blur Tool (Desfoque) (R) Sharpen Tool (Realar) (R) Dodge Tool (Clarear) (R) Burn Tool (Escurecer) (R) Sumdge Tool (Distorcer) (R)

Ruber Stamp Tool (S) Replace Color Tool (S) Red Eye Removal (S)

21

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Detalhamento de Cada Ferramenta Marquue Tool (M) Oval Marquue Tool (M)
Ambas possibilitam fazer marcaes em cima de um bitmap. Extremamente til quando se pretender fazer um recorte em um rea espec ca ou tratamento em parte espec ca da imagem.

Magic Wand Tool (W)

Possibilita a remoo de pontos de cores semelhantes, pode-se calibrar o nvel de preciso da ferramenta

22

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Detalhamento de Cada Ferramenta Pencil Tool (B)
Possibilita criar desenhos livres no palco gerando bitmaps.

Blur Tool (Desfoque) (R)

Possibilita aplicar desfoque em bitmaps.

Sharpen Tool (R)

Possibilita realar pontos da imagem. Cuidado com a calibragem desta ferramenta.

Dodge Tool (R)

Possibilita fazer clareamentos em partes espec cas de um bitmap.

23

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Burn Tool (R) Detalhamento de Cada Ferramenta
Possibilita escurecer partes espec cas de um bitmap.

Smudge Tool (R)

Possibilita dissolver/misturar partes espec cas de um bitmap.

Lasso Tool (L)

Polygon Lasso Tool (L)

Brush Tool (B)

Possibilita a criao de brushes em forma livre no palco, pode-se con gurar o estilo do traado.

Ambas possibilitam fazer marcaes em cima de um bitmap. Extremamente til quando se pretender fazer um recorte em um rea espec ca ou tratamento em parte espec ca da imagem.

24

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Eraser Tool (E) Detalhamento de Cada Ferramenta
Possibilitar apagar partes de um bitmap.

Ruber Stamp Tool (S)

Ferramenta carimbo, permite criar clones de determinado bitmap

Replace Color Tool (S)

Po s s i b i l i t a r s u b s t i t u i r co re s d e determinada parte de um bitmap, pode-se con gurar a preciso da ferramenta.

Red Eye Removal (S)

Ferramenta para remoo de olhos vermelhos.

25

Atividade
Aplicando o conhecimento adquirido. Pesquise no google images por uma imagem qualquer, aps selecionada a imagem de sua preferncia salve a mesma em seu desktop. Crie um novo documento no reworks com as seguintes medidas: 800px X 600px Cole a imagem que voce selecionou no palco e teste as funcionalidades ja detalhadas em sala.
26

Agenda de Hoje (28/09)

O que faremos na aula de hoje ?

Continuao apresentao Interface Adobe Fireworks. Praticaremos a principal ferramenta de qualquer software de criao Vamos l

27

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Pen Tool (P) Line Tool (N) Shapes Redraw Path Tool (P)
Rectangle Tool (U) Elipse Tool (U) Polygon Tool (U) Arrow Beveled Rectangle Chamfer Rectangle Conector Line Doughnut L-Shape Pie Rouded Rectangle Smart Polygon Spiral Star

Vector Path Tool (P)

Text Tool (T)

Knife Tool (Y) Free Form Tool (O) Reshape Area Tool Path Scrubber Tool - Additive (O) Path Scrubber Tool - Subtractive (O)

28

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Line Tool (N) Detalhamento de Cada Ferramenta
Possibilita a criao de linhas no palco, para criar linhas em angulos exatos mantenha a tecla SHIFT pressionada.

Shapes

Height

Thickness Arrow Size Arrow Tip

Rectangle Tool (U)

Elipse Tool (U)

Polygon Tool (U)

Arrow

Beveled Rectangle

Formado por 4 pontos, para poder trabalhar com cada ponto necessrio ativar a edio do mesmo via ferramenta SubSelection Tool (V)

Formado por 4 pontos, para poder trabalhar com cada ponto necessrio ativar a edio do mesmo via ferramenta SubSelection Tool (V)

Possibilita a criao de poligonos no palco, pode-se con gurar o angulo em que o mesmo ser posto no palco e o nmero de lados.

Possibilita a criao de setas no palco pode-se con gurar os seguintes pontos: Largura( Width), Altura(Height), Espessura(Thickness), Arredondamento (Roundness).

Width Thickness

Switch Corners
Possibilita a criao de Beveled Rectangles, permitindo a con gurao Switch Corners

29

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Chamfed Rectangle Detalhamento de Cada Ferramenta
Possibilita a criao de Chamfed Rectangles , permitindo a con gurao Switch Corners

Switch Corners

Shapes
Rotate Point Conector Line Make Drag Semgments Doughnut L-Shape Pie Scale/ Rotate Ponto 1 Click reset Click reset Rounded Point
Possibilita a criao de linhas conectoras para unir diferentes formas. Pode-se con gurar a rotao e os pontos perifricos.

Make Drag Semgments Smart Polygon Sections Inner Radius

Inner Radius
Se observarmos com ateno veremos que LShape a parte traseira de uma seta, possibilitando as mesma con guraes. Ver objeto Arrow Possibilita a criao de formas baseadas em g r c o - p i z z a . Possibilitar con gurar os seguintes pontos: Drag-Segment, Click Reset.

Sides
Possibilitar criar poligonos especiais. Pode-se con gurar os seguintes pontos: Scale/Rotate, Sections, Sides e Inner Polygon.

Possibilita a criao de elipses vazadas. Podese con gurar os seguintes pontos: Drag-Segment, Click reset, Inner Radius.

Ponto 2

30

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Spiral Detalhamento de Cada Ferramenta
Possibilita a criao de formas espirais no palco. Pode-se conigurar os seguintes pontos: Open/Close Spiral e nmero de voltas da espiral.

Open/Close Spiral

Nro Voltas

Shapes

Start Radius 1 Radius 2 Roundness 1

Points

Roundness 2

Possibilita a criao de estrelas no palco, a partir dela conseguimos fabricar diversas formas. Pode-se con gurar os seguintes pontos: Radius1, Radius 2, Roudness1, Roundness 2 e Points.

31

Interface Adobe Fw (5)

Conhecendo a Barra de Ferramentas > Ferramentas Vetor
Detalhamento de Cada Ferramenta

Pen-Tool
Click/Drag Click

Vector Path Tool

Vector Path Tool

Feito somente com clicks do mouse

Desenhado com base em click/drag, note os pontos que forma curvas

Possibilita a criao de vetores de forma livre, muito semelhante a ferramenta Pencil Tool. Possibilita continuar um traado feito com a pen tool no palco.

Ferramenta baseada em click/drag, possibilitando a criao de retas/curvas.

32

Exercicios Pen Tool

Momento de prtica para ferramenta Pen Tool

33

Agenda de Hoje
O que faremos na aula de hoje ??

Preenchimento com Adobe Fireworks Lineares, Radiais e Texturas. Treinamento

34

Preenchimento Adobe FW
muito simples tudo est no painel de propriedades
Antes vamos entender todo o painel de propriedades

1 W,H (De nem respectiv amente largura e altura do objeto).

2 X,Y (De nem as coorden adas do objeto no palco)

3 Exibe caixa de dialogo para escolha de cor de preenchim ento 4

4 Exibe as opes de preenchim ento: Solid, Gradient e Pattern

5 Exibe as opes de suavizao de borda: Anti-Alias, Hard e Feather 7

6 Possibilita seleo de um modelo de textura para aplicao. 8

7 De ne a cor de borda para o objeto marcado no palco

8 De ne o estilo da borda para o objeto marcado no palco. 11

9 De ne o nvel de suaviza o da borda do objeto marcado no palco.

10 Possibilita seleo de um modelo de textura para aplicao.

11 Controle o nvel de opacidade para o objeto marcado no palco.

3 2 1 5 6 10 9

35

Preenchimento Adobe FW
muito simples tudo est no painel de propriedades
Aplicando Preenchimento Slido

Primeiro desenhamos o quadrado no palco De nimos que nosso preenchimento ser slido E por ltimo selecionamos com qual a cor iremos preencher o quadrado

36

Preenchimento Adobe FW
muito simples tudo est no painel de propriedades
Aplicando Preenchimento Gradient > Linear

Primeiro desenhamos o quadrado no palco De nimos que nosso preenchimento ser Gradient>Linear Seleo de cores do gradiente.
1 2 1 De ne as cores de origem e de m do linear. Click p/ Add. 2 Controla o nvel de opacid. da cor de origem/ Fim

37

Preenchimento Adobe FW
muito simples tudo est no painel de propriedades
Aplicando Preenchimento Texturizado

Primeiro desenhamos o quadrado no palco De nimos que nosso preenchimento ser baseado em pattern(Textura) Seleo da textura

38

 hora da ptica
O que vo precisa saber para reproduzir o artefato seguinte ??

Pen-Tool Preenchimento Adobe Fireworks

39

 hora da ptica

40