Básicos do Slicing no Pixelmator

Nesse tutorial vou mostrar a vocês como usar a Slice Tool no Pixelmator para, é claro, recortar um design que será codificado em um site funcional. Também vou mostrar o processo HTML/CSS. No final, você poderá fazer o download dos arquivos.

Passo 1

Abra o arquivo Pixelmator que criamos para nosso UI tips tutorial.

Passo 2

A ferramenta que vamos usar nesse tutorial e que nos permitirá transformar nosso design em uma web page é a Slice Tool (K). Vamos usar essa ferramenta para selecionar as áreas que serão salvas como imagens. Não vamos precisar de todo o design, apenas algumas partes dele, que serão a parte do UI (background, logo, buttons, screenshots).

Passo 3

Com a Slice Tool (K) selecionada, crie uma 'fatia' retângular ao redor do logo como o primeiro pedaço. Perceba que eu não inclui o texto próximo ao logo pois esse será o texto HTML.

Passo 4

Agora selecione a Tab da navegação. Tente ser bastante preciso quando cortar seu site pois um único pixel pode destorcer o alinhamento mais tarde na parte do HTML.

Passo 5

O legal da Slice Tool é que temos algumas opções; por exemplo, se estamos cortando uma foto, podemos usar JPEG, enquanto para elementos UI podemos usar transparent PNG. Você também pode trocar o nome do pedaço, que no meu caso é “active-tab.”

Estou usando transparent PNGs para os elementos UI e logo, e JPEG para os screenshots.

Passo 6

Continue selecionando as partes do design que você precisa recortar. No screenshot abaixo eu criei mais 2 fatias, incluindo uma para a linha que divide o conteúdo, que será usada duas vezes, no topo e na parte de baixo da sessão. Também selecionei o screenshot principal.

Passo 7

Aqui vamos selecionar apenas um screenshot, e depois o repetimos no HTML, ou você pode salvar imagens diferentes mais tarde.

Passo 8

Uma parte muito importante é o background. Essa fatia precisará ser exportada primeiro pois vamos precisar que o background esteja ativo para os elementos UI; ou então ficará transparente.

Passo 9

Essa é a sombra que teremos na sessão futura, mas eu a movi para baixo para fatia-la separadamente daquela parte; assim que exporta-la, abra o arquivo e vá até Edit > Transform > Flip Vertical para criar a sombra de baixo.

Passo 10

Depois que criar todas as fatias e nomea-las propriamente, vá até o layer palette e esconda aquelas que não são necessárias: todo o texto e o background. Como mencionei antes, a fatia do background precisará ser exportada novamente mais tarde com o background ativo.

Depois de fazer todos os ajustes, clique em Export for Web na Slice Tool Option. Uma dialog box vai abrir perguntando onde quer salvar as fatias. Crie uma nova pasta no seu computador chamada “Site”; dentro dessa pasta crie outra pasta chamada “imgs.” Selecione a pasta imgs e exporte todas as imagens para dentro dela.

Passo 11

Se você fez tudo certo, você terá imagens como essas na imagem abaixo.

Passo 12

Isso não é exatamente parte do Pixelmator, mas vou ilustrar as partes do HTML e CSS para que possa entender o que eu fiz. Abaixo, você pode ver o arquivo HTML. Vamos usar a tag “<div>” para criar a estrutura do nosso HTML. Nós poderíamos usar os novas tags HTML 5 para isso, mas precisaríamos fazer alguns ajustes no CSS, e teríamos problemas em diferentes browsers. Mas mesmo assim recomendo que você aprenda mais sobre HTML 5; ele é o futuro.

Passo 13

Se você der uma olhada no código HTML da linha 8, tem um <link> tag onde eu linkei o HTML file ao CSS file, the “styles.css” file. Nesse CSS file, vou definir o visual da página usando imagens do Pixelmator.

CSS é como escrever uma receita: você indica como os elementos vão se parecer. Você define as propriedades da fonte (tamanho, cor, estilo, peso), do background, das margens, padding, etc. O elemento BODY é a página em si. Ali você coloca o background usando a imagem do Pixelmator (bg.jpg). Tem também os HEADER styles.

Passo 14

Aqui você pode ver como codifiquei o menu. A fatia da tab é definida na linha 71 para “#menu ul li.active a.”

Passo 15

Aqui temos a área FEATURE; novamente, os backgrounds são definidos nas linhas 79 e 85. O tamanho da fonte para o título e o parágrafo estão presentes.

Passo 16

Aqui estão os códigos para a parte dos screenshots. Usei algumas propriedades CSS 3 para criar efeitos legais, como o webkit-transition e o transform.

Passo 17

Aqui está o código do footer; é bastante simples.

Conclusão

A Slice Tool (K) do Pixelmator pode ser usada para o design de user interfaces. O segredo de uma boa UI é a simplicidade e a consistência, então é muito importante otimizar seu design para que ele tenha o mínimo possível de fatias, assim como código. Agora é com você. Recomendo que vocês confiram também alguns tutoriais sobre CSS e HTML; não é difícil, e na minha opinião, é bastante divertido.

Site demo

Download do Arquivo Pixelmator e Demo Files

Site demo files | Pixelmator file