Como criar um tamanho de página web no photoshop

Se você codificar seus próprios sites ou produzir maquetes para um guru de codificação para construir nos bastidores, usar o Adobe Photoshop para criar visualizações detalhadas para a equipe de revisão e aprovação do cliente. Como os navegadores da Web exibir no mundo baseado em pixels de monitores e telas de dispositivos móveis, o foco de Photoshop em imagens bitmap combina com a visão de seus visitantes vai ver quando você terminar de construir seus projetos.

Tamanho importa

Quando você mock up ou protótipo uma página Web, manter as dimensões do monitor dos espectadores em mente que você criar arquivos de trabalho no Adobe Photoshop. Embora o site W3Schools atrai visitantes tech-centric cujos equipamentos podem não coincidir com os usuários médios do computador, suas estatísticas do site de longo prazo mostram claramente o impacto de dispositivos de visualização de grandes e altas resoluções de tela. Em janeiro de 2014, 47 por cento dos seus visitantes definir suas preferências de visualização a 1920 por 1080 ou resoluções mais elevadas, em comparação com 10 por cento 10 anos antes. Junto com versões do site em tela cheia, se você está construindo o ponto de vista de dispositivos móveis de um layout responsivo que irá se adaptar às dimensões da tela dos visitantes, você pode configurar o arquivo de trabalho em um tamanho que coincide com dimensões de tela comum em smartphones e tablets .

Ready, Set, Go

Como você instigar o processo de criação de um documento Adobe Photoshop, você começar com o básico: Dimensões, resolução e modo de cor. Defina a resolução de 72 pixels por polegada e seu modo de cor RGB para a compatibilidade online. Photoshop de "Rede" predefinido cria automaticamente um arquivo de 800 por 600 pixels, o que pode não ser o que quiser, dependendo do tipo de página que você criar e o hardware que você assumir seus visitantes utilizam. caixa de diálogo Novo do programa também mostra a quantidade de espaço em disco o documento exija. Use o conteúdo Configuração do Fundo para estabelecer um arquivo que inclui uma camada de fundo branco, começa com uma camada transparente 1 ou enche o fundo com a cor de primeiro plano atual no painel Ferramentas. Se você espera para construir muitos arquivos deste tamanho e com essas configurações, salvar a sua configuração como uma predefinição. Na seção Avançado da caixa de diálogo Novo, ligue - ou ignorar - gerenciamento de cores e atribuir um perfil de cor.

No grid

arquivos do Photoshop em grade fornecer uma área de trabalho produtivo no qual a projetar layouts Web baseadas em soluções consistentes de colunas, calhas de coluna e divisões de página vertical. Quando você configurar esses tipos de acordos, ter um momento para fazer a matemática subjacente em primeiro lugar. Adicione-se as larguras das colunas e os espaços calha entre eles para determinar a largura total da página ou dividir a largura que você deseja usar os tamanhos das unidades em que você quer dividi-lo. Com seus cálculos na mão, criar um arquivo que contém as dimensões corretas para o seu uso pretendido. Note que se você basear layouts Photoshop em qualquer sistema de medida que não pixels, corre o risco de criação de unidades de design que não correspondem a grade de pixels invisível imposta pela resolução do documento. Você verá bordas suavizadas ao redor sólidos retangulares porque suas medidas não vão cair exatamente na própria grade do arquivo. Claro, se você está acostumado a trabalhar em pontos como uma unidade de medida, um arquivo de 72-pixel por polegada destinado para a Web correlaciona exatamente com medidas pontuais.

outras considerações

Se você projetar com as telas ultra-alta-resolução dos dispositivos Retina-display da Apple em mente, criar um conjunto de gráficos em duas vezes as dimensões de seus ativos on-line regulares e servir-los aos visitantes com hardware de qualificação. Dependendo de como você codificar páginas do seu site, você pode usar dois conjuntos separados de gráficos, reduza os arquivos Retina prontos para outros visitantes ou servir-se imagens regulares para todos. Adicionar "@ 2x" - sem as aspas - para o final de nomes de arquivos website de alta resolução para que o software que carrega suas páginas pode reconhecer esses documentos. Você terá melhores resultados se você construir os arquivos maiores primeiro e criar versões reduzido deles para telas regulares, em vez do contrário, por causa do abrandamento inevitável introduzido através de operações de dimensionamento da imagem.

Versão informação

As informações neste artigo aplica-se a Adobe Photoshop CC 2014, Adobe Photoshop CC e Adobe Photoshop CS6. Ele pode ser ligeiramente diferente ou significativamente com outras versões ou produtos.

Referências

• ligação W3schools.com: Navegador exibir estatísticas
• ligação Adobe Systems: Adobe Photoshop Ajuda e Tutoriais [CC de 2014]
• ligação Adobe Systems: Adobe Photoshop Ajuda e Tutoriais [CC]
• ligação Adobe Systems: Adobe Photoshop Ajuda e Tutoriais [CS 6]
• ligação Webdesign.org: Como criar um layout de site Limpa no Photoshop
• ligação Seis Revisões: Como criar uma Web Design ilustrativa no Photoshop
• ligação Amarelo Ponte interativo: Web Design para telas Retina
• ligação Lee Munroe: 5 coisas que aprendi Projetando para alta resolução Retina Displays
• ligação Designmodo: Projetando para telas Retina, Optimize Website para @ 2x Imagens
• ligação StudioPress: Como projetar para Tela Retina da Apple

Sobre o autor

Elizabeth Mott foi um escritor desde 1983. Mott tem uma vasta experiência de escrever textos publicitários para tudo, desde utensílios de cozinha e serviços financeiros para educação e turismo. Ela é bacharel em Artes e Master of Arts em Inglês pela Universidade Estadual de Indiana.