Um botão de rolagem é um botão no site que muda seu estado quando o mouse passa sobre ele. A mudança de estado pode ser qualquer número de mudanças, incluindo a cor, fonte, tamanho , ou uma combinação destes. Botões rollover adicionar polonês e profissionalismo para o seu site e podem ser criados facilmente em Adobe Photoshop e ImageReady . Estes passos detalhadamente como criar um simples botão de rolagem , mas o processo pode ser alterado para gráficos mais estilizados. Coisas que você precisa
Adobe Photoshop
ImageReady
Mostrar Mais instruções
criar o botão Imagens em Photoshop
1
Vá em File > New e defina o tamanho da imagem para 80 por 25 pixels com uma resolução de 72 pixels por polegada.
2
Clique na amostra de cor de primeiro plano na parte inferior da paleta de ferramentas no lado direito da sua tela. Selecione uma cor para o texto em seu botão. Em seguida, clique na amostra de fundo e selecione uma cor .
3
Pressione " " Control + Backspace para preencher a área de imagem com a sua cor de fundo escolhido.
4
Selecione a ferramenta "Type" da paleta de ferramentas e defina a fonte eo tamanho no menu de ferramentas na parte superior da tela. Clique na área de documento e digite o nome do botão , como " Portfolio " ou "Home ".
5
Use a ferramenta "Mover" para alinhar o texto ao seu gosto.
< Br > 6
Copie o fundo eo tipo de camada . Crie uma cópia de uma camada clicando com o botão direito em uma camada na paleta de camada e selecione " Duplicar ".
7
Mesclar os originais camadas de fundo e do texto , mantendo a tecla "Shift" enquanto clica em ambos camadas na paleta Camadas. Em seguida, vá em Edit > Merge Layers. Renomeie a camada " estado normal. "
8
Dê um duplo clique na imagem "T" à esquerda da camada de tipo copiados para realçar o texto. Clique na amostra de cor no menu de ferramentas na parte superior da tela, e selecione uma cor diferente para o texto quando o mouse passa sobre o botão.
9
Mude a cor na camada de fundo , se desejado .
10
mesclar as duas camadas copiados e renomear a camada de " estado de rolagem ". Seu arquivo agora deve conter duas camadas : a camada de " Estado Normal" na parte inferior e da camada de " estado de rolagem " na parte superior. Você pode visualizar como a mudança botão ficará girando a visibilidade da camada superior e desligar. Clique no gráfico de olho à esquerda da camada para mostrar ou esconder.
Crie o Botão Rollover no ImageReady
11
Clique no botão " Ir para ImageReady " . na parte inferior da paleta de ferramentas com o seu arquivo de botão ainda em aberto
12
Vá para a paleta de aparência ( no CS ou mais recente) ou a paleta de rollover ( em versões mais antigas ) e, se ele não é já aberto , vá ao menu Janela e selecione a paleta a partir do menu drop-down
13
Esconder a camada de " estado de rolagem "; . isso vai definir o estado normal do botão para o "Normal" camada.
14
Clique no ícone " Criar Novo Estado " na parte inferior do "Aparência" ou paleta " Rollover " . Ligue a visibilidade sobre a camada " Rollover Estado " para defini-lo como o estado de rolagem
15
Vá para a paleta fatia ; . Se ele já não estiver aberto, ele pode ser encontrado na Janela menu. Atribuir um URL para o seu botão de rolagem , esta é a página web que o usuário será levado para quando ele clicar no seu botão
16
Teste o seu botão de rolagem clicando no botão " Visualizar no navegador padrão " botão. na parte inferior da paleta de ferramentas .
17
Vá em File > Save Optimized para salvar o arquivo HTML e pasta de imagens.