Nuvem de TAG's

Publicidade

Arquivo

Merece Um Clique

Firefox

Visitantes

free counters
  • 24jul

    Já vi vários artigos falando sobre Bacgrounds/Fundos listados, padrões de preenchimento, linhas verticais, design patterns e outras espécies do tipo. Mas sempre tenho a sensação de que o artigo não está completo… que falta alguma coisa… Então, como se diz no Rio de Janeiro, “vamos fazer barba, cabelo e bigode”:

    Como criar e instalar e usar os famosos patterns no photoshop;
    Aplicar os patterns em imagens, inclusive combinando com outros filtros e recursos do Ps;
    Baixar vários patterns e imagens de/com listas diagonais e outros padrões de preenchimento;
    Visitar diversos sites com tutoriais e até geradores de patterns/stripes

    O artigo é grande, mas se não fosse não justificaria a demora em postar (hehehe)

    Vamos lá:

    Patterns, Grid Lines, Padrões….

    São vários os nomes, mas o “produto” é o mesmo: um padrão repetitivo de imagem que resulda num efeito. Você deve em mente então que o pattern a ser criado se repetirá por toda a imagem ao ser aplicado, e que por isso deve-se sempre imaginar ou testar como fica essa combinação. Alguns exemplos:

    Paterns

    Alguns exemplos de padrão-de-preenchimento, os patterns

    Vamos criar o nosso pattern

    1 – Abra o PhotoShop, crie uma nova imagem de tamanho 6×6 pixels. É, é pequeno mesmo. :)

    1 - Criar nova imagem 6x6px no photoshop

    1 - Criar nova imagem 6x6px no photoshop

    2 – Aumente no máximo o zoom de sua imagem, para podermos ver/desenhar pixel-por-pixel nela.

    3 - Aplicar o máximo de zoom possível

    2 - Aplicar o máximo de zoom possível

    3 – Desenhe um padrão. Como disse antes, pode-se desenhar “qualquer coisa” mas não se deve esquecer que este padrão se repetirá várias e várias vezes – imagine (ou desenhe em) um papel quadriculado, onde voce terá várias repetições em todas as direções do desenho que fizer aqui.

    Para dar seguimento, vamos usar um padrão simples: linhas verticais. digo no plural para ressaltar, mais uma vez, que é a repetição dessa pequena figura que irá criar as linhas (ou qualquer outro padrão).

    > Selecione a ferramenta Pencil (lápis), escolha a “cor-de-frente” preta, expessura do traço de 1px e faça um traço diagonal na imagem, como mostrado abaixo:

    Desenhando o patern (padrão)

    3 - Desenhando o patern (padrão)

    4 – Por último, vamos definir esta figura como um pattern. Vá em “Edit > Define Pattern…” e na janela que surge coloque um nome de sua preferência. Nem precisa salvar a figura, só definir o patern :)

    4 - Definindo um pattern

    4 - Definindo um pattern

    Com nosso padrão criado, vamos aplicá-lo numa imagem. Siga para a próxima página clicando abaixo.

    Tags: , ,

  • 06abr

    [Atualizado]

    Vamos criar um botão no estilo “WEB 2.0″ (conhecidos como “Glossy Buttons”, ou sismplismente “Botões de Vidro”) com reflexo, usando o GIMP. É um processo bem simples e de poucos passos. Ao final do tuto nós teremos um botão igual ao abaixo:

    Botão Finalizado

    Botão Finalizado

    Gostou né?

    Então vamos logo ao trabalho!

    1 – Crie uma nova imagem (dãã) de fundo branco e com um tamanho razoavel. Minha sugestão é 500 x 500 pixels.

    2 – Crie uma nova camada, e com a ferramenta de seleção retangular desenhe um retangulo de 200 x 70 pixels (Na barra de status aparece o tamanho de sua seleção). Nas propriedades da seleção (janela caixa de ferramentas – A da esquerda) marque a opção  cantos arredondados e defina o raio para 15.

    Seleção retangular e arredondada

    Seleção retangular e arredondada

    3 – Use dois tons de uma mesma cor, um mais escuro e outro mais claro. Eu usei a cor de primeiro-plano: #3377AD e a cor de segundo-plano: #6EACDC.

    Ler tudo

    Tags: , ,

  • 18mar

    Fader ou Fade em imagem é o efeito onde a imagem vai ficando transparente em uma ou mais extremidades. Vou mostrar como obter este efeito de forma bem simples e rápida. Estou usando o Ps CS4 neste tutorial.

    1) Crie um novo documento no photoshop, escolha as dimensões que lhe for conviniente, crie uma nova camada (Layer > New Layer) e insira (ou crie) a imagem (formas, texto…) que vai receber o efeito nessa camada.

    A faixa azul-petróleo receberá o efeito

    A faixa azul-petróleo receberá o efeito

    4) Selecione a camada que receberá  o efeito, e crie uma máscara de camada (Layer > Layer Mask > Revel All)

    Ativando máscara de camada (Layer Mask)

    Ativando máscara de camada (Layer Mask)

    5) Clique na  ferramenta de preenchimento gradiente (Gradient Tool) ou pressione a tecla G

    Ferramenta Preenchimento Gradiente (Gradiente Tool)

    Ferramenta Preenchimento Gradiente (Gradient Tool)

    6) Pressione a tecla D, para que as cores de primeiro e segundo plano voltem aos padrões (preto e branco), depois clique na propriedade da ferramenta gradiente e escolha a predefinição “Foreground to Backround”.

    Predefinições (pressets) da ferramenta "preenchimento gradiente".

    Predefinições (pressets) da ferramenta "preenchimento gradiente".

    7) Agora basta clicar e arrastar o mouse sobre a camada escolhida, como se fosse fazer o preenchimento gradiente, e conferir o efeito criado. Não gostou? é só fazer o preenchimento novamente. ;-)

    Camadas com fade (ou fader)

    Camadas com fade (ou fader)

    Simples, não? :)

    Então é isso. espero ter ajudado :-)

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

    Dúvidas, criticas, elogios, sugestões, pedidos… Use a área de comentários. costumo responder no mesmo dia :-)

    Tags:

  • 17fev

    Fazer textos sem preenchimento (vazados) é relativamente fácil, mas muita gente não sabe como fazê-lo… Antes de começar este tutorial vou deixar uma dica: tente combinar algums ítens comuns do photoshop, como seleção, pintura, camadas… que sempre vai sair um resultado interessante. Como este:

    1 – Crie um novo documento de qualquer tamanho e qualquer cor de fundo, ou abra um arquivo do photoshop (.psd)

    2 – Selecione a ferramenta de máscara de texto (Mask Type Tool) – pode ser a horizontal ou a vertical, tanto faz. :)

    Ler tudo

    Tags: , , ,

  • 05fev

    Vou mostrar aqui como criar os famosos botões no estilo “orb”.  Aqueles botões que parecem bolas de vidro…

    Bom, a intenção é criar este efeito em links, então precisaremos cumprir duas etapas:

    Etapa 1 (PhotoShop) – Como criar as imagens que serão usadas para o efeito.
    Etapa 2 (DreamWeaver) – Como criar o efeito utilizando html+CSS

    > Vale lembrar que você pode usar o editor de imagens e de páginas web de sua preferência. Não precisa ser os que menciono neste tutorial. Mas vai caber a você adaptar os passos ao seu modo de trabalho  e do seu software :)

    > Pulo do Gato – Algumas ações tem um asterisco * ao lado delas. Isto significa que existe, no fim deste tutorial, uma dica rápida de como executar aquela ação, como a de criar uma nova camada* por exemplo :)

    > Então…. mão na massa!

    1. Crie um novo arquivo de fundo branco e do tamanho que você quiser, mais tarde veremos como recortar a imagem para ficar do tamanho desejado. Para este turorial eu estou usando 200×200px. Crie um novo layer*, o nome será orb-bg. Com a ferramenta eclipse, Crie um círculo perfeito*. Aplique um preenchimento gradiente no círculo de #2a2a2a (no topo) para #3e3e3e (no fundo).

    Ler tudo

    Tags: ,