Como exportar documentos do Photoshop para o dreamweaver

Ablestock.com/AbleStock.com/Getty Imagens

Adobe Photoshop permite que você crie um layout dinâmico, enquanto Dreamweaver traz à vida na codificação HTML. O processo de exportação não é difícil, mas pode ser um pouco metódica, uma vez que requer preparação detalhada antes da exportação. documentos Photoshop, comumente referido como arquivos PSD, deve ser editado e configurado como dispositivos web e imagens cortadas por transferência para DreamWeaver. Em seguida, o arquivo tem de ser importado para DreamWeaver para codificação HTML. Em geral, o processo, leva aproximadamente 10 a 15 minutos para ser concluído, dependendo da sua familiaridade com ferramentas do Photoshop, funções e componentes.

Video: Tutorial Photoshop - Passando template de .PSD para HTML & CSS - Parte 1

PhotoShop PSD corte e Prep

Acesse o aplicativo Adobe PhotoShop, clicando em seu ícone no desktop.

Clique no "Arquivo" guia do menu no topo da tela e selecione a "Aberto" ação para carregar o arquivo PSD PhotoShop para o aplicativo.

Selecione o botão de corte da barra de ferramentas, que exibe uma imagem de uma faca. (Esta é a ferramenta fatia como o layout deve ser cortado para HTML efeitos de codificação.)

Traçar sobre as seções dos layouts para separar os elementos e criar peças individuais de layout.

Clique no "Arquivo" guia, mais uma vez, e selecione o "Salvar para a Web e Dispositivos" ação na lista drop-down.

Clique no "Salve " botão no "Web e Dispositivos" janela para criar uma versão atualizada do documento PSD que será usado para codificação HTML no Dreamweaver.

Video: 21 Fatiando e Importando para DreamWeaver - Curso Photoshop CS 4 - PORTALMAFIA.COM

Importar para o Dreamweaver

Abra o aplicativo Adobe Dreamweaver a partir do ecrã do seu computador desktop.

Clique no "HTML" opção no "Crie um novo" seção que é exibido no "Setup New Document" janela.

Localize o "arquivos" guia no canto inferior direito da tela e clique no "Itens de desktop" guia pasta para visualizar seu menu e subpastas opções colapso.

Clique no "imagens" pasta que serão listados sob os itens de desktop, como este é o local da pasta de arquivo que foi criado quando você salvou o arquivo PSD Photoshop com as atualizações cortados. Esta acção irá importar o documento Photoshop cortado na plataforma de projeto do Dreamweaver.

Atenção

Não exportar o documento do Photoshop sem cortar. Cortar o arquivo PSD Photoshop é extremamente importante. A ferramenta de corte rompe o layout para baixo para que ele não aparece como apenas uma imagem grande. Um layout é como um grande quebra-cabeça que já é colocar juntos, assim que você quer fazer o oposto. Você quer dividi-la para que possa ser totalmente funcional e acessível. Quaisquer camadas de design e elementos que representam botões, links, caixas, secções de imagem e outros itens que devem ser separadas devem ser cortados em pedaços individuais. Estes são os seus dispositivos da web, como eles fazem o site de um website. Sem esses dispositivos, você só tem uma imagem estática que se parece com um layout, mas nada vai funcionar.

Unid você precisará

Referências

EntheosWeb.com: Cortando o Photoshop Layout e exportá-lo para o Dreamweaver
Adobe: sites de design com Photoshop e Dreamweaver

Sobre o autor

Meaghan Ellis tem escrito contos, artigos de jornal, conteúdo da Web e relatórios de pesquisa de produtos para mais de 12 anos. Enquanto majoring dupla em gestão de negócios e marketing na Universidade de Southern, ela corre um design e conteúdo Web gráfico negócio baseado em casa.