Produto & UXARTIGO

Presentes de Photoshop

Programa utilizado: Photoshop 7 BR

Pré-Requisitos: Conhecimento introdutório em Photoshop

Ao som de: Mägo de Oz – Satania

Olá pessoal, tudo tranquilo?

Antes de mais nada, um feliz ano novo a todos os leitores. Neste clima de festas, veremos como criar caixas e presentes personalizados, de um modo simples e bem flexível.

Com uma noção básica de desenho é fácil criar uma caixa, mas já que nem todos possuem esta noção, eu partirei do zero, montando toda a estrutura do desenho no Photoshop antes de começar. (como muitos pediram, vou colocar os comandos em inglês – português, e minhas próximas colunas já serão em Photoshop CS2).

Crie um documento com as seguintes características:

Passo 1– Pressione Ctrl+Shift+N para criarmos uma nova camada.

Passo 2– Com a ferramenta “Marca de seleção Retangular (Retangular Marque Toll)” faça um quadrado.

Logo depois, clique com o botão direito do mouse, e selecione “traçar (stroke)”, como na imagem abaixo:

Deixe do seguinte modo:

Cor: 6C0000

Passo 3 – É semelhante ao anterior. Criaremos um quadrado com a ferramenta “Marca de seleção Retangular (Retangular Marque Toll)”, só que em um local diferente, e logo depois clicamos com o botão direito do mouse, selecione ‘traçar(stroke)’, como na imagem abaixo:

Na parte do traçar, deixe os mesmos valores, apenas mude a cor para: B80000

Nossa imagem deve estar da seguinte forma até o momento:

Passo 4 – Com a ‘ferramenta linha (line tool)’, traçaremos quatro linhas, como na imagem abaixo:

As duas linhas superiores, da seguinte cor: 820000

A inferior da direita (interna): B80000

A inferior da esquerda (externa): 6C0000

Isto é feito para ficar mais fácil de colorir nos próximos passos. Neste momento temos um cubo, que é a base para a caixa.

Agora agrupe todas as camadas, vinculando-as e apertando Ctrl + E:

Passo 5 – Com a ‘Ferramenta Lata de Tinta (Paint Bucket Tool)’ , pinte os quadrados da seguinte forma:

Cores: 1 – 820000 2 – 6C0000 3 – B80000

Com o pincel, lata de tinta (paint bucket tool), ou qualquer ferramenta de sua preferência, apague as linhas, e deixe do seguinte modo:

Passo 6– Com a ‘ferramenta linha (line tool)’ novamente, faremos a tampa da nossa caixa. Trace algumas linhas (cor: 930000) do seguinte modo:

A imagem não ficou muita boa, mas prestem atenção em cada cubo para verem o local onde a linha foi criada. Cuide para que as linhas fiquem juntas, se não a tinta pode ‘vazar’.

Vincule todas as linhas criadas, e pressione CTRL + E para agruparmos em uma só camada (como anteriormente).

Passo 7– Já com as camadas agrupadas, selecione a ‘Ferramenta Lata de Tinta (Paint Bucket Tool)’ e pinte do seguinte modo a nossa tampa:

Cor (parte superior): 820000

Cor (parte lateral): 910000

Cor (parte da frente): CF0000

Pode parecer meio confuso até o momento, mas se seguirem os passos com calma, deve estar tudo certo. Já temos uma caixa, mas agora falta as fitas que toda caixa de presente possui, e o ‘top’ na parte superior.

Ainda na camada da tampa, vá em ‘Opções de Mesclagem – Sombra Projetada (Blending Options – Drop Shadow)’ e deixe os valores do seguinte modo:

Isto resultará uma pequena sombra, na tampa, ficando um melhor acabamento

Passo 8 – Crie um quadrado da seguinte cor FFD200, entre a tampa e a caixa:

Agora peço muita calma e concentração. Muita gente se perdeu em uma parte parecida com esta no artigo anterior. Vamos por partes:

1 – Duplique a camada deste quadrado amarelo

2 – Posicione ela após a camada da tampa

3 – Ainda na camada duplicada, segure CTRL e clique na camada da TAMPA. Isto criará uma seleção ao redor da tampa. Veja na imagem:

No meu caso, a ‘Camada 1 – Caixa”, “Forma – 10 – Fita’, ‘Forma 9 – Tampa’, ‘Forma 10 – Camada atual’.

4 – Logo após isto, pressione CTRL + SHIFT + I, para invertermos a seleção, e logo após aperte delete. Observem como deve ficar:

Agora, faça outro quadrado logo acima, e clique com o botão direito do mouse. Logo após, selecione a ferramenta distorcer:

Com o “distorcer” selecionado, alinhe a fita de acordo com a tampa da caixa. Observe:

Agora repita os mesmos passos, para criarmos uma fita na lateral. Crie um quadrado na lateral, alinhe ele com a ferramenta distorcer, duplique, posicione a camada acima da tampa, faça os passos para deletar, crie outro na parte superior, e novamente alinhe com a ferramenta distorcer. Deve ficar parecido com isto:

Cuidem para não se perder. É algo bem simples, mas precisa ter um pouco de atenção.

Passo 9 – Crie um círculo onde as linhas se cruzam, e em ‘Opções de Mesclagem (Blending Options)’ deixe os seguintes valores:

– Sobreposição de degrad (Gradient Overlay)’

Cores, da esquerda para direita: D57D00 / FFC600 / FFEAA3 / FFAE00

– Brilho Interno (Inner Grow)

Sua imagem, até o momento, deve estar do seguinte modo:

Agora, crie um círculo ao lado, vá em ‘Filtro – distorção – ondas (filter – distort – wave)’ e deixe os valores do seguinte modo:

Obs.: O resultado pode variar de acordo com o tamanho do círculo que você fez. Não fique preocupado se ficar diferente.

Agora aplique a mesma textura aplicada no círculo, com o degradê e o brilho interno. E posicione logo ao lado, e logo após dupliquem a camada. Mudem um pouco o ângulo da camada duplicada. O resultado deve ficar mais ou menos assim:

Passo 10– Crie um retângulo, mais alto, e novamente vá em ‘Filtro – distorção – ondas (filter – distort – wave)’ , e deixe os mesmos valores. Logo após, faça outro e repita o mesmo passo anterior. Posicione-os em uma posição de sua preferência. Olhe:

Caso não fique do modo que você quer, pode alterar o valor das ondas sem problemas!

Coloquei uma pequena sombra também nestes dois últimos retângulos com “onda”. O que acharam do resultado final?

Observações e dicas: Sei que o artigo ficou longo, mas a minha intenção era detalhar com calma o processo. Existe um modo mais fácil de fazer isto? SIM! Mas este modo pode ser usado para diversas outras funções, até mesmo para criação de ícones.Usem texturas na caixa, brushes, desenhos…É possível criarmos vários efeitos ou desenhos a partir deste conceito. Usei apenas ferramentas simples como podem ter percebido. Minha intenção não é um resultado final fantástico, e sim uma nova técnica para vocês usarem em seus trabalhos.

Pessoal, queria agradecer pelo carinho, tanto no MSN quando nas colunas, muito obrigado! Fico a disposição para tirar qualquer dúvida! Basta entrarem no meu site www.rcdesigner.com.br e pegarem meu MSN na parte de contato.

Queria divulgar um projeto meu, chamado RedePhotoshop (www.redephotoshop.net). Confiram! Desde já fico grato!

Agora quero a opinião de vocês, e o que preferem para o próximo artigo? Estou com duas idéias, um artigo sobre vetorização, ou três artigos seqenciais sobre CSS para criação de layouts (com comandos, curiosidades: um manual completo).

Empresário e empreendedor, atua como Diretor de Produção da Chilimonk (www.chilimonk.com), produtora digital e como Diretor Geral da Oka Digital (www.okadigital.com), empresa que atua como hub de novos negócios. Já atuou como Gerente de Operações e Produção de multinacionais do mercado de publicidade, atendendo clientes como Google, Coca-cola, Nike, Bradesco, Pepsico, Disney, Samsung, Canon e diversas outras marcas, através de várias das maiores agências do Brasil. Antes de ir para o caminho de gestão, já trabalhou com UX/Arquitetura de Informação, desenvolvimento frontend e outras áreas de produção. Já participou de projetos ganhadores de Leão de Cannes, FWA e Peixe Grande. Escreve para o iMasters desde os 15 anos.

Ver perfil