#dash icon tutorial

            so  !!!  go  to  this  lil  website  right  here  ,  our  luvly  blobmaker  !  play  around  w  the  sliders  at  the  bottom  of  the  page  until  u  get  a  shape  u  like  ,  n  once  u  do  get  a  shape  u  like  ,  hit  that  cute  lil  download  button  !!!

            so  ,  now  that  she’s  downloaded  ,  go  ahead  n  open  photoshop  n  go  file  ›  open  ›  n  then  jus  find  ur  blob  in  ur  download  folder  n  open  her  up  !!!  whenever  i  open  up  a  blob  ,  there’s  a  lil  popup  that  opens  too  ,  so  i  jus  hit  OK  to  that  if  it  pops  up  for  u  too  !!!

            ur  blob  will  open  at  dimensions  like  2500  x  2500  or  smth  like  that  ,  which  is  HUGE  !!!  so  ,  i  always  jus  crop  it  down  2  whatever  size  i  need  it  —  for  dash  icons  ,  i  always  go  w  150  x  150px  bc  that’s  the  size  i  prefer  to  work  w  !!!  so  ,  now  ,  i  hav  this  !!!

            he’s  cute  !!!  now  ,  if  ur  makin  a  graphic  ,  there’s  rly  no  method  2  the  madness  ,  depending  on  what  u  want  ,  u  can  jus  resize  it  n  sorta  …  slap  it  on  wherever  u  want  !!!  but  if  ur  lookin  to  make  smth  sorta  like  the  dash  icons  goin  around  rn  ,  there  sum  more  steps  n  i’ll  show  u  !!!

            so  ,  now  ,  u  need  the  person  who’s  gna  be  the  star  of  ur  icon  —  mine  will  be  ggukie  !!!  so  ,  i  hav  my  image  (  i’m  gna  use  this  one  )  n  i’m  gna  upload  it  to  remove.bg  ,  which  will  turn  it  into  a  png  for  me  n  remove  the  bg  n  such  !!!  so  ,  now  i  hav  this  !!!

            oh  ,  n  while  my  blob  size  is  150px  ,  i  always  use  a  canvas  of  180px  ,  so  i  hav  a  bit  more  room  for  embellishments  n  such  !!! 

            anyway  ,  now  we’re  gna  download  that  png  of  ours  n  then  take  it  back  over  to  ps  n  open  it  up  !!!  i  always  crop  my  png  down  to  160 x 160px  first  ,  then  sharpen  ,  n  add  my  psd  !!!  then  ,  i’ll  merge  the  layers  so  that  it’s  jus  one  layer  for  the  next  step  !!!  so  ,  now  ,  we  hav  this  along  w  our  blob  !!!

            cute  !!!  so  ,  now  we’re  gna  drag  our  png  layer  over  onto  our  blob  layer  !!!  position  it  so  that  the  edges  of  the  png  cover  the  edges  of  the  blob  ,  otherwise  it’ll  look  funny  !!!  so  ,  now  we  hav  this  !

            n  it  looks  funny  .  :(((  i  know  ,  but  we’re  not  done  !!!  what  ur  gna  do  now  is  right  click  on  ur  png  layer  n  click  duplicate  layer  !

            n  a  lil  popup  shld  come  up  ,  so  jus  hit  OK  on  her  ,  n  now  u  shld  hav  three  layers  !!!  ur  blob  on  the  bottom  ,  n  then  the  two  pngs  !

            so  ,  now  ur  gna  select  ur  first  png  layer  ,  which  shld  b  ur  middle  layer  ›  right  click  ›  create  clipping  mask  !  

            n  it  won’t  look  like  anything  has  changed  ,  but  if  u  click  that  lil  eye  next  to  ur  png  copy  layer  ,  it’ll  look  like  like  this  now  !

            which  we  don’t  rly  want  !!!  so  ,  hit  that  lil  eye  again  ,  to  get  us  back  to  what  we  had  before  ,  n  now  ur  gna  make  sure  the  png  copy  layer  is  selected  ,  go  all  the  way  over  to  select  ,  n  grab  ur  eraser  tool  !!!  we’re  gna  erase  away  all  the  lil  extra  bits  of  the  png  at  the  bottom  that  aren’t  inside  the  blob  !  so  ,  once  u  do  that  ,  ur  icon  shld  look  like  this  !!!  ^-^

            n  u  can  change  the  colour  of  the  blob  by  right  clicking  ur  blob  layer  ›  blending  options  ›  colour  overlay  !  

            pick  ur  colour  usin  the  lil  window  n  such  !  u  jus  need  to  click  on  that  coloured  box  —  it’s  black  for  me  rn  ,  but  it  might  b  a  diff  colour  for  u  !  click  on  it  n  a  hex  colour  picker  will  pop  up  !!!  so  jus  choose  ur  colour  (  i  jus  chose  a  darker  pink  )  n  hit  OK  !

            after  u  do  that  ,  our  png  will  look  smth  like  this  :(  which  is  icky  sticky  .

            but  fear  not  !  u  jus  need  to  right  click  on  ur  blob  layer  again  ›  n  click  rasterize  layer  style  !

            n  tada  !!!  isn’t  she  prettie  !!!

A primeira coisa que eu faço é abrir o meu template de dash icons (eu uso o template 2, mas diminui o tamanho dele pra 100 ou 120px) e abrir as fotos que quero usar para os icons. Eu costumo pegar fotos grandes e com boa qualidade, isso ajuda muito no resultado final deles. 

Observação: eu uso esse template, mas você pode baixar um dos tantos outros templates de icons que tem por aí (tem uns muito lindinhos aa).

Então, eu arrasto a foto que vou usar pro icon para o template. Como a imagem é muito maior do que o template, ela vai ficar estranha (porque só se enxerga um pedaço bem pequeno dela). Porém, antes de redimensionar a foto, vou colocá-la "dentro" do template. Pra isso, é preciso clicar na camada da foto com o botão direito do mouse e clicar em criar máscara de corte (create clipping mask em inglês). Como o tamanho da imagem ainda está grande, o icon deve estar mais ou menos assim (com bastante zoom em alguma parte dele):

Eu redimensiono cada foto de uma forma (mas, geralmente, fica entre 20-40% do tamanho da foto original). No Mac, eu faço isso clicando em command + T, mas infelizmente não sei como é no windows (caso vocês não consigam diminuir só o tamanho da foto, diminuam antes de levá-las ao template). E, então, aplico um psd. Eu já deixo um psd salvo no arquivo do template, mas faço alterações quando acho que preciso. O icon está quase pronto:

Por último, mas não menos importante, eu aplico uma action de nitidez e é isso !! Aqui está o resultado final: 

STEP ONE. find your images. pretty much any image can be used to make a style one icon, i’d just personally avoid super close ups of the person’s face. it can crop weirdly sometimes, so bear that in mind. for this tutorial, i’ll be using this image of jessica chastain

STEP TWO. open photoshop. once loaded, open your image & crop it down to 100px by 100px. sharpen & colour your image. in order to make this icon work, you have to make sure your image is the only layer to edit

( to do this, merely right hand click over the layer, select duplicate layer and then delete the bottom one. )

STEP THREE. click the rounded rectangle square tool. make sure the little drop down box has ‘path’ as its option

STEP FOUR. at this point i like to zoom in on the canvas to 300%, but that’s personal preference. click on your image and a little box will pop up, and this is where you enter the dimensions of your icon. for context, this is the size the actual icon will be while inside the 100px canvas. it can be any size depending on what your aesthetic says --- but for my icons, i usually go with 80px by 80px. once that’s done, click enter.

STEP FIVE. a little grey box will show up, and from there, press CTRL+T and move the box to where you want the icon to be. below you’ll see the grey box pop up & how i’ve also positioned mine in the canvas

STEP SIX. once that’s done, click ‘selection’ in the top bar, and another box will pop up. make sure your feather radius is set to zero. i’m not entirely sure what this part means --- but from what i can figure out, this ensures the icon itself is smooth and clean. once you press OK, the lines should now be swirly and moving along the image. you then want to go select, inverse, so there’s a second swirly line around the edge of the image

STEP SEVEN. press delete. this smoothly deletes the background of the image, leaving you with a perfect icon. from there, press CTRL+D to deselect the icon, and then press CTRL+T again, and adjust the icon to where you want it to sit on the canvas. this is esp important to make sure it wasn’t wonky when you upload it to tumblr

STEP EIGHT. save as a png file and voila ! one dash icon !

step 1. once you open up photoshop open up the image that you want to use for your icon. then make a new image, i usually go with 140x140 for my own icons. 

step 2. this step is optional, but i find creating guides to be helpful. this can be done by going to view and selecting “new guide.” then you type in where you want the guides to be, i put mine at 50% vertical and 50% horizontal so i know where the center of the canvas.

step 3. you’re going to want to your sidebar and select your shape tool. in my case, i use the rounded rectangle and then just click anywhere on your canvas. a little box will pop-up and ask you what size you want the shape to be. i do 115x115 and then move it around until where i want it to be. i usually have it centered vertically, but not horizontally since i want a little room for the pop-out part of my icon. 

step 4. drag the image that you want to make an icon of onto your canvas. then resize it so that it fits into the square that you have created and looks the way that you want it to. 

step 5. once you have the image resized, you’re going to create a clipping mask. this is done by right clicking on the layer and selecting “create clipping mask.” next, if you’re doing a pop out icon, drag it down slightly so you can see the top of the figure’s head. 

step 6.  use the marquee tool and select the top portion of your picture. next, right click and choose layer via copy. 

step 7. make sure you select both of your layers and reposition them so that they are where you want them to be and 

step 8. now you’re going to want to select the pen tool. basically, this will let you outline the part of your icon that you want to be the pop-out part at the top. below, you can see as i outline the top of emma’s head. 

step 9. once you complete your selection, you’re going to right click and pick “make selection.” 

step 10. then make sure you are only selecting the top layer and you’re going to right click again and choose “select inverse.” after that, you will right click and hit “refine edge” and then go to radius and type in 4 and hit enter. 

step 11. then select all of the layers you have, including the square that you made at the beginning. now right click and select “convert to smart object.” after that is done, select your newly created smart object and select “rasterize layer.” 

step 12. now use the “magic wand” tool and select your whole layer. it will outline your icon and you’re going to want to right click and hit “select inverse.” next, you’re going to right click and choose “refine edge” and then go to smooth and put in “2″ hit enter and hit enter again. 

step 13. drag in your colorings or whatever you want for a coloring and make sure you use layer masks so your icons will save with a transparent background. repeat step 12 on your layer masks and then you’re all set to save your icons!

Create your background. Size it to be square so anything that is even on both sides. 300x300 or in my case 600x600.

Select the ellipse tool

Settings should be like mine. 

Draw a circle, which will be a perfect circle if the settings are the same as mine. 

Duplicate the layer.

Change the settings so that the middle is not filled but you have a border now.

Resize the border layer so that way it is bigger than your base circle layer that is completely filled in with no border.

Select both of your layers. Have the move tool selected.

Click what is selected in red in my example. This will center your two layers 

I moved my two layers over a bit as well so that way they aren’t flying off the canvas.

Select new layer. Fill that in with any color you want. Be it blue/orange/red/pink/etc.

Click new layer again. Grab some brushes from Deviantart or somewhere, make sure to read the rules for the brushes though before you use them.

Have your brush that you want to use selected and the brush tool selected. 

Start painting but just clicking once and move the brush, click and move. Unless you plan to draw all of the things by hand then the whole downloading brushes, click and move thing wouldn’t work for you but if you are just wanting the outline of your brush then click and move.

Is my finished canvas look

Select your circle layer. You can do that by hitting ctcl on your keyboard and then clicking the layer

make a group. 

Add layer mask to your group.

Move your two brushed layers into the grouping.

Cut out a png of your person, object, or animal

Follow steps on how to make a 3-d icon. If you want me to do a tutorial on that, I will! Send me an ask. 

Unselect your background layer.

step one. finding your images. like most 3d dash icon styles, you’ll need images that show the top of the person’s head. avoid messy hairstyle looks for your own sanity. for this tutorial, i’ll be using this image of jenna:

step two. crop your image down to 100px to 100px. smart sharpen your image --- if you’d like to know my settings for this, shoot me another ask ! add your psd. then right hand click and merge visible. once you’ve done that, right hand click again and go duplicate layer. delete the bottom layer. your layer panel should now look like this:

step three. i like to zoom into 312% at this point, just to be able to see everything a bit clearer, but that’s personal preference. click on the rounded rectangle tool, which looks like this:

at the top tool bar, you’ll see a drop down menu, which when you click on it, should look like below & click path from the options:

step four. next, click on your image & a little pop up box should appear like so:

as you can see, i have my settings set to 75px by 75 px, but by no means do you have to stick to that size. fiddle around, figure out which fits your aesthetic a lot better ! after you’ve clicked ok, the box should appear. press control + t to move the box where you want it to sit within the images. similar to my other dash icons, make sure the top of the head pokes outside the line of the box. this is how mine looks & you can faintly see the outline there on the image:

step five. back at the top tool bar, you’ll see a button titled ‘make selection’, like so:

click it. when the box pops up, press okay. now the lines should be all doodly and moving ! yay ! next, go to select up the top and click inverse. this allows you to erase the background without loosing what’s inside the sqaure. we’re almost there!

step six. using your favoured eraser tool, --- and there’s many, so play around with them to learn which you like --- erase the background of the image, but make sure to leave the top of jenna’s head. when you’re done, this is how your image should look:

step seven. go back to select and click deselect. if you want to move the image to the center, merely click control + T and adjust to where you’d like to set it within the canvas. tip: if you’re worried about missing bits of the background, create a new fill layer the colour black and drag it below your image. this will show if you’ve missed any parts !

step eight. make sure to save your image as png and voila ! you’re done and this is your final product:

my dimensions have changed:

cropped picture ( step 2 ): 300 px instead of 250 px

size of the rounded rectangle ( step three ): 260 px instead of 210 px

final icon: 250 px instead of 200 px 

you can skip applying the border and the shadow because i don’t do either of those on my style 2 icons.

i’ve started taking that same 25 px that i use to bring back the part of the picture i want ( step five )  to remove some of the excess by just switching the color of the brush to black.

♡  open  a  new  canvas  !  i  make  mine  140x140px  ,  since  tumblr  auto - resizes  the  icons  anyway  n  it’s  easier  for  me  to  see  this  way  ,  but  ur  free  to  make  it  any  size  u  want  ofc  !

then  ,  select  the  shape  tool  >  round  rectangle  tool  !  jus’  drag  the  shape  on  ur  canvas  n  a  little  ‘  properties  ‘  tab  should  pop  up  .  this  is  where  u  enter  the  sizes  for  the  round  rectangle  !  i  make  mine  anywhere  between  105x105px  n  120x120px  ,  depending  on  how  much  room  for  transparency  around  the  image  u  want  !  don’t  make  the  rectangle  the  same  size  as  the  canvas  ,  tho  !

move  the  round  rectangle  to  the  middle  of  the  canvas  !  i  jus’  drag  it  around  n  use  my  ‘  snap  to  ‘  guides  to  tell  when  it’s  centered  !  now  u  should  hav  smth  that  looks  like  this  !

now  ,  take  ur  image  !  u  should  crop  it  down  to  the  same  size  of  ur  canvas  ,  so  i  crop  mine  down  to  140x140px  !  i  smart  sharpen  it  ,  add  my  psds  ,  n  then  select  layer  >  flatten  image  !  this  will  get  rid  of  all  ur  excess  layers  ,  so  now  u  can  drag  n  drop  (  or  duplicate  )  ur  image  onto  the  canvas  with  ur  rounded  rectangle  !  center  ur  image  !

now  select  ur  magnetic  lasso  tool  !  carefully  outline  the  part  of  ur  image  with  the  magnetic  lasso  !  it  should  attach  to  the  edges  in  the  image  by  jus’  moving  ur  cursor  ,  so  be  careful  !

i  ,  personally  ,  select  a  bit  of  extra  space  too  !  then  ,  when  u’ve  selected  what  u  want  ,  press  the  enter  key  !  u  shld  get  an  outline  that  looks  like  this  ,  for  example  !

now  ,  press  cntrl  j  and  this  will  make  a  copy  of  the  area  u’ve  selected  !  then  ,  click  on  the  layer  of  ur  original  image  .  right  click  ,  select  create  clipping  mask  .

now  ,  u  shld  hav  smth  that  looks  a  bit  like  this  !  not  very  pretty  ,  huh  ?  

so  ,  now  ,  jus  select  layer  2  (  the  top  layer  /  the  layer  u  made  from  the  magnetic  lasso  tool  )  and  the  erase  tool  and  rub  away  any  excess  until  u  1)  recover  the  shape  of  the  rectangle  underneath  and  2)  are  satisfied  with  how  it  looks  !  feel  free  to  select  both  layer  1  and  layer  2  and  move  them  around  a  bit  ,  and  don’t  forget  to  delete  the  background  layer  when  ur  done  !

ur  end  result  shld  look  smth  like  this  !  n  ta - da  !  u’ve  made  urself  a  style  one  dash  icon  !  ♡