Adding Type in the Shape

Omaha Web Design


ALTHOUGH TECHNICALLY Photoshop is not a page layout program, many people use the program to design Web layouts, Web banner ads, postcards, business cards, logos, and the occasional print advertisement. In addition to adding point type (click and type) and paragraph type (click and drag to create a bounding box, and then type) with the Horizontal Type tool, you can also add type inside a shape. In other words, you can add text to shapes created with any of the Shape tools (U) such as the Ellipse or Custom Shape tool, path shapes created from the selected outlines of an object on a layer, mask, or channel, or shapes created from a saved path.


Step 1, the example shown in this technique requires the use of a free geographical font called GeoBats designed by the generous Daniel Zadorozny of If Photoshop is open, close and reopen it to gain access to the newly installed font.

STEP 2 Select File> New to open the New document dialog box. Under Preset choose Photo, set the Width to 5.25 inches, the Height to 5 inches, and click OK. Next, press T to select the Horizontal Type tool and on the Options bar, set the font to GeoBats, the Size to 68 pt, and the Color to something bright and easy to see, like a red or green. Click your cursor once in the center of your file and press the lowercase s key to insert the continent of Australia.

STEP 3 Control + click / command + click the type layer's thumbnail to select the shape, click over to the Paths panel, and click the Make Work Path from Selection button at the bottom of the panel. Double-click the new Work Path layer and name the path Australia. Now return to the Layers panel, hide the visibility of the Australia type layer, press T to select the Type tool, and set the font to Georgia, Regular, 8 pt, Sharp, with the color set to a Rusty brown with the Hex value of # 92500e. Click inside the Australia path outline (the dotted lines around the cursor should be round, not square or linear before you click) to set the insertion point, and type or paste in enough copied text to fill the shape.

HINT: With this particular shape outline, which has two unconnected pieces, your text will not automatically flow into the island of Tazmania. Therefore, to add text there you will need to reselect the work path and enter a second text layer directly to that shape.

STEP 4 Return to the Paths panel and Control + click / command + click the Australia path layer's thumbnail to select the shape again. Shift back to the Layers panel, press Shift + Control + I / Shift + command + I to inverse the selection, and choose Layer> New Fill Layer> Solid Color. In the color dialog box that opens, enter a value of # 0797b1 in the Hex field, and click OK. Your layout now has a blue background with text fl owing inside the shape of Australia with a white background.

Step 5 to further define the continent shape you'll add a drop shadow effect. Control + click / command + click the thumbnail on the Color Fill layer to select the shape again, press Shift + Control + I / Shift + command + I to inverse the selection, and then choose Layer> New Fill Layer> Solid Color. This time fill the mask with white (#ffffff) and click OK. Adjust the Fill of this layer to 0%, and then select Layer> Layer Style> Drop Shadow, set the Angle to 120 °, the Distance to 10 px, the Size to 16 px, and click OK.

Step 6 For the final touches, add a sunny gradient to the inside of the continent, add a talk bubble shape, put some catchy text inside of it, and add a text layer with URL to learn more about Australia.

Branding | Digital Marketing | Advertising Agency | Graphic Design
Web Design | Search Engine Optimization | Mobile Application Development

92 West | Branding + Strategy + Web Design

92 West is a branding, digital marketing, web design and advertising agency focused on helping brands discover their true voice and sense of purpose; genuinely inspiring audiences.

Have a project or new idea? Let's Talk.

branding + omaha advertising agency + digital marketing + graphic design
omaha web design + search engine optimization + mobile apps

Source by Ajay Kumar N