Creating speech bubbles in Photoshop using the Custom Shape Tool
Speech bubbles are used a LOT around the web in logo designs and as icons. Photoshop comes with a set of speech bubble shapes just waiting to be used, but they are hidden away a little bit. Here’s how to create your own speech bubble graphics.
*Note: This tutorial has been recently updated (August 2011) and uses screen grabs from Photoshop CS5. However the method is the same for older versions of Photoshop
1. Select the Custom Shape Tool on the toolbar.
2. On the Options bar at the top of the screen, choose the paths option.
3. Again on the Options bar, click on the drop down box called Shape. This opens a set of default shapes that can use for drawing vectors. Click on the triangle on the top right corner – this opens a drop down menu – and from there choose Talk Bubbles.
4. A dialog box will open asking if you want to Replace or Append the current set of Shapes. I usually choose Append, and this adds the new set of shapes to the end of the currently visible shapes.
5. Now scroll down through the shapes and you’ll see a lovely set of speech bubbles.
6. Click on the bubble you want to draw and the click and drag out the shape on the image window. Hold down Shift to constrain the proportions on the bubble.
At this stage you’ve drawn out a vector path but there are no pixels at this stage. We can stroke or fill (or both) the shape at this point but first it’s important to set up the colours and brush that we’ll use.
8. On the colour picker on the toolbar, choose your foreground. I picked dark red #990000.
Click on the brush tool and in the options bar choose a size, hardness and shape of the brush that you want to use. The size of the brush dictates the width of the stroke you will apply to the path you’ve just drawn.
I chose a hard, round 15 pixel brush. This will vary for you depending on the size of the path you draw and how thick you want the stroke to be.
9. Open the paths panel. At the bottom of the panel click on the Stroke Path button.
This adds a 15 pixel stroke to the path.
The path will still be visible, so to turn it off click anywhere on the grey area under the path name (it will say Work Path unless you changed the name) on the Paths panel.
10. If you wanted to fill the bubble with colour you would do the same steps as above but click on the Fill button on the bottom of the palette.
11. (Optional) You can of course add all kinds of styles from the layers panel or choose Windows > Styles to add extra oomph to your bubbles. Here’s a few examples;
Related posts:
38 Comments
Trackbacks/Pingbacks
- Como se hacen bocadillos de historieta en Photoshop 7.0? - psicofxp.com - [...] dejo algunos tutoriales que encontré, espero que te sirvan. Saludos. [Tutorial] [Tutorial] ...
Still loving your posts. Funny how it doesn’t seem to matter that I haven’t thought about talk bubbles in “forever” — it’s still great to know how to do it!
So if you ever question whether your eclectic collection of tips are actually hitting home out here, they are!
Thank you Teddi!
Much appreciated – it can get a bit lonely here so I always genuinely appreciate comments.
Dear Jennifer,
Thank you so much for the tutorial on speech bubbles. I find PS a bit daunting at times, (being left-handed doesn’t help), but your advice is very helpful. A book surely?
ATB
Alistair, Stirling, Scotland.
Hi Alistair
No problem, you’re very welcome.
A book you say, hmmmm? I’m thinking bigger – Photoshop Tutorials The Movie!
Hi Jennifer, I just stumbled upon your blog a few days ago.
Great post, and it has me wondering about the current design trend of using speech bubbles…they seem to be a bi-product of Web 2.0. Even The Daily Mirror Newspaper now uses them.
So, as their use is starting to spread, it’s a useful tool knowing how to construct them, thanks for the info…
Thanks! That’s cool.
Hi Andrew
Yes, the web world went a bit bubble mad there for a while I think we’re coming out the other side now. Apart from the speech bubbles you can use the custom shape tool for loads of cool vector shapes. Thanks for visiting and commenting!
Hi Susan, you’re very welcome.
Thank you so much for this. I found it doing a search for exactly this info to creat a speech bubble for a new site I am building. Thanks for giving me exactly what I was looking for.
Stuart
Glad you found it helpful Stuart. Good luck with the new site.
Hi Jennifer
Thanks for the speech bubble tutorial. I’ve been making them ‘by hand’ as it were your years. Never knew they they were buried in Photoshop all along.
Best, Tim
Hi Tim
Yes, speech bubbles and loads of other goodies too! Thanks for visiting and taking the time to comment.
thanks for the tute
You’re welcome msmpt!
Could you post a tutorial on how to creat transparancies with the custom shape tool or otherwise? I want to use them for photo frames and photo books. Thanks
Hi Betty
Do you mean how to cut out an area of a shape and leave that area transparent?
very usefull, thanks!
Hey, how do you reverse the bubble so that a person facing the other way could use it?
Nice – thanks.
.-= Mike Chanter´s last blog ..4 FREE WordPress Themes =-.
Thanks very much for this page earnt ew tips xxx
Extremely helpful, thanks a lot!!
You’re very welcome Antonio.
hey thanks a lot for such a nice article. I would like to add something in this post, about how to use the custom shapes in photoshop.
Just paste your csh files to this path on windows xp C:\Program Files\Adobe\Photoshop CS\Presets\Custom Shapes and restart the photoshop.
thanks for the post
Thanks for this very handy guide, these things have been driving me crazy.
That was really helpful! I was trying to import speech bubbles to photoshop, but I’m no professional so it was really difficult to get the result I wanted, until you showed the way: custom shape tools! It was there all the time! Lol… thank you!!!
Thanks everyone for all the nice comments. Glad you found this useful.
Great…. thumbs up..!!!
I learned how to do it, thank you, Jennifer
Smiles from Bulgaria 
Thanks a lot !
It really helped me a lot !
Thank you.
Awesome. Did a quick search for “custom speech bubble” and your post came up. Exactly what I need to replicate something I saw. Saved me a bunch of time at work today! Thanks!
Thanks!!! Nice tutorial.
)
Aloha and Mahalo from Hawaii, I uploaded my picture to Photoshop and followed your instructions. May you be blessed with Grand Cru Truffles for the New Year Made with Hawaiian Vintage Chocolate. You’re worth it!
Got it on the first try, thank you!
I am trying to add a style but I don’t know how to apply it to my bubble??
Great tutorial! I’m thinking of using the Apple-style texting bubbles in an ad I’m designing, and this will help me create them so they look exactly the way they’re supposed to be. One of my many hats off to you. Thanks Jennifer!!
Great post! It really helped a lot.
nice post, very helpful, and can i ask how to invert the text bubbles to another position, i noticed that the arrow points to the left, how can i make it or change it too the right? ^_^