Interface Design / Tabs/Bars & Buttons pt. 3
Subtitles of the Movie
Now what we want to do is put in some buttons here. I've decided that in my interface that every single layout that's going to look like this, whether it's contacts or invoices or products, is going to have a row of buttons here that you can click on that do certain things for this particular section. So we'll come down here and we'll scroll down until we see the right button and the correct button looks like is this one down here. There's a lot of them in here but I like this one in particular right there. So we'll drag that in there, drag this in there as well and then we'll come back to the FileMaker Reference and get this one. There we go. That looks pretty good. And we'll drag this out there because we want this button a little bit longer so we'll duplicate again, get these right next to each other and looks like we need it one pixel over. There we go. After you've done this a while, you get practice, it's easier to do. There you go. Get that just right. And then we'll move this one over. Now, that one is already hiding that red part that was on the end and the reason for that is because this duplicated piece goes on the layer above it. This one's on the layer below this piece right here but since I duplicated after this was put on there, this piece is on the layer above so it already hides it. So we'll go ahead and we'll group that, we'll move that just about where we want it. Right there looks pretty good and then I'll duplicate it, 123456, move it over and we'll get it just about where I want it and then 3456 buttons is what I want. Now, I want them to be evenly distributed across this whole area so what I'm going to do is I'm going to move this over, get it right about where I think is right and then here's a little technique I use to make sure they're the same distance from each piece. I'm going to go and draw myself a little rectangle. I'm going to make sure it's red so I can see it really well, get it just about the same, right size and move it in there. In fact, I'm going to take the embossing off because that really messes me up. I want just a solid red rectangle here and I want to get it right on the edge here and then resize it so it's right on the edge here and we'll move it one pixel over. There we go. It takes a little practice. Once you get it perfectly there and it looks like you want it to, then you move it over here and make sure it looks exactly the same. And you can see I need to move it one more over it looks like. There you go. Now I've got them exactly the same distance from both edges. Now I can select everything here. I'm going to shift click on it and we'll go to a range and distribute and distribute horizontally. Now they're all perfectly right down the center here. Now, if you didn't like the amount of space here, it's more than here, well, then you can mov these in, you know, 12345, 12345, go for that arrange choice again and keep doing it until you get it perfect and that is a little bit more suitable. I like the distance there. It looks nice. It's pleasing to the eye. So let's go back to Browse Mode here. We'll hide this, click on that and now we've got a pretty good looking interface. It's got a lot of the elements we're going to use on every layout. We're not quite done yet but it's a painstaking process but once you get all these buttons done, all these tabs done and all this, you can just simply Copy and Paste this to another layout or duplicate your layout. So spend a lot of time on this one layout. Make it perfect and then you can make all of your layouts perfect and make it look really professional because when things aren't lined up, things aren't organized, they just don't look right and it looks like an unprofessional solution and people will notice that, even if they can't point to exactly what's wrong, they'll definitely notice it and make it look really good and it's not that hard. Spend 20, 30 minutes, maybe an hour or maybe two yours getting your one layout right and it'll pay off in the long run for you.
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
United States 