Forma nas imagens dos comentários (máscara)

1. HTML

No HTML não tem muito segredo, você vai colocar apenas o código abaixo substituindo pela imagem desejada. Lembrando que o tamanho é 36x36 pixels. O código abaixo você vai procurar pela tag .avatar-image-container {,  copie e cole depois da chave:

Código

-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);

Esta vendo que o código se repete? É para funcionar em todos os navegadores, então não esqueça de por a mesma imagem em todos, hein? haha

2. Imagem

A parte no Photoshop é de criação, você deve apenas abrir um novo documendo (ctrl+n) com o tamanho de 36px, feito isso, ali você colocará sua shape, brush, enfim, o que quiser que fique de base. Lembrando que: tem que ser preto com o fundo transparente.