Como exportar documentos do Photoshop para o Dreamweaver

Escrito por meaghan ellis Google | Traduzido por caio amorim
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como exportar documentos do Photoshop para o Dreamweaver
Crie sites com layouts diferentes e dinâmicos, utilizando o Photoshop e Dreamweaver (apple mac computer keyboard image by david hughes from Fotolia.com)

O Adobe Photoshop permite que você crie um layout dinâmico, enquanto o Dreamweaver o "trás a vida" em código HTML. O processo de exportação não é complicado, mas pode ser um pouco metódico, já que ele requer uma preparação detalhada antes de exportar. Documentos Photoshop, comumente conhecidos como arquivos PSD, devem ser editados e configurados como dispositivos de web e imagens cortadas para transferir ao Dreamweaver. Depois, o arquivo deve ser importado ao Dreamweaver para codificação HTML. O processo completo leva, aproximadamente, de dez a 15 minutos para ser feito, dependendo da sua familiaridade com as ferramentas, funções e componentes do Photoshop.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

O que você precisa?

  • Arquivo PSD do Photoshop
  • Adobe DreamWeaver

Lista completaMinimizar

Instruções

    Corte e preparação do PSD PhotoShop

  1. 1

    Acesse o programa Adrobe PhotoShop clicando no ícone na área de trabalho do seu computador.

  2. 2

    Clique na aba "Arquivo", na parte superior da tela e selecione "Abrir" para carregar o arquivo PSD no PhotoShop.

  3. 3

    Selecione o botão de corte na barra de ferramentas, que é uma imagem de uma faca. (Trata-se de uma ferramenta de corte que mostra como o layout deve ser cortado para a codificação HTML).

  4. 4

    Trace sobre as seções dos layouts para separar os elementos e criar partes individuais do layout.

  5. 5

    Clique em "Arquivo" novamente e selecione "Salvar para web e dispositivos" na lista de opções que irá aparecer.

  6. 6

    Clique no botão "Salvar" na janela "Salvar para web e dispositivos" para criar uma versão atualizada do documento PSD que será usado na codificação HTML no Dreamweaver.

    Importando para o Dreamweaver

  1. 1

    Abra o Adobe Dreamweaver clicando no ícone da área de trabalho do seu computador.

  2. 2

    Clique na opção "HTML" abaixo da seção "Create New", que é exibida na janela "New Document Setup".

  3. 3

    Localize a aba "Files" no canto inferior direito da tela e clique na aba da pasta "Desktop Items" para ver seu menu e opções de subpasta.

  4. 4

    Clique na pasta "Images" que estará listada abaixo dos items da área de trabalho, pois este é o local da pasta de arquivo que foi criado quando você salvou o arquivo PSD com as "fatias" atualizadas. Esta ação importará os documentos divididos do PhotoShop para a plataforma de design do Dreamweaver.

Dicas & Advertências

  • Não exporte os arquivos PSD sem dividi-los, pois é extremamente importante. A ferramenta de corte divide o layout em partes, assim ele não aparece como uma única grande imagem. O layout é como um grande quebra-cabeça que já está montado, mas que você deseja fazer o contrário. Ao desmontá-lo, ele ficará funcional e acessível. Quaisquer camadas e elementos de design representam seções de botões, links, caixas de texto e imagens e outros itens que devem ser separados e divididos em partes individuais. Esses elementos são seus dispositivos web que fazem o website funcionar. Sem eles, você só teria uma imagem parada que parece um layout, mas nada iria funcionar.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível