O recém lançado Pixelmator inclue uma ferramenta muito importante: the Slice Tool. Agora nós podemos 'fatiar' e salvar pedaços de layouts para criar Web sites. Isso é muito útil! Exatamente por isso decidi criar um tutorial para mostrar como criar o design de um Web site usando Pixelmator.

Passo 1

Abra o Pixelmator, vá até http://960.gs/ e faça o download dos arquivos template. Abra a versão PSD para que tenha layers com guides. Selecione todas elas e vá até Layer>Merge Layers. Depois disso, preencha a background layer com cinza escuro (#333) usando a Paint Bucket Tool (N).

Web Design in Pixelmator

Passo 2

Vá até Filter>Stylize>Noise. Use 1 para Amount. Garante que a opção Monochrome não esteja selecionada.

Web Design in Pixelmator

Passo 3

Adicione uma nova layer, e a preencha com branco usando novamente a Paint Bucket Tool (N). Vá então até Filter>Generator>Stripes. Use 6 para Width e 100 para Sharpness. Depois disso, troque a Opacity para 5%.

Web Design in Pixelmator

Passo 4

Adicione uma nova layer, e com a Gradient Tool (G), preencha a layer com um gradiente de Cinza (#666) para preto (#000). Você precisará redimensionar as layers pois quando preenche a layer com o gradiente, você vai preencher toda a área. Vá até Edit>Free Transform.

Web Design in Pixelmator

Passo 5

Adicione outra layer e a preencha com preto usando a Paint Bucket Tool (N). Essa layer estará abaixo da layer com o gradiente. Depois disso, troque a opacity dessa layer para 70%.

Web Design in Pixelmator

Passo 6

Crie uma nova layer com a Rectangular Marquee Tool (M), e a preencha com branco. Vá até Edit>Free Transform (Command +F). Redimensione o retângulo até que atinja a altura de 1 pixel. Depois disso, troque a Opacity para 20%.

Web Design in Pixelmator

Passo 7

Posicione o logo no cabeçalho. Use a Type Tool (T) para criar o texto.

Web Design in Pixelmator

Passo 8

Vamos importar um template de iPhone. Você pode fazer o download do arquivo PSD em http://www.teehanlax.com/blog/?p=447. Posicione no documento usando a imagem abaixo como referência.

Web Design in Pixelmator

Passo 9

Escolha uma imagem e a posicione na frente do iPhone. Então, com a Rectangular Marquee Tool (M), selecione a parte visível da tela do iPhone e 'mask' a imagem que acabou de importar.

Web Design in Pixelmator

Passo 10

Importe alguns ícones e crie blocos de texto usando a Type Tool (T) para os títulos. Use Lucida Grande Regular, 14pt branca. Para o texto de descrição, use Lucida Grande Regular, 11pt cinza (#999).

Web Design in Pixelmator

Passo 11

Agora adicione um slogan, mais uma vez usando Lucida Grande Regular, 24pt branca. Adicione então um pequeno texto abaixo disso, usando Lucida, mas dessa vez 14pt e cinza (#999). É importante criar um bloco grande de conteúdo com o slogan e a descrição alinhadas a esquerda.

Web Design in Pixelmator

Passo 12

Adicione o App Store Badge com algum texto próximo a ele.

Web Design in Pixelmator

Passo 13

Adicione uma nova layer abaixo do iPhone e vá até Filter>Generator>Clouds. Use preto e branco nas cores.

Web Design in Pixelmator

Passo 14

Com a Eraser Tool (E), delete boa parte da layer, deixando apenas algumas partes por baixo do iphone, como se tivesse fumaça saindo de trás dele.

Web Design in Pixelmator

Passo 15

Adicione uma nova layer acima da smoke layer, e preencha com amarelo escuro (#f88b00). Troque então o Blending para Color Dodge. Com a Eraser Tool (E), delete boa parte da layer, deixando apenas as partes da fumaça. Isso vai criar um efeito legal de chama.

Web Design in Pixelmator

Conclusão

Agora, com a Slice Tool no Pixelmator, nós podemos começar a criar layouts. Neste tutorial eu mostrei dicas básicas de como criar um background listrado bacana, efeitos sutis 3D e é claro, um efeito legal de luz/fogo.

Web Design in Pixelmator

Download do Arquivo Pixelmator

Clique aqui para fazer o download do arquivo Pixelmator usado nesse tutorial

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.