Curso de Web Designer
-
Upload
matheusart -
Category
Documents
-
view
230 -
download
0
Transcript of Curso de Web Designer
-
8/14/2019 Curso de Web Designer
1/122
-
8/14/2019 Curso de Web Designer
2/122
NDICEHTML1. DEFINIO......................................................................................................... .01
2. CRIANDO DOCUMENTOS HTML.......................................................................032.1 - ELEMENTOS BSICOS.........................................................................052.1.1 - TTULOS..............................................................................................052.1.2 - CABEALHO.......................................................................................062.1.3 - PARGRAFO.......................................................................................072.1.4 - QUEBRA DE LINHA.............................................................................082.1.5 - COMENTRIOS...................................................................................092.1.6 - LISTA DE ELEMENTOS BSICOS......................................................092.1.7 - DICAS...................................................................................................10
3. FORMATAO DE TEXTO................................................................................ .113.1 - DEFININDO FONTES.............................................................................113.2 - ESTILO DE TEXTOS..............................................................................123.3 - FORMATANDO BLOCO DE TEXTOS....................................................133.3.1 - TAG DIV...............................................................................................13
4. CONTROLE DE CORES E GRFICOS DE FUNDO......................................... ..154.1 - CORES E ELEMENTOS GRFICOS DE FUNDO..................................154.1.1 - BACKGROUND (IMAGEM DE FUNDO)..............................................154.1.2 - BGCOLOR............................................................................................164.2 - CORES DE LETRAS E LINKS................................................................184.2.1 - ATRIBUTO TEXT..................................................................................184.2.2 - ATRIBUTO LINK, VLINK E ALINK........................................................19
5. LINKS.................................................................................................................. ...215.1 - NCORAS..............................................................................................215.2 - INTERLIGANDO DOCUMENTOS EM OUTROS DIRETRIOS...........225.3 - INTERLIGANDO URL'S.........................................................................255.4 - LINKS PARA E-MAILS...........................................................................25
6. LISTAS................................................................................................................. .266.1 - LISTAS NO NUMERADAS.....................................................................266.2 - LISTAS NUMERADAS..............................................................................286.3 - LISTA DE DEFINIES...........................................................................306.4 - LISTA INTERCALADAS............................................................................33
7. IMAGENS............................................................................................................. ..357.1 - INSERINDO IMAGENS NA PGINA.......................................................367.2 - DIMENSIONANDO IMAGENS.................................................................377.3 - ALINHANDO IMAGENS...........................................................................387.3.1 - ALINHAMENTO EM RELAO AO NAVEGADOR...............................387.3.2 - ALINHAMENTO EM RELAO AO TEXTO... ......................................397.4 - OUTROS ATRIBUTOS..............................................................................40
8.TABELAS........................................................................................................... .....428.1 - MARCAES BSICAS...........................................................................428.2 - DESENVOLVENDO UMA TABELA SIMPLES..........................................438.3 - ATRIBUTOS DE CONTROLE DE TABELAS............................................458.4 - CORES E IMAGEM NA TABELA..............................................................568.4.1 - CORES NA TABELA..............................................................................568.5 - IMAGEM DE FUNDO NAS TABELAS.......................................................57
-
8/14/2019 Curso de Web Designer
3/122
9. CORES................................................................................................................ 559.1 - MATIZ, SATURAO E TONALIDADE................................................. 559.2 - SISTEMA DE REPRESENTAO DAS CORES...................................559.3 - PSICOLOGIA DAS CORES....................................................................56
10. TIPOLOGIA.......................................................................................................59
10.1 - ESTILO ANTIGO.....................................................................................5910.2 - ESTILO MODERNO................................................................................6010.3 - SERIFA GROSSA...................................................................................6110.4 - SEM SERIFA...........................................................................................6210.5 MANUSCRITO........................................................................................6210.6 DECORATIVO........................................................................................ 63
PHOTOSHOP11. FERRAMENTAS DO PHOTOSHOP.............................................................. ..64
11.1 INICIANDO O PHOTOSHOP...............................................................64EXERCCIOS PARA REVISO......................................................................66
12. VISUALIZANDO AS IMAGENS..................................................................... ..67EXERCCIOS PARA REVISO......................................................................68
13. SELECIONANDO E MOVENDO IMAGENS................................................... .69
13.1 MARCA DE SELEO........................................................................69
13.2 LAO...................................................................................................7013.3 VARINHA MGICA..............................................................................7113.4 CORTE DEMARCADO...................................................................... ..73EXERCCIOS PARA REVISO......................................................................73
14. MODIFICANDO AS SELEES.................................................................... .74
14.1 FILTROS..............................................................................................75EXERCCIOS PARA REVISO......................................................................76
15. TRANSFORMANDO AS SELEES............................................................. .77
15.1 PINCEL................................................................................................7815.2 FERRAMENTA DEGRAD................................................................ .7815.3 CARIMBO............................................................................................8015.4 DESFOQUE, NITIDEZ E BORRAR.....................................................81EXERCCIOS PARA REVISO......................................................................81
16. FERRAMENTAS DE TEXTO........................................................................... 82EXERCCIOS PARA REVISO......................................................................84
17. CRIAES DE ARQUIVOS PARA WEB....................................................... .86EXERCCIOS PARA REVISO......................................................................88
18. VOCABULRIO UTILIZADO NO PHOTOSHOP.......................................... ..89
19. SEJA UM BOM WEB DESIGNER................................................................... 91
-
8/14/2019 Curso de Web Designer
4/122
DREAMWEAVER
20. APRESENTANDO O DREAMWEAVER..........................................................9320.1 BARRA DE TTULOS...........................................................................9420.2 BARRA DE MENUS.............................................................................9420.3 BARRA INSERIR..................................................................................9420.4 BARRA DEFERRAMENTASDOCUMENTOS....................................9420.5 PAINIS............................................................................................... .9520.6 GRUPOS DEPAINIS.........................................................................9520.7 REA DEDESENVOLVIMENTO.........................................................9520.8 VISUALIZAO DODREAMWEAVER................................................9520.9 BARRA DESTATUS............................................................................9620.1.1 MENUSCONTEXTUAIS....................................................................96EXERCCIOS PARA REVISO.......................................................................96
21. CRIANDO UM NOVO SITE.............................................................................. .97
22. INICIANDO UMA PGINA NO DREAMWEAVER...........................................98
22.1 CRIANDO E SALVANDO UMA NOVA PGINA......................................9822.2 CRIANDO O ARQUIVOINDEX.HTM.......................................................9822.3 DEFININDO ASPROPRIEDADES DA PGINA......................................9922.4 INSERINDOTABELAS...........................................................................10022.5 MAPEAMENTO DE IMAGENS...............................................................101EXERCCIOS PARA REVISO..........................................................................102
23. LINKS E NAVEGAO...................................................................................103
23.1 LOCALIZAO E CAMINHOS DOSDOCUMENTOS..............................10323.2 TESTANDO A PGINA.............................................................................105
EXERCCIOS PARA REVISO.............................................................................106
24. FORMULRIOS...............................................................................................107
25. DICAS PARA A CRIAO DE UM SITE........................................................110
25.1 DEFINIR O CONTEDO, O QUE SER DIVULGADO NO SITE..........11025.2 ESTABELECEROBJETIVOS................................................................11025.3 DIVIDA SEUS CONTEDOS EM TPICOS.........................................11125.4 QUAIS AS QUESTES QUE DEVO LEVANTAR COM RELAO ORGANIZAO E NAVEGAO DE UM SITE?.......................................11125.5 Prxima etapa do planejamento.............................................................111
-
8/14/2019 Curso de Web Designer
5/122
____________________________________________________________ Pgina - 1 -
1 . DEFINIOOs arquivos em HTML - HyperText Markup Language - Linguagem de Formatao de
Hipertexto - pode ser gerados em qualquer editor de texto. possvel transformar um arquivo .doc (formatoWord) para HTML.
A linguagem HTML utiliza marcaes especficas e distintas para dizer ao navegador (InternetExplorer, Firefox, Mozilla, e outros) como exibir o documento.
Os comandos HTML so chamados de TAGS, compreende as marcas padres que soutilizadas para fazer indicaes a um browser. Assim como em outras linguagens, os comandos tm umasintaxe prpria e seguem algumas regras:
As TAGs aparecem sempre entre os sinais de menor que (); Geralmente so utilizados em pares , sendo que a TAG de finalizao de um comando
precedida de uma barra (/).
A maioria das etiquetas tem a sua correspondente de fechamento: .............................................
De um modo geral, as tags aparecem em pares, por exemplo:
Cabecalho Onde:
A tag indica o incio na instruo; O texto Cabealho indica o texto que ser formatado; E a tag indica o final da instruo.
O smbolo que termina uma determinada etiqueta igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente.
As etiquetas so necessrias, pois servem para definir a formatao de um bloco de texto, eassim marcamos onde comea e termina o texto com a formatao especifica por ela.
-
8/14/2019 Curso de Web Designer
6/122
____________________________________________________________ Pgina - 2 -
IDEPAC Instituto de Desenvolvimento Profissional AmigosContabilistas, Empresrios, Profissionais Liberais e Informtica
H excesses para a utilizao dos pares de etiquetas. Por exemplo, a que indica um final deum pargrafo:
no necessita de uma correspondente
para terminar a formatao do bloco detexto. A etiqueta que indica quebra de linha
tambm no precisa de etiqueta correspondente, entreoutras. -
8/14/2019 Curso de Web Designer
7/122
____________________________________________________________ Pgina - 3 -
2 . CRIANDO DOCUMENTOS HTMLTodo documento HTML precisa conter certas tags padronizadas, no mnimo ,
, e , pois elas constituem as duas partes bsicas de um documento HTML queso: o HEAD (cabealho) e o BODY (corpo do documento).
Curso de WebDesign
Este o primeiro nvel de cabealho.
Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.
Este o segundo paragrfo
A tag contm, entre outras coisas, o (ttulo), e a tag armazenatodo o contedo do documento, normalmente composto de pargrafos, listas, tabelas, etc.
Para interpretar corretamente o contedo do documento HTML, os browsers esperaminformaes em acordo com as especificaes HTML.
Abra o bloco de notas, e digite o cdigo acima e salve-o como primeiro.html. Em seguida, abraarquivo primeiro.html no navegador (Internet Explorer, ou outro).
-
8/14/2019 Curso de Web Designer
8/122
____________________________________________________________ Pgina - 4 -
1.1 Modelo de arquivo HTML
Explicao:
A primeira TAG que encontramos no documento .Ela o elemento raiz de umdocumento HTML, pois dentro dela est todo o contedo da pgina. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o contedo que dever ser exibido esta entre as tags e.
O texto contido ente as TAG e define o cabealho do documento. Estasinformaes so importantes pois indicam ao navegador a forma que a pgina deve ser apresentadagraficamente.
A tag define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, estinformadoCurso de WebDesign.
A tag informa ao navegador o que dever ser exibido graficamente. O corpo dapgina BODY constituido pelo contedo que est entre as tags e .
-
8/14/2019 Curso de Web Designer
9/122
____________________________________________________________ Pgina - 5 -
2.1 ELEMENTOS BSICOS
2.1.1 TTULOS
Todo documento em HTML deve possuir um ttulo. O ttulo exibido em local separado dapgina, e utilizado para identificar o documento em outros contextos, de modo que o ttulo deve indicar claramente o contedo do documento.
As tag utilizadas para ttulos so: e .
Este o ttuloE este o cabealho de nvel 2Aqui entra o texto do documento ...
Fgura2.1 Modelo de ttulo
2.1.2 CABEALHO
Os cabealhos normalmente so usados para ttulos e sub-ttulos de uma texto da pgina. Alinguagem HTML possui seis nveis de cabealhos, numerados de 1 a 6; quanto menor o nvel, maior sero destaque.
Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona umalinha em branca antes e depois do cabealhos. O primeiro cabealho de uma pgina deve ser marcadacomo .
-
8/14/2019 Curso de Web Designer
10/122
____________________________________________________________ Pgina - 6 -
COMANDO:
Texto do Cabealho
Onde o y um nmero que poder ser especificado entre 1 a 6, definindo o nvel docabealho.
COMANDO: Cabealho nvel 1 Cabealho nvel 2 Cabealho nvel 3 Cabealho nvel 4 Cabealho nvel 5
Cabealho nvel 5
Fgura 2.1 Modelo de Cabealhos
-
8/14/2019 Curso de Web Designer
11/122
____________________________________________________________ Pgina - 7 -
2.1.3 PARGRAFO
A tag
utilizada para definir o nicio de um pargrafo, criando uma linha em branco entrecada pargrafo. O tag
tambm responsvel pelo alinhamento dos pargrafos.
O alinhamento pode ser: LEFT : Pargrafo alinhado a esquerda. CENTER:Pargrafo alinhado ao centro. RIGHT:Pargrado alinhado a direita. JUSTIFY :Pargrafo justificado.
Alinhamento de pargrafos
Este pargrafo utiliza o alinhamento padro dos navegadores de Internet(esquerdo).
Este pargrafo utiliza o alinhamento centralizado
Este pargrado utiliza o alinhamento direita.
Fgura 2.2 Modelo de alinhamento de pargrafos
-
8/14/2019 Curso de Web Designer
12/122
____________________________________________________________ Pgina - 8 -
2.1.4 QUEBRA DE LINHA
A tag
usada para terminar uma linha sem iniciar um novo pargrafo. Esta tag
, ouline break, provoca uma mudana de linha sem acrescentar espao extra entre as linhas.Veja a diferena entre o uso da tag
e da tag
:MODELO IUtilizando a tag p Vamos separar esta linha com a marcao de paragrfo.
Para verificar a diferena.
MODELO II
Utilizando a tag brDiferena quando separamos duas linhas utilizando
a marcao de quebra de linha
Diferena quando separamos duas linhas utilizando
a marcao de quebra de linha
Verificou a diferena?Fgura 2.3 Modelos de quebra de linha
-
8/14/2019 Curso de Web Designer
13/122
____________________________________________________________ Pgina - 9 -
2.1.5 COMENTRIOS
Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e queno devem ser apresentados graficamente na pgina.
Os comentrios so utilizados para explicar o cdigo fonte para que mais tarde seja possvelcompreender o que foi feito.
COMANDO:
2.1.6 LISTA DE ELEMENTOS BSICOS
ELEMENTOS DESCRIO
Elemento que contm todas as instrues para pgina HTML
Elemento que define o ttulo da pgina.
Elemento que contm o corpo body da pgina.
... Elemento que define cabealhos, desde de o nvel 1 (maior destaque) at o nvel 6 (menor destaque).
Elemento de definio de pargrafos.
Elemento que provoca quebra de linha no contudo da pgina. -
8/14/2019 Curso de Web Designer
14/122
____________________________________________________________ Pgina - 10 -
2.1.7 DICAS
Quando criamos pginas em HTML devemos ter sempre ateno ao fatodelas poderem ser apresentadas de forma diferente em cada navegadores(browsers) ou em conmputadores diferentes. O ASPECTO GRFICO PODEDIFERIR ENTRE COMPUTADORES OU ENTRE NAVEGADORES !Isso ocorreno s pela diferena ente os sistemas, mas tambm pelo fato de que os usuriospossuem monitores diferentes e podem redimensionar a janela do navegador parao tamanho que prefirirem.
As diferenas nos tamanhos das janelas dos navegadores fazem com queo nmero de linhas varie muito. Por esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locais em que acontecem as mudanas de linhas.
Sempre que quiser inserir linhas em branco use
.J observou alguma vez uma pgina da internet, e se perguntou: Quaisas instrues que foram utilizadas?. Se estiver utilizando o Internet Explorer equiser descobrir as instrues, v at o menu Exibir e escolha a opo CdigoFonte , ou clique com o boto direito do mouse e selecione a opo Exibir CdigoFonte.
No desanime se o aspecto do cdigo fonte lhe aparecer assustador. Seesse for o caso, pode ter certeza que a pgina que est visualizando foi feita por um programa especfico. Ao longo do curso, ser possvel verificar que o cdigoHTML bem escrito a mo muito fcil de ler, mas muitas pessoas complicam ocdigo para confundir.
-
8/14/2019 Curso de Web Designer
15/122
______________________________________________________________________ ExercciosReviso
REVISO CPITULO 1 e 21) Qual o smbolo que determina o fechamento de uma tag?
2) Quais os elementos bsicos de uma pgina HTML?
3) Qual a diferena entre a tag
e a tag
?4) Quando utilizamos os comentrios?
-
8/14/2019 Curso de Web Designer
16/122
____________________________________________________________ Pgina - 11 -
3 . FORMATAO DE TEXTOS3.1 DEFININDO FONTES
A tag permite que voc insira em sua pgina um texto com fontes, tamanhos, cores etipos diferentes.
COMANDO:
Texto
Onde:
SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria dosnavegadores.
FACE: indica o nome da fonte utilizada. As fontes padres da maioria dos navegadores so:ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA.
COLOR :Define a cor da fonte do texto, em hexadecimal.
Fgura 3.1 Modelo de Formatao de Fontes
-
8/14/2019 Curso de Web Designer
17/122
____________________________________________________________ Pgina - 12 -
Caso a fonte utilizada na pgina no esteja disponvel para o usurio que visit-la, a fonte sersubstituida ento pela fonte padro do navegador utilizado pelo usurio.
Pode-se definir mais de uma fonte FACE, pois caso a primeira no esteja instalada no sistemado usurio, o navegador reconhe a prxima fonte definida.
3.2 ESTILO DE TEXTOS
O HTML define muitos elementos para formatar textos, como por exemplo escrever em negrito,itlico ou sublinhado.
ELEMENTO DESCRIO
Define texto escrito em negrito.
Define texto com letra maior.
Define texto enfatizado. (escrita com caracteres itlicos)
Define texto escrito com caracteres itlicos.
Define texto com letra menor.
Define texto forte (escrita com caracteres em negrito)
Texto subscrito (alinhado um pouco mais para baixo)
Texto sobrescrito (alinhado um pouco mais para cima)
Texto pulsante
COMANDO:ExemploIsto texto em negrito
Isto texto forte
Isto texto maior
Isto texto enfatizado
Isto texto itlico
Isto texto mais pequeno
Este texto contm uma parte alinhada mais abaixo
Este texto contm uma parte alinhada mais acima -
8/14/2019 Curso de Web Designer
18/122
____________________________________________________________ Pgina - 13 -
Fgura 2.4 Modelo de formatao de texto
3.3 FORMATANDO BLOCO DE TEXTOS
3.3.1 TAG DIVA tag permite alinhar horizontalmente qualquer elemento em sua pgina. O alinhamento
pode ser: left, center ou right.Onde a posio pode ser: LEFT:Alinhamento a esquerda; CENTER:Alinhamento centralizado; RIGHT:Alinhamento a direita.
O padro de alinhamento da tag a esquerda.COMANDO:
Elementos a serem alinhados
ALINHAMENTO DE ELEMENTOS COM A TAG DIVUsando a TAG DIV
Usando a tag DIV possvel alinhar o texto sem problemas
Pode utilizar o alinhamento a direita que alinha o seu texto na margem direita da
tela.
Como um texto criado em um editor de texto para ser exibido na pgina. -
8/14/2019 Curso de Web Designer
19/122
______________________________________________________________________ ExercciosReviso
REVISO CAPTULO 31) Qual a tag utilizada para formatar textos?
2) O que significa os atributos FACE e SIZE?
3) Quais tags utilizarei para:
a) Exibir o texto em negrito:____________________________________________________________
b) Exibir o texto em itlico: ____________________________________________________________
2) Qual a funo da tag ?
-
8/14/2019 Curso de Web Designer
20/122
____________________________________________________________ Pgina - 14 -
4 . CONTROLE DE CORES E GRFICOS DE FUNDOUma cor ou imagem de fundo bem escolhidos podem melhorar o aspecto da pgina, mas uma
m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral.A maioria dos browsers permite a utilizao de cores, apenas 256, mas j o suficiente para
criar uma pgina com fundo e textos personalizados.As cores so compostas por cdigo RGB (red, green, blue). Cada cdigo define a intensidade
do vermelho, do verde e do azul.
4.1 CORES E ELEMENTOS GRFICOS DE FUNDO
4.1.1 BACKGROUND (IMAGEM DE FUNDO)
O atributo background deve ser aplicado tag , que especifica uma imagem que serutilizada como fundo de uma pgina, sendo que a imagem ocupar toda a rea de fundo da tela.
COMANDO:
Corpo da pgina
Imagem de fundo - BACKGROUNDImagem de fundo
BackgroundCom esse atributo voc insere imagem de fundos nas pginas.
-
8/14/2019 Curso de Web Designer
21/122
____________________________________________________________ Pgina - 15 -
Fgura 4.1 Modelo do atributo background
4.1.2 BGCOLOR
O atributo BGCOLOR o atributo que determina a cor de fundo da pgina, permitindo que sedefina uma cor de fundo padro para a pgina sem a necessidade de utilizar um arquivo de imagem.
COMANDO:
Corpo da pgina
Cor de fundo - BGCOLORCor de Fundo
BGCOLORCom esse atributo voc controla a cor de fundo das pginas.
-
8/14/2019 Curso de Web Designer
22/122
____________________________________________________________ Pgina - 16 -
Fgura 4.2 Modelo de uso do atributo BGCOLOR
DICAS:
importante ter cuidado ao aplicar elementos de fundo, para no prejudicar a leiturados textos. interessante sempre visitar outras pginas que utilizam este recurso para
recolher boas idias. Para tornar a visualizao das pginas mais rpidas, alguns usurios no utilizam
imagens em suas pginas, em vez disso utilizam o atributo BGCOLOR.
-
8/14/2019 Curso de Web Designer
23/122
____________________________________________________________ Pgina - 17 -
4.2 CORES DE LETRAS E LINKS
4.2.1 ATRIBUTO TEXT
O atributo TEXT utilizado para controlar a cor do texto normal de uma pgina, ou seja, definea cor de todo o texto do documento, execeto os links.
O atributo TEXT inserido na tag , tendo como padro a cor preto (#000000).
COMANDO:
Corpo da Pgina
Cor de texto - TEXTCORES DE LETRAS DE TEXTO NORMAL
Com esse atributo voc controla a cor do texto em uma pgina.
Fgura 4.3 Modelo do uso do atributo TEXT
-
8/14/2019 Curso de Web Designer
24/122
____________________________________________________________ Pgina - 18 -
4.2.2 ATRIBUTO LINK, VLINK E ALINK
Os atributos LINK, VLINKe ALINKfazem o controle das cores do textos que funcionam comolink na pgina.
LINK:Define cores de links no visitados. Cor padro o AZUL. VLINK:Define as cores dos links j consultados. Cor padro vermelho-prpura. ALINK:Define as cores dos links selecionados, ou seja, quando o usurio pressionou o
boto do mouse e ainda no soltou. Cor padro vermelho.
COMANDO:
Corpo da pgina
Cor de Links - LINK VLINK ALINKEXEMPLO DE CORES
O fundo da pgina est com uma cor especial:
Lightyellow - RGB : #FFFFE0
Alink = GreenYellow - RGB:"#ADFF2F"
Link = MediumBlue RGB:"#0000CD"Vlink = Aquamarine- RGB: "#7FFFD4"
-
8/14/2019 Curso de Web Designer
25/122
____________________________________________________________ Pgina - 19 -
Fgura 4.4 Modelo de cores de Links
-
8/14/2019 Curso de Web Designer
26/122
______________________________________________________________________ ExercciosReviso
REVISO CAPTULO 4
1) Porque importante ter cautela ao utilizar cores e imagens de fundo em pginas para WEB?
2) Qual a diferena entre o atributo BACKGROUND e BGCOLOR?
3) O atributo TEXT utilizado em qual TAG?
4) Defina os atributos:
a) LINK: _____________________________________________________________________________
b) VLINK: ____________________________________________________________________________
c) ALINK: ____________________________________________________________________________
-
8/14/2019 Curso de Web Designer
27/122
____________________________________________________________ Pgina - 20 -
5 . LINKS O principal poder do HTML, est na capacidade de ligar partes de textos e imagens a outros
documentos. A interligao entre documentos feito utilizando a tag , e no se restringe apenas aoutras pginas. Os links podem apontar para qualquer recurso disponvel na WEB, podendo ser uma pginaem HTML, uma imagem, um arquivo de som, um filme, etc.
5.1 NCORAS
As ncoras so links que utilizamos quando queremos buscar o contedo na mesma pgina.So muito utilizadas em pginas que tm o contedo extenso, onde definimos sees na pginas, sendoque cada seo ter um nome que servir de referncia para o link.
Para criarmos uma ncora selecionamos um local da pgina para inser-la.
Onde:
-
8/14/2019 Curso de Web Designer
28/122
____________________________________________________________ Pgina - 21 -
Onde:
-
8/14/2019 Curso de Web Designer
29/122
____________________________________________________________ Pgina - 22 -
Vamos imaginar a seguinte situao:Estamos na pgina materias.html, localizada no diretrio materias, dentro do diretrio pagina1,
e ao clicarmos no link Pgina Inicial queremos que nos posicione na index.html que esta fora do diretriopagina1. Como fazemos?
Fgura 5.2 Modelo de nveis de diretrios
Na pgina materias.html devemos escrever o cdigo mencionado abaixo:
LINK PARA OUTRO DIRETRIOPgina Matrias
Modelo de interligao de documentos localizados em nvel diferente.
Pgina InicialObserve a linha:
Pgina Inicial
Sendo que:
-
8/14/2019 Curso de Web Designer
30/122
____________________________________________________________ Pgina - 23 -
O visitante da pgina apenas visualizar a palavra indicada entre as tags , que nocaso citado acima a palavra Pgina Inicial.
5.3 INTERLINGANDO URL's
Para criarmos um link para qualquer endereo localizado na internet, utilizamos uma URL.URL a abreviao de Uniform Resource Locator, que tem a funo de especificar a
localizao de pginas ou arquivos em servidores da WEB.A URL composta de duas partes:
1) O protocolo Internet do documento;2) O endereo do servidor da pgina.
texto ou imagem
Onde:
O protocolo: o tipo de servidor que est sendo acessado;Os mais utilizado so:
HTTP:= Hiper Text Transfer Protocol, um servidor da www. FTP: = File Transfer Protocol, um servio para a troca de arquivos, programas entre
o servidor e o computador remoto. Servidor = Entenda como servidor o computador onde a pgina est localizada. Arquivo = o arquivo que deseja ser visualizado, podendo ser um diretrio e o nome
do arquivo.
5.4 LINKS PARA E-MAILS
possvel colocar links para e-mail em pginas HTML. Ao clicar sobre o link do e-mail, abrir oprograma de envio de e-mail, podendo ser este o OULTLOOK EXPRESS ou outro que estiver configuradono computador.
Texto ou Imagem
Onde: mailto = informa ao navegador que o link para e-mails; endereo = dever ser informado o e-mail que ser direcionada as mensagens.
-
8/14/2019 Curso de Web Designer
31/122
______________________________________________________________________ ExercciosReviso
REVISO CAPTULO 51) Qual a tag utilizada para indicar links?
2) O que so ncoras? E para que servem?
3) Como fazer links com arquivos que esto em outros diretrios, o que utilizamos?
4) Escreva o comando para fazer links para e-mails.
-
8/14/2019 Curso de Web Designer
32/122
____________________________________________________________ Pgina - 24 -
6 . L i s t a sAs listas so utilizadas para organizar os contedos das pginas, servindo como resumos ou
ndices dos sites. As listas podem conter links para outras pginas, para arquivos ou outros sites.Existem 4 tipos de listas, sendo estas:
LISTA NO NUMERADA; LISTA NUMERADA LISTA DE DEFINIES LISTA INTERCALADAS.
6.1 LISTAS NO NUMERADAS
As listas no numeradas inserem marcadores na frente de cada item.Comando:
Item 1
Item 2 Item 3
Onde:: indica o nicio da lista pontuada;TYPE=formato: indica o formato do marcador da lista, pode ser:
disc : formato de ponto (padro utilizado pelos navegadores); square: formato de quadrado; circle: formato de crculo;
: indica os tpicos da lista.: indica o fim da lista.
-
8/14/2019 Curso de Web Designer
33/122
____________________________________________________________ Pgina - 25 -
Listas no numeradas
Listas no numeradas Type = "disc" Item 1 Item 2 Item 3 type="square" Item 1 Item 2 Item 3 type = "circle" Item 1 Item 2 Item 3
Fgura 6.1 Modelo de lista no numerada
-
8/14/2019 Curso de Web Designer
34/122
-
8/14/2019 Curso de Web Designer
35/122
____________________________________________________________ Pgina - 27 -
Fgura 6.2 Modelo de Lista numerada
6.3 LISTAS DE DEFINIES
A lista de definies so diferentes da demais listas, pois cada item da lista possui doiselementos: um item e uma descrio do item.
Comando:
Item 1 Descrio do Item 1
Item 2 Descrio do Item 2
Onde:: indica o nicio da lista descritiva;: indica o item da lista;: indica a descrio do item da lista ;: indica o fim da lista.
-
8/14/2019 Curso de Web Designer
36/122
____________________________________________________________ Pgina - 28 -
NOTA:
Para cada tag existe uma tag No necessrio encerrar as tags e
Listas de Definies
Listas de Definies
Listas no numeradas
As listas no numeradas ou pontuadas inserem marcadores na frente decada item.
Lista numeradasAs listas numeradas inserem nmeros ou letras na frente de cada item.
Lista de DefiniesAs listas de definies so diferentes das demais listas pois possuem
dois elementos: o item e a descrio do item.
-
8/14/2019 Curso de Web Designer
37/122
____________________________________________________________ Pgina - 29 -
Fgura 6.3 Modelo de lista de definies
6.4 LISTAS INTERCALADAS
As listas intercaladas so utilizadas para melhor organizar as estruturas dos itens, podendocriar hierarquias, unindo listas numeradas com listas no numeradas.
Listas Intercaladas
Lista Intercaladas
Estados da Regio SulParanSanta Catarina
Estados da regio Sudeste
So PauloRio de JaneiroMinas Gerais
-
8/14/2019 Curso de Web Designer
38/122
-
8/14/2019 Curso de Web Designer
39/122
-
8/14/2019 Curso de Web Designer
40/122
____________________________________________________________ Pgina - 31 -
7 . ImagensHoje em dia, a grande maioria dos navegadores exibem imagens dispostas em sites, porm as
imagens possuem formatos especficos, pois no qualquer tipo de arquivo de imagem que deve ser inserido em uma pgina para WEB.
Os formatos mais aceitos so os arquivos com a extenso: .GIF ou . JPEG (JPG).O formato GIF (Grafic Interchange Format) suporta no mximo 256 cores e gera imagens com
tamanhos menores. Este formato muito utilizado para desenhos ou grficos, gerando arquivos com aextenso .GIF.
J o formato JPEG (Joint Photografic Engineering Group) suporte 16 milhes de cores e podereduzir o tamanho de uma imagem em at 10 vezes. Este formato muito utilizado para fotos, gerandoarquivos com a extenso .JPEG ou JPG.
Ao utilizar gifs animados, tenha cuidado, pois estes arquivos podem ocupar bastante espaoem disco. O tamanho dos gifs animados depender da quantidade de cores e quadros utilizados para aanimao.
Estes detalhes faro com que sua pgina carregue mais rpido no navegador do usurio,tornado assim a visitao ao site mais agradvel.
-
8/14/2019 Curso de Web Designer
41/122
____________________________________________________________ Pgina - 32 -
7.1 INSERINDO IMAGENS NA PGINA
Comando:
Onde: : tag que indica que h uma imagem na pgina. Src =diretorio/arquivo : atributo que indica o diretrio e a imagem que dever ser exibida.
Fgura 7.1 Modelo de insero de imagens
-
8/14/2019 Curso de Web Designer
42/122
____________________________________________________________ Pgina - 33 -
7.2 DIMENSIONANDO IMAGENS
Todas as imagens possuem um tamanho x e y, sendo x sua largura e y a sua altura. Otamanho das imagens exibidas no navegador pode ser redimensionada.
Para redimensionar a imagem utilizamos dois atributos: o WIDHT e o HEIGHT.Comando:
Onde: Widht=n: indica a largura da imagem em pixels. Height=n : indica a altura da imagem em pixels.
Fgura 7.2 Modelo de redimensionamento de imagens
NOTA:
MUITO CUIDADO, ao redimensionar imagens, pois elas podem perder asua definio, ficando com o aspecto distorcido.
-
8/14/2019 Curso de Web Designer
43/122
____________________________________________________________ Pgina - 34 -
7.3 ALINHANDO IMAGENS
As imagens inseridas em uma pgina podem ser posicionadas na tela da seguinte forma: TOP,
MIDDLE, BOTTOM, LEFT e RIGHT. O atributo utilizado para alinhar a imagem o ALIGN.
Comando:
7.3.1 ALINHAMENTO EM RELAO AO NAVEGADOR
Em relao ao navegador, utilizamos duas posies sendo estas:
LEFT: Alinha a imagem a esqueda. (posio padro dos navegadores) RIGHT : Alinha a imagem a direita.
Alinhando Imagens
Alinhamento de Imagens
Alinhamento a Esquerda
Alinhamento a Direita
-
8/14/2019 Curso de Web Designer
44/122
____________________________________________________________ Pgina - 35 -
Fgura 7.2 Modelo de alinhamento de imagens ao navegador
7.3.2 ALINHAMENTO EM RELAO AO TEXTO
Em relao ao texto podemos utilizar os seguintes alinhamentos: TOP, BOTTOM e MIDDLE.Onde:
TOP: Alinha o texto com o topo da imagem; MIDDLE: Alinha o texto com o centro da imagem; BOTTOM: Alinha o texto com o rodap da imagem.
-
8/14/2019 Curso de Web Designer
45/122
____________________________________________________________ Pgina - 36 -
Fgura 7.3 Modelo de alinhamento de imagem ao texto
7.4 OUTROS ATRIBUTOS
O atriibuto ALT utilizado para exibir uma mensagem quando a imagem est sendo carregada.Tambm tem a funo de especificar ou indicar a imagem, quando o cursor do mouse colocado sobre ela.
Comando:
Onde:
ALT = mensagem : indica a mensagem que ser exibida quando o cursor do mouse for colocado sobre a imagem.
-
8/14/2019 Curso de Web Designer
46/122
____________________________________________________________ Pgina - 37 -
Fgura 7.5 Modelo de utilizao do atributo ALT
Redimensionado Imagens
Redimensionamento de Imagens
-
8/14/2019 Curso de Web Designer
47/122
______________________________________________________________________ ExercciosReviso
REVISO - CAPTULO 71) Quais os formatos de arquivos de imagens mais indicados para WEB?
2) Qual a diferena entre as imagens no formato GIF e JPG?
2) Defina os alinhamentos:
a) TOP: ________________ ________________________________________________________________
______________________________________________________________________________________ _
b) MIDDLE: _____________________________________________________________________________
______________________________________________________________________________________ _
c) BOTTOM : ___________________________________________________________________________
______________________________________________________________________________________ _
d) LEFT: _______________________________________________________________________________
e) RIGHT: ______________________________________________________________________________
5) O atributo ALT utilizado para:
-
8/14/2019 Curso de Web Designer
48/122
____________________________________________________________ Pgina - 38 -
8 . TabelasAs tabelas so muito utilizadas na internet hoje em dia, para estruturar o layout das pginas,
para organizar dados, etc.Em uma tabela podemos inserir textos, imagens, links e outros elementos e ainda podemos
utilizar uma tabela dentro outra tabela.No primeiro contato, possvel achar difcil a compreenso das tags utilizadas para estruturar
as tabelas, mas com o uso tornar mais fcil a utilizao e a interpretao de possveis falhas que um editor de HTML qualquer possa gerar.
8.1 MARCAES BSICAS
Esta tag indica o nicio e o fim da tabela. O atributo border insere uma borda para marcar a
diviso das clulas.
Esta tag indica as linhas da tabela.
Esta tag indica as clulas contidas em cada linha da tabela. nesta tag que inserimos os
dados que sero exibidos na tabela.
Esta tag define os ttulos de uma tabela, podendo ser utilizado em qualquer clula. A diferena
entre a tag e a tag que o contedo inserido entre as tags serexibido em negrito.
Esta tag insere a legenda da tabela. Deve ser inserida entre as tags .
-
8/14/2019 Curso de Web Designer
49/122
____________________________________________________________ Pgina - 39 -
8.2 DESENVOLVENDO UMA TABELA SIMPLES
Com base no contedo do item acima, vamos desenvolver nossa primeira tabela.1. MODELO
Primeira Clula 1 LinhaSegunda Clula 1 Linha
Primeira Clula 2 LinhaSegunda Clula 2 Linha
Onde o comando acima ir ser exibido da seguinte forma:
Fgura 8.1 Primeiro modelo de tabela
-
8/14/2019 Curso de Web Designer
50/122
____________________________________________________________ Pgina - 40 -
2. MODELO
Modelo 2 de Tabelas SimplesItens/Ms
JaneiroFevereiroMaro
Usurios100200300
Linhas123
Fgura 8.2 Segundo exemplo de tabela
-
8/14/2019 Curso de Web Designer
51/122
-
8/14/2019 Curso de Web Designer
52/122
____________________________________________________________ Pgina - 42 -
Fgura 8.3 Modelo de atributo width na tabela
2 MODELO WIDTH na tag
SegundaTera Quarta
QuintaSextaSbado
-
8/14/2019 Curso de Web Designer
53/122
____________________________________________________________ Pgina - 43 -
Fgura 8.4 Modelo de atributo width na tag
BORDERO atributo border utilizado na tag , para definir se a tabela ser exibida com linhas
de contorno. Caso o atributo no esteja informado, a tabela aparecer sem bordas.Observe:
Fgura 8.5 Modelo do uso do atributo BORDER
-
8/14/2019 Curso de Web Designer
54/122
____________________________________________________________ Pgina - 44 -
Modelo de uso utilizando o atributo BORDER
TabelasAtributos BORDER
123
Modelo de uso sem o atributo BORDER
TabelasAtributos BORDER
123
ALIGN O atributo ALIGN controla o alinhamento da tabela em relao a pgina. Pode se utilizado nas
tags , onde este alinhar o texto contidos nas clulas a posio informada no ALIGN.
O atributo ALIGN aceita as seguintes posies: LEFT : alinhamento a esquerda; RIGHT: alinhamento a direita; CENTER: alinhamento centralizado.
-
8/14/2019 Curso de Web Designer
55/122
____________________________________________________________ Pgina - 45 -
Fgura 8.6 Modelo de uso do atributo ALIGN
Modelo de uso do atributo ALIGN na tag
TabelasAtributos ALIGN - tag TABLE
123
-
8/14/2019 Curso de Web Designer
56/122
-
8/14/2019 Curso de Web Designer
57/122
____________________________________________________________ Pgina - 47 -
Fgura 8.7 Modelo de uso do atributo VALIGN
Modelo de uso do atributo VALIGN
Tabelas
Atributos VALIGN
123
Alinhamento TOPAlinhamento MIDDLE
Alinhamento BOTTOM
-
8/14/2019 Curso de Web Designer
58/122
____________________________________________________________ Pgina - 48 -
CELLSPACING
O atributo CELLSPACING define a distncia entre as clulas e linhas, sendo aplicavl a tag. Os valores informados neste atributo so em pixels.
Fgura 8.8 Modelo de uso do atributo CELLSPACING com valores variados
-
8/14/2019 Curso de Web Designer
59/122
____________________________________________________________ Pgina - 49 -
Modelo de uso do atributo CELLSPACING
Tabelas
Atributo CELLSPACING
1
23
CELLPADDINGO atributo CELLPADDING defne a distncia ente o contedo da clula em relao as suas
bordas, sendo aplicavl na tag . Os valores informados neste atributo so em pixels.
Fgura 8.9 Modelo de uso do atributo CELLPADDING com valores variados
-
8/14/2019 Curso de Web Designer
60/122
____________________________________________________________ Pgina - 50 -
Modelo de uso do atributo CELLPADDING
TabelasAtributo CELLPADDING
123
COLSPAN
O atributo COLSPAN aplicado nas tags e , pois define quantas colunas umaclula pode abranger. Por padro, na maioria dos navegadores cada clula corresponde a uma coluna natabela.
Fgura 8.10 Modelo de uso do atributo COLSPAN
-
8/14/2019 Curso de Web Designer
61/122
____________________________________________________________ Pgina - 51 -
TabelasAtributo COLSPAN
12
345
ROWSPAN
O atributo ROWSPAN aplicado nas tags e , pois define quantas colunas umaclula pode abranger. Por padro, na maioria dos navegadores cada clula corresponde a uma coluna natabela.
Fgura 8.11 Modelo de uso do atributo ROWSPAN
-
8/14/2019 Curso de Web Designer
62/122
____________________________________________________________ Pgina - 52 -
Modelo de uso do atributo ROWSPAN
TabelasAtributo ROWSPAN
123
45
8.4 CORES E IMAGEM NA TABELA
8.4.1 CORES NA TABELAO atributo BGCOLOR utilizado para aplicar cor de fundo a clula ou a tabela. Este atributo
pode ser inserido nas tags , e .
Fgura 8.12 Modelo de uso de cores de fundo
-
8/14/2019 Curso de Web Designer
63/122
____________________________________________________________ Pgina - 53 -
Modelo de uso do atributo BGCOLOR
TabelasCORES NA TABELA
123
44
5
8.4.2 IMAGEM DE FUNDO NAS TABELAS
Semelhante a inserir cores de fundo, possvel colocar imagens com fundo da tabela. Essatcnica muito utilizada, e para isso usamos o atributo BACKGROUND. Este atributo pode ser utilizado nastags , , .
Fgura 8.13 Modelo de uso de imagens como fundo de tabela.
-
8/14/2019 Curso de Web Designer
64/122
____________________________________________________________ Pgina - 54 -
TabelasIMAGENS NA TABELA
Modelo de Imagem de Fundo
-
8/14/2019 Curso de Web Designer
65/122
______________________________________________________________________ ExercciosReviso
REVISO CAPTULO 81) Quais as tags bsicas para estruturarmos uma tabela?
2) Escreva o cdigo de uma tabela simples.
3) O atributo BORDER utilizado para: _____________________________________________________
4) O atributo ALIGN utilizado para: _______________________________________________________
5) Para que serve o atributo COLSPAN e ROWSPAN?
-
8/14/2019 Curso de Web Designer
66/122
____________________________________________________________ Pgina - 55 -
9 . CORESA cor um poderoso aspecto da nossa experincia do mundo, quando bem aplicada, pode
melhorar e muito a mensagem que queremos transmitir. Quando falamos de cores precisamos entender oque representam para ns e para a outras pessoas.
O efeito das cores nos meios de comunicao tem sido estudado h vrios anos. Cada meiode comunicao (jornal, revista, televiso, web, etc) representa as cores de maneiras diferentes.
As cores se diferenciam em trs fatores: matiz, saturao (intensidade) e tonalidade(luminosidade).
9.1 MATIZ, SATURAO E TONALIDADE
MATIZ a cor pura dominante, como por exemplo: azul, amarelo, vermelho.SATURAO OU INTENSIDADE o quanto a cor pura dominante (ou matiz) diluda pela
luz branca e intensidade o quantidade de luz refletida (claro/escuro)TONALIDADE a qualidade acromtica e representa o brilho relativo, do claro ao escuro, de
uma cor, em relao a uma escala de cinzas que varia do branco ao preto.CONTRASTE:O contraste a base da distino da forma, tamanho, posio, volume e
aparncia dos objetos. Considerando a cor, o contraste pode ser obtido entre a diferena no matiz e atonalidade ou iluminao. O contraste entre as cores pode ser usado para alterar a sensao.
9.2 SISTEMA DE REPRESENTAO DAS CORES
O sistema RGB o padro de cores na web. um sistema cartesiano (x, y, z) onde cada cor primria (Red, Green e Blue) representa um dos eixos do cubo RGB. o modelo usado em TV e monitores
O modelo CMYK formado pelas cores ciano (Cyan), magenta (Magenta), amarelo (Yellow) e preto (blacK). utilizado em dispositivos de impresso.
Algumas cores podem ser exibidas nos monitores de vdeo, mas no podem ser impressas, ealgumas cores pode ser impressas, mas no exibidas em monitores. Alm disso, existem cores queenxergamos que no podem ser presentadas pelo monitores e impressoras.
-
8/14/2019 Curso de Web Designer
67/122
____________________________________________________________ Pgina - 56 -
9.3 PSICOLOGIA DAS CORES
As cores tm propriedades diferentes de acordo com a cultura onde so consideradas. Nocaso da WEB, preciso ter cuidados especiais para transmitir a mesma mensagem visual a pessoas dediferentes culturas.
Cada cor possui uma caracterstica e uma influncia sobre todos ns. As nossas emoesestimuladas pelas cores podem ter uma relao negativa ou positiva dependendo da experincia queassociamos a elas. As cores podem tanto acalmar quando estimular.
Alm disso, os diversos fatores culturais fixam atitudes psicolgicas que orientaminconscientemente as inclinaes individuais.
Veja alguns exemplos:
BRANCO:Indica limpeza, pureza. CINZA:Indica tristeza e neutralidade. ROSA: Indica graa e ternura. PRETO: Indica sujeira e coisas negativas. VERMELHO:Indica calor e energia. AZUL:Indica honradez, f e pureza.
Esses significados ficam enraizados na cultura de um povo e passam a integrar, nassensaes visuais para definir estados emocionais ou situaes vividas pelo indivduo.
Em relao criao publicitria, os psiclogos procuram dar um sentido mais prtico quantoao uso das cores.
De acordo com estudos, existe uma estreita relao entre a idade e a preferncia que umapessoa manifesta por determinada cor. Este estudo muito utilizado para elaborar projetos comunicaovisual baseados no pblico alvo.
Os adultos idosos preferem cores mais escuras, como o azul e o verde, enquanto as crianaspreferem cores vibrantes como o vermelho e o amarelo.
Veja a tabela abaixo:
CORES IDADES SENSAO
VERMELHO 1 a 10 anos Efervecncia e espontaneidade
LARANJA 10 a 20 anos Imaginao, excitao e aventura
AMARELO 20 a 30 anos Fora, potncia, arrogncia
VERDE 30 a 40 anos Diminuio do fogo juvenil
AZUL 40 a 50 anos Pensamento Inteligncia
LILS 50 a 60 anos Juzo, misticismo e lei
ROXO 60 anos Saber, Benevolncia e experincia
-
8/14/2019 Curso de Web Designer
68/122
____________________________________________________________ Pgina - 57 -
O ser humano reage a cores para gostar ou no gostar de determinada coisa, para reagir ouno reagir, para negar ou afirmar.
Todos os psiclogos esto em comum acordo ao atribuirem significados a cores que so
bsicas a qualquer indivduo que viva dentro de nossa sociedade e cultura.
Vejamos alguns significados, segundo um estudo realizado pelo Prof. Modesto Farina:
BRANCO: Sugere pureza, simplicidade, otimismo, Com a ausncia de caracteres, cria aimpresso de vzio e infinito. Evoca ao refrescante e desinfetante, principalmente quando usado juntocom o azul claro.
PRETO: Smbolo do infortnio e da morte, exibe caracterstica impenetrvel. a cor maisdesprovida de sentimento, porm se for brilhante, confere nobreza, distino e elegncia.
CINZA:Exprime um estado de alma duvidoso e neutro e evoca medo, desnimo e monotonia, medida em que for mais escuro. O tom mais escuro a cor do sujo e desprezvel, como no tom grafite.Brilhante como a prata, clssico e nobre.
VERMELHO:Significa fora, alegria de viver, virilidade, dinamismo. s vezes pode ser irritanteou exaltante. Impe-se como dignidade e severidade, benevolncia e charme. Cor quente por definio,sem as caractersticas do Amarelo que espalha e invade todas as cores ao seu redor. uma cor conclusiva,porque se basta. Quanto mais escuro, mais profundo, grave e circunspecto, como o Vermelho Cardinalcio.Se mais claro, exprime temperamento jovial e fantasioso.
VERDE: a cor mais fria, calma e tranquila, no exprimindo qualquer sentimento de alegria,
tristeza ou paixo. Imvel, satisfeita, tambm a cor da esperana. Se tiver um pitadinha de Amarelo,torna-se ensolarada, ativa, indiferente. J se ouver a predominncia do Azul, torna-se carregada, severa,repleta de pensamentos.
AZUL:Cor que exprime calma profunda, interior, infinita e diferente do verde. solene, grave eespiritual, as anlises racionais so ignoradas. Nos tons mais claros e brilhantes, provoca sensao defrescor e higiene, sendo a preferida pelas mulheres. O tom turquesa exprime grande fora, fogo interior efrio, como os lagos iluminados pelo sol de vero. As tonalidades mais escuras agradam mais aos homens.
AMARELO:Luminosa, vibrante, vistosa e gostosa, principalmente em tons claros e limpos. cor superficial, no transmitindo profundidade. cor muito ativa, que estimula a criatividade, mas se sujar
com o marrom ou verde, apresenta aspecto doentio, repugnante. Aquecida com ligeiros tons de Vermelho,evoca um misto de alegria e satisfao.
LARANJA: a cor mais acolhedora, quente, ntima como fogo ardente, mais irradiante eexpansiva que o vermelho. Ao mesmo tempo, transmite refrescncia se associada com o fruto.
VIOLETA:Misteriosa e triste, melanclica e mediativa, demonstra um pensamento profundo ereligioso. Em tons mais claros e luminosos, como o lils, torna-se mgica e mstica.
ROSA: Tmido, romntico, intimista. O Rosa a cor feminina por excelncia, com poucavitalidade exprimindo afeio e afetuosidade. Sugere intimidade.
MARROM: a cor mais realista, segundo estudiosos, a cor que representa justia. No
-
8/14/2019 Curso de Web Designer
69/122
____________________________________________________________ Pgina - 58 -
sendo brutal ou vulgar, evoca a vida s e cotidiana. Neutra por excelncia, a medida que vai escurecendoadquire caractersticas do Preto.
PASTEL: A caracterstica de abrandamento e afabilidade das cores quais se origina. Os tonsPastel so a representao das coisas que se encontram dentro da solido e do foro ntimo.
As cores devem ser planejadas para interface considerando o contexto em que seroutilizadas, muitas vezes tendo que respeitar a cor do logotipo da empresa.
DICAS
Evitar fundos escuros. Fundo preto no recomendado (principalmente em portaisde comunicao), pois h poucas cores que contrastam e causa cansao visual. Nocaso de impresso em Preto e Branco, a cor a ser usada para o texto ou imagempode ser convertida para o escuro.
Reduzir o nmero de cores. Muitos designers se esquecem que a maioria dosmonitores apenas conseguem representar, milhares de cores, outros 256 ou 16cores, alm dos monitores em Preto e Branco que equipam sistemas comerciais.Para sistemas comerciais, usar apenas 16 cores, pois ao serem convertidas para omonocromtico, h padres de cinza suficientes.
Usar sempre textos com letras pretas. A letra preta, sobre um fundo claro, temmelhor legibilidade. Podemos dispor de opes para troca da cor de plano de fundo,porm esse recurso pode no ser bem aceito pela maioria.
No tornar a tela muito brilhante ou escura, use cores brilhantes em reas pequenase cores suaves em reas maiores.
Tenham em mente que as cores mal utilizadas so piores do que no fazer usodelas.
-
8/14/2019 Curso de Web Designer
70/122
____________________________________________________________ Pgina - 59 -
1 0 .TIPOLOGIAA TIPOLOGIA significa o estudo dos tipos, ou seja, o conjunto de caracteres tipogrficos que
so conhecidos como fontes. Elas admitem algumas variaes tais como itlico, negrito, sublinhado, etc.Hoje em dia, existem diversos tipos disponveis de fontes. A maior parte dos tipos de fontes,
podem ser classificados em 6 categorias, que so estas:
ESTILO ANTIGO
Moderno
Serifa Grossa
Sem Se rifa
Manuscrito
DECORATIVO
Iremos conhecer as similaridades entre os tipos, tornando-o mais conciente quando aosdetalhes e aplicaes das letras.
10.1 ESTILO ANTIGO
Os tipos criados no estilo antigo baseiam-se na escrita mo dos escribas que trabalhavamcom uma pena na mo. Os estilo antigos sempre tm serifa e as serifas das letras em caixa-baixa(minsculas) sempre tm um ngulo. Por isso todos os traos curvos das letras passam de grossos para
-
8/14/2019 Curso de Web Designer
71/122
____________________________________________________________ Pgina - 60 -
finos, o que chamamos tecnicamente de transio grosso-fino. Um tipo Estilo Antigo tem uma nfase
diagonal.
Algumas fontes: Times New Roman
Garamond
Goudy
Palatino
Os estilo antigo o melhor grupo de tipos para utilizar em grandes extenses de texto corrido.Caso esteja trabalhando com um texto muito longo e deseja que as pessoas o leiam, coloque-o no estiloantigo.
10.2 ESTILO MODERNO
Os tipos modernos tm serifas, mas estas so horizontais e no inclinadas e so muito maisfinas. Semelhante a uma ponte de ao, a estrutura forte com uma transio grosso-fino radical, oucontraste, nos traos. No h evidncias da inclinao, a nfase perfeitamente vertical. Os tiposmodernos tm uma esttica fria e elegante.
Os tipos modernos tm uma aparncia forte, principalmente quando so muito grandes. Por suas fortes transies grosso-fino, a maioria dos tipos modernos no so uma boa opo de grandesextenses de texto corrido.
-
8/14/2019 Curso de Web Designer
72/122
____________________________________________________________ Pgina - 61 -
Algumas fontes: Bodoni
Times Bold
Fenice
Ultra
Walbaum
10.3 SERIFA GROSSA
As letras com serifa grossa tm pouca transio ou nenhuma transio grosso-fino. s vezes,essa categoria de tipos chamada de Clarendon, porque a fonte Clarendon a sntese desse estilo. Muitosdos tipos com serifa grossa, com contraste grosso-fino suavem tm um grau muito elevado de legibilidade,o que siginifica que podem ser facilmente utilizados em textos extensos. Porm esse tipos criam umapgina mais escura do que aqueles em estilo antigo, pois seus traos so mais grossos e o peso de cadaletra relativamente igual. Tipos com serifa grossa costumam ser utilizados em livros infantis, poi suaesttica clara e direta.
Algumas fontes: Clarendon New Century Scoolbook
-
8/14/2019 Curso de Web Designer
73/122
____________________________________________________________ Pgina - 62 -
10.4 SEM SERIFA
Os tipos sem serifa so quase sempre de peso igual, o que significa qie virtualmente no htransio grosso-fino vsivel nos traos; as letras tm sempre a mesma espessura.
Algumas fontes: Arial
Century Gothic
Folio
Tahoma
10.5 MANUSCRITO
A categoria de tipos manuscritos inclui todos os tipos que parecem ter sido escritos a mo, comuma caneta tinteiro, com um pncel ou, s vezes, com um lpis ou caneta profissional. Os tipos manuscritosdevem sem utilizados pouco a pouco, ou seja, os tipos mais elaborados nunca deveriam ser colocados naforma de blocos de textos e nunca com todas as letras em caixa-alta (maiculas).
Algumas fontes: Linoscript
Zapf Chancery
Carpe Diem
10.6 DECORATIVO
-
8/14/2019 Curso de Web Designer
74/122
____________________________________________________________ Pgina - 63 -
Os tipos decorativos so fceis de identificar. Eles so timos, engraados, diferentes, fceis
de usar, costumam ser baratos e sempre existe uma fonte para cada capricho que voc queira expressar. lgico que por serem diferenciados, seu uso dever ser limitado.
Algumas fontes:
Addled Extravaganza
Fajita
Scarlett
Party
-
8/14/2019 Curso de Web Designer
75/122
______________________________________________________________ Pgina - 64 -
1 1 . FERRAMENTAS DO PHOTOSHOPVamos iniciar o uso do PHOTOSHOP para tratamento e edio de imagens para a
Web. Fotos e imagens so fundamentais para o desenvolvimento de um layout, mas uma imagemou foto tem que estar num certo padro para ser inserida dentro de uma pgina da Internet. Comeste programa de edio, vamos fazer com que os arquivos tenham uma tima resoluo e umtamanho de arquivo pequeno, gerando um rpido acesso a esta imagem.
11.1. INICIANDO O PHOTOSHOP
Para iniciarmos uma edio de imagens no PHOTOSHOP, vamos conhecer primeiroas ferramentas que ele oferece no menu, conhecer seus nomes e funes para depois aplicarmosem exemplos cada uma das ferramentas:
Figura 1.0 Barra de ferramentas do PHOTOSHOP
-
8/14/2019 Curso de Web Designer
76/122
______________________________________________________________ Pgina - 65 -
Estas ferramentas respondem seleo e movimento de reas selecionadas. Aopressionarmos o ponteiro do mouse sobre a ferramenta que apresenta um tringulo nocanto inferior direito, sero exibidas outras ferramentas que se relacionam com funes ese encontram agrupadas na ferramenta inicial.
Adobe Online Acesse o site da Adobe e verifique as novidades de download e informaessobre os programas da linha Adobe e informaes do PHOTOSHOP.
Marca de Seleo Com a ferramenta de marca, selecionamos um traado geomtrico paraseleo e corte. Nesta ferramenta temos opes ocultas, ao clicarmos sobre o boto e segurarmos
por alguns instantes, aparecer algumas opes dos formatos de seleo.
Mover Para estar movendo uma imagem dentro da rea de trabalho.
Lao Faz traados livres para seleo e corte de imagens, esta ferramenta possui ainda o LaoPoligonal e o Lao Magntico.
Varinha Mgica Esta ferramenta trabalha muito com as cores e pixels. Ela seleciona reas comcores iguais ou pixels mais prximos. Ideal para grandes reas que devem ser excludas.
Corte Demarcado Tambm conhecido como CROP, ela seleciona a rea e o que for externo aesta seleo ser excludo. Usando a tecla CRTL pressionada ter o controle da dimenso.
Fatia Conhecido tambm como slice, ele dividi a imagem em partes e cria um arquivo HTML,assim a imagem carregada em partes e com mais velocidade.
Nesta rea, encontram-se as ferramentas relativas pintura aerogrfica e compincel; borracha e lpis (trao); carimbo e manchar; (aproximar reas); clarear reas;degrad e desfoque.
Pincel Uso livre para pintura e efeitos em imagem.
Carimbo Ferramenta utilizada para clonar partes de uma imagem.
Pincel do Histrico Retira as partes que foram pintadas com o pincel.
Borracha Como o prprio nome diz, ela apaga trechos que no devem aparecer na imagem.
-
8/14/2019 Curso de Web Designer
77/122
-
8/14/2019 Curso de Web Designer
78/122
______________________________________________________________ Pgina - 67 -
1 2 . VISUALIZANDO AS IMAGENS Ao abrir uma imagem ou um arquivo para criao, oPHOTOSHOPabre uma janela
onde ser sua rea de trabalho. Abra um arquivo de imagem e vamos ajustar para umavisualizao onde possamos trabalhar a edio da mesma com mais facilidade. Com a ferramentaMO, clique duas vezes em cima da imagem para ajustar a imagem na janela; aqui a ferramentaLUPA (zoom) utilizada para aproximar a imagem num setor onde seja necessrio estar editandocom mais preciso. Podemos ter vrios arquivos do PHOTOSHOPabertos ao mesmo tempo, cadaum sendo mostrado em uma janela, mas somente uma delas pode ser a janela ativa. Existemvrios modos de exibio das imagens no monitor, a primeira o modo padro, onde cada janelaaparece no tamanho normal. Os outros dois modos trabalham com a tela cheia. Para alternar entreestes modos, d um clique em um dos botes na parte inferior da barra de ferramentas oupressione a tecla F para alterar entre estes modos.
Figura 2.0 Janela da rea de trabalho do PHOTOSHOP
Observe que no ttulo da janela, temos o nome do arquivo que est sendo editado e aporcentagem de zoom que est sendo usada; entre parnteses temos o sistema de cor utilizada,
-
8/14/2019 Curso de Web Designer
79/122
______________________________________________________________ Pgina - 68 -
RGB red green blue. Temos a janela menor que oferece a opo navegador, para situaes
quando a imagem est com alto zoom, podemos navegar pela imagem menor com o quadrovermelho livremente pela imagem, acessando mais rpido e fcil o setor desejado, caso estaopo no esteja aberta, use a opo MOSTRAR NAVEGADORna opo JANELA dentro doMENU.
Figura 2.1 Visualizador de imagens no Menu de ferramentas do PHOTOSHOP
Mas apesar de observar a imagem em tela cheia voc se sentir incomodado com as janelas auxiliares do PHOTOSHOP, bastar pressionar a tecla TAB e ficar visvel na tela somente
a imagem que est sendo editada, ao pressionar TABnovamente para elas voltarem a aparecer.
NOTA:A ferramenta MOpode ser uma boa opo, alm de poder arrastar a imagem dentro darea de trabalho e do navegador, ela pode ser utilizada como zoom, pressionando as teclas CRTLe ALT, voc ter mais ou menos zoom conforme a sua necessidade.
EXERCCIOS PARA REVISO
1. Quais as informaes que aparecem no ttulo das janelas com imagens?2. Quais as vantagens de utilizar a opo NAVEGADOR?
-
8/14/2019 Curso de Web Designer
80/122
______________________________________________________________ Pgina - 69 -
1 3 . SELECIONANDO E MOVENDO IMAGENSAs selees so reas da imagem que voc marcou para fazer alguma alterao, e
so limitadas e especificadas por uma linha pontilhada em torno da regio desejada. Podemoscriar selees utilizando a ferramenta Marca de Seleo, Lao, Varinha Mgica, Corte Demarcadoe Lao, como veremos mais adiante.
13.1. MARCA DE SELEO
Com as ferramentas de MARCA, selecionamos uma das opes e qual formatoutilizaremos para selecionar a parte da imagem que desejamos trabalhar. Podemos variar conforme a necessidade, com a ferramenta MARCA, ela oferece opes geomtricas comoretangular e elptica. Selecionada a opo, mantenha pressionado o boto esquerdo do mousearrastando sobre a rea da figura que queremos selecionar. Podemos editar esta linha pontilhadaque fica sobre a rea selecionada, mantendo os botes SHIFTou ALT, aumentando ou diminuindoa rea de seleo.
Figura 3.1 reas de seleo feitas com a ferramenta MARCA
Ao posicionar o ponteiro dentro da rea de seleo, podemos arrastar a seleo semmodificar a imagem; se pressionar a tecla CRTLo ponteiro ser modificado para o formato de umatesoura, indicando que esta rea ser recortada da imagem. Selecionando a ferramenta MOVER,
-
8/14/2019 Curso de Web Designer
81/122
______________________________________________________________ Pgina - 70 -
ela ter a mesma funo, recortando a imagem selecionada e arrastando para outra rea da
imagem.
Podemos ainda selecionar esta rea de recorte e arrastar para dentro de outra imagemou ainda para uma nona janela; ao recortar esta imagem, voc pode copiar esta rea selecionadaou ainda retir-la da imagem, aplicando um CTRL+Cpara copiar ou CTRL+Xpara recortar estarea, e dentro de uma nova janela ou dentro de outro arquivo, faa um CRTL+Vpara inserir a rearecortada.
13.2. LAO
Vimos que a ferramenta MARCAfaz selees com formatos geomtricos, ideais paraselecionar grandes reas dentro de uma imagem, mas s vezes necessrio termo contornosmais preciso, ou reas mais precisas para seleo. A ferramenta LAOpossibilita traados livresdentro de uma imagem, oferecendo trs opes de laos: LAO, LAO POLIGONALe LAOMAGNTICO. Com o LAO fazemos selees totalmente livres, arrastando o ponteiro pela reasolicitada; o LAO POLIGONALutilizamos linhas retas para a seleo e o LAO MAGNTICOutilizada para selecionar reas com extremidades complexas com fundos de muita luz, ela atuacomo um im selecionando a rea com maior intensidade de luz do ponto que foi solicitado a
escolha da seleo.
Selecionando a rea, voc precisar fechar esta seleo, para concluir a seleo deuma extremidade a outra, ao final aparecer ao lado do ponteiro um pequeno crculo indicando oponto inicial da seleo, ento se pode excluir esta rea selecionada pressionando a teclaDELETE, caso no tenha sido esta rea a desejada, pressione CTRL+Zpara retornar a rea eclique com o ponteiro dentro da rea selecionada para desfazer esta seleo.
-
8/14/2019 Curso de Web Designer
82/122
______________________________________________________________ Pgina - 71 -
Figura 3.2 Figura selecionada com a Ferramenta LAO
13.3. VARINHA MGICA
Esta ferramenta trabalha com as cores da imagem, selecionando reas com o mesmo
tom de cor prximas ao ponto que for pressionado o ponteiro; muito utilizada para selecionar grandes reas com o mesmo tom de cor, selecionando assim todo o epao que for necessrioestar editando. Para uma maior preciso da rea que deseja selecionar, o item TOLERNCIA pode ser modificada aumentando ou diminuindo o valor entre 0 e 255, isto aproxima ou afasta ascores mais parecidas com a que foi selecionada. As opes SUAVIZAO DE SERRILHADOeADJACENTEoferece opes para trabalhar com toda a imagem ou apenas com as cores da reaselecionada.
NOTA: Muitas vezes selecionamos mais de uma rea com estas ferramentas de seleo e
recortamos as mesmas ou ainda exclumos a rea. Mas pode ter ocorrido um equvoco ou aindaum erro de seleo; se pressionar as teclas CTRL+Zser cancelado o ltimo comando utilizado,mas se o comando anterior ao ltimo, pressione CTRL+ALT+Zpara retornar comandosanteriores a este. uma forma de no perdemos a edio correta da imagem e assim partir doponto que no houve o erro. Ainda h outra opo que a JANELA HISTRICO, para ativ-laselecione no MENU-JANELAna seqncia MOSTRAR HISTRICO. Nesta janela podemosobservar as aes que foram feitas, podendo voltar ao ponto que nos interessa.
-
8/14/2019 Curso de Web Designer
83/122
______________________________________________________________ Pgina - 72 -
Figura 3.3 rea selecionada com a ferramenta VARINHA MGICA
Figura 3.3.1 rea selecionada e a opo da JANELA HISTRICO
-
8/14/2019 Curso de Web Designer
84/122
______________________________________________________________ Pgina - 73 -
13.4. CORTE DEMARCADO
Esta ferramenta exclui toda rea externa a que for selecionada, para grandes imagens ideal para utilizar apenas a rea que interessante. Arraste o mouse sobre a rea selecionada,observe que teremos a opo de dimensionar a rea, mantenha o boto SHIFTpressionado paraque assim possamos manter a proporo constante da imagem.
Figura 3.4 rea demarcada para edio com a ferramenta CORTE DEMARCADO
EXERCCIOS PARA REVISO
1. Aps crias uma rea de seleo, como podemos alterar o formato desta rea?2. Qual a diferena entre as opes da ferramenta LAO?3. Como atua a ferramenta VARINHA MGICA para a seleo de uma imagem?
-
8/14/2019 Curso de Web Designer
85/122
______________________________________________________________ Pgina - 74 -
1 4 . MODIFICANDO AS SELEES Aprendemos at aqui como modificar e selecionar o que nos interessa dentro de uma
imagem, podendo aumentar, diminuir, selecionar apenas uma rea, cortar em partes para assimutilizar a imagem da maneira que gostaramos. Mas temos muito mais para fazer com estasimagens para que elas sejam alteradas e assim possamos fazer outros efeitos com cores,distores, bordas, filtros, textos e muito mais.
Uma seleo pode ser preenchida por uma cor, uma imagem vinda de outro arquivo ouuma textura. Para criar um novo arquivo com o fundo colorido, vamos ao menuARQUIVO-NOVOetemos as seguintes opes: Nome do arquivo; Preset Size (padroniza o tamanho da rea detrabalho que possa ser utilizada); Largura e Altura da rea de trabalho, selecionando a medidautilizada como pixels, cm entre outras; Resoluo da imagem que ser criada, normalmente umaimagem para internet utiliza a resoluo de 72dpi e para imagens impressas a medida de 300dpi;Modo de cor utilizado como RGB, BITMAP, CMYK para cada tipo de utilizao da imagem sejapara Internet, jornais, revistas, etc; e CONTENTS Aqui selecionamos as opes de rea branca,rea colorida ou rea transparente.
Figura 4.0 Tela de incio para criao de um novo arquivo
-
8/14/2019 Curso de Web Designer
86/122
______________________________________________________________ Pgina - 75 -
No menu de ferramentas, ainda temos a opo de selecionar o primeiro e segundo
plano da imagem, podendo ser alterada diretamente nos quadros e ainda retornando a opoinicial com preto e branco clicando no quadrinho menor em preto e branco.
Figura 4.0.1 Menu de ferramentas opo de cores de plano
14.1. FILTROS
Para fazer alguns efeitos na sua imagem, deixar elas com estilos de pinturas, vidros,3D, cores fortes, clssicas entre outras, o PHOTOSHOPoferece FILTROS para a edio de suaimagem. No menu a opo FILTROS oferece diversas opes, selecione vrias delas para fazer testes, modifique a quantidade e direo de luz utilizada, o tamanho do efeito, o relevo entre outrasconfiguraes que estar disponvel quando o efeito for selecionado. Temos tambm a opoTRAAR (stroke) que cria um contorno em volta da sua imagem, acessando atravs do menuEDITAR-TRAAR (stroke), podendo sofrer alterao no tamanho da linha de contorno, alocalizao desta linha na imagem a cor e alguns modos que o PHOTOSHOPoferece.
NOTA: No abuse tanto dos efeitos dos FILTROS, ele pode deixar sua imagem muito festiva eno passar a mensagem necessria daquela imagem. Tente trabalhar os efeitos com qualidade,com objetividade e assim manter o aspecto original da imagem. Ao inserir um filtro, lembre-se quesua imagem ter um aumento tambm no tamanho do arquivo quando for salv-lo, tente trabalhar com as ferramentas para conseguir o efeito desejado, isto pode manter a qualidade da imagem eno carregar o seu arquivo final.
-
8/14/2019 Curso de Web Designer
87/122
______________________________________________________________ Pgina - 76 -
EXERCCIOS PARA REVISO
1. Para que utilizamos os FILTROS nas imagens?2. Devemos sempre estar utilizando FILTROS nas imagens? De um exemplo de tipo de
filtro e que tipo de imagem deve ser utilizada.
-
8/14/2019 Curso de Web Designer
88/122
______________________________________________________________ Pgina - 77 -
1 5 . TRANSFORMANDO AS SELEESNosso trabalho ainda pode sofrer mais modificaes conforme o necessrio, escalar,
rotacionar, inclinar, distorcer, inverter e alterar as perspectiva, so opes que podemos fazer comos objetos selecionados. Muitas destas opes se encontram no menu SELECIONAR, mas paraativar as opes devemos selecionar antes a rea que ser feita transformao, como umainverso, um objeto com o fundo branco pode ser selecionado com a inverso, basta clicar com avarinha no fundo do objeto, depois no menuSELECIONARa opo INVERTER, seu objeto estarselecionado e pronto para ser modificado, podendo ainda alterar a sua ROTAOclicando naopo TRANSFORMAO LIVREno menu editar ou simplesmente um comando CTRL+T, assimaltera o tamanho e a inclinao da imagem, lembrando que para aumentar ou diminuir o tamanhoda imagem, utiliza a tecla SHIFTpressionada para no perder a proporo da imagem.
Figura 5.0 Seleo da imagem com Inverso e Transformao Livre
NOTA:Sempre que fizer algum tipo de alterao na imagem, o PHOTOSHOPoferece uma opode concluir o efeito, no concluir o efeito ou cancelar o efeito, caso voc ainda no tenha certezaque efeito ou alterao esta fazendo, clique em cancelar, se a sua opo alterar o tamanho oualgum estilo do efeito, clique em no concluir o efeito.
-
8/14/2019 Curso de Web Designer
89/122
______________________________________________________________ Pgina - 78 -
15.1. PINCEL
O PINCEL oferece diversas formas para pintar livremente uma imagem, completar uma imagem j pronta ou ainda fazer efeitos com pincel estilizado. Temos como exemplos oPINCEL BORRIFO 39que funciona como um spray dentro da imagem, o PINCEL 45 que espalhaa tinta como se fosse uma aquarela na imagem, alguns pincis com formas de bolhas, estrelas,riscos que vo espalhando dentro da imagem. Observe na figura os detalhes em amarelo, todoscriados com efeitos do pincel.
Figura 5.1 Imagem com efeitos da ferramenta PINCEL
15.2. FERRAMENTA DEGRAD
Normalmente utilizamos DEGRAD para o fundo das imagens. Temos algumasopes de como deve estar o DEGRAD, de onde ele deve partir dentro da imagem, que cor devevariar entre outras opes, como LINEAR, RADIAL, ANGULAR, REFLETIDOe etc.
-
8/14/2019 Curso de Web Designer
90/122
______________________________________________________________ Pgina - 79 -
Para inserir este efeito nas imagens, selecione a imagem e arraste a ferramenta DEGRADEapartir do ponto que queira que comece e termine o efeito. Voc pode ainda alterar as cores doDEGRADEe mudar as posies de cada uma, suavizao entre outras opes clicando na reaque aparece o degrade na barra de menu da ferramenta DEGRADE.
DEGRADE LINEAR cria uma matiz do ponto de partida ao ponto final em uma linha reta.DEGRADE RADIAL cria uma matiz do ponto de partida ao ponto final num padro circular.DEGRADE ANGULAR cria uma matiz ao redor do ponto de partida.DEGRADE REFLETIDO cria uma matiz usando gradientes lineares simtricos em qualquer ladodo ponto de partida.
DEGRADE DIAMANTE cria uma matiz do ponto de partida externo em um padro de diamante.O ponto final define um canto do diamante.
Figura 5.2 Barra de menu da ferramenta DEGRADE
Observe no exemplo abaixo, que foi utilizado apenas a funo DEGRAD, para inserir o efeito abaixo, selecionamos a rea das montanhas em preto com a VARINHA MGICA, emseguida fizemos a inverso da seleo e aplicamos o DEGRADE,com o efeito RADIALcomdiversas tonalidades de cores. Note que o efeito ocorreu apenas na rea fora das montanhasconforme a seleo.
Figura 5.2.1 Imagem original e imagem com aplicao do efeito DEGRADE
-
8/14/2019 Curso de Web Designer
91/122
______________________________________________________________ Pgina - 80 -
15.3 CARIMBO
A ferramenta CARIMBO utilizada para copiar trechos de uma imagem e coloc-losem outra rea da imagem, ele cria um clone dos pixels da imagem, como se fosse um carimbo deseleo. Utilizamos o carimbo para correo de imagens, como marcas ou manchas nas imagens,ampliao da imagem, coberturas de trechos que no devem aparecer entre outras funes. Parautiliz-lo voc deve clicar na rea que deseja clonar com a tecla ALT pressionado e preencher area desejada. O CARIMBOoferece opes de formatos do pincel, alm de tamanho de rea queo ponteiro dever estar copiando dentro das opes do pincel, voc seleciona o dimetro doponteiro.
Figura 5.3 Menu da ferramenta CARIMBO
Figura 5.3.1 Transformao da imagem com a ferramenta CARIMBO
-
8/14/2019 Curso de Web Designer
92/122
______________________________________________________________ Pgina - 81 -
15.4 DESFOQUE, NITIDEZ E BORRAR
A ferramentaDESFOQUEfaz com que a rea da figura selecionada, perca sua nitidez,deixando com um aspecto embaado. A ferramenta NITIDEZfaz o contrrio da ferramentaDESFOQUE. Ela reconhece as cores dos pixels em volta da rea selecionada, e adicionaautomaticamente contrastes e cores nas matizes dos pixels, de modo que eles fiquem mais clarose exuberantes. Ela quase consegue reverter o trabalho da ferramenta DESFOQUE. Porm, demaneira muito leve, e quando saturada ela destri os pixels da rea selecionada, transformando afigura. Deve ser utilizada com cautela. Com a ferramenta BORRARfazemos um efeito de borrocriado com o dedo sobre uma pintura ainda fresca. Ela cria bordas mais suaves quando mistura e
harmoniza os pixels por onde passa.
NOTA: Muitas fotos podem estar com uma excelente qualidade, e mesmo assim podem receber ainda um bom banho de tratamento. No menu IMAGEM AJUSTES, temos funes para melhorar aqualidade da foto em diferentes aspectos. Podemos ajustar os Nveis da imagem automticos quena maioria dos casos j faz uma grande diferena, ou ainda trabalhar com os nveis personalizadosque oferecem trabalhos com os tons de cores, a luminosidade da imagem, brilhos e contrates,balano de cores entre outros. Com a opo SATURARretiramos as cores da imagem mantendo oaspecto preto e branco e assim podemos designar qualquer cor para esta imagem, esta funo
muito utilizada para mudar cor de olhos e cabelos, bastando apenas selecionar a rea que desejafazer esta mudana de cor e na opo BALAO DE CORESpodemos colocar a cor quequisermos e assim alterar a imagem.
Outra opo para trabalhos com fotos que s vezes se torna necessrio para amontagem de uma pgina de Internet e de inverter a imagem, muito conhecido como flipar aimagem. No menu IMAGEMtemos a opo rotao da imagem, ela inverte a viso da imagemcomo se espelha-se a mesma.
EXERCCIOS PARA REVISO
1. Como diminuir o tamanho fsico de uma imagem, sem perder a sua resoluo? Ondepodemos encontrar as opes no menu de tamanho da imagem?
2. Quais opes de DEGRADE podemos encontrar?3. Para que serve a ferramenta CARIMBO?
-
8/14/2019 Curso de Web Designer
93/122
______________________________________________________________ Pgina - 82 -
1 6 . FERRAMENTAS DE TEXTO Passamos agora a trabalhar com textos, que podem ser inseridos dentro das imagens
que editamos, ou ainda se tornar uma imagem tambm, pois os textos tambm pode ser editadoscom efeitos e aparecendo muitas vezes mais que uma imagem. Ttulos de pginas, nomes,destaque para letras e muitas outras opes que iremos aprender neste captulo.
Figura 6.0 Barra de menu das propriedades da ferramenta TEXTO
Uma camada de texto no pode ser criada para imagens em modos multicanal,bitmap, ou cores indexadas, porque estes modos no suportam camadas. Nestes modos deimagem o texto aparece no Plano de Fundo e no pode ser editado. Por isso quando voc
quiser trabalhar com texto trabalhe sempre com arquivos .psd.
Selecione a ferramenta TEXTOe clique no ponto onde deseja inserir o texto, observeque na barra de propriedades da ferramenta textos, tm as opes como escolher a fonte, otamanho, o espaamento entre linhas, a cor do texto, etc. O texto pode ser digitado em um novoarquivo para criao de uma nova imagem ou pode ser dentro de uma imagem j existente paradefinir a imagem.
-
8/14/2019 Curso de Web Designer
94/122
______________________________________________________________ Pgina - 83 -
Figura 6.0.1 Inserindo TEXTO dentro de uma imagem
Nesta imagem criamos apenas um texto definindo o que est na imagem, mas estaferramenta oferece muitas outras opes para destacar mais o texto ou ainda criar novas opescom eles. Observe nas imagens abaixo alguns exemplos de textos criados com esta ferramenta.
Figura 6.0.2 Estilos de fontes criadas com os efeitos do PHOTOSHOP
-
8/14/2019 Curso de Web Designer
95/122
______________________________________________________________ Pgina - 84 -
EXERCCIOS PARA REVISO
1. Faa este exerccio para a criao de um estilo no TEXTO:
1. Crie um novo documento com o fundo branco e escreva a palavra que quiser, eu estouusando a FONT chamada TAG XTREME;
2. Clique com o boto direito na camada do texto e depois em Rasterize Layer;3. Segura CTRL e clique na camada do texto para selecion-la;
4. Selecione a ferramenta GRADIENTE TOOL e crie um novo degrad parecido com o doexemplo abaixo (voc pode mudar as cores se preferir);
5. Na parte de cima e abaixo do texto, faa um trao com a ferramenta GRADIENTE e solte oboto;
6. Ainda com o texto selecionado, crie uma nova camada e selecione EDIT / STROKE;
7. Selecione agora o comando FILTER / BLUR / GAUSSIAN BLUR e coloque o RADIUScomo 0,8;
-
8/14/2019 Curso de Web Designer
96/122
______________________________________________________________ Pgina - 85 -
8. Junte o traado com a camada de texto (CTRL+E);9. Novamente selecione EDIT / STROKE e agora faa o traado com a cor preta;10. Pronto! Seu texto esta terminado, e assim deve ser o resultado:
Este exerccio conhecido como TUTORIAL, um passo a passo de efeitos para criao de
imagens e textos para os programas de edio. Existem muitos sites que disponibilizam essestutorais para ajudar os Designers e assim oferecer uma troca de informao entre os usurios decada programa.
Procure sempre estar praticando estes TUTORIAIS, eles so grandes exerccios para praticarmose conhecer os recursos que o programa PHOTOSHOP disponibiliza. Procure pr sites comohttp://www.webtutoriais.com.br oferecem vrios efeitos e dicas para os usurios trocarem entre si.
-
8/14/2019 Curso de Web Designer
97/122
______________________________________________________________ Pgina - 86 -
1 7 . CRIAES DE ARQUIVOS PARA WEBQuando utilizamos a Internet procura de informaes, queremos que estas cheguem
o mais breve possvel em nosso computador. Mas, com o aprimoramento da parte visual daspginas, s vezes ficamos um bom tempo esperando uma figura ser carregada pelo navegador,mesmo com conexes de banda larga, e pior para conexes discadas, por isso importante queao editar uma imagem para publicao na WEB lembre-se que quanto maior o tamanho do arquivoda imagem, maior ser o tempo de recebimento (dowload) desta pgina.
Na verso mais recente do PHOTOSHOP, foi includa a opoSALVAR PARA WEB do menu ARQUIVO, esta opo facilita ao salvar uma imagem e assim trabalhar com suaqualidade e tamanho de arquivo que ser salvo. O PHOTOSHOPoferece vrias extenses parasalvar seu arquivo, dependendo de como esta imagem ser publicada; opes como JPG, GIF,GIF ANIMADO, PNG, entre outras; resoluo normalmente utilizada para imagens na WEB se 72DPI, o tamanho fsico da imagem vai depender do espao que voc estar utilizando a mesma,lembrando que tente editar a imagem no tamanho que ser utilizado, pois na opo SALVARIMAGEMtambm podemos alterar este tamanho fsico, mas perdemos em resoluo de pixels.
Normalmente utilizamos para internet imagens com extenso GIF ou JPG que trazemuma boa resoluo e um tamanho de arquivo pequeno para carregar nas pginas. GIF ANIMADO uma animao feita em camadas, ou seja, aquele tipo desenho que fazemos no papel passandopginas e