Mostrando postagens com marcador AN. Mostrar todas as postagens
Mostrando postagens com marcador AN. Mostrar todas as postagens

Dicas de Design #2: Imagens — Colorizações e Harmonização (Parte 1)

em quinta-feira, 14 de maio de 2015 | 9 comentários:


Oi, aqui é a Ene! Nessa segunda dica, vou abordar os seguintes assuntos:

  1. Mudança de estilo por gradiente;
  2. Ajuste de contraste de imagem;
  3. Redimensionamento de imagens;
  4. Combinação de cores.


É, bastante coisa, haha... Mas não foi por isso que a segunda dica demorou, foi porque não tive tanto retorno na última, mesmo. Tive que tacar chinelo nas meninas da staff pra comentarem kkkkk Apesar disso, amei os comentários que deixaram! :D Muito obrigada ^_^
Como existe MUITA coisa pra falar sobre colorizações e harmonização, separei a dica em duas partes. A próxima parte postarei de acordo com os comentários que receber :)

Então, vamos começar. Caso algum dos assuntos não lhe interesse, é só passar pro outro! :D

→ Mudança de estilo por gradiente
Isso me pediram no grupo da staff, e eu achei bem legal de mostrar. Podemos observar a mudança pelo seguinte exemplo:

 
 

Como eu fiz isso? Com colorings diferentes?
Adhuaisdhasiu não, na verdade eu só coloquei um gradiente por cima e salvei. Coisa mais simples e rápida do mundo.

Mas como eu faço isso, Ene?

Primeiro, você habilita os ajustes por Janela > Ajustes


Em seguida, seleciona a opção de mapa de degradê. Ele vai ser posto sobre seu design isolando um degradê nele.



Exemplo:


Para trocar as cores do gradiente, basta clicar na área de degradê que tem logo abaixo do nome.


Vai abrir opções de degradê. Eu baixei um pack feito pela Cecii, que saiu do PD há algum tempo. Não achei o pack dela, então hospedei meus degradês. Para fazer o download, clique aqui.

Agora, você vai testando degradês que ficam legais. Eles podem inclusive mudar o estilo do seu design. Exemplos:

Design original:


Variáveis:


→ Ajuste de contraste de imagem
Sabe quando a coloring não fica muito bem no seu design porque apaga um pouco do rosto dos artistas, ou os deixa muito escuros, ou muito claros, ou só uma parte fica clara e a outra escura, ou quando uma imagem fica muito forte...? Argh!
Caso não tenha entendido, como exemplo, usei duas imagens diferentes e uma coloring:


A imagem da esquerda tem pouco contraste e é mais clara, enquanto a da direita tem bem mais contraste e é mais escura. Com o coloring, tudo só ficou pior.
Em vez de procurar outras imagens ou outras colorings pra utilizar, você pode resolver isso facilmente mexendo na ferramenta de brilho/contraste.


Depois de ativar a ferramenta, altere o brilho e o contraste da camada selecionada até que fique com uma boa harmonização sobre todo o design.


Outra opção, menos conhecida, é pelas ferramentas se subexposição e superexposição:


Ambos são utilizados da mesma forma que o pincel, e não sobre a imagem toda.

Subexposição:
Clareia apenas uma parte da imagem.
Superexposição:
Escurece apenas uma parte da imagem.

Usando essa ferramenta, corrigi a imagem.
  
Também uso a subexposição pra clarear a íris dos olhos e deixá-los mais marcantes em algumas fotos xD
O exemplo está na imagem da esquerda.


→ Redimensionamento de  imagens
Algo recorrente que acontece na entrega de pedidos é o mal redimensionamento e posicionamento das imagens. Fiz alguns exemplos para apresentar-lhes:

Imagem Normal

Imagem em tamanho original.

Redimensionamento Errado

Percebe-se que a largura da imagem está mais estreita e a Rihanna ficou esticada.
Com esse erro, a imagem foi danificada.
Para corrigir esse erro de redimensionamento, pegamos a imagem original, apertamos Ctrl+T e pressionamos o Shift enquanto redimensionamos. Assim, a imagem fica normal:
Imagem em tamanho original.

Outra coisa interessante é o Objeto Inteligente. Muita gente não conhece essa ferramenta, mas ela realmente ajuda na hora de montar as fotos do seu DS.
O que o Objeto Inteligente faz?
Ele "salva" a imagem no seu arquivo no tamanho original dela. Por exemplo, você pega uma imagem 1440px X 900px e a redimensiona pra ficar menor. Porém, depois de redimensionar, percebe que precisava dela maior. Você aumenta ela, mas ela fica sem qualidade.
O objetivo do Objeto Inteligente é fazer a qualidade dessa imagem retornar ao aumentá-la.
Para converter a imagem em objeto inteligente, clicamos com o botão direito sobre a camada e em seguida em Converter em Objeto Inteligente.


Depois disso, você pode aumentar e diminuir a imagem sem se preocupar com a qualidade. Quando terminar, selecione a borracha e clique em qualquer área da imagem: aparecerá um aviso sobre converter o objeto inteligente em bitmap. Você confirma e pode mexer livremente na imagem.

→ Harmonização e combinação de cores
O que muita gente que faz design não sabe é que existem cores que não se misturam com outras cores. Um exemplo muito comum é o rosa e o vermelho: são duas cores muito próximas, deixando o design muito forte ou com impressão de que faltam detalhes.
Uma dica simples é usar cores dividindo-as em cores frias e cores quentes (sexta série, quem lembra? haushuashu)
Cores frias:
* Ideais para designs que não envolvam tantos detalhes. Para lembrar das cores frias, pensamos no inverno e no outono: vai do verde ao violeta, passando pelo azul.
Exemplo de design com cores frias:


Cores quentes:
* Ideais para designs sexys, darks, e designs no geral. Para lembrar das cores quentes, pensamos no verão e na primavera: vai do amarelo ao vermelho, passando pelo laranja e tendo um pouco do verde. Exemplo de design com cores quentes:


Aqui uma imagem que representa bem a divisão das cores:


Além destas, existem as cores neutras (tons pastéis), monocromia, policromia, cores anólogas, cores complementares... Mas não acho necessário expandir nesse post.

Site super interessante que disponibiliza paletas de cores:
Pelas paletas, podemos idealizar melhor um design. Muita gente não gosta de usar, mas é legal xD

Essa foi a primeira parte da nossa segunda dica! Realmente espero que tenham gostado e aprendido algo ^-^
Por favor, comente, o seu comentário é muito importante e me motiva a continuar.
Até a próxima, galera o/


Leia Mais ►

Resources: Coroas

em sexta-feira, 8 de maio de 2015 | 4 comentários:
Oie, aqui é a Ene, com 10 (ok, 9) little coroas pra usar nos designs (amo assinatura com coroa, acho um lusho)
Clique na imagem pra ver no tamanho original, depois com o botão direito, e aí é só salvar.

    

 

 



Façam bom proveito <3
Até a próxima o/

Leia Mais ►

Dicas de Design #1: Textos e Catactere

em sexta-feira, 1 de maio de 2015 | 6 comentários:


Olá! Aqui é a Ene, e antes de qualquer coisa, vou explicar um pouquinho as Dicas de Design ;)

Por que foi criado esse projeto e qual o seu objetivo?
– Todos os dias vejo (não só no PD, mas em outros blogs também) pedidos entregues com alguns errinhos que, muitas vezes, são cometidos pela falta do conhecimento da correção dos mesmos. O objetivo é justamente esclarecer esses erros, assim como apresentar novas ideias de design e a expansão para novos estilos.

O que posso aprender com o projeto?
– Na dica #1, teremos textos e caractere. Nas próximas dicas, pretendo trazer redimensionamento e tratamento de imagens, harmonização entre cores, uso de polaroids, estilos de design (mini aula de arte envolvendo arte abstrata, cubismo, pop art, etc.).

Com que frequência serão postadas as dicas?
– Dependendo do retorno, talvez uma vez na semana, ou uma vez a cada 15 dias... Não é tão fácil elaborar as dicas, já que quero expandir bem os assuntos.

Ok. Já apresentei meu projeto! Agora, vamos para a primeira dica ;)


Os textos, num design, são tão importantes quanto a mesclagem de imagens, as colorizações ou os renders, seja o design um DS, um Banner ou uma Assinatura. Eles referenciam o design e, pra isso, devem ser bem trabalhados. Abaixo, algumas coisas que você precisa saber sobre os textos.

→ Você pode alterar o espaçamento entre os caracteres e entre as linhas.
Isso significa deixar as letras mais próximas umas das outras em altura e largura. Para começar, clique em Janela > Caractere.


Depois disso, você tem as opções de caractere: deixar em negrito, itálico, sublinhado, riscado, TUDO EM LETRA MAIÚSCULA, tamanhos de fontes, espaçamento entre caracteres, linhas, método de suavização de serrilhado (super importante pra créditos, explicado mais abaixo)...

Peguei como exemplo a seguinte imagem.



Quero acrescentar o texto nela, mas ele fica fora do espaço que eu desejo. Eu posso alterar o espaçamento entre os caracteres e entre as linhas para resolver isso, em vez de redimensionar e deixar o texto pequeno com espaçamentos gigantes!
Pra isso, alteraremos os seguintes valores:


Você pode alterá-los conforme sua preferência. Eu coloquei, respectivamente, 18 pt e -75. O resultado foi esse:


––––––––––––––– // –––––––––––––––

→ Você pode colocar qualquer texto em negrito, itálico, riscado ou sublinhado.

Mesmo quando a fonte não tenha a opção, você pode colocar da seguinte forma:


Marcados em vermelho, respectivamente:
* Negrito;
* Itálico;
* TODAS AS LETRAS MAIÚSCULAS;
* Sublinhado;
* Riscado.


→ Nitidez do texto <~ IMPORTANTÍSSIMO

Você alguma vez já colocou seus créditos em alguma fonte bem pequena e ela ficou bugada? Existem diferenças entre bugada e nítida. Veja os dois exemplos:


Percebe a diferença?
* No primeiro texto de créditos, as letras estão borradas e o negrito não fica visível. Já no segundo texto, está tudo nítido e legível.

Mas como deixar meus créditos assim?


O primeiro ponto a ser observado é o tamanho da fonte: Para algumas fontes, como a usada, é necessário que esteja em tamanho 8 pt. Porém, outras fontes como Courier New, Ebrima etc. não precisam de ajustes no tamanho.
O que faz a diferença das fontes é o modo de suavização de serrilhado (também conhecido como nitidez do texto). Para deixar o texto legível, é importante deixar o modo de suavização em NENHUMA. Não é nítida, bem definida, sólida ou suave. É NENHUMA.

OBS: Não se esqueça de colocar em Nítida novamente para os textos normais (título, frase, nome...)

E essa foi a nossa primeira dica, envolvendo caracteres! Espero que tenha sido realmente útil e que ajude nos seus próximos designs.
Caso queira mais dicas, deixe um comentário aí embaixo! Dependendo do retorno dessa primeira dica, eu continuo, trazendo mais sobre o tratamento de imagens, a colorização e combinações de cores ideais pra cada estilo, sobre réguas e o formato de salvamento base do Photoshop PSD, dentre muitas outras dicas. Até a próxima ;)


Leia Mais ►

BASES PARA ASSINATURA

em quarta-feira, 8 de abril de 2015 | 6 comentários:
Como salvar as bases:
Se você copiar e colar, ela não vai aparecer certa, justamente pela transparência. Para salvar, clique na imagem, depois clique com o botão direito e clique em Salvar como... . Verifique se o formato está em .PNG e salve ;) Depois é só abrir no photoshop e usar normalmente.


 

 

 

Façam bom proveito <3

Leia Mais ►