{"id":5028,"date":"2024-03-26T00:30:00","date_gmt":"2024-03-26T04:30:00","guid":{"rendered":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/?p=5028"},"modified":"2024-03-24T12:35:35","modified_gmt":"2024-03-24T16:35:35","slug":"text-on-shapes","status":"publish","type":"post","link":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/text-on-shapes\/","title":{"rendered":"Text On Shapes"},"content":{"rendered":"\n

I\u2019m sure you\u2019ve seen text written around a shape. It\u2019s a very regular occurrence on things such as logos. All you have to do is search for \u201cCircle Logos With Text<\/a><\/strong>\u201d to see how many are out there.<\/p>\n\n\n\n

Have you ever tried writing text around a shape in a layout only to find it\u2019s not working out great? A lot of people struggle with getting the orientation of the text to mimic what you often see in those logos I mentioned; similar to this one:<\/p>\n\n\n

\n
\"Starbucks<\/a><\/figure>\n<\/div>\n\n\n

See how the text at both the top and bottom is \u201cright way facing\u201d or rather upward facing? Achieving this look can be trickier than a lot of people think. Especially when trying to write text \u201con a shape\u201d in Photoshop Elements (PSE).<\/p>\n\n\n\n

Upside Down Text<\/h3>\n\n\n
\n
\"Upside<\/a><\/figure>\n<\/div>\n\n\n

It took me longer than it should have to discover how to replicate the orientation of both the top & bottom text when typing on a shape. Not to be confused with typing in<\/em><\/strong> a shape\u2026that\u2019s so much easier. Sometimes having the text upside down isn\u2019t a problem. But sometimes it just looks better if all the text is upward facing.<\/p>\n\n\n\n

Today I\u2019m going to walk you through the steps to get that upside down text flipped right-side up!<\/p>\n\n\n\n

Writing On A Shape<\/h3>\n\n\n
\n
\"Text<\/a><\/figure>\n<\/div>\n\n\n

First things first. If you\u2019re joining me for the first time, I need to let you know that I do use PSE for all my digital scrapbooking. So, everything that follows is done using that software. I\u2019m fairly certain you can accomplish all of this in most any graphics editing software. Just look for tutorials specific to your chosen software. Also, I am using the latest version (PSE 2024). If you have an older version, some of my screen shots may look different than what you see on your screen. Now, on to the work.<\/p>\n\n\n\n

I\u2019m going to show you how I created the above hot air balloon image (\u201cflair\u201d from my stash) with the text around it.<\/p>\n\n\n\n

I generally prefer not to do all this work directly on my layout. So, I\u2019ll start with a blank file (transparent) roughly twice the size of my finished design. The hot air balloon flair was about 3\u201d around so I set the size of my document to 6\u201d x 6\u201d. That should give me more than enough room in which to work.<\/p>\n\n\n

\n
\"File<\/a><\/figure>\n<\/div>\n\n\n

Establish The Center<\/h3>\n\n\n
\n
\"Find<\/a><\/figure>\n<\/div>\n\n\n

When dealing with placement of text around an image, it\u2019s always a good idea to ensure you know exactly where the center of the work space is. The way to do this is to use the Guides feature in PSE.<\/p>\n\n\n\n

Select View in the top tool bar then select \u201cNew Guide\u201d. This will open the New Guide options dialog box:<\/p>\n\n\n

\n
\"New<\/a><\/figure>\n<\/div>\n\n\n

PSE defaults to the Vertical guide (at least on my computer). I leave that selected and set the Position equal to half the width of my document \u2013 3\u201d and click okay.<\/p>\n\n\n\n

I have previously set the color of my Guide lines (using Edit->Preferences->General->Guides & Grid) to a deep teal (hex value: #1c7676) so it shows up nicely. Your guide line color may be set to something different and that\u2019s fine. Here\u2019s how mine shows up:<\/p>\n\n\n

\n
\"Vertical<\/a><\/figure>\n<\/div>\n\n\n

Now I\u2019m going to do the same for the Horizontal guide so I end up with this:<\/p>\n\n\n

\n
\"Both<\/a><\/figure>\n<\/div>\n\n\n

I already have the hot air balloon flair in my Photo Bin so I just grab it using the Shift key and drag it into my document. By using the Shift key, PSE will automatically center it in my document:<\/p>\n\n\n

\n
\"Flair<\/a><\/figure>\n<\/div>\n\n\n

Create Shape<\/h3>\n\n\n\n

If you\u2019ve read many of my other posts you know I like to keep things on their own layer so I create a new blank layer by clicking the Create a new layer icon in the layers panel. I move that new layer below my flair layer.<\/p>\n\n\n\n

Now, I select the Shape tool (under Draw) in the tools panel to the left of the work area:<\/p>\n\n\n

\n
\"Draw<\/a><\/figure>\n<\/div>\n\n\n

In the tool panel for me it shows up as the Shape \u2013 Custom icon because that\u2019s the last shape tool I used. Yours may look different but when you hover over it, PSE will still let you know which tool you\u2019re about to select.<\/p>\n\n\n\n

When the Shape tool options show up at the bottom of the work area, I select the Ellipse shape so I can create a circle.<\/p>\n\n\n

\n
\"Shape<\/a><\/figure>\n<\/div>\n\n\n

I know\u2026the ellipse shape looks like an oval but this is the tool I need to draw a circle shape. You\u2019ll notice that on my version of PSE there is an option to draw my circle From Center so I\u2019m going to check that box. If your version of PSE doesn\u2019t give you that option\u2026not to worry. I\u2019ll explain how to do that in a minute.<\/p>\n\n\n\n

My color chip within the shape tool is set to a beige color but you can choose any color you like. You should also be able to see that on my version of PSE just right of the color chip is the word \u201cUnconstrained\u201d with a down arrow. Again, if your version of PSE does not give you this option, I\u2019ll explain how to work around that.<\/p>\n\n\n\n

I change Unconstrained to Circle by selecting that down arrow. With the From Center & Circle options selected I can now just draw a perfect circle by placing my cursor (which should look like a plus sign at this point) right over the center of the work area. I then just click and drag it out until the shape is sized the way I want.<\/p>\n\n\n\n

If you don\u2019t have the Circle & From Center options in your version of PSE you can do the same thing by selecting Proportional or Defined Proportions rather than Unconstrained. Then place your cursor in the center of the document, click & hold using Shift+Alt and drag your circle to the desired size.<\/p>\n\n\n\n

The key here is to make the new shape bigger than the flair so the text doesn\u2019t end up touching it. How big a circle you make is totally up to you. You can decide how far away you want the text to be from your image. One thing to keep in mind when deciding on size is if you\u2019re using a Serif or script font, the lowercase letters may have \u201ctails\u201d (specifically the g, j, p & y) that could hang over your image. So, size your circle according to your preference.<\/p>\n\n\n\n

And here\u2019s my circle under the flair:<\/p>\n\n\n

\n
\"Circle<\/a><\/figure>\n<\/div>\n\n\n

Note:<\/strong> Even though I created a new blank layer (default name was Layer 1) PSE renamed this layer to Shape 1 (at least in my version). I generally encourage people to name the layers they create according to what is on the layer. So, Shape 1 worked out perfectly for me. You can name your layer however you choose.<\/p>\n\n\n\n

I chose a \u201crustic\u201d Sans Serif font 321 Impact Regular<\/a><\/strong> (no tails) which is why I kept my circle pretty close to the flair.<\/p>\n\n\n\n

Adding The Text<\/h3>\n\n\n\n

Now the fun part. I\u2019m finally ready to start adding my text. I click on the Shape 1 layer thumbnail to ensure it is the active layer. I then select the Text tool (under Draw) in the tools panel to the left of the work area:<\/p>\n\n\n

\n
\"Text<\/a><\/figure>\n<\/div>\n\n\n

When the Text tool options show up at the bottom of the work area, I select Text on Shape so I can type my text around the circle shape.<\/p>\n\n\n

\n
\"Text<\/a><\/figure>\n<\/div>\n\n\n

You can see I already have my font and color set. I did change the font size to 36 pt from the 28 pt that shows in the image above. And I also ensured that the text alignment is set to Center. This will help later when I\u2019m trying to center the text around the circle.<\/p>\n\n\n\n

Next, I\u2019m going to position the cursor at the top of the circle shape right on that Vertical guide. I hover over the circle shape until the cursor icon changes to depict text mode. It should look like a capital I with a curvy line running through it. When you try this, if you don\u2019t see that text mode cursor, go back & double-click on the Shape 1 layer thumbnail & try again.<\/p>\n\n\n\n

Then I type my text and confirm by clicking the check mark. This is what it looks like:<\/p>\n\n\n

\n
\"Flair<\/a><\/figure>\n<\/div>\n\n\n

Clearly this isn\u2019t centered around the circle the way I\u2019d hoped and you can already see that some of this text is going to be upside down. But I\u2019m going to fix that. First, I\u2019m going to delete the text that I know will be upside down. I\u2019ll put that on its own layer shortly.<\/p>\n\n\n\n

Reposition Text On Shape<\/h3>\n\n\n
\n
\"Flair<\/a><\/figure>\n<\/div>\n\n\n

Now, depending on your version of PSE and the selections you made when typing your initial text, your text could already be centered over the top of the circle as desired. If that\u2019s the case you could skip this section. But I\u2019d encourage you to read it anyway. It\u2019s a good thing to know for future use.<\/p>\n\n\n\n

Here\u2019s how I repositioned the text as shown in the image above. With the text layer still active I select the Shape tool (under Draw) in the tools panel to the left of the work area. In the tool panel for me it shows up as the Shape \u2013 Ellispe icon because that\u2019s the last shape tool I used. Yours may look different but when you hover over it, PSE will still let you know which tool you\u2019re about to select.<\/p>\n\n\n\n

When the Shape tool options show up at the bottom of the work area, I select the Selection icon (arrow) so I can be pointing to the shape.<\/p>\n\n\n

\n
\"Shape<\/a><\/figure>\n<\/div>\n\n\n

Do Not<\/strong> click on the shape. I know that will be your first instinct. We need to keep the text layer active. Just be patient you\u2019ll see how this works.<\/p>\n\n\n\n

I then move my cursor over the outer edge of the text. I just hover over the text until the cursor icon changes to depict text align mode. It should look like a capital I with an arrow (triangle) on either side of it. When you try this, if you don\u2019t see that text align cursor, go back & ensure that the text layer is active & try again.<\/p>\n\n\n\n

With my cursor positioned at the outside edge of the text I can just click and drag the text into the center as desired. Here\u2019s what it looks like now:<\/p>\n\n\n

\n
\"Text<\/a><\/figure>\n<\/div>\n\n\n

This is why it was so important to have selected the align center option before typing the text. If I hadn\u2019t done that it would be nearly impossible to move the text around this easily.<\/p>\n\n\n\n

If you find that your text won\u2019t move by dragging, double check the alignment setting on your text to ensure that it is centered and try again.<\/p>\n\n\n\n

Adding Bottom Text<\/h3>\n\n\n\n

Now that the top text is set it\u2019s time to add the bottom text back in. To do this, above the text layer I\u2019ll create a new circle shape on its own layer (Shape 2) just like I did for the original circle shape. Only this time I\u2019m going to make it bigger and a different color. When I draw the circle shape, I want to make this circle large enough to cover just to the edge of the existing text:<\/p>\n\n\n

\n
\"Circle<\/a><\/figure>\n<\/div>\n\n\n

Then just as I did with the original text, I select the Text on Shape tool so I can type my text around the bottom of the circle shape.<\/p>\n\n\n\n

This time I position the cursor at the bottom of the circle shape right on that Vertical guide. Then I type my text and confirm by clicking the check mark. This is what it looks like:<\/p>\n\n\n

\n
\"Flair<\/a><\/figure>\n<\/div>\n\n\n

This time it did center perfectly. Not surprising since it’s only one word.<\/p>\n\n\n\n

Yes, it\u2019s still upside down but I\u2019m going to show you how to fix that.<\/p>\n\n\n\n

Flipping Bottom Text<\/h3>\n\n\n\n

As before, I’m going to ensure that this new text layer is still active. I then select the Shape – Selection icon (arrow) in the Shape tool area. It should also still be visible in the primary tool area off to the left of the work area. Again, this is so I can be pointing to the shape.<\/p>\n\n\n\n

And just like before, I just hover over the text until the cursor icon changes to depict text align mode. This time, with my cursor positioned at the outside edge of the text I can just click and drag upward until the text flips upright. Here\u2019s what it looks like now:<\/p>\n\n\n

\n
\"Bottom<\/a><\/figure>\n<\/div>\n\n\n

It looks great except now the text appears to be squished together more than the top text. But this is an easy fix.<\/p>\n\n\n\n

Spacing Bottom Text<\/h3>\n\n\n\n

Next, I\u2019m going to double-click on the new text layer which opens the Text tool options and the entire word is highlighted. I can do one of two things at this point. I can just add a space between each letter of the word or I can change the tracking value.<\/p>\n\n\n\n

I first tried adding an additional space between each letter. I thought it looked like too much space as compared to the top text. So, I adjusted the Tracking for the whole word a bit at a time. I ultimately ended up with a tracking value of 200 and I think it looks just right:<\/p>\n\n\n

\n
\"Bottom<\/a><\/figure>\n<\/div>\n\n\n

And there you have it. A lovely circle image with text around, all of which is right side up!<\/p>\n\n\n\n

Text On Other Shapes<\/h3>\n\n\n\n

This process will work well on most simple shapes such as squares, rectangles ovals & maybe even diamonds. To use a different shape all you have to do is select the Custom shape tool and pick a pre-loaded shape. You can also create your own custom shape if you need something unique.<\/p>\n\n\n\n

I wouldn\u2019t recommend trying to use this process on more complicated shapes such as stars, hearts or arrows. But you can certainly play around and see what shapes work best for you.<\/p>\n\n\n\n

Here\u2019s an example of text around a photo (from Pixabay<\/a><\/strong>) that I created using the process described above.<\/p>\n\n\n

\n
\"Square<\/a><\/figure>\n<\/div>\n\n\n

Notice this time there\u2019s a bevel added to the text. Once you have your text all situated you can add whatever styles you\u2019d like.<\/p>\n\n\n\n

I hope you have some fun playing with putting text on a shape.<\/p>\n\n\n\n

Additional Tips For Text On Shapes<\/h3>\n\n\n
\n
\"Have<\/a><\/figure>\n<\/div>\n\n\n

In general, when you type text on a circle shape the text alignment should be set to centered. For some other shapes you may find that left justified works out better.<\/p>\n\n\n\n

Some shapes just don\u2019t lend themselves to the application of text on a shape. Try to use simple geometric shapes when using this technique.<\/p>\n\n\n\n

Be careful what font you use. Fancy fonts (especially some scripts) can make things a bit more challenging. It\u2019s best to work with simple fonts (some scripts work) basic Sans Serif fonts tend to work the best. But feel free to experiment with other fonts to see how they work on your image.<\/p>\n\n\n

\n
\"Text<\/a><\/figure>\n<\/div>\n\n\n

You can also experiment with the Text on Selection tool. This allows you to select a shape in a given image and add your text around that shape. This can become complicated very quickly depending on the shape you\u2019re trying to select. Take your time and remember you can always add to or subtract from your selection to get the shape you want.<\/p>\n\n\n

\n
\"Text<\/a><\/figure>\n<\/div>\n\n\n

Text on a custom path is another option. But it can be very tricky if your path is very jagged.<\/p>\n\n\n\n

For these other text tools, it is usually best to set the text alignment to left justified.<\/p>\n\n\n\n

As always, if you have any questions or want to make a suggestion about a topic you\u2019d like me to cover, please don\u2019t ever hesitate to \u201cMessage Me<\/a><\/strong>\u201d.<\/p>\n\n\n\n

Thanks for reading this week\u2019s Tuesday Tip. <\/em>If you want to stay informed about new posts, just click \u201cFollow Me<\/a><\/strong>\u201d to stay in touch. I hope you have a wonderful week!<\/p>\n\n\n

\n
\"Stay<\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"

I\u2019m sure you\u2019ve seen text written around a shape. It\u2019s a very regular occurrence on things such as logos. All you have to do is search for \u201cCircle Logos With Text\u201d to see how many are out there. Have you ever tried writing text around a shape in a layout only to find it\u2019s not working out great? A lot of people struggle with getting the orientation of the text to mimic what you often see in those logos I…<\/p>\n

Read More Read More<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":5027,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_wp_convertkit_post_meta":{"form":"0","landing_page":"","tag":"0","restrict_content":"0"},"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tuesday-tip-day"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/posts\/5028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/comments?post=5028"}],"version-history":[{"count":0,"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/posts\/5028\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/media\/5027"}],"wp:attachment":[{"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/media?parent=5028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/categories?post=5028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yourscrappingcafe.com\/home\/d19521157\/public_blog\/wp-json\/wp\/v2\/tags?post=5028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}