Subtitles of the Movie

The first step in recreating your interface, everything you see in front of you, at least the first step we're going to do is recreating the background, which is this area down on the right side, all the way across the bottom and then up the left side. And what we did was we went into Photoshop and created the entire interface. So we created a sample of this bar, this tab, this un-highlighted tab and even a button. We created all this stuff inside of Photoshop. So let's take a look at that. So here's a program that displays jpg. This Photoshop.jpg is on your work files folder. So you can grab this and use it just the way we're using it, if you want. You probably won't need to. So you can see we've recreated everything here. Just a sample of what it would look like, but we don't want to take this whole graphic and place it into our FileMaker solution because it's big and bulky. Instead, what we're going to do is take little Lego pieces. So we're going to carefully highlight just a little rectangle here. Any size will do that you want to use. And this may take you a couple tries to get it highlighted just right. Once you have it selected, we go to copy and then we'll move back to FileMaker. We'll go into our contacts solution, we'll go into layout mode and we'll simply paste. And there you go. There's our little rectangle and then what we do is we want to create a whole bunch of those down the left side. So we click on it and then we duplicate it and then you can use the arrow keys or your mouse. I'll use the arrow keys here because it's offset six to the right and six down. So one, two, three, four, five, six. And then a whole bunch down until you get it just right and if you move it too far, one pixel back up. And you can see, if we put a whole bunch of these graphics right in a row, it gives you that 3-D look. Now, you might be thinking right now, that's going to be a whole bunch of graphics. FileMaker stores the same graphic, whether it's copies and pasted or inserted, it stores it just once. So actually, a smaller graphic is going to take less space, even if you have a whole bunch of them, even if you have hundreds of them, it's going to take up less space than copying and pasting that whole graphic that we made in Photoshop. So this is a much better way to approach this. So what we're going to do is we're going to take everything we have on this layout, select everything and move it off to the right so that we can recreate this interface. So I'll do a select all and then I'll group and then we'll start moving it over to the right. We may want to use some of the elements still from this previous interface. So I'm going to move it off to there and now we're going to make our body part a little bit bigger so that it goes past this timestamp. And you'll see why in a second. So move it down there. See that we want to make it even farther down because we want everything to be inside the body part because we're actually going to get rid of the header and footer. So we move down even more. Move this down a little bit and now everything's contained within this body part. So we should be able to get rid of the header with the delete key. It's gone. And then we'll come down here and get rid of the footer. There we go. And now we can start recreating this interface. Now, I could copy and paste from that Photoshop, but I actually have a little tool I use in my own business that has all these graphics in the FileMaker database and this FileMaker reference file is included on the work files, but it's not unlocked. I'm going to use it to make things easier for me, but you're going to have to use the Photoshop.jpg to do this. So I'm going to go to my FileMaker reference. It's right there; go to the graphics section and then you can see all these graphics on a single record. Here's one record. Ok? So here's all the tab elements, all the pieces. And we'll see how those work together later. But let's scroll down until we get to the background. And here it is right here. So we're going to move this off to the right. I'm going to simply drag these in. There's the left side. There's the right side, the bottom, and if we move over a little bit more, there's the two corners. So I'm in browse mode here, in a container field, dragging into layout mode over here. It works great. So now all we have to do is move this down here, move this over here to where we want it to be. I'm not paying a lot of attention to where I'm putting them because it's going to take a lot of time to make sure you get these in the right spot so that it's the right size when you go to browse mode. And we'll cover that a little bit in the future, but we're going to show you how this actually works.