janeiro 24, 2010 from abduzeedo's blog
Muitas pessoas me perguntaram como criar uma UI no Pixelmator, algo no estilo Apple com bevels e efeitos letterpress. Também recebi algumas perguntas sobre como criar cantos arredondados, então criei esse tutorial para dar algumas dicas eficientes e úteis sobre essas questões.
Passo 1
Abra o Pixelmator e crie um novo documento. Usei 1000×1000 pixels. Agora preencha o background com cinza. No menu, selecione File>Stylize>Noise. Selecione 1 para amount.
Passo 2
Selecione a Rectangular Marquee Tool (M) para criar uma 'rectangular marquee'.
Passo 3
Vá até Edit>Refine Selection. Agora você conseguirá trocar a seleção; você pode aumentar ou reduzir o tamanho, deixar as extremidades blurry com Feather, ou criar rounded corners com Smooth. Selecionei level 15 para Smooth.
Passo 4
Adicione uma nova layer e use a Gradient Tool (G) para preencher a marquee area com o gradiente. Para as cores, usei gradiente cinza escuro de #666 para #999.
Passo 5
Selecione a Rectangular Marquee Tool (M) novamente e crie uma seleção marquee como a da imagem abaixo. A idéia aqui é criar uma tab para a navegação do site. Depois simplesmente delete a parte de baixo do retângulo.
Passo 6
Para selecionar apenas os objetos da layer, vá até o Layers Panel, pressione Command e clique no thumbnail da layer que quiser selecionar.
Passo 7
Volte a opção Edit>Refine Selection. Vamos aumentar o tamanho em 1% e aumentar o Smooth level em 1%. A idéia aqui é criar um pouco de bevel, ou stroke, e aplicar gradiente nele.
Passo 8
Adicione outra layer por trás da tab layer. Com a gradient tool e a seleção ainda ativa, preencha a layer com o gradiente. As cores do gradiente são preto a branco, com o cinza escuro na parte de baixo e o branco na parte de cima como umhighlight 3D bevel. Use a imagem abaixo como referência.
Passo 10
Aqui está a nossa navigation tab. Estamos acostumados a filtros e outros comandos para criar efeitos desse tipo em ferramentas como o Fireworks ou Photoshop, mas como demonstrado aqui, também podemos fazer isso de outra maneira. Claro que o processo manual pode levar mais tempo, levar mais alguns passos, mas pode também nos ajudar a ajustar melhor os detalhes durante o processo, detalhes como luz, sombra e profundidade.
Passo 11
Com a Rectangular Marquee Selection (M), crie uma seleção retangular de 1px de altura.
Passo 12
Adicione uma nova layer e preencha a seleção com branco. Dessa maneira podemos criar uma linha branca.
Passo 13
Adicione outra layer e a preencha com um cinza que seja um pouco mais escuro que o background. Vá novamente até Filter>Stylize>Noise e adicione 1% de noise ao cinza. Depois mova a layer para baixo e a coloque abaixo da linha branca. A linha será o 3D bevel da layer.
Passo 14
Selecione cada layer e vá até Layer>Add Layer Mask. Preencha a layer mask com preto usando a Paint Bucket Tool (N). A layer vai desaparecer. Com a Brush Tool (B) e um 'very soft brush', selecione a cor branca e pinte sobre as áreas que quiser mostrar. Nesse caso, apenas a parte central de cima do retângulo e da linha vão aparecer, como na imagem abaixo.
Passo 15
Selecione as duas layers e as duplique, vá até Layer>Merge Layers. Depois selecione Edit>Transform>Flip Vertical. Assim será criada uma área retângular na qual mostraremos o conteúdo principal do site. Tente combinar as cores da tab com as dessa área principal. Você pode editar as cores das layers selecionando Image>Adjustments>Hue and Saturation.
Passo 16
As pessoas sempre me perguntam como criar efeitos sutís letterpress. Algumas ferramentas permitem que você aplique shadows ou bevels, mas o Pixelmator não tem essa opção, pelos menos não automatizada. No entanto, tem uma maneira rápida e fácil de criar o mesmo efeito. Primeiro, adicione o texto que quiser; no meu caso coloquei “About Us” em texto preto, fonte Arial 16px.
Passo 17
Duplique a layer e troque a cor do texto para branco, e o mova para baixo, 1 pixel. Agora você terá um efeito legal letterpress. Você também pode deixar o efeito ainda mais sutíl reduzindo a opacity do branco.
Passo 18
Crie mais alguns itens de navegação, dessa vez sem tabs. A tab será usada apenas para o item selecionado.
Passo 19
Adicione um texto sobre o produto. Para isso, aumentei o tamanho da fonte, black Arial 20px.
Passo 20
Repita o passo 17 para criar o efeito letterpress. Duplique a text layer, troque a cor para branco e mova para baixo, 1 pixel. Dica: se a cor do texto é branca você pode criar o efeito selecionando preto e movendo o texto 1 pixel para cima.
Passo 21
Adicione mais texto usando uma fonte menor, de 12 pixels. Fora da área principal, adicione um título para Screenshots usando a mesma fonte 20-pixel usada para criar o texto principal. Repita o efeito letterpress.
Passo 22
Importe uma screenshot ou outra imagem e posicione no seu design. Mova para a direita para que a imagem passe a ser a imagem principal do site. Como você pode ver na imagem abaixo, a que usei é maior que a área principal e esta passando por cima da linha branca. Para arrumar isso, use a RectangularMarquee Tool (M) para selecionar a área da imagem que melhor se encaixe entre as duas linhas brancas. Use a imagem abaixo como referência.
Passo 23
Vá até Layer>Add Layer Mask. A mask vai esconder as áreas que não estão dentro da marquee selection.
Passo 24
Importe mais algumas screenshots para usar na área abaixo do título Screenshots. Vamos adicionar mais alguns toques a essas imagens. Para criar um pouco de stroke branco, vá até Edit>Stroke. Selecione branco para a cor, 4 para Width e Inside. Clique OK.
Passo 25
Também é bastante simples de criar shadow. Primeiro, crie uma marquee selection da imagem, como fizemos no Passo 6. Adicione então uma nova layer e a preencha com preto usando a Paint Bucket Tool (N). Para criar a sombra vá até Filter>Blur>Gaussian Blur. Usei 15 para radius, mas você pode selecionar um raio maior para criar uma sombra maior.
Conclusão
Agora apenas adicione seu logo e um slogan. Está pronto! Mesmo que não existam filtros diretos para criar cantos arredondados oubevels , é bastante simples criar os efeitos você mesmo com alguns passos extras. Esse processo é um bom exercício para seus olhos e seu cérebro, e vai nos ajudar a entender melhor a maneira com que gradientes simples, cores e sombras podem dar profundidade a uma imagemflat.
Espero que gostem do tutorial e que achem ele útil. E fique a vontade para enviar seus pedidos e sugestões para abduzeedo@abduzeedo.com.
