4 ms·

(Web) design is hard. For us programmers, it's a pain in the ass, and when it comes to create UI elements for a (web) app, we are stuck with two choices: 1. c

(Web) design is hard. For us programmers, it's a pain in the ass, and when it comes to create UI elements for a (web) app, we are stuck with two choices: 1. create something very basic, or 2. spend countless hours searching the web for Photoshop tutorials on how to create a bubble or depth effect, then spend even-more-countless hours fighting with Photoshop to implement it, and finally, maybe adapt the image with some external tools to make it be a CSS sprite or whatever) Yes, 1. is not necessary a bad thing (HN is a good example :-)), but we all know that for most softwares, some attractive eye-candies are useful. Even GMail uses more than a simple <input type="button"> to display their buttons. So here comes Da Button Factory. It aims at making it easier to create pretty buttons, which are one of the key elements of an user interface (especially on the web), in an quick and human-friendly way (not tons of options/menus/concepts like in an image processing program). And because using plain image files on the web often sucks, it (will) provide solutions that makes good use of CSS. Currently it's just a beta. There is only a very simple CSS solution implemented. It may looks ugly in some browsers. Things are not polished. But I would be very glad to hear any comments of yours on this "draft". Do you find it interesting? Do you have any critics/ideas about it? Did you notice any bugs or problems? Oh, and I am french, so please excuse me for any grammar/spelling mistake in this post, and don't hesitate to correct me, of course :-)

exalo 18y ago
Good idea and seems to work well too. I'm not sure I'll be giving up Photoshop anytime soon, but this can definitely be useful for quick webapps and prototypes. It would be great if there was a "randomize" button so that one could quickly try out different styles with the same text. Two minor nitpicks: - Hovering over "Da Button Factory" makes the text yellow but isn't clickable - Your menu buttons at the top could use some adjusting so that the text is more vertically centered (in Mac FF). Great work!
alecco 18y ago
Excellent. How does it work? :)
- palsecam 18y ago
  The images are queried by Ajax to the server, where a Fast-CGI Perl script generates, caches, and sends the images. Javascript is used, obviously for the Ajax job, for some small visual effects, and to generate the CSS code.
  - kwamenum86 18y ago
    You should port this project to canvas. It may be tricky to get it working in all browsers but the response time would be much faster and the server load would be reduced. I'd be willing to help with the implementation- sounds like a really cool project.
    - palsecam 18y ago
      Yes, this would be a nice adding to the output formats. I don't think I'll implement that in the near future, but I keep it in the back of my head for later, and I'll contact you when the time has come :-) Thanks for the idea.
  - ralph 18y ago
    Slide the old button image vertically and put the new one in its place. I'd like to be able to compare the before and after. Also, while it's sliding, I'm distracted from waiting for the new one, but don't make me wait for the slide to finish if the new image is ready to display.
trevelyan 18y ago
If you're looking to improve the design of the site, you might be interested to know that the Chinese character for big is 大, pronounced "da4" (fourth or falling tone). The character is simple enough it should be easy to work into any site logo, and the meaning works well with your URL ("Big Button Factory"). Mandarin is also cool.
- palsecam 18y ago
  Oh thank you, so interesting!
- ahoyhere 18y ago
  > Mandarin is also cool It'd be even cooler if you skipped adding it to the site, and just tattooed it on your lower back.
- tel 18y ago
  It's definitely cool and nearly the first thing I noticed as well, but it'll confuse exactly everyone besides those with experience in both english and chinese.
  - sqs 18y ago
    True. Although I hope someday Mandarin will become second nature to lots of Americans, in the same way that Spanish "grande," "hola," etc., can be mixed with English to effect a certain attitude. Let's start with 厉害. Easy to pronounce and sounds like its meaning (at least to me).
    - pwk 18y ago
      我的汉语不太好, I needed to look up 厉害: http://www.nciku.com/search/zh/detail/%E5%8E%89%E5%AE%B3/1309342 http://www.nciku.com/search/zh/detail/%E5%8E%89%E5%AE%B3/130... Pretty neat site, along with looking up characters by typing or cutting and pasting you can draw them and it tries to guess what character you're looking for. What prompted you to start with 厉害?
  - patio11 18y ago
GavinB 18y ago
Un travail bien fait! I'd like to see some more font options. The stock web fonts tend to look a little stale because we see them in so many places. It would also make things slightly easier if there was a download button next to the web address--this might be tricky to implement but it would save users several seconds.
- palsecam 18y ago
  Merci ! Yes, I should definitely add more fonts, it's useful. But does anyone know if embedding open sources fonts is fully legal? And what about commercial fonts, i.e: Arial, Comic sans MS, etc.? It is quite difficult to understand the licences for my usage. For the download button: yes, I know it would be nice, I thought about it, but decided to delay its implementation, because as you say, it will certainly be tricky to make :-D It will come!
  - deleted 18y ago
    [deleted]
  - jrnkntl 18y ago
    For the button, just manipulate the 'href' attribute of the download button the same as you would update the textfield value.
  - GavinB 18y ago
    I would think that as long as you're not distributing the font file you should be fine. If you want to be safe, go for fonts that are distributed free, and provide credit somewhere on the site. If you stick to free or standard fonts, I think the worst that happens is that you have to take them down, especially since you're not charging for use. And whatever you do, don't use comic sans (http://bancomicsans.com/home.html http://bancomicsans.com/home.html).
  - cosmo7 18y ago
    Adobe would rather you didn't know, but fonts can't be copyrighted.
  - zaius 18y ago
ii 18y ago
1. More fonts. Lacuna is a first one that comes to my mind as a perfect free font for this kind of things. 2. Highlight curve should be more like sine wave, It looks really boring when it is like a bottom of ellipse -- a part of a sine curve would be a better approximation of real-world shinies.
richcollins 18y ago
This is pretty nice. I would like to see: 1. More Fonts 2. A color picker
- raptrex 18y ago
  i agree, add a color picker and maybe have all of the options on one side
peterhi 18y ago
Very nice. A colour picker would be a very good idea. Perhaps display two buttons, one for the ordinary button, as you are doing now, and one for a selected version. If you are feeling brave maybe animated buttons which cycle several lines of text. Not sure about the css version though. Do you really want all these people hitting your server?
pmjordan 18y ago
Looks very nice. Note that the preview produced in "CSS Background" mode doesn't seem to work in Opera. (9.6) Niche browser, I'll admit, but good browser support is not asking too much from a service like this.
- palsecam 18y ago
  No no, you are right, it is important, and Opera is not a niche browser in my opinion. I'll look ASAP at browser issues, but unfortunately I've currently no easy access to several OS/browsers :-/
patio11 18y ago
we are stuck with two choices There is always a third option: pay somebody to handle this for you. I like automated solutions as much as the next guy, but if you want quality and don't want to become a graphics design professional yourself...
alabut 18y ago
Nice! I am a web designer and even though I'll stick to using Fireworks (I'd rather create the entire layout than use a collection of dedicated tools) I can still appreciate that this attempts to solve a pain-in-the-ass issue for programmers. One small bit of advice - I'd pick a default welcome button that wasn't quite as jarring as the orange one. Something with a bit more of a muted color scheme that goes with the rest of the blue layout you have going on, like: http://tr.im/examplebluebutton http://tr.im/examplebluebutton Otherwise, very well done.
- palsecam 18y ago
  thanks for the example idea, you're right the current one is a bit ugly in the global theme! Nice to know a web designer appreciates it!
vl 18y ago
Very nice start, I had to do buttons for my last web app and ended up using less nicer tool. I suggest to add next two features which can be essential for some scenarios: 1) Add way to choose background color (i.e. page color) for the formats that don't support transparency (gif and jpeg). PNG gradient transparency is not supported in IE6 and quite often there is a need to render button edges with background color preset because of that. 2) Pre-render images for other button states: hoovered and pressed. And afterthought: consider supporting iPhone-style buttons (i.e. like big red "delete contact" button and small blue buttons), I'm sure a lot of people are looking for them.

exalo 18y ago

Good idea and seems to work well too. I'm not sure I'll be giving up Photoshop anytime soon, but this can definitely be useful for quick webapps and prototypes. It would be great if there was a "randomize" button so that one could quickly try out different styles with the same text. Two minor nitpicks: - Hovering over "Da Button Factory" makes the text yellow but isn't clickable - Your menu buttons at the top could use some adjusting so that the text is more vertically centered (in Mac FF). Great work!

alecco 18y ago

Excellent. How does it work? :)

palsecam 18y ago
The images are queried by Ajax to the server, where a Fast-CGI Perl script generates, caches, and sends the images. Javascript is used, obviously for the Ajax job, for some small visual effects, and to generate the CSS code.
- kwamenum86 18y ago
  You should port this project to canvas. It may be tricky to get it working in all browsers but the response time would be much faster and the server load would be reduced. I'd be willing to help with the implementation- sounds like a really cool project.
  - palsecam 18y ago
    Yes, this would be a nice adding to the output formats. I don't think I'll implement that in the near future, but I keep it in the back of my head for later, and I'll contact you when the time has come :-) Thanks for the idea.
- ralph 18y ago
  Slide the old button image vertically and put the new one in its place. I'd like to be able to compare the before and after. Also, while it's sliding, I'm distracted from waiting for the new one, but don't make me wait for the slide to finish if the new image is ready to display.

trevelyan 18y ago

If you're looking to improve the design of the site, you might be interested to know that the Chinese character for big is 大, pronounced "da4" (fourth or falling tone). The character is simple enough it should be easy to work into any site logo, and the meaning works well with your URL ("Big Button Factory"). Mandarin is also cool.

palsecam 18y ago
Oh thank you, so interesting!
ahoyhere 18y ago
> Mandarin is also cool It'd be even cooler if you skipped adding it to the site, and just tattooed it on your lower back.
tel 18y ago
It's definitely cool and nearly the first thing I noticed as well, but it'll confuse exactly everyone besides those with experience in both english and chinese.
- sqs 18y ago
  True. Although I hope someday Mandarin will become second nature to lots of Americans, in the same way that Spanish "grande," "hola," etc., can be mixed with English to effect a certain attitude. Let's start with 厉害. Easy to pronounce and sounds like its meaning (at least to me).
  - pwk 18y ago
    我的汉语不太好, I needed to look up 厉害: http://www.nciku.com/search/zh/detail/%E5%8E%89%E5%AE%B3/1309342 http://www.nciku.com/search/zh/detail/%E5%8E%89%E5%AE%B3/130... Pretty neat site, along with looking up characters by typing or cutting and pasting you can draw them and it tries to guess what character you're looking for. What prompted you to start with 厉害?
- patio11 18y ago

GavinB 18y ago

Un travail bien fait! I'd like to see some more font options. The stock web fonts tend to look a little stale because we see them in so many places. It would also make things slightly easier if there was a download button next to the web address--this might be tricky to implement but it would save users several seconds.

palsecam 18y ago
Merci ! Yes, I should definitely add more fonts, it's useful. But does anyone know if embedding open sources fonts is fully legal? And what about commercial fonts, i.e: Arial, Comic sans MS, etc.? It is quite difficult to understand the licences for my usage. For the download button: yes, I know it would be nice, I thought about it, but decided to delay its implementation, because as you say, it will certainly be tricky to make :-D It will come!
- deleted 18y ago
  [deleted]
- jrnkntl 18y ago
  For the button, just manipulate the 'href' attribute of the download button the same as you would update the textfield value.
- GavinB 18y ago
  I would think that as long as you're not distributing the font file you should be fine. If you want to be safe, go for fonts that are distributed free, and provide credit somewhere on the site. If you stick to free or standard fonts, I think the worst that happens is that you have to take them down, especially since you're not charging for use. And whatever you do, don't use comic sans (http://bancomicsans.com/home.html http://bancomicsans.com/home.html).
- cosmo7 18y ago
  Adobe would rather you didn't know, but fonts can't be copyrighted.
- zaius 18y ago

ii 18y ago

1. More fonts. Lacuna is a first one that comes to my mind as a perfect free font for this kind of things. 2. Highlight curve should be more like sine wave, It looks really boring when it is like a bottom of ellipse -- a part of a sine curve would be a better approximation of real-world shinies.

richcollins 18y ago

This is pretty nice. I would like to see: 1. More Fonts 2. A color picker

raptrex 18y ago
i agree, add a color picker and maybe have all of the options on one side

peterhi 18y ago

Very nice. A colour picker would be a very good idea. Perhaps display two buttons, one for the ordinary button, as you are doing now, and one for a selected version. If you are feeling brave maybe animated buttons which cycle several lines of text. Not sure about the css version though. Do you really want all these people hitting your server?

pmjordan 18y ago

Looks very nice. Note that the preview produced in "CSS Background" mode doesn't seem to work in Opera. (9.6) Niche browser, I'll admit, but good browser support is not asking too much from a service like this.

palsecam 18y ago
No no, you are right, it is important, and Opera is not a niche browser in my opinion. I'll look ASAP at browser issues, but unfortunately I've currently no easy access to several OS/browsers :-/

patio11 18y ago

we are stuck with two choices There is always a third option: pay somebody to handle this for you. I like automated solutions as much as the next guy, but if you want quality and don't want to become a graphics design professional yourself...

alabut 18y ago

Nice! I am a web designer and even though I'll stick to using Fireworks (I'd rather create the entire layout than use a collection of dedicated tools) I can still appreciate that this attempts to solve a pain-in-the-ass issue for programmers. One small bit of advice - I'd pick a default welcome button that wasn't quite as jarring as the orange one. Something with a bit more of a muted color scheme that goes with the rest of the blue layout you have going on, like: http://tr.im/examplebluebutton http://tr.im/examplebluebutton Otherwise, very well done.

palsecam 18y ago
thanks for the example idea, you're right the current one is a bit ugly in the global theme! Nice to know a web designer appreciates it!

vl 18y ago

Very nice start, I had to do buttons for my last web app and ended up using less nicer tool. I suggest to add next two features which can be essential for some scenarios: 1) Add way to choose background color (i.e. page color) for the formats that don't support transparency (gif and jpeg). PNG gradient transparency is not supported in IE6 and quite often there is a need to render button edges with background color preset because of that. 2) Pre-render images for other button states: hoovered and pressed. And afterthought: consider supporting iPhone-style buttons (i.e. like big red "delete contact" button and small blue buttons), I'm sure a lot of people are looking for them.