[PHOTOSHOP] [MUSE] Criar botões utilizando o Adobe Photoshop e o Adobe Muse

Neste tutorial, você aprenderá como criar um botão no Photoshop e utilizá-lo, com todos os vários estados, em um projeto do Adobe Muse. Uma vez que já tenhamos criado e importado nossos "ativos" ao Adobe Muse, veremos o que acontecerá caso queiramos atualizar a PSD.

Em vídeo

Em texto

O vídeo acima demonstra como você pode criar um botão no Photoshop e colocá-lo no Adobe Muse.

Um botão no Muse possui 4 estados. Então, se você colocar um retângulo nele, você sabe que, por padrão, você possui 4 estados:

> Normal
> Rollover (quando o mouse está sob o elemento)
> Mouse Down (quando clica)
> Ativo

Para criar um botão, desenhe um retângulo e então complete com uma cor ou gradiente ou, simplesmente, adicione uma imagem ao fundo. Isso é ótimo, mas ás vezes, queremos criar todo o design no Photoshop e importar os estados de lá.

Usando o Photoshop
Abra o Photoshop e crie uma forma em vetor, um botão comum verde. Personalize-o como quiser, com cantos arredondados, bordas e etc. Eu quero criar 4 estados, então irei começar nomeando esta primeira camada como "Buttom Normal"/"Botão Normal". E então, irei duplicar a camada e, esta próxima cada, será a Mouse Over. Neste caso, nós apenas mudaremos a cor, deixando-a mais clara. Agora, é só repetir o processo para todos os 4 estados e salvar o arquivo como "ButtonGreen.psd".

Adobe Muse
Agora, no Muse, se você quiser utilizar este design sem exportar as camadas em .png, você poderá diretamente fazer: File > Place Photoshpo Button, selecionar "ButtonGreen.psd", e então, ele analisará todas as camadas que estão disponíveis no arquivo.

Atribua cada camada a um estado do botão, então, encaixe no estado e redimensione, se necessário. Então, utilizando a ferramenta Text Tool, podemos adicionar um texto no botão (por exemplo: Subscribe).

PREVIEW
Se você abrir e visualizar no navegador, você verá então que temos 4 estados. Quando passamos o mouse ou clicamos, irá mudar o estado do botão.

De volta ao Photoshop
Agora, o que acontece caso eu modifique meu design no Photoshop?

Por exemplo, no Photoshop, vamos modificar a cor do botão no estado Normal. Faremos ele um botão azul e salvaremos a .psd normalmente, sem criar um novo arquivo. Agora, voltamos ao Muse e, não há nenhuma mudança visível. Mas, se abrirmos o Assets Panel, você verá um aviso, que diz que o arquivo sofreu uma alteração desde quando foi importada, então, basta clicar com o botão direito e marcar que desejamos atualizar o documento.

Conclusão
Isso mostra que trabalhar com arquivos entre Photoshop e Muse é mais simples do que se imagina.

---

Link para o tutorial original em inglês: http://webdesign.tutsplus.com/tutorials/how-to-create-buttons-in-photoshop-and-adobe-muse--cms-22142
Créditos ao autor: Michael Chaize
Tradução e adaptação: Kromus Design