Descubra como você pode criar um Site agora em DRUPAL COMEÇANDO DO ABSOLUTAMENTE DO ZERO, mesmo sem dominar nada na internet
>> Saiba como <<


[SITE MEMORÁVEL #02 ] Criando um layout do zero GUIA DEFINITIVO

Home / Web Design / [SITE MEMORÁVEL #02 ] Criando um layout do zero GUIA DEFINITIVO

Criando um site Site memorável.

Já dizia o grande Steve Jobs.

Seu trabalho vai preencher uma parte grande da sua vida, e a única maneira de ficar realmente satisfeito é fazer o que você acredita ser um ótimo trabalho. E a única maneira de fazer um excelente trabalho é amar o que você faz.

Então se prepare para essa aula incrível e memorável de como criar um layout do zero.

[Observações]

1 . Iremos usar o photoshop para essa aula de criação de layout

2. Criamos um vídeo sem áudio com passo a passo de cada execução, então fique atento e volte o vídeo quantas vezes precisar para ver cada detalhe, e se pintar dúvida deixe nos comentários.

3. Aqui é proibido desistir ok? então qualquer dúvida deixe nos comentários.

4. Queremos avaliar seu layout, mande para gente com o assunto “Meu layout” para : contato@cursosjsa.com.br

Chega de papo e vamos começar, mas antes quero que veja o projeto final dessa aula.

como criar um layout no photoshop do zero

 

Passo 01

Abra seu Photoshop e crie um documento com a seguinte largura

criando layout para web

Em seguida defina a largura e altura do projeto,  e preste bem a atenção que ele tem que estar exatamente igual a foto.

Pois uma configuração errada pode prejudicar você na reprodução do seu layout.

layout do zero passo 2

Logo você vai dar um ok para salvar essa configuração.

Depois de ter dado ok vai aparecer uma “folha” branca, pois esse vai ser nosso espaço para a construção do layout, e depois você precisa clicar em view -> New Guide Layout 

Essa opção cria linhas a volta do layout, garantindo que ele fique alinhado, pois precisamos saber exatamente a medida de alinhamento das margens a volta do layout.

Ela funciona como uma espécie de delimitador, garantindo um aspecto visual de alinhamento do layout.

layout do zero passo 3

Vamos definir 100 px para esquerda + 100 px para direita + 40 px para o topo + 40 px para o rodapé, pois nossa base de layout vai seguir esse padrão.

Após essa configuração, pode dar ok e verificar se as linhas estão aparecendo em sua plataforma.

Uma importante observação : Caso você faça algo errado e queira voltar a alteração, use o CTRL + Z para voltar uma alteração, ou CTRL + ALT + Z  para voltar mais de uma alteração.

layout-do-zero-passo-5

Tudo bem até aqui ? vamos seguir ?

Então bora nessa !!

Passo 02

Agora que você já criou corretamente seu documento, iremos criar o topo do nosso site.

Fique atento com as ferramentas que serão selecionadas nesse passo.

layout-do-zero-passo-6

Na ferramenta número 1 iremos selecionar para fazer o retângulo de preto no topo que está no passo 2, e logo no passo 3 que abre automaticamente.

Depois você vai fechar a palheta de cores e vai abrir a caixa de texto como mostra na imagem a seguir.

layout-do-zero-passo-7

Logo que você fizer isso clique no meio do documento, e o editor de texto vai ser ativado.

Escreva TOPO no meio do documento e arraste para cima, coloque ele no centro do retângulo que criamos no topo.

layout-do-zero-passo-8

uma dica muito importante, toda vez que você selecionar e fizer algo com qualquer ferramenta no photoshop você precisa entregar ela como mostra na imagem abaixo.

É como se você tivesse pegando ela emprestada e precisar devolver a todo momento.

Após devolver esse ferramenta de texto você precisa marcar uma opção no passo 2 da imagem abaixo, pois ela precisa estar ativada o tempo todo.

layout-do-zero-passo-9

A seta que está na imagem mostra que você precisa entregar a ferramenta que você usou, não esqueça de fazer isso.

Agora nosso topo está centralizado como você ver na imagem abaixo, e agora iremos seguindo construindo outras marcações do site.

layout-do-zero-passo-10

Seguindo os mesmos passos do topo iremos fazer exatamente o que fizemos acima.

layout-do-zero-passo-11

Esses passos são de fato importante, pois fazem complemento do processo de criação de um site, e logo você precisa entender bem a estrutura para criar cada detalhe.

Para criar uma régua em nosso layout iremos clicar em view -> Rules e você vai perceber que uma régua será criada nos cantos do photoshop.

layout-do-zero-passo-12

Ative essa opção e veja o resultado na imagem abaixo, pois agora podemos fazer algumas divisões em nosso site.

Isso facilita muito na hora da codificação com CSS.

Perceba a ativação das réguas na parte lateral do photoshop.

Puxe a régua da parte de cima até a parte de baixo como mostra no vídeo, pois precisamos marcar o banner com uma área de limitação.

layout-do-zero-passo-14

Como segue a imagem acima nosso banner agora também tem uma marcação de área.

Na próxima imagem veja que criamos mais uma caixa no meio do documento, e logo precisamos definir o tamanho dela.

Mas fique atento para marcar a opção da seta 2 para ela ficar com tamanho proporcional, pois se não marcar você vai ter um lado maior que outro.

Assim vai ficar desproporcional em nosso site.

layout-do-zero-passo-15

Um detalhe muito importante para a seta 3, pois todo retângulo que for editado você vai precisar clicar ali, pois você confirma a alteração na propriedade.

Caso você não clique nessa confirmação de alteração o photoshop vai fazer um som informativo “dizendo” que você precisa confirmar a alteração.

O tamanho do box iremos trabalhar com 300 px, e não esqueça também de clicar na propriedade da imagem 2, como é mostrado no vídeo dessa primeira etapa desse post.

Agora você precisa duplicar os box, então clique com o botão direito do mouse como mostra na seta 1.

Clique bem no meio meio da propriedade para aparecer essa caixa grande a direita.

Lembrando que o vídeo dessa etapa está disponível nesse artigo ok?

layout-do-zero-passo-16

Vai aparecer uma caixa pedindo para você renomear se desejar, mas antes quero dar uma informação.

Essa aula não foi organizado nome das colunas e não organizamos por pastas, pois o foco dela é usar a parte bem básica para quem deseja iniciar de forma que tenha um resultado mais rápido.

layout-do-zero-passo-17

Feito isso vai aparecer mais um bloco bem encima do primeiro, então você segure a seta do teclado mais o SHIFT e posiciona ele igual a próxima imagem.

layout-do-zero-passo-18

faça isso novamente até ter 3 box abaixo do banner, e completar os espaços.

layout-do-zero-passo-19

Para selecionar os elementos em uma só vez, você precisa segurar o botão esquerdo do mouse e arrastar para onde deseja.

Nesse caso iremos selecionar e colocar ele um pouco para cima, para alinhar abaixo do banner.

Após posicionar os 3 box você vai criar um quadrado abaixo do box 3 como está na image abaixo.

Logo que você criar esse quadrado ative uma opção no photoshop, clique em Type -> Panels -> Character Panel.

layout-do-zero-passo-20

Ele serve para ativar a ferramenta de mudança de tamanho de texto que fica a direita como mostra na imagem abaixo.

Perceba também uma pequena setinha que está com destaque de um quadrado, pois ela serve para você abrir e fechar essa ferramenta a hora que quiser.

layout-do-zero-passo-21

Agora já temos nossa base como mostra a imagem abaixo, foi realizado o mesmo procedimento no restante das caixas.

Mesmo que demore alguns minutos para você se familiarizar com a ferramenta insista, pois é só seguir os passos do mouse no vídeo.

layout-do-zero-passo-22

Agora iremos apagar a palavra “topo” e criar nosso menu.

Vá na ferramenta de texto, clique no retângulo do topo e crie o menu, para criar ele basta escrever o nome HOME e em seguida apertar a tecla no teclado “TAB” por duas vezes.

Logo você vai definir um espaçamento, então faça isso para todos, e não esqueça que o vídeo dessa aula tem cada passo dessa criação.

Repare a imagem abaixo e veja o menu em dois passos, 1º ele com 3 palavras e depois ele pronto.

layout-do-zero-passo-23

Menu pronto na imagem abaixo.

layout-do-zero-passo-passo

Fique atento no vídeo com as fontes e ajustes, claro que todo projeto está sujeito a ajustes na sua caminhada de desenvolvimento.

Pois essa vídeo aula tem por objetivo mostrar todo processo sem cortes grotesco, afinal foi tudo em tempo real, fique atento.

Logo na imagem abaixo veja que foi criado o logo do projeto, importante lembrar que esse projeto de série está em processo de desenvolvimento.

Logos e alguns ajustes vai se moldando no final do projeto.

layout-do-zero-passo-25

A criação do texto da logo foi o mesmo passo realizado com outros textos, ela foi apenas posicionada a esquerda do nosso projeto.

Agora iremos colocar uma imagem no banner do nosso site, para isso eu escolhemos uma imagem 1400×400, para ter um banner largo que fique posicionado de fora a fora do nosso layout.

layout-do-zero-passo-26

para inserir a imagem do banner basta clicar em File -> Place Embedded 

layout-do-zero-passo-27

layout-do-zero-passo-28

Após escolher a imagem ela vai diretamente abrir em seu projeto, e para ela estar correta precisamos definir o tamanho dela e alinhar a nosso layout.

layout-do-zero-passo-29

Nossa imagem foi carregada em nosso projeto, e posicionamos ela em nosso layout e ocultamos o quadrado que criamos no começo do projeto.

layout-do-zero-passo-30

Ao lado direito no retângulo 2 que demostra na imagem abaixo, perceba que tem um icone de um “olho”, pois essa opção faz o elemento aparecer e desaparecer.

layout-do-zero-passo-31

Então clique no icone do retângulo 2, logo ele ficara oculto.

Uma observação muito importante para textos dentro do projeto.

importante

Para editar qualquer texto dentro do photoshop você precisa clicar na ferramenta de texto, a mesma que usamos para criar os textos do projeto.

Clique na ferramenta de texto e depois clique encima do texto que você quer fazer a edição, logo você pode apagar parte da palavra, acrescentar cores entre outras edições.

Como mostra na imagem abaixo as paletas de edição e de cores.

layout-do-zero-passo-32

Fique atendo no vídeo dessa etapa do projeto, pois é realizada algumas configurações de ajuste no layout.

Finalizando mais uma etapa nosso layout está criando forma.

layout-do-zero-passo-33

Vídeo #01

Vídeo #02

Passo 3

Dando continuidade em nosso site, agora iremos mudar alguns elementos dentro dele, mudar algumas imagens e textos, pois alguns ajustes são necessário.

Agora iremos preencher os box com algumas imagens, claro que as imagens serão do tamanho proporcional os box 300×300.

Mas um detalhe muito importante, nos iremos criar uma mascara, ou seja, precisamos colocar a nossa imagem dentro do box sem “esticar” essa imagem ou estoura-las.

Para colocar a imagem no box iremos usar o mesmo caminho que usamos no banner.

layout-do-zero-passo-34

layout-do-zero-passo-35

Quando a imagem for importada para nosso projeto ela virar em um tamanho normal dela 300 x 300, mas uma dica bem legal é tirar um pouco do zoom com o atalho no teclado.

Pressione e tecla CTRL, deixa ela pressionada e em seguida a tecla (-) do seu teclado, sim a mesma que você faz cálculos.

Para aproximar o zoom você segue o mesmo caminho, mas ao invés de pressionar a tecla (-) você pressiona a tecla (+).

Um detalhe, caso você queira redimensionar a imagem você pode sim, mas selecione ancora ao lado do campo de colocar o tamanho

layout-do-zero-passo-36

selecionando essa ferramenta você automaticamente quando for reduzir qualquer imagem ou retângulo ele altera os lados iguais.

layout-do-zero-passo-37

Agora precisamos arrastar nossa imagem para dentro do box.

[DICA IMPORTANTE]

Caso você prefira deixar somente a imagem não tem problema, só colocar os tamanhos e posicionar uma ao lado da outra.

Após importar a imagem para o photoshop iremos fazer uma mascara, onde a imagem grande vai se adaptar a imagem que estar atrás.

Obs. No vídeo  é mostrado exatamente como fazer essas aplicações, mas siga exatamente que o vídeo pede, arrasta o elemento para cima do outro na parte direita do photoshop.

layout-do-zero-passo-38

A imagem precisa estar posicionada encima do quadrado que esta por baixo.

E logo iremos usar uma ferramenta de mascara, para colocar e imagem que está por cima dentro da imagem que está por baixo.

layout-do-zero-passo-39

Como mostra na imagem acima, clique com o botão direito do mouse onde fica o seu elemento.

layout-do-zero-passo-40

Perceba na imagem abaixo como ele ficou exatamente dentro do retângulo.

layout-do-zero-passo-41]

Depois você precisa converter os dois retângulo em objeto, ou seja, juntar eles dois em um só.

Você precisa selecionar os dois retângulos como mostra no vídeo, e depois clicar com o botão do mouse direito no elemento na parte direita, o mesmo procedimento da mascara.

layout-do-zero-passo-39

Logo depois clique para converter o objeto como mostra na imagem abaixo.

layout-do-zero-passo-42

Agora seguindo os mesmos passos você precisa fazer com os restante das imagens nos seus respectivos box.

Uma dica para você conseguir ganhar tempo e produtividade.

1 – Clica no retângulo

2- Chama a imagem

3- Faz a mascara

4- Junta as imagens

Esses procedimento tem que fixar em sua memoria.

layout-do-zero-passo-43

Perceba abaixo nosso layout saindo totalmente do zero e criando formas.

layout-do-zero-passo-44

vídeo #03

Em nossa imagem abaixo layout  pronto para ser alterado e sendo seguido com as alterações.

layout-do-zero-passo-45

Perceba o inicio do vídeo 04 que é feito um alinhamento no layout, pois fica sempre atento com um os espaçamentos.

layout-do-zero-passo-46

Iremos criar um pequeno retângulo igual a imagem acima, e depois colocar uma opacidade.

De 100% iremos reduzir algumas porcentagens, mas lembre-se que isso é uma analise pessoal, pois se você achar que está bom defina com seu gosto.

layout-do-zero-passo-48

Perceba na imagem acima que ficou uma leve transparência acima do quadrado.

Agora igual a imagem abaixo iremos escrever um nome serviço com a ferramenta de texto lembra?

Usamos ela para escrever o menu ok ?

Escreva serviço com a cor da fonte branca.

layout-do-zero-passo-50

Fique sempre atento os ajuste da opacidade, para chegar em um resultado que agrade é necessário fazer diversos testes.

Nem muito claro e nem muito escuro, mas escolha um tom que fique legível a leitura.

layout-do-zero-passo-51

Veja a imagem acima os 3 box com o mesmo padrão, e não deixe de acompanhar o vídeo com o informativo dos passos para a montagem dos 3 box.

Vídeo #04

Após ter posicionado os 3 box, iremos acrescentar um banner onde vai ficar a reserva do Hotel.

Antes precisamos aumentar nosso documento total do layout.

layout-do-zero-passo-52

Como mostra na image acima, precisamos ir até essa opção e clicar em Canvas Size, para então importar mais um banner em nosso projeto.

Obs: No vídeo foi dado dois exemplos, o primeiro dele foi para alterar a parte de cima, e o outro foi o layout para a parte abaixo.

Nos iremos usar o layout para baixo, mas caso precise de uma alteração e só ir no mesmo caminho e selecionar para onde você deseja ir.

layout-do-zero-passo-53

Perceba que nesse momento nosso projeto teve uma alteração no tamanho, e agora ele tem mais 1.000px de altura.

layout-do-zero-passo-54

Selecione toda a área e arraste para baixo como mostra no vídeo, pois agora iremos deixar um espaço na parte de cima.

layout-do-zero-passo-55

Perceba na imagem abaixo posicionamos mais um banner com a largura total do site, assim que a imagem for importada você vai ajustar os espaços igual o do vídeo.

layout-do-zero-passo-56

No vídeo é feito algumas configurações de espaçamento, fique atento e volte o vídeo quantas vezes for necessário para assim realizar as configurações com exito.

Crie um quadrado sobre o banner e coloque um pouco de opacidade sobre ele, assim foi feito na imagem abaixo.

Lembre-se que no vídeo ele também tem algumas configurações.

layout-do-zero-passo-57

Uma observação muito importante nessa próxima imagem, pois foi criada mais retângulos pequenos sobre o quadrado acima do banner.

Eles vão ser nosso formulário de preenchimento para efetuar reserva do hotel.

layout-do-zero-passo-58

Na imagem acima já com o formulário pronto em nosso projeto, repare que tem a seta apontando para as configurações da parte direita.

Fique bem atento nessas configurações durando o vídeo 5, é feito alguns ajustes de posicionamento nos elementos.

Vídeo #05

 

Após todo passo realizado acima nosso layout fica mais prático, logo você já sabe as ferramentas essenciais para criação de um layout incrível como esse.

Bem, agora no próximo passo iremos fazer um pequeno banner de oferta para uma “hospedagem” no Rio de Janeiro.

layout-do-zero-passo-59

Assista o próximo vídeo para ver como foi criado o banner dessa oferta posicionada na esquerda do layout.

Vídeo #06

 

Na imagem abaixo criamos um quadrado ao lado do banner do Rio de Janeiro, pois esse quadrado vai ser um vídeo do hotel e uma apresentação da cidade para turistas.

layout-do-zero-passo-60

Agora temos 2 quadrados posicionado um ao lado do outro, e claro, criou um aspecto muito bom em nosso site.

Vídeo #07

 

 

Seguindo com o mesmo modelo de banner , iremos criar mais um banner com uma chamada para o Réveillon 2018, isso é chamado de “Call to action”(chamada para ação).

layout-do-zero-passo-61

Veja no vídeo como foi realizado a importação do banner e como foi colocado a fonte sobre ele junto com a opacidade, pois o mesmo procedimento foi feito acima com o banner de “efetuar reserva”.

Vídeo #08

 

 

Finalizando nosso layout criamos o rodapé com 3 colunas para agrupar mais informações do site e junto um telefone fictício para o “contato dos hospedes”.

layout-do-zero-passo-62

 

Vídeo #09

Vídeo #10

 

 

Conclusão :

Cria um layout se torna fácil quando sabe usar as ferramentas corretas, e quando você segue todos os passos de criação inicial com briefing sua forma de trabalhar ganha uma performasse incrível.

Então prepare-se para se surpreender com os próximos post da nossa série SITE MEMORÁVEL.

Ah, qualquer dúvida use os comentários que iremos responder!

Até a próxima !!!


Cadastre-se em nossa lista VIP e receba mais posts dessa série incrível sobre processo para crição de sites.


Seu cadastro esta automaticamente inserido em nosso workshop de Drupal + CSS + HTML

 

 

Compartilhe esse artigo

Comments

comments