Kromus Design
Olá!
Seja bem vindo ao Kromus. Nosso fórum é focado em design gráfico e web, porém, compartilhamos de todo tipo de arte, sem limites entre a arte tradicional e a digital. Esperamos que goste do fórum e faça parte de nossa família! :)
Kromus Design

Um lar para os designers!


Você não está conectado. Conecte-se ou registre-se

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

Por favor, faça o login para responder

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

#1Steeph 

em Dom Dez 14, 2014 4:38 pm

avatar

Administradora
Administradora
[PHOTOSHOP] [MUSE] Criando 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

http://be.net/ideasfromsteeph http://cargocollective.com/ideasfromsteeph

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Por favor, faça o login para responder

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum