FACULDADE DO LITORAL SUL PAULISTA FALS CHRISTIANE MILANI DAS CHAGAS FERRAMENTAS DE DESENVOLVIMENTO WEB PHOTOSHOP E DREAMWEAVER

Tamanho: px
Começar a partir da página:

Download "FACULDADE DO LITORAL SUL PAULISTA FALS CHRISTIANE MILANI DAS CHAGAS FERRAMENTAS DE DESENVOLVIMENTO WEB PHOTOSHOP E DREAMWEAVER"

Transcrição

1 FACULDADE DO LITORAL SUL PAULISTA FALS CHRISTIANE MILANI DAS CHAGAS FERRAMENTAS DE DESENVOLVIMENTO WEB PHOTOSHOP E DREAMWEAVER PRAIA GRANDE 2010

2 1 CHRISTIANE MILANI DAS CHAGAS FERRAMENTAS DE DESENVOLVIMENTO WEB PHOTOSHOP E DREAMWEAVER Trabalho de conclusão de curso, Faculdade do Litoral Sul Paulista - FALS, sob orientação do Prof. Paulo Candido. PRAIA GRANDE 2010

3 2 CHRISTIANE MILANI DAS CHAGAS FERRAMENTAS DE DESENVOLVIMENTO WEB PHOTOSHOP E DREAMWEAVER Trabalho de conclusão de curso, Faculdade do Litoral Sul Paulista - FALS, sob orientação do Prof. Paulo Candido. AVALIAÇÃO: NOTA: ( ), de de. Local data

4 3 RESUMO Photoshop é um software de edição de imagens, é um dos produtos mais famosos da Adobe. O software é muito utilizado pelas suas ferramentas surpreendentes. HÁ centenas de pincéis incríveis disponíveis na internet que você pode baixá-los facilmente. Não só de edição de fotos, você também pode criar imagens e desenhos utilizando este software. Existem Muitas versões disponíveis e você pode comprá-los facilmente. Este é o melhor software de edição de fotos. Dreamweaver é um software de edição de sites. Permite que o desenvolvedor trabalhe com texto, imagens e outros elementos de página da web. Dreamweaver é mais do que apenas uma ferramenta para layout de páginas web e desenvolvimento de aplicativos - também é uma solução completa para a construção de web sites e manutenção. O Dreamweaver fornece um rico conjunto de recursos em um único programa capaz de lidar com os mais sofisticados e exigentes web design e projetos de desenvolvimento - a partir de uma simples página web com um site de comércio eletrônico de grande porte. Além de tornar mais fácil para criar e editar páginas web múltiplos, Dreamweaver inclui recursos poderosos para ajudar os desenvolvedores web gerenciar todos os arquivos relacionados a um site, postar os sites para um servidor web remoto, e manter os arquivos locais e arquivos no servidor remoto sincronizado.você não precisa usar um programa para criação de páginas web e, em seguida, uma série de utilitários separados para gerenciar arquivos e transferir arquivos para o servidor web, o Dreamweaver faz tudo. PALAVRAS CHAVES: Editor de imagem, Editor HTML e Ferramentas de edição.

5 4 ABSTRACT Photoshop is an image editing software. It is one of the most famous products from Adobe. The software is widely used for its amazing features. you can totally transform your images. There are also resource you can use to add your own pictures on the picture. There are hundreds of amazing brushes available on the Internet you can download them easily. Not only photo editing, you can also create images and designs using this software. There are many versions available and you can buy them easily.this is the best photo editing software.dreamweaver is an editing software sites. Allows the developer to work with text, images and other elements of web page. Dreamweaver is more than just a tool for page layout and web application development - is also a complete solution for building and maintaining web sites. Dreamweaver provides a rich set of features into a single program that can handle the most demanding and sophisticated web design and development projects - from a simple web page with an e-commerce site large.besides making it easy to create and edit multiple web pages, Dreamweaver includes powerful features to help web developers to manage all files related to a site, post the sites to a remote web server, and keep the local files and files on remote server sincronizado.você not need to use a program for creating web pages and then a series of separate utilities for managing files and transferring files to the web server, Dreamweaver does it all. KEYWORDS TOOL: Image Edit, HTML Edit, Edit Tool.

6 5 SUMÁRIO 1. INTRODUÇÃO PHOTOSHOP INTERFACE Barra de Menu Barra de menus File Barra de menus Edit Barra de menus Image Barra de menus Layers Barra de menus Select Barra de menus Filter Barra de menus View Barra de menus Window Barra de menus Help Caixa de ferramentas Ferramentas de seleção Rectangular Marquee Tool Move Tool Polygon Lasso Tool Magic Wand Tool Crop Tool Slice Tool Aprimoramento das ferramentas Healing Brush Tool Brush Tool Clone Stamp Tool Ferramenta Pincel História Eraser Tool Gradiente Tool Blur Tool Dodge Tool Ferramentas Vetor Path Seletion Tool Pen Tool Retangle Tool... 39

7 Notas Tool Eyedropper Tool (I) Ferramentas de navegação Ferramenta Mão Zoom Tool Cor Ferramentas Área de imagem Paletas VERSÕES Versão lançado em fevereiro de Versão lançado em dezembro de Versão 2.5 lançado em fevereiro de Versão 3.0 lançado em Setembro de Versão 4.0 lançado em Novembro de Versão 5.0 lançado em Maio de Versão 5.5 lançado em Julho de Versão 6.0 lançado em Outubro de Versão 7.0 lançado em Abril de Versão CS 8.0 lançado em Outubro de Versão CS2 9.0 lançado em Abril de Versão CS lançado em Dezembro de Versão CS lançado em Outubro de Versão CS lançado em Abril de MODOS DE COR RGB CMYK Lab Color Bitmap FORMATOS DE ARQUIVOS BMP GIF JPG PNG PDF TIFF EPS... 57

8 PCX PICT PIXAR TGA DCS VANTAGEM E DESVANTAGEM DE SE USAR O PHOTOSHOP Vantagem Desvantagem TECLAS DE ATALHO DO PHOTOSHOP DREAMWEAVER INTERFACE Interface Inicial Área de trabalho Barra de Ferramentas de Documento Menu Arquivo Grupo de Painéis Painel Design Painel Código Painel Aplicação Painel Tag Inspector Painel Arquivos Barra de Status Barra de Ferramentas Coding Barra de Ferramentas Estilo processamento Barra Insert Guia Common Guia Layout Guia Forms Guia Text Guia Favorites PROPRIEDADES Propriedades de Texto Propriedades de Tabela Propriedades de Página Propriedades de Imagem Propriedades do Flash INTEGRAÇÃO

9 8 3.4 VERSÕES Processo de evolução recente Dreamweaver MX Dreamweaver Dreamweaver CS Dreamweaver CS Dreamweaver CS VANTAGENS DE SE USAR O DREAMWEAVER Auto-completar Gerenciamento de sites Find/Replace robusto EXTENSÕES DO DREAMWEAVER UTILIZAÇÃO DAS FERRAMENTAS PARA WEB EM UM SISTEMA CADASTRO DE CLIENTES Cadastro de Venda Busca de clientes Lista de ordem de serviço Notas fiscais Débitos em aberto Relatorio de vendas do dia CONCLUSÃO REFERÊNCIAS BIBLIGRAFICAS ANEXOS CÓDIGO DAS TELAS DO SISTEMA

10 9 LISTA DE ILUSTRAÇÃO Figura 1 - Área de trabalho do Photoshop Figura 2 - Barra de Menu Figura 3 - Menu File Figura 4 - continuação do Menu File Figura 5 - Menu Edit Figura 7 - Menu Image, parte Adjust Figura 8 - Janela de configuração de Brilho e Saturação Figura 9 - Menu Layer Figura 10 - Menu Select Figura 11 - Menu Filter Figura 12 - Menu View Figura 13 - Menu Window Figura 14 - Menu Help Figura 15 - Ferramentas de Seleção Figura 16 - Ferramenta Retangular Marquee Tool Figura 17 - Ferramenta Move Tool Figura 18 - Ferramenta Polygon Lasso Tool Figura 19 - Ferramenta Magic Wand Tool Figura 20 - Ferramenta Crop Tool Figura 21 - Ferramenta Slice Tool Figura 22 - Ferramentas de Aprimoramento Figura 23 - Healing Brush Tool Figura 24 - Brush Tool Figura 25 - Clone Stamp Tool Figura 26 - Ferramenta Pincel História Figura 27 - Eraser Tool Figura 28 - Gradiente Tool Figura 29 - Blur Tool Figura 30 - Dodge Tool Figura 31 - Ferramentas Vetor Figura 32 - Ferramenta Seletion Tool Figura 33 - Horizontal Type Tool Figura 34 - Ferramenta Pen Tool Figura 35 - Ferramenta Retangle Tool Figura 36 - Ferramenta de Notas Figura 37 - Ferramenta Eyedropper Tool Figura 38 - Ferramentas de Navegação Figura 39 - Ferramenta Mão Figura 40 - Ferramenta Zoom Tool Figura 41 - Ferramenta de Cor Figura 42 - Área de criação de Imagem Figura 43 - Opção New do Menu File Figura 44 - Janela de configuração de um arquivo novo Figura 45 - Paletas Figura 46 - Aspectos das Paletas Figura 47 - Tela de Abertura da versão Figura 48 - Tela de Abertura da versão Figura 49 - Tela de Abertura da versão

11 Figura 50 - Tela de Abertura da versão Figura 51 - Tela de Abertura da versão Figura 52 - Tela de Abertura da versão Figura 53 - Tela de Abertura da versão Figura 54 - Tela de Abertura da versão Figura 55 - Tela de Abertura da versão Figura 56 - Tela de Abertura da versão CS Figura 57 - Tela de Abertura da versão CS Figura 58 - Tela de Abertura da versão CS Figura 59 - Tela de Abertura da versão CS Figura 60 - Tela de Abertura da versão CS Figura 61 - Janela Inicial do Dreamweaver Figura 62 - Área de trabalho do Dreamweaver Figura 63 - Barra da área de elaboração do código Figura 64 - Botão Code, mostra apenas o código interno da página Figura 65 - Botão Split, mostra os dois modos de visualização, Códigos e Designer Figura 66 - Botão Design, mostra apenas o modo Designer Figura 67 - Menu Arquivo Figura 68 - Grupo de Painéis Figura 69 - Painel Disign Figura 70 - Painel Código Figura 71 - Painel Aplicação Figura 72 - Painel Tag Figura 73 - Painel Arquivo Figura 74 - Barra de Status Figura 75 - Barra de Ferramentas Coding Figura 76 - Barra de Ferramentas Estilo processamento Figura 77 - Barra Insert Figura 78 - Janela de configuração de Hiperlink Figura 79 - Janela de configuração de Link Figura 80 - Janela de configuração de Ancora Figura 81 - Janela de configuração de Tabela Figura 82 - Opções da Ferramenta Imagem Figura 83 - Janela de configuração de Image Placeholder Figura 84 - Janela de configuração de Rollover Image Figura 85 - Janela de configuração de Fireworks HTML Figura 86 - Janela de configuração de Vavigation Bar Figura 87 - Opções da Ferramenta Média Figura 88 - Janela de configuração de Flash Button Figura 89 - Janela de configuração de Flash Text Figura 90 - Janela de configuração de Parameter Figura 91 - Janela de configuração de Data Figura 92 - Opções da Ferramenta Head Figura 93 - Janela de configuração de Meta Figura 94 - Janela de configuração de Keywords Figura 95 - Janela de configuração de Refresh Figura 96 - Janela de configuração de Base Figura 97 - Janela de configuração de Link Figura 98 - Opções da Ferramenta Scripts Figura 99 - Janela de Salvar novo Template

12 Figura Janela de configuração de Região Figura Janela de configuração de Opções de Região Figura Aba de Ferramentas de Layout Figura Figura de divisão de Frames Figura Aba de Ferramentas Forms Figura Configuração de Propriedades de Forms Figura Caixa de TextField Figura Configuração de Propriedades de textfield Figura Configuração de Propriedades de HiddenField Figura Caixa de TexArea Figura Configuração de Propriedades de TexArea Figura Configuração de Propriedades de CheckBox Figura Configuração de Propriedades de RadioButton Figura Janela de configurações de Radio Group Figura Caixa de List/menu Figura Configuração de Propriedades de List/Menu List Values Figura Caixa de JumpMenu Figura Caixa de FileField Figura Caixa de Label Figura Aba de Ferramentas de Texto Figura Aba de Ferramentas Favoritos Figura Janela de configuração da Ferramenta Favoritos Figura Configuração de Propriedades de Texto Figura Configuração de Propriedades de Tabela Figura Configuração de Propriedades de Página Figura Configuração de Propriedades de Imagem Figura Ferramentas de Edição de Imagem Figura Janela de Configuração de Brilho e Contraste Figura Janela de Configuração de Nitidez Figura Configuração de Propriedades de Flash Figura Botão de Edição do Fireworks Figura Programa de Edição de Imagem Fireworks Figura Modo de Visualização das Extensões Figura Tela de Cadastro de Clientes Figura Tela com os dados dos Clientes, podendo fazer alterações Figura Tela de Cadastro de Vendas Figura Ferramenta de Busca Figura Tela de Lista de Ordens de Serviços Figura Tela de Nota Fiscal Figura Tela de Débitos em Aberto Figura Tela de Relatórios de Vendas do Dia

13 12 LISTA DE TABELAS Tabela 1 - Teclas de Atalho do Menu File Tabela 2 - Teclas de Atalho do Menu Edit Tabela 3 - Teclas de Atalho do Menu Image Tabela 4 - Teclas de Atalho do Menu Layers... 60

14 13 1. INTRODUÇÃO Este trabalho foi elaborado para mostrar as principais funções dos editores para Web que são: o Photoshop e o Dreamweaver. O Photoshop é o principal editor de imagem que existe hoje no mercado e o Dreamweaver é um dos maiores editores de sites para Web. Ambos são programas pagos que pertencem a empresa Adobe, são de fácil utilização e possuem ferramentas modernas. Ao longo deste trabalho iremos ver como é a área de trabalho destes programas, onde ficam localizadas as ferramentas e quais são as suas utilizações. Embora hoje no mercado existam vários editores free, eles não possuem a quantidade de tarefas e ferramentas desses dois editores.

15 14 2. PHOTOSHOP Photoshop é um software de edição de imagens desenvolvido pela Adobe Systems. É considerado o líder no mercado dos editores de imagem. Photoshop foi originalmente criado por dois irmãos Thomas Knoll e John Knoll. Os dois irmãos tinham interesses comuns, tanto em fotografia e computação. O seu desenvolvimento começou efetivamente em O projeto começou como uma tese de doutorado, e os irmãos suspeitaram que pudessem ter algum retorno financeiro e procuraram investidores no Vale do Silício, mas só ouviram não como resposta. No início, os criadores do programa enfrentaram alguns obstáculos para colocá-lo no mercado. A tese era sobre o processamento de imagens digitais, e evoluiu primeiro num pequeno conjunto de rotinas gráficas, e depois em um programa chamado Display. Este cresceu em uma versão melhor caracterizada ImagePro nomeado em 1988, e finalmente o Photoshop 1.0 em A Adobe finalmente viu no programa uma oportunidade e o licenciou em No dia 10 de fevereiro de 1990 lançou sua primeira versão. Bem, como qualquer programa de edição de imagem, você pode usar o Photoshop para "alterar" as imagens, como fotos, ícones baixados, ou arte digitalizada. Alterar uma imagem inclui fazer coisas como mudar cores, alterar o tamanho e a escala de uma imagem, ou colocar uma imagem "dentro" de outra. A alteração inclui também as modificações técnicas, tais como alterar o modo de compressão de imagem de um tipo para outro, ou alterando o número de bits por pixel. Mas, além de alterar as imagens, o Photoshop tem uma vasta gama de ferramentas que ajudam a "criar" imagens a partir do zero. Na web, muitas vezes você vai precisar fazer ícones personalizados, botões, linhas, bolas ou a arte em texto. Photoshop faz de tudo isto excessivamente fácil e divertido. O Photoshop desenha em pixels e não em vetor. O Photoshop está disponível em uma ampla variedade de plataformas, desde o Mac para o Windows para UNIX. O Adobe Photoshop tem a interface mais

16 15 intuitiva, o mais completo conjunto de ferramentas, e os maiores número de livros de referência ao redor. Atualmente, o Photoshop é o software mais popular do mundo no seguimento. A sua ultima versão é o Photoshop CS5 (Creative Suite 5) correspondente à décima segunda edição desde seu lançamento), disponível para os sistemas operativos Microsoft Windows e Mac OS X. Pode ser rodado também no Linux. Algumas versões anteriores foram lançadas também para IRIX, mas o suporte a esta versão foi descontinuado após a versão INTERFACE Adobe Photoshop é uma poderosa ferramenta para edição de fotografias e gráficos. O primeiro passo para aprender a mexer com o Photoshop é se familiarizar com a interface dela. A área de trabalho é composta por 5 componentes básicos. São eles: 1) Barra de Menus - contém todas as opções disponíveis de Photoshop ; 2) Caixa de ferramentas - tem várias ferramentas para edição de imagem; momento; 3) Opções Bar - definir as opções para a ferramenta selecionada no 4) Paletas - são vários painéis para controlar os diferentes aspectos do projeto. Includes layers, channels, paths, history.; 5) Área de imagem - a imagem aberta no momento.

17 16 Figura 1 - Área de trabalho do Photoshop Barra de Menu Figura 2 - Barra de Menu File operações e preferências do programa; Edit operações de edição (copiar, cortar, colar...); Image opções e controle dos parâmetros de imagem; Layer operações com camadas (layers); Select operações com seleções definidas; Filter aplicação de filtros (transformações) em imagens; View opções de visualização; Window controle das janelas auxiliares e da barra de ferramentas; Help ajuda do Photoshop.

18 Barra de menus File Neste menu, encontram-se os comandos que permitem abrir um novo arquivo ou imagem, salvar, escanear, configurar impressão e preferências do programa. Figura 3 - Menu File 1 - New - abre uma nova janela; Open - abre arquivo que já existe para editar seu conteúdo; Open As - abre um arquivo cuja extensão está errada ou quando seu nome não constar na lista apresentada na caixa do comando Open. Utiliza as mesmas extensões do comando anterior. 2 - Close - fecha o arquivo que estiver ativo, sem encerrar o aplicativo. Se houverem modificações que não foram salvas, abre-se a opção de salvá-las antes de fechá-lo; Save - salva o arquivo em disco atualizando-o caso não o tenha, será pedido um nome através do mesmo comando Save As; Save As - salva o arquivo com nome diferente do atual, permitindo assim obter várias versões de um mesmo trabalho, ou mesmo nome em outro diretório e/ou driver, ou ainda com extensões diferentes: *.PSD, *.PDD, *.JPG, *.TIF, *.BMP, etc; Save a copy - salva uma cópia da imagem exibida;

19 18 Revert - retorna a imagem ao estado que se encontrava antes de ser gravada. Atenção ao usar este comando, pois ele é irreversível. Figura 4 - continuação do Menu File 3 - Place - inserir imagens (EPS file, PDF file); 4 - Import - importar e exportar imagens; 5 - Automate - criar uma folha de contato, processar varias imagens em lote (simplifição de comandos) 6 - File Info - informações de arquivo; 7 - Page Setup - configura página e imprime; Print - remete a página para impressão; 8 - Preferences - configura ferramentas e utilitários e direções de cores; 9 - Adobe Online serviços via on-line pelo site da Adobe; 10 - Aqui temos os últimos arquivos acessados; 11 - Exit - para finalizar o Photoshop.

20 Barra de menus Edit Neste menu, estão os comandos que permitem a edição da imagem. Figura 5 - Menu Edit 1 - Undo All - este comando desfaz a última operação realizada ou refaz a operação que acabou de ser desfeita. Atenção: só há um Undo/ Redo por operação. 2 - Cut - corta o item selecionado; Copy - copia o item selecionado; Paste - insere a imagem; Paste Into - cola o objeto selecionado dentro de uma área selecionada; Clear - Remover, limpar a área selecionada. 3 - Fill - Preenche a área selecionada com a cor, opacidade e modo escolhido. Stroke - Permite o preenchimento de uma borda ao redor da área selecionada, como um contorno ou moldura. 4 - Free transform e Transform - Estes comandos permitem girar, torcer, escalar e aplicar perspectiva a um objeto ou a uma imagem inteira. 5 - Define Padrão - Definir fundos especiais.

21 20 Importante: O padrão definido não é salvo automaticamente em nenhum diretório. Se você desejar criar uma biblioteca de padrões, crie um diretório e recorte a área a ser definida como padrão (com o comando Crop ou ferramenta Crop) e salve seu arquivo no diretório criado utilizando o comando Save As. 6 - Purge - Limpa todas as quatro opções ao mesmo tempo: Undo, Clipboard, Pattern e Histories. Está opção têm uma desvantagem, você perde o acesso ao que estiver eliminado. Portanto, não deve eliminar o conteúdo do Clipbord se for preciso colar mais tarde o que estiver nele. Além disso, depois de eliminar o buffer Undo, você não poderá desfazer a ação imediatamente anterior a eliminação Barra de menus Image 6 - Menu Image, parte Mode 1 - Mode Grayscale - Converte a imagem ativa para escala de cinzas, composta por 8 bits de informações por pixel e utiliza de 0 a 255 tons de cinza para simular a graduação de cor. Ao pedir este comando surge uma caixa para sua confirmação: Duotone - Utilizado para converter apenas imagens Grayscale em monotones, duotones, tritones e quadritones. O monotone mistura a cor cinza

22 21 utilizando uma tinta que não seja a preta criando uma terceira cor; duotone, tritone e quadritone fazem o mesmo processo utilizando duas, três ou quatro cores, respectivamente. Para escolher a cor, clique sobre a amostra de cor. Ao clicar no gráfico, será determinada a curva da cor, principalmente a sua máxima. Para cores escuras não use mais de 75%. O botão Save, salva o duotone utilizado no diretório escolhido; enquanto o botão Load permite abrir as configurações de um duotone salvo. RGB color - Converte a imagem para modo RGB, que reproduz 16,7 milhões de cores na tela utilizando apenas essas três cores: Red (vermelho), Green (verde) e Blue (azul). As imagens RGB possuem três canais e 24 bits por pixel. Somente os arquivos Bitmap não podem ser convertidos para RGB. CMYK color - Converte a imagem par o modo CMYK, que utiliza as quatro cores usadas na separação de cores no processo de impressão: C (cyan/ ciano), M (mangenta), Y (yellow/ amarelo) e K (black / preto). As imagens CMYK possuem quatro canais contendo 24 bits por pixel. Somente os arquivos Bitmap e Multichannel não podem ser convertidos para este modo. Lab color - Converte a imagem para o modo Lab, que utiliza três componentes para representar as cores: L (Lightness / brilho), a (controla as cores entre verde e mangenta) e b (controla as cores entre azul e amarelo). Este modo é formado por três canais contendo 24 bits por pixel. Somente os arquivos Bitmap não podem ser convertidos para este modo. Figura 7 - Menu Image, parte Adjust

23 Adjust - Algumas imagens necessitam de ajustes de brilho, contraste, intensidade, saturação e etc. Os ajustes existentes são variados e em grande número, portanto serão esclarecidos no decorrer deste treinamento. Levels - Ajusta o brilho e o contraste da imagem através dos valores dos meios tons, sem alterar drasticamente as sombras (pixel escuros) e os hightlights (áreas claras). Permite especificar qual a área mais escura (conta-gotas preto), o meio tom (conta-gotas cinza) e a área mais clara (conta gotas-branco). Com essa caixa de diálogo, você pode ajustar rapidamente todos os tons dentro de uma imagem, quer seja cores ou escala de cinza. Para aplicar os mesmos ajustes em múltiplas imagens, dê um clique no botão Save na caixa de diálogo Levels para salvar um arquivo contendo as definições feitas. Dê um clique no botão Load para carregar essas definições de volta para a caixa de diálogo a qualquer hora. Auto Levels - aplica um ajuste automático. Ao manter pressionada a tecla ALT, torna-se Options, onde será definida a proporção de preto (Black Clip) e de branco (White Clip). Ao pressionar ALT, o botão Cancel transforma-se em Reset, permitindo que a caixa volte as suas configurações originais. O botão Save, salva as configurações no diretório desejado e o botão Load, abre as configurações salvas. Em Output altera-se o contraste da imagem, onde o triângulo preto representa as áreas escuras; e o branco, as áreas claras. Em Input Level altera-se o brilho da imagem, onde o triângulo preto representa as áreas escuras; cinza, os meios tons; e o branco, as claras. Color Balance - permite a mudança das misturas de cores na imagem, define a parte da imagem que será alterada: Shadows, áreas escuras. Midtones, os meios tons. Hightlights, as áreas claras. Movimente a seta em direção à cor que precisa ser intensificada e afaste-a da que é necessário a redução. Defina também qual canal de cor será alterado. Brightness/Contrast - ajusta o brilho e o contraste da imagem ou seleção.

24 23 Figura 8 - Janela de configuração de Brilho e Saturação Hue / saturation : ajusta as cores (matrizes), suas saturações e brilho. Você pode alterar uma cor por vez, conforme o modo de cor da imagem. Para imagens em RGB, altere R, G e B. Para imagens em CMY, altere C, M e Y. Em Master, todas as cores são alteradas ao mesmo tempo. Hue é a cor propriamente dita: Puxe a seta na direção da cor que precisa ser intensificada, afastando a cor que está sendo reduzida. Saturation é a saturação da cor, a sua pureza. Para direita, aumenta-se saturação; para esquerda, diminui-se a saturação. Lightness é o brilho da cor Clolorize - transforma a imagem em uma escala da cor especificada em Hue. Desaturate: tira a saturação das cores da imagem, deixando-a em escala de cinza. Replace color: modifica também a cor, a saturação da cor e o brilho da imagem. Selective color, Channel Mixer, Invert, Equalize, Treshold, Posterize, Variations. O comando Invert é freqüentemente confundido com o comando Inverse, o qual reverte uma seleção. O Comando Treshold transforma as imagens em áreas do preto e branco sólido sem cinza. O comando Variations permite ajustar imagens baseado em pequenas miniaturas que mostram exatamente qual o efeito que as alterações terão.

25 Barra de menus Layers Nesta caixa de menu, encontra-se opções de criação novas camadas para imagens elaboradas, duplicar uma camada e até realizar ajustes nas camadas. Figura 9 - Menu Layer Barra de menus Select As maiorias das Operações iniciam com uma seleção. Este comando permite selecionar partes da imagem que não se tocam e você pode combinar seleções de várias maneiras. Você pode também fazer vários modos - tais como pintar sobre a área selecionada ou usar a ferramenta Pen para desenhar um contorno preciso da área a ser selecionada. Você também pode salvar as seleções para o futuro. Figura 10 - Menu Select

26 (All) - seleciona toda a área da tela; (Deselect) - remove toda seleção ; (Reselect) - retorna a seleção removida ; (Ivert) - inverte a forma de seleção; 2 - (Color Range) - seleciona objetos pela faixa de cor; 3 - (Feather) - seleciona pela característica de área da imagem e seleciona setores modificados; 4 - (Grow) - aumenta a área selecionada e seleciona áreas idênticas; 5 - (Transform Selection) - transforma uma seleção. Geralmente é difícil entender o efeito dessas transformações em uma seleção sem experimentá-la. selecionada. 6 - (Load Selection...) - leva a tela até a área selecionada e grava á área Barra de menus Filter Neste menu contem diversos filtros que permitem acertar a imagem, encobrindo pequenos defeitos ou aplicar efeitos especiais. Os cincos filtros Blur permitem suavizar as áreas onde as arestas são agudas, removendo o contraste; Exemplos: Figura 11 - Menu Filter

27 26 Artistic - cria efeitos de aquarela, pastel rugoso, lápis de cor, etc; Blur - cria um leve efeito de embaçamento que pode ser usado para diminuir o contraste e eliminar os defeitos em transições de cores; anterior; Blur More - produz um efeito de três a quatro vezes maior que o comando Gaussian Blur - permite controlar o embaçamento desde uma leve suavização até uma névoa espessa que desfoca totalmente a imagem. Radius - controla o nível de embaçamento (0-255). Quanto maior o número do embaçamento, maior o efeito; Motion Blur - cria a ilusão de movimento. Reproduz o efeito de fotografar o objeto em movimento usando um alto tempo de exposição; Angle - controla a direção do movimento (-360 a 360). Pode-se arrastar o raio do circulo ao lado. Distance - controla a intensidade do embaçamento (1 a 999). Radial Blur - produz um efeito de movimento na imagem, como se a câmera estivesse dando um zoom ou girando; Amount - Controla a intensidade do efeito (1 a 100). Blur Method - embaçamento em círculos concêntricos, como se a imagem estivesse girando. Zoom, embaçamento em linhas que se ampliam pelo centro. Blur Center - preview em forma wireframe (imagem crua) onde é possível arrastar o centro do efeito clicando e arrastando no ponto central.

28 27 Quality - draft, mais rápida porém com resultado granulado. Best, resultado suave, porém demorado. Good, qualidade entre os itens anteriores. Distort - produz efeitos de distorção geométrica na imagem ou seleção; Displace - usa uma segunda imagem como um mapa de deslocamento, respeitando as configurações da caixa; Horizontal Scale - desloca para a direita ou esquerda, conforme o valor de cor da segunda imagem (mapa de deslocamento). Valor claro, desloca para esquerda e valor escuro, para a direita. Vertical Scale - desloca para a cima ou para baixo, conforme o valor de cor da segunda imagem (mapa de deslocamento). Valor claro desloca, para cima e valor escuro, para baixo. Stretch to Fit - transforma o tamanho da segunda imagem para que ela corresponda ao tamanho da imagem que estará recebendo o efeito. Tile - usa a segunda imagem como um padrão de repetição. Warp around - repete os pixels ao redor da borda da imagem para dentro; Repeat Edges Pixels - repete os pixels da borda da imagem para fora; (Pinch) comprime ou expande a área selecionada, amount controla a intensidade do efeito (-100 a 100), valores negativo expandem a área selecionada e valores positivos, comprimem; para outra. Polar Coordinates - converte a área selecionada ou imagem de uma forma

29 28 Ripple - Produz um padrão ondulante na seleção, como ondulações na superfície da imagem, Size define o tamanho da ondulação. Small, ondulações pequenas. Median - ondulações médias. Large, ondulações grandes e Amount, controlam a intensidade do efeito. Estes são exemplos de alguns filtros existentes neste menu, mais informações sobre filtros serão abordadas no caderno de exercícios. Exemplos de filtros: artificial; Artistic - dão outra aparência a imagem, tornando-a com aspecto menos fotografias; Blur - suavizam uma seleção ou imagem e são úteis no retoque de Brush Stroke - é usado somente para um perfeito acabamento em seus trabalhos, usando diferentes tipos de Brush e efeitos; Distort - são usados para distorcer uma imagem geometricamente, criando efeitos plásticos e de 3D; Noise - permitem acrescentar ou retirar ruídos de uma imagem. Podemos remover problemas em áreas específicas, criar texturas (como as usadas em papel de parede). Também são úteis em dar uma aspecto mais realístico a áreas retocadas. Pixelate - agrupam pixels em células; Render - permite criar um agrupamento de padrões, variando as cores de primeiro (Foregroud) e segundo plano(background);

30 29 Sharpen - permite melhorar o foco de uma imagem, aumentando o contraste dos pixels adjacentes; Sketch - permite criar efeito de arte-final em imagens; pixels; Stylize - permitem criar efeitos exagerados em imagens, deslocando os Texture - permitem acrescentar texturas a imagens; Other - são úteis para trabalhar com máscaras (modificar) Barra de menus View Os elementos citados nesta página referente a camadas, caminhos, guias e grades terão no decorrer deste treinamento, referências mais detalhadas. Figura 12 - Menu View 1 - New View - modifica a visualização do objeto; 2- CMYK Preview - prévia CMYK e Alarme de Gamut; 3 Zoom In - aumenta a imagem; Zoom Out - diminui a imagem; Fit on Screem - amplia ou reduz a imagem para visualização na tela; Actual Pixels - amplia para o tamanho dos pixels;

31 30 Print Size - imprimir no tamanho; 4 - Hide or Show Edges - remover ou exibir bordas; Hide or Show Paths - remover ou exibir caminhos; 5 - Show or Hide Rullers - exibir ou remover réguas na janela da imagem; 6 - Show or Hide Guides - exibir ou remover guias; Snap to Guides - prender as guias; Lock Guides - ver guias; Clear Guides - limpar guias; 7 - Show ou Hide Grid) - exibir ou remover grade e (Sanap to Grid) prender a grade Barra de menus Window Nesta caixa você encontra uma lista de comandos que aparece quando você clica na Barra de menus. Clique em um nome de menu para exibir uma lista de comandos utilizados para acessar várias funções. Figura 13 - Menu Window 1 - (Cascade) - exibe imagens em cascata;

32 31 (Tile) - exibe imagens de modo recortado; (Arrange Icons) - organiza os ícones; (Close All) - fecha todas as janelas de imagens. 2 - (Hide Tools) - remove ou exibe as ferramentas na área de trabalho; 3 - Os itens nestas áreas do menu View são relativos a exibição ou remoção dos Roll-ups de auxílio que existem na área de trabalho do Photoshop. Photoshop. 4 - Aqui temos também a exibição e informações das imagens abertas no 5 - (Show Layers) - exibe a palheta de layers (camadas); (Show Channels) - exibe diversos canais ao mesmo tempo; (Show Paths) - é uma maneira efetiva para selecionar bordas com precisão. 6 - (Hide History) - Desfazer mais de um comando; (Show Actions) - Automatizar u m série de passos. 7 - (Hide Status Bar) - remove ou exibe a barra de status Barra de menus Help Neste menu o usuário solicita as caixas de Diálogo referentes a auxílio do Manuseio do software ou informações sobre o mesmo. Figura 14 - Menu Help

33 Caixa de ferramentas A caixa de ferramentas tem várias ferramentas para editar uma imagem. A caixa de ferramentas é dividida em várias seções de ferramentas semelhantes: Ferramentas de seleção Aprimoramento das ferramentas Vetor Ferramentas Ferramentas de navegação Cor Ferramentas A caixa de ferramentas é mostrada à esquerda. Ela contém várias ferramentas do Photoshop. Além das ferramentas visíveis, as ferramentas com uma pequena seta preta no canto inferior direito com outras opções de ferramentas relacionadas. Para selecionar uma ferramenta devemos ver se ela está visível na caixa de ferramentas, e clique nele uma vez para ativá-lo Ferramentas de seleção Figura 15 - Ferramentas de Seleção As ferramentas de seleção permitem usar várias técnicas para selecionar seções específicas de uma imagem, em vez de todo o gráfico. Uma vez selecionada, você pode editar e manipular uma seção de uma imagem, deixando o resto intacto Rectangular Marquee Tool Use esta ferramenta para fazer seleções em sua imagem, em uma forma retangular. Isso altera a área da imagem que é afetada por outras ferramentas e

34 33 ações para estar dentro da forma definida. Segurando a tecla [Shift] enquanto arrasta a seleção, restringe a forma de um quadrado perfeito. Segurando a tecla [Alt] enquanto arrasta define o centro do rectângulo onde o cursor iniciado. Figura 16 - Ferramenta Retangular Marquee Tool Move Tool Use esta ferramenta para mover as coisas. Segure a tecla [Shift] para limitar os movimentos para vertical / horizontal. Figura 17 - Ferramenta Move Tool Polygon Lasso Tool Use para definir seleções em qualquer forma que você gostaria. Para fechar a seleção, clique sobre o ponto de início (você vai ver a mudança de cursor quando você está nela), ou simplesmente clique duplo. Ao segurar a tecla [Ctrl], você vai ver a mudança de cursor, e a próxima vez que você clica, ele irá fechar a sua seleção. Figura 18 - Ferramenta Polygon Lasso Tool

35 Magic Wand Tool Utilize esta opção para selecionar cores. Ela irá selecionar o bloco de cor ou transparência, com base em onde você clicar. Na Barra de opções no topo, você pode alterar a tolerância ao fazer suas seleções mais e menos precisos. Figura 19 - Ferramenta Magic Wand Tool Crop Tool A ferramenta Crop funciona de forma semelhante à ferramenta Retangular Marquee. A diferença é quando você pressionar a tecla [Enter / Return], ela surge a sua imagem para o tamanho da caixa. Qualquer informação que estava do lado de fora da caixa é ido agora. Não é permanente, você ainda pode desfazer. Figura 20 - Ferramenta Crop Tool Slice Tool É usado principalmente para a construção de sites, ou dividir uma imagem em partes menores, quando salva. Figura 21 - Ferramenta Slice Tool

36 Aprimoramento das ferramentas Figura 22 - Ferramentas de Aprimoramento As ferramentas de melhoria permite que você clone partes de uma imagem, borrão ou aumentar os fundos, preencher uma área com uma cor selecionada, ou ainda enfatizar pontos focais Healing Brush Tool Você pode usar essa ferramenta para reparar arranhões e especificações e coisas desse tipo nas imagens. Ele funciona como a ferramenta Pincel. Você escolhe o tamanho do cursor, em seguida, segurando a tecla [Alt], você seleciona uma área limpa de sua imagem. Deixe de lado a tecla [Alt] e pinte sobre a área de ruim. É basicamente copia a informação da área da primeira para a segunda, sob a forma de a ferramenta Pincel. Apenas, no final, ela atinge a informação, de modo que misturas. Figura 23 - Healing Brush Tool Brush Tool Ele pinta uma imagem sua, em qualquer cor que você selecionou, e qualquer que seja o tamanho que você selecionou. Há um monte de opções para ele. Figura 24 - Brush Tool

37 Clone Stamp Tool Isto é muito semelhante ao Healing Brush Tool. Você usa exatamente da mesma forma, exceto essa ferramenta não misturar no final. É uma cópia direta da informação a partir da primeira área selecionada para a segunda. Figura 25 - Clone Stamp Tool Ferramenta Pincel História Esta ferramenta funciona como a ferramenta Pincel, exceto no que ele pinta, com é a partir do estado original da imagem. Se você vai em História da janela, você pode ver a paleta Histórico. A ferramenta Pincel do Histórico pinta com as informações de qualquer estado histórico é selecionada. Figura 26 - Ferramenta Pincel História Eraser Tool Esta é a ferramenta anti-brush. Ele funciona como uma borracha e apaga todas as informações onde quer que você clicar e arrastar. Se você estiver em uma camada, ele irá apagar a informação transparente. Se você está na camada de fundo, ele apaga com qualquer cor secundária que você selecionou. Figura 27 - Eraser Tool

38 Gradiente Tool Você pode usar isso para fazer um gradiente de cores. Ele cria uma mistura de sua cor de primeiro plano e cor de fundo quando você clicar e arrastar. Figura 28 - Gradiente Tool Blur Tool coisas borradas. A ferramenta Blur torna as coisas borradas. Clique e arraste para fazer as Figura 29 - Blur Tool Dodge Tool É usado para clarear qualquer área. absoluto. O preto absoluto não irá clarear. Contanto que não seja o preto Figura 30 - Dodge Tool

39 Ferramentas Vetor Figura 31 - Ferramentas Vetor no Photoshop. O vetor ferramentas permitem aos usuários criar objetos baseados em vetor Path Seletion Tool Você pode usar esta ferramenta no trabalho com os caminhos. Figura 32 - Ferramenta Seletion Tool Horizontal Type Tool Ela faz texto. Você pode clicar em um único ponto, e começar a escrever imediatamente. Ou você pode clicar e arrastar para fazer uma caixa delimitadora de onde o seu texto / tipo vai. Há um monte de opções para a ferramenta Type. Figura 33 - Horizontal Type Tool Pen Tool É para a criação de caminhos, em que você usaria a Path Selection Tool para selecionar o caminho. Os caminhos podem ser usados em algumas maneiras

40 39 diferentes, principalmente para criar caminhos de recorte, ou para criar seleções. Você usa a ferramenta clicando em para adicionar um ponto. Se clicar e arrastar, ele vai mudar a forma do seu caminho, o que lhe permite dobrar e moldar o caminho para as seleções precisas e tal. Figura 34 - Ferramenta Pen Tool Retangle Tool Por padrão, ele desenha uma camada de forma, na forma de um retângulo. Ele preenche o retângulo com qualquer cor de primeiro plano que você selecionou. Figura 35 - Ferramenta Retangle Tool Notas Tool Você pode usar essa ferramenta para adicionar pequenas caixas de pequena nota em sua imagem. Estes são úteis se você está muito esquecido, ou se você está compartilhando o arquivo de Photoshop com alguém. Só funciona com arquivos. PSD. Figura 36 - Ferramenta de Notas

41 Eyedropper Tool (I) Esta ferramenta funciona mudando sua cor para qualquer cor que você clique em. Segurando a tecla [Alt] vai mudar a sua cor de fundo. Figura 37 - Ferramenta Eyedropper Tool Ferramentas de navegação Figura 38 - Ferramentas de Navegação Ao utilizar as ferramentas de navegação, você pode mover para diferentes seções de uma imagem, ou ampliação alteração da imagem. A ferramenta Zoom permite aos usuários ampliar e reduzir áreas de imagens. Clique na ferramenta Zoom para ampliar, pressione a tecla Alt e clique na ferramenta de zoom para fora. A ferramenta Mão permite aos usuários a deslizar a imagem ao redor da área da imagem para visualizar diferentes partes da imagem Ferramenta Mão É para mudar a sua imagem inteira dentro de uma janela. Então se você está ampliada e sua área de imagem é maior do que a janela, você pode usar a ferramenta Mão para navegar em torno de sua imagem. Basta clicar e arrastar. Você pode obter esta ferramenta a qualquer momento usando qualquer outra ferramenta ao pressionar e segurar o [Espaço].

42 41 Figura 39 - Ferramenta Mão Zoom Tool Ele permite que você de zoom na sua imagem. Segure a tecla [Alt] para diminuir o zoom. Segurando a tecla [Shift] irá ampliar todas as janelas que você tem aberto, ao mesmo tempo. Dê um clique duplo na ferramenta Zoom na paleta para voltar à exibição de 100%. Figura 40 - Ferramenta Zoom Tool Cor Ferramentas Figura 41 - Ferramenta de Cor As ferramentas de controle de cor e cores de fundo. Neste exemplo, o branco é a cor principal e o vermelho é a cor de fundo. Quando usado em conjunto com a paleta de cores e da paleta Swatches, os usuários podem selecionar a partir de milhões de cores diferentes para usar em suas imagens. A ferramenta Contagotas permite que você selecione uma cor em uma imagem existente.

43 Área de imagem A tela de desenho é a área em que você irá criar e / ou modificação de imagens. Por padrão, o Photoshop oferece uma tela de desenho para trabalhar, mas você pode facilmente abrir uma nova usando a "nova" opção de menu a partir do "item de menu File". Cada tela de desenho tem uma barra de título com botões de controle de janela e uma área de desenho. Figura 42 - Área de criação de Imagem A barra de título tem várias funções. Primeiro ela exibe o nome atual da imagem, bem como informações sobre o modo de cor e escala de zoom. Como você pode ver na figura acima, por padrão, o nome será "Untitled-1", mas quando você salvar a imagem será alterado para o nome que você salvou o arquivo. Outro aspecto da barra de título é que você pode usar a barra de título para mover a tela de desenho em qualquer lugar dentro da área de trabalho clicando e segurando o botão do mouse sobre a barra de título e arrastando o mouse. Finalmente, a barra de título oferece vários botões de controle. Tal como acontece com outros aplicativos, você pode usar os botões para minimizar, maximizar ou fechar a tela de desenho.

44 43 Figura 43 - Opção New do Menu File Você pode facilmente abrir uma nova tela para desenhar sobre a escolha de "Novo" do menu "Arquivo". Quando você fizer isso, o "New Canvas Diálogo" será exibido. Você pode usar esta janela para criar o seu próprio canvas. Título lona MyFirstCanavas, defina a altura para 300 pixels e largura de 300 pixels, e OK. Figura 44 - Janela de configuração de um arquivo novo Paletas Paletas são componentes essenciais de seu conjunto de ferramentas. Por um lado, as paletas ajudam a definir a natureza das suas ferramentas. Ou seja, paletas personalizam a forma como as ferramentas na caixa de ferramentas se executam. Paletas também ajudam a executar algumas das tarefas mais complexas, tais como camadas ou manipulação de esquemas de cores complexas. Por padrão, há cinco paletas.

45 44 Figura 45 - Paletas Embora estas cinco paletas de controle apresentem muitos aspectos diferentes do seu desenho, elas compartilham diversas propriedades. Todas as paletas são constituídas por uma barra de título, um conjunto de guias, e uma lista de opções para cada guia. Além disso, todas as paletas têm um menu de opções. Figura 46 - Aspectos das Paletas

46 45 Outra propriedade genérica de paletas é a capacidade de ajustar dinamicamente o conteúdo. Ou seja, você pode personalizar as abas em qualquer paleta simplesmente arrastando separadores entre as paletas. Clique e mantenha pressionado o botão esquerdo do mouse sobre uma aba em uma paleta e sem largar o botão do mouse pressionado, arraste a aba para outra paleta e deixar ir. Agora, arraste a guia para trás. Finalmente, note que se você fechar uma paleta, você pode facilmente recuperá-la na tela, escolhendo "Paletas" do "item de menu Window" e selecionar a paleta que você deseja mostrar. 2.2 VERSÕES O Photoshop foi criado pela empresa de desenvolvimento Adobe, se licenciou em 1989 e foi lançada sua primeira versão em fevereiro de 1990 com a versão Versão lançado em fevereiro de Figura 47 - Tela de Abertura da versão 1.0.7

47 Versão lançado em dezembro de Mudanças feitas: Caminhos; CMYK Color; EPS Rasterization. Figura 48 - Tela de Abertura da versão Versão 2.5 lançado em fevereiro de Mudanças feitas: 16 bits por canal de suporte. Figura 49 - Tela de Abertura da versão 2.5

48 Versão 3.0 lançado em Setembro de Mudanças feitas: Tabbed Paletas; Camadas. Figura 50 - Tela de Abertura da versão Versão 4.0 lançado em Novembro de Mudanças feitas: Camadas de Ajuste; Ações (macros); Desfazer Múltiplo (Valor definido nas preferências). Figura 51 - Tela de Abertura da versão 4.0

49 Versão 5.0 lançado em Maio de Mudanças feitas: Paleta com History; Gerenciamento de Cores; Laço Magnético. Figura 52 - Tela de Abertura da versão Versão 5.5 lançado em Julho de Mudanças feitas: Fornecido com o ImageReady; Salvar para a Web; Extrato. Figura 53 - Tela de Abertura da versão 5.5

50 Versão 6.0 lançado em Outubro de Mudanças feitas: Vetor Shapes; Atualizado Interface de Usuário; "Liquify" filtro; Estilos de Layer / Blending Options de diálogo. Figura 54 - Tela de Abertura da versão Versão 7.0 lançado em Abril de Mudanças feitas: Fabricado texto completamente vetor; Healing Brush; Novo motor de pintura; Camera RAW 1.x (opcional plugin). Figura 55 - Tela de Abertura da versão 7.0

51 Versão CS 8.0 lançado em Outubro de Mudanças feitas: 2.x Câmera RAW; Altamente modificado "Slice Tool"; Sombra / Realce comando; Comando Corresponder Cor; Lens Blur filtro; Smart Guides; Histograma em Tempo Real; Detecção e recusa para imprimir imagens digitalizadas de várias; Macrovision de proteção de cópia baseada em SafeCast DRM tecnologia; Suporte de scripts para JavaScript e outras linguagens; Camada de grupos hierárquicos; 16 bits por canal de camadas, pintura e ajustes; Suporte para arquivos maiores que 2 gigabytes; Documentos até pixels em cada dimensão. Figura 56 - Tela de Abertura da versão CS 8.0

52 Versão CS2 9.0 lançado em Abril de Mudanças feitas: 3.x Câmera RAW; Smart Objects; Distorção de Imagem; Spot Healing Brush; Ferramenta de olhos vermelhos; Lens Correction filtro; Smart Sharpen; Smart Guides; Ponto de Fuga; Melhor gerenciamento de memória em 64 bits PowerPC G5 máquinas Macintosh rodando Mac OS X 10.4; Mais opções de manchas, tais como "espalhamento" Modificado seleção da camada, como a habilidade para selecionar mais de uma camada. Figura 57 - Tela de Abertura da versão CS2 9.0

53 Versão CS lançado em Dezembro de Mudanças feitas: O suporte nativo para a plataforma Macintosh baseados em Intel e suporte aperfeiçoado para Windows Vista; Revisado interface de usuário; Adições de recursos para o Adobe Camera RAW; Quick ferramenta Selecionar; Alterações a Curves, Ponto de Fuga, Channel Mixer, brilho e contraste, e a caixa de diálogo Imprimir; Ajuste de conversão em preto-e-branco; Auto Align e Auto Blend; Smart (não-destrutivos) Filtros; Mobile dispositivo de otimização gráfica; Melhorias para clonagem e recuperação; Mais de 32 bits completo suporte HDR / (camadas, pintura, mais filtros e ajustes) Faster lançamento. Figura 58 - Tela de Abertura da versão CS3 10.0

54 Versão CS lançado em Outubro de Mudanças feitas: Imagens panorâmicas e zoom mais suaves e livre rotação da tela; OpenGL aceleração de exibição no Photoshop; O suporte nativo para 64 bits em Windows Vista x64; Painel Ajustes; Mistura automática de imagens; Painel Máscaras; Aprimorado do Adobe Photoshop Lightroom; Dimensionamento sensível ao conteúdo; Melhor processamento de imagens brutas; Maior profundidade do campo; Dramaticamente melhorada correção de cor; Auto-alinhamento das camadas; Novo arquivo opções de exibição (exibição do documento com guias e pontos de vista n-up); Novo gerenciamento de arquivos e espaços de trabalho com o Adobe Bridge CS4. Figura 59 - Tela de Abertura da versão CS4 11.0

55 Versão CS lançado em Abril de Mudanças feitas: Content Aware Fill; Puppet Tool Warp; 64 bits para Macintosh; Mixer Brush; Correção automática da lente; Melhoria da Câmara processamento RAW; Câmera controle grão cru; Melhoria Ray Tracing (Extended); Repousse ferramenta de extrusão 3D (Extended); Imagem baseada luzes (Extended). Figura 60 - Tela de Abertura da versão CS MODOS DE COR Os modos de cor são modos diferentes de definir as cores, tanto vista em monitores, quanto em uma impressão. Quando convertemos um tipo de cor para outro tipo podem acontecer alterações na imagem.

56 55 O Photoshop trabalha com vários modos de cor. Alguns deles são: RGB, CMYK, CIE-LAB e Bitmap RGB RGB é modo de cor luz, tudo o que é visto na tela do Monitor. É composto por 3 cores primárias R = RED (vermelho), G = GREEN (verde) e B = BLUE (azul). A cor RGB tem 256 níveis de intensidade, valor do brilho, um valor de 0 a 255, quanto maior o seu valor mais claro ela fica, sendo o 0 a cor preta CMYK O CMYK é um modo de cor Substrativo, é um modo de cor específico para impressão gráfica, pois o CMYK possui os 4 canais de cores: C = CIANO, M = MAGENTA, Y = AMARELO e K = (Black) PRETO. Ele possui valores que vão de 0 a 100 e quanto maior o seu valor mais escuro fica a cor. Ele funciona de uma forma similar à nossa percepção ocular de pigmentos. Quando uma determinada luz é projetada em um objeto, ela subtrai um pouco dessa luz e reflete o restante, justamente a cor refletida é a qual o ser humano percebe. (MELO, Filipe. Modos de cor no Photoshop. Em: <http://imasters.com.br/artigo/6738/photoshop/modos_de_cor_no_photoshop/>. Acesso em: 06 Novembro 2010). Tem uma vantagem de já saber qual cor irá sair ao imprimir, pois o CMYK trabalha com cor pigmento Lab Color O modo de cor LAB COLOR foi desenvolvido com o objetivo de reproduzir todas as cores que o olho humano pode perceber. O Modo LAB oferece três canais de cores. Um só para luminosidade e outro para dois intervalos de cores, conhecidos pelas iniciais a e b. Pense nele como um RGB com dois canais de brilho. (MELO, Filipe. Modos de cor no Photoshop. Em: <http://imasters.com.br/artigo/6738/photoshop/modos_de_cor_no_photoshop/

57 56 >. Acesso em: 03 Novembro 2010). Possui um extenso numero de cores e por isso é aconselhado para se aplicar a filtros e efeitos Bitmap São imagens que apresentam apenas duas cores, normalmente o preto e o branco. O computador usa somente 1 bit, on=preto e off=branco, para poder definir cada pixel. 2.4 FORMATOS DE ARQUIVOS No Photoshop existem diversos tipos de formatos de arquivos para trabalharmos. São eles: BMP, GIF, JPG, PNG, PDF, TIFF, EPS, PCX, PICT, PIXAR, TGA e DOCS BMP O BMP suporta 16 milhoes de cores, e seu principal uso seria para os famosos "papeis de parede" do windows GIF Possui 256 cores, tem muita utilidade para web, suporta fundos transparentes e animações JPG É o formato mais utilizado na WEB, quanto maior mais perca de qualidade ele fica, possui milhares de cores PNG

58 57 O PNG não perde a qualidade quando fica guande, é um formato que suportar fundos transparentes e arquivos coloridos de qualidade na Web PDF É um formato que visualiza páginas com textos, desenhos vetoriais e imagens. Formato bastante usado em fechamentos de arquivo TIFF TIFF não tem nenhuma perda quando se compacta, é muito utilizado para impressão também suporta transparências e camadas EPS Abri arquivos vetoriais exportados por outros programas, e os transformam em Pixel. O Arquivo EPS é um dos mais recomendados para formatos de impressão em OffSet PCX Suporta até 16 milhões de cores, não possui qualidade para a gráfica PICT Suporta 16 milhões de cores e 4 canais alpha (para máscaras). O formato PICT é especialmente eficiente na compactação de imagens com grandes áreas de cores sólidas PIXAR Formato para trabalhar com imagens em 3D.

59 TGA Formato para aplicativos de vídeo e cor de nível profissional em PC DCS Suporta somente cor CMYK. É exclusivo para impressão gráfica. 2.5 VANTAGEM E DESVANTAGEM DE SE USAR O PHOTOSHOP Vantagem Tem várias ferramentas avançadas de edição de imagem que melhoram muito a qualidade de uma fotografia. Na internet encontramos muitos tutoriais que ajudam a trabalhar com este software. Quanto mais você aprende a usar as ferramentas do photoshop, mais ele pode melhorar suas habilidades. A vantagem do Photoshop é que com o crescimento das vendas do software é um incentivo claro para a Adobe reinvestir no programa e aperfeiçoar ou, em alguns casos, corrigir seus recursos, e quem ganha com isso é sempre o usuário. Enquanto o Photoshop avança numa escalada progressiva, outros fornecedores apresentam recursos mais limitados para recuperar a desvantagem, perdendo, assim cada vez mais sua fatia de mercado. (CULEN, Marcelo. O que é o Photoshop?.Em: <http://www.mxstudio.com.br/photoshop/o_que_e_o_photoshop />. Acesso em: 01 Novembro 2010) Desvantagem Por ele ser um programa de gráfico ele é pesado e acaba ocupando grande espaço de mémoria no computador. Fazendo com que ele fique mais lento. É um software comercial com custo muito alto. A ultima versão CS5 está saindo em média US$ 700,00.

60 59 Por existir diversas ferramentas, e elas serem muito diferentes, um usuário sem prática terá que ter muita paciencia até que consiga usar cada ferramenta corretamente. 2.6 TECLAS DE ATALHO DO PHOTOSHOP No Photoshop existem diversas teclas de atalho para abrir as ferramentas, fazendo com que seu trabalho fique mais ágil e prático. Vamos visualizar algumas teclas de atalho: Tabela 1 - Teclas de Atalho do Menu File File Menu Action Windows Mac New Ctrl+N Cmd+N New Layer Ctrl+Shift+N Cmd+Shift+N Open Ctrl+O Cmd+O Open As Ctrl+Alt+O n/a Close Ctrl+W Cmd+W Close All Ctrl+Shift+W Cmd+Shift+W Save Ctrl+S Cmd+S Save As Ctrl+Shift+S Cmd+Shift+S Save a Copy Ctrl+Alt+S Cmd+Option+S Save for Web Ctrl+Alt+Shift+S Cmd+Option+Shift+S Page Setup Ctrl+Shift+P Cmd+Shift+P Print Ctrl+P Cmd+P Exit/Quit Ctrl+Q Cmd+Q Jump to ImageReady Ctrl+Shift+M Cmd+Shift+M Help F1 F1 Fonte: Fabio Lody, Tabela 2 - Teclas de Atalho do Menu Edit Edit Menu Action Windows Mac Undo Ctrl+Z Cmd+Z Step Back in History Ctrl+Alt+Z Cmd+Option+Z Step Forward in History Ctrl+Shift+Z Cmd+Shift+Z Cut Ctrl+X Cmd+X Copy Ctrl+C Cmd+C Copy Merged Ctrl+Shift+C Cmd+Shift+C Paste Ctrl+V Cmd+V Paste Into Ctrl+Shift+V Cmd+Shift+V Free Transform Ctrl+T Cmd+T Paste Into Ctrl+Shift+V Cmd+Shift+V Fonte: Fabio Lody, 2003.

61 60 Tabela 3 - Teclas de Atalho do Menu Image Image Menu Action Windows Mac Adjust Levels Ctrl+L Cmd+L Adjust Auto Levels Ctrl+Shift+L Cmd+Shift+L Adjust Auto Contrast Ctrl+Alt+Shift+L Cmd+Option+Shift+L Adjust Curves Ctrl+M Cmd+M Adjust Color Balance Ctrl+B Cmd+B Adjust Hue/Saturation Ctrl+U Cmd+U Desaturate Ctrl+Shift+U Cmd+Shift+U Invert Ctrl+I Cmd+I Extract Ctrl+Alt+X Cmd+Option+X Fonte: Fabio Lody, Tabela 4 - Teclas de Atalho do Menu Layers Layers Menu Action Windows Mac New Layer Ctrl+Shift+N Cmd+Shift+N Layer via Copy Ctrl+J Cmd+J Layer via Cut Ctrl+Shift+J Cmd+Shift+J Group with Previous Ctrl+G Cmd+G Ungroup Ctrl+Shift+G Cmd+Shift+G Bring to Front Ctrl+Shift+] Cmd+Shift+] Bring Forward Ctrl+] Cmd+] Send Backward Ctrl+[ Cmd+[ Send Back Ctrl+Shift+[ Cmd+Shift+[ Send Backward Ctrl+[ Cmd+[ Merge Layers Ctrl+E Cmd+E Merge Visible Ctrl+Shift+E Cmd+Shift+E Fonte: Fabio Lody, 2003.

62 61 3. DREAMWEAVER O Dreamweaver é um software de edição de códigos de várias linguagens voltado para WebSites, foi criado pela empresa de desenvolvimento Macromédia em Dezembro de 1997 na sua versão 1.0, atualmente está na sua versão CS5 e sendo atualizada as suas versões, desde a versão CS3, pela empresa de desenvolvimento Adobe Systens. Quando foi lançado ele era um simples editor de HTML, com funções básicas, e hoje ele é um potente editor de códigos que se interage com outros programas da sua família como: FireWorks, Flash, PhotoShop, e tem suporte para muitas linguagens de programação como: CSS, JavaScript, Ajax, Asp, PHP, JSP, entre outras linguagens, e vários scripts de servidor. Muitos programadores têm preconceito em usar este software por achar que ele deixa o código maior do que o necessário, mas ele da um praticidade por ter várias funções já prontas e conforme vai escrevendo o código ele tem a função autocompletar, fazendo com que o desenvolvedor crie seu código com mais rapidez e praticidade. E ele vem crescendo cada ano mais, e é um dos editores mais populares do mercado. O Dreamweaver tem conectividade com o banco de dados MySql, Access entre outros, ele permite que o usuário filtre e mostre conteúdos sem que ele tenha muita experiência em programação. O Dreamweaver permite uma visão previa do site na maioria dos navegadores, diminuindo erros ao abrir nos diferentes navegadores, possui também diversas ferramentas para se criar um WebSite. Além de ter uma porção de extensões que baixamos da internet e instalamos no computador, essas extensões são pequenos programas que tem as funções prontas que se interage com o Dreamweave, essas funções são normalmente feitas em JavaScript e HTML. O Dreamweaver tem em sua interface o modo Design, que em vez do desenvolvedor colocar códigos ele só vai montando a página pelas guias, menus e ferramentas, fazendo com que qualquer usuário sem experiencia possa criar uma página de Web, só que com isso o código fica muito sujo, dificil de visualização.

63 INTERFACE O Dreamweaver tem uma interface muito fácil e amigável que permite ao usuário criar de simples a complexos sites. A característica da interface do Dreamweaver permite ao usuário criar rapidamente páginas da web. Os elementos podem ser arrastados diretamente para o documento a partir de um painel de fácil utilização. O Dreamweaver fornece um layout integrado, onde todas as janelas e painéis estão em uma única janela Interface Inicial Ao abrir o Dreamweaver a janela inicial possui 3 colunas, na primeira serve para abrir ficheiros que já exista, a segunda mostra os tipos de ficheiros que podem ser criados, a terceira permite a criação de novas páginas ou folhas de estilo a partir de templates que vem no Dreanweaver. Figura 61 - Janela Inicial do Dreamweaver

64 Área de trabalho Figura 62 - Área de trabalho do Dreamweaver A interface do Dreamweaver é composta pelos menus superiores: File (Arquivo); View (Vizualizar); Insert (Inserir); Modify (Modificar); Text (Texto); Commands (Comandos); Site (Site); Window (Janela); Help (Ajuda). Abaixo se localiza o painel Insert. Ele permite trabalhar com vários tipos de objetos como tabelas, imagens, formulários, etc.

65 64 criar o layout. No meio localiza-se o corpo do documento propriamente dito, onde se irá Figura 63 - Barra da área de elaboração do código Barra de Ferramentas de Documento Code, Split & Desing - São os modos gráficos que podemos criar nossa página. Esses botões ficam na parte superior da área de trabalho do Dreamweaver. O primeiro botão Code poderá ver somente códigos da página. Figura 64 - Botão Code, mostra apenas o código interno da página

66 65 a de designer. O segundo botão Split tem as duas visualizações, tanto a de códigos quanto Figura 65 - Botão Split, mostra os dois modos de visualização, Códigos e Designer O terceiro botão Design terá somente visualização visual, modo gráfico. Figura 66 - Botão Design, mostra apenas o modo Designer Em qualquer das 3 opções podemos montar nossa página de Web. Título do Documento - Permite especificar um título para a página, que aparece na barra de título do navegador do espectador.

67 66 Não Navegador / verificar os erros - Fornece um menu de opções para a verificação de compatibilidade do navegador com a página. selecionada. Validate Markup - permite validar o documento atual ou uma tag File Management - Fornece um menu de opções de gerenciamento de arquivo para a página, incluindo um comando para carregar a página no seu servidor web. Preview / Debug in Browser - Permite visualizar a página no navegador que você selecionar. Refresh Design View - Atualiza o aspecto da página no modo de design depois de você ter feito alterações na vista Código. Opções de Visualização - Permite que você especifique configurações diferentes para a exibição atual. páginas. Visuais - permite utilizar diferentes recursos visuais para desenhar suas Se você não vê a barra de ferramentas do documento, abra o menu Exibir e selecione Barra de Ferramentas e, em seguida Documento.

68 Menu Arquivo Figura 67 - Menu Arquivo Novo - Quando vamos abrir uma nova página do Dreamweaver, clicamos em arquivo e depois em novo, irá abrir uma janela com opções de linguagens de um documento novo. Abrir - é o caminho que utilizaremos para abrir nossos documentos. anteriormente. Salvar - será utilizado para guardar nossos documentos já criados Salvar Como - é utilizado para guardar documentos ainda não existentes, ou seja, ao salvar-mos o documento pela primeira vez utilizamos o menu SALVAR COMO, e posteriormente utilizamos o menu salvar. Salvar Tudo - é muito importante, pois ele salva todas a páginas abertas no programa, se nós temos 5 páginas modificadas não é necessário salvar essas páginas individualmente, pode-se salvá-las todas simultaneamente no item salvar tudo.

69 68 Visualizar no navegador - este item nos da uma prévia de como está nossa página diretamente no navegador, geralmente o internet explorer, mas pode-se configurar outros navegadores, ex: netscape, opera etc Grupo de Painéis No grupo de painéis da direita se localizam as janelas CSS: CSS Styles (Estilos CSS) e Layers (Camadas); Application (Aplicação) e Tag inspector (Inspetor de tags) minimizadas e, finalmente, Files (arquivos). Os Grupos de painéis são exibidos verticalmente no lado direito da janela do Dreamweaver. Os grupos de painéis são conjunto de painéis e comandos relacionados você irá usar para desenhar suas páginas e publicar seu site. Um grupo de painel pode ser exibido juntamente com os outros grupos de painéis. Um painel aparece numa guia no painel quando o grupo é selecionado. Os comandos disponíveis nos grupos de painéis são muito mais amplos do que aqueles que você vai encontrar na barra Insert, que contém os comandos mais comuns do Dreamweaver. Figura 68 - Grupo de Painéis Cada painel inclui um menu de opções no canto superior direito, que contém opções adicionais no painel.

70 Painel Design Figura 69 - Painel Disign Há dois painéis no grupo do painel de design: Estilos CSS e camadas. Os estilos CSS são usados para manter os estilos no documento e criar e anexar folhas de estilo. O painel da camada mostra todas as camadas do documento aberto. Ele pode ser usado para bloquear ou desbloquear, reorganizar e renomear as camadas Painel Código Figura 70 - Painel Código

71 70 Você pode usar o grupo de painéis de código para trabalhar com o código no documento como HTML, JavaScript e ASP. Você pode gravar trechos de código usando o painel Snippets, que pode ser reutilizado mais tarde. O painel Referência contém HTML biblioteca de referência Painel Aplicação Figura 71 - Painel Aplicação O painel do aplicativo contém funções para incluir conteúdo dinâmico em suas páginas web. Você pode gerenciar as fontes de dados e definir conjuntos de registros e também adicionar comportamentos de servidor avançado.

72 Painel Tag Inspector Figura 72 - Painel Tag Todos os atributos de seus elementos de página são exibidos no Inspetor de tags. Você usa o Inspetor de tags para editar qualquer atributo da entidade HTML selecionada digitando na caixa do atributo correspondente. Outra maneira de fazer isso é selecionando a partir de um menu que aparece quando clicado dentro da caixa Painel Arquivos Figura 73 - Painel Arquivo

73 72 Painéis de Arquivos Ativos fazem parte do Painel de Arquivos do Grupo. O painel de arquivo é usado para gerenciar os arquivos do site, como fazer o download e upload de arquivos de e para o servidor web. Este painel também pode ser usado para definir novos sites e alternar entre vários sites Barra de Status A barra de status contém informação adicional sobre o documento. A barra de status está localizada na parte inferior da janela do documento. Figura 74 - Barra de Status Tag Selector - O seletor de tags mostra a hierarquia das marcas em torno da seleção. Você pode clicar em qualquer tag na hierarquia para selecionar a tag e todo seu conteúdo. Clicando no <body> seleciona todo o corpo do documento. Botão direito do mouse (Windows) ou clique com Control (Macintosh), selecione uma classe ou identificação entre os itens do menu de contexto para definir a classe ou atributos id de uma tag no seletor de tags. Ferramentas manuais - A ferramenta manual é usada para arrastar o documento. Ao clicar na ferramenta Select desactiva a ferramenta 'Mão'. Zoom Tool e Definir ampliação menu pop-up - A ferramenta de zoom e Definir ampliação menu pop-up permitem que você defina um nível de ampliação

74 73 para o documento. Ele pode ser usado para verificar a exatidão de pixel de gráficos, para selecionar os itens de pequeno porte mais facilmente, criar páginas com texto pequeno, criar páginas de grande porte, e assim por diante. Janela Tamanho menu pop-up - Tamanho da janela do menu pop-up permite que você redimensione a janela do documento com as dimensões predeterminado ou personalizado. Este menu só é visível no modo de exibição Design. A barra de status exibe as dimensões atuais da janela do documento (em pixels). A fim de criar uma página que parece melhor em um tamanho específico, você pode ajustar a janela do documento a qualquer um dos tamanhos predeterminados, editar esses tamanhos predefinidos ou criar novos tamanhos. Tamanho do Documento e Tempo estimado para download Isso mostra o tamanho do documento estimado e tempo estimado de download da página, incluindo todos os arquivos dependentes, como imagens e outros arquivos de mídia. O tamanho é calculado com base na totalidade do conteúdo da página, incluindo todos os objetos vinculados, como imagens e plugins. O tempo de download é estimado com base na velocidade de conexão entrou nas preferências da barra de status. Além das entidades de interface do usuário mostra a exibição padrão de interface do usuário, existem mais barras de ferramentas como o Código de Barra A, Estilo da barra de ferramentas de renderização e ferramentas como relatórios no Dreamweaver Barra de Ferramentas Coding A barra de ferramentas de codificação os botões são usados para executar muitas operações padrão de codificação, como destaque de código inválido, o colapso e a expansão de seleções de código, comentários edição, o recuo do código, a inserção de trechos de código utilizados recentemente, etc.

75 74 Figura 75 - Barra de Ferramentas Coding A barra de ferramentas de codificação é visível apenas na visualização do código e aparece na vertical no lado esquerdo da janela do documento Barra de Ferramentas Estilo processamento O estilo da barra de ferramentas de processamento está oculta por padrão. Ela contém botões que permite que você visualize seu projeto para diferentes tipos de mídia se você estiver usando folhas de estilo dependentes de mídia. O Estilo de renderização da barra de ferramentas contém um botão que permite ativar ou desativar estilos CSS. Para exibir a barra de ferramentas, selecione Exibir> Barras de ferramentas> Estilo de processamento.

76 75 Figura 76 - Barra de Ferramentas Estilo processamento Por padrão, o Dreamweaver mostra como uma página é processada em uma tela de computador. Há diferentes acepções tipo de mídia que pode ser visto clicando em seus respectivos botões dados no processamento Style Toolbar. Render Screen Media Type - visualizações da página como ela aparece na tela do computador. Render Print Media previews - a página como ela aparece em um pedaço de papel impresso. Render Handheld Media - visualizações da página como ela aparece em um dispositivo portátil, como um telefone móvel ou um dispositivo BlackBerry. Render Projeção Tipo de Mídia - visualizações da página como ela aparece em um dispositivo de projeção. Render tipo de mídia TTY - visualizações da página como ela aparece em uma máquina de teletipo. da televisão. Render TV MediaType - visualizações da página como ela aparece na tela

77 76 estilos CSS. Alternar exibição de estilos CSS - é usado para alternar a exibição de Relatórios no Dreamweaver - Relatórios no Dreamweaver pode ser usado para localizar o conteúdo ea solução de problemas ou testar o conteúdo. Existem vários tipos de relatórios que podem ser gerados. A busca pode ser usada para pesquisar marcas e atributos ou um texto específico dentro das tags. A validação é utilizada para checagem de erros de código ou de sintaxe. Target Browser Check é usado para testar o código HTML dos documentos para verificar se há marcas ou atributos que não são suportadas pelos navegadores de destino. Link Checker é usado para localizar e consertar links quebrados. Site relatórios são utilizados para melhorar o fluxo de trabalho e testes de atributos HTML no site. Há relatos de fluxo de trabalho que contém o check-out modificadas recentemente e projetos de informação notas. FTP log permite que você visualize o log de transferência de arquivos Barra Insert A barra Insert é a barra que carrega as ferramentas básicas e principais para criar uma página do Dreamweaver. Para encontrá-la clicamos no menu Window, opção Insert, ela contém guias e cada guia tem várias ferramentas. Figura 77 - Barra Insert

78 Guia Common A categoria padrão, que contém comandos para a adição de hiperlinks, tabelas, imagens e objetos multimídia. Vamos ver suas funções: Hiperlink - inserir link; Figura 78 - Janela de configuração de Hiperlink Text - permite a inserção de um texto a ser transformado num link. Link - deve ser preenchido com o endereço da página a ser mostrada quando este for clicado. Target - é um campo opcional que indica o local onde a página será mostrada. Title - permite definir um título para o link. Access Key - permite determinar uma tecla a ser utilizada pelo visitante para acionar o link. Tab Index - defini a ordem na qual os campos são selecionados. Link - link para ; Figura 79 - Janela de configuração de Link

79 78 Text - Preenchido com a palavra ou frase a transformar em link. - Preenchido com o endereço de propriamente dito, a transformar em link. outro qualquer; Ancora - Link para um lugar específico dentro do próprio documento ou Figura 80 - Janela de configuração de Ancora Inserir Tabela - Criar novas tabelas a sua página; Figura 81 - Janela de configuração de Tabela Rows e Columns - devem ser usados para indicar a quantidade de linhas e colunas que a tabela terá.

80 79 Table Width - deve ser usado para especificar a largura da tabela em pixéis ou percentagem em relação ao contexto onde está inserida. Border Thickness - permite a definição da largura da borda da tabela em pixéis. Cell Padding - deve ser usada para estipular em pixéis, a margem interna de uma célula da tabela. Cell Spacing - conterá o valor em pixéis relativo ao espaçamento entre células adjacentes. Header - cabeçalho.none (nenhum), Left (esquerda), Top (cimo) e Both (ambos: esquerda e cimo). Caption - permite a criação de uma legenda para a tabela. Align Caption - permite definir o alinhamento da legenda, consoante as opções default, top,bottom, left e right. Summary - possibilita a criação de um resumo ou sumário para explicar a tabela. Desenhar camada; Imagem - Inserir uma imagem; Figura 82 - Opções da Ferramenta Imagem

81 80 Image placeholder - Permite inserir um contentor na imagem. A sua finalidade é reservar o espaço no layout para uma imagem que ainda não se têm, mas que já se sabe o tamanho. Figura 83 - Janela de configuração de Image Placeholder mouse. Rollover Image - É uma imagem que muda de aspecto à passagem do Figura 84 - Janela de configuração de Rollover Image Fireworks HTML - FireWorks é um programa de edição de imagem. Podemos criar alguns efeitos exclusivos para Web. Figura 85 - Janela de configuração de Fireworks HTML

82 81 NAVIGATION BAR - Este comando permite criar menus de navegação interactivos nas suas páginas. Figura 86 - Janela de configuração de Vavigation Bar Nav BarElements - permite definir o número de itens totais do menu. Element Name - deverá definir um nome para representar um item do menu. Up Image, Over Image, Down Imagee Over While Down Image - devem ser preenchidas respectivamente com o nº de imagens que criou para representar os estados de cada um dos itens do menu, ou seja, o estado normal, o estado over, o estado down (clicado) e o estado overdepois de clicado (over while down). Show DownImage Initially - faz a imagem down ser a imagem mostrada, inicialmente, no menu. Insert - contém duas escolhas:horizontally e Vertically, que permitem a criação de menus horizontais ou verticais.

83 82 Média Figura 87 - Opções da Ferramenta Média Flash - insere um objeto em Flash na página. Flash Button - insere botões em FLASH na sua página HTML sem a necessidade de ter este programa no seu sistema. Figura 88 - Janela de configuração de Flash Button. Flash Text - insere um texto em Flash numa página HTML.

84 83 Figura 89 - Janela de configuração de Flash Text Shockwave, Java, ActiveX e Plug-ins - estes quatro botões permitem a inserção de objetos. Parameter - Quando insere uma imagem numa página, internamente no código da página são colocados tags que definem o nome do ficheiro da imagem, o tamanho e outros parâmetros. Estes parâmetros indicam ao browser de que forma a imagem deve ser colocada naquele ponto. Figura 90 - Janela de configuração de Parameter

85 84 data; Data - inserimos data na página da Web, podemos escolher o formato da Figura 91 - Janela de configuração de Data Server-Side Include - permite incluir no código da página, comandos. Os comandos desta classe podem executar tarefas e retornar resultados para que sejam visualizados no browser. da Web. Comentários - escrevemos comentários sobre algo que inserimos na página Head - colocamos no inicio da página em HTML, nela ficam definições do funcionamento de códigos em JavaScript, estilo da página em CSS, etc. Figura 92 - Opções da Ferramenta Head Meta - insere, no código da página, informações sobre o documento, para que sirvam como ferramenta de classificação ou identificação dos conteúdos.

86 85 Figura 93 - Janela de configuração de Meta Keywords - insere o tipo de tag utilizado pelos motores de busca, para definir as palavras-chave que têm relação com o documento. Figura 94 - Janela de configuração de Keywords Description - insere uma descrição sucinta do documento. Refresh - a função deste parâmetro é fazer com que a página automaticamente passe para outro endereço. Figura 95 - Janela de configuração de Refresh Base - todos os links existentes na página ficam vinculados a um endereço em particular e a um Target em especial.

87 86 Figura 96 - Janela de configuração de Base Link - estabelece uma relação entre o documento atual e outro. Figura 97 - Janela de configuração de Link página HTML. Scripts - permite a inserção de códigos em JavaScript ou VBScript na sua Figura 98 - Opções da Ferramenta Scripts No Script - serve para colocar uma mensagem a surgir para browsers que não possuam suporte a JavaScript ou VBScript.

88 87 Template Make Template - cria templates. Figura 99 - Janela de Salvar novo Template Site - se refere ao local onde sequer gravar o template. Existing Templates - mostra todos os templates que porventura existam definidos para o site em questão. Save as: permite definir um nome para o template a ser usado na gravação. outro. Make Nested Template - é um tipo especial de template feito a partir de Editable Region - desbloqueia áreas bloqueadas para que consiga editar e criar. Abrirá uma janela a informar que o documento será convertido a template e outra a seguir a perguntar por um nome a ser dado para a região.

89 88 Figura Janela de configuração de Região Optional Region - é uma região que poderá ser definida num template e que pode estar visível ou não ao utilizador final, conforme se defina durante a criação. Figura Janela de configuração de Opções de Região Basic - possui apenas dois campos. Name: nome para região. Show ByDefault: deixa a região previamente visível ao utilizador. Advanced - defini regiões opcionais, cuja visibilidade é vinculada a uma condição controlada por um parâmetro (Enter Expression). Repeating Region - poderá definir regiões repetitivas, ou seja, regiões que podem variar de tamanho.

90 89 Editable Optional Region - é uma região definida pelo criador do template, a qual pode aparecer ou não na página criada a partir do template, dependendo do desejo do utilizador, e que também pode ser modificada. Repeating Tables - uma função para criá-las de raiz, em vez de ter de criar primeiro uma tabela comum e depois transformá-la. Tag Chooser - é permitir ver todos os tags disponíveis, não só em HTML, como em outras opções, que fogem ao escopo deste livro, como CFML, ASP, ASP.NET, JSP, JRUN, PHP e WML Guia Layout É a segunda aba da barra Insert, é usado para projetar o layout da página, com a ajuda de comandos para tabelas, camadas e quadros. Figura Aba de Ferramentas de Layout Standard, Expanded Layout (normal, expandido e layout) - O primeiro coloca o Dreamweaver no modo normal. O segundo botão altera as tabelas e cria espaços adicionais entre as células e margens destas, para facilitar o trabalho de manipulação. O terceiro botão coloca o Dreamweaver num modo, no qual o utilizador tem plena liberdade para dispor os diversos elementos da sua página, que estão intuitivamente a ser ajustados numa tabela. Table - Criar tabelas no modo layout Frames - São divisões retangulares que podem ser feitas numa página de Internet, com a intenção de permitir a colocação de vários ficheiros HTML na mesma área de visualização.

91 90 Figura Figura de divisão de Frames Layout Table - inserção de linhas acima, abaixo, à esquerda e à direita. Draw Layout Cell - criar uma célula no modo Layout, inserção de novas linhas acima e abaixo da célula que se tem seleccionada e colunas à esquerda e à direita Guia Forms Formulários são objetos que inserimos na página que podem conter diversos tipos de elementos. Os formulários podem ser do tipo de caixa, botões, etc. Figura Aba de Ferramentas Forms Forms - é o contentor que é preciso inserir na página antes de colocar os outros elementos. Ele se comporta como uma caixa que abrigará todos os outros elementos do formulário e os isolará de outros possíveis objetos ou formulários que a página possa ter.

92 91 Figura Configuração de Propriedades de Forms Method e Enctype - estes campos têm relação à maneira que o formulário deverá codificar e enviar os dados ao servidor e estão vinculadas ao formato de dados esperado pelo programa relacionado ao formulário. TextField - é um campo que poderá utilizar para permitir a entrada de dados na forma de texto comum. Figura Caixa de TextField Figura Configuração de Propriedades de textfield HiddenField - é um campo que pode ser inserido num formulário e que não é visível ao utilizador. Serve para armazenar valores e variáveis no interior de um formulário que deverão passar ao programa vinculado no Action. Figura Configuração de Propriedades de HiddenField

93 92 TextArea: inserção de uma área de textos, e permite ao utilizador inserir mais informação do que seria possível pelo uso do TextField. Figura Caixa de TexArea. Figura Configuração de Propriedades de TexArea CheckBox - é um tipo especial de campo que permite a escolha de opções. Cada campo é independente do outro, permitindo ou não a sua marcação. Um CheckBox possui três propriedades essenciais: nome, valor que será enviado e o estado inicial. Figura Configuração de Propriedades de CheckBox RadioButton - é muito parecido com o CheckBox, a única diferença é que somente um RadioButton possa ser selecionado. Figura Configuração de Propriedades de RadioButton

94 93 Checked Value: define o valor que retornará se for o escolhido. RadioButtons. RadioGroup - funcionalidade criada para facilitar a criação de grupos de Figura Janela de configurações de Radio Group List/Menu - é uma função que permite inserir dois tipos diferentes de controles nos formulários: os Dropdown Menus e o List. Os Dropdown Menus são, a exemplo do RadioButton, controles que permitem apenas a escolha de uma opção, dentre uma lista apresentada. Porém, em vez de funcionar como uma série de objetos em grupo, já representa o próprio grupo em si. Figura Caixa de List/menu Figura Configuração de Propriedades de List/Menu List Values

95 94 JumpMenu - é um Dropdown Menu, que contém uma lista de URLs e permite a escolha direta de uma delas. Figura Caixa de JumpMenu do formulário. Image Field - permite a escolha de uma imagem para que esta seja o botão FileField - é um campo especial composto por um TextField e um Botão com a palavra browse que permite procurar e seleccionar um arquivo no computador. Figura Caixa de FileField Button - são os botões do formulário. Os botões podem ser de dois tipos: Submit (envia formulário) e Reset Form (limpa as informaçãoes já inseridas). Label - é um controle que permite associar de forma estrutural um determinado texto a um campo em específico. Figura Caixa de Label FieldSet - é um campo para a organização do formulário. É uma espécie de contentor para a colocação de elementos do mesmo grupo.

96 Guia Text A palheta de texto possui várias formatações de texto. Para abri-la clicamos na aba Test da barra Insert. Figura Aba de Ferramentas de Texto Funções das ferramentas de texto: Bold - Faz com que o texto selecionado apresente o estilo negrito. Italic - Faz com que o texto selecionado apresente o estilo itálico. Strong - Faz com que o texto selecionado apresente o estilo strong. Emphasis - Faz com que o texto selecionado apresente o estilo emphasis. Paragraph - Insere um parágrafo no texto. Block Quote - Indenta o texto no documento. Preformatted Text - Preformata o texto. É usada geralmente em textos que possuem o tamanho fixo. O estilo de fonte padrão utilizado no texto é o monospace e o mais importante deste comando é que ele preserva os espaços em branco ( ) que foram especificados no código fonte, sem precisar de utilzar o espaço em branco.

97 96 Heading 1 - Formata o texto com o cabeçalho no nível 1 sendo que o número após a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de mais destaque e o número seis o de menor destaque no texto. Heading 2 - Formata o texto com o cabeçalho no nível 2 sendo que o número após a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de mais destaque e o número seis o de menor destaque no texto. Heading 3 - Formata o texto com o cabeçalho no nível 3 sendo que o número após a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de maior destaque e o número seis o de menor destaque no texto. Unordened List - Cria uma lista de elementos sem algum tipo de ordem estabelecida. Após clicar no ícone, o Dreamweaver se encarrega de indentar e inserir no texto um marcador. O marcador padrão é um círculo, podendo ser alterado a qualquer momento no Property Inspector. Ordened List - Cria uma lista de elementos ordenados. Após clicar no ícone, o Dreamweaver se encarrega de indentar e inserir no texto um marcador numerado. O marcador padrão sãos os números radicais, podendo ser alterado a qualquer momento no Property Inspector. List Item - Cria mais um elemento pra lista. Se a lista for ordenada( OL ), o Dreamweaver insere um elemento com o número posterior ao já inserido antes. Caso contrário se for uma lista sem ordenação definida(ul), ele insere mais um marcador padrão utilizado podendo ser um círculo, um quadrado, um disco ou até mesmo uma imagem. Definition List - Define uma lista a ser utilizada. Este tipo de lista é muito útil quando se deseja, por exemplo, escrever um parágrafo de texto tabulado para a direita criando uma apresentação diferente e agradável de se ler! Definition Term - Define qual será o termo utilizado na lista, como se fosse um título a ser utilizado.

98 97 Definition Description - Descrição utilizada para o definir o termo. Abbreviation - Indica os significados de abreviações, como fax, Corp., Av., etc. Esse ícone não modifica a exibição das páginas HTML, mas fornece dados para mecanismos que interpretam dados em uma página, como sistemas de busca, corretores ortográficos, sintetizadores de voz e sistemas de tradução. Acronym - Indica os significados de acrônimos (uma abreviação formada pelas letras iniciais de uma frase ou grupo de palavras), como WWW, HTML, VB, SQL, etc. Line Break - Insere uma quebra de linha no texto. Você pode utilizar um atalho pressionando Shift+Enter. Non-Breaking Space - Insere um espaço em branco no texto. Left Right Quotes -Insere aspas duplas no texto. Left Right Quotes - Insere aspas duplas no texto. Em Dash - Insere um travessão no texto. Pound - Insere o símbolo da libra no texto. Euro - Insere o símbolo da euro no texto. Yen - Insere o símbolo do Yen no texto. Copyright - Insere o símbolo de proteção à cópia. Registered Trademark - Insere o símbolo de marca registrada no texto. Trademark - Insere o símbolo de marca registrada no texto.

99 98 Other Characters - Abre uma janela contendo todos os tipos de caracteres especiais existentes tais como é, ç e outros. Clique no botão correspondente ao caracter especial e o Dreaweaver irá apresentar o código na caixa de texto Insert e em seguida clique no botão ok para inserir no texto Guia Favorites A aba Favorites é a ultima aba da barra do Insert, nesta ferramenta podemos inserir os comandos que são mais utilizados pelo desenvolvedor, assim terá acesso com mais rapidez. Para configurar a ferramenta Favoritos, clicamos com o botão direito do mouse em cima da barra de favoritos, e clicamos em Customize Favorites. Figura Aba de Ferramentas Favoritos Na coluna da esquerda temos funções existentes no Dreamweaver, que podem ser transferidas para a coluna da direita, e assim ficarão fixadas em favoritos. As ferramentas ficarão fixadas na ordem que forem sendo escolhidas. Figura Janela de configuração da Ferramenta Favoritos

100 PROPRIEDADES Propriedades de Texto Figura Configuração de Propriedades de Texto Format - Escolha o tipo de formatação para heading, parágrafo, etc. Font - Escolha a fonte (letra) a ser utilizada. Style - Estilos Css já prontos. Size - O tamanho da fonte em points, pixels, cm, mm etc... (na caixa ao lado) B - Negrito I - Itálico O quadrado em baixo do B e do I altera a cor da font. Ao lado, temos na parte superior o estilo de centralização: left, right, etc.. Na parte inferior, temos a opçao lista, que irá colocar o texto como lista Link - Adiciona um link ao texto selecionado Target - Ao clicar no link, ele se abrirá em outra página (_blank), na mesma página e assim por diante Propriedades de Tabela Ao criar uma tabela ao selecionarmos ela ou uma parte dela, podemos fazer alterações nas propriedades da tabela. Veremos a seguir as funções de suas ferramentas:

101 100 Figura Configuração de Propriedades de Tabela Table id - O id da tabela (identificação). Rows - Número de linhas que conterá a tabela. Cols - Número de colunas. W - Tamanho da largura da tabela em % ou Pixels. H - Tamanho da altura da tabela em % ou Pixels. O Cellpad e Cellspace - irá mexer nas bordas da tabela, distância, etc. Align - Alinhamento da tabela: esquerda, direita e meio. Class - Aplicar um Css já pronto na tabela. Bgcolor - cor do fundo da tabela. Brdcolor - Cor da borda da tabela. Bimage - imagem de fundo, como background Propriedades de Página Para acessar as propriedades da página aperte a tecla Ctrl + J. A seguir veremos suas funções: Figura Configuração de Propriedades de Página

102 101 Page font - Você escolhe uma fonte para ser usada em sua página. Size - O tamanho dessa fonte. Text color - Altera a cor da font. Background color - Cor do fundo da página. Background image - Escolha uma imagem de fundo para sua página. Left margin - Altera a distância da margem esquerda. Topo margin - Altera a distância do topo da página Right margin - Altera a distância da margem direita. Bottom margim - Altera a distância do rodapé Propriedades de Imagem Figura Configuração de Propriedades de Imagem SRC(source) - indicar o nome e o directório do ficheiro da imagem. Link - deverá definir uma página ou endereço de Internet para vincular à imagem. Target - escolhe a área da página onde esta será visualizada. Alt (alternate) - permite definir um texto a ser mostrado quando a página for vista em browsers quenão suportem a visualização de imagens. Vspace e Hspace - permitem definir um valor em pixéis que corresponderá à distância, horizontal evertical, em relação à qual, a imagem será inserida. Lowsrc (LowResolution Source Image) - é um campo no qual se pode definir uma imagem em baixa resolução a ser mostrada antes da imagem definida em SRC. Border - define em pixels a espessura da borda da imagem.

103 102 Alinhamento - ajusta o alinhamento da imagem, à esquerda, centro e à direita em relação ao contexto onde está inserida. Align - dentro desta caixa do tipo dropdown, pode ver as seguintes opções: Baseline, Top, Middle,Bottom, Text Top, Absolute Middle, Absolute Bottom, Left e Right. Todas estas opções indicam o tipo de alinhamento que a imagem terá. Figura Ferramentas de Edição de Imagem EDIT e OPTIMIZE IN FIREWORKS - Estes dois comandos, equivalentes aos primeiros botões, enviam a imagem para edição e optimização no programa da Macromedia para este fim, ou seja, Macromedia Fireworks. Crop - realiza um corte às aparas da imagem. Resample - transforma o ficheiro original de uma imagem alterada em tamanho para que corresponda à imagem no novo aspecto. Brigtness & Contrast - Este botão permite o ajuste do brilho e contraste. Figura Janela de Configuração de Brilho e Contraste Sharpen - é o processo pelo qual é possível alterar a nitidez de uma.

104 103 Figura Janela de Configuração de Nitidez Propriedades do Flash Para acessar as propriedades do Flash é só selecionar o seu arquivo em Flash no Dreamweaver. Figura Configuração de Propriedades de Flash Loop e Autoplay - regula a animação repete-se, indefinidamente, e se começa de forma automática, respectivamente. Vspace e Hspace - ajusta a distância em pixéis da animação em relação à vertical e horizontal ao contexto onde está inserida. Quality - ajusta a qualidade do flash de acordo com a máquina que pode ser: Low (sempre mostra em baixa qualidade), Autolow (vai aumentando a qualidade de acordo com a potencia da máquina), Autohigh (vai diminuindo a qualidades de acorod com a potencia da maquina) e High (a animação sempre é vista em alta qualidade). Scale - ajusta as opções de escala do filme em Flash em relação aos valores definidos em W e H. Edit - estará visível se tiver o Flash estalado no computador e permite editar a sua animação. Reset Size - o objeto voltar ao seu tamanho original.

105 104 Play - coloca o objeto no modo como será visualizado no browser. Parameters: permite a criação de parâmetros adicionais ao código HTML do objeto FLASH. 3.3 INTEGRAÇÃO Para simplificar o fluxo e poupar tempo do trabalho do desenvolvedor, o Dreamweaver faz integração com alguns programas de desenvolvimento pra Web como: Photoshop, Fireworks, Flash, InDesign, etc. Para que haja uma integração temos que ter os programas instalados no mesmo computador. Você pode inserir facilmente imagens e conteúdo criados com o Adobe Flash (arquivos SWF e FLV) em um documento do Dreamweaver. Você também pode editar uma imagem ou arquivo SWF no editor original depois de inseri-los em um documento do Dreamweaver, e as atualizações dos códigos são transferidas corretamente. Texto. (Sobre a Integração do Photoshop, Flash e Fireworks. Em: <http://help.adobe.com/pt_br/dreamweaver/cs/using/wsc78c5058ca073340dcda91 10b1f693f21-7ae0a.html>. Acesso em: 08 Novembro 2010). Uma das funcionalidades mais usadas com este recurso é a edição de imagem. Para fazermos a utilização dessa propriedade clicamos na imagem que está inserida no Dreamweaver e logo abaixo em propriedades tem um botão de Edição do Fireworks. Figura Botão de Edição do Fireworks Após clicar no botão de edição do Fireworks a imagem abrirá automaticamente dentro do programa Fireworks, para podermos fazer as alterações.

106 105 Ao terminar de editar no Fireworks a imagem, tem uma ferramenta chamada Done no Fireworks, que ao clicar nela, o Fireworks devolve a imagem modificada ao Dreamweaver. Figura Programa de Edição de Imagem Fireworks 3.4 VERSÕES O Dreamweaver possui várias versões, a sua primeira versão foi lançada em 08 de dezembro de 1997 o Dreamweaver 1.0. As versões mais antigas eram fabricadas pela empresa de desenvolvimento Macromédia e as atuais são fabricadas pela empresa de desenvolvimento Adobe. Suas versões iniciais serviam como um simples editor HTML WYSIWYG ("What You See Is What You Get", ou "O que você vê é o que você tem"), porém as suas versões posteriores incorporaram um notável suporte para várias tecnologias web, tais como XHTML, CSS, JavaScript, Ajax, PHP, ASP, ASP.NET, JSP, ColdFusion e outras linguagens Server-side. Texto. (Dreamweaver. Em: <http://www.oficinadanet.com.br/apostilas/71/dreamweaver>. Acesso em: 10 Novembro 2010). MACROMÉDIA: Dreamweaver 1.0 (Dezembro de 1997) Dreamweaver 1.2 (Março de 1998) Dreamweaver 3.0 (Dezembro de 1999) Dreamweaver UltraDev 1.0 (Junho de 2000) Dreamweaver 4.0 (Dezembro de 2000) Dreamweaver UltraDev 4.0 (Dezembro de 2000) Dreamweaver MX (Maio de 2002)

107 106 Dreamweaver MX 2004 (10 de Setembro de 2003) Dreamweaver 8 (13 de Setembro de 2005) ADOBE: Dreamweaver CS3 (16 de abril de 2007) Dreamweaver CS4 (23 de Setembro de 2008) Dreamweaver CS5 (12 de Abril de 2010) Processo de evolução recente Dreamweaver MX A versão do Dreamweaver MX foi a ultima versão com tradução para o português. Essa versão trouxe ferramentas de criação de conteudo dinamico, fazendo com que usuarios sem conhecimento em programação consigam se conectar a banco de dados para filtrar informações Dreamweaver 8 Ultima versão do Dreamweaver feita pela empresa de desenvolvimento Macromedia, essa versão teve uma melhora muito grande nas funções já utilizadas na versão MX e correções de erros em comportamentos de servidores. Sua principal novidade foi o surgimento da extensão Ajax ToolBox, pois trouxe a ferramenta suporte a alguns conceitos básicos de Ajax Dreamweaver CS3 Essa versão traz o framework Spry, que é um framework para desenvolvimento de Ajax, para a criação de páginas em Ajax, com ele criamos menus dinâmicos, componentes de validação de formulários, etc.

108 107 O framework Spry permite ainda aplicar efeitos como fade e reduzir ou ampliar imagens. Tudo é feito visualmente, sem a necessidade de lidar diretamente com código.passando assim a ser preferência desde simples usuarios da internet que desejam ter sua Home Page ate a experientes programdores de web sites. Texto. (GAY, Jonathan. Dreamweaver CS3. Em: <http://institutoweb.com/materias.php>. Acesso em: 10 Novembro 2010). Essa versão trouxe uma ferramenta poderosa de verificação de browser indicando os problemas de compatibilidade entre os navegadores. Também veio com uma grande quantidade de layouts baseando-se em possiveis erros no código causado pelos programadores, o erro é mostrado atraves de um aleta com link direcionando para o site da adobe Dreamweaver CS4 Essa versão vem com seu layout totalmente modificado, para que os profissionais possam ter facilidade ao trabalhar com essa ferramenta. As novidades por default, da versão se destacam: Dicas de código para estruturas Ajax e JavaScript Integração do Subversion Conjuntos de dados HTML Práticas recomendadas para CSS Todo o tipo de formatação e posicionamento agora é feito por CSS usando id de tags por default Outras novidades são as novas extensões que fazem a integração com framework consagrados. Destacando-se: Integração com JQuery frameworks Integração com YUI frameworks Integração com Google Web ToolKit

109 Dreamweaver CS5 O Dreamweaver CS5 tem o seu layout muito parecido com a versão anterior que é o Dreamweaver CS4. Ao todo são cinco tipos de pacotes disponíveis nessa versão que são elas: Master Collection, Design Premium, Design Standard, Web Premium e Production Premium. A grande novidade dessa versão foi o Flash Player 10.1 e Adobe AIR 2 que promete a criação de novos conteúdos e aplicativos gráficos para web. 3.5 VANTAGENS DE SE USAR O DREAMWEAVER Muitas pessoas têm preconceito de usar o Dreamweaver, principalmente os programadores que já estão acostumados a lidar com outros editores, e acabam tendo uma visão errada com esta ferramenta. Vamos ver umas vantagens que esse editor de códigos ajuda os desenvolvedores: Auto-completar A funcionalidade de auto-completar faz com que a elaboração dos códigos fique mais rápido e produtivo, como acontece isso? Começamos a escrever o código e ele vai dando opções de complementação do que estamos escrevendo e é só clicar na opção desejada. Vários editores têm essa funcionalidade de autocompletar, o diferencial do Dreamweaver é que ele busca id s e classes definidas na folha de estilos linkada ao documento, o que quase sempre é muito útil. Uma grande funcionalidade de auto- completar também é no fechamento das tags, logo quando abrimos uma tag ele já a fecha Gerenciamento de sites Podemos manusear sites através do Dreamweaver, através do Manage Sites, podemos fazer isso com sites armazenados localmente ou remotamente, tanto

110 109 em outro computador da rede quanto em um servidor on-line. Também é possível especificar o modelo de servidor do site, como por exemplo PHP MySQL, ASP.NET, JSP, etc. também com acesso local ou via FTP. Outra funcionalidade é que quando fazemos mudanças no nome de algum arquivo ou pasta, ele pergunta se queremos atualizar os links contidos nos documentos e ele atualiza automaticamente os links do site inteiro Find/Replace robusto Permitem várias combinações, incluindo uso de expressões regulares, busca por tags específicas, busca por textos específicos dentro de tags específicas, busca no documento atual, em todos os arquivos do site atual, todos os arquivos abertos, todos os arquivos de uma pasta específica, etc. 3.6 EXTENSÕES DO DREAMWEAVER Extensões são funcionalidades que acrescentamos ao programa, Dreamweaver, para que seja feito com mais rapidez e com apenas uns cliques alguns efeitos, estilos, funções, etc. As extensões devem ser instaladas para que possa ser utilizadas e para instalar é só dar dois cliques nela. As extensões são em arquivos.mxp. Figura Modo de Visualização das Extensões

111 110 Algumas extensões do Dreamweaver e suas funções: Gradient - coloca um texto gradiente; Alpha Color Harmony - auxilia no gerenciamento das cores; Wintimer - fecha uma janela popup depois de um tempo prédeterminado; ListO-Rama - cria um menu muito facilmente; ICQ_Status - determina o status do ICQ; FormButtonFever - transfiorma qualquer objeto em um botão submit ou resete em um formulário; OpacitySuite - faz com uma uma Layer vá desaparecendo aos poucos; Marquee - cria um efeito marquee; Hex Converter - converte uma cor #FFFFFF para RGB (255,255,0); Banner Image Builder - cria efeitos de transição em Imagens; DWLCounter110 - contador de downloads; ZeroPageBorders - insere ; LiveClock2 - insere a hora no site; DateStamp - insere a hora e a data no site; DateInsert - insere a data no site; RandonLink - link sem #; Layer Transition - diversos efeitos interessantes em Layer; ClosePopUpWindows - fecha uma popup com um link; SmartLink - OpenBrowseWindow com mais recursos; AnimateWindow - abre uma janela com uma animação e tamanhos definidos; RomanianCharacteris - insere caracteres em Romano; MFX_FullScreen - abre uma janela full; AditionalFramesets - adiciona mais opçõse de Framesets; ZoomBrowserWindow - abre uma nova janela em zoom + (só funciona no IE); RealNetworks - insere multimidia Real; Estados - insere em um formulário todos os Estados Brasileiros;

112 111 MenuBuilder - cria um menu de salto com mais opções; CN_Insert_Greating - insere bom dia, boa tarde e boa noite; flexxautoscroll - cria uma scroll; Simple_Quizer - cria um sistema de pergunta em múltipla escolha; p7jumpmenu - um jump menu com mais opções; Scroll_Status_Bar - insere uma scroll na barra de status; FastLinkStyles123 - insere estilo CSS em Link (cor e sublihando) facilmente; OpenPictureWindow - insere uma popup com as dimensões exatas de uma figura; MatchSymbols - insere mais símbolos; Adv_ _link - cria um link para com a mensagem editável; WrithersSymbols - insere mais símbolos; Abrir_Janela_Popup - igual OpenBrowserWindow acrescentando a dostancia da marge esquerda e do topo; UltimateWindow - OpenBrowserWindow com posição ao no centro; P7_autoHide - menu rollever; P7_autoLayers - menu rollover; SimpleVII_menu - menu rollover; PD_Iframe_object - cria uma iframe com todas as configurações; advrandimage3 - cria vários efeitos em imagens; LayerAnimagic altera o posicionamento de uma Layer com um evento; CloseChildWindow - cria um texto, botão ou imagem para fechar a janela; Go_Back_or_Forward - insere um link de adiantar ou de voltar; flevslidediv220 - insere movimento a uma layer bem interessante; adtofavoritesbh - adiciona aos favoritos; PHP_upload - cria uma opção de upload em PHP; ChromelessWin - cria uma janela chomeless no IE; Gradient_Background1 - insere um efeito gradiente; QuickLinkAnchors - edita as ancoras facilmente;

113 112 Zindex_of_layers altera os z-index das layers facilmente; FX_DWLCounter insere um contador de downloads; FX_Counter insere um contador de visitas; ChangeCase troca a caixa de seu texto (alta para baixa e vice-versa); Transition efeito de transição de páginas (somente IE); DMXS-01 remove recordsets duplicados; Auto Copyright insere Copyright com o corrente ano automaticamente; dhtml SlideShow FullSize in Popup cria thumbnails que são passados em um click e ao ser clicado abre uma popup com a imagem aumentada; dhtml SlideShow FullSize in Page cria thumbnails que são passados em um click e ao ser clicado abre a imagem aumentada no documento corrente; dhtml SlideShow cria um SlideShow com imagens e um link para página anterior; dhtml Scrollable Area cria uma scroll; Previous Page Link cria um link para a página anterior; Select Layer seleciona rapidamente uma determinada layer; Print cria um link para impressão (texto, botão ou imagem); FavIcons insere um link para sua página.

114 UTILIZAÇÃO DAS FERRAMENTAS PARA WEB EM UM SISTEMA Foi projetado um Sistema de Carimbos para Web, esse sistema foi feito para controlar as finanças e as vendas da empresa. O seu Layout foi todo projetado no editor de Imagem Photoshop, após a sua elaboração suas imagens foi cortada e salva para Web. Essas ferramentas são muito úteis, pois ele recorta de uma vez só todas as imagens e na hora de salvar, já salva como página HTML com as tabelas já prontas e as imagens em uma pasta separada. Com a página em HTML já pronta com as imagens, fica muito mais fácil de inserir os códigos ao abrir essa página feita pelo Photoshop no Dreamweaver. Esse cadastro possui as seguintes telas: Cadastro de Clientes, Dados do Cliente, Cadastro de Vendas, Ferramenta de Busca, Fornecedores, Financeiro, Estoque, Nota Fiscal, Relatório de Ordem de Serviço, 4.1 CADASTRO DE CLIENTES Foi utilizado o formulario textfield para inserir os dados e os botões Submit (Cadastrar) e Reset (Limpar). A tela de cadastro de clientes recebe os seguintes dados: Nome da empresa; Nome do comprador; Endereço; Bairro; Cidade; Telefone; .

115 114 Figura Tela de Cadastro de Clientes cliente. Na tela de dados do Cliente, podemos incluir débitos, alterar dados, e excluir Figura Tela com os dados dos Clientes, podendo fazer alterações 4.2 Cadastro de Venda Foi utilizado o formulario textfield para inserir os dados. A tela de cadastro de venda recebe os seguintes dados: Data emissão; Cliente;

116 115 Endereço; Cidade; Telefone; Quantidade; Produto; Valor Unitário; Valor Total. Figura Tela de Cadastro de Vendas 4.3 Busca de clientes O site tem uma ferramenta de busca com 3 tipos. Para fazer a busca, digitamos o que queremos encontrar, selecionamos o circulo correspondente ao tipo de busca, que pode ser: Financeiro, nova venda e buscar venda e apertar a tecla enter. Foi utilizado a ferramenta de TextField e RadioButton no programa Dreamweaver. Figura Ferramenta de Busca

117 Lista de ordem de serviço A lista de ordem de serviço em aberto, serve para termos um controle dos produtos que não foram entregues ainda, e quanto o cliente tem em crédito com a empresa. Ela possui um Radio Button para dizer se já foi feita a entrega do produto, um botão para fazer Alteração e um para Excluir. Figura Tela de Lista de Ordens de Serviços 4.5 Notas fiscais A nota Fiscal já é impressa com os produtos vendidos e os dados do cliente e da Empresa, temos um botão para Imprimir esta Nota e depois é só carimbar e assinar ela, como o sistema já preenche ela inteira, facilita muito o trabalho do funcionário da empresa.

118 117 Figura Tela de Nota Fiscal 4.6 Débitos em aberto Esta Lista mostra quanto os clientes estão devendo para a empresa, mostra o valor de cada um. Figura Tela de Débitos em Aberto 4.7 Relatorio de vendas do dia Esta Lista mostra todas as vendas feitas em um determinado dia, possui uma ferramenta para buscar o dia solicitado, e aparecerá a hora da venda, o cliente que efetuou a compra, quantidades de produtos e o valor total da compra.

119 Figura Tela de Relatórios de Vendas do Dia 118

PHOTOSHOP. Menus. Caixa de Ferramentas:

PHOTOSHOP. Menus. Caixa de Ferramentas: PHOTOSHOP Universidade de Caxias do Sul O Photoshop 5.0 é um programa grande e complexo, é o mais usado e preferido pelos especialistas em editoração e computação gráfica para linha PC. Outros programas

Leia mais

CURSO PHOTOSHOP PARA FOTÓGRAFOS

CURSO PHOTOSHOP PARA FOTÓGRAFOS Capítulo 1 Introdução Introdução Faça suas próprias fotos ao longo do curso A fotografia e o Photoshop Capítulo 2 Dicas para obter sucesso com o Photoshop Você precisa conhecer tão bem de fotografia quanto

Leia mais

[CURSO DE FÉRIAS FIREWORKS] JULHO / 2011

[CURSO DE FÉRIAS FIREWORKS] JULHO / 2011 Conteúdo 1. OBJETIVO DO FIREWORKS... 2 1.1 - Diferença entre imagem Vetorial e Bitmap... 2 1.2 - Formato de Arquivos... 3 2. AMBIENTE DO FIREWORKS... 3 2.1 - INICIANDO UM PROJETO... 4 3. DESENHANDO NO

Leia mais

Recortar esta imagem com a Polygonal Lasso Tool seria uma tarefa maçante e tediosa. 1. Edição de imagens: Fundo da. imagem

Recortar esta imagem com a Polygonal Lasso Tool seria uma tarefa maçante e tediosa. 1. Edição de imagens: Fundo da. imagem 1 1. Edição de imagens: Fundo da imagem. O que eu, comumente, percebo é que para selecionar um objeto de interesse na imagem é quase que automático e unânime utilizar a ferramenta Polygonal Lasso Tool.

Leia mais

Pré-requisitos para fazer este curso É necessário possuir conhecimentos em informática básica, internet e muita vontade para aprender.

Pré-requisitos para fazer este curso É necessário possuir conhecimentos em informática básica, internet e muita vontade para aprender. Descrição do curso O curso de Edição Profissional de Imagens com o Photoshop CS6 Extended foi desenvolvido para que o aluno obtenha todas as habilidades necessárias para, ao final do mesmo, ser capaz de

Leia mais

Abra um novo documento com tamanho 468x60 e adicione um fundo na cor branca, vamos montar a primeira moldura do nosso banner.

Abra um novo documento com tamanho 468x60 e adicione um fundo na cor branca, vamos montar a primeira moldura do nosso banner. FIREWORKS 1- BANNER ANIMADO - banner tamanho 468 x 60px (full banner). Abra um novo documento com tamanho 468x60 e adicione um fundo na cor branca, vamos montar a primeira moldura do nosso banner. Agora

Leia mais

Conceitos do Photoshop. Bitmap image Formatos de arquivos Memória Escalas de cores

Conceitos do Photoshop. Bitmap image Formatos de arquivos Memória Escalas de cores Conceitos do Photoshop Bitmap image Formatos de arquivos Memória Escalas de cores Bitmap Image Conceito de pixel Imagem bitmap x imagem vetorial Pixel x bits Resolução de tela e imagem 72 pixel/inch 300

Leia mais

Textos com o Photoshop

Textos com o Photoshop Textos com o Photoshop Texto 1 Efeito Glow 1 Criar nova imagem em formato RGB 2 Aplicar cor ao fundo 3 Selecionar a ferramenta "Horizontal Type Mask Tool" e escrever o seu texto (usar no mínimo fonte tamanho

Leia mais

Atalhos (Shortcuts) Paletas e recursos extras

Atalhos (Shortcuts) Paletas e recursos extras Atalhos (Shortcuts) Aqui estarão listados alguns dos atalhos mais importantes do Photoshop. Se você trabalha com a plataforma MAC basta substituir o Ctrl por Command e o Alt por Option. Você também pode

Leia mais

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Designer Gráfico APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1... 3 Apresentação do Photoshop... 3 Barra de Menus... 3 Barra de Opções... 3 Barra de Ferramentas...4

Leia mais

No nosso exemplo, utilizámos apenas um braço e uma perna, que

No nosso exemplo, utilizámos apenas um braço e uma perna, que 1. Seleccione agora cada uma das camadas na janela Layers; 2. Escolha a Move Tool na barra de ferramentas e, com ela, posicione cada parte do alienígena, até ter algo como o visto na figura 4.56. Fig.

Leia mais

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo.

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo. O que é o Gimp? O GIMP é um editor de imagens e fotografias. Seus usos incluem criar gráficos e logotipos, redimensionar fotos, alterar cores, combinar imagens utilizando o paradigma de camadas, remover

Leia mais

Prática 2 Características do Flash

Prática 2 Características do Flash Prática 2 Características do Flash 1. Objetivos Se familiarizar com os Painéis, Frames e Timelines. Desenvolver uma animação simples. 2. Recursos Necessários Computador com o programa Macromedia Flash

Leia mais

PS02_02-08: Exercícios: Photoshop CS3. Objetivo: FERRAMENTAS DE PINTURA. 1) Abra um novo arquivo e altere os valores para a seguinte configuração:

PS02_02-08: Exercícios: Photoshop CS3. Objetivo: FERRAMENTAS DE PINTURA. 1) Abra um novo arquivo e altere os valores para a seguinte configuração: PS02_02-08: Objetivo: FERRAMENTAS DE PINTURA Exercícios: 1) Abra um novo arquivo e altere os valores para a seguinte configuração: 2) Finalize a configuração. A janela da imagem, também chamada de tela

Leia mais

COREL PHOTO-PAINT 10. Editar uma imagem digitalizada. Rodar ou Cortar uma imagem. Corrigir a Luminosidade e o Contraste de uma imagem

COREL PHOTO-PAINT 10. Editar uma imagem digitalizada. Rodar ou Cortar uma imagem. Corrigir a Luminosidade e o Contraste de uma imagem 10 Editar uma imagem digitalizada Após a digitalização de uma imagem pode-se fazer uma série de correcções no Photo-Paint rodar ou cortar a imagem, trabalhar a luz ou a cor, converter para outro formato,

Leia mais

Curso Especializado Design Gráfico

Curso Especializado Design Gráfico Curso Especializado Design Gráfico 87 horas Descrição: Este pacote de formação é composto pelos programas essenciais e indispensáveis a todos os Designers Gráficos que pretendam compreender os processos

Leia mais

MANUAL Photo Álbum photo design software

MANUAL Photo Álbum photo design software MANUAL Photo Álbum photo design sowtware MANUAL Photo Álbum photo design software ÍNDICE 1. Requisitos mínimos de sistema...4 2. Guia de instalação...4 5. Caixa de edição...14 5.1. Pictures (Fotos)...14

Leia mais

BrOffice.org - Impress

BrOffice.org - Impress BrOffice.org Impress 1 BrOffice.org - Impress Programa de apresentação, utilizado para criação e manipulação de slides. Os slides criados para uma eletrônica podem conter texto, gráficos, objetos, formas,

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3 PHOTOSHOP CS5 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série... 3 01 - BOTÃO TRABALHADO... 3 02 - MUDANDO A COR DE CABELOS... 8 03 - QUEBRA CABEÇA... 11 04 TRATAMENTOS DE PELE... 16 05 MINI BOTÕES - WEB...

Leia mais

ROBERTO OLIVEIRA CUNHA

ROBERTO OLIVEIRA CUNHA LEIAME Nenhuma informação do TUTORIAL DO PHOTO- SHOP CS 8.0 poderá ser copiada, movida ou modificada sem autorização prévia e escrita do Programador Roberto Oliveira Cunha. Programador: Roberto Oliveira

Leia mais

Fechamento de Arquivo Preparando arquivos para Impressão Arquivos.PDF Criando PDF s a partir do Illustrator Visualizando PDF`s Imprimindo o documento

Fechamento de Arquivo Preparando arquivos para Impressão Arquivos.PDF Criando PDF s a partir do Illustrator Visualizando PDF`s Imprimindo o documento Designer Gráfico (Carga horária: 60hs) Adobe Ilustrador CS4 O objetivo do curso de Design Gráfico(Photoshop/Illustrator/Indesign) é iniciá-lo no mercado de trabalho na área de criação e design de materiais

Leia mais

Acesso do teclado à faixa de opções

Acesso do teclado à faixa de opções Excel > Acessibilidade Atalhos do teclado no Excel 2010 Ocultar tudo Este artigo descreve o que são Dicas de Teclado e como você pode usá-las para acessar a faixa de opções. Ele também lista as teclas

Leia mais

EDITORES GRÁFICOS CAPÍTULO 7. Definição

EDITORES GRÁFICOS CAPÍTULO 7. Definição CAPÍTULO 7 EDITORES GRÁFICOS Definição É um programa destinado a editar imagens digitalizadas usando o computador. Sua função básica é permitir editar os pontos da imagem, alterando cor, contraste, resolução,

Leia mais

Fotografia Digital. Aula 1

Fotografia Digital. Aula 1 Fotografia Digital Aula 1 FOTOGRAFIA DIGITAL Tema da aula: A Fotografia 2 A FOTOGRAFIA A palavra Fotografia vem do grego φως [fós] ("luz"), e γραφις [grafis] ("estilo", "pincel") ou γραφη grafê, e significa

Leia mais

Lição 5 Adobe Photoshop CS5. Trabalhe com máscaras e canais

Lição 5 Adobe Photoshop CS5. Trabalhe com máscaras e canais Lição 5 Adobe Photoshop CS5 Trabalhe com máscaras e canais CENTRO DE ENSINO SUPERIOR DO AMAPÁ O Photoshop mascara e protege partes isoladas de uma imagem da mesma maneira que a fita adesiva protege o painel

Leia mais

Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula

Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Fireworks CS5 Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula 1.1. Novidades do Fireworks CS5...23 1.2. Área de Trabalho...24 1.2.1. Painel Ferramentas...25 1.2.2.

Leia mais

NAPNE / RENAPI. Google SketchUp 8

NAPNE / RENAPI. Google SketchUp 8 NAPNE / RENAPI Google SketchUp 8 Agosto de 2011 Sumário 1 Introdução... 4 2 Requisitos básicos... 4 3 Itens... 4 3.1 Assista os tutoriais em vídeo... 5 3.2 Leia dicas e truques... 6 3.3 Visite a Central

Leia mais

Curso de Adobe Illustrator CS4

Curso de Adobe Illustrator CS4 Curso de Adobe Illustrator CS4 Apresentação do Programa O Adobe Illustrator CS4 é um programa de desenho e ilustração vectorial, que coloca à disposição dos profissionais poderosas ferramentas para a concepção

Leia mais

Conteúdo Programático do Photo Shop

Conteúdo Programático do Photo Shop O Ambiente Adobe Photoshop Conteúdo Programático do Photo Shop Características das Imagens Imagens Vetoriais e de Bitmap Tamanho e Resolução de Imagens Modos de Cores Formatos de Arquivo A Iniciação de

Leia mais

(Ilustração gerada no Sodipodi, tratada no gimp, Documento gerado no OpenOffice)

(Ilustração gerada no Sodipodi, tratada no gimp, Documento gerado no OpenOffice) (Ilustração gerada no Sodipodi, tratada no gimp, Documento gerado no OpenOffice) Tutorial Sodipoi Autor: Alexandre da silva costa Anakinpendragon (anakinpendragon@yahoo.com.br) Esse tutorial vem para

Leia mais

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor i.exe FrontPage Criação de Home Page s PPaaggi innaa 1 Sobre FrontPage Parte 1 Front Page é uma ferramenta para criação e gerenciamento de web s.o aluno não necessita de nenhum conhecimento de programação

Leia mais

Introdução ao Adobe Photoshop CS4

Introdução ao Adobe Photoshop CS4 Conhecendo o Photoshop CS4 Introdução ao Adobe Photoshop CS4 Profa. Flávia Pereira de Carvalho O Adobe Photoshop é um programa de edição de imagem um editor de imagem. É um software específico para o tratamento

Leia mais

Tour pela área de trabalho

Tour pela área de trabalho Tour pela área de trabalho Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Neste tutorial, você se familiarizará com a terminologia

Leia mais

Quatro para três (4:3): vou virar freguês!

Quatro para três (4:3): vou virar freguês! Uma breve introdução ao Photoshop. Embora várias ferramentas de manipulação de imagens sejam mais baratas e um pouco mais fáceis de utilizar, o Photoshop é a ferramenta mais importante de manipulação de

Leia mais

Para alterar o texto diretamente na página selecione a ferramenta Texto e clique sobre o bloco de texto parágrafo ou artístico.

Para alterar o texto diretamente na página selecione a ferramenta Texto e clique sobre o bloco de texto parágrafo ou artístico. Quando precisarmos utilizar trechos de texto mais longos, como frases inteiras e parágrafos, utilizaremos o recurso Texto Parágrafo. Para iniciarmos um texto parágrafo selecionamos a ferramenta Texto e

Leia mais

Gabarito. Adobe Photoshop - Essencial. 1 - Ferramenta Pincel (Utilizado para colorir com o tom e tamanho definidos)

Gabarito. Adobe Photoshop - Essencial. 1 - Ferramenta Pincel (Utilizado para colorir com o tom e tamanho definidos) Aula Questão Resposta Introdução ao Adobe Photoshop - N - A área de trabalho do Photoshop pode ser dividida em quatro áreas: Barra Superior, Barra de Ferramentas, Área de Uso e Área das Paletas. - A área

Leia mais

Introdução ao Fireworks CS4

Introdução ao Fireworks CS4 Introdução ao Fireworks CS4 Profa. Flávia Pereira de Carvalho Fontes: Adobe Fireworks CS4 Design para Web Processor Alfamídia Criação de Sites: Layout e Projetos - Processor Alfamídia Crie, Anime e Publique

Leia mais

Capítulo 1 - PHOTOSHOP

Capítulo 1 - PHOTOSHOP Capítulo 1 - PHOTOSHOP O Adobe Photoshop é um dos mais completos editores gráficos. Ele permite Que você faça os mais variados desenhos e ilustrações e ainda apresenta inúmeras operações de efeitos visuais.

Leia mais

Introdução ao Fireworks CS4

Introdução ao Fireworks CS4 Introdução ao Fireworks CS4 Profa. Flávia Pereira de Carvalho Fontes: Adobe Fireworks CS4 Design para Web Processor Alfamídia Criação de Sites: Layout e Projetos - Processor Alfamídia Crie, Anime e Publique

Leia mais

Manual do Gwenview. Aurélien Gâteau Christopher Martin Henry de Valence Tradução: Marcus Gama Tradução: André Marcelo Alvarenga

Manual do Gwenview. Aurélien Gâteau Christopher Martin Henry de Valence Tradução: Marcus Gama Tradução: André Marcelo Alvarenga Aurélien Gâteau Christopher Martin Henry de Valence Tradução: Marcus Gama Tradução: André Marcelo Alvarenga 2 Conteúdo 1 Introdução 5 1.1 O que é o Gwenview.................................... 5 2 Interface

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

Teclas de atalho e de funções do Excel

Teclas de atalho e de funções do Excel s de atalho e de funções do Excel As listas a seguir contêm as telas de atalho -- combinações com CTRL -- as teclas de função e outras teclas de atalho comuns, além de uma descrição sobre sua funcionalidade.

Leia mais

PhotoStudio 6 Manual

PhotoStudio 6 Manual Copyright 2008 ArcSoft, Inc. Todos os direitos reservados. Conteúdo Introdução 02 Paleta de ferramentas 02 Paleta de navegação 07 Como trabalhar com camadas 08 Como trabalhar com cores 10 Comandos de menu

Leia mais

PROGRAMA DE EDIÇÃO DE TEXTO Prof. José Geraldo

PROGRAMA DE EDIÇÃO DE TEXTO Prof. José Geraldo PROGRAMA DE EDIÇÃO DE TEXTO Prof. José Geraldo Apresentação WORD é um software que possibilita a criação de documentos em um computador. Seus principais atributos são: criação de textos, cartas, memorandos,

Leia mais

Índice Apresentando o software Programa aberto Criando nova animação Trabalhando as animações Ferramentas Abrir uma figura como animação

Índice Apresentando o software Programa aberto Criando nova animação Trabalhando as animações Ferramentas Abrir uma figura como animação Apostila Índice Apresentando o software...o que são GIF s animadas Programa aberto 2 Criando nova animação 3 Trabalhando as animações 3 Ferramentas 4 Abrir uma figura como animação 5 Barras de ferramentas

Leia mais

Photoshop Ponto de fuga Efeito artístico Composição avançada

Photoshop Ponto de fuga Efeito artístico Composição avançada Photoshop Ponto de fuga Faça edição de imagens em perspectiva Efeito artístico Utilize filtros e efeitos para transformar fotos em desenho Composição avançada Recurso do Photoshop permite combinação de

Leia mais

Fig. 0.1 Ícone da Adobe Creative Cloud

Fig. 0.1 Ícone da Adobe Creative Cloud 0 Introdução à Adobe Creative Cloud Este capítulo introdutório tem como principal objetivo dar as conhecer aos leitores todas as potencialidades da Adobe Creative Cloud no que diz respeito às diferentes

Leia mais

O Adobe Photoshop é um CAD (Computer Aided Design), cuja principal característica é edição de imagens.

O Adobe Photoshop é um CAD (Computer Aided Design), cuja principal característica é edição de imagens. Introdução O Adobe Photoshop é um CAD (Computer Aided Design), cuja principal característica é edição de imagens. A evolução dos sistemas CAD ocorre com grande velocidade. Hoje temos sistemas específicos

Leia mais

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010.

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010. 1 Publisher 2010 O Publisher 2010 é uma versão atualizada para o desenvolvimento e manipulação de publicações. Juntamente com ele você irá criar desde cartões de convite, de mensagens, cartazes e calendários.

Leia mais

josé gomes ferreira Formação Online / Formação presencial teórica e prática Formação Online: 25 Horas 150 Formação Presencial: 30 Horas 320

josé gomes ferreira Formação Online / Formação presencial teórica e prática Formação Online: 25 Horas 150 Formação Presencial: 30 Horas 320 josé gomes ferreira Adobe Photoshop CS3 APRESENTAÇÃO Ideal para profissionais criativos na área da fotografia, multimédia e vídeo, bem como para profissionais nas áreas de produção, medicina, arquitectura,

Leia mais

Sumário. 1 - Pacote de instalação... 2. 2 - Conceitos básicos... 2. 3 - Chave de Proteção... 4. 4 - Instalando o Software Compacto...

Sumário. 1 - Pacote de instalação... 2. 2 - Conceitos básicos... 2. 3 - Chave de Proteção... 4. 4 - Instalando o Software Compacto... Sumário 1 - Pacote de instalação... 2 2 - Conceitos básicos... 2 3 - Chave de Proteção... 4 4 - Instalando o Software Compacto... 4 5 - Registrando o Software Compacto... 9 6 - Usando o software Compacto...

Leia mais

Teclas de Atalho - Microsoft Access

Teclas de Atalho - Microsoft Access Abrir bancos de dados Imprimir e salvar Atalho Função CTRL+O Para abrir um novo banco de dados CTRL+A Para abrir um banco de dados existente ALT+F4 Para sair do Microsoft Access CTRL+P Para imprimir o

Leia mais

Aprendendo Corel Draw 2

Aprendendo Corel Draw 2 ÍNDICE Introdução Ferramentas do Trabalhando com cores Trabalhando com objetos Transformando objetos desenhados Clonagem de objetos Formatando objetos Preenchimentos e Contornos Preenchimento Gradiente

Leia mais

Lista de Atalhos para Photoshop em Mac e Windows

Lista de Atalhos para Photoshop em Mac e Windows Lista de Atalhos para Photoshop em Mac e Windows Nota: incluímos apenas os atalhos que funcionam no teclado português GERAIS Operação Macintosh Windows Mostrar/esconder todas as paletas Tab Tab Mostrar/esconder

Leia mais

josé gomes ferreira Formação Online / Formação presencial teórica e prática

josé gomes ferreira Formação Online / Formação presencial teórica e prática josé gomes ferreira Adobe Photoshop CS4 APRESENTAÇÃO Ideal para profissionais criativos na área de multimédia e vídeo, bem como para profissionais nas áreas de produção, medicina, arquitectura, engenharia

Leia mais

O TUX VAI À ESCOLA: UMA INTRODUÇÃO À EDIÇÃO DE IMAGEM COM O GIMP

O TUX VAI À ESCOLA: UMA INTRODUÇÃO À EDIÇÃO DE IMAGEM COM O GIMP O TUX VAI À ESCOLA: UMA INTRODUÇÃO À EDIÇÃO DE IMAGEM COM O GIMP O GIMP (GNU Image Manipulation Program) (http://www.gimp.org/) é uma aplicação de Software Livre para desenho e edição de imagem digital.

Leia mais

MÓDULO - I Manual Prático Microsoft Excel 2007

MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I APRESENTAÇÃO... 1 AMBIENTE DE TRABALHO... 2 A folha de cálculo... 2 O ambiente de trabalho do Excel... 3 Faixas de Opções do Excel... 4 - Guia

Leia mais

O segredo do retoque de pele

O segredo do retoque de pele O segredo do retoque de pele Dia após dia a fama do Photoshop aumenta, graças, principalmente, aos seus milagres nos retoques de pele. O mundo inteiro discute se é correto editar a textura da pele de modelos

Leia mais

Ferramentas Web, Web 2.0 e Software Livre em EVT

Ferramentas Web, Web 2.0 e Software Livre em EVT E s t u d o s o b r e a i n t e g r a ç ã o d e f e r r a m e n t a s d i g i t a i s n o c u r r í c u l o d a d i s c i p l i n a d e E d u c a ç ã o V i s u a l e T e c n o l ó g i c a Cloud canvas

Leia mais

Volpe Enterprise Resource Planning

Volpe Enterprise Resource Planning Volpe Enterprise Resource Planning Este manual não pode, em parte ou no seu todo, ser copiado, fotocopiado, reproduzido, traduzido ou reduzido a qualquer mídia eletrônica ou máquina de leitura, sem a expressa

Leia mais

Microsoft Excel 2000. Alan Cleber Borim - alan.borim@poli.usp.br. http://www.pcs.usp.br/~alan

Microsoft Excel 2000. Alan Cleber Borim - alan.borim@poli.usp.br. http://www.pcs.usp.br/~alan Microsoft Excel 2000 Alan Cleber Borim - alan.borim@poli.usp.br http://www.pcs.usp.br/~alan Microsoft Índice 1.0 Microsoft Excel 2000 3 1.1 Acessando o Excel 3 1.2 Como sair do Excel 3 1.3 Elementos da

Leia mais

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano Informática Aplicada Aula 2 Windows Vista Professora: Cintia Caetano AMBIENTE WINDOWS O Microsoft Windows é um sistema operacional que possui aparência e apresentação aperfeiçoadas para que o trabalho

Leia mais

INSTITUTO PRESBITERIANO MACKENZIE COLÉGIO PRESBITERIANO MACKENZIE SP. Passo a Passo

INSTITUTO PRESBITERIANO MACKENZIE COLÉGIO PRESBITERIANO MACKENZIE SP. Passo a Passo Passo a Passo São Paulo 2002 1 Índice O Xara 3D...3 Vamos iniciar nossos estudos do Xara 3D...3 Exibindo as barras de ferramentas e Status...5 A barra de Status (Status Bar)...9 Vamos começar a trabalhar

Leia mais

WEB DESIGN ELEMENTOS GRÁFICOS

WEB DESIGN ELEMENTOS GRÁFICOS ELEMENTOS GRÁFICOS Parte 4 José Manuel Russo 2005 24 A Imagem Bitmap (Raster) As imagens digitais ou Bitmap (Raster image do inglês) são desenhadas por um conjunto de pontos quadrangulares Pixel alinhados

Leia mais

Slice Tool - Ferramenta Fatia

Slice Tool - Ferramenta Fatia Faculdade de Tecnologia da Paraíba CURSO CURSO SUPERIOR DE TECNOLOGIA EM SISTEMAS PARA A INTERNET DISCIPLINA DESENVOLVIMENTO DE APLICAÇÕES WEB ESTÁTICAS PERÍODO: P2 Semestre: 2008.2 PROFESSOR Geraldo Rodrigues

Leia mais

Por Günther Natusch Desenvolvido para o Projeto Aprendi NESTA-UFRGS/Petrobrás Cultural

Por Günther Natusch Desenvolvido para o Projeto Aprendi NESTA-UFRGS/Petrobrás Cultural TUTORIAL BÁSICO DE GIMP 2.2 Por Günther Natusch Desenvolvido para o Projeto Aprendi NESTA-UFRGS/Petrobrás Cultural Introdução: O programa gráfico GIMP - The GNU Image Manipulation Program - foi desenvolvido

Leia mais

_PTBR. Guia de configuração de digitalização para aplicativos TWAIN

_PTBR. Guia de configuração de digitalização para aplicativos TWAIN _PTBR Guia de configuração de digitalização para aplicativos TWAIN Como usar a fonte de dados TWAIN Como iniciar a Ferramenta de validação de scanner... 2 A caixa de diálogo Ferramenta de validação de

Leia mais

Importar Imagens de uma máquina fotográfica

Importar Imagens de uma máquina fotográfica Índice Importar Imagens de uma máquina fotográfica -------------------------------------------------------2 Microsoft Digital Imagem Suite 2006---------------------------------------------------------------------5

Leia mais

Tour pela área de trabalho

Tour pela área de trabalho Tour pela área de trabalho Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Neste tutorial, você se familiarizará com a terminologia

Leia mais

ETI - Edição e tratamento de imagens digitais

ETI - Edição e tratamento de imagens digitais Curso Técnico em Multimídia ETI - Edição e tratamento de imagens digitais 2 Fundamentos "Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo Jesus." 2 Timóteo 1:13

Leia mais

Professor Paulo Najar www.aprenderdigital.com.br

Professor Paulo Najar   www.aprenderdigital.com.br ~ 1 ~ O QUE É O BROFFICE? Broffice.org é o nome de um conjunto de programas de escritório livre (free software), disponível na internet gratuitamente (no site www.broffice.org) que oferece ferramentas

Leia mais

Aplica/remove sublinhado.

Aplica/remove sublinhado. Nova pasta CTRL+O Cria nova pasta. Nova planilha ALT+SHIFT+F1 Insere uma nova planilha. Abrir planilha CTRL+A Abrir Planilha Salvar CTRL+B Salva o arquivo ativo com seu nome de arquivo, local e formato

Leia mais

Trabalhar com Layers em Photoshop

Trabalhar com Layers em Photoshop Painel Layers / Camadas Trabalhar com Layers em Photoshop Existem cinco tipos de layers / camadas, que podem estar listados neste painel: - de imagem, contendo pixéis - de texto, com texto editável - de

Leia mais

Universidade Federal do Rio de Janeiro NCE/PGTIAE. Tutorial SweetHome3D

Universidade Federal do Rio de Janeiro NCE/PGTIAE. Tutorial SweetHome3D Universidade Federal do Rio de Janeiro NCE/PGTIAE Tutorial SweetHome3D Trabalho apresentado ao Prof. Carlo na Disciplina de Software Livre no curso Pós Graduação em Tecnologia da Informação Aplicada a

Leia mais

Retocar imagens. O que você aprenderá

Retocar imagens. O que você aprenderá Retocar imagens Bem-vindo ao Corel PHOTO-PAINT, um poderoso programa de edição de imagens bitmap que permite o retoque de fotos existentes ou a criação de gráficos originais. Neste tutorial, você aprenderá

Leia mais

PAINT SHOP PRO. No mundo do SOLUÇÕES

PAINT SHOP PRO. No mundo do SOLUÇÕES Edição de fotografias SOLUÇÕES No mundo do PAINT SHOP PRO Aprenda a alterar os fundos das suas fotos com muita imaginação. Tudo com o Paint Shop Pro que pode encontrar no CD/DVD deste mês. P n Texto Pedro

Leia mais

OFICINA DE ADOBE LIGHTROOM 4. Marcus Ramos www.marcusramos.com.br

OFICINA DE ADOBE LIGHTROOM 4. Marcus Ramos www.marcusramos.com.br OFICINA DE ADOBE LIGHTROOM 4 Marcus Ramos www.marcusramos.com.br ADOBE LIGHTROOM 4 Essencialmente, uma ferramenta para: Tratamento de imagens RAW (porém aplicável também para arquivos de outros tipos);

Leia mais

GIMP 2.8 Guia para Remoção do Pixel Valor Zero nas Imagens Landsat-8

GIMP 2.8 Guia para Remoção do Pixel Valor Zero nas Imagens Landsat-8 GIMP 2.8 Guia para Remoção do Pixel Valor Zero nas Imagens Landsat-8 Jorge Santos 2014 Conteúdo Sumário Capítulo 1... 4 O Problema do Pixel Valor Zero... 4 1.1 Transformação Radiométrica... 4 1.2 Equalização

Leia mais

WEB DESIGN ELEMENTOS GRÁFICOS

WEB DESIGN ELEMENTOS GRÁFICOS ELEMENTOS GRÁFICOS Parte 6 José Manuel Russo 2005 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

Leia mais

REFERENCIAL CURRICULAR NACIONAL PARA A EDUCAÇÃO INFANTIL

REFERENCIAL CURRICULAR NACIONAL PARA A EDUCAÇÃO INFANTIL REFERENCIAL CURRICULAR NACIONAL PARA A EDUCAÇÃO INFANTIL 1 Os arquivos no CD são os seguintes: Volume 1 - Introdução Volume 2 - Formação Pessoal e Social Volume 3 - Conecimento de mundo : Utilizando o

Leia mais

Retocar imagens. Você aprenderá a

Retocar imagens. Você aprenderá a Retocar imagens Bem-vindo ao Corel PHOTO-PAINT, um sofisticado programa de edição de imagens de bitmap que permite o retoque de fotos existentes ou a criação de gráficos originais Neste tutorial, você

Leia mais

Manipulação Digital de Imagens Recursos Básicos de Tratamento

Manipulação Digital de Imagens Recursos Básicos de Tratamento Manipulação Digital de Imagens Recursos Básicos de Tratamento 1 Antes de mais nada, é extremamente necessário lembrar que para tratar uma imagem é necessário que o monitor de seu computador esteja calibrado

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

Uruaçu - 2009. Professoras Formadoras do NTE Uruaçu

Uruaçu - 2009. Professoras Formadoras do NTE Uruaçu Professoras Formadoras do NTE Uruaçu Uruaçu - 2009 Núcleo de Tecnologia Educacional de Uruaçu Rua Maranhão Quadra 02 Lote 01 Bairro JK Uruaçu Goiás Telefone: (62)3357-4237 - Fax : 3357-4217 E-mail nteuruacu@hotmail.com

Leia mais

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

Photoshop 6.0 91. - BMP (.bmp) - Formato Bitmap. Este é o formato padrão do Windows.

Photoshop 6.0 91. - BMP (.bmp) - Formato Bitmap. Este é o formato padrão do Windows. Photoshop 6.0 91 Salvando Arquivos O Photoshop permite que você salve seus trabalhos em diversos formatos, que poderão ser utilizados para exibição na Web, impressão ou exibição em diferentes plataformas.

Leia mais

Corel Draw 12. Enviado por: Jair Marcolino Felix. Rua Dr. Osvaldo Assunção nº 72 Tucano BA Próximo a Escola de Artes e Ofícios (antigo CESG)

Corel Draw 12. Enviado por: Jair Marcolino Felix. Rua Dr. Osvaldo Assunção nº 72 Tucano BA Próximo a Escola de Artes e Ofícios (antigo CESG) Corel Draw 12 Enviado por: Jair Marcolino Felix Corel Draw 12 O Corel Draw é um programa de design gráfico pertencente à Corel.O Corel Draw é um aplicativo de ilustração e layout de página que possibilita

Leia mais

TUTORIAIS ESCALDANTES

TUTORIAIS ESCALDANTES Como o Clone Stamp copia pixels de uma área para a outra sem qualquer modificação, é preciso escolher áreas de origem e destino que possuam aproximadamente a mesma cor e luminosidade, para não haver discrepância.

Leia mais

Instrutor Alexandre - CorelDraw

Instrutor Alexandre - CorelDraw Quem não leu o meu primeiro tutorial, corra para ler, pois tem muitas dicas interessantes lá! Quem já leu, preparem-se para mais dicas!! Abra o COREL e coloque a folha na horizontal (paisagem). Feito assim

Leia mais

WINDOWS EXPLORER Pro r f. f. R o R be b rt r o t A n A d n r d a r de d

WINDOWS EXPLORER Pro r f. f. R o R be b rt r o t A n A d n r d a r de d WINDOWS EXPLORER Prof. Roberto Andrade Roteiro desta aula 1. OqueéoWindowsExplorer 2. Acionamento do Windows Explorer 3. Entendendo Unidades, Pastas e Arquivos 4. Ambiente gráfico(janela, Barras e Botões)

Leia mais

Seu manual do usuário ARCSOFT PHOTOBASE http://pt.yourpdfguides.com/dref/536271

Seu manual do usuário ARCSOFT PHOTOBASE http://pt.yourpdfguides.com/dref/536271 Você pode ler as recomendações contidas no guia do usuário, no guia de técnico ou no guia de instalação para ARCSOFT PHOTOBASE. Você vai encontrar as respostas a todas suas perguntas sobre a no manual

Leia mais

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word PowerPoint 2013 Sumário Introdução... 1 Iniciando o PowerPoint 2013... 2 Criando Nova Apresentação... 10 Inserindo Novo Slide... 13 Formatando Slides... 15 Inserindo Imagem e Clip-art... 16 Inserindo Formas...

Leia mais

TUTORIAL: Criando e animando sprites no Inkscape

TUTORIAL: Criando e animando sprites no Inkscape TUTORIAL: Criando e animando sprites no Inkscape Pra quem não sabe, o Inkscape é um programa de desenho vetorial, assim como o Illustrator da Adobe, porém é software livre. Atualmente encontra-se na versão

Leia mais

SUMÁRIO. Introdução 1

SUMÁRIO. Introdução 1 SUMÁRIO Introdução 1 Tela de Apresentação 1 Criando Figuras Simples 2 Linhas Curvas 3 Figuras Geométricas 4 Ferramenta Seleção 4 Desfazer e Repetir 4 Colorindo os Objetos 5 Ferramenta Zoom 5 Gravando,

Leia mais

Manual do usuário Perfection V19/V39

Manual do usuário Perfection V19/V39 Manual do usuário Perfection V19/V39 Conteúdo Manual do usuário Perfection V19/V39... 7 Funções básicas do scanner... 8 Partes do scanner... 8 Botões e luzes do scanner... 11 Uso da base do scanner...

Leia mais

1. NOÇÕES BÁSICAS... 1.1. Iniciando o Excel... 1.1.1. Abrindo o Excel... 1.1.2. Encerrando o Excel... 1.2. A tela do Excel 7.0... 1.2.1.

1. NOÇÕES BÁSICAS... 1.1. Iniciando o Excel... 1.1.1. Abrindo o Excel... 1.1.2. Encerrando o Excel... 1.2. A tela do Excel 7.0... 1.2.1. 1. NOÇÕES BÁSICAS... 1.1. Iniciando o Excel... 1.1.1. Abrindo o Excel... 1.1.2. Encerrando o Excel... 1.2. A tela do Excel 7.0... 1.2.1. Partes da tela do Excel... Barra de fórmulas... Barra de status...

Leia mais

Resumão Writer ( Broffice.org)

Resumão Writer ( Broffice.org) Resumão Writer ( Broffice.org) Resumo BrOffice.org Cespe O Broffice.org é um pacote de programas para escritório, do mesmo nível do pacote Microsoft Office. Os dois pacotes trazem programas parecidos e

Leia mais

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica Apresentação Gráfica Microsoft Office Power Point 1 Sumário 1. MICROSOFT POWER POINT... 4 1.1. INICIANDO O MICROSOFT POWER POINT... 4 2. CONHECENDO A INTERFACE DO POWER POINT... 5 2.1. O DOCUMENTO DO POWER

Leia mais

FERRAMENTAS BÁSICAS PARA PHOTOSHOP

FERRAMENTAS BÁSICAS PARA PHOTOSHOP FERRAMENTAS BÁSICAS PARA PHOTOSHOP Autora: Joyce Meireles Siqueira Engenharia Elétrica Universidade Federal Fluminense 1 Sumário 1- Introdução... 3 2- Interface e criação de arquivo... 4 3- Barra de Ferramentas...

Leia mais