Interface Design / Sub-Areas pt. 2
Subtitles of the Movie
And we'll just start off in the upper, left-hand corner here. I'm going to move [`00:00:05] this right over here and we'll show the status area. Now, these are kind of [`00:00:09] small, just hard to tell with it right next to each other. I'd recommend zooming [`00:00:13] up, like this and in fact, you can go back down to 100 without having hit that [`00:00:19] and go back to 400, switch between them. What you want to realize is if you [`00:00:22] click somewhere and then zoom, it goes right to that spot. So the last place you [`00:00:27] clicked is where you zoom. So I'm going to be going in and out of the zoom 400 [`00:00:31] and 100 a lot and I want to make sure you understand how to use this successfully. [`00:00:36] So we'll move that over one. Looks perfect. And we'll duplicate it and from here on [`00:00:42] in I'm going to use the keyboard command. So one, two, three, four, five, six. [`00:00:46] One, two, three, four, five and quite a few more actually. I think I got it right [`00:00:51] there. Now we can smart duplicate. But I'm going to do it in a hundred percent. [`00:00:55] So duplicate and get it going all the way across here. That looks pretty good. [`00:01:01] We'll match this up. In fact, I just clicked there, so I'll zoom back up. Make sure [`00:01:06] that's in the right spot. And it looks perfect. Zoom back down, find this piece [`00:01:11] and put it right up in there. Zoom back up to 400. There we go. Move it over a [`00:01:17] little bit. And then we'll duplicate it. One, two, three, four, five, six, all [`00:01:23] the way down here. And we don't have to zoom out to duplicate. Smart duplicate [`00:01:27] we can just go like this and scroll as we go along here. Get it just about right. [`00:01:35] Move this piece into place. Get it just right. And I'm going to zoom back out and I [`00:01:43] want to make sure it's just about right. That looks like it's going to give us [`00:01:45] enough room there. And we'll zoom back in there, get this piece and go over here [`00:01:53] and put it right in the spot. There we go. We'll duplicate that, move it six [`00:02:00] pixels up and move it across until it meets up. There we go. Smart duplicate. [`00:02:09] I'll zoom out this time. There should be the same number of rectangles there and I [`00:02:14] think I've got it right here so we'll try matching this up. There we go. Zoom [`00:02:20] back out. Move that piece in there. Move it one down. So if you're good enough, [`00:02:27] you can do it in a hundred percent if you really look at the screen. So we'll [`00:02:30] duplicate that. One, two, three, four, five, six. Move it up. And I think I'll [`00:02:36] zoom in this time. Two down. Zoom back out. Smart duplicate. With all the luck [`00:02:42] in the world we'll match right up there and that's perfect. So now you can see [`00:02:45] how it's engraving this. If you go into browse mode, you can see how it [`00:02:50] separates that from everything else, all these fields go together and it's [`00:02:53] indented. It's the opposite of this. It engraves it inward. So that's a pretty [`00:02:56] neat effect. It gives you a lot of flavor to your interface here and makes it [`00:03:00] easy to realize where to go. But we still need some other stuff and we still [`00:03:03] really need to center this. So let's show you how to do that. So I'm going to go [`00:03:07] ahead and select all this, hold down the Shift key, select all this and then [`00:03:15] Shift key and select all that. And then one more time. Still holding the Shift key. [`00:03:20] And now I can group those. Now I can move it all as one piece, which is great. This [`00:03:25] is perfect for me and I want to get it just about centered here. That's looking [`00:03:30] pretty good. We'll leave it there. And then I think I'll move everything down a [`00:03:34] little bit so I'm going to select all this. And this reason I'm moving it down [`00:03:40] is because I want to get a little room up here to put the word billing. So we'll [`00:03:44] type in there billing. And make that a little bit bigger. And let's make the [`00:03:51] font size bigger. Fourteen sounds good and maybe even make it bold. Now we'll [`00:03:56] make it stand out there. That's looking pretty good. Now we need to make this [`00:03:59] text block a little bit bigger. And then we'll get it just matching up with that. [`00:04:03] I usually like to select the two objects to see if these little anchor points match [`00:04:06] up. That tells me it's right at the edge and that looks pretty good. So what am [`00:04:09] I going to do? Well, I might want to move these down a little bit. There we go. [`00:04:15] And then I might want to take this, duplicate it, one, two, three, four, five, six [`00:04:20] and then move it all the way across, holding down the Shift key after I start [`00:04:23] moving. And try to get in just the same spot. It's a little bit tricky. You [`00:04:28] might want to use that little technique I showed you where you draw a little [`00:04:32] rectangle from here to here and see if it's the same spot. So we'll try that again. [`00:04:37] Draw that rectangle. Get it right to that gray edge there I think is a good idea. [`00:04:42] I'll make it red. Ok, so that looks pretty good. Move it over here. And we need to [`00:04:50] move this a little bit more. And I think we got it just right there. And all we [`00:04:55] have to do is type in shipping and we got some pretty good looking interface here. [`00:05:01] Let's go to browse mode and check it out. And it's looking pretty good. We might [`00:05:06] want to center this stuff a little bit more. You see how this ones farther to [`00:05:09] the edge here. And when we come back, I'll have done that off line, I'll have [`00:05:12] made this just perfect in here. So it may look a little different than, this, [`00:05:15] uh, section right here, but, you know, there is a little fiddling. I, I [`00:05:19] constantly fiddle with my interfaces just to make them just perfect because when [`00:05:21] they are perfect, people aren't drawn to, well, that looks kind of off, you [`00:05:25] know, when things aren't lined up. Don't make them think about them. Make them [`00:05:28] think about how perfect your interface is. It just really makes it an easier [`00:05:31] time to work with your solution. Go ahead and perfect this just right and you'll [`00:05:35] see all those changes when you come back into the next section. [`00:05:40] [`00:05:41]
Tutorial Information
| Course: | FileMaker Pro 9: Intermediate |
| Author: | John Mark Osborne |
| SKU: | 33823 |
| ISBN: | 1-934743-30-5 |
| Release Date: | 2007-11-13 |
| Duration: | 10.5 hrs / 130 lessons |
| Work Files: |
Yes |
| Captions: | For Online University members only |
| 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
United States 