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.
1. Select the Custom Shape Tool on the toolbar.
2. On the Options bar, 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 if you want to constrain the proportions on the bubble.
Â
At this stage you’ve drawn out a vector path, 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 that we’ll use.
8. On the colour picker on the toolbar, choose your foreground. (I’m picking orange because it matches my blog!).
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. Here’s a speech bubble with a stroke and a fill and a bit of text.
11. (Optional) You can of course add all kinds of styles from the layers panel to add extra ummph to your bubbles. Here’s a few examples;
Thanks for visiting Laughing Lion Design. Subscribe to my RSS feed to stay up to date with all of the Photoshop and Design related posts.
Related posts:
- More about Custom Shapes in Photoshop and where to find them.
- Photoshop Tutorial : Valentine’s Skywriting Card
- Photoshop Tutorial : Create a Postage Stamp With Your Artwork
- Photoshop : Tutorial – Changing the direction of brush strokes
August 27th, 2008 at 10:27 pm
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!
August 28th, 2008 at 8:51 am
Thank you Teddi!
Much appreciated – it can get a bit lonely here so I always genuinely appreciate comments.
August 28th, 2008 at 2:41 pm
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.
August 29th, 2008 at 7:58 am
Hi Alistair
No problem, you’re very welcome.
A book you say, hmmmm? I’m thinking bigger – Photoshop Tutorials The Movie!
August 29th, 2008 at 2:37 pm
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…
August 29th, 2008 at 2:46 pm
Thanks! That’s cool.
August 29th, 2008 at 5:16 pm
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.
November 26th, 2008 at 11:54 am
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
November 26th, 2008 at 3:05 pm
Glad you found it helpful Stuart. Good luck with the new site.
February 5th, 2009 at 3:49 pm
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
February 5th, 2009 at 5:14 pm
Hi Tim
Yes, speech bubbles and loads of other goodies too! Thanks for visiting and taking the time to comment.
February 28th, 2009 at 1:16 pm
thanks for the tute
March 1st, 2009 at 12:26 pm
You’re welcome msmpt!
April 10th, 2009 at 2:39 pm
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
April 11th, 2009 at 12:01 pm
Hi Betty
Do you mean how to cut out an area of a shape and leave that area transparent?