Web designers profissionais desenvolvem modelos de sites, geralmente em editores gráficos poderosos, como Adobe Photoshop. O resultado do trabalho é um arquivo com uma imagem, que neste formulário é fornecido ao cliente. Para usar o design pronto, ou seja, para fazer o layout de uma página da web, é necessário recortar o template.
Necessário
editor de gráficos raster Adobe Photoshop
Instruções
Passo 1
Abra o arquivo de modelo no editor gráfico Adobe Photoshop. Selecione Arquivo e Abrir no menu ou pressione a combinação de teclas Ctrl + O. Na caixa de diálogo que aparece a seguir, acesse o diretório com o arquivo, selecione-o na lista e clique no botão "Abrir".
Passo 2
Escolha uma escala conveniente para visualizar a imagem do modelo. Use a ferramenta Zoom ou os itens do menu de contexto. Selecione uma escala que permite posicionar o cursor com precisão de pixel. Isso é necessário para definir com precisão as linhas de referência.
etapa 3
Forme um conjunto de linhas de referência acima da imagem do modelo. Ative a exibição de réguas nas janelas de documentos, se ainda não estiver ativada. Para fazer isso, pressione Ctrl + R ou selecione Exibir e Réguas no menu.
Passo 4
Mova o cursor do mouse sobre a régua superior para adicionar uma linha de referência horizontal. Pressione e segure a tecla esquerda. Mova o cursor do mouse para baixo, para a área da imagem. Da mesma forma, usando a régua direita, você pode adicionar linhas horizontais.
Etapa 5
Adicione o número necessário de linhas de referência e posicione-as ao longo dos limites da divisão das regiões do modelo. As linhas devem passar por todos os lugares onde você deseja cortar o modelo. Eles devem restringir todas as imagens e áreas lógicas (logotipo, cabeçalho do site, menus horizontais e verticais, etc.) que serão apresentados em uma página da web.
Etapa 6
Ative a ferramenta Slice. Seu botão está na barra de ferramentas vertical.
Etapa 7
Crie o número necessário de áreas de corte usando a ferramenta Slice. Escolha uma escala conveniente para exibir o modelo. Use o mouse para definir os limites das áreas. As diretrizes adicionadas na terceira etapa fornecerão um posicionamento preciso dos limites dos objetos que você criar. Ajuste as áreas existentes, se necessário, usando a ferramenta Slice Select.
Etapa 8
Altere as propriedades das regiões de corte conforme necessário. Ative a ferramenta Slice Select. Clique com o botão direito na área desejada. No menu de contexto, selecione o item Editar opções de fatia. Na caixa de diálogo Opções de fatia que aparece, selecione o tipo de área (imagem, área vazia, tabela), o modo de preenchimento do plano de fundo, especifique, se necessário, o nome, URL de destino, conteúdo do atributo alt="Imagem" e outros valores. Clique OK.
Etapa 9
Corte o modelo. Selecione Arquivo e Salvar para Web e Dispositivos no menu ou pressione Shift + Ctrl + Alt + S. Na caixa de diálogo Salvar para a Web e dispositivos, especifique o formato e os parâmetros de compactação da imagem nos quais o modelo será recortado. Clique no botão Salvar. A caixa de diálogo Salvar otimizado como será exibida.
Etapa 10
Selecione HTML e imagens (*.html) na lista suspensa Tipo de arquivo e, no campo Nome do arquivo, insira o nome do arquivo onde a marcação HTML do modelo será colocada. Na lista Fatias, selecione Todas as Fatias. Especifique o diretório para a saída e clique no botão "Salvar".
Etapa 11
Um arquivo HTML será colocado no diretório de destino, que é, na verdade, um modelo de página da web pronto. O subdiretório de imagens conterá o conjunto de imagens nas quais o modelo original foi recortado.
