O melhor do html

Antes de começarmos a fazer o icon você precisa ter os materiais necessários, recomendo que baixe esse pack (ou algum outro que contenha os mesmos materiais) que é de onde tirei todos os resources que foram usados nos icons, exceto o psd que foi esse com alguns ajustes que eu fiz. 

Abra a foto que você quer no ps (eu vou usar essa da Barbara Palvin), e recorte em 100px (ou 64px se preferir). Assim: 

Altere essas configurações com o a dimensão que preferir, eu deixei 100px:

Escolha a área que vai recortar e clique duas vezes na imagem, eu escolhi assim:

Abra um novo documento (File > New) com 100 px (ou 64 se for o que você preferiu) e abra o pack em psd que você baixou também, escolha um background e arraste para a foto em branco que você abriu e depois a que recortou. Assim:

Se quiser da para reposicionar o background!!! Quando arrastei o que eu escolhi ele ficou assim: 

Mas eu reposicionei ele e ficou assim:

Depois coloque a foto que recortamos no fundo de natal que escolhemos da mesma maneira, arrastando. 

Agora apague o fundo da foto da pessoa que você escolheu e colocou por cima do fundo, deixando assim: 

Escolha os enfeites que vai querer, vou apenas colocar a toca do papai noel. É só arrastar a toca até a foto, apertar “Ctrl+T” e redimensionar até ficar bom. Caso necessário você pode apagar alguns errinhos da junção da pessoa com a toca, é só selecionar a layer que você precisa arrumar. O meu ficou assim:

Transforme tudo em objeto inteligente selecionando todas as layers, assim:

Clica com o botão esquerdo e seleciona “Convert To Smart Object”:

Agora é só aplicar uma action/psd de sua preferência e salvar em png!!!

Meu resultado: 

A foto que eu irei usar é essa da atriz Vanessa Hudgens.

Abra a foto no seu ps (File > Open) e escolha a ferramenta de recorte que é essa:

Altere essa configuração que aparece lá em cima (eu uso 240x240 para icons de twitter, e caso queira fazer para tumblr normalmente se usa 100x100 ou 64x64), não esqueça de colocar o “px” junto quando colocar os números!!!

Escolha como quer recortar, como a foto é pequena eu deixei assim mesmo:

Clique duas vezes na foto pro recorte ser concluído, aplique uma action e um psd se quiser e salve em png (File > Save As)! 

Eu vou usar essa foto, uma screen do filme fifth shades of grey. É um tutorial bem simples e prático. Vamos lá:

Abra a foto no seu ps (File> Open) e clique na ferramenta de recorte:

Altere o campo branco que vai aparecer na parte superior da tela para “1500X500px” e recorte sua foto do jeito que quiser, assim:

Não esqueça de clicar duas vezes!

Aplique uma action que goste, e se quiser um psd. Eu apenas deixei minha foto em preto em branco, indo em Window > Adjustments e clicando em “Black & White” ou se preferir use o “Grandient Map”:

Você precisa de alguma foto que o vermelho seja "predominante", como por exemplo uma foto em que a pessoa em foco esteja com um vestido vermelho, um batom, uma bolsa entre tanta outras coisas..

Eu vou usar a foto abaixo, e vamos lá:

Se você estiver fazendo um psd, tente não mudar muito a cor do vermelho caso esteja mexendo no selective color já que é nela que vamos fazer a mágica. 

Depois de ter aberto a foto (File > Open) vá em "Adjustments" e procure por "Selective Color":

Esse quadrinho vai aparecer:

Eu alterei desse jeito: 

E tive esse resultado:

E se vocês fizeram de outro jeito, deixando assim:

O resultado será esse:

Que é um pouco mais simples.

Você pode também deixar o vermelho um pouco mais escuro (quase um vinho), as configurações seriam essas:

E o resultado será esse (a pele fica um pouco escura, mas qualquer coisa você pode ajustar usando os levels e curves):

Mas se for mudar o "Absolute" para o "Relative" o resultado será um pouco parecido (mas mais fraco) com os primeiros de cima! 

Para fazer as minhas skins, eu uso essa base. (créditos á warvada, e não retire!!) Aqui também tem outras bases, que são delas também mas de estilos diferentes.

Como vocês podem ver, na base tem espaços com "suaurl", "IMAGEM DA SKIN", "BOTÃO DE PAUSE" e "IMAGEM DOS CRÉDITOS". 

Iremos alterar esses espaços e também umas outras coisinhas. Mas isso vou deixar pro final, vamos começar pela "suaurl" e depois pela "IMAGEM DA SKIN".

Copie e cole a base em seu bloco de notas e substitua "suaurl" pelo seu tumblr (ex. psclarity). 

Agora carregue a imagem da skin que você fez aqui e o link que aparecer substitua "IMAGEM DA SKIN" por ele.

Agora vamos pro "BOTÃO DE PAUSE".

Recorte o png que do jeitinho que ele está na skin e o carregue no mesmo site, copie o link que aparecer e substitua o "BOTÃO DE PAUSE" por ele. Assim:

Clique duas vezes em cima do png ou então em "cortar" no menuzinho abaixo:

Ele vai ficar assim: 

Salve (Salvar > Salvar como) com um nome diferente para poder upar no site e substituir.

Agora vamos fazer a "IMAGEM DE CRÉDITOS". 

Abra uma foto com 179x22 e escreva a sua url, se quiser pode colocar um enfeite, eu fiz assim:

 Se quiser uma coisa mas enfeitada você pode fazer no ps, lá tem styles e tals, vai ficar mais bonito.

Carregue a imagem no mesmo site e substitua "IMAGEM DE CRÉDITOS" pelo link da foto.

Agora vamos alteras as outras "coisinhas".  Procure por essa parte da sua base:

E substitua:

 26 px por 0px

0px por 26 px

52px por 42px

0px por 1270px

Agora sua skin está pronta!  Salve (Arquivo > Salvar) assim:

Não esqueça de colocar o ".css" no final do nome da sua skin!

Agora para você conseguir usar sua skin carregue ela no mesmo site que usamos para a imagem e depois é só colar o link que aparecer no scm e pronto!

Se você quiser o download da skin que eu fiz aqui está (mas se pegar dê meu merecido like por favor):

download

Vou usar o photoscape (pode usar o ps também, mas o photoscape é mas prático). Caso não tenha ele instalado no seu computador aqui tem o link.

Vou ensinar vocês a fazerem essa skin:

Vou usar esse png e essa base.

Vamos lá, abra um documento 300x25 no photoscape e depois abra a base e a posicione abaixo da foto que acabamos de abrir, assim:

E depois:

E escolha a foto base que você salvou, quando a base abrir vai ficar em cima da foto que usaremos para a skin, então a reposicione assim:

Abra o png do mesmo jeito que abriu a base e a reposicione assim:

Redimensione e depois coloque na mesma posição acima, assim:

Agora vamos colocar o botão de "next" e a playlist.

Aperte no botão de "aspas" e procure os símbolos que queremos em "Webdings", assim:

Eu escolhi a cor preta, mas você pode escolher qualquer outra cor. 

Redimensione o botão de "next" em cima do da base e depois arrume o em cima, assim:

Clique nele, aperte o "+", coloque o em cima da outro botão de "next", vire o em 180°, e depois o arrume no lugar, assim:

Agora vamos colocar a playlist, eu gosto de colocar "list" ou "more" invés desse simbolo, mas se quiserem colocar ele clique nas aspas e procure em "Symbol".

Vá no texto e coloque "list", "more", "songs", "musics", "playlist" ou o que preferir. Assim:

Quando você escrever a palavra que quiser, coloque a em cima do botão da playlist e redimensione até ficar proporcional, e depois arrume na skin:

Agora exclua a base clicando nela e depois "X" e salve a sua skin! Assim:

E vai ficar assim:

Pra salvar vá em "Salvar" > "Salvar como" > Dê um nome a sua skin e clique em "Salvar".

E pronto! Sua skin está pronta, e para codificar (fazer a sua skin funcionar) o tutorial está aqui.