WEB DESIGN ELEMENTOS GRÁFICOS

Transcrição

1 ELEMENTOS GRÁFICOS Parte 6 José Manuel Russo 2005

2 35 Introdução Uma das formas como criar os elementos gráficos para a Web, é utilizar o Corel Draw para produzir os diversos objectos em formato Vectorial e seguidamente exportá-los para o formato Bitmap. Este método permite explorar a versatilidade, em termos da fácil edição das formas, que o Corel Draw permite. Configurar o Sistema Quando se desenvolve um trabalho para a Web é conveniente configurar primeiramente o sistema gráfico do computador para se obter uma perspectiva igual à pretendida. Esta operação, apesar de não ser obrigatória, facilita o testar dos objectos criados, já que poderão ser visualizados no browser na resolução aconselhada. Para alterar a Resolução do Écran: Clique com o botão direito do rato no Ambiente de Trabalho (Desktop); Seleccione a opção Propriedades (Properties); Clique no separador Definições (Settings); Altere a Resolução do Écran (Screen Resolution) para a definida nos objectivos do Site por exemplo, para 800x600. Configurar o Corel Draw Igualmente, quando se utiliza o Corel Draw para produzir objectos para a Web, também é necessário configurá-lo para os obter com as dimensões desses objectos tão próximas quanto possível das desejadas. Assim, para configurar o Ambiente e a Página de Trabalho: Seleccione o menu Tools Options; Seleccione as opções Document Page Size; Altere em Resolution o valor da Resolução para 72 dpi; Altere em Units a unidade para Pixels; Altere as suas dimensões: Width para 800 e Height para 600 (por exemplo).

3 36 Active a Barra de Ferramentas para Internet: Seleccione o menu Tools Options; Seleccione as opções Workspace Costumization Command Bars; Active a barra Internet. Active a Web-Safe Colors Palette: Seleccione o menu Window Color Palettes; Active a Web-Safe Colors; Definir a Paleta de Cores De acordo com os estudos propostos na Parte 3 relativamente às cores a utilizar no Site, pode-se criar amostras de cor para facilitar a sua utilização posterior, sem necessitar de andar à sua procura na desordem da Paleta de cores: Crie uma nova página; Desenhe um quadrado com cerca de 80 pixels de lado; Copie e duplique-o 5 vezes (utilize o CTRL para que fiquem alinhados na horizontal); Aplique a cada um deles, e pela ordem definida anteriormente, uma cor retirada da Web-safe Colors Palette. Para criar uma paleta personalizada: Active o Docker em menu Tools Color Styles; Arraste para a área do docker cada um dos quadrados desenhados e coloridos; Pode guardar esta Paleta em: Window Color Palettes Create Palette from Document. A partir de agora, com o sistema devidamente configurado, poderá começar a criar as componentes da página html: Guarde o trabalho (File Save) com um nome apropriado, como: wd_modelo.cdr.

4 37 Desenhar um Banner Comece por elaborar um Banner: Abra o ficheiro (File Open) wd_modelo.cdr; Crie uma nova página (página 3); nota: a primeira página será destinada a compor uma página virtual Desenhe um um rectângulo com cerca de 775x80 pixels; Aplique uma cor de fundo e retire o contorno; Desenhe um motivo, podendo modelar as formas com a Shape Tool; Disponha o(s) motivo(s) sobre o rectângulo; Escreva o nome do seu Site e formate-o; Seleccione o conjunto de formas e exporte (CTRL+E) em formato TIFF: active a opção Selected only; em File Name escreva o nome do ficheiro: banner.tif; na janela Bitmap Export, activar Anti-aliasing, Size 1x1, Resolution 72 dpi; clique em OK. Seguidamente é necessário editar o Banner num programa bitmap: Execute o Corel PhotoPaint; Abra o ficheiro (File Open) banner.tif; Aplique a ferramenta Crop para recortar os excessos da imagem; Guarde a imagem em formato JPEG: File Save As e seleccione em Files of Type o formato JPEG (Joint Photographic Experts Group); Clique em OK. Escola da Alfarrobeira

5 38 Desenhar uma Barra de Navegação Vamos agora criar uma Barra de Navegação gráfica, onde não será necessário criar botões: Execute o Corel PhotoPaint; Abra uma fotografia digital ou uma imagem digitalizada; Reduza a sua dimensão: Image Resample... para um valor desejado; Aplique a ferramenta Crop com cerca de 140x360 pixels para recortar uma parte da imagem; Converta a imagem em Grayscale: Image Color Mode Grayscale (8 bits); Converter de novo a imagem em cor: Image Color Mode RGB Color (24 bits); Manipule a cor em: Image Adjust Color Balance e altere os cursores dos 3 canais até obter a coloração pretendida; Guarde a imagem (File Save As) no formato TIF e atribua o nome nav_bar.tif. Vamos acrescentar alguns elementos à imagem base, recorrendo ao Corel Draw: Importe (CTRL+I) a imagem anteriormente criada; Aplique sobre a imagem elementos como: o logotipo, contactos, , etc.; Desenhe os items de navegação: desenhar um rectângulo com 105x22 pixels, p.e.; alinhar à direita com a imagem (utilizar as linhas-guia para o alinhamento); escrever um item (p.e. Gestão) com alinhamento à direita; trabalhar os elementos para obter um melhor efeito, como: combinar o texto com o rectângulo (Arrange Combine), aplicar um Drop Shadow, etc. Exporte o conjunto de formas em formato TIFF e, seguidamente, corrija-o no Corel Photopaint e guarde-o em formato JPEG.

6 39 Desenhar Botões de Navegação Para além da Barra de Navegação (que dará acesso às páginas principais), serão necessários outros botões de acesso às páginas secundárias: Abra o ficheiro (File Open) wd_modelo.cdr; Crie uma nova página (página 4); Desenhe um rectângulo com cerca de 100x22 pixels; aplique uma cor de fundo e retire o contorno; Escreva o nome a que o botão dará acesso (home, p.e.) com alinhamento centrado e formate-o; Alinhe os dois elementos: Arrange Align and Distribute e seleccione horizontal center e vertical center; Para obter um efeito volumétrico: desenhe uma linha à esquerda e acima do rectângulo e aplique um contorno de tonalidade clara, e à direita e abaixo com tonalidade escura, espessura 0,353, ou aplique o efeito Extrude ao rectângulo: tipo Back Parallel, coordenadas -2 pixels, aplique luzes; Seleccione cada botão criado e exporte em formato GIF, sem o anti-aliasing activado. Também se pode trabalhar o texto no Photopaint para, apenas a este, se aplicar o antialiasing. Desenhar Rollovers A partir da versão 10, o Corel Draw incluiu nas suas ferramentas opções adequadas à criação de objectos para Internet, como os Rollovers (objectos dinâmicos que, quando são apontados e clicados com o cursor do rato, mudam de forma). Deverá ter a Internet Toolbar activa (pág. 36): Tools Options Customization Comand Bars Internet. Para, por exemplo, desenhar um botão Rollover: Seleccione os elementos do segundo botão criado anteriormente e faça uma cópia; Com os elementos seleccionados, clique no botão Create (1º) e Edit Rollover (2º); Seleccione a opção Over e aplique ao texto o estilo Bold (Negro) ou aumente 1 ou 2 pontos ao tamanho da letra ou altere a cor; Seleccione a opção Down e aplique uma tonalidade escura à linha superior e esquerda e clara à linha inferior e direita; alterar a cor do rectângulo, se pretender; Clique em Finish editing Rollover (4º) Para ver o efeito clique em Live preview...

7 40 O Rollover deverá ser exportado em formato Flash (SWF), e ser utilizado em aplicações apropriadas (como o Front Page 2003). Desenhar Marcas Finalmente, vamos construir uma Marca, para assinalar items de texto: Abra o ficheiro (File Open) wd_modelo.cdr; Crie uma nova página (página 5); Crie um rectângulo com a cor de fundo utilizada na página; Desenhe um objecto com 10 a 15 pixels de lado; Exporte o conjunto em formato GIF, com o antialiasing activado. Em GIF Export, activar a opção Transparency Image Color, clique no conta-gotas e capture na zona esquerda (Original) a cor de fundo. Edite o ficheiro no Corel Photopaint: Abra o ficheiro exportado; Elimine o contorno, formado pelo anti-aliasing, do rectângulo com a ferramenta Crop,Paint ou Clone; nota: a utilização do fundo sob a forma serve para o anti-aliasing interagir com essa cor e não com o branco Guarde as alterações do ficheiro: File Save.

8 41 Previsualizar a Página Poderá ter uma antevisão da página no ambiente do browser no Corel Draw: Abra o ficheiro (File Open) wd_modelo.cdr; Seleccione a página 1; Abra o Browser que utiliza habitualmente (como o Internet Explorer) e faça uma captura de écran (utilize a tecla PrtScn); nota: poderá limpar o seu interior no Corel PhotoPaint e guardar em ficheiro Cole a imagem capurada (CTRL+V) e redimensione-a às dimensões da página; Copie os elementos entretanto criados (poderão ser os objectos vectoriais ou os bitmap editados) para a página 1; Disponha-os na área de visualização do browser segundo a estrutura de página previamente estudada. Escola da Alfarrobeira Seja bem-vindo à Escola da Alfarrobeira. A Escola da Alfarrobeira integra-se no ensino Técnico-Profissional e destina-se ao ensino das Técnicas agrícolas da Alfarrobeira e das Técnicas gastronómicas da Alfarroba. Consulte no nosso site a organização curricular dos Cursos disponíveis e informe-se das nossas actividades. Poderá ainda efectuar a sua pré-inscrição on-line. Ou contacte connosco em contactos: Escola da Alfarrobeira Est. Nacional 125 FARO Tel.: Fax: esc-alfarrobeira@ip.pt Escola da Alfarrobeira Estrada Nacional nº 125 FARO Tel.: Fax: esc-alfarrobeira@ip.pt