Home
Username:
Password:
FileMaker Pro 10: Intermediate Tutorials

Interface Design / Background pt. 2

Subtitles of the Movie

So we're going to put this one in the lower, left-hand corner and this one in the lower, right-hand corner as low as we want it. So let's say this is exactly the size we want. The body part's perfect and this is perfect. In fact, we might go back to Browse Mode just to make sure. Make sure it all fits on here and you can see that it will fit on the screen right now. May not be perfect, but it's what we're going to work with right now. And then what we're going to do is we're going to take and put this piece down here. And we're going to make sure, you see this little sliver there, we're going to make sure it's perfectly aligned right there and then we're going to duplicate this. Now, if we duplicate it, what's going to happen is it's going to move six pixels down and six pixels to the right. And it'll resize our body part. Since we don't want that to happen, I'm going to take it, all these pieces, move them up a little bit and then duplicate it. Now, we're going to use a really nice feature to make sure that we don't have to keep doing duplicates. It's going to take a long time to do it. There's a feature called Smart Duplicate and the key is not deselecting the duplicated object. So you can either move it with the mouse or use your keyboard arrows and get it in just the right spot and then the next time you duplicate, it's going to offset not six by six, by exactly how much you moved it. And the key again is not deselecting the graphic. So we can keep duplicating here. In fact, I'll use the keyboard command so it goes faster and you can see how fast you can build a nice little interface here. Move it all the way across and once we get there, the last piece we'll have to move back a little bit. There we go. Move it a little too far. There we go. Perfect. Now we can move this back to where we want it, get it right down there and now it's time to put these pieces on there. So you can see this process again. Now, you'll notice that this piece is a little bit wider than that. That's no big deal because we have the background filled with gray and move this over to match that one and then move this one down a little bit. That looks good. Come down here and match this one up. I can actually Smart Duplicate two at once. Might as well do that, save ourselves some time. Now they're both perfectly there. We'll select both of these, duplicate, 123456, move it up like that and we're almost there; a couple down and now we can Smart Duplicate with the keyboard command and you can see how quick it was to produce that interface. Now we have this background image. Now, again, offline what we're going to do is we're going to make this bigger to fit the screen for an 800 by 600. But if you're designing for 1024 by 768, well, you design the screen to be that size. It's all up to what screen resolution you want to work with. So you should practice with this but don't be surprised when you come back in the next section if you see that the interface is bigger because offline I'm going to make it fit this 800 by 600. It's a very painstaking process and you should spend a lot of time with it because once you get one layout perfect, you can replicate it and use it for all the other layouts that you're going to create. You could have hundreds of layouts so make it perfect on the first one and then you can replicate it for the rest of them.

Tutorial Information

Course: FileMaker Pro 10: Intermediate
Author: John Mark Osborne
SKU: 33926
ISBN: 1-935320-19-X
Release Date: 2009-01-05
Duration: 15 hrs / 177 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 81,350 Video Tutorials (20,800 free)
  • Video Available as Flash or QuickTime
  • Over 782 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available