Botão Pressionado

    [Admin] Win32
    [Admin] Win32
    [Admin]
    [Admin]

    Masculino Mensagens : 175

    Botão Pressionado	 Empty Botão Pressionado

    Mensagem  [Admin] Win32 em Sex Jan 21, 2011 11:40 am

    A maior parte dos sites utiliza um script em java para substituir um botão por outro pressionado.
    Este tutorial ensina-te apenas a criar os dois botões.

    Nota: Este tutorial é de nível intermédio. Partimos do princípio que estás a vontade com os layers e as selecções.

    1.
    Botão Pressionado	 Ae_00003_02

    Começa com uma textura ou com a tua cor preferida.


    2.
    Botão Pressionado	 Ae_00003_03
    Cria uma selecção circular e grava-a.
    Escolhe uma cor clara para o foreground e uma escura para background. Preenche o circulo com a ferramenta Gradient do canto superior esquerdo para o canto inferior direito.


    3.
    Botão Pressionado	 Ae_00003_04
    Encolhe a tua selecção em 5 pixeis Select > Modify > Contract.
    dá um Feather a selecção de 2 pixeis Select > Feather.
    Inverte a selecção Select > Inverse.

    Preenche com o mesmo gradiente mas agora a partir do canto inferior direito para o canto superior esquerdo.


    4.
    Botão Pressionado	 Ae_00003_05

    Digita o texto que queres usar dentro do Botão.

    5.
    Botão Pressionado	 Ae_00003_06
    Cria um novo layer. Carrega a tua seleção (Ctrl+Alt+4) e cria o contorno em volta do circulo.
    Edit > Stroke > 2 pixeis from center

    Criamos a 1ª imagem do botão.
    Exporta como Gif, File > Export > GIF89a export


    6.
    Botão Pressionado	 Ae_00003_07

    Para criarmos a 2ª Imagem cria um novo layer e coloca-o para baixo do layer texto e por cima do contorno.
    Carrega a tua seleção novamente (Ctrl+Alt+4) e preenche com 30% de preto.


    7.
    Botão Pressionado	 Ae_00003_08

    Select > Feather > 3 pixeis e inverte a selecção Select > Inverse.
    com as "Arrow Keys" move a selecção para baixo e para a direita 4 pixeis. Agora preenche a seleção com 80% de preto.

    8.
    Botão Pressionado	 Ae_00003_09

    Carrega a tua seleção original novamente e inverte.
    Carrega na tecla Delete para apagar as áreas pretas em volta do botão.

    9.
    Botão Pressionado	 Ae_00003_10

    Para dares um efeito mais realista move o texto 2 pixeis para baixo e para a esquerda.
    Agora exporta a imagem como gif (com outro nome) e tens o teu botão em 2 estados concluido.
    Botão Pressionado	 Ae_00003_11

    Exemplo animado

      Data/hora atual: Seg Set 16, 2019 4:58 pm