All for Joomla All for Webmasters

Table abraçando o layout

Hoje eu vou ensinar esse efeito aqui. Tá vendo que a table “abraça” o layout? É algo que eu sempre quis fazer, e aprendi ~na marra~ KKKKKKKKKKKK

1. Abra um novo documento no Photoshop.

2. Você vai selecionar a ferramenta Rectangular Marquee Tool (o retângulo traçadinho), fazer um retângulo grande e mais ou menos fino. Depois, você vai criar uma Layer nova clicando no botão Create a New Layer na janelinha Layers. Depois disso, vai selecionar uma cor na paleta de cores (NÃO pode ser branca) e pintar dentro do retângulo que você fez com a ferramenta Paint Bucket Tool, que é o balde de tinta.

Não entendeu? Olhem a imagem abaixo:


clique na imagem para visualizá-la maior

A imagem explica tudo o que eu falei em forma de imagem (rere como eu fui óbvia) e até a ordem dos passos.

3. Agora, você vai selecionar a ferramenta Custom Shape Tool (ela parece uma amoeba rererererer) e na barra superior, selecionar a linha fina diagonal. Em Weight (que vai aparecer na barra superior de shapes (formas)), coloque: 1px.

A imagem abaixo explica esse processo:

4. Agora, aperte Ctrl+D do seu teclado, ou vá em Select - Deselect.

5. Você vai fazer duas linhas com a shape de linha que você acabou de selecionar no passo 3. E vai fazer um triângulo dos dois lados, na forma que eu fiz na imagem abaixo:


clique na imagem para visualizá-la maior

É só duas linhas que precisa fazer: a diagonal e uma reta. Lembra que você aprendeu na escola? Catetos e hipotenusa… é só fazer um dos catetos (a linha reta) e a hipotenusa (a em diagonal). O outro cateto é a base do retângulo que você fez.

Camillynha é matemática pura u_u

Voltando ao tutorial… agora vem a parte mais chata.

Selecione a ferramenta Polygonal Lasso Tool.

Eu aconselho que antes disso, você dê zoom na imagem. Na hora do zoom, apertar umas 2 vezes já está bom.

Se a ferramente aparecer de outra forma (é a terceira da paleta de ferramentas), é só clicar com o botão direito em cima do laço e selecionar: Polygonal Lasso Tool.

6. Com essa ferramenta, você vai “contornar” o triângulo. Assim:

Conseguem ver a ferramenta ali no círculo? A cada linha que você fizer, aperte o botão esquerdo do mouse, que você vai “demarcando” o triângulo. Depois, é só fechar o triângulo apertando novamente o botão esquerdo do mouse.

Vai ficar assim:

7. Você vai criar UMA NOVA layer e com o balde de tinta, pintar essa parte da mesma cor que o retângulo. Olha só:


clique na imagem para visualizá-la maior

8. Agora, você vai novamente em Select - Deselect.

9. Vai ficar assim:


clique na imagem para visualizá-la maior

10. É só fazer a mesma coisa do outro lado!


clique na imagem para visualizá-la maior

11. Agora vamos juntar tudo numa coisa só, beleza? Aí você pode arrastar a table pra onde quiser.

Exclua a layer Background se você fez a table em um fundo (o que eu recomendo, porque você visualiza melhor a table, mas se você fez em fundo transparente não tem problema, e você pode pular essa etapa).

12. Aperte Ctrl + Shift + E.

Prontinho! Sua table abraçadora está pronta pra abraçar seus themes -q