Criando um design de site usando o Photoshop

Se você deseja criar sua própria página da Web, saiba como criar um site no Photoshop. O Adobe Photoshop é um editor gráfico. É possível desenhar layouts e seus elementos individuais. Este é um processo bastante longo e complicado. Ao longo dos anos, os web designers têm aprendido a projetar modelos e a distribuir páginas da web neles. Mas um layout simples pode coletar qualquer pessoa. Apenas o conhecimento básico e a fantasia do Photoshop são necessários.

No Photoshop para desenhar um design de site simples, até mesmo um iniciante pode

Desde a primeira vez é improvável que você obtenha uma página como os mestres de design. Mas você pode desenhar um serviço atraente e desconfortável.

Pouco sobre a criação de sites

Decodificação de alguns termos.

  • CSS (Cascading Style Sheets) e HTML (HyperText Markup Language) são linguagens de computador usadas para criar recursos da web. Se você abrir o código-fonte de qualquer página na Internet, haverá tags HTML.
  • Layout - layout e instalação de materiais a partir do layout, transformando-o em um template html. Depende de como os objetos são organizados, se eles são bonitos na composição geral, se é conveniente ler o texto e afins.
  • Camadas fazem parte do layout. Juntos, eles compõem o quadro geral. Mas eles podem ser editados e movidos separadamente um do outro.
  • O corpo é o lugar onde o conteúdo está localizado. Pode haver um pano de fundo em torno dele.
  • Frame (Frame) - o elemento da página. Um bloco com alguma informação, imagem, forma.

Faça um site deslumbrante a partir do zero só pode ser um profissional. Para fazer isso, você precisa entender o design da web e saber HTML. Já que o layout finalizado ainda deve impor competentemente.

Mas existem maneiras mais simples. Existem serviços online e programas que convertem automaticamente .psd (formato de arquivo do Photoshop) para HTML e CSS. Você apenas tem que montar corretamente o modelo.

Para usar o Photoshop não é necessário ser um artista e entender todas as opções do programa. Mas se você começou e não sabe como inserir texto, desenhar uma forma geométrica, duplicar uma camada, mudar de cor ou selecionar uma área arbitrária, você deve começar com algo mais simples. Para criar um layout no Photoshop, precisamos, pelo menos, de habilidades iniciais para trabalhar com o utilitário e entender as funções básicas (como desenhar uma linha, colocar um guia, selecionar uma fonte e coisas do tipo).

Informações gerais sobre serviços de rede também são úteis. O site pode ser caracterizado pelos seguintes critérios:

  • Página única. Todos os elementos, conteúdo e todo o conteúdo do recurso estão em um só lugar. Numa página. Para visualizar o conteúdo do serviço, não clique nos links nem abra novas guias. Ao mesmo tempo, o site em si pode ser arbitrariamente grande. Vai caber uma pequena brochura publicitária e um enorme romance de 600 páginas.
  • Multipage. Por conseguinte, inclui muitas páginas. Estes podem ser, por exemplo, “Casa”, “Fórum”, “Livro de visitas”, “Respostas a perguntas frequentes”, “Contatos”. Para cada um deles você precisa fazer um layout. Você também precisa de navegação e um mapa do site: uma seção separada com links para todas as partes do serviço. Para que o usuário possa encontrar rapidamente o marcador de que precisa.
  • "Borracha". Altera o tamanho dependendo da resolução da tela. Esticada junto com a janela do navegador. Devemos calcular antecipadamente como será o site. Se com uma largura de 1300 tudo é exibido normalmente, então, em 900 pixels, uma parte do artigo pode “ir” além das bordas do quadro, as imagens não ficarão como deveriam, e a animação em flash fechará o formulário de entrada.
  • Fixo O corpo do site não altera o tamanho. A opção mais fácil e prática. Para fazer a página parecer sólida, e ao expandir a janela, não há espaço "vazio" nas bordas, você pode fazer um plano de fundo de borracha.

Layout

Primeiro, decida qual projeto você precisa. Não é suficiente simplesmente "imaginar" e depois organizar no Photoshop. Deve ser uma visão clara. Desenhe um padrão em papel comum. Não há necessidade de redesenhar todas as imagens. Esquema suficiente: alguns retângulos e círculos, que convencionalmente denotam os elementos de uma página da web. Pense em como os quadros serão localizados, onde é melhor colocar um logotipo, onde colocar informações para os visitantes.

Veja exemplos de páginas na Internet. Pense quais você gosta e por quê. Se é um arranjo conveniente de quadros, cores agradáveis ​​ou uma abordagem interessante para o design. Copiar o design de outra pessoa não vale a pena. É o suficiente para tirar inspiração disso. Depois disso, você pode descobrir como desenhar um site no Photoshop.

  • Crie um novo documento (Arquivo - Novo). As dimensões são selecionadas com o cálculo em monitores pequenos ou baixa resolução: 1024 × 720 pixels. Esta é a largura da parte "informação" e não a imagem completa. Se você quiser uma página de 1100 pixels, será necessário criar um documento com uma largura de 1300 pixels. O comprimento, na verdade, não é fixo - depende de quanto conteúdo você deseja colocar no recurso. Estas são recomendações, não regras. Você pode criar um layout grande se quiser.
  • Ligue a régua. Pressione Ctrl + R ou vá para o menu Visualizar - Réguas. Esta é uma escala de medição. Ela aparece fora da foto. Sem isso, você terá que estimar o tamanho e a distância "a olho", o que não afeta muito o resultado final. Você pode configurar esta função no menu Edit - Settings - Units of Measurement e Rulers. Lá é melhor mudar centímetros por pixel para trabalhar com um parâmetro e não calcular quantos pontos em uma polegada.
  • Você também deve ativar a grade. Exibir - Mostrar - Grade ou Ctrl + E (você também pode desativá-lo). Este é um tipo de análogo de um notebook em uma gaiola. No Photoshop, linhas verticais e horizontais serão exibidas. Eles não aparecerão no próprio desenho. Eles podem ser vistos apenas durante a edição. Esta função é necessária para organizar uniformemente os elementos do modelo. Alguém mais conveniente para trabalhar com a grade, alguém sem ela. É melhor ativá-lo se você estiver criando um site pela primeira vez.
  • Para configurá-lo, vá para Editar - Configurações - Guias, Grade e Fragmentos. Lá você pode escolher o tamanho das células, bem como a cor e o tipo de linhas (sólido, pontilhado, sem pontos).

Um exemplo de design de sites modernos

  • Instale as guias. Entre eles estará o principal recurso de conteúdo - o corpo fixo do site. E atrás deles - um fundo de borracha. Para fazer isso, clique em Exibir - Novo Guia. Na caixa "Orientação", marque "Vertical". No campo "Posição", escreva a distância em que o objeto será da borda esquerda. Concentre-se na escala da régua.
  • São necessários dois guias - à direita e à esquerda do corpo da página. A distância entre eles deve ser de no máximo 1003 pixels para telas com resolução de 1024 × 720. Você pode especificar uma largura diferente. Mas grandes recursos são inconvenientes para visualização em monitores pequenos.
  • Por que 1003, não 1024? Se o site precisar rolar para baixo ("rolar") para baixo, o navegador terá um controle deslizante vertical para rolar. O tamanho desse controle deslizante é de aproximadamente 21 pixels. Se você não levar isso em conta, uma rolagem horizontal aparecerá. E o visitante do recurso terá que mover a página para a esquerda e para a direita para ver todas as informações.
  • O corpo deve estar no centro da tela.

Estas são etapas preparatórias do trabalho. Como fazer um layout no Photoshop depende da sua imaginação e gosto. Portanto, mais adiante serão apenas recomendações gerais de natureza técnica.

  • Primeiro, seu layout precisa de um plano de fundo. Pode ser feito independentemente ou baixado da rede. Existem muitos recursos com texturas livres. Não coloque no site as imagens que estão sujeitas a direitos autorais. Não tire um fundo brilhante ou contrastante. É melhor não usar texturas com um grande número de pequenos detalhes atraentes. Eles vão distrair o visitante do corpo da página.
  • Se você simplesmente abrir o desenho no Photoshop, ele estará em uma nova guia e não será adicionado ao layout. Realce todo o plano de fundo. Para fazer isso, você precisa do atalho de teclado Ctrl + A ou da ferramenta Seleção (localizada no painel esquerdo). Copie e cole no template.
  • Essa opção também está disponível se você clicar em Editar - Colar.

  • Uma nova camada aparecerá na lista na parte inferior direita. Clique nele com o botão direito do mouse para ver as possíveis ações. No menu "Opções de camada", você pode alterar seu nome. Nas "Configurações de sobreposição", estão as configurações básicas da imagem. Você pode torná-lo brilhar, relevo, brilho, traçado, gradiente. Se você selecionar uma opção, as alterações aparecerão imediatamente no Photoshop. Há um conjunto de estilos prontos. Então, a partir da textura padrão, soluções de design originais são criadas. E não desenhe nada extra.
  • O botão "Filtros" está na barra de menu. Lá você vai encontrar uma variedade de imitações (pastel, aquarela, lápis), estilo, texturas, esboços, destaques, borrão.
  • Você pode escolher um plano de fundo simples. A cor depende da sua preferência pessoal. Mas é melhor não torná-lo negro ou venenoso. Roupa de cama adequada e tons suaves ou frio transparente (por exemplo, cinza claro, azul claro).
  • Após as texturas, você pode coletar o site em si. Aqui você tem a liberdade de criar.
  • Para adicionar alguma forma (linha, quadrado, oval), clique no botão correspondente à direita. Ele terá a aparência e o nome do objeto atualmente selecionado para desenho. Por exemplo, “Ellipse Tool”, “Polygon Tool”. No Photoshop, o número de formas é limitado. Mas eles podem ser encontrados na Internet, baixados e instalados através do menu Edit - Set Management. No campo Tipo, especifique qual coleção de objetos você está carregando.
  • Em diferentes versões do programa, esses números são chamados de maneiras diferentes. Seja por um botão na forma de um pequeno triângulo preto (está à direita), ou por um ícone de engrenagem, ou pelo item “Forma de ponto” (está abaixo da barra de menu). Objetos podem ser combinados, agrupados, fazer composições deles.
  • Para criar um quadro de texto, clique no botão na forma de uma letra maiúscula "T". Em seguida, selecione o local onde os caracteres devem estar localizados, clique nele e digite o que você precisa.
  • Cada elemento é melhor colocar em uma camada separada. Por isso, será mais conveniente mover e editar, sem “tocar” todo o site. Para adicionar este objeto, vá para Camadas - Novo.

  • Para projetar uma imagem em uma área pré-selecionada, primeiro selecione-a e abra Editar - Colar especial. Haverá opções "Inserir em vez disso" e "Inserir fora".
  • Você pode transferir parte de uma imagem para uma nova camada. Para fazer isso, selecione-o, clique com o botão direito nele e selecione "Recortar para uma nova camada".
  • Com formas, legendas e imagens, as mesmas opções estão disponíveis como no plano de fundo: efeitos, filtros e assim por diante.
  • No Photoshop, ainda existem muitas ferramentas para desenhar: pincéis, canetas, lápis.

Você pode criar um recurso de qualidade até mesmo a partir de objetos geométricos simples.

Existem recursos com layouts gratuitos. Carregue-os no Photoshop e edite se necessário. É mais fácil e rápido do que desenhar a partir do zero.

Como transformar um layout em um arquivo html?

Você descobriu como criar um site no Photoshop e projetou seu primeiro layout. O que fazer a seguir? Afinal, não pode apenas fazer o upload para a hospedagem.

Pode ser dado ao codificador que fará um template html de alta qualidade. Mas há outra opção. Use os serviços para converter o arquivo PSD para HTML e CSS.

  • Conversor Psd2Html. Serviço online pago. Transforme rapidamente o formato do Photoshop para o modelo de página da Web. Com este recurso, mesmo a partir de um layout de baixa qualidade, você pode criar um site decente.
  • Panda HTML.
  • PSDCenter
  • Marcação de 40 Dólares.

Construtores

Os layouts também podem ser coletados em sites especiais. Geralmente há uma interface clara e intuitiva. Você simplesmente monta um modelo de várias partes. Alguns elementos são melhor desenhados no Photoshop. Então você começa o design original. Apesar do fato de que ele foi criado no construtor.

No Photoshop, não apenas desenhe. Coleta layouts para sites. Na maioria dos casos, isso é feito pelos mestres. Mas um modelo simples pode tornar qualquer pessoa. Apenas o conhecimento básico do Photoshop é necessário.