Aprenda a fazer recorte profissional de imagens no Photoshop com o uso da Ferramenta Caneta (Pen Tool) nessa vídeo aula com vários macetes e dicas importantes para melhorar a produtividade do seu trabalho. Veja também a versão escrita deste tutorial, feito no começo da história deste blog.

Embora o termo Web 2.0 tenha saído de nossas rotinas, ele marcou muito por um estilo gracioso de design. Um gradiente que dá impressão de brilho, elegância e leveza a uma página. É este efeito que você aprenderá a fazer neste tutorial.

1. Crie um novo arquivo

Vá até o menu Arquivo > Novo ou utilize o atalho Cmd+N (Ctrl+N).

Crie um novo arquivo

Neste exemplo, criaremos um botão, sendo assim, crie um arquivo nas resoluções 300×150 (ou de sua preferência).

2. Desenhe o seu botão

Existem diversas maneiras de definir uma forma, através de marcação de seleção, caneta ou formas geométricas. Fique a vontade para escolher. Minha opção foi a Ferramenta Retângulo Arredondado.

Ferramenta Retângulo Arredondado

A seguir desenhe seu botão.

Desenhando o Botão

3. Crie o Gradiente

Após ter o desenho do seu botão pronto, acesse as Opções de Mesclagem da camada. Você tem três maneiras 4 maneiras de abrir esta opção, sendo elas:

1. Duplo clique na camada;
2. Botão Direito > Opções de Mesclagem;
3. Ícone “Fx” > Opções de Mesclagem; ou
4. Menu Camada > Estilo de Camada > Opções de Mesclagem

Se seu Photoshop estiver em inglês, esta opção estará nomeada como “blending options“. Um novo menu abrirá, selecione a opção Sobreposição de Degradê. Por padrão, o degradê inicia da cor preta para branca, clique sobre o desenho do degradê para editá-lo.

Editando o Gradiente (clique para ampliar)

Uma nova janela abrirá e nela você poderá criar seu estilo 2.0.

Editor de Gradiente

Para criar o efeito você utilizará apenas a área “Tipo de gradiente”.

Mantenha a opção em Sólido (depois do tutorial teste as outras para compreender o funcionamento desta opção). Observe que existem 2 marcadores para cada cor, o superior indica o nível de opacidade (transparência) e o inferior indica a cor. Para criar o efeito você terá 4 marcações de cor.

Crie novos pontos de cores dando um clique simples na parte inferior do painel.

Adicionando Cores ao Gradiente

O próximo passo é o fundamental, definição de cores. A lógica é simples, você escolherá a cor que deseja e inserir 4 variações para ela, seguindo o tipo “escuro, bastante escuro, bastante claro, claro”. Compreenda nos exemplos abaixo:

Exemplo 1 (Clique para ampliar)

Exemplo 2 (Clique para ampliar)

Após inserir as coisas, restará apenas um único detalhe para finar a criação do estilo 2.0.

Aproxime os dois pontos de cores centrais, de forma que o degradê adquira uma forma mais sólida e menos esfumaçada.

Finalizando o Estilo 2.0

Agora é só curtir o resultado:

Resultado

O intuito deste tutorial é de que você aprenda a regra e possa explorar a mesma de outras formas, além de adicionar novas estilizações ao mesmo elemento. Com o passar do tempo conseguirá efeitos e resultados mais profissionais, basta praticar.

Exemplos

Bons estudos.

Favicon: de origem Favorito+Ícone, é o ícone em formato 16×16 pixels utilizado para representar seu site tanto quando o mesmo for adicionado aos favoritos de um browser, quanto para aparecer ao lado da sua url.

Embora considerado inútil por muitos, é ideal que você tenha o costume como padrão de qualidade de usar favicon em todos os seus projetos web.

Criando o Favicon

Basta criar uma imagem no formato 16×16 no formato .ico. Boa parte dos designers utilizam o programa Photoshop, entretanto o mesmo não tem como opção original salvar o arquivo na extensão .ico, para isso basta instalar um plugin de acordo com o sistema operacional que você utiliza.

O plugin realmente funciona, mas tem um defeito ruim para quem está preocupado com a performance. O arquivo é salvo nas dimensões 64×64, tornando o tamanho do arquivo maior, dessa forma, prejudicando alguns milésimos de segundos no carregamento de sua página.

Existem diversas maneiras de gerar favicons em tamanho comprimido e de forma ideal, a minha predileta é o www.favicon.cc, que permite a criação e conversão também de outro formato de imagem.

favicon.cc

Caso queira mais opções, segue uma pequena lista:

• http://www.256pixels.com/
• http://favicon2dots.com/
• http://converticon.com/
• http://www.favicontool.com/
• http://www.webscriptlab.com/favicongenerator.php
• http://www.flavicon.com/
• http://www.favicon.co.uk/
• http://www.favicongenerator.com/
• http://www.dagondesign.com/tools/favicon-generator-tool/
• http://www.favicon.ru/en
• http://www.faviconsfor.us/
• http://www.degraeve.com/favicon/
• http://www.antifavicon.com/
• http://www.html-kit.com/favicon/
• http://www.favicon.jp/
• http://tools.dynamicdrive.com/favicon/
• http://www.faviconprime.com/
• http://shaheeilyas.com/favicon/
• http://www.faviconfactory.com/

Usando o Favicon

Por muito tempo na web era necessário a utilização de uma meta tag para que o navegador identificasse o favicon. Felizmente isso mudou, agora basta você inserir o seu favicon.ico no diretório raiz do seu site. Bom proveito.

Nesta vídeo aula você aprenderá um exercício simples e eficiente para melhorar sua afinidade com o programa gráfico que você utiliza para criar layouts e também para melhorar sua produtividade (como é da minha preferência, utilizei o Photoshop no tutorial). O objetivo é simples, escolher o layout de um site que você gosta e reproduzi-lo no programa separando todas as camadas que o formam. Em alguns momentos poderá sentir dificuldade por não saber qual ferramenta usar pra fazer determinadas formas ou objetivos e é justamente esse o ponto, uma vez que conseguir superar este obstáculo, estará pronto quando houver a necessidade de criar seu próprio layout do zero.

• Resultado final do exercício: Download
• Tema utilizado no exercício: Acessar

Bom exercício e sucesso a todos. Não esqueçam de assinar o canal do youtube e me seguir no twitter.

Heiko Klug é um artista alemão, com 25 anos de idade. Iniciou seu trabalho em meados de 2004, onde aprendeu a utilizar softwares de edição de imagem digital usufruindo de seus conhecimentos na arte com grafite. Atualmente, apesar de sua habilidade artística, ele ainda está tentando encontrar um lugar onde ele pode começar uma carreira como designer de mídia criativa. Veja alguns belos trabalhos de Heiko Klug:

Para ver mais trabalhos do artista, acesso seu portfolio online: jesar-one.com

Hoje conheci o trabalho do designer Sebastien Gabriel, dono de um portfolio excelente. Além de fazer trabalhos como free lancer, o designer também faz criações para a comunidade de designer, disponibilizando design de interfaces para fazer download. Selecionei um muito útil, que é a interface de um Slider de Aplicativos feito em Photoshop. Aproveite!

Download

App Slider

Sabe aquele trabalho que você precisa o tempo todo editar imagens que acabou de encontrar na internet? Sabe aquela chatice de botão direito, copia, abre photoshop, cria novo arquivo, cola? O Add-On Open With Photoshop (Abrir com o Photoshop) para o Firefox resolve isso para você.

Após instalar o add-on basta apenas clicar com o botão direito e clicar na opção Open With Photoshop. Parece algo bobo, mas quem trabalha em projetos grandes, ou até mesmo na edição de conteúdo para web, sabe o quanto isso aumenta a produtividade.

Abrir com Photoshop

Excelente material para quem precisa de elementos dos browsers para utilizar na composição de novos layouts e costuma perder tempo dando print screen sempre que necessário. O arquivo está no formato .psd (photoshop) e foi criado pela Teehan+Lax, que costuma produzir diversos materiais úteis para elementos de interface.

Download

Elementos de Browsers para Criação de Layouts

Conhecimentos avançados em Photoshop e uma cabeça recheada de criatividade são a mistura ideal para trabalhar com manipulação de imagens. Conseguir unir diversos elementos completamente diferentes, fazendo disso uma nova composição visual, nos deixa livres para não ter limites na imaginação. Confira uma seleção com incríveis trabalhos de manipulação de imagens.

Estava navegando mais uma vez pela comunidade de designers DeviantArt e resolvi fazer um post com belos layouts que encontrei. O design de sites está ficando cada vez mais rico e dá gosto acompanhar tudo isso. Escolhi 9 dentre muitos layouts para inspiração. Confira:

De fato são belos layouts, mas de nada adianta só admirar, que tal abrir o Photoshop ou seu programa gráfico preferido e começar a praticar seu trabalho e também fazer seu próprio layout?