Creating Your Own Bookcase Wallpaper For Your iPhone

Get creative and build your own bookcase wallpaper for your iPhone using Keynote on your Mac. Then arrange your iPhone icons to fit nicely on shelves next to other objects using the new features of iOS 18.
You can also watch this video at YouTube.
Watch more videos about related subjects: iPhone (339 videos), Keynote (147 videos).

Video Transcript

Gary here from MacMost. Want to make your iPhone screen look like this. Let me show you how. 
When you see somebody's iPhone and it looks like this all it is is a custom made wallpaper built to look like a bookcase and the icons sit perfectly on it. Most of the time they just simply found one online that somebody else has made, downloaded it, and made it their wallpaper. I'm going to show you how to build your own because that is more fun and you can learn some graphic skills that you can use on your Mac and apps like Keynote and Pages.
The first thing you need to do is you need to capture your screen so you have, kind of, a template. You can see where the icons are so you can build a graphic that fits that. But you want to make one change here first. On iOS 18 you can take away the labels underneath the icons. That's kind of important for what we're making here. So let's go ahead and tap and hold in a blank area of the Home screen here and then go to Edit and then Customize. We're going to switch to the large icons and you can see how they're larger and they don't have those labels under them. Now that we've got the look that we want for the icons let's capture that. Most iPhones today Screen Capture is done by holding the side button and the volume up button at the same time and you capture it like that. Then that will automatically go into your Camera Roll and if you're using iCloud Photos you'll find that on your Mac. If you're not you can use some other technique, like AirDrop, to get it over to your Mac. 
So now on the Mac go into the Photos App and under Library the last item is that  new screenshot, which is right here, I can double click it and see it. I want to Export this so we can use it as a template. So let's go to File and then Export, Export 1 photo, just use JPEG, that's perfectly fine and none of the other options really matter. I'll export and I will stick it on the Desktop. Now here I've got it on the Desktop. I'll select it and use Command i for Info and one of the pieces of information under More Info is the dimensions. So 1170 by 2532. Now let's go into Keynote. I'm going to create a new document here. I'm just going to use basic black right here and I'm going to get rid of these text boxes here. Have a completely blank slide. I'm going to go to Document, on the right, and then go to Slide Size and choose Custom. I'm going to set it to that custom size. It's right here, 1170 by 2532 and then Okay. So now I've got a Keynote slide that is the exact size I need for a new wallpaper on my particular model of iPhone. It will most likely be different for whatever model you're using. 
The next thing I want to do is I want to bring in this image onto the slide. So now I can see exactly where the icons fall and I can make a graphic that looks like a bookcase that will hold these items. I'm going to select it here and I'm going to go to Arrange and  Lock. That means now I can't accidentally select the background and move it around. So now let's use Shapes to build the bookcase.
By the way, if you find these videos valuable consider joining the more than 2000 others that support MacMost at Patreon. You get exclusive content, course discounts, and more. You can read about it right here. 
I'm just going to use mostly rectangle shapes. So let's start here with a rectangle shape that will cover the entire area where I want the bookcase to appear. So I want it to go above the spot where the icons are, but not too high up close to this. So maybe something right about here. Then I'm going to go with the other end all the way to the bottom right corner, like this. Now I can't see what's underneath anymore. What I'm going to do is choose Format here and I'm going to change the Fill. Let's make it some sort of a nice bright color, like this yellow here. I'm going to click on the Color Wheel and I'm going to go down to Opacity here and I'm going to switch it to 50% Opaque. So I can see through it but I can clearly see where the shape is. Now I'm going to add more shapes to this. I'm going to add the parts that are cutout for the bookcase. So I'm going to create another shape and I'm going to use a Rounded Rectangle. I want those little curved corners at the top. So I create this rounded rectangle here and I'm going to drag that to one of the shelves here. I'm going to pay special attention to these badges. I left a couple of the apps with badges on them so I can see how far these go up. So I can make sure they don't break the illusion that these things are on bookcases. 
What I want to do is I want to place this so that the top of the hole, the cutout area, is just above that badge. Then I'm going to stretch the other part here, like this and I want to stretch the bottom here and then put it a little bit past where the icons are. I'm going to do the same trick here by setting the color to something else, let's say red, and I'm going to change the opacity to 50%. So I can see through them. I can still see the icons. I don't want the icons to sit directly on the bottom because I'm going to create a kind of 3D effect where they look like they are sitting back a little bit in the bookcase. So something about here. Now let's go ahead and I want to shrink this so it's not touching the edges. So there is some bookcase material to the left there. I'm going to shrink this. It's 1170. I want to make it 1130 and then I can move it over Shift and Left Arrow twice for 20 pixels over. So there's 20 pixels from the left and right side. 
Now I don't want it to be rounded on all four corners. Just the top two corners. So to do that I'm simply going to create another rectangle shape and I'm going to set it right at the bottom part here. It's going to Lock to the edges of the shape. So it's going to be really easy to add it to the bottom. I'm going to select both of these. Go to Format, Shapes & Lines, and I'm going to Unite Shapes. So now you can see it united those two shapes, the rectangle and the rounded rectangle and I only have rounded parts here at the top. Now I just need to duplicate this for all the different shelves. I can select this and an easy way to duplicate something is to hold the Option Key and Drag. I'm going to Hold the Option Key, Drag and it's going to kind of lock to the center there. You can see with the guides and the yellow line. I can bring it down and get it to be about the same place for this row of icons. Let's zoom in to see this clearer here. I can see whether or not it's about the same space below here, these icons, as it is here. Looks like I can be a little more. So I'm going to select it and use the Down Arrow key a couple times to get it perfect. 
Now I'm going to Option Drag and do it again and it will not only lock to the center there but it will kind of lock to making it the same gap amount. This gap and this gap the same. So I can very quickly and easily create all of these and I'll go to the next one here as well, like that. Let's do this one up here. Option Dragging up to create a duplicate. Now I've got all my cutouts for my bookcase here. Let's create another one but this one is going to go just underneath the little Search button which will turn into other things as well. It will be nice to have that. I need this to be a little higher. There's more of a gap there so I'm going to Control Click or right click or two-finger click on a trackpad here and I'm going to make Editable. Now I can Edit all these points. I'm going to drag a box over just the top points and then I'm going to use Shift and Up Arrow to drag those points up until it's about right. Something like maybe this. I'll just do Single Arrows up to get it about there. So I've altered the height of this without changing the curve here which is what would have happened if I would have just dragged this and stretched the whole thing. So I've got this. 
Let's also create a rounded rectangle to fit in here. So take a rounded rectangle, let's go and make this a red and also a 50% and let's put it right here where it kind of fits in and we'll put it like here. Then I want to grab the green dot and change the curve amount. So it's about right. I'm going to have a cutout here for the kind of dock part of the screen. Now I've got all of this and it looks pretty good. But it is just a bunch of shapes now. Let's go and combine all these shapes. I'm going to select everything. Command A to select All. But Shift Click to de-select the background there even though it is locked you can still select it. Now that I only have Shapes selected I can go in to Format and Shapes & Lines and instead of before we used Unite Shapes, I can subtract shapes. So the things on top are going cut holes on the ones on the bottom. There we go. We cut holes through all of this. Now our shape looks like that. 
Let's go ahead and add a background that's behind this. So, of course, a bookcase has a backing to it. Let's go and just add a rectangle shape like this and let's have it, kind of, match. It will snap to the sides of this shape here. Then I'm going to Arrange and Send Backward and it will be behind there. Now we've got that. Let's go and apply texture to it. So this is my first external graphic here. This is a graphic I downloaded from a ClipArt site. It's a tile of a piece of wood. What I'm going to do is with the bookcase part selected, so this part selected, I'm going to go to Format, Style, and change the Fill to an image fill. Then I have the tile here. I'm going to Drag & Drop this tile right onto that. You can see it puts the woodgrain there. I'm going to change it to Tile and then I can scale it up or down. I'm going to scale it to 50% I think works really well for this. Now if we look in here we can see there's the woodgrain. That's really nice. But I'm also going to select the background here. The white part, right. I'm going to do that same thing. But I'm going to do Advanced Image Fill. It's going to select the same tile there because it is the last one we used. I'm going to choose a color here and make it this darker color. So it is going to be this darker background. But you can see it is still the woodgrain, just tinted darker. I want to also add a shape here, a box, that goes behind the top part. I'm going to change its color to black. So there we go. That will be part of our graphic here now. 
Next thing I want to do is add depth. Let's zoom in again a bit here. Even more than before. What I'm going to do is create a rectangle shape. I'm going to place it perfectly so it fits in just like this. Like it's the part of the shelf that you would see, like that. But i'm going to set the style to a Fill with a gradient fill. You can see it goes from one color to another. I'm going to set both of these to be black. So like that. But, for the top one I'm going to use the Color Wheel here and I'm going to set the Opacity to be something like 50% and for the bottom one I'm going to set the Opacity to be much less, like 10%. So you can see like that. Because at 50% and 10% it actually is going to still let some of the background color through. So it will get some of that woodgrain. I'm going to Option Drag that and add that to all of the different shelves. So now you can see the nice effect that I created now. It's got some depth to it. Remember we place these icons up a little bit above the ledge there so now they'll look like they are set back a little bit in the bookcase. 
Now, let's add some ClipArt elements to it. So I have some other ClipArt elements like this. These are just some things I got from a website. You can draw your own. You can find some others. I'm going to drag them here to the side to make sure that I'm not actually dropping them into one of these shapes. Once I've got them there I can arrange them and put them in different places. So I'll just size them up to get them right and place them all. One thing you can do with these to make them looking better is select them all. Just Command Click them all to select and you go to Format and then Shadow and add a drop shadow to them. There you go! Just continue to customize as much as you like. Like maybe change the shading on things. Add different elements. Keep in mind where the icons are. This is going to remove one icon. This is another. This is two and this is two right here. Maybe you want to make this a darker color or do something else with the bottom. You can just play around with  it as much as you want. I've left this space here totally open for the dynamic island and the time and Wi-Fi signal, all that stuff to just be some kind of outside the bookcase but you can put items here that would contain those as well. Like maybe even a little digital alarm clock that shows the actual clock time in its blank space in the middle. 
Now that we are done we can Save this and then I'm going to export. So I'll do Export To and then Images. Then I'll choose Format PNG to get the best quality. Save it Out. Then I'll just save it here to the Desktop. Note that when you save it to the Desktop from Keynote you get a Folder, like this. In the folder is the image, like that. So I'm going to take this and I'm going to Drag & Drop it into Photos. Now we go back to the iPhone and finish up.
So in the iPhone we'll go into Settings here and we'll go to Wallpaper. We have our current wallpaper here. Anything else we have created would be over here. I'm going to create a new one and I'm going to tap on it like this. I'm going to select Photos. I'm going to first choose a photo that is for the Lock Screen. So I'll just choose this one. You can choose anyone you want. Then I can customize the Lock Screen. I'll add it here and you'll see it will add it as a wallpaper pair. But I'm going to say, Customize the Home Screen. Now for the Home Screen I'm going to choose another photo. I'm going to choose the new photo that I added, My Graphic, like that. Now you can see it adds it. Then I click Done and then I'll click Done again to finish with Wallpaper. I'll go back Home here and you can see now the wallpaper is in place. 
Let's tap and hold and Edit and then Customize then switch to Large, like we had it before. Now you can see how they fit. So now it is just up to us to actually arrange things. This is a new feature of iOS 18 as well, being able to put these wherever you want. So it's a little tricky. I'm not going to lie here. It is tough to do this because if I were to take the Calendar App and try to put it here you can see how everything shifts in position. It doesn't leave a blank space. That's because everything from before, this starts at the top left, is kind of this list that's linked. It's only when you drag something out and away that it becomes detached from the old way of doing things. So what you're going to want to do is just drag things away as you need them. So let's put 3 icons down here. I'll just put Calendar, Contacts, and let's say Reminders down here. So let's get some things off of the screen. Let's put them on a second screen here. I'll do that. I'll get Passwords onto the second screen. We have got to make some room. So now let's put Reminders on here next to that and now let's get Voice Memos, let's say we'll put that on the second screen as well. I'll put Files here. Let's put Wallet here. We've got this whole space. Let's go ahead. We have to clear away from the Globe there. Let's put Podcasts on the next screen, like that. Let's take Maps and stick Maps down here. We'll take the App Store, we'll take TV, we'll take News and stick it down here. You can see how it is getting tricky. Like that we can put Notes over here. As long as we detach it from the initial list it stays. Now we've cleared everything away and everything fit nicely on the bookcase. We even have room for one more there. So let's go ahead and take Passwords from the second screen and put it there. Now we've got all of our apps on our new little bookcase and it all looks really nice and neat. 
So you can see how easy it is to just build whatever you want. Use whatever graphic's app you want. If you have Adobe Illustrator use that. If you want to use Pixelmator Pro to do it as a bitmap graphic you can. I showed you how to do it in Keynote because Keynote comes with your Mac and it's easy to use. There are even a lot of shapes that you might be able to use as items on the shelves. You don't have to build a bookcase that looks like mine. You can build anyone you want or some other thing like a brick wall with ledges. Whatever you want to do you can have a lot of fun with it and make a Home Screen that is uniquely yours while also learning some skills that you might be able to use in presentations and documents as well. 
 

Comments: 9 Comments

    Debra
    12 months ago

    I have been looking for a way to create my own iPhone wallpaper for a few weeks now. I found plenty to copy but I wanted to make MY own. Thank you for creating this video for all of us. You are a great teacher and that is coming from someone who taught for over 40+ years in kindergarten and first grade.

    Sheldon
    12 months ago

    Thanks bunches

    Ken
    12 months ago

    Thank you Garry, what a fantastic way to smarten and individualise my Home Screen and more, now I know how to do it, the door is open for some great creations for my family as-well as myself.

    Jonathan
    12 months ago

    Gary I have a highly remedial question. When I try to move clipart into the bookcase it comes with a background color for some files. This is true even when I use Remove Background multiple times in preview. Is there a setting or command that Im missing?

    12 months ago

    Jonathan: Remove the background and then select and copy the image with from Preview and paste into Keynote. If you just save it from Preview again as a jpg it will get a solid background again as jpg images have no way to have transparency.

    Jonathan
    12 months ago

    As always Gary thanks. This was a lot of fun!

    Jonathan
    11 months ago

    When I add the bookshelf as a wallpaper for my Home Screen it's magnified. When I crimp it to the correct size it's blurred on the top. What could I be doing wrong?

    11 months ago

    Jonathan: Not sure. Are you adding it as your Home Screen, not your Lock Screen?

    Jonathan
    11 months ago

    The Home Screen. I figured it out, when I pinched I went too far, after pinching all the way I let up on it a little so that it fit in properly.

Leave a New Comment Related to "Creating Your Own Bookcase Wallpaper For Your iPhone"

:
:
:
0/500 (500 character limit -- please state your comment succinctly and do not try to get around this limit by posting two comments)