WhiteTiger
Programmer
I've looked ALL OVER for a tutorials on making vector based bevels...I can't find one...does anyone here know a good way to either make some sort of mask for a bevel, or anything?...the beveling I'm doing is kinda small too...
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Bevel Trick...needed. 5
- Thread starter WhiteTiger
- Start date
- Status
-
1
- #2
Typing making vector based bevels at turns out a lot of stuff!
;-) If you're stuck with lemons... Make lemonade!
;-) If you're stuck with lemons... Make lemonade!
- Thread starter
- #3
WhiteTiger
Programmer
I just thought of something, couldn't I do like a trace bitmap type thing?...
Also, what are some of the explainable settings to the trace bitmap function?...I can't ever get it down just right.
Also, what are some of the explainable settings to the trace bitmap function?...I can't ever get it down just right.
-
2
- #4
Hi White,
you could do the "trace bitmap" thing but I've never realy had much luck with that either.
You can do bevels with flash by using gradient fills, converting "lines to fills" and using gradients there too. It is a bit tricky but once you get the hang of it it's not too bad. roda B-)
Learning is like rowing against the current. As soon as you stop, you start going backwards.
you could do the "trace bitmap" thing but I've never realy had much luck with that either.
You can do bevels with flash by using gradient fills, converting "lines to fills" and using gradients there too. It is a bit tricky but once you get the hang of it it's not too bad. roda B-)
Learning is like rowing against the current. As soon as you stop, you start going backwards.
-
1
- #5
Hi White,
I have not found any diffinitive way of producing vector based bevels in flash, other than the hard way, I think there are 3rd party programs around, but if, like me, the required graphic does not justify the cost..
I have just done a quick demo, on a simple shape, it may or may not help you..if it does or it is a similar effect you are after I will e-mail you the fla..It's all to do with deception, if you can introduce a small extra to the graphic, it all helps with the illusion..
hope it helps, or perhaps give me an idea of what you require...
John
I have not found any diffinitive way of producing vector based bevels in flash, other than the hard way, I think there are 3rd party programs around, but if, like me, the required graphic does not justify the cost..
I have just done a quick demo, on a simple shape, it may or may not help you..if it does or it is a similar effect you are after I will e-mail you the fla..It's all to do with deception, if you can introduce a small extra to the graphic, it all helps with the illusion..
hope it helps, or perhaps give me an idea of what you require...
John
Thanks Vert,
I like the flash interface for graphics, what a great program, it's that darn coding that gets me me down, I'm a bit long in the tooth, I keep reading, but when I see Dave's work, it blows me out...I will just have to keep on in there...Hi...
I have just added another bit to the above link, just guessing what Tiger wants...
Thanks again
John
I like the flash interface for graphics, what a great program, it's that darn coding that gets me me down, I'm a bit long in the tooth, I keep reading, but when I see Dave's work, it blows me out...I will just have to keep on in there...Hi...
I have just added another bit to the above link, just guessing what Tiger wants...
Thanks again
John
- Thread starter
- #9
WhiteTiger
Programmer
Ahh, well, good work, but the thing I want, is basically just on a complex button...I have a slight grey border around it, and need the border beveled...how do I convert lines to fills?...'cuz that would help me a LOT...then all I would need to do is make a gradient for the bevel.
Hey White, Modify/Shape/Convert Lines To Fills. Select the lines you want to convert then do the above.
roda B-)
Learning is like rowing against the current. As soon as you stop, you start going backwards.
roda B-)
Learning is like rowing against the current. As soon as you stop, you start going backwards.
-
1
- #11
Hi White,
What type of button are you trying to produce? You can make a v. simple bevel effect using the old Windows 3.1 stylee...
1) Draw a box in, for example light grey.
2) Make the bottom and right out-line lines dark grey.
3) Make the top and left out-line lines white.
4) Make your movie background light grey.
Ta da! One simple beveled button.
=)
PetitPal.
p.s. Obviously you can use different colours and different shapes; it all works the same; just pick a light source area (normally top left) and then light / shade as required.
p.p.s. The other advantage of this technique is that it keeps the swf file size down as there's no complex fills used...
What type of button are you trying to produce? You can make a v. simple bevel effect using the old Windows 3.1 stylee...
1) Draw a box in, for example light grey.
2) Make the bottom and right out-line lines dark grey.
3) Make the top and left out-line lines white.
4) Make your movie background light grey.
Ta da! One simple beveled button.
=)
PetitPal.
p.s. Obviously you can use different colours and different shapes; it all works the same; just pick a light source area (normally top left) and then light / shade as required.
p.p.s. The other advantage of this technique is that it keeps the swf file size down as there's no complex fills used...
Hi White, you are nearly there, do not use lines..
a> for bevel on all edges, produce 4, gradiated rectangles or boxes joined together as long as they meet at the corners, the width of each will produce different depth's of bevel with adjustment to the gradiant, great effects can be had..the joining lines can be edited out after...
b> simpler, just produce a gradiated box, with or without
boarder slightly larger than the button center.
in both cases they want to be in the lowest layer of your button graphic..
Yours
John
a> for bevel on all edges, produce 4, gradiated rectangles or boxes joined together as long as they meet at the corners, the width of each will produce different depth's of bevel with adjustment to the gradiant, great effects can be had..the joining lines can be edited out after...
b> simpler, just produce a gradiated box, with or without
boarder slightly larger than the button center.
in both cases they want to be in the lowest layer of your button graphic..
Yours
John
Hi again White,
You may want to have a look at this tutorial, it's very simple but with great FX for beveld buttons.
roda B-)
Learning is like rowing against the current. As soon as you stop, you start going backwards.
You may want to have a look at this tutorial, it's very simple but with great FX for beveld buttons.
roda B-)
Learning is like rowing against the current. As soon as you stop, you start going backwards.
Hi, seems like bevels are in, must be the weather..hi
another bit of info, after a re-think, burning smell.....
I have just been playing around with different ways of getting the bevel on a square button, anyway's here it is..If this is ok I will give you the rundown...
John
another bit of info, after a re-think, burning smell.....
I have just been playing around with different ways of getting the bevel on a square button, anyway's here it is..If this is ok I will give you the rundown...
John
- Thread starter
- #15
WhiteTiger
Programmer
I found out pretty much the good way to do it...took the border of my button (COMPLEX button!) and seems that I can just move the lines away from the edge, break them up, then add a bevel gradient...then move them back onto my button...should save me a LOT of work...
- Thread starter
- #17
WhiteTiger
Programmer
Yea, it helped a lot...I had to end up breaking up the lines individually 1 at a time, then using a gradient on each line...I have yet to tweak the gradient, but it looks ok...kinda. The only problem I have now, is the ends of the lines, running over each other, and if I cut it down, the gradients all mess up...weird, but I'll fix it. Oh, and the button had a look like this:
____________________________
/ | |
\______________ |
\_____________/
____________________________
/ | |
\______________ |
\_____________/
Hi again,If you are using 90 deg corners, square buttons..etc, do as a joiner does..hi, splice at 45 deg and gradiate each according to there joint or secondly,leave a small gap at the joints and put a mask below the layer, then all joints will have an angled line, rather than horz or vert line..please look at the sample I posted earlier to see..thats how that was done in the right button, the left was the former effect..they were abit rushed but you get the picture, scus, the pun......
yours
John
yours
John
hi White,
I have just done a small tutorial of what I mean, this will allow you to constuct all the button bevels you want and of your design...it's not fancy, you will get the effect I was trying to explain a lot better......
Good Luck
John
I have just done a small tutorial of what I mean, this will allow you to constuct all the button bevels you want and of your design...it's not fancy, you will get the effect I was trying to explain a lot better......
Good Luck
John
- Thread starter
- #20
WhiteTiger
Programmer
I'm not doing a normal button...there is not a single 90* angle in any of my buttons...that's where all of you keep mistaken...its a button kind of with a bottom tab, the ascii picture didn't turn out like I had it, but I'll post something on how I did it...but thanks for the help...the convert lines to fills helped out a lot.
- Status