no , , , ,

Tutorial: Como criar uma barra com efeito glossy

Preview Descrição: Neste tutorial veremos de forma bem simples como criar uma barra com efeito glossy que pode ser usada como fundo para menus ou simplesmente para enfeitar um site como decoração fazendo uso de apenas duas layer styles.

  • [message]
    • ##check##AVISO: Como criar uma barra com efeito glossy

      • Caso você esteja usando o Photoshop em Português coloque o mouse sobre o nome do recurso que está sendo utilizado e veja a tradução em Português. Os recursos que possuem tradução estão marcados em vermelho no texto.
        Se você tiver dúvidas sobre o uso de alguma ferramenta visite o PS Help! para saber como utilizar a ferramenta desejada.
        Alguns tutoriais não possuem a opção de download das imagens, caso queira utilizar uma imagem em alta resolução para acompanhar o tutorial visite o PS Downloads e escolha um dos sites indicados para download de imagens em alta resolução.
        Em caso de dúvidas e sugestões utilize a área de comentários logo abaixo. Obrigado 🙂

tutoriais photoshop

"use strict"; var adace_load_5f0c56b28a5e9 = function(){ var viewport = $(window).width(); var tabletStart = 601; var landscapeStart = 801; var tabletEnd = 961; var content = '%3Cdiv%20class%3D%22adace_adsense_5f0c56b28a5ac%22%3E%3Cscript%20async%20src%3D%22%2F%2Fpagead2.googlesyndication.com%2Fpagead%2Fjs%2Fadsbygoogle.js%22%3E%3C%2Fscript%3E%0A%09%09%3Cins%20class%3D%22adsbygoogle%22%0A%09%09style%3D%22display%3Ablock%3B%22%0A%09%09data-ad-client%3D%22ca-pub-3297652328497884%22%0A%09%09data-ad-slot%3D%221456553999%22%0A%09%09data-ad-format%3D%22auto%22%0A%09%09%3E%3C%2Fins%3E%0A%09%09%3Cscript%3E%28adsbygoogle%20%3D%20window.adsbygoogle%20%7C%7C%20%5B%5D%29.push%28%7B%7D%29%3B%3C%2Fscript%3E%3C%2Fdiv%3E'; var unpack = true; if(viewport=tabletStart && viewport=landscapeStart && viewport=tabletStart && viewport=tabletEnd){ if ($wrapper.hasClass('.adace-hide-on-desktop')){ $wrapper.remove(); } } if(unpack) { $self.replaceWith(decodeURIComponent(content)); } } if($wrapper.css('visibility') === 'visible' ) { adace_load_5f0c56b28a5e9(); } else { //fire when visible. var refreshIntervalId = setInterval(function(){ if($wrapper.css('visibility') === 'visible' ) { adace_load_5f0c56b28a5e9(); clearInterval(refreshIntervalId); } }, 999); }

})(jQuery);

01. Pressione Ctrl+N para criar um novo documento e defina o tamanho de 500×30 pixels, 72 dpi’s e modo de cor em RGB, pressione Ok, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique no documento para preencher com a layer com a cor preta, clique duas vezes sobre a layer na paleta de layers e pressione Ok para retirar o cadeado da layer, vá em Layer> Layer Style> Inner Shadow e defina os valores abaixo.

Como criar uma barra com efeito glossy

02. Agora vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

Como criar uma barra com efeito glossy

03. Ao fina sua barra com efeito glossy estará como a da foto abaixo, caso queira mudar as cores você pode ir em Layer> New Adjustment Layer> Hue/Saturation e mudar a vontade.

Como criar uma barra com efeito glossy

site de origem: http://www.ps-tutorials.org/2008/09/simple-gloss-navigation-bar/

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

$ s Comentários

Deixe uma resposta
  1. Comigo não fica assim :S
    Não fica como uma linha, fica mais tipo gradiente

    e já agora, tens um erro,
    Layer> Layer Style> Inner Glow ( é Inner Shadow não é ? )

  2. Gostei, é útil para, por exemplo, fazer botões para sites, que foi a finalidade que eu direcionei esta barra, mudando a cor, claro.

  3. Bom, muito legal. Fica um estilo de barra Windows Vista…

    casatuga, tá certo manin, é Inner Shadow que tá lá hehe (Sombra interna; Inner Glow -> Brilho interno)

  4. bom, sou marinheiro de primeira viagem no photoshop e tentei fazer esta barra, notei que ficou como o casatuga tinha dito, mas fui fuçando e percebi que fica assim se o efeito inner shadow estiver com a cor preta, se estiver exatamente como a imagem do tutorial fica certinho.

    abraços.

  5. Aew manow deu certinho eu jah sabia fazer isso mais é muito Bom, Vlw mesmo

  6. muito legal mesmo esse tutorial.
    eu ja tinha visto algo parecido, mas era com botons acho que não muda muita coisa
    parabéns Andre

  7. Muito legal! Tava procurando isso para colocar em um fórum meu! Por isso que amo esse site!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

onze − 7 =

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.