Criando um Layout - parte 1


Olá! Essa é a primeira parte do post que algumas pessoas sugeriram sobre como criar um layout, algo divertido para blogueiros, que nos permite brincar com HTML da forma que quisermos! Nesse tutorial vou mostrar o processo de criação do template free Chibi Kawaii, mas você pode usá-lo para começar suas modificações e criar o que quiser. Lembrando que este é apenas o modo como faço, porque não há regras quando se trata de criatividade, assim, darei dicas para criar um cabeçalho com Photoshop, elementos que acredito ser meio que "padrão" em todo layout, um pouco sobre HTML, CSS e alguns códigos. A sugestão de vários leitores em comentários e no Uservoice foi para que fizesse um post completo e bem explicado, então ficou super detalhado com links, informações e o exemplo prático no próximo post.
1. Crie um "Esboço" ou PSD
Antes de passar para o HTML, é legal ter em mente como será ou como quer que fique o layout. Eu sempre crio um esboço usando o Photoshop, começando pelo cabeçalho e com base nele, o restante em todo o blog; faço isso para ter noção das cores, que imagens ficarão melhores e quais fontes mais adequadas. Mas é preciso tomar cuidado com a parte visual de um layout... 
Cores: geralmente uso no máximo 4 ou 3 cores, todas em tonalidades claras de rosa, lilás, azul e verde; já vi recomendações na internet de optar por cores claras para uma melhor visualização de quem estiver do outro lado e por 3 cores principais. Ultimamente tenho visto que quanto mais simples o modelo, melhor; existem blogs que usam o branco como predominante e 1 cor para realçar menus e outros elementos. Em blogs com conteúdo kawaii podem ser usadas candy colors, cores mais suaves ou pastel colors; para público adolescente, geralmente a gente vê cores candy mais fortes, não excessivamente, em blogs com conteúdo mais pessoal, de fotos, livros, geralmente se usa tons claros de azul, cinza, rosa ou branco mesmo, tem também os de moda em que se usa preto, rosa, vermelho, os de tutoriais com laranja, cinza, preto, branco ou super simples para destacar conteúdo, os de músicas branco, preto, cinza, verde...mas como disse, não é regra, apenas sugestão.
Imagens e Recursos: Para tornar o layout mais bonito pode-se contar com imagens, fontes e outros recursos também. Mas tem que tomar cuidado com a questão dos direitos autorais; você pode encontrar vetores incríveis em bancos de imagens como Freepik (que tem muita coisa gratuita), Shutterstock (possui planos pagos para download de imagens de todos os tipos que se possa imaginar) e DeviantArt (meu favorito em que quase tudo é grátis e nossa fonte nesse post), por exemplo. Para um layout, precisaremos de:
PNGs: veja alguns packs de pngs (imagem sem fundo);
Fontes: nesse caso usaremos as do Google Web Fonts;
Shapes para Photoshop: são formas personalizadas;
Styles para Photoshop: são efeitos para textos.
Aqui no blog já deixei dicas de programas, sites e recursos, dicas mais básicas, junto a recursos e tutoriais de styles, actions, brushes, vectors, pngs...assim como usá-los no Photoshop, tudo pode ser encontrado nas tags Tutoriais, Downloads, página arquivo ou pesquisando pelo blog. Se quiser, pode acessar meu Deviantart: KawaiiPrincess2.

2. Tenha Bons Editores de Imagem, como...
Photoshop: Existem versões portables pela web; veja aqui como baixar o CS6 sem que expire ao passar 30 dias de teste grátis. O Gimp pode ser boa opção gratuita, inclusive para criar PNG. Dá para criar PNGs como o Pixlr também. Mas gosto de usar mesmo o Photoshop; a versão que possuo foi encontrada no Candylland, da Gizaa, mas o link não está mais disponível para download eu acho.
No geral, para criar o cabeçalho do nosso modelo de exemplo, criei uma camada, cliquei com o botão direito sobre ela, escolhi Opções de Mesclagem, usei esse background (para usar como Padrão/Pattern no Photoshop, abra a imagem no programa e clique em Editar-Definir Padrão), sobreposto em uma forma quadrada criada com a ferramenta Shape. Deixe marcado Clarear para o background ganhar a cor que estiver sendo usada na forma.
Usando shapes, 'desenhei' a cortininha, o background com babadinhos, os quadrados para posts e sidebars, nos quais apliquei estilos. Por último, posicionei o PNG da menininha. Assim foi feito um cabeçalho simples. Com o tempo e uso do programa, com certeza você criará muitas coisas lindas!

3. Entendendo o Básico em HTML e CSS
Em todo template você irá encontrar uma série de códigos chamado HTML (Linguagem de Marcação de HiperTexto). Sem esses códigos os navegadores não conseguem mostrar uma página, blog ou site. Leia esse artigo para entender melhor sobre HTML e este para conhecer os elementos básicos de HTML para Blogger (acredite, vai facilitar muitas coisas!!!)
E dentro desses códigos existem outros conhecidos como Tags, que estão entre <> ou </>, tipo <body>e</body> <head>e</head>, CSS (folha de estilos), responsáveis pela maior parte da aparência do que é visto. Leia aqui para entender melhor. Digamos, por exemplo que você queira inserir um menu com letra rosa em um template, então precisará usar CSS tipo: .menu {color: #fcc;}, ou seja, em CSS usamos o nome da classe acompanho de ponto final ou "#" seguido do conteúdo dentro de {}. No Blogger, o CSS pode ficar antes de </b:skin> ou entre <style> e </style>. Também há em HTML a linguagem de script, sendo muito usada no Blogger a do tipo JavaScript, responsáveis por fazerem certos códigos serem executados ou funcionarem, como slides por exemplo.
É legal ter instalado em seu computador um editor de HTML também; recomendo o Notepad++, que lida com arquivos de quase tudo quanto é tipo, como javascript, texto, css...
Outra coisa legal é ter em mãos (na tela rsrsrs) uma tabela de cores ou gerador de cores para pegar códigos das cores em HTML. Parece estranho tudo isso mas veremos como que na prática é bem simples...no próximo post ;3






Postar um comentário

10 Comentários

  1. Se não fossem seus tutorials o layout do meu blogue seria super pãozinho sem sal ;w; Estou trabalhando em uma página creditando os recursos utilizados e colocarei um link para o Reino Kawaii. ♡ Obrigada pelos recursos fantásticos!

    Se não for incómodo, poderia dar uma olhada crítica ao aspeto do layout do meu blogue? (( vc é meu ídolo de layouts shhh ))

    「 Milky☆ChocoLace 」

    ResponderExcluir
    Respostas
    1. Obrigada :D Não sabe o quanto fico feliz em ter ajudado!!!
      Visito sim, mas também estou aprendendo ainda, não posso dar crítica profissional, mas darei minha humilde opinião ok?
      Super beijus <3

      Excluir
    2. De nada! Claro, obrigada ;w; Ainda sou muito principiante e qualquer ajuda é bem vinda.
      Abraço ♡

      Excluir
  2. Esse tuto ajuda imenso^^
    Tou ansiosa pela 2ª parte.

    Kissus~

    http://lucy-catching-fire.blogspot.pt/

    ResponderExcluir
  3. Está sendo muito útil pra mim, continue sim?

    PS: Você podia dar uma explicada sobre CSS, que eu não entendo nada :O

    Beijos,
    Teimosa Sim.

    teimosasim.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ok. No próximo post acho que vai ficar melhor pra entender ^___^
      Bjus...

      Excluir
  4. Anônimo16 julho

    Roberta sua linda sabe onde achar a ferramenta ''shapes'' (não sei se é assim) no PS CS6? não consigo achar no meu PS...

    ResponderExcluir
    Respostas
    1. O atalho é a tecla U. Essa forma personalizada que citei no post é a Custom Shape; a ferramenta Shape ou Forma tem retângulo, retângulo arredondado, elipse, polígono e forma personalizada (custom shape) :3

      Excluir
  5. Oi Roberta eu amei o seu LAY tem as minhas cores favoritas e eu ainda to aprendendo como fazer Layout, mas eu queria muito saber se vc disponibiliza o seu para downloads ? claro q eu ia modificar muitas coisas pra ficar mais a minha cara e nn ficar igual ao seu !

    ResponderExcluir
    Respostas
    1. Eu disponibilizo templates free sim :3 Dá uma olhadinha na tag Templates free.
      Mas se refere ao que uso atualmente, foi feito pelo site soratemplates, é gratuito para download, o link tá lá no final do blog :)

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up