Como converter um Photoshop Prototype para HTML Web
Photoshop é uma boa ferramenta para projetar os elementos de imagem do seu site , incluindo botões rollover, menus drop-down e gráficos que apontam para outras páginas da web. No entanto , o próprio Photoshop não é uma ferramenta de criação de página da web. Felizmente, é relativamente fácil de exportar o seu protótipo em um formato de gráficos web-friendly , e construir uma página HTML que usa esses elementos. Tenha em mente que os componentes interativos, como links de hipertexto , botões rollover e menus drop-down requer trabalho adicional. Indo além do básico é altamente dependente de sua aplicação, e pode exigir conhecimento de programação especializada. Coisas que você precisa Photoshop HTML Editor browser Show Mais instruções página da Web básica 1
Abra o seu protótipo no Photoshop e exportar para um formato de imagem suportado - web. Escolha "Salvar para Web e Dispositivos " no menu Arquivo. Na caixa de diálogo selecione JPEG , GIF ou PNG . Selecione uma qualidade de imagem , tendo em mente que a maior qualidade aumenta o tamanho do arquivo . 2
"Salvar " o arquivo em disco, dando-lhe um nome como " myPrototype.jpg . "
3
Abra seu editor de HTML e criar uma nova página web. A maioria dos editores HTML irá criar uma página web esqueleto para você. 4
Adicionar um elemento de imagem diretamente abaixo da tag de abertura
. O elemento de imagem terá a forma : . 5
Salve sua página da web e carregar em qualquer navegador < . br > Além Basics 6
melhorar seu layout usando tabelas ou Cascading Style Sheets (CSS) para posicionar o seu layout. O método preferido é tomar as camadas individuais, ou fatias , criado em Photoshop e posicioná-los usando CSS. Feito corretamente , isso cria um layout " líquido " que reposiciona o layout como o navegador é redimensionada. 7
melhorar a velocidade usando repetindo elementos de fundo . No Photoshop, criar um grande 5 -pixel fatia de sua formação e salvá-lo para o arquivo. Em HTML, você pode repetir o elemento usando o atributo do seu
,
ou estilo CSS fundo . Sintaxe para cada caso varia , de modo a verificar o seu guia HTML. Certifique-se de definir o fundo atribuir a " repetição ". 8
Usar mapas de imagem para criar links simples de uma imagem para outra página web. De acordo com o desenvolvedor web Gregory Hodges, criar um elemento
