Web Design no Pixelmator

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).

Passo 2

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

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%.

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.

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%.

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%.

Passo 7

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

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.

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.

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).

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.

Passo 12

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

Passo 13

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

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.

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.

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.

Download do Arquivo Pixelmator

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