Saiba como o Photoshop é integrado com o Dreamweaver. Trabalhe com Objetos inteligentes em fluxos de trabalho do Photoshop - Dreamweaver.

Sobre a integração do Photoshop

Você pode inserir arquivos de imagem do Photoshop (formato PSD) em páginas da Web no Dreamweaver e permitir que o Dreamweaver otimize-as como imagens habilitadas para a Web (formatos GIF, JPEG e PNG). Ao executar essa ação, o Dreamweaver insere a imagem como um Objeto inteligente e mantém uma conexão ativa com o arquivo PSD original.

Também é possível colar toda ou parte de uma imagem do Photoshop de várias camadas ou fatias em uma página da Web no Dreamweaver. Entretanto, quando você copia e cola do Photoshop, a conexão ativa com o arquivo original não é mantida. Para atualizar a imagem, faça as alterações no Photoshop e copie e cole novamente.

Observação:

se esse recurso de integração for usado com frequência, você poderá armazenar seus arquivos do Photoshop no site do Dreamweaver para facilitar o acesso. Nesse caso, certifique-se de que as imagens estejam encobertas para evitar a exposição dos ativos originais, assim como as transferências desnecessárias entre o site local e o servidor remoto.

Para assistir a um tutorial sobre a integração do Photoshop com o Dreamweaver, consulte Integração do Dreamweaver com o Photoshop.

Sobre os fluxos de trabalho dos Objetos inteligentes e do Photoshop-Dreamweaver

Há dois principais fluxos de trabalho para trabalhar com os arquivos do Photoshop no Dreamweaver: o fluxo de trabalho copiar/colar e o fluxo de trabalho dos Objetos inteligentes.

Fluxo de trabalho copiar/colar

O fluxo de trabalho copiar/colar permite que você selecione fatias ou camadas em um arquivo do Photoshop e, em seguida, use o Dreamweaver para inseri-las como imagens prontas para a Web. Se quiser atualizar o conteúdo posteriormente, entretanto, você deverá abrir o arquivo Photoshop original, executar as alterações, copiar sua fatia ou camada para a área de Transferência novamente e, em seguida, colar a fatia ou a camada atualizada no Dreamweaver. Esse fluxo de trabalho só é recomendado quando você deseja inserir parte de um arquivo do Photoshop (por exemplo, uma seção de um componente de design) como uma imagem em uma página da Web.

Fluxo de trabalho dos Objetos inteligentes

Ao trabalhar com os arquivos do Photoshop completos, a Adobe recomenda o fluxo de trabalho dos Objetos inteligentes. Um Objeto inteligente no Dreamweaver é uma imagem colocada em um página da Web que tenha uma conexão instantânea com um arquivo original do Photoshop (PSD). Na Visualização de design do Dreamweaver, um Objeto inteligente é indicado por um ícone no canto superior esquerdo da imagem.

Objeto inteligente
Objeto inteligente

Quando a imagem da Web (ou seja, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto inteligente em vermelho. Quando você seleciona a imagem da Web na Visualização de design e clica no botão Atualizar do original no Inspetor de propriedades, a imagem é atualizada automaticamente, refletindo todas as alterações feitas no arquivo original do Photoshop.

Ao usar o fluxo de trabalho de Objetos inteligentes, você não precisa abrir o Photoshop para atualizar uma imagem da Web. Além disso, quaisquer atualizações feitas em um Objeto inteligente no Dreamweaver são não destrutivas. Ou seja, você pode alterar a versão da Web da imagem em sua página enquanto mantém a imagem original do Photoshop intacta.

Você também pode atualizar um Objeto inteligente sem selecionar a imagem da Web na visualização de Design. O painel Recursos permite que você atualize todos os Objetos inteligentes, incluindo as imagens que podem não ser selecionáveis na janela Documento (por exemplo, imagens de segundo plano CSS).

Configurações de otimização de imagens

Tanto para o fluxo de trabalho de copiar/colar quanto para o fluxo de trabalho de Objetos inteligentes, você pode especificar configurações de otimização na caixa de diálogo Otimização da imagem. Esta caixa de diálogo permite especificar o formato de arquivo e a qualidade da imagem. Se você estiver copiando uma fatia ou uma camada pela primeira vez ou inserindo uma arquivo do Photoshop como um Objeto inteligente pela primeira vez, o Dreamweaver exibirá essa caixa de diálogo de modo que você possa criar facilmente a imagem da Web.

Se você copiar e colar uma atualização em uma determinada fatia ou camada, o Dreamweaver manterá as configurações originais e recriará a imagem da Web com essas configurações. Da mesma maneira, ao atualizar um Objeto inteligente usando o Inspetor de propriedades, o Dreamweaver usará as mesmas configurações usadas quando você inseriu a imagem pela primeira vez. Você pode alterar as configurações de imagem a qualquer momento selecionando a imagem da Web na Visualização de design e, em seguida, clicar no botão Editar configurações da imagem no Inspetor de propriedades.

Armazenamento de arquivos do Photoshop

Se você tiver inserido uma imagem da Web e não tiver armazenado o arquivo original do Photoshop em seu site do Dreamweaver, o Dreamweaver reconhecerá o caminho para o arquivo original como um caminho de arquivo local absoluto. (Isso é verdadeiro tanto para o fluxo de trabalho de copiar/colar quanto para o de Objetos inteligentes.) Por exemplo, se o caminho de seu site do Dreamweaver for C:\Sites\meuSite e seu arquivo do Photoshop estiver armazenado em C:/Images/Photoshop, o Dreamweaver não reconhecerá o ativo original como parte do site chamado meuSite. Isso causará problemas se você quiser compartilhar o arquivo do Photoshop com outros membros da equipe, pois o Dreamweaver reconhecerá o arquivo somente como disponível em um determinado disco rígido local.

Se você armazenar o arquivo do Photoshop em seu site, entretanto, o Dreamweaver definirá um caminho entre o site o arquivo. Qualquer usuário com acesso ao site será capaz de definir o caminho correto até o arquivo, desde que você tenha fornecido o arquivo original para download.

Para assistir a um tutorial em vídeo sobre a edição roundtrip com o Photoshop, consulte Edição roundtrip com o Photoshop.

Criação de um Objeto inteligente

Quando você insere uma imagem do Photoshop (arquivo PSD) em uma página, o Dreamweaver cria um Objeto inteligente. Um Objeto inteligente é uma imagem habilitada para a Web que mantém uma conexão ativa com a imagem original do Photoshop. Sempre que você atualiza a imagem original no Photoshop, o Dreamweaver oferece a opção de atualizar a imagem no Dreamweaver com o clique de um botão.

  1. No Dreamweaver (Visualização de design ou de código), coloque o ponto de inserção na página onde você deseja inserir a imagem.
  2. Selecione Inserir > Imagem.

    Observação:

    você também pode arrastar o arquivo PSD para a página a partir do painel Arquivos, caso esteja armazenando os arquivos do Photoshop em seu site. Se essa for a sua opção, ignore a próxima etapa.

  3. Localize o arquivo de imagem PSD do Photoshop na caixa de diálogo Selecionar origem da imagem clicando no botão Procurar e navegando até o arquivo.

  4. Ajuste as configurações de otimização conforme necessário na caixa de diálogo Otimização da imagem e clique em OK.

  5. Salve o arquivo de imagem ativado para a Web em um local na pasta raiz do seu site.

O Dreamweaver cria os Objetos inteligentes com base nas configurações de otimização selecionadas e coloca em sua página a versão ativada para a Web da imagem. O Objeto inteligente mantém uma conexão ativa com a imagem original e permite que você saiba quando ambas estão fora de sincronia.

Observação:

se você decidir alterar posteriormente as configurações de otimização para uma imagem colocada em suas páginas, pode selecionar a imagem, clicar no botão Editar Configurações de imagem, no Inspetor de propriedades da imagem, e fazer as alterações na caixa de diálogo Otimização de imagem. As alterações feitas na caixa de diálogo Otimização de imagem são aplicadas de forma não destrutiva. O Dreamweaver nunca modifica o arquivo original do Photoshop e sempre recria a imagem da Web com base nos dados originais.

Para assistir a um tutorial em vídeo sobre a edição roundtrip com o Photoshop, consulte Edição roundtrip com o Photoshop.

Atualização de um Objeto inteligente

Se você alterar o arquivo do Photoshop ao qual seu Objeto inteligente é vinculado, o Dreamweaver notifica que a imagem habilitada para a web está fora de sincronia com o original. No Dreamweaver, os Objetos inteligentes são indicados por um ícone no canto superior esquerdo da imagem. Quando a imagem habilitada para a Web no Dreamweaver está fora de sincronia com o arquivo original do Photoshop, ambas as setas do ícone ficam verdes. Quando a imagem habilitada para a Web está fora de sincroniza com o arquivo original do Photoshop, uma das setas do ícone fica vermelha.

  1. Para atualizar um Objeto inteligente com o conteúdo atual do arquivo original do Photoshop, selecione Objeto inteligente na janela Documento e clique no botão Atualizar do original, no Inspetor de propriedades.

Observação:

você não precisa ter o Photoshop instalado para fazer a atualização no Dreamweaver.

Atualizar vários Objetos inteligentes

Você pode atualizar vários Objetos inteligentes de uma só vez usando o painel Ativos. O painel Ativos possibilita exibir os Objetos inteligentes que talvez não possam ser selecionados na janela Documento (por exemplo, imagem de plano de fundo CSS).

  1. No painel Arquivos, clique na guia Ativos para exibir os ativos do site.
  2. Certifique-se de que a visualização Imagens foi selecionada. Caso contrário, clique no botão Imagens.

  3. Selecione cada ativo de imagem no painel Ativos. Quando você seleciona um Objeto inteligente, é possível ver um ícone de Objeto inteligente no canto superior esquerdo da imagem. Imagens normais não possuem esse ícone.
  4. Em cada Objeto inteligente que você quiser atualizar, clique com o botão direito do mouse sobre o nome do arquivo e selecione Atualizar do original. Você também pode clicar mantendo a tecla Control pressionada para selecionar vários nomes de arquivos e atualizar todos de uma vez.

Observação:

você não precisa ter o Photoshop instalado para fazer a atualização no Dreamweaver.

Redimensionamento de um Objeto inteligente

Você pode redimensionar um Objeto inteligente na janela Documento como faria com qualquer outra imagem.

  1. Selecione o Objeto inteligente na janela Documento e arraste as alças de redimensionamento para redimensionar a imagem. Você pode manter a largura e a altura proporcionais mantendo a tecla Shift pressionada conforme arrasta.
  2. Clique no botão Atualizar do original no Inspetor de propriedades.

    Quando você atualiza o Objeto inteligente, a imagem da web reprocessa o novo tamanho de forma não destrutiva com base no conteúdo atual do arquivo original e das configurações originais de otimização.

Edição do arquivo original do Photoshop de um Objeto inteligente

Após criar o Objeto inteligente na sua página do Dreamweaver, você pode editar o arquivo PSD original no Photoshop. Após fazer as alterações no Photoshop, você pode atualizar facilmente a imagem da Web no Dreamweaver.

Observação:

configure o Photoshop como editor principal de imagens externas.

  1. Selecione o Objeto inteligente na janela Documento.
  2. Clique no botão Editar no Inspetor de propriedades.

  3. Faça as alterações no Photoshop e salve o novo arquivo PSD.
  4. No Dreamweaver, selecione novamente o Objeto inteligente e clique no botão Atualizar do original.

Observação:

se você tiver alterado o tamanho da imagem no Photoshop, precisará redimensionar o tamanho da imagem da Web no Dreamweaver. O Dreamweaver atualiza um Objeto inteligente somente com base no conteúdo do arquivo original do Photoshop e não em seu tamanho. Para sincronizar o tamanho de uma imagem da Web com o tamanho do arquivo original do Photoshop, clique com o botão direito do mouse na imagem e selecione Redefinir tamanho para original.

Estados de Objetos inteligentes

A tabela a seguir lista os vários estados de Objetos inteligentes.

Estado de Objeto inteligente

Descrição

Ação recomendada

Imagens sincronizadas

A imagem da Web está em sincronia com o conteúdo atual do arquivo original do Photoshop. Os atributos de largura e altura do código HTML combinam com as dimensões da imagem da Web.

Nada

Ativo original modificado

O arquivo original do Photoshop foi modificado após a criação da imagem da Web no Dreamweaver.

Use o botão Atualizar do original no Inspetor de propriedades para sincronizar as duas imagens.

As dimensões da imagem da Web são diferentes da largura e altura do HTML selecionado.

Os atributos de largura e altura do código HTML são diferentes das dimensões de largura e altura da imagem da Web que o Dreamweaver criou na inserção. Se as dimensões da imagem da Web forem menores que os valores selecionados de largura e altura no HTML, a imagem da Web pode aparecer como pixels.

Use o botão Atualizar do original no Inspetor de propriedades para recriar a imagem da Web a partir do arquivo original do Photoshop. O Dreamweaver usa dimensões de altura e largura de HTML atualmente especificadas ao recriar a imagem.

As dimensões do ativo original são muito pequenas para a largura e a altura do HTML selecionado.

Os atributos de largura e altura do código HTML são diferentes das dimensões de largura e altura do arquivo original do Photoshop. A imagem da Web pode aparecer como pixels.

Não crie imagens da Web com dimensões maiores que as dimensões do arquivo original do Photoshop.

Ativo original não encontrado

O Dreamweaver não pôde localizar o arquivo original do Photoshop especificado na caixa de texto Original do Inspetor de propriedades.

Corrija o caminho do arquivo na caixa de texto Original do Inspetor de propriedades ou mova o arquivo do Photoshop para o local atualmente especificado.

Cópia e colagem de uma seleção do Photoshop

Você pode copiar todas ou algumas imagens do Photoshop e colar a seleção na página do Dreamweaver como uma imagem habilitada para a Web. É possível copiar uma única camada ou um conjunto de camadas de uma área selecionada da imagem ou copiar uma fatia da imagem. Entretanto, quando se faz isso, o Dreamweaver não cria um Objeto inteligente.

Observação:

embora a função Atualizar do original não esteja disponível para imagens coladas, você ainda pode abrir e editar o arquivo original do Photoshop selecionando a imagem colada e clicando no botão Editar do Inspetor de propriedades.

  1. No Photoshop, execute um dos procedimentos a seguir:
    • Copie toda ou parte de uma única camada usando a ferramenta Moldura para selecionar a parte que deseja copiar e escolha Editar > Copiar. Somente a camada ativa da área selecionada é copiada na área de transferência. Se houver efeitos baseados em camadas, eles não serão copiados.
    • Copie e mescle várias camadas usando a ferramenta Letreiro para selecionar a parte que deseja copiar e escolha Editar > Copiar parte mesclada. Isso nivela e copia todas as camadas ativas e inferiores da área selecionada na área de transferência. Se houver efeitos baseados em camadas associados, eles não serão copiados.
    • Copie uma fatia usando a ferramenta Selecionar fatia para selecionar a fatia e, em seguida, escolha Editar > Copiar. Isso nivela e copia todas as camadas ativas e inferiores da fatia na área de transferência.

    Observação:

    escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada.

  2. No Dreamweaver (Visualização de design ou de código), coloque o ponto de inserção na página onde você deseja inserir a imagem.
  3. Selecione Editar > Colar.

  4. Na caixa de diálogo Visualização da imagem, ajuste as configurações de otimização como necessário e clique em OK.

  5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site.

O Dreamweaver define a imagem de acordo com as configurações de otimização e coloca uma versão habilitada para a Web da imagem na sua página. As informações sobre a imagem, como o local do arquivo PSD original, são salvas em uma Design Note, independentemente de as Design Notes estarem ativadas para seu site. A Design Note permite que você volte para editar o arquivo de origem do Photoshop diretamente do Dreamweaver.

Editar imagens coladas

Após colar as imagens do Photoshop nas suas páginas do Dreamweaver, você pode editar o arquivo PSD original no Photoshop. Ao utilizar o fluxo de trabalho copiar/colar, a Adobe recomenda sempre manter suas edições no arquivo original PSD, e não na imagem habilitada para a Web, e a colar novamente para manter uma única origem.

Observação:

verifique se o Photoshop está definido como o principal editor de imagens externas para o tipo de arquivo que deseja editar.

  1. No Dreamweaver, selecione uma imagem habilitada para a Web que foi criada originalmente no Photoshop e execute um dos procedimentos a seguir:
    • Clique no botão Editar no Inspetor de propriedades da imagem.
    • Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no arquivo ao mesmo tempo.
    • Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma imagem, escolha Editar original com no menu de contexto e, em seguida, escolha Photoshop.

    Observação:

    esse processo presume que o Photoshop tenha sido definido como o principal editor de imagens externas para arquivos de imagem PSD. Você também pode definir o Photoshop como o editor padrão para os tipos de arquivo JPEG, GIF e PNG.

  2. Edite o arquivo no Photoshop.
  3. Retorne ao Dreamweaver e cole a imagem ou seleção atualizada em sua página.

Para reotimizar a imagem a qualquer momento, selecione-a e clique no botão Editar configurações de imagem no Inspetor de propriedades.

Configuração das opções da caixa de diálogo Visualização da imagem

Ao criar um Objeto inteligente ou colar uma seleção do Photoshop, o Dreamweaver exibe a caixa de diálogo Visualização da imagem . (O Dreamweaver também exibe esta caixa de diálogo para qualquer outro tipo de imagem, se você selecionar a imagem e clicar no botão Editar configurações de imagem no Inspetor de propriedades.) Esta caixa de diálogo possibilita definir e visualizar as configurações para imagens habilitadas para a Web usando a combinação correta de cor, compactação e qualidade.

Uma imagem habilitada para a Web pode ser exibida por todos os navegadores modernos e sempre tem a mesma aparência, independentemente do sistema ou do navegador usado pelo visualizador. Em geral, as configurações afetam a qualidade e o tamanho do arquivo.

Observação:

apenas a versão importada do arquivo de imagem é afetada, independentemente das configurações selecionadas. Os arquivos originais PSD do Photoshop ou PNG do Fireworks sempre permanecem inalterados.

Predefinição

Escolha a Predefinição mais adequada aos seus requisitos. O tamanho do arquivo da imagem muda de acordo com a predefinição escolhida. Uma visualização instantânea da imagem com a configuração aplicada é exibida em segundo plano.

Por exemplo, para as imagens que devem ser exibidas com um alto grau da claridade, escolha PNG24 para fotos (detalhes nítidos).  Selecione GIF para imagens de fundo (padrões) se você estiver inserindo o padrão que será a imagem do fundo da página.

Quando uma predefinição é selecionada, suas opções configuráveis são exibidas.  Para personalizar ainda mais suas configurações de otimização, modifique os valores dessas opções.

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