How to create a metal bar with a gradient that has curves?
Can someone tell me how to create a metal bar just like the one below that has a gradient and also show how to create 90 degree angles (basically a U)? I can make a straight line that looks like that, but I can't get it to work right when adding the curves.
andy206uk posted this at 15:32 — 25th April 2005.
He has: 1,758 posts
Joined: Jul 2002
you have to create three peices. A horizontal, a vertical and a corner. Use a radial gradient for the corner peice and do the horizontal and vertical ones the usual way.
Andy
JohnSaunders posted this at 18:20 — 25th April 2005.
They have: 2 posts
Joined: Apr 2005
Hmmmm, I couldn't get it to work that way.
andy206uk posted this at 08:40 — 26th April 2005.
He has: 1,758 posts
Joined: Jul 2002
With a bit of effort I was able to create something nearly there in fireworks but it was a bit out. If you have photoshop, theres a tutorial here that might help you...
http://www.eyesondesign.net/pshop/segpipes/segpipes.htm
Heres my effort:
You can download the source png for fireworks here
Andy
FreshDezines posted this at 08:10 — 9th June 2005.
They have: 4 posts
Joined: Jun 2005
Actually in Fireworks ( I use mx 2004) you just make a square and then change the 'roundness' in the properties inspector anywhere from 0 to 100 to get whatever kind of curve you need. Then just mess around with the gradients.
FreshDezines.com - A wide array of templates for sale.
timjpriebe posted this at 12:57 — 9th June 2005.
He has: 2,667 posts
Joined: Dec 2004
As far as implementing in HTML, it just depends on exactly how you want to do it. If you want a dynamic width and height, you can do it exactly like Andy described, with three pieces. At least, that will handle one corner.
I personally have an example of something similar I did that has a variable height but a static width. You can check it out at havencomic.com
Here's the two images that did it for me:
From that second one, you can see that I'm somewhat of a minimalist. Smallest image height necessary for a repeating background.
If I'd wanted a variable width, I would have had one image for each corner, then one image to repeat for the bottom background (so it could be variable width), one for the top, and one for each side. That would end up being as many as 8 images. And that's not counting any header/title images.
Tim
http://www.tandswebdesign.com
Renegade posted this at 12:06 — 10th June 2005.
He has: 3,022 posts
Joined: Oct 2002
You know, you page will actually load fast if you made it something like, 50px, because of less CPU processing.
Loading four images takes less time than loading 200 of the same image...
timjpriebe posted this at 12:57 — 10th June 2005.
He has: 2,667 posts
Joined: Dec 2004
Are you sure about that? I would think that around 95% of the time, the bottleneck is downloading images from a website, not rendering them on the screen.
Tim
http://www.tandswebdesign.com
baldrick posted this at 18:20 — 9th June 2005.
He has: 388 posts
Joined: Apr 2005
Just while wore on the subject how would you do Andy's method with divs, i always give up and do it with tables.
I think you have to positon the divs relativly but i cant get the hang of it.
Renegade posted this at 09:00 — 11th June 2005.
He has: 3,022 posts
Joined: Oct 2002
Yeah, I'm pretty sure about that...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.