As ferramentas da Web do Photoshop facilitam a criação de componentes para páginas da Web ou a produção de páginas da Web completas em formatos predefinidos ou personalizados.

  • Use camadas ou fatias para criar páginas da Web e elementos de interface dessas páginas. (Consulte Camadas e Fatias de páginas da Web .)

  • Use composições de camada para experimentar composições de página diferentes ou exportar variações de uma página. (Consulte Composições de camada.)

  • Crie texto de rolagem ou imagens de botões a fim de importar para o Dreamweaver ou Flash.

  • Crie animações da Web com o painel Animação e exporte-as como imagens GIF animadas ou arquivos QuickTime. Consulte Criação de quadros de animação.

  • Use o Adobe Bridge para criar uma galeria de fotos na Web para transformar rapidamente um conjunto de imagens em um site interativo, usando uma variedade de modelos com aparência profissional.

Para assistir a um vídeo sobre como projetar sites da Web usando o Photoshop e o Dreamweaver, consulte Acessar o Photoshop pelo Dreamweaver para melhorar a imagem da Web.

Criação de imagens de rolagem

Uma rolagem é um botão ou uma imagem em uma página da Web que é alterado quando se passa o mouse sobre ele. Para criar uma rolagem, são necessárias, no mínimo, duas imagens: uma imagem principal para o estado normal e uma secundária para o estado alterado.

O Photoshop fornece várias ferramentas úteis para a criação de imagens de rolagem:

  • Use camadas para criar as imagens principal e secundária. Crie conteúdo em uma camada, duplique a camada e edite-a para criar um conteúdo semelhante, mantendo o alinhamento entre as camadas. Ao criar um efeito de rolagem, pode-se alterar o estilo, a visibilidade ou a posição da camada, fazer ajustes de cor ou tom ou aplicar efeitos de filtro. Consulte Duplicar camadas.

  • Pode-se também usar estilos de camadas para aplicar efeitos, como sobreposições de cores, sombras projetadas, brilho ou entalhe, à camada principal. Para criar um par de rolagens, ative ou desative o estilo de camada e salve a imagem em cada estado. Consulte Efeitos e estilos de camadas.

  • Use os estilos de botão predefinidos no painel Estilos para criar rapidamente botões de rolagem com os estados normal, mouse acima e mouse abaixo. Desenhe uma forma básica com a ferramenta retângulo e aplique um estilo, como Normal Chanfrado, para transformar automaticamente o retângulo em um botão. Depois, copie a camada e aplique outros estilos predefinidos, como Mouse Acima Chanfrado, para criar estados de botão adicionais. Salve cada camada como uma imagem separada para criar um conjunto completo de botões de rolagem.

  • Use a caixa de diálogo Salvar para a Web e Dispositivos para salvar imagens de rolagem em um formato compatível com a Web e com um tamanho de arquivo otimizado. Consulte Otimização de imagens.

Observação:

Ao salvar imagens de rolagem, use uma convenção de nomenclatura para distinguir a imagem principal (estado sem rolagem) da secundária (estado de rolagem).

Depois de criar uma imagem de rolagem no Photoshop, use o Dreamweaver para colocar as imagens em uma página da Web e adicionar automaticamente o código JavaScript para a ação de rolagem.

Exportação para o Zoomify

É possível publicar imagens de alta resolução na Web que os usuários possam deslocar e ampliar para ver mais detalhes. Os downloads de imagens de tamanho básico têm a mesma duração que um arquivo JPEG de tamanho equivalente. O Photoshop exporta os arquivos JPEG e o arquivo HTML que podem ser carregados no servidor da Web.

  1. Escolha Arquivo > Exportar > Zoomify e defina as opções de exportação.

    Modelo

    Define o plano de fundo e a navegação para a imagem visualizada no navegador.

    Localização de Saída

    Especifica o local e o nome do arquivo.

    Opções de Imagem Lado a Lado

    Especifica a qualidade da imagem.

    Opções do Navegador

    Define a largura e a altura do pixel para a imagem básica no navegador do usuário.

  2. Carregue os arquivos HTML e de imagem no servidor Web.

Trabalho com valores hexadecimais de cores

O Photoshop pode exibir os valores hexadecimais das cores da imagem ou copiar o valor hexadecimal de uma cor para usar em um arquivo HTML.

Visualização de valores hexadecimais de cores no painel Informações

  1. Escolha Janela > Informações ou clique na guia do painel Informações para visualizar o painel.
  2. Escolha Opções do painel, no menu do painel. Em Primeira Leitura da Cor ou em Segunda Leitura da Cor, escolha Cor da Web no menu Modo e clique em OK.
  3. Posicione o ponteiro sobre a cor cujos valores hexadecimais deseja exibir.

Cópia de uma cor como valor hexadecimal

O Photoshop copia cores como um atributo de COR de HTML, que contém o valor hexadecimal (color=#xxyyzz), ou como o valor hexadecimal sozinho.

  1. Siga um destes procedimentos:
    • Com a ferramenta Conta-gotas, mova o ponteiro sobre a cor que você deseja copiar. Clique com o botão direito do mouse (Windows) ou faça Control‑clique (Mac OS) e selecione Copiar cor como HTML ou Copiar código hexadecimal de cor.

    • Defina a cor do primeiro plano usando o painel Cor, o painel Amostras ou o Seletor de cores da Adobe. No menu do painel Cor, selecione Copiar cor como HTML ou Copiar código hexadecimal de cor.

    • Na caixa de diálogo Salvar para a Web, clique na amostra de cor ou escolha Fosco> Outro. No Seletor de Cores da Adobe, clique com o botão direito no valor hexadecimal e escolha Copiar.

  2. Abra o arquivo desejado em um aplicativo de edição de HTML e escolha Editar > Colar.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online