Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Hand Lettering
Design

Como Criar um Pôster Com Letra Manuscrita no Adobe Photoshop

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Home Sweet Home.
How to Draw a House Step by Step
Best of the Design Web: April 2017

Portuguese (Português) translation by Ingrid Fornazari (you can also view the original English article)

Final product image
What You'll Be Creating

Nesse tutorial, nós criaremos um pôster escrito a mão que vai deixar sua casa acolhedora e adicionar uma atmosfera quente a qualquer interior. Nós vamos usar várias ferramentas de desenho e funções do Adobe Photoshop para criar letras chiques do zero e digitalizar sua escrita à mão, transferindo do papel para o Photoshop e editando para se adequar ao nosso pôster.

Ao final desse tutorial, você terá aprendido algumas dicas e truques que vão inspirá-lo a criar mais ilustrações escritas, tais como esse pôsteres escritos. E se você estiver se perguntando como o pôster vai ficar quando impresso e colocado na moldura,  você pode tentar alguns desses modelos de molduras de pôsteres para ver como ele vai ficar na vida real.

Vamos começar!

1. Como Criar Letras com a Ferramenta Caneta

Passo 1

Tudo começa do zero. Primeiro de tudo, nós precisamos ter uma ideia do que vamos criar. Como nós planejamos criar um pôster de inauguração, eu decidi escolher uma frase bonita para uma atmosfera acolhedora. Eu fiz alguns esboços simples pequenos, escrevendo "Home is where your heart is" (O lar é onde seu coração está) e enfatizando a palavra "home" (Lar).

No primeiro esboço, eu tentei inserir a frase dentro de uma forma de casa, mas nesse caso, eu achei que a imagem ficou apertada e cheia de detalhes desnecessários, enquanto que a parte principal da composição, as letras em si, estavam muito monótonas. Além disso, não interagia com a palavra "heart (coração)", que é outro elemento importante e significativo da frase como um todo, equilibrando a palavra "home (lar)".

Pensando desse modo, eu fiz outro esboço simples (até mais simples que o primeiro, você pode notar), onde eu claramente enfatizei as duas palavras. Eu também adicionei um toque de simbolismo, retratando um teto estilizado em cima da palavra "home" e colocando a palavra "heart" em uma forma de coração. Agora tudo parece mais equilibrado e significativo. Vamos fazer um pôster do segundo esboço.

thumbnail sketches

Se você quer usar o mesmo esboço como imagem de referência, você pode dar um clique direito com o mouse na captura de tela abaixo e Salvar no seu computador.

home lettering sketch

Passo 2

Vamos criar um Novo Documento de 3000 x 3000 px, 300 ppi e vamos colocar nosso esboço lá.

Usando a Ferramenta Conta-gotas (I) para pegar a cor azul escura do esboço e aplicar na Camada de Plano de Fundo usando a Ferramenta Balde de Tinta (G).

Diminua a Opacidade do Esboço para 25%, deixando ele semitransparente se ficar distraindo muito você.

place sketch into photoshop

Passo 3

Agora vamos pegar a Ferramenta Caneta (P) e começar a desenhar as letras da palavra "home". Usando a poli linha para desenhar a haste esquerda da letra "H". Feche o caminho e prossiga para a haste direita, fazendo-a um pouco mais fina.

use the pen tool to trace the letter

Se sentindo tremido e sem confiança com a Ferramenta Caneta? Não se preocupe, você só precisa de um pouco mais de prática. Essa ferramenta na verdade não é tão assustadora e difícil de usar como pode parecer! Confira essas instruções fáceis de seguir sobre a Ferramenta Caneta e veja por você mesmo!

Passo 4

Faça uma forma retangular para a barra transversa e vamos unir todos os elementos da nossa letra! Selecione todos eles com a Ferramenta Seleção Direta (A) e vá até o menu Caminho no painel de controle do topo. Agora, vamos selecionar Combinar Formas e aplicar pressionando o Mesclar Componentes da Forma na parte de baixo do menu. Ai está! Agora nós temos todas as partes da letra que nós fundimos!

 Combine Shapes in Path Operations

Passo 5

Vamos continuar e traçar a letra "O". Ela vai consistir de vários elementos, então vamos começar sua parte principal. Tente deixar a linha suave e curva arrastando as alças das âncoras toda vez que fizer uma ponta. Faça uma oval, e depois outra para o centro do "O".

Selecione as duas ovais com a Ferramenta de Seleção Direta (A) e dessa vez vamos Excluir Formas Sobrepostas no menu de Operações de Caminho.Clique em Mesclar Componentes da Forma para cortar o círculo interno.

Exclude Overlapping Shapes in the Path Operations menu

Passo 6

Nós podemos preencher nossa letra com alguma cor para ver se a Operação de Caminho funcionou. Vamos abrir o painel Caminho (Janela / Caminho) e clicar em preencher caminho com cor de primeiro plano, no final do painel, aplicando a Cor de Primeiro Plano que normalmente está selecionada como branco no nosso painel Cores.

Fill path with foreground color in the Paths panel

Passo 7

Vamos Desfazer (Control-Alt-Z) nossa ação anterior para remover o preenchimento e continuar desenhando a letra.

Usando a Ferramenta Caneta (P) para formar o ornamento da letra "O", usando o esboço como base e traçando por cima. comece da parte superior esquerda da letra O e vá gradualmente movendo para a direita, fazendo uma curva em forma de banana.

add a swash to the letter

Passo 8

Lembre-se de que você pode mudar a direção do caminho sem liberar a tecla do mouse (ou a caneta da sua mesa digitalizadora) e sem alternar entre ferramentas. Simplesmente clique e arraste para deixar as alças dos pontos de ancoragem visíveis. Então, segurando apertada a tecla do mouse, clique no Alt, e rotacione e mova a alça para cima

Nós podemos sempre usar a Ferramenta de Seleção Direta (A) para mover os pontos de ancoragem, deixando as linhas mais suaves.

add a swash to the letter 2

Passo 9

Vamos selecionar os dois elementos do "O" e usar as funções Combinar Formas e Mesclar Componentes da Forma para unir as formas.

use the Combine Shapes and Merge Shape Components functions

Passo 10

Vamos prosseguir e usar a Ferramenta Caneta (P) para desenhar a letra "M" com a poli linha.

use the Pen Tool to draw out the letter M

Passo 11

Continuando com a letra "E", essa será um pouco mais complexa que as letras anteriores. Comece fazendo uma forma elíptica com a Ferramenta Caneta (P) semelhante ao que fizemos com a letra "O". Usar as linhas retas para formar a ornamento da letra, e então continuar formando um caminho curvo para a parte interna do "E".

Continue to the letter E

Passo 12

Vá movendo para cima gradualmente. Segure o Alt para mudar a direção do ponto de ancoragem para fazer o canto da linha cruzada da letra "E". Finalize a silhueta, fechando o caminho.

change the direction of the anchor handle to make a crossbar

Passo 13

Acrescente uma forma em formato de gota para a parte de dentro da letra. Agora nós podemos selecionar os dois elementos e aplicar Excluir Formas Sobrepostas (não se esqueça do Mesclar Componentes da Forma após selecionar a função desejada no Operações de Caminho.

Nós podemos checar nossas letras no painel caminho, preenchendo com cor branca.

Add a drop-like shape for counter of the letter

Passo 14

Agora vamos adicionar o ornamento ao lado oposto da barra transversal, usando a Ferramenta Caneta (P) para fazer a curva da forma.

add a swash to the opposite side of the crossbar

Passo 15

Selecione as duas partes e Combinar Formas no Operações de Caminho, clicando no Mesclar Componentes da Forma para aplicar o efeito.

Combine Shapes in the Path Operations

Passo 16

Ótimo! Todas as letras da palavra "home" estão prontas. Vamos dar uma olhada nelas e usar o painel Caminho para preencher as letras com cor branca.

Agora vamos deixar as letras mais interessantes e diversas aplicando alguns efeitos ao preenchimento.

use the Paths panel to fill the letters

2. Como Adicionar Sombras e Gradientes

Passo 1

Vamos adicionar algum volume a nossas letras usando o gradiente de preenchimento. Pegue a Ferramenta Gradiente (G) (você pode encontrá-la no mesmo menu suspenso da Ferramenta Balde de Tinta).

Primeiro de tudo, vamos ao painel Camadas e Bloquear pixels transparentes para nossa camada "home" de modo que tudo o que fizermos será aplicado apenas a letras, sem afetar a área ao redor delas.

Vá ao painel Cores e configure o azul para cor de primeiro plano e branco para cor de plano de fundo.

Então pegue a Ferramenta Gradiente (G) e arraste de baixo para cima na palavra "home", aplicando um gradiente linear vertical do azul para o branco. Você pode checar as configurações de gradiente no painel de controle, selecionando o tipo desejado de gradiente.

apply linear gradient

Passo 2

Vamos criar uma sombra projetada no fundo pelas letras para fazer com que a palavra "home" sobressaia um pouco mais. Crie uma Nova Camada bem embaixo da camada "home". Agora, mantendo a nova camada selecionada, segure a tecla Control apertada e clique na camada "home"

Selecione a cor de primeiro plano para azul escuro no painel Cores, pegue a Ferramenta Balde de Tinta (G) e clique em preencher, criando uma cópia azul escura da palavra "home" na nova camada, deixando a sombra azul escuro visível.

create a shadow from selection

Passo 3

Vamos ver como nós podemos acrescentar sobras sutis às letras para deixá-las mais tridimensionais. Nós usaremos a Ferramenta Caneta (P) ou a Ferramenta Caneta Forma Livre para criar a forma. Vamos aumentar o Zoom (Control-+) da letra "E" e desenhe um caminho conectando seu adorno com a barra transversa, conforme mostra a captura de tela abaixo.

Continue construindo o caminho, fazendo a forma retangular. Não precisa ser perfeita, apenas certifique-se de que é mais larga que a letra.

use the Pen Tool to connect the swash with the crossbar

Passo 4

Selecione a camada "home" no painel Camadas, segure Alt apertado e clique no botão Criar Nova Camada. No menu suspenso da janela Nova Camada, marque a caixa Usar a Camada Anterior como Máscara de Recorte para criar uma camada vinculada. Você verá uma pequena seta perto da nossa nova camada, indicando que qualquer coisa que desenharmos vai aparecer apenas dentro dos limites dos objetos da camada principal.

Vamos ver como isso funciona. Clique direito com o mouse e Fazer Seleção. Usando a Ferramenta Gradiente para aplicar um gradiente linear diagonal do azul para o branco.

Make Selection and apply gradient

Passo 5

Alterne o Modo de Mesclagem da camada vinculada para Multiplicação, tornando a parte branca do gradiente transparente. Dessa forma nós criamos uma sombra sutil, separando a borda transversa  (e seu adorno) do corpo da letra "E".

Adicione uma sombra semelhante no topo da barra transversa, dessa vez mudando a direção do gradiente para o oposto.

Switch the Blending Mode to Multiply

Passo 6

Usando a mesma técnica adicione uma sombra a letra "O", separando seu adorno curvo do corpo da letra.

Agora a palavra inteira parece tridimensional e finalizada! Vamos passar para o próximo elemento da composição!

add the shadow to the letter O

3. Como Adicionar Formas Personalizadas e Digitalizar Sua Letra

Passo 1

Agora o que nós vamos fazer a seguir é acrescentar a forma de coração. Felizmente nós não precisamos desenhá-la manualmente, nós podemos pegar a Ferramenta Forma Personalizada, e escolher o coração da lista de Formas no painel de controle no topo, e criar um coração do tamanho desejado, usando nosso esboço como referência.

create a heart with custom shape tool

Passo 2

Pegue a Ferramenta de Seleção Direta (A) e mova as alças do ponto de ancoragem, deixando o coração mais bojudo e arredondado na parte de baixo. Se você não puder ver as alças, use a Ferramenta Converter Ponto de Ancoragem, para clicar e arrastar as alças para fora do ponto de ancoragem

Nós podemos alternar entre cor de Preenchimento e Traço (ou aplicar as duas, ou configurar ambas como nenhum) a partir do painel de controle do topo, selecionando a cor desejada no painel suspenso.

Eu configurei a cor de Preenchimento como Nenhum por agora pois eu preciso ver as letras do meu esboço dentro do coração.

reshape the heart

Passo 3

Vamos prosseguir para a palavra "heart". Para tal letra estilo manuscrita, eu vou preferir usar um pincel real ao invés da caneta e papel. Se você sempre quis tentar uma letra à mão, esse é um bom ponto de partida. Uma das melhores caneta pincel para começar é a Tombow Fudenosuke, ou pode ser qualquer outra caneta pincel de sua escolha.

Você pode também fazer isso com uma caneta gel norma ou mesmo um lápis, criando a chamada "falsa caligrafia", desenhando esses traços mais grossos manualmente e preenchendo-os com cor. No nosso caso, não importa como você vai conseguir esse efeito de caligrafia contanto que pareça bom, já que vamos torce-lo no Photoshop de qualquer modo.;

Então eu apenas desenhei minhas letras num pedaço de papel, posicionando as letras de tal modo que a composição lembra-se uma forma de coração. Nós podemos torcer a posição de cada letra, se não se encaixar no nosso coração, então não se preocupe com isso, mas ainda tente fazer o mais perto possível do nosso esboço de referência.

Escaneia suas letras (ou tire uma foto) e arraste para o Photoshop. Vá ate Imagem > Ajustes > Níveis (Control-L) e aqui nós precisamos aumentar o contraste total e o brilho da nossa camada de letra para deixas as letras escuras realmente pretas e o plano de fundo branco, fazendo com que a textura do papel desapareça.

Para fazer isso, arraste o controle deslizante do preto para a direita e o oposto (branco) para a esquerda, posicionando-os perto do controle do meio. Você verá a diferença enquanto ajusta a posição de ambos, deixando a imagem mais nítida e limpa.

digitise your lettering and use Levels

Passo 4

Uma vez que esteja satisfeito com o contraste das letras, vá até Selecionar > Intervalo de Cores e abra a janela de opções. De lá, você terá a Ferramenta Conta-Gotas selecionada por padrão. Use sobre a palavra "heart" e clique em qualquer uma das letras pretas. Deixe o controle de Intensidade a 40% ou ajuste o valor se você achar que nem toda a área preta está visível na pré visualização. Clique em OK uma vez e está pronto você verá uma seleção "tracejada" ao redor das letras. Copiar (Contro-C) as letras.

use Select Color Range to select black letters

Passo 5

Agora nós podemos Colar (Contro-V) a palavra "heart" no nosso pôster e pressionar Control-T para Transformação Livre, e redimensionar e rotacionar a camada, fazendo com que se encaixe na forma de coração.

Se algumas das letras não couberem na forma de coração, use a Ferramenta Laço (L) para selecionar a letra (apenas desenhe em volta dela), e então pressione Control-T novamente e rotacione/redimensione a forma selecionada individualmente.

Vamos deixar nossas letras visíveis e brilhantes. Selecione a camada "heart" e vá até Imagem > Ajustes > Inverter, mudando a cor das letras de preto para branco.

Paste and Invert the layer

Passo 6

Vamos acrescentar alguns pequenos detalhes ao redor das letras. Pegue a Ferramenta Pincel (B) e tanto, abra o painel Pincel (Janela > Pincel) ou pressione o botão direito do mouse para abrir a lista de pinceis e selecione um Pincel Redondo Duro.

Se você não vê nenhum desses na sua lista, abra o menu suspenso clicando no pequeno ícone de engrenagem no canto superior direito e encontre os Pincéis Redondos com Tamanho na lista. Clique e ou substitua ou Acrescente ele a sua lista de pincéis.

open the brush panel or list of brushes

Passo 7

Você pode encontrar suas configurações de pincéis no painel de controle no topo. Eu mantenho ambos, Opacidade e Fluxo em 100%, deixando as linhas afiadas e grossas. Eu estou desenhando pontos e traços em volta da letra "H", usando a mesa digitalizadora.

add minor details

Passo 8

Vá adicionando traços e pontos ao redor de cada letra. Uma vez que tenha terminado e esteja contente com o resultado, selecione a camada da forma de coração, e clique na Ferramenta Forma Personalizada deixe o menu Forma no painel de controle no topo ativo, e configure o Preenchimento da cor para vermelho, preenchendo a parte interna do coração.

fill the heart with red color

Passo 9

Vamos dar a nossa escrita "heart" uma aparência mais dourada ou metálica, aplicando um simples gradiente linear de amarelo para branco. Dessa maneira vai parecer mais tridimensional.

apply gradient to the lettering

Passo 10

A seguir, nós vamos desenhar a palavra "is", que é usada duas vezes na nossa frase. Então você pode realmente desenhá-la duas vezes para deixar cada elemento com uma aparência única e manuscrita, ou você pode apenas duplicar aquele que você fez.

Eu estou usando o mesmo Pincel Redondo Duro e minha mesa digitalizador aqui, para desenhar a letra "i", usando o esboço como referência. Como você pode ver, eu desenho as linhas horizontais de cima de baixo em primeiro lugar, e depois eu adiciono as duas linhas verticais para as bordas das letras, definindo sua grossura. E finalmente, eu apenas preenchi a parte interna da letra com uma cor azul clara, quase branca.

Então eu usei a mesma técnica para a letra "s": eu desenhei a silhueta e então preenchi sua parte interna com cor.

write with hard round brush

Passo 11

Aqui nós podemos ver como nosso pôster se parece até agora. eu usei uma cópia da camada "is" (Control-J) para adiciona-lo bem embaixo do coração.

use the copy of the is layer

Passo 12

Agora nós podemos prosseguir para o próximo elemento da nossa composição e acrescentar as palavras "were your(onde seu)" logo acima da forma de coração.

Você pode experimentar com o Pincel Redondo Duro ou com os Pincéis Caligráficos do Adobe Photoshop para conseguir o efeito de escrito à mão se você tiver uma mão firme e uma mesa digitalizadora. Ou você pode seguir a mesma técnica que usamos para a palavra "heart".

Então vamos escrever a frase "were your" no papel usando a caneta pincel, e então escanear e trazê-las para o Photoshop para deixá-las mais limpas e contrastantes usando os Níveis (Control-L). A seguir, use Selecionar > Intervalo de Cores para selecionar as letras pretas, Copiar (Control-C) e então Colar (Control-V) direto no pôster. Usando a Transformação Livre (Control-T) rotacione e redimensione as palavras, fazendo com que elas se encaixem na parte superior da forma de coração.

Não se esqueça do Imagem > Ajustes > Inverter a camada para deixar as letras brancas.

Como você pode ver a partir da captura de tela abaixo, nós também começamos a adicionar pontos e traços vermelhos ao redor da borda do coração do mesmo modo como fizemos com a palavra "heart". Isso dá uma aparência intricada e divertida a todo o design do nosso pôster, então vamos nos ater a isso, adicionando mais detalhes ornamentais desse tipo.

scan and digitize your hand-lettering

Passo 13

Continue usando esses detalhes decorativos menores ao redor do coração usando o Pincel Redondo Duro com 100% de Opacidade e Fluxo.

ad minor decorative details around the heart

Passo 14

Assim que terminarmos com o coração, vamos mudar para a parte superior do nosso pôster e desenhar um teto estilizado na nossa casa no mesmo estilo ornamental. Vamos fazer uma Nova Camada, configure a cor de primeiro plano em azul claro, e varie o tamanho do pincel, fazendo a base triangular do teto um pouco mais grossa do que os pontos e traços em volta do coração.

Eu estou acrescentando um elemento em redemoinho do lado direito do teto retratando uma, bem simplificada e quase abstrata, fumaça de uma chaminé de lareira.

A seguir, estou adicionando alguns traços em baixo da palavra "home" dobrando-os na direção oposta para equilibrar teto.

draw a stylized roof of our house

Passo 15

Vamos continuar e criar uma Nova Camada para outro conjunto de elementos decorativos. Aqui eu estou deixando a cor de primeiro plano, muito, muito mais escura e acrescentando espirais, traços e pontos em volta das letras da palavra "home". Você pode usar Imagem > Ajustes > Inverter na camada se os traços estiverem muito escuros e depois Inverter de novo quando você finalizar toda a palavra.

create another set of decorative elements

Passo 16

Nosso ornamentos escuros estão finalizados! Vamos Continuar!

dark ornaments are finished

Passo 17

Nós vamos adicionar mais algumas espirais e traços ao redor do coração. Comece enchendo o lado esquerdo da imagem e então mude para o lado oposto, criando ornamentos similares para deixar a composição equilibrada.

Para finalizar nós vamos acrescentar traços azul claro horizontais nos dois lados da palavra "is" na parte inferior do pôster.

Finish up by adding light-blue horizontal strokes

Lar Doce Lar! Nosso Pôster de Boas Vindas Está Pronto"

Ótimo trabalho, pessoal! Eu espero que esse tutorial inspire você a criar mais pôsteres divertidos com letra de mão para o seu interior acolhedor ou para imprimir. Sinta-se livre para usar todas as dicas e truques descritos nesse artigo e não se esqueça de compartilhar seus resultados.

Feliz design!

Our Housewarming Poster is Ready
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.