Dica do Mês: Layouts

[CJean]

E aí, turminha! Estou aqui de novo para colaborar com a comunidade do MF com uma dica diferente. Ao contrário da grande maioria dos "acervos de conhecimentos" da seção, esta dá foco para uma área significativamente mais simples: Layouts.

Muitos devem estar se perguntando o porquê desta dica. Bem, como eu já disse, é fácil de se fazer, não há dúvidas quanto a isso. Entretanto, o foco não é apenas ensinar como fazer -para os iniciantes- mas dar algumas dicas para os usuários mais experientes aperfeiçoarem seus trabalhos. Ainda mais atualmente, onde a parte estética da fake é supervalorizada, nada melhor do que incrementar sua qualidade visual, não é mesmo? :p

O tutorial foi criado com base nos meus conhecimentos adquiridos aqui na seção ao longo do tempo. Somado à isso, está o poder do Photoshop, aplicativo que será usado neste tutorial. Se você tem e usa Fireworks, não se preocupe: é perfeitamente possível a utilização da maior parte dos efeitos e técnicas que ensinarei, entretanto, é bem provável que você tenha um pouco de dificuldade para achar algumas ferramentas que eu citarei já que os dois programas diferem em certas ferramentas e funções.

Caso você seja novato em fakes, o ideal é escolher um programa que edite imagens para poder começar seus trabalhos. Eu particularmente recomendo o Photoshop, embora mais difícil o aprendizado, possui um vasto repertório de efeitos. Além dele, há o Fireworks que também é um bom editor, mais leve e fácil de aprender, mas com menos recursos. Ainda há outra opção, bastante conhecida pelo pessoal, mas extremamente limitado: o Paint.

Para aprender sobre esses programas, fornecerei alguns links que lhe ajudarão:

[Tutorial] Fakes no Photoshop: Tutorial feito por mim que dá uma noção básica de como trabalhar com o Photoshop.

A Bíblia - Fazendo Fakes usando o Fireworks - COMPLETO!: Para quem optar pelo Fireworks, aí há excelente tutorial para realizar boas fakes.

Coletânea: Os melhores Artigos e Tutoriais: Se você quer trabalhar com o Paint, ou ainda achou os outros dois tutoriais difíceis ou incompletos, aconselho a dar uma lida nesse tópico. Há um grande acervo de tutoriais para você se tornar um faker completo.

A primeira coisa que você deve saber é que existem vários tipos de layouts: com apenas um traço, com molduras, com molduras e espaçamento, com espaçamento e sem molduras etc. Porém, isso não altera de forma alguma o modo como sua fake será vista. O que determina a qualidade do layout, na verdade, é o alinhamento correto dos quadros, a sua simetria, a não existência de elementos em cima do layout, os enfeites harmônicos que nele são inseridos.

Antes, vamos entender o que é um layout, como e para o que ele funciona.

Layout é um esboço mostrando a distribuição física, tamanhos e pesos de elementos como texto, gráficos ou figuras num determinado espaço. Pode ser apenas formas rabiscadas numa folha para depois realizar o projeto ou pode ser o projeto em fase de desenvolvimento.

Adaptado do Wikipédia

Portanto, para as fakes, o Layout será o conjunto Corpo + Moldura.
Existem casos em que o usuário não utiliza um layout completo, ou seja, não usa um corpo ou moldura. Ruim, dependendo de como for feito, não fica, mas caso fosse completo, teria resultados melhores. Veja melhor na imagem abaixo.

Os nomes usados não são absolutos, ou seja, alguns eu inventei para ficar mais fácil a referência, facilitando o aprendizado.

1. FERRAMENTAS:


Antes de começarmos a trabalhar aqui, vamos estudar um pouco as ferramentas que usaremos no Photoshop. Observe a imagem abaixo:

- A primeira ferramenta será essencial para você poder alinhar os quadros. Portanto, bastante atenção ao usá-la, se você não teclar V não poderá movimentar os objetos das camadas.

- As 3 seguintes são exclusivas para seleção. Com excessão da Magic Wand Tool, que seleciona por cores, as outras selecionaram a área. O Lasso Tool é mais indicado para selecionar áreas irregulares, com algumas curvas. Já o Marquee Tool para figuras que assemelhem-se à geometria como círculos e quadrados, pois a seleção precisa proporcionada facilitará seu uso.

- O Zoom Tool é mais para facilitar seu trabalho. Você pode perfeitamente trabalhar em uma fake sem usá-lo, mas poderá acabar cego de tanto forçar as vistas! :eek:

As 5 ferramentas citadas não são as únicas do programa, mas serão as que você provavelmente usará mais (pois depende muito do estilo de produção que você adotará). Todavia, caso queira saber mais sobre outras ferramentas, visite o tópico que ensina o básico para mexer no Photoshop.

Antes de começar a dica, deixo claro que ela tratará -para os iniciantes- apenas de um tipo - que particularmente acho o mais fácil. Para quem já tem algum conhecimento tem uma área especial do tutorial para vocês.




Certo, mãos à obra, fakers!

O primeiro passo é visitar a Coletânea de Layouts do Kamino, pois, além de ser um ótimo tópico, será a base da nossa dica.

No tópico referido, você encontrará vários modelos de molduras para o layout. Escolha a que melhor combina para a temática da sua fake. Caso nenhum layout que esteja lá tenha lhe agradado, não se preocupe: segue abaixo um método bem simples de fazer o layout. Observe:

CRIAÇÃO:

- Selecione um dos modelos a seguir:

7x7 SQMs


8x8 SQMs


9x9 SQMs

- Feita a escolha, copie a imagem e cole no seu editor de imagens (Fireworks ou Photoshop, Paint será um problema ._.)

* Imagem aberta no Photoshop CS4


- Agora, aperte a tecla W para selecionar a Magic Wand Tool e configure-a conforme a imagem abaixo.

* Repare que a opção Contiguous está marcada.


- Selecione o quadrado branco de dentro. Provavelmente, a imagem ficará assim:

- Aperte Delete. O quadrado selecionado será deletado. Caso o arquivo que você esteja trabalhando possua uma camada Background, delete-a, senão o fundo não ficará transparente!

* Repare que a miniatura da Layer 1 está transparente, o problema é o camada Background.
** Para visualizar a paleta de camadas, aperte F7.


- Se você fez tudo certo, sua imagem estará assim:

E sua paleta de camadas assim:

- Para finalizar a "parte chata", selecione o contorno branco que está entre os pretos que sobraram.

* Sua tela ficará assim provavelmente.


- Duplique a parte selecionada da camada com o comando CTRL+J. Sua imagem não deve ter mudado aparentemente, entretanto, olhe sua paleta de camadas.

* Repare que a segunda camada é apenas o contorno branco, sem os outros dois contornos pretos.


- Terminada essa tortura, vamos para parte legal. Procure na Internet uma imagem abstrata ou qualquer uma de sua preferência. Pegarei como referência esta aqui.


- Cole a imagem no arquivo que estamos trabalhando.

- Sua paleta de camadas deve estar assim:

- Na camada da imagem que colamos, Layer 3, clique com o botão direito em cima do texto. Dentre as opções que aparecerem, selecione Clipping Mask.

* Sua paletadeve estar assim. Repare que há uma seta na Layer 3 em direção à Layer 2.


- Agora, repare como está sua imagem:

* Observe que o contorno branco sem os pretos foi preenchido pela imagem. que colamos.


- Caso você queira, é possível mudar a posição da Layer 3 em relação à Layer 2. Aperte a tecla V, Move Tool, para mover a imagem.

Dei uma mexida na minha e ficou assim:

Certo. Sua moldura já está concluída. Se você quiser, pode adicionar outros efeitos, como blur, blendagem ou alteração de cores, mas tratarei acerca disso depois. Agora você já pode começar a alinhar as molduras. Vamos para a próxima parte do layout.

ORGANIZAÇÃO:

- A primeira parte da organização é estipular que tipo de layout você fará. Seguem abaixo alguns exemplos:

Sem espaçamentos



Espaçamentos apenas entre as molduras



Espaçamentos entre molduras e fundo

* Existem outros formatos, mas todos partem de uma dessas bases.

Tá bom. Agora fica a seu critério escolher qual tipo irá fazer. O método para alinhar é o mesmo em todos, o que muda são as distâncias entre moldura e fundo. Segue abaixo o método de alinhamento.

ALINHAMENTO:

- O primeiro passo para começar a alinhar suas molduras e criar um layout, é criar um documento maior para se trabalhar. Sinceramente, o tamanho não fará diferença aqui. Escolha um do seu agrado contanto que a altura seja maior que largura. (Misericórdia para com o layout do fórum, pfv)

- EU criarei um documento aqui com um valor random. Sei lá, vou fazer 780px de altura por 300 de largura.

* Fundo transparente porque excluí a camada Background. Faça o mesmo.


- Agora vou colar minha moldura em cima desse novo arquivo. Repare que sua moldura precisa estar com fundo transparente. Se quiser salvá-la, opte por .PNG, caso contrário é só juntar todas camadas do seu trabalho anterior, CTRL+SHIFT+E, selecionar toda a camada, CTRL+A, copiar, CTRL+C e colar, CTRL+V no seu novo documento.

* Repare que a moldura quando for colada no novo documento provavelmente será centralizada.


- Aperte a tecla V e arraste a moldura até a ponta do Layout conforme exibe a imagem:

- Preste atenção: da forma de organização que você escolheu antes, haverão 3 modos de se alinhar agora. O segredo é o mesmo, mas vou mostrar como fazer em cada um.



1. SEM ESPAÇAMENTOS

- Duplique a camada que contém sua moldura através do comando CTRL+J. A aparência do trabalho não mudará, entretanto sua paleta de camadas terá uma cópia da moldura.

- Aperte a tecla V e mova a cópia da moldura para baixo, conforme exibe a imagem.

* Repare que o correto é deixar 1 pixel preto separando as molduras e não dois, pois fica um traçado grosso e diferente do padrão.


- Repita o processo até o o final da coluna. Se você optou pela mesma dimensão que eu, vai encontrar um problema: a próxima moldura fica incompleta, pois o documento acaba antes.

- Não precisa ter um ataque de pelanca e começar a se babar, ok? A solução é bem simples. Aperte a tecla C para selecionar a Crop Tool representada por este ícone:

- Agora você irá fazer uma seleção com essa ferramenta. O diferencial dela para as demais é que ao invés de ficar apenas na seleção, ela corta ou aumenta nossa imagem.

* Caso você aperte ENTER, a área escura será deletada.


- Como queremos aumentar nossa área, vamos arrastar a aresta para baixo para que caiba mais molduras. O tamanho que será arrastado deixo por sua conta. Eu arrastei só um pouco e ficou assim:

- Se analisar, sobrou um espaço desnecessário. Caso seja postada uma fake com esse espaço transparente será considerado um erro, pois haverá um espaço vazio entre uma parte da fake e outra. Para arrumar é simples: vamos usar a Crop Tool novamente. Dessa vez, cortaremos a parte desnecessária.

- ENTRETANTO, tem um detalhe que precisa ser feito antes. A última linha preta da última moldura deve ser apagada, senão teremos aquele problema citado anteriormente na hora de juntar as molduras: um contorno de 2px, diferindo dos demais.

- Para facilitar, uma dica: aperte Z para escolher a Zoom Tool e aumente a proporção visual para facilitar na hora de apagar.

- Selecione a Borracha através da tecla E. Se a borracha estiver com suavização para apagar, deixe-a sem, senão será chato de apagar. Siga a configuração abaixo:

- Apague a última linha preta.

- Agora você pode usar a Crop Tool e cortar a parte vertical desnecessária.

* Existe aí duas imagens, ou seja, futuras partes de uma fake. O layout se encaixou perfeita e uniformemente.


- Se você já entendeu o macete, perfeito. Se ainda não entendeu o esquema e como continuar, não tem problema. A próxima parte é mais simples.

- Imagino que sua paleta de camadas deve estar assim ou parecida:

- Repare que há 3 camadas: 1 para cada moldura. Não existe a camada Background, pois ela é nossa inimiga. Agora vamos juntar as 3 molduras com aquele comando mágico: CTRL+SHIFT+E.

- Pronto, todas as molduras foram reunidas em uma camada. Dê um CTRL+J maroto e arraste o grupo de molduras para a direita até ficar 1 px de diferença entre um molde e outro de acordo com a gravura abaixo.

* Voltamos com o mesmo problema da falta de espaço.


- Para resolver o problema, a solução já é conhecida: Crop Tool. Vamos aumentar a área para caber as molduras na segunda coluna. Depois, apagamos a sobra e ficamos com o tamanho exato. (Dessa vez não é necessário apagar o pixel preto que sobra, pois não vamos encaixar nenhuma outra parte da fake na mesma linha.)

- Essa regra vai se aplicar a todas as partes da fake, exceto a última! Como podem ver, sempre falta 1 linha preta ao final de cada parte. Como é a última, não haverá outra para completá-la. Quando isso acontecer, use o Crop Tool e aumenta bem pouco a área do objeto. Faça uma linha preta de 1px com a ferramenta Pencil Tool.

* Acionada através da tecla B. Se vier outra figura ao invés da que está representada, aperte SHIFT+B até alternar para a correta.

Pronto. Layout sem espaçamentos terminado. Sim, pode ter levado tempo, mas é só da primeira vez! Afinal podemos reaproveitar o layout mudando a cor das molduras. :thumb:




2. ESPAÇAMENTOS APENAS ENTRE MOLDURAS

Aqui as ferramentas que serão usadas são as mesmas, entretanto a única diferença é o cuidado especial com o espaçamento entre as molduras. Fácil.

- Duplique a moldura com CTRL+J. Acione a Move Tool com a tecla V e alinhe-as da seguinte maneira:

* Observe que agora devemos deixar os 2 pixels preto do contorno para o alinhamento ficar correto.


- Agora que as molduras estão alinhadas, ainda com a Move Tool selecionada, dê um SHIFT+↓ . O objeto (moldura) andará 10 pixels para baixo. Assim ficará mais fácil de alinhar as outras. O valor que andará o layout, você pode estipular, mas de 10 em 10 é mais prático na minha opinião.

* Haverá uma distância de 10 pixels entre uma moldura e outra dentro do layout.


- Duplique até ter a quantidades de linhas que você quiser. EU optei por 3, mas apenas para deixar leve o tópico. Independente disso, você tem de deixar 10 pixels sobrando entre o último quadro e o fundo. Assim, ele se ligará de forma correta com a próxima parte.

Uma dica: para servir como base, duplique a moldura e posicione-a normalmente respeitando o limite de 10 pixels. Se falta uma parte (como na imagem abaixo), ignore e a corte antes de chegar no contorno preto da moldura.

- Cortada a imagem com o Crop Tool, já temos as linhas. A outra parte fica fácil. Junte todas as camadas que tem as molduras com CTRL+SHIFT+E.

- Duplique a nova camada e posicione da seguinte maneira as molduras:

- Agora, selecione a Move Tool, tecla V, e dê um . Sua moldura andou 10 pixels e está com o espaço entre todas as molduras. Se faltou espaço para a caber a moldura, use a ferramenta Crop Tool e corrija.

* Seu layout ficará assim se você seguiu todos os passos da forma correta.

OBS:

É importante frisar que, ao contrário do layout anterior, é facultativo a última parte da fake ter uma sobra do layout, afinal são pixels transparentes que não mudarão em nada o seu trabalho.



Desta forma concluímos o Layout com espaçamentos entre molduras. Repito: pode ter levado tempo, mas é só da primeira vez! Afinal podemos reciclá-lo mais tarde. :thumb:




3. ESPAÇAMENTOS ENTRE MOLDURAS E FUNDOS

Aqui as ferramentas usadas serão as mesmas que as anteriores. Na verdade, este layout é uma continuação do layout anterior. Para ser feito, você precisa ter o outro layout pronto.

- Vamos dar continuidade então de onde paramos. Nosso layout estava pronto - para o método anterior - e com apenas um ajuste o iremos finalizar.

- Pegue o Layout anterior, espaçamentos entre molduras, e use a Crop Tool, aumentando sua largura.

* A largura do Layout foi aumentada. O tamanho original foi cortado para se adequar ao layout do fórum.

- Selecione a Move Tool e dê um SHIFT+→ na camada das molduras. As molduras moveram-se 10 pixels para a direita. O alinhamento, portanto, já está concluído do lado esquerdo e nas partes superior e inferior.

- Para alinhar o lado direito podemos usar o método que disse antes, duplique a camada e alinhe-a paralelamente. Entretanto, dessa vez, será do lado direito e não embaixo. Veja:

* Vamos cortar a partir do risco vermelho.


- Use a Crop Tool novamente e PRONTO! ACABOU! 8D

* Seu layout ficará assim. O fundo eu apenas pintei para facilitar a visualização dos espaçamentos.

OBS:
Nas técnicas avançadas, haverá uma outra alternativa para a construção do mesmo tipo de layout que burla todas essas etapas, entretanto, você vai ter que pensar. Sim, você entenderá depois o porquê.




4. MÉTODO PRÁTICO/PREGUIÇOSO:

Deixei por último, pois o objetivo é que os usuários aprendam a se virar caso não tenham nada de mãos beijadas.

Entretanto, eu disse várias vezes que a base poderia ser reaproveitada e de fato, pode. Este método é o usado pela maioria e vai continuar sendo, afinal a preguiça comanda o corpo de vocês, né. Então, sem mais delongas, veja como funciona:

- Você pega um layout das dimensões e estilo que você quer já pronto e apenas substitui as molduras e o fundo -se tiver.

- É um método xulo, preguiçoso e que não lhe trará tantos créditos quanto fazer do zero, mas ainda assim é um método e deve ser salientado. Como parte do ritual de bom senso, créditos ao autor da base.

- Outro ponto fraco é que você sempre dependerá de alguém que faça o layout do seu agrado. Isso se fizerem né.

- Sinceramente, não recomendo a menos que a base original seja sua, porque aí você estaria reaproveitando e poupando tempo de maneira inteligente.

[CJean]

1. LAYOUT COM ESPAÇAMENTOS ENTRE MOLDURAS E FUNDO (FORMA ALTERNATIVA)


Agora que temos uma noção da composição do layout, podemos tomar nossas próprias decisões para criar um estilo próprio. Particularmente, eu prefiro layouts equidistantes [+WAT], ou seja, com dimensões iguais entre quadros e as linhas. Entretanto, para mostrar que não é nenhum bixo de sete cabeças, eu desenvolvi uma fórmula matemática - sim, hora de usar o cérebro para as fakes, amigo- super simples para conseguir fazer as dimensões exatamente iguais. Observe a fórmula, a explicação e o funcionamento da mesma:

Legenda:
AT = Área total. É a incógnita (valor desconhecido) que estamos tentando descobrir. O número resultante será o valor da medida em pixels para Width/Largura.

x = Será o espaçamento que vamos deixar entre um quadro e o outro em pixels. Note que essa diferença de espaço será a mesma de um quadro até o extremo do fundo.

y = Outro valor que iremos estipular. Nele, você inserirá o número de SQMs (squaremeters, os quadradinhos do Tibia) que terá no seu quadro. Repare que você tem de multiplicar por dois ao final.

Agora vamos entender o porquê desta estrutura de fórmula?

A primeira coisa essencial para se saber é que estamos calculando a largura que vai ser utilizada. Portanto, o valor é menor que o da altura, senão as fakes não seriam em forma de tirinha. A partir disso, é mais fácil entender o resto.

Observe que o X é o valor que vamos dar para ter um espaço, uma folga entre os quadros. Se colocar 0, anulará esse campo e não terá espaço entre um quadro e outro. Isso ficaria bem feio e não muito agradável de se ler. Portanto, o indicado é colocar um valor par acima de 8. Neste tutorial, para começarmos a usar essa tática, vamos inserir o valor 10. Quanto ao número 3, ele é fixo, pois existem 3 espaços:
- extremo oeste até quadro;
- quadro até quadro;
- quadro até leste;

Você pode optar por tirar o espaçamento entre os extremos, nesse caso, será 1x e não 3x. Entretanto, alguns podem achar estranho. Concluímos que x será o total de pixels destinados ao espaçamento da layout.

Sobre o y, ele simboliza o SQM do quadro. Como se usava, por padrão, 7 a 9 SQMs por quadro, cabe a você escolher o tamanho. Esse valor será multiplicado por 2. Mas por quê? Porque 32y resulta na largura do seu quadro, porém nós usamos 2 quadros a cada linha no layout. Para seguir o tutorial, vamos fazer de 8SQM - coloque 8 no lugar de y. Logo, temos largura de dois quadros para somar. Pode-se dizer que y representa a soma da largura dos quadros.


Portanto, sintetizando essa fórmula e traduzindo para o português, Largura é igual a soma do espaçamento mais os quadros.

AT = 3x + 2(32y)

NOTA:
7x7 SQM = 224px
8X8 SQM = 256px
9X9 SQM = 288px

Tudo bem, anotou os valores? Não?! Mas é um vacilão mesmo. Repetindo:
Usaremos 10 para X e 8 para Y.

Agora está na hora de usar a força nerd para calcular. Vamos lá, para quem não viu equação ainda é simples, qualquer dúvida poste.

AT = 3x + 2.(32y)
AT = 3.10 + 2.(32.8)
AT = 30 + 2.(256)
AT = 30 + 512
AT = 542px

Ótimo! Já temos a medida da largura, mas e a altura? :eek:
O método é o mesmo, entretanto teremos de adaptar algumas incógnitas por um simples motivo: a altura possui um número maior de quadros e, consequentemente, espaçamentos. Portanto, observe com atenção à fórmula abaixo porque ela pode ser um pouco mais complicada.

Talvez você tenha se assutado logo de cara, mas a fórmula é mais fácil que a anterior porque podemos reaproveitar os valores! Antes, vamos explicar qual a função de cada variável.

AT = Continua sendo a Área Total. Nenhum Mistério.

x = a variável do valor do espaçamento. Como eu disse, vamos reaproveitar da equação anterior. Lembra do valor? Era 10, então aqui será o mesmo. Se você inserir um valor diferente, o layout não ficará equidistante.

y = nenhuma mudança também. Continua sendo o valor do SQM que usamos. Esse tem de ser o mesmo da fórmula anterior, pois os quadros são quadrangulares. Como foi dito, este será 8.

? = Essa é a novidade. Bom, não se assuste. Essa interrogação é um valor de sua escolha. Não quis definir nada, pois é uma escolha muito pessoal. Esse valor será o número de quadros na coluna do layout. Pode ser 1, 2, 3, 5, 10, 20. Fica a seu critério, mas um número maior que 10 ficará pesado sua parte da fake, portanto não aconselho. No tutorial vamos inserir o valor 5.

?+1 = Idêntico ao item anterior. O +1 só vai ali por um simples motivo: sempre haverá um espaçamento a mais do que o número de quadros. Sempre. Se você modificar, estará customizando o layout e fugindo da aula, seu safado. Portanto, o valor de ? deve ser igual nos dois momentos de uso!!!

Tente você descobrir o motivo dessa estrutura. É fácil, segue a lógica da fórmula anterior!

Hora de acionarmos nossa matemática novamente. Vamos utilizar as fórmulas com os valores já estipulados.

AT = ?.(32y) + (?+1)x
AT = 5.(32.8) + (5+1).10
AT = 5.(256) + (6).10
AT = 1340px

Lembram do que eu disse no início? A altura é sempre maior que a largura.

Bom, agora que já temos uma noção geral do layout e de suas medidas. Vamos criar o nosso próprio layout, pondo em prática os conhecimentos vistos no tópico. Sugiro que coloque os mesmos valores na primeira vez que você for fazer, até para se adaptar com a interface do programa e o método de criação deste.

CRIANDO O LAYOUT

- A primeira etapa é estipular as dimensões do nosso layout.

Para isso, vamos usar as duas fórmulas e obter os valores. No caso, 542px de largura e 1340px de altura.

- Abra o Photoshop. Espere carregar o programa e vá em File/New ou simplesmente aperte CTRL+N para atalhar.

- Na caixa de diálogo abaixo, complete com os valores do nosso layout:

* Repare que as medidas são em pixels
* Caso seu Photoshop seja em inglês, como o meu, Width é largura e Height altura.

- Para visualizar a imagem no seu tamanho real, vá View/Actual Pixels ou aperte CTRL+1. Isso não é obrigatório, contudo facilita bastante na hora de trabalhar.

- Feito isso, vamos criar um novo documento: CTRL+N (File/New). Desta vez, vamos inserir os valores que escolhemos para o tamanho do quadro. No nosso tutorial, como escolhemos 8SQM, vamos por 256 de altura e largura, pois é um quadrado.

* Se você optar por um número maior na dimensão o layout não ficará equidistante.

- Com o novo documento aberto, aperta a tecla G, Paint Bucket Tool ou Balde de Tinta, e pinte de preto o documento.

- Aperta CTRL+A seguido de CTRL+C.

- Agora vamos voltar ao documento do Layout. Aperte CTRL+V e se você fez tudo certo, você terá colado o quadro do documento anterior neste. Provavelmente ele deverá estar centralizado.

Repare que sua paleta de camadas deve estar assim. Se você não estiver com a janela ativa, aperte F7 ou vá em Window/Layers.

- Com a base montada, vamos para o alinhamento. Essa parte é super fácil. Com a camada quadro selecionada, aperta a tecla V para acionar a Move Tool. Agora que é possível mover o objeto, vamos arrastá-la até o extremo noroeste da área de trabalho, o palco, e sua imagem ficará assim:

* O tamanho está diferente porque eu redimensionei a imagem!

- Dando continuidade, vamos mover novamente a imagem. Como ele está no extremo canto sem ultrapassar o limite, vamos fazer um comando muito prático na hora de movimentar. Ao invés de teclar 10 vezes ↓, vamos segurar o SHIFT e apertar 1 vez para ↓, logo, SHIFT+↓. Agora que está alinhada a linha, vamos para a coluna e seguimos a mesma lógica: SHIFT+→. Pronto, alinhamos o primeiro quadro.

- Para alinhar o outro quadro, temos de criá-lo. Para isso, vamos duplicar a camda: aperte CTRL+J e sua paleta ficará assim:

- O alinhamento agora é fácil. Mova a camada duplicada até o extremo da outra ponta.

- Agora, vamos usar a dica do SHIFT. SHIFT+← para alinhá-la com o outro quadro e o extremo. O topo do seu layout deve estar assim:

- A primeira linha está pronta. Agora temos de fazer as outras - a menos que você queria uma parte só com dois quadros (não aconselho, pois dará muito trabalho para hostear, organizar e postar).

- Para isso, faça o comando CTRL+E com a camada quadro copy selecionada para juntarmos as duas. Se você fez certo, na sua paleta de camadas, haverão duas novamente: quadro e background. Logo, nossa camada agora tem dois quadros.

- Vamos dar um CTRL+J novamente para duplicar a camada e a paleta ficará assim:

- Aperte V para acionar a Move Tool, agora movimente a layer quadro copy até o final da imagem da layer quadro como na imagem abaixo:

- Por fim, vamos movimentar a layer para baixo com o comando SHIFT+↓ para que a divisão fique com a mesma distância. Observe:

- O próximo passo é continuar o esquema: duplicar e alinhar dando SHIFT até o layout ficar preenchido. Vale lembrar que o final do layout terá uma folguinha, ou seja, haverá um espaço entre o extremo e o quadro, pois é equidistante. Caso sobre um espaço maior que as demais medidas ou falte, você falhou na missão e terá que rever o que errou. Qualquer coisa, poste que eu dou uma força.

- Terminado nosso alinhamento de quadros, vamos juntar todas as layers em uma só: CTRL+SHIT+E. Sua paleta de camadas deve ficar assim:

* O círculo em volta do cadeado foi em quem fiz, entenda o porquê abaixo.

- Como você deve ter percebido, há um cadeado ali na imagem. No Photoshop, por se tratar da layer background, ele não dará muito liberdade para mexermos na camada, por isso, vamos dar um comando simples: CTRL+J.

* Agora não há cadeado na Layer 1!

- Para evitar qualquer problema, vamos deletar a camada background.

- Agora, vamos selecionar a Magic Wand Tool, ou Varinha Mágica, teclando W. Certifique-se de que a configuração da varinha seja a seguinte:

- Clique em um dos quadros negros para selecionar todos. Aperte Delete e pronto! Agora você tem um layout montado. Basta você enriquecê-lo à gosto.

Apenas para se certificarem, a imagem deve ficar como abaixo:

Certo, mais da metade do pessoal nem vai usar o método só porque tem que calcular, mas tá dada a dica. Se são tão sedentários assim, podem optar pela calculadora do próprio computador. u__u




1. CRIANDO MOLDURAS:



Agora vou ensinar como criar uma moldura do zero. Pra servir de base, vamos fazer uma continuação do layout anterior para caso alguém siga o modo saiba como proceder.

- O primeiro passo é configurar a Magic Wand Tool dessa forma:

- Agora vamos selecionar um quadro qualquer do nosso layout

- Crie uma nova camada pelo comando CTRL+SHIFT+N ou Layer/New Layer.

- Ainda com a área selecionada, aperte G e escolha a ferramenta Paint Bucket Tool representada pela figura abaixo:

* Se ao apertar a tecla G a ferramenta não for selecionada, aperte SHIFT+G para alternar a opção do Gradient Tool.

- Agora vamos dar um CTRL+C. Preste atenção na seleção! Ela tem de estar ativa ainda senão não poderemos copiar.

- Aperte CTRL+N para criarmos um novo documento. Abrirá uma caixa semelhante ao diagrama abaixo.

* A área retangular veio com valores pré-definidos que são justamente as dimensões do item que copiamos, ou seja, já temos um documento com o tamanho certo de cada quadro.


- Agora fica mais fácil. Com o novo documento aberto, vamos duplicar a camada Background (CTRL+J).

- Delete a camada Background.

* Sua paleta de camadas estará assim.


- Vamos criar uma nova camada, CTRL+SHIFT+N, e novamente usaremos a ferramenta Paint Bucket Tool (tecla G). Pinte o quadro com uma cor diferente de preto e branco. EU pintei de vermelho.

- Edite, na paleta de camadas, o campo Fill da Layer 2, a camada que acabamos de pintar e ponha o valor 0.

* O campo Fill está 100%. Mude para 0%.


- Deixando em 0% ela vai desaparecer, isso porque deixamos nula sua "opacidade". Não se assuste, é normal.

- Dê um duplo clique na miniatura da camada. Abrirá uma caixa de diálogo como essa:

- Clique em Stroke, a última opção e configure de acordo com a imagem abaixo.

- Se você fez tudo certo, sua imagem estará assim:

- O próximo passo é importante. Muito cuidado agora. Crie uma nova camada (Layer 3) e arraste a camada que aplicamos o efeito anterior (Layer 2) Para cima.

* Mudou a posição da camada 2 em relação à camada 3.


- Dê um CTRL+E. Sua paleta deve ficar assim:

- Agora dê um duplo clique na miniatura da camada e configure a caixa de diálogo dessa forma:

* Em Color Overlay, será a cor do interior da moldura. Você pode deixar a cor que quiser.

- Repare que há Gradient Overlay e Pattern Overlay depois de Color Overlay. O primeiro ira fazer um degradê de cores ao invés de uma cor sólida e o segundo colocará uma imagem como fundo da área selecionada. Se quiser por mais imagens terá de adicionar uma Pattern nova (tutorial). Você pode tentar combinações com as 3 opções. É importante que você mude o Blend Mode de uma opção ou outra, senão a cor sólida sempre prevalecerá ou o degradê.

Fiz um exemplo aqui. Veja como é possível fazer combinações interessantes com os recursos iniciais.

* Existem milhares de infinidades. Já lhe mostrei como fazer, agora é brincar aí e descobrir sozinho.


- A última etapa é repetir um passo já feito anteriormente. Crie uma nova camada (CTRL+SHIFT+N).

- Mova a nova camada para debaixo da camada da moldura e dê um CTRL+E.

- Sua paleta ficará assim:

- Delete a Layer 1 e a moldura estará assim:

- Agora é só colar a moldura no seu Layout.

Pronto! Agora você já sabe fazer molduras e ainda adicionamos elas ao nosso Layout!.





3. PREENCHENDO O FUNDO



- Talvez seja a parte mais fácil na construção de um Layout. Enriquecer o fundo com efeitos ou imagens é simples.

- A primeira etapa é juntar todas as camadas que tivermos de moldura. Depois, desabilite-as. Não confunda com deletar, apenas não estamos as deixando visíveis.

- Agora vamos trabalhar apenas com a camada do fundo. EU sempre procuro imagens na Internet que combinem com as molduras. No nosso caso, eu pegaria uma imagem abstrata, pois são as melhores.

Pegarei esta aqui como base.

- Uma dica é sempre pegar imagens BEM GRANDES, pois assim não faltarão partes na hora de preencher o fundo. No meu caso, a imagem ficou pequena, entretanto eu girei ela 90° para se adequar. Essas também são soluções viáveis: Edit/ Transform ou CTRL+T

-Ajustada a imagem no layout, vamos fazer Clipping Mask com a camada do Fundo.

* Sua paleta deve estar assim. Fique atento à seta.


- Se você acha que ficou legal o Fundo assim, ótimo. É só habilitar as molduras e salvar que você tem seu layout.

- Se você acha que não ficou legal, você pode aplicar vários filtros. O mais comum para uso é o seguinte efeito: Filter/Blur/Gaussian Blur e configure-o da seguinte maneira:

* O valor você pode configurar a vontade, usei um valor alto para ficar bem desfocado o fundo.

- EU deixarei o meu assim, ficou simples e elegante. Um layout com MUITOS detalhes pode até ficar ruim, pois tirará o foco da fake ou até dificultar a leitura. Logo, de todos esses procedimentos, saiu isso:

Ficou faltando um pequeno pedaço ali embaixo. Sem pânico, é só usar a Crop Tool no começo da próxima parte e tirar o resto fora:

- Resolvido o problema, terminamos nosso fundo para o Layout!

- Essa parte é opcional, mas existem outras ferramentas para mudar a aparência do Layout. São elas:

Image/ Adjustments/ Brightness| Contrast
Ajusta o brilho e contraste da camada.

Image/ Adjustments/ Hue| Saturation
Esse será o mais útil. Possível mudar a Matiz (cor) da camada e a saturação. Se você tem um layout pronto e quer só mudar a cor, esse é o caminho.

Image/ Adjustments/ Color Balance
Uma opção mais específica e detalhada que a anterior. Dá um pouco de trabalho configurando, mas o resultado é mais preciso.

Então é isso, galera. Espero que vocês tenham conseguido fazer passo a passo as dicas que eu forneci neste tutorial e, quem sabe, até tenham desenvolvido seu próprio método para a criação e organização do layout.

Qualquer dúvida, problema, sugestão ou reclamação postem no tópico, ou se preferirem, me enviem uma MP que eu dou a assistência necessária.

A próxima dica sai ainda nesse mês. É aquela de março que atrasou. Será bem mais light. Peço desculpas por ter sido bem grande esta dica, mas queria transmitir ao máximo meu conhecimento para vocês e acho que acabei me empolgando. D:

Anyway, até a próxima.




http://thegameguitarist.weebly.com - Inspiração para a Skin do Tutorial.
Wikipédia - Consultas
Limon Matador

[Tiozin]

Wow, belo tutorial de Layouts!
Eu, particularmente, acho que layouts tão bem trabalhados assim não acrescentam muito a fake, por isso sou adepto de layouts xulos, feitos no Paint hahahah...
Eu tenho um método muito próprio de fazer layouts (tanto em sua composição, como no espaçamento de quadros)... Já que ninguém nunca reclamou, considero fácil, bonito e prático!

Mas seus métodos são ótimos, dão um ar de seriedade estética à fake que minhas fakes não tem

[Pedragon]

Belo tutorial Jean!
São os layouts que nos ajudam a concentrar direito nas fakes, portanto acho um layout bem feito essencial. Não precisa ser bonito, só bem feito.
Assim como o Tiozin também tenho um jeito próprio de fazer layouts. Vou no FW, abro um arquivo 260x260 e o emolduro de um jeito meio próprio, também tento sempre fazer a moldura de acordo com a história da fake. Na verdade é bem parecido com o primeiro método hehe

Achei meio complicado o segundo método que ensinou, pois não sei usar PS, mas achei que ficou bem bonito e bem trabalhado. Depois vou dar uma fuçada no PS pra ver se consigo dar uma melhora em meus layouts.

Parabéns CJean! As "dicas do mês" já me foram bem úteis muitas vezes!
Cya~

[Marcotonio]

Admito que esse eu não li, apenas passei o olho e me reti nas partes mais dissertativas, não nas instrutivas. Não acho necessária toda essa ciência por trás de layouts, que nada mais são do que o espaço entre quadros, para onde realmente olharemos.
Claro que dá um acabamento, mas acho completamente dispensável.

Não obstante, melhor tutorial de layouts de todos os tempos. :eek:

s=D|--<

[Happy~]

muito bom o tutorial, está de parabéns, e me ajudou muito ^^.

[Samanuske]

Tá muito bom mesmo..qualquer um com conhecimento basico consegue acompanhar o tuto,Ou pelo menos ter uma ideia de layouts.

~Pena estar muito grande. (brasileiro n gosta de ler )

Mas continue assim, que você chega longe!

[Jake~]

Nossa cara, tutorial muito bom mesmo, fácil de entender e ele está bem formatado! Eu ainda uso o mesmo layout em toda a fake, ele é simples e sem fundo personalizado, um dia desses faço outro layout seguindo o seu tutorial.

E os que falaram que está muito grande não leram todo o tutorial, só tem bastante imagens, o que dá essa impressão. Aliás, eu me assustei com aquela fórmula lá no final, me lembrou cálculos de física.

Esperando a próxima dica ansioso. 8D

[Pandoraz Tibiano]

esse CJean é foda hein

só faz os tutos cabulosos zé e_E , que from hell re.

sério memo, no proximo mês faz 'Como ser o CJean' pra nós ser foda q nem ocê KKKKKKKKK É NÓS SÔ BABA OVO MEMO KK SO FERA

[Diferentaum]

esse CJean é foda hein

só faz os tutos cabulosos zé e_E , que from hell re.

sério memo, no proximo mês faz 'Como ser o CJean' pra nós ser foda q nem ocê KKKKKKKKK É NÓS SÔ BABA OVO MEMO KK SO FERA

o jeão já fez um tutorial sobre como ser çagas, o mas o jack fechou.

@topic
Creio já ter visto spoil disso aí antes de sair, re.
Nem vou falar que ficou ótimo, não preciso. Pois você sabe que ficou ferinha.
Próxima dica vai ser sobre o quê? Um dia os assuntos vão acabar... (ou não)