Como fazer um layout div no photoshop

Criar layouts Div organizados usando fatias no Photoshop.

layouts div são projetos para páginas da Web que incluem recipientes para o conteúdo da Web, tais como imagens, texto e links. Eles ajudam a manter uma aparência uniforme para páginas da web. Adobe Photoshop de "Slice Tool" e "Salvar para a Web & Devices" comandos permitem aos usuários criar um layout Div visualmente adicionando elementos de página e, em seguida, a criação de recipientes directamente sobre o layout, em vez de usar código HTML e CSS ou depender de layouts div pré-fabricados, que também requerem conhecimento de código para personalizar.

Coisas que você precisa

  • software Adobe Photoshop
  • Abra o Photoshop e crie um novo documento Web, selecionando "Arquivo gt; Novo" no menu do aplicativo e definir a "predefinido" drop-down para "Rede." Defina suas dimensões desejadas para o seu layout no "Largura" e "Altura" campos, ou selecionar um dos tamanhos de layout da Web padrão da "Tamanho" suspenso.

  • Adicione suas imagens visuais desejados para seu layout. Estas imagens podem incluir importados usando o "Arquivo gt; Lugar" comando, formas, botões ou de texto criado com o "Tipo de ferramenta."



  • Selecione os "Slice Tool" a partir do Painel de Ferramentas e corte cada elemento do seu layout, clicando e arrastando-o com o "Slice Tool" selecionado. Criar fatias individuais para cada elemento de texto, botão, imagem ou linha. Estas fatias servirá como os elementos Div em seu layout de Web.

  • Clique no "Arquivo" menu e selecione "Salvar para a Web & Devices" para abrir a caixa de diálogo otimização, o que lhe permitirá configurar cada elemento do seu layout para que melhor possa ser exibido na Web. Ajustar as configurações de cada fatia criada clicando sobre o uso de cada um individualmente o "Slice Select Tool" no canto superior esquerdo da caixa de diálogo e alterar as configurações de formato, qualidade e de cor de acordo com o direito da caixa. Clique "Salvar" quando você tem otimizado cada fatia com suas preferências.

  • Nomeie o arquivo de layout e selecione um local para ele nos campos indicados da "Salvar Otimizado Como" caixa de diálogo. Mudar o "Formato" suspenso "HTML e imagens" e certifique-se a "Configurações" e "Slices" menus suspensos estão definidas para "Configurações padrão" e "todas as Fatias" respectivamente. Clique "Salvar." A disposição está agora pronto para ser aberto em um Web-editor como o Dreamweaver, onde você pode adicionar links e comportamentos para as seções Div você criou com o "Ferramenta de fatia."

De esta maneira? Compartilhar em redes sociais:

LiveInternet