Create Stunning Text With Image Fill in Pages and Keynote

The new image fill feature of text in Pages and Keynote allows you to create some beautiful graphics with very little effort. In this tutorial you'll learn how to create a retro-style postcard image using some of your photos. You can apply a single image fill to all of the text or a separate image for each letter. You can post these graphics online or use them in documents or videos.

You can also watch this video at YouTube (but with ads).

Video Transcript: Hi, this is Gary with MacMost.com. Let me show you how to create beautiful text like this in Pages and Keynote.
MacMost is brought to you thanks to a great community of supporters. Join us and get exclusive content at MacMost.com/patreon.
Now to make this we need the latest version of Keynote or Pages. Keynote 9.1 and Pages 8.1. I'm going to use Keynote because it's a little easier to do graphics like this in Keynote. So I'm going to start with a standard template, white background, and I'm going to select the default text that's there and remove it. I'm going to also zoom out a bit so I can see the full frame. Then I'm going to start by adding text. So I'm going to click the Text button at the top here. Then I'm going to type the word that will be nice and bold in the middle. I'm going to select it all, Command A, and let's change the font. I like Helvetica Neue for this. I'm going to go to Condensed Black and I'm going to make it nice and big. 200 point. I want a font that's nice and thick so the image can fit inside of it. A thin font, of course, won't work very well for this.
Now that I've got that I'm going to set the Text Color. This is a new feature in Pages and Keynote in their last versions. I'm going to go to Image Fill. It's going to give me this default gray pattern here. I'm going to replace that with an image by dragging and dropping a jpeg from the Finder. So from a regular Finder window into here. I can also use that Choose button and it will drop it in. Already we're in business. We have a nice image here and the text looks great. Notice I'm using Scale To Fill which is perfect for this.
I'm going to continue by clicking on the Advanced Options button here and this will allow me to add an outline. I'm going to change the outline color to white and I'm going to increase it to 5 pixels. A nice white thick outline. Then I'm going to add a shadow. The shadow I'm going to increase the Offset to something like 10 pts. I'm going to change the angle so it's shadowing on the bottom right. Put a little bit more of a blur to it. Then I'm going to add a background on this. So I'll click out there and I'll can see what I've got so far.
I'm going to use Shape and select a square. I've got this square here. I'm going to drag it out of the way and then go to Arrange and send it back. So now it's behind the letters. So now I can stretch this and I'm going to stretch it so it's beyond the edge of the screen. I'll explain why later. I'm going to stretch it so it goes just above and below the letters there like that. I'll change it to a bit of a darker blue.
The next thing I want to do is have the letters kind of pop out a little bit. So I'm going to have just the first letter here be the larger. So I"m going to select just this C and change its font size to 280.  It's going to pop out of the top there because it's going to align with the baseline here at the bottom. So I'm going to go to Advanced Settings again and I'm going to do a baseline shift so I can move it up or down. I'm going to move it down at 20 pixels, maybe a little bit more, just so it looks like it's kind of centered. So you can see now how the C pops up and below the bar. Now I can adjust this so the rest of the letters are inside and the C goes above and below. I like how that looks.
Now I'm going to angle it. So I'm going to select the background and Shift select the text. So I have both selected. I can go to Arrange. There's a rotate setting here. I'm going to do an angle of 10 degrees. Now you can see why I needed this bar to go beyond the edges here because when I set it at an angle I would have some of the edge here, the corner, showing. So I like how this looks. Let's do something with the background here. 
I can go and click on the background and go to Format and there's Color Fill and I can select say an orange background like that. Add more text. Colorful Colorado. Just like that. I'll make that nice and big as well. I'll also make it the same font. I'll change the text color as well. I'll select that same blue. I'll set an outline here as well. I'll make that white. Not quite as big. About 3 pixels to fit the size of this font here. I'm going to Option drag it and make a copy. Here I'm going to make this a little smaller and I'm going to position this here at the bottom right corner. This at the top. So I think this is pretty decent looking. I can hit the Play button, because this is Keynote and it's going to think this is a slide show, and it gives me this full screen view of it so I get a good idea of what it looks like with the edges cut off and everything. Now there's more I can do.
I can have a different image for every letter. So I'll leave the C alone but I will select the O and I'll drag another image into here. So I'll just drag this one in here and I've got one in there and I'll do that for each letter. I can add an image to the background as well. So I'm going to drag an image here and just put it in as a normal image that will fill this space. I'm going to select it and I'm going to Arrange it and send it back. It's a little overwhelming so one trick I like to do is do another shape here. I'll just take this square. I'll set that to fill everything and I will send that to the back. But then I will bring it Forward one. So not Bring to Front but bring it Forward. Then I'll take this and set its style to white and change how opaque it is here. So the text still stands out. Then I get something like this. We can see how that looks by hitting the Play button as well.
I think I kind of like this one a little bit better. But whatever you end up with you've got lots of options now. You can go to File, Export To and export an Image. You can use that image say posting it online. You can use it in a document. You can use it in a video as well.
Now what you can't do is you can't curve the letters. You can't make the letters pop out like 3D and you can't do a lot of different things with the text that you can do with more advanced apps, say PhotoShop or Illustrator, or something. But this was quick and easy to do and it didn't take any additional software. Plus since this is in Keynote I can actually build this over a series of frames and then have it animate. So I have each thing draw and popup on the screen. That can make for a really interesting opening sequence for a video.

Create Stunning Text With Image Fill in Pages and Keynote

Comments: 4 Responses to “Create Stunning Text With Image Fill in Pages and Keynote”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information