koo (❁´◡`❁) i have a question !! how do people use blob maker ?? or use those blobs that everyone uses for their icons. so sorry if its obv but i just.. don't get it !! lol am trying to use ps for the first time so so confused （；´д｀）ゞ
angelcake , hihiii !!! (◠‿◠✿) don’t worry , luvie , it’s an absolutely valid question n am happy 2 help !!! i’ll talk abt em in a general graphic / dash icon sense , since that what i use em for !!! lil tutorial is under the cut for u , luvbug !!! hope this helps n if u need anythin else , jus lmk !!! ^♡^
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 !!!
n make sure to export it as a png , otherwise it won’t save right ! n i typically follow similar steps for graphics , jus w a bigger canvas n such , n yea !!! then ur free 2 embellish it all u want !!! ^-^
Como fazer dash icons (atualizado), por winterhelps
Oi gente !! Eu já fiz uns três tutoriais de dash icons ao longo desses anos, mas por que não fazer mais um? KKKKKK Dois deles são de circle icons e eu não faço mais icons assim, então é bom dar uma atualizada. Enfim, espero que gostem (:
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:
as requested by anon, today we’ll be learning how to make my style one dash icons, as pictured above ! it’s super easy once you get the hang of it, but this one does require a basic understanding of photoshop. none the less, i’ll walk you through it as best i can ! lets go !
note: i’ll be using ps cs6 for this tutorial, so buttons and functions may vary depending on the version you’re using.
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 !
if you have any questions or something wasn’t clear in this --- don’t hesitate to reach out ! otherwise, happy icon making !
hi frost!! i was wondering - how do you make your dash icons? would you mind posting a tutorial, or even linking to one (if that's how you learned) thank you !! keep up the brilliant work
i mainly learned through trial and error, so i put together a little tutorial down below of how i make my dash icons! it’s a bit image heavy, so keep that in mind.
what you’ll need:
an image you want to make an icon of
photoshop ( i use cs6 )
patience
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!
A tutorial on how to make a dash icon. This is more of a Halloween tutorial than anything else. this is not to take away from the other amazing Halloween based icon tutorials or anything else. This is just one way of doing it, adding in a few steps to make it even more of a personalized touch than picking a background pattern from the internet but making your own little background and using it to do an icon. This is a 3-d version instead of a single rounded all away look. I love doing tutorials, they are fun and somewhat relaxing to do and I have been wanting to do another tutorial for a while now but wasn’t sure on what. Like/reblog if you find helpful or something like that.
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.
You can resize your image here as well. Save as png-24.
alright alright alright ! as requested by anonymous, below the cut is a tutorial on how to make my style 2 dash icons, as viewed HERE. this is technically very simple and not as fiddly as you might believe it to be --- trust me, a quick google search later and i was banging out fifty of these in an hour, no problem. for this tutorial, i’m using photoshop cs6 and i’d suggest having a basic, rudimentary knowledge of how photoshop works and stuff, but again, it certainly is not at all required. let’s begin !
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:
if you have any questions about this tutorial or if anything wasn’t clear, please shoot me another message and i’d be happy to answer any questions you have ! happy icon making !
Your blog is amazing! I really love all your content. I was wondering if you'd posted a tutorial on how to make icons similar to the Ariana ones you just posted? Tumblr's search function is wacky
hey bub! not exactly but i did make this and it’s pretty much the same as my rectangle ones, i have the couple of changes i make behind the cut
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.
the psds i used in the ariana icons are these: x ( on most of them ), x ( on the b&w ones), x ( on the cheerleader ones )
I was wondering how you're able to make your dash icons, especially in style one? Do you have a tutorial or skme steps you follow? They look amazing!
hihiii , babyluv ! thank u for the kind words ! initially when making them , i had a tutorial i followed , but i can’t find it anymore , so i’ve included a small tutorial of my own under the cut for u ! u’ll need photoshop for it — i use both cc & cs5 ! this tutorial is a bit messy , i’m a bit bad at explaining , so if u need further help w anything , let me know ! i hope it’s helpful n luv u sm ! ^♡^
♡ 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 ! ♡
please don’t save or use this icon ! it’s lazy n messy n i hav a cleaner version of it that i’ll release soon - ish !
