Pular para o conteúdo principal

Ribbons flats no photoshop

Os ribbons tem sido utilizados em diversas variações pela web a fora. Eles dão um toque de atenção, são destaques e um chamativo ao usuários com seus visuais. Hoje você irá aprender a criar um modelo flat, simples e com um visual bem bacana.


Passo 1

Crie um novo documento com no tamanho de 500x500px e preencha o fundo com uma cor de preferência escura (aqui usei #1D1D1D).

criando ribbons no phoroshop

Passo 2

Crie um retângulo com a ferramenta rectangle  tool na cor branca.

criando ribbons no phoroshop

Passo 3

Duplique esse retângulo, arraste a camada para baixo da camada de nosso retângulo principal e pressione as teclas control + T para ativar o modo free transform patch. Arraste a latera deixando o quadrado menor como mostro abaixo.

criando ribbons no phoroshop

Passo 4

Clique com o botão direito na camada do retângulo menor e escolha Rasterize layer. Selecione a ferramenta peen tool, configure para modo patch e tente formar um triangulo horizontal como na imagem. Após isso, vá na layer e rasterize mais uma vez.

criando ribbons no phoroshop

Passo 5

Posicione a camada ao centro ou um pouco abaixo do nosso retângulo principal.

criando ribbons no phoroshop

Passo 6

Selecione a ferramenta rectangle marque tool, e na camada da ponta iremos abrir uma margem entre os elementos. Crie uma seleção próximo do elemento principal e a ponto e aperte a tecla delete.

criando ribbons no phoroshop

Após o delete.

criando ribbons no phoroshop

Passo 7

Duplique a camada da ponta, vá até o menu Edit / transform / flip horizontal. Após esse passo, posicione a ponta na outra extremidade e seu ribbon está pronto!

criando ribbons no phoroshop

Segue um exemplo de como fica bacana.

criando ribbons no phoroshop

Como sempre digo, crie variações. Mude cores, formatos, tamanhos… Tragam um retorno com o que conseguiram fazer. Solicitem algum tutorial. O blog é de vocês!

Comentários

Postagens mais visitadas deste blog

Seleção brasileira iphone wallpapers

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

Crie um elegante menu com css e html

Neste tutorial você vai aprender como criar um elegante menu utilizando a dupla Html e Css em poucas linhas de códigos. Lembrando que o tutorial é voltado para o usuário iniciante, que está se aventurando como desenvolvedor front-end ou que desenvolve por hobbie.

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.