Pular para o conteúdo principal

Criando o efeito long shadow no photoshop

O cenário web tem se modificado bastante ultimamente. Uma das tendências é o efeito Long Shadow, ou traduzindo, sombra longa. Já existem diversos tutoriais ensinando como aplicar o efeito, eu optei pelo mais simples para que todos consigam acompanhar.


Passo 1

Crie um novo documento com tamanho de 400 x 400 px de fundo branco.

Passo 2

Crie uma nova camada e preencha com a cor #9b59b6.

Passo 3

Pressione as teclas control + T para ativar o modo free transform. Deixa o botão shift pressionado e mova a extremidade do quadrado para cima conforme imagem abaixo e dê ok.

Passo 4

Volte para ferramenta move tool, dê um control + A para selecionar todo trabalho e alinhe o quadrado que acabamos de redimensionar ao centro.

Passo 5

Crie uma nova camada, selecione a ferramenta custom shape toll. Aqui usaremos o trevo. Crie um na cor branca. Repita o passo do alinhamento anterior e deixe-o centralizado.

Passo 6

Ative as réguas do photoshop com o comando control + R, e arraste três linhas conforme a imagem.

Passo 7

Crie uma nova camada e arraste para baixo da camada do nosso trevo. Selecione a ferramenta peen tool configure para shape layers. Define a cor para #8e44ad.

Passo 8

Agora com a peen tool selecionada, crie um shape conforme mostro abaixo. Não se preocupe se ele ultrapassar nosso trabalho, irei explicar.

Último passo

Com a tecla ALT pressionada, dê um clique na linha que divide nosso quadrado e a sombra de nosso trevo. Repare que agora ela está presente dentro de nosso quadrado.

Resultado final

Criem variações, usem e abusem da criatividade. A imaginação é o limite!

É isso pessoal, espero que tenham curtido. Mostre o que conseguiram fazer por comentário, ficarei muito grato.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

10 super mockups grátis

Um mockup é basicamente uma maquete, uma cópia do trabalho final muitas vezes em tamanho resumido para dar a ideia do real projeto. Muitos dos mockups disponibilizados na web já possuem toda estrutura necessária e permite uma economia de tempo na hora de criar obras derivadas.

Criando um rodapé com 3 colunas

O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a barra laretal.Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.Google docsO googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito. 1º passoAcesse o site do Google docs e faça seu login. 2º passoClique em criar novo e selecione formulário. 3º passoNeste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar: Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem. Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.1- Define o texto do campo. Deixe-o como nome. 2- Texto adicional, que po…