🎁 FREE browser extension to grow your YouTube channel:
https://www.tubebuddy.com/davidlindgren1989
Let's say you have a text with a background, but you want the background to automatically change size when you're changing the text. In this video, I'm going to show you how you can achieve this using a text layer and a shape layer.
First, create a shape layer by right-clicking in the timeline window, go to "New" and click "Shape Layer". Then draw out a shape in the composition window. You can adjust the size and color later.
Now, create a text layer by right-clicking in the timeline window, go to
"New" and click "Text Layer". Type a word in that text layer so that you can see it in the composition window. Make sure the text layer is placed above the shape layer in the timeline window.
Now go to Shape Layer, Contents, Rectangle 1, Rectangle Path.
Here, you want to add 2 expressions.
Hold down alt or option while clicking the stopwatch next to "Size".
Copy and paste the "Size-expression" from the video description below into this text field. Replace the text that is already in there.
Make sure to change the example text to the exact name of your text layer. Notice that this is case sensitive, so use uppercase and lowercase letters accordingly.
Now when the rectangle size matches the text, we need to adjust the position of the rectangle.
If you want a center-aligned text, just drag the rectangle into place,
go down to "Stroke" and change "Stroke width" to what you prefer
and just set the stroke color to the same color as the rectangle itself.
Using a stroke will make sure the rectangle grows proportionally to the text, instead of exponentially to the text, as it would do if you just resized the rectangle. (And I will show another handy little tip at the end of this video.)
If you want a left-aligned text, you have to do 2 more things. First, select the "Text Layer", go to the "Paragraph" window, and click "Left align text".
The second thing you have to do is to go back to the Shape Layer and down to Contents, Rectangle 1, Rectangle Path, and Position.
Hold down alt or option while clicking the stopwatch next to "Position".
Copy and paste the "Position-expression" from the video description below into this text field and replace the text that is already in there.
Now just drag the rectangle into place, go to "Stroke" and change "Stroke width" as I should you before, and a bonus tip, if you want rounded corners, set "Line Join" to "Round join" and if you want it to be even more round, go up to "Rectangle Path" and increase "Roundness".
- - - - - - - - - - Expressions Used - - - - - - - - - -
SIZE:
s =thisComp.layer("Example123");
x = s.sourceRectAtTime(time-s.inPoint,true).width;
y = s.sourceRectAtTime(time-s.inPoint,true).height;
[x,y]
POSITION:
content("Rectangle 1").content("Rectangle Path 1").size/2
**********
RESOURCES FOR CREATORS:
📈 🧠 Want to become a better Content Creator?
Get resources, digital products, and BTS content here:
► https://Patreon.com/davidlindgren89
🎵🎞 Want music for your videos?
Get 2 extra months 🎁 of Artlist for free:
► https://artlist.io/David-121249
**********
GEAR I USE (AND RECOMMEND):
🚁 Drone: DJI Mavic 2 Pro ► https://amzn.to/37v7Hbw
💻 Laptop: Macbook Pro 15" ► https://amzn.to/2WqI7ic
Laptop stand ► https://amzn.to/3a8ufAh
Crisp device stand for laptop/ipad ► https://amzn.to/30Wku2T
🎧 Headphones: Doqaus ► https://amzn.to/3RjlSFV
🪝 Headphone-hanger under my desk ► https://amzn.to/3didCSp
⌨️ Keyboard ► https://amzn.to/2yW0N0i
🖱 Trackpad ► https://amzn.to/35W2nvj
📷 Camera: Lumix GH5 ► https://amzn.to/2YWMD9N
Lens: 14mm F2.5 ► https://amzn.to/2xZoHYA
Lens: 25mm F1.7 ► https://amzn.to/2zsSl8Q
Lens: 12-60mm F3.5-5.6 ► https://amzn.to/2YWoQqO
Budget tripod: Velbon M43 ► https://amzn.to/306ft7U
🎛 Stream deck ► https://amzn.to/2BDkETp
🎤 Wireless mic: Sennheiser AVX-MKE2 Lavalier Pro Set ► https://amzn.to/2WpXk2Y
🎤 Budget microphone: Takstar SGC-598 shotgun mic ► https://amzn.to/3Y0Mwpm
🎤 Condenser Microphone ► https://amzn.to/2T3CUuH
💡 Portable handy ringlight ► https://amzn.to/39ZfRu9
💡 Handy portable rechargeable lights ► https://amzn.to/40bjTY9
Handy adapters: USB 3.0 to USB C ► https://amzn.to/2WVgo8z
USB C Hub (all-in-one) ► https://amzn.to/2LqAnXe
Adapter: HDMI to USB ► https://amzn.to/2AsFfcp
Cable bag ► https://amzn.to/2WpVKyi
**********
📲 CONNECT WITH ME HERE:
► https://youtube.com/davidlindgren89
► https://facebook.com/davidlindgren89
► https://instagram.com/davidlindgren89
► https://twitter.com/davidlindgren89
► https://medium.com/@davidlindgren89
**********
DISCLAIMER: This video and description might contain affiliate links, which means that if you click on one of the product links, I'll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank You for your support! 🙏
(All links are my genuine recommendations.)
