Enquanto o Photoshop é projetado principalmente para editar e melhorar fotos e criar gráficos, você pode usar " Slice Tool " do programa e "Salvar para Web e dispositivos " opções para criar páginas da web a partir do seu arquivos de imagem PSD . Use a ferramenta Fatia para cortar (ou " fatia " ) do PSD em seções. Cada fatia torna-se um elemento web separada, como um botão ou campo de texto . Photoshop coloca cada fatia em sua própria tabela HTML. Você pode então adicionar hiperlinks ou outras tags HTML para as várias fatias e exportar o PSD para uma página web HTML. Coisas que você precisa
Adobe Photoshop CS3 ou mais tarde
Show Mais instruções
Criando uma página da web no Photoshop
1
Comece uma nova imagem PSD no Photoshop com as dimensões que você deseja para sua página web , assim: Clique em "Arquivo " na barra de menu e escolha "Novo" para exibir a caixa de diálogo Novo. Digite a largura da página (em pixels) no campo " Largura" e da altura (em pixels) no campo " Altura " .
2
Tipo "96" no campo "Resolução " e clique em " OK. " Isso cria uma tela em branco para a sua página web.
3
Criar os gráficos banners e botões na parte superior da página. Você pode importar imagens existentes e colocá-los onde quiser ou usar gráficos do Photoshop e ferramentas de texto para criar e layout do banner.
4
Selecione a ferramenta " Slice" (quinto botão de cima no Toolbox) . Se a ferramenta Slice não estiver sendo exibido , clique e segure o botão e escolha " Slice Tool " do fly -out.
5
Arraste o cursor do mouse em torno do primeiro botão ou área no banner onde você deseja criar um link. Photoshop cria uma caixa , ou " fatia ", em torno do objeto e coloca -lo em uma mesa. Quando você exporta a página, as fatias são exibidas como objetos separados em tabelas HTML individuais.
6
botão direito do mouse na fatia e escolha " Opções Editar fatia " no menu fly-out para abrir as Opções da Fatia caixa de diálogo . Use esta caixa de diálogo para definir as propriedades de seu botão. Por exemplo , digite o link URL no campo " URL" . Entre na página de destino do navegador , as tags alternativas , e assim por diante . Clique em " OK".
7
Repita essas etapas para a criação de botões e opções de edição de fatia para cada área que deseja fazer clicável.
8
Use a ferramenta Slice para definir uma área na página onde você deseja colocar uma caixa de texto . Botão direito do mouse na fatia e escolha "Opções Editar fatia " no menu fly -out.
9
Clique no botão " Slice Type" drop-down e escolha " Sem Imagem ". O " texto exibido na célula" campo é exibido . Você pode digitar o seu texto neste campo ou copiar e colá-lo a partir de um processador de texto. Quando terminar, clique em "OK ".
10
Clique no botão " Slice Type" drop-down e escolha " Sem Imagem . " O " texto exibido no campo celular " é exibida. Você pode digitar . . seu texto neste campo ou copiar e colá-lo a partir de um processador de texto Quando terminar, clique em "OK "
Observação: Este campo suporta a maioria das tags HTML. Por exemplo, para fazer algumas das itálico texto , basta colocar o texto entre os " seu texto " tags. Use "
" para criar quebras de parágrafo , e assim por diante .
Note também que o texto nesta tabela não exibe dentro Photoshop --- você não pode vê-lo até que você exportar a página.
11
Continue adicionando e definir fatias de texto, imagens, gráficos, e assim por diante , até que você termine o layout.
12
Clique em "Arquivo " na barra de menu e escolha "Salvar para web e dispositivos. " Isso abre a caixa de diálogo Salvar para a Web e Dispositivos . Use esta caixa de diálogo para controlar a cor de fundo, compressão e qualidade de imagem, e assim por diante .
13
Clique no botão "Salvar" para nome e exportar a página web.
< Br >
