Fazendo buttons no Fireworks:

É importante que saiba:
BUTTON. Tradução: Botão. Button nada mais é do que link com imagem.

Nível: Médio

Abra o Fireworks >> File >> Open >> Abra a imagem desejada. Escolhi essa:

Clique para ampliar

Agora, copie a imagem (Ctrl+C), faça um novo arquivo (Ctrl+N):



É importante que você faça um button de proporções de 88 px por 31 px, pois é o tamanho padrão dos buttons.

Ali na imagem, os atributos já estão prontos. Mas, provavelmente sua tela estará bem diferente...

Para você entender:

WIDTH é a largura da imagem.
HEIGTH é a altura da imagem.

Resumindo, lá em Width escreva 88, lá em Height escreva 31.

Agora, cole a foto escolhida no arquivo (Crtl+V).

Você vai achar estranho, pois sua foto ficou grande demais para aparecer no button. Mãããããs, você vai ajeitar ali:



WIDTH e HEIGTH você já sabe o que é (ali estão W e H). Mas, X é Y são incógnitas, ou seja, você não sabe quem são. Eu também não sabia. Porém, você as deve conhecer como LEFT e TOP.

Hum, agora ficou mais fácil, não?! Ué?! Você não sabe o que é LEFT e TOP?
LEFT são as direções DIREITA e ESQUERDA. TOP são as direções CIMA e BAIXO.

X e Y são a mesma coisa!!!!. X é LEFT e Y é TOP.

Eles servem para alinhar a imagem no FRAME (quadro). Width e Height, neste caso, servem para aumentar ou diminuir a imagem. Se quiser, use números para aumentar e/ou diminuir a imagem.

Regrinhas: Quanto maior o número no Heigth, maior será a altura da imagem. Quanto maior o número no Width, mais larga será a imagem.
Quando o número é menor, é o contrário.

Diminui a foto usada para o button. Agora, o tamanho dela é 211 por 318 pixels (px). Seu LEFT é -311 e seu TOP é -79. Se você estiver com preguiça de alinhar seu left ou top, basta ir com o mouse e clicar SEM SOLTAR a imagem e ir arrastando para onde quiser.

É importante que recorte o restante da imagem, para isso, existe na barra de ferramentas >> select >> Crop Tool (C) , selecionando todo o quadro. Após isso, aperte ENTER



Agora que a imagem está do mesmo tamanho do quadro, é só enfeitar do jeito que quiser e salvar!

Meu resultado é esse:



IMPORTANTE: Para salvar sua imagem, vá em File >> Export Prevew >> Format: GIF >> Palette: WebSap Adaptive >> Loss: 0 >> Dither selecionado >> "Export..."

SALVE SEMPRE EM GIF! JPEG NÃO É IDEAL PARA BUTTONS, POIS FICA COM DEFEITOS E PNG DEMORA PAKAS PRA CARREGAR...

___________________________

Evanescence, o blog © Todos os direitos reservados