No Dreamweaver (visualização de Design
ou Código), posicione o ponto de inserção na página onde você
deseja inserir a imagem.
Última atualização em
27 de abr de 2021
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
Nota
Os fluxos de trabalho de integração do Photoshop foram descontinuados no Dreamweaver 21.0 e versões posteriores.
É possível inserir arquivos de imagem do Photoshop (formato PSD) em páginas da Web no Dreamweaver e permitir que o Dreamweaver os otimize como imagens prontas para a web (formatos GIF, JPEG e PNG). Ao fazer isso, 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 com várias camadas ou fatias em uma página da Web no Dreamweaver. No entanto, ao copiar e colar do Photoshop, nenhuma conexão ativa com o arquivo original é mantida. Para atualizar a imagem, faça as alterações no Photoshop e copie e cole novamente.
Nota
Se usa este recurso de integração com frequência, talvez seja interessante armazenar os arquivos do Photoshop no site do Dreamweaver para facilitar o acesso. Se fizer isso, oculte-os para evitar a exposição dos ativos originais, bem como transferências desnecessárias entre o site local e o servidor remoto.
Para acessar 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 fluxos de trabalho principais para trabalhar com arquivos do Photoshop no Dreamweaver: o fluxo de trabalho copiar/colar e o fluxo de trabalho de Objetos Inteligentes.
Fluxo de trabalho copiar/colar
O fluxo de trabalho copiar/colar permite selecionar fatias ou camadas em um arquivo do Photoshop e usar o Dreamweaver para inseri-las como imagens prontas para a web. No entanto, se quiser atualizar o conteúdo posteriormente, será necessário abrir o arquivo do Photoshop original, fazer as alterações, copiar sua fatia ou camada para a área de transferência novamente e colar a fatia ou camada atualizada no Dreamweaver.Este fluxo de trabalho só é recomendado quando se quer inserir parte de um arquivo do Photoshop (por exemplo, uma seção de um layout de design) como uma imagem em uma página da Web.
Fluxo de trabalho Objetos Inteligentes
Ao trabalhar com arquivos do Photoshop completos, a Adobe recomenda o fluxo de trabalho de Objetos inteligentes. Um Smart Object no Dreamweaver é um ativo de imagem colocado em uma página da Web que tem uma conexão ativa com um arquivo original do Photoshop (PSD).Na visualização Design do Dreamweaver, um Objeto inteligente é indicado por um ícone no canto superior esquerdo da imagem.
Quando a imagem da web (isto é, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo do Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto inteligente em vermelho. Quando seleciona a imagem da web na visualização Design e clica no botão Atualizar do original no Inspetor de propriedades, a imagem atualiza automaticamente, refletindo quaisquer alterações feitas no arquivo do Photoshop original.
Ao usar o fluxo de trabalho de Objetos inteligentes, não é necessário 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, é possível alterar a versão web da imagem na página mantendo a imagem do Photoshop original intacta.
Também é possível atualizar um Objeto inteligente sem selecionar a imagem da web na visualização Design. O painel Ativos permite atualizar todos os Objetos inteligentes, incluindo imagens que podem não ser selecionáveis na janela Documento (por exemplo, imagens do fundo 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 integrada com o Photoshop, consulte Edição integrada com o Photoshop.
Criação de um Objeto inteligente
Ao inserir uma imagem do Photoshop (arquivo PSD) na página, o Dreamweaver cria um Objeto inteligente. Um Objeto inteligente é uma imagem pronta para a web que mantém uma conexão ativa com a imagem do Photoshop original. Sempre que atualizar a imagem original no Photoshop, o Dreamweaver oferece a opção de atualizar a imagem no Dreamweaver com o clique de um botão.
Selecione Inserir > Imagem.
Nota
Você também pode arrastar o arquivo PSD para a página do painel Arquivos se estiver armazenando os arquivos do Photoshop no site.Se essa for a sua opção, ignore a próxima etapa.
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.
Ajuste as configurações de otimização conforme necessário na caixa de diálogo Otimização da imagem e clique em OK.
Salve o arquivo de imagem pronto para web em um local dentro da
pasta raiz do site.
O Dreamweaver cria o Objeto Inteligente com base nas Configurações de otimização selecionadas e coloca uma versão pronta para web da imagem na página.O objeto inteligente mantém uma conexão ativa com a imagem original e avisa quando os dois estão fora de sincronização.
Nota
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 integrada com o Photoshop, consulte Edição integrada com o Photoshop.
Atualização de um Objeto inteligente
Se você alterar o arquivo do Photoshop ao qual o Objeto Inteligente está vinculado, o Dreamweaver notifica que a imagem pronta para web está fora de sincronização com o original.No Dreamweaver, os objetos inteligentes são indicados por um ícone no canto superior esquerdo da imagem.Quando a imagem pronta para web no Dreamweaver está em sincronização com o arquivo original do Photoshop, ambas as setas do ícone ficam verdes.Quando a imagem pronta para web está fora de sincronia com o arquivo original do Photoshop, uma das setas do ícone fica vermelha.
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.
Nota
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 vez usando o painel Ativos.O painel Assets também permite ver Objetos Inteligentes que podem não ser selecionáveis na janela do documento (por exemplo, imagens de plano de fundo CSS).
No painel Arquivos, clique na aba Ativos para visualizar
os ativos do local.
Certifique-se de que a visualização Imagens foi selecionada. Caso contrário, clique no botão Imagens.
Selecione cada ativo de imagem no painel Ativos. Quando você
seleciona um Objeto Inteligente, verá o ícone do Objeto Inteligente no canto
superior esquerdo da imagem.Imagens normais não possuem esse ícone.
Para cada Objeto Inteligente que deseja atualizar, clique com o botão direito
no nome do arquivo e selecione Atualizar do Original.Você também pode pressionar Ctrl e clicar para selecionar vários nomes de arquivo e atualizá-los todos de uma vez.
Nota
Você não precisa ter o Photoshop instalado para fazer a atualização do Dreamweaver.
Redimensionamento de um Objeto inteligente
Você pode redimensionar um Objeto Inteligente na janela Documento da mesma forma que qualquer outra imagem.
Selecione o Objeto Inteligente na janela Documento
e arraste as alças de redimensionamento para redimensionar a imagem.Você pode manter as proporções de largura e altura ao manter pressionada a tecla Shift enquanto arrasta.
Clique no botão Atualizar do original no Inspetor de propriedades.
Quando você atualiza o Objeto Inteligente, a imagem web é renderizada novamente de forma não destrutiva no novo tamanho, com base no conteúdo atual do arquivo original e nas configurações de otimização originais.
editar o arquivo original do Photoshop de um Objeto Inteligente
Após criar um Objeto Inteligente na página do Dreamweaver, você pode editar o arquivo PSD original no Photoshop.Após fazer as alterações no Photoshop, você pode facilmente atualizar a imagem web no Dreamweaver.
Nota
Certifique-se de ter o Photoshop definido como o editor de imagem externo principal.
Selecione o Objeto inteligente na janela Documento.
Clique no botão Editar no Inspetor de propriedades.
Faça as alterações no Photoshop e salve o novo arquivo PSD.
No Dreamweaver, selecione novamente o Objeto inteligente e clique no botão Atualizar do original.
Nota
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 para 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. |
Nenhum |
|
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. |
Copiar e colar uma seleção do Photoshop
Você pode copiar toda ou parte de uma imagem do Photoshop e colar a seleção na página do Dreamweaver como uma imagem pronta para web.Você pode copiar uma única camada ou um conjunto de camadas para uma área selecionada da imagem ou pode copiar uma fatia da imagem.Entretanto, quando você faz isso, o Dreamweaver não cria um Objeto Inteligente.
Nota
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.
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.
Nota
Escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada.
No Dreamweaver (visualização Design ou Código), posicione o ponto de inserção na página onde deseja que a imagem seja inserida.
Selecione Editar > Colar.
Na caixa de diálogo Visualização da imagem, ajuste as configurações de otimização como necessário e clique em OK.
Salve o arquivo de imagem pronta para web em um local dentro da pasta raiz do 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
Depois de colar imagens do Photoshop nas páginas do Dreamweaver, você pode editar o arquivo PSD original no Photoshop.Ao usar o fluxo de trabalho copiar/colar, a Adobe recomenda que você sempre faça as edições no arquivo PSD original (em vez da própria imagem pronta para web) e depois cole novamente para manter o fornecimento único.
Nota
Certifique-se de que o Photoshop esteja definido como o editor de imagem externo principal para o tipo de arquivo que você deseja editar.
No Dreamweaver, selecione uma imagem pronta para web que foi originalmente criada no Photoshop e faça uma das seguintes ações:
- Clique no botão Editar no Inspetor de propriedades da imagem.
- Pressione Control (Windows) ou Command (Macintosh) enquanto clica duas vezes no arquivo.
- Clique com o botão direito (Windows) ou Control+clique (Macintosh) em uma imagem, escolha Editar Original Com no menu de contexto e depois escolha Photoshop.
Nota
Isso pressupõe que o Photoshop esteja definido como o editor de imagem externo principal para arquivos de imagem PSD.Você também pode definir o Photoshop como o editor padrão para tipos de arquivo JPEG, GIF e PNG.
Edite o arquivo no Photoshop.
Volte para o Dreamweaver e cole a imagem ou seleção atualizada na 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.
Nota
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 no fundo.
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 um padrão que atuará como fundo da página.
Quando uma predefinição é selecionada, suas opções configuráveis são exibidas.Se você quiser personalizar ainda mais as configurações de otimização, modifique os valores para essas opções.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
