#layout tutorial

[juniwinkle]

TUTORIAL - Como fazer um Cronograma do zero com o Google Planilhas

Oi, tudo bom? Estava há um tempo com vontade de fazer alguns tutoriais e textinhos para auxiliar você, capista e cronomaker, a melhorar (ou pelo menos mostrar como costumo trabalhar). De primeira mão, estou fazendo aqui um tutorial de Como Fazer um Cronograma do Zero! Caso vocês façam um crono com ajuda de meu tutorial, não deixem de me marcar ao postar aqui no Tumblr para eu ver e dar amor! Qualquer dúvida, sintam-se livres para me chamar no chat ou mandar uma Ask, vou tentar sempre responder! O modelo desse Cronograma do tutorial estará disponível para vocês verem o resultado lá no fim do post!

0. Rascunho

Antes de eu fazer um cronograma, eu sempre faço um rascunho de que funções e abas ele deve ter para eu me organizar. “Se esse cronograma vai ser mostrado para os meu seguidores, como ele deve ser?” “O que a pessoa precisa para encontrar seu próprio pedido e entender em que fase do andamento ele está?” “Se o meu projeto tem uma equipe grande e muitos pedidos, o que preciso para organizar isso tudo?”. Respondendo essas perguntinhas, eu anoto (mentalmente) mais ou menos assim:

Espaço 1 (o que deve conter nele)

Espaço 2 (o que deve conter nele)

Espaço (o que deve conter nele)

Exemplo:

Menu (Espaço para “Sobre” e para 4 links de contato)

Design (título da fanfic, user de quem pediu, prazo, legenda de projeto e status do pedido)

Escrita (título da fanfic, prazo para postar, casal, legenda de projeto e status da fanfic)

Com isso em mente, você deve encaixar todas essas funções em um cronograma como se fosse um quebra-cabeças antes de passar pro papel. Costuma ajudar bastante.

#DICA: Boas referências sempre ajudam! Mas não copie o trabalho do colega, seja crítico e estude o cronograma alheio. Veja o que gosta, o que não gosta, tente pensar o porquê das coisas estarem posicionadas daquele jeito. “Por que será que elu colocou o menu ali? Será que fica mais prático assim?” “Esse banner está muito grande, acho que os meus eu farei menores” “Gostei de como ela usou as linhas, acho que farei assim no meu cronograma!”. Não faça ctrl+c ctrl+v, analise o design alheio, pegue o que gostou e faça do seu jeitinho! E às vezes nem precisa ser um cronograma, você pode se inspirar em uma capa de fanfic, um style, um alimento... Nesse tutorial, o cronograma é inspirado pelo símbolo do Yin Yang!

#DICA: Não descarte suas ideias de cara, sempre tente inovar! Geralmente para eu chegar ao modelo final, eu faço dois ou três modelos diferentes só testando as possibilidades com as ideias que tive. Essas também eu tento sempre fazer um “jogo do contrário”: se em um cronograma o espaço para pedidos ficou da direita, no próximo que eu fizer eu jogo para a esquerda. Se nesse eu usei muita linha pontilhada, no próximo usarei linhas grossas. São detalhes bobos como esse que podem te ajudar a sair do lugar comum. 

1. A base

Agora que você tem tudo definido, vamos passar para o Google Planilhas! Essas são as funções básicas do site nas barras de ferramentas:

Com isso, vamos fazer esse cronograma! 

Eu costumo começar pela cor do plano de fundo. Eu seleciono todas as células e pinto com a cor que eu gostaria que o cronograma tivesse. Dessa vez irei usar branco mesmo, mas eu costumo usar tons de cinza ou cores pastéis/acinzentadas para não doer a vista quando for usar o crono. 

Depois, vá na aba “Ver” e em “Linhas de Grade” para automaticamente tirar todas as linhas da planilha e você poder trabalhar livremente.

Demarque as áreas que você vai usar no cronograma pintando as bordas dele com a Ferramenta Borda. Pode ser usando a borda preta simples mesmo, não precisa ser do jeito que ficará no final, é apenas para posicionar tudo o que você listou no rascunho. 

Ajeite o tamanho das linhas e colunas para dar forma ao seu cronograma. Escreva alguns textos de teste para medir o tamanho que você precisará para cada segmento e ajuste selecionando a coluna/linha ao clicar no número/letra dela e arrastando sua lateral. Você também pode fazer isso clicando no botão direito do mouse e usando a opção “redimensionar coluna”. 

Para áreas onde você vai escrever um texto longo (ex.: regras, bio, avisos), utilize o site Lipsum para que ele gere um texto aleatório do tamanho que você precisar só para teste. Então selecione a área que você precisa (clique numa célula e segure o Shift para clicar na outra borda até formar a área que precisa) e use a ferramenta Mesclar Células, que transforma várias células em uma grandona que cabe seus textos. Você pode fazer o mesmo com títulos que sejam muito grandes!

#DICA: sempre tente alinhar as áreas do seu cronograma e deixe as áreas com a mesma função próximas umas das outras, isso torna ele muito mais bonito visualmente e prático de usar. Também, lembre-se que o sentido de leitura das pessoas é da esquerda para a direita, então deixe à esquerda as áreas mais importantes ou as que você quer dar mais destaque, pois é o lugar onde vão olhar primeiro.

#DICA: deixe o tamanho das linhas e colunas iguais para cada função para que o design se torne mais harmônico (desde que essa seja sua intenção). Também, lembre de mudar o tamanho de TODAS as linhas do seu cronograma para um padronizado fixo (recomendo de 20 a 25 pixels) pois, caso você use um banner, ele não ficará com borda branca quando você escrever algo porque a linha estará fixa! Veja um exemplo abaixo:

2. Fontes e Paletas de Cor

Tá aí uma parte que todo o mundo se embanana (inclusive eu) na hora de fazer um cronograma: Cor e Tipografia. Não sou muito boa explicando as teorias em si, por isso, irei deixar essa pasta do Pinterest sobre Psicologia das Cores e esse guia sobre Tipografia (parte 02, parte 03), pois acho que como base pode te ajudar bastante.

Para as paletas de cores, eu geralmente uso o Pinterest para pesquisar as paletas e o Coolors para pegar os hexcodes (é aquele código de números e letras que representam uma cor). Caso o banner seja uma parte de destaque no seu cronograma, faça seu banner primeiro e depois passe as cores dele pro Cronograma. Essa também é a hora de você mudar as linhas do seu cronograma, mas não há uma regra muito específica para isso. Só tente fazer as separações das informações de forma mais destacada e precisa, onde a pessoa consiga ler as linhas sem se perder com as informações.

Acho que não há muito mistério de como colorir e mudar as fontes de seu cronograma, por isso, essa parte conterá uma lista de #Dicas do que pode tornar seu design mais atrativo. Siga-as se quiser:

Use NO MÁXIMO 3 fontes em seu Design. Recomendo que seja 1 para os títulos e 1 para os textos, desde que a para textos seja LEGÍVEL. Tente usar só fontes Serifadas e Sem Serifas para essa parte pois elas são muito mais fáceis de ler que uma caligráfica (que você pode usar para os títulos).

Sei que vocês gostam de conceito clean e cores pastéis, mas POR FAVOR CUIDADO PARA NÃO COLOCAR TUDO MEGA CLARO NO CRONOGRAMA. Se não a gente não lê nada né? Também não coloque as fontes muito pequenas, pense nos amigos míopes de plantão. 

Cuidado também com as cores vibrantes de mais! Tente sempre as puxar um pouco mais para o cinza, cores muito abertas doem os olhos de quem lê e atrapalha a visualização.

CORES PARA AS LEGENDAS: por favor, faça-as uma diferente da outra, mesmo que você esteja usando uma paleta monocromática. É importante que quem esteja consultando seu crono saiba diferenciar o status do pedido dela, por exemplo. 

Algo que ajuda muito no cronograma se tornar intuitivo é cada área ter sua cor específica, mas seguindo a paleta de cores geral que você escolheu. Nesse que fiz, a área do Design é Branca e a de Escrita é preta, e isso se repete até nas legendas.

No fim, nosso Cronograma ficou coloridinho assim:

3. Banner

Bem, você deve ter se perguntado o que é essa área cinza logo abaixo do “@USERAQUI”, certo? Esse lugar é onde ficará o banner do cronograma, coisa que costumo demarcar já na base caso ele seja algo realmente importante para o design. Eu não tenho como ensinar a fazer um banner do zero porque isso vai do gosto e do estilo de design de cada um. Porém, eu tenho como ensinar como colocar um banner dentro da planilha.

Para que você pegue o tamanho exato do banner, recomendo que você printe seu cronograma com o zoom da tela e da planilha no 100% (para não haver alteração na dimensão). Caso a área seja grande de mais e fique cortada, tire vários prints até ter a área completa e você poder ajustar uma imagem ao lado da outra. 

Dito isso, abra o seu print no Photoshop. Agora é só ir na Ferramenta Corte Demarcado, demarcar o mais exato possível a área que irá ocupar o seu banner e clicar em “Confirmar operação de corte atual”, vulgo “ok”. 

Agora, sem mudar o tamanho dessa área que você recortou, faça o banner em cima dessa dimensão! Isso vai garantir que ele continuará com uma boa qualidade quando for colocar no Cronograma. Uma outra dica é usar a opção do Photoshop “Salvar Para Web” para salvar seu banner em PNG-24 com uma boa qualidade:

De volta para sua planilha, selecione a área que você usará para seu banner e utilize a ferramenta Mesclar Células para que a célula fique do tamanho que você fez o banner. Ainda com essa área selecionada, vá em Inserir > Imagem > Imagem na célula / Imagem sobre as células. Nesse cronograma eu irei usar “Imagem na célula” e depois disso é só selecionar o arquivo do seu banner. Ah, é bom lembrar de pintar a área do banner com a mesma cor do fundo, já que a marcação não vai nos servir mais.

Qual o melhor uso da Inserção de Imagem?

Imagem na célula - Imagem com dimensão exatamente igual da célula a qual você quer inserir. A imagem automaticamente ficará alinhada com as demais células.

Imagem sobre as células - Imagem com qualquer dimensão, já que você pode ajustar isso na hora. A imagem pode ficar alinhada com as demais células, mas não é automático.

Resultado final: 

live preview

Caso use esse cronograma para você ou como inspiração, NÃO RETIRE MEUS CRÉDITOS! Para fazer o download do modelo, é só ir em Arquivo>Fazer uma cópia.

Bem, se você chegou até aqui: PARABÉNS, VOCÊ FEZ UM CRONOGRAMA! Ah, que orgulho! 

Espero que tenham gostado desse tutorial! Caso ainda sinta alguma dúvida, não deixe de me mandar um ask ou me chamar no pv aqui do Tumblr que eu irei tentar ajudar, ok? Beijinhos e bebam água, cronomakers ~

[v-lucas]

Layout Background Exercise

For Gobelins’ entering contest, one of the request is background skills, and the ability, with a pen, to visualize yourself in a 3D space.

So I gaved myself an exercice than can be similar to what you can have during the contest, and which are the steps I’m going through :

Here is a background concept done by Armand Serrano, for the movie Lilo and Stitch.

Let’s put the following consign : try to draw the “against field” of this place (it mean, as in cinema, shooting in the opposite direction to another shot)

For this, we must be aware to : - Place our virtual camera correctly - respect perspective rules -placing correctly our objects in the space (what does make the “link” between the two shots) - Keep a cool composition -respect the design -use our imagination to field the empty space

So, let’s do this !

1. Making a Map and a good thumbnail

-It’s a good exercise to try put everything in a map, including the camera (CAM1) and visualize what we know and what we have to imagine ; not very easy, but it’s making win a lot of time for after !

- Then I just had to place the other camera (CAM2) on the other side, and begin to think about what would be in the room on the other side.

- When I did the map, I was working in the same time with a thumbnail of my scene (note : thumbnail is a very small drawing. Good to remember : small drawings for big ideas ! ) ; like this I could think about having a cool composition and match with the background in the same time. That’s why (as you might see) I decided to tilt a bit my CAM2, because I felt it more interesting for the composition.

2. Ruff drawing

- So here begin the interesting part :) it’s importent to begin by placing the horizon line, the vanishing points (in this case, two) and a perspective grid, all of this being sure it’s mathching with your thumbnail.

-Then, I built every objects, being sure it’s on the perspective, and puting all my ideas.

note : I was always thinking : this is a place where people are living, we have to FEEL It. It’s passing by using the props and the randomness of their position to suggest this idea.

3. Line Up

- On this part I was always trying to be careful about keeping the style of the artist, about props design, and the way of working the line.

4. (Bonus) Shadows

- Personnaly, I wanted to try making she shadows on a traditionnal way, as they where doing before at Disney. For this I first scanned my drawing (to have a backup in case), then I used carbon powder, I was putting stronger at some places, using an eraser to have my lights, and my pencil to go into the detail in the lighting.

-It’s important, when doing lighting, to know where the light come from, and what you want to show. Contrast is the master word ; with the light and shadow, you can choose to show more one thing than an other (for example, I chosen to show less the left part, and put on the light the right part)

My drawing could be better, about the choice of props and the angle, but I hope this tutorial helped you to see better the process to draw an “against field” from an existing layout, hope you enjoyed :)

Be free to comment, cheers !

[akissinthedark]

Video tutorial on how I made my professional style galaxy layout header, featuring Nicholas Hoult. Sidebar/content tutorials will follow. 

All resources used are listed in the description box of the video.

[huedpacks]

Layout Tutorial

Icon

1. Open Photoshop and create a new file (Ctrl + N). Width and height should be 240 pixels and the background should be transparent then click on OK.

2. Open a new file (Ctrl + O) and choose a picture for your icon.

3. Drag the picture to the base (?) and adjust the photo by using the move tool (v) and/or the transformation tool (Ctrl + T) while pressing the Shift key.

4. Go to Filter then Topaz Clean (it’s a photoshop plug-in). Then adjust the edges to the following: Accent; 1, Radius; 1.71, Sharpness; 0.10 then click on OK.

5. Open a new file and choose a PSD (i got this psd from tumblr) then drag the folder to the icon.

6. Right click on any layer then click on ‘Flatten Image’. Save your image (Ctrl + S) as PNG.

The same for the header. Only the header size is either width; 500, height; 167 or width; 600, height; 200, or 1500 x 500

[radicalroleplay]

Tutorial for a banner layout.

You need to know basic HTML to use this layout. I posted the coding but the colors and background are all things you'll want to change.

I made this layout from scratch. If you have questions just ask.

Step 1.) First you need to hide a lot of stuff and add the base font editing, etc. So add this code to your Who I'd Like to Meet: Pastebin 

(In this code, you will find the box where I had my music and a small image. I left these in the coding so you can find them. Press ctrl+f on your keyboard and search 'music:' and you will find where to paste things for them to be inside the box.)

Step 2.) Then you need to do the banner part of it. Be as creative as you want. Mine kind of happened on accident. The size is 800px wide and 300px tall.

Then you add the banner to your profile using this code. Paste it in your heroes section. Pastebin

NOTE: If the codes still hide any text, place ALL of the code in your heroes section. There are certain codes somewhere in the layout that initially hid anything pasted below the coding and I'm not sure where they are.

NOTE #2: To learn how to use the music player I used, check out our tutorial here.