Create Apple iOS Chat Bubbles in Photoshop CS6
Let’s create some cool little chat bubbles like we would see on the iPhone. Using some Shape Layers, Layer Styles, and a little imagination, we’ll have these sweet little texting/chat bubbles that can be used in any kind of web design or even graphic design project you have. Let’s jump in and get started!
Start by creating a new document sized 1280px by 720px. I’ve dropped in a background of light gray and a little noise to add some texture.
Grab the Rounded Rectangle Tool (U) and set it to draw a Shape using the control bar at the top of the work area. Also set the corner radius to 20px. TIP: In older versions of Photoshop you will need to set the tool to draw a Shape Layer, it’s the icon on the left.
One of the new features of CS6 is the ability to punch in an exact size for your Shape Layers. We want our first shape to be 150 px by 25 px. Click once on the document and enter those settings and hit OK.
Before we style this shape we want to add the little “tail” to complete the speech bubble shape. Grab the Pen Tool (P) and set it draw a Shape and draw a shape similar to what I have.
One of the cool new features of Photoshop CS6 is the ability to merge Shape Layers and maintain editable paths. In older versions of Photoshop we had to merge and combine paths and create vector masks and all kinds of other stuff. It’s a bit simpler here in CS6, simply Shift-Click both Shape Layers and hit Cmd/Ctrl + E to merge them together.
Grab the Path Selection Tool (A) -The black arrow- and drag a selection over both shapes that we just merged into one Shape Layer. Look to the control bar and select the pathfinder icon and move down and select the “Merge Shape Components” item. You will now have one path around your shape.
We’re now going to reduce the Fill Opacity of the layer to 25% and apply the Drop Shadow, Inner Shadow, and Stroke that I have applied in the screenshots below.
We’re going to grab the Rounded Rectangle Tool (U) again and draw a nice little rounded rectangle in the area we want the shine for this bubble. (It seems to look best if it runs about half way down the front of the bubble).
Reduce the Fill Opacity of this shine to 0% and set the foreground color to white. Go Layer>Layer Style>Gradient Overlay and choose the foreground to transparent gradient as I have. Reduce the opacity of the gradient and use the little “Reverse” option if the white is not at the top of the bubble.
Grab your Text Tool (T) and place some text in the bubble and size it appropriately. Add the simple Drop Shadow that I have in the screenshot below to give a slight letter-pressed effect.
Grab your Rounded Rectangle Tool again and draw out a rounded rectangle like in the screenshot. TIP: Play with your corner radius and find a size you like; I used 8px.
Apply the exact Drop Shadow that I have to this rounded rectangle. NOTE: You’re not going to see much of a difference; we’ve only added a slight white line below this white shape. The effect will really show up when we add the picture.
Go File>Place and choose an image that you want as your avatar image. This will place it as a Smart Object (so we can scale it larger and smaller without worrying about pixelation). Scale the image down to about the size you want and hit the Enter/Return key to place the image.
Next, we want to apply the Inner Shadow and Gradient Overlay that I’ve applied. The Gradient is a little tricky, you want to start with a Foreground to Transparency gradient and drag both of the Opacity stops to the 50% mark on the top of the gradient to create a sharp white-to-transparent effect. This will be our shine.
We now need to mask our image to the layer beneath. Typically we would use a clipping mask, but because of our Layer Styles we want to go with a normal Layer Mask. Cmd/Ctrl + Click on the Shape Layer’s thumbnail to load that rounded rectangle as a selection just as I have in my screenshot.
Go Layer>Layer Mask>Reveal Selection to mask to the selected area.
TIP: Click the little chain icon in the Layers Panel between this layer thumbnail and the mask to be able to move the image around and keep the mask in the exact place we need it to be. This is how you can adjust what part of the image shows up as the avatar. NOTE: You will want to re-link this before moving these layers.
I want to add a small highlight to the small pointed area coming from the bottom left corner of our bubble. Grab the Pen Tool (P) and drag a small shape as I have.
Cmd/Ctrl + Click our original bubble Shape layer to load it as a selection and mask this little shape to our bubble layer by going Layer>Layer Mask>Reveal Selection.
You want to add a Gradient Overlay by going layer>Layer Style>Gradient Overlay and grab the foreground to transparent that I have (make sure your foreground color is white) and drag the Opacity slider from the left to the 40% position as I have. Follow the rest of my settings in the Gradient Overlay section.
I’m going to move both my chat bubble and avatar to align them the way I want by Shift-Clicking these couple layers and using my move Tool (V) to drag them were I want.
You can select all of the layers and duplicate them and flip and readjust them to have the responding message. I used a Color Overlay Layer Style of #008aff set to 20% Opacity for the shade of blue I have. TIP: Watch the video to see how I work with flipping and making the second message work.
Replacing the avatar image is as simple as right clicking the avatar image’s layer name and choosing “New Smart Object via Copy”. Next, right clicking this new layer’s name and choosing “Replace Contents”. Navigate to the image on your hard drive and choose the image you want to replace the avatar. Feel free to delete the non “copy” avatar layer.
I’m going to manufacture a little conversation using a couple of quotes by comedian, Mitch Hedberg.
Adding the proper text at the top is a walk in the park. Grab your Type Tool (T) and drop in some Arial text. The time and date are Arial in Bold. Check out my Character Panel to see my exact settings for the text.
I’ve added a couple other small elements to finish off the setting and we’re done! Enjoy!