SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Glass, black buttons for black background?

    ButtonTemplate.png
    Hi all,

    I've been trying to create shiny (or glassy) looking black buttons for a black background. I'm not really into the whole "Web 2.0" trend, but I believe these will have much more aesthetic appeal than the buttons I currently have. The problem is, the background of the page is black as well and the images don't look so great on the page.

    I'm currently using GIMP because I don't have my PS software, and while GIMP is great, I'm lost on how to create the effects I'm looking for in this software. I've created some great looking buttons, but I just can't seem to make them look right with the black background.

    Does anyone know how to do this particularly in GIMP or know where I can find some open source Web 2.0 buttons that will do the trick? I've searched all over the next and found some tuts for GIMP but the effects still don't come out looking right. What I'm trying to accomplish is create a shiny black button with a sheen and nothing more.

    I've attached one of the buttons I'm talking about. The black in it gives the appearance it has an odd shape when placed on a black background because the gradient is going black to light, top to bottom. But when reversed, it merely changes the direction of the odd shape.

    Also, the button attached is freely able to be used if any of you like it's appearance

    Thanks for the help!

    P.S: The image uploader on this site is broken I think. It doesn't properly upload / attach images unless I use the *basic uploader*. The other two options always gives me an error.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    ALL CSS SOLUTION ( tweak colors, and gradient positions and add vendor prefix as necessary):
    Code:
    .button{ 
    color:#fff;
    background: -webkit-linear-gradient(top, #aaa 0,#000 60%, #555 100%);
    -webkit-box-shadow: inset 0 -1em 0 .2em rgba(0,0,0,.55);
    border: 1px solid #000;
    -webkit-border-radius:1em;
    padding:.67em;
    
    }
    for 100% cross browser , you can take a screen shot of the button created by this CSS, and then tweak in GIMP.

    Hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi dresden_phoenix

    Thanks for the help and while that does look good (and is an awesome implementation of CSS to create image-less buttons), it unfortunately does not fit with the rest of the page. Even tweaking in GIMP doesn't create the glassy button with a high sheen effect. What I need is an actual Web 2.0 button (either more square than the one I posted, or roughly the same size and shape) for the navigational bar.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,356
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Off Topic:

    What on earth is a Web 2.0 button? I've never heard of it before.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi TechnoBear,

    It's what they call those glossy, or shiny looking buttons that have a smooth, sheen look.

    Here's a link so you can take a gander at a tutorial on how to make them. If you scroll down, you'll see a few "demos" of a Web 2.0 button.

    http://iris-design.info/photoshop/web-20-style-buttons/

    Anyways, I figured it out on GIMP (the tutorial I posted wasn't used). It was a bit tricky, but I got it to work after messing with a few settings and whatnot.

    Thanks for the help!

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,356
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Thank you. I'm still not sure I really know what Web 2.0 means - but at least now I know how to make shiny buttons. Now I'm just wondering where I can use them...

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Anywhere you like, you're the designer .

    As for the Web 2.0 term, it's simply a technical term that was used to define "a new and improved internet". Basically, it was slang that caught on and a trend bandwagon that a lot - and I mean a lot of designers jumped onto because it was "innovative and cool" and pretty soon instead of the 90's heavily animated websites, we have high-glossy webpages, hard-to-read text, eye-popping 3D effects and Flash animations that give people headaches lol. Don't get me wrong, there are some really nice looking websites out there using the "Web 2.0" concept, but they're done properly.

    In my opinion, it's much like the fashion world. Certain people tote about certain fashions and everyone flocks to it like it's the end all and be all of the fashion world and before you know it, everyone looks the same. That's what Web 2.0 is.

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,356
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    @netgrubber - thank you for the enlightenment. I'm now reassured that I'm not missing anything important. I like usability/accessibility in my sites, so most of that stuff I'm just not interested in. (I understand your point that it can be done well.)

    As to where I can use the shiny buttons, that was really a question to myself. I can't think of a site of mine that they'd fit in with at the moment. I wonder if my husband would like a makeover for one of his...?

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    As to where I can use the shiny buttons, that was really a question to myself. I can't think of a site of mine that they'd fit in with at the moment. I wonder if my husband would like a makeover for one of his...?
    Lol, that's too funny and if he doesn't want it, you just reply "Oh, suck it up princess, you're getting a makeover!"

  10. #10
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    If you don't want to do it w/ CSS3 (b/c of the lack of support), you can do it with a simple gradient.

    I don't know how it works in GIMP, but I imagine that they would have a feature similar to Photoshop. In Photoshop, I'd just create more "color stops" (which is...exactly what D_P was doing in his post, just w/ CSS) in the respective colors that you want. Questions?

    Off Topic:

    @TechnoBear ; are you being facetious? I feel as if you know what the "Web 2.0" trend is.


    ~TehYoyo

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,356
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Off Topic:

    Quote Originally Posted by TehYoyo View Post
    @TechnoBear ; are you being facetious? I feel as if you know what the "Web 2.0" trend is.
    No, not in the slightest. I've heard the phrase bandied about, but different people seem to mean different things by it, and some folk that use it don't seem to know what they mean by it. netgrubber's explanation is the best I've come across.

  12. #12
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Off Topic:

    No, not in the slightest. I've heard the phrase bandied about, but different people seem to mean different things by it, and some folk that use it don't seem to know what they mean by it. netgrubber's explanation is the best I've come across.
    Alright It's kind of an abstract thing. (In practice, it seems sort of ugly to me :/ )

    ~TehYoyo

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    "Web 2.0" doesn't exist, which is why nobody knows what it means. It's a vacuum buzzword without meaning.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,356
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by kohoutek View Post
    "Web 2.0" doesn't exist, which is why nobody knows what it means. It's a vacuum buzzword without meaning.
    Good grief - in that case I was right all along and didn't even realise it. I always felt it had no meaning, but I assumed I was just missing something. Thanks, @kohoutek

  15. #15
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I aim to please.

    Seriously though, it's quite frustrating. I can say that in almost every second client correspondence, I get something like, "Can you make that a Web 2.0 design, please?". When I ask them what they mean by that then...well, the answers and descriptions could fill a lexicon of their own.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  16. #16
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So a couple of you just reiterated what I said about Web 2.0 in different wording to share the credit for what I already stated? Lol, just kidding, though I would have to disagree about it not existing because it certainly does exist as a concept and concepts have feelings too lol.

    Anyways, in case some didn't notice, I did figure my OP question out. I just had to mess with GIMP a bit to deliver the effects I was seeking. I ended up with some great looking buttons.

  17. #17
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    What concept would that be?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  18. #18
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    In a nutshell, the concept is that of a more fluid, cross-browser compatible, stable web design with high visual appeal (typically this falls into the high-sheen look) and dynamic interactivity (typically in the form of client or server based scripting). Hence the version number of Web. It's the same exact concept as application development. If I had a version of software that was 1.0, and another was released under 2.0, which version would you think would be more 'up-to-date' and stable? Software 2.0 of course.

    I'm sorry, but as a professional web designer, I would never look at my potential clients that asked for a "Web 2.0 design" and respond with "What do you mean by that?" with an explanation about how it doesn't exist simply because one, I would immediately know they're most likely thinking of the high, glossy / sheen look with cross-browser compatibility and navigational access with a fluid layout and a higher degree of client-based interactivity. At least that's the generalization they would have in mind. I may not know how they wish to achieve that but that's why I'd be asking "How would you like that done?" Rather than telling them, "Web 2.0 doesn't exist.." because it certainly does exist as a concept. Countless articles and books have been written about it and by my saying "it doesn't exist..." only makes me lose credibility as a professional web designer.

    I agree that definition of "what" it is varies as much as there are stones in a river and that it's simply jargon that created a bandwagon for people to jump onto, but that doesn't make it any less existent or relevant.

  19. #19
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Firstly, you're comparing a software's version with a trendy buzzword? I find that logic to be flawed.

    Secondly, of course I'll ask potential clients what EXACTLY they mean because that's my job. If I start to "assume" what clients mean without being concise, then I'm doing something wrongly. But then again, I might not be a professional designer after all.

    Accessibility and usability as well as cross-browser compatibility have absolutely zero to do with Web 2.0.

    Web 2.0 de facto doesn't exist. It's a marketing term, nothing more.

    You say it does exist and that there's even a concept. That's fine. I could not disagree more and we'll leave it at that.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  20. #20
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    I mean, you could have anything be a concept. I'm a big fan of Shalton-style web design, myself. I enjoy the crisp, clean feel and the beautiful layout. That coupled with the responsive web design, best coding practices, and quick load times all make it the best web design concept. To me, there's not comparison.

    ~TehYoyo

  21. #21
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    My intent was not to offend and if I did, I apologize. I was not saying that you, specifically, were not a professional designer and of course it's your job to ask questions. I was merely referring to someone who knows nothing about web design, which is generally our clients, coming to us using the term "Web 2.0". The concept has to exist somewhere for even them to use the jargon and have a basic idea of "modernized" web design. And the software example isn't flawed, it's actually pretty accurate for what the "concept" of the term Web 2.0 signifies. An up-to-date version (or more accurately, thought process) of web development.

    As I previously stated, there have been countless articles and books written about it. One of them is a great book titled, Professional Web 2.0 Programming by Wrox Press and it pretty much explains what I talked about earlier. The concept of Web 2.0 being about a more secure, stable web design with a higher degree of user interactivity and high visual appeal, again, I'm just summarizing in a nutshell.

    Accessibility and usability as well as cross-browser compatibility have absolutely zero to do with Web 2.0.
    Sorry, but yes they do. They are a major component of what the concept truly is. And I ask you this, how can you say that they don't go hand-in-hand when you're stating that it doesn't exist in the first place? That's like saying eggs don't exist yet the yolks and whites have nothing to do with the formation of a complete egg .

    Web 2.0 de facto doesn't exist. It's a marketing term, nothing more.
    I think the original intent of the term wasn't a marketing term, but I do agree with you that it has become nothing more than that now. Everybody flocked to it because it was the "trendy and cool" thing to do without stopping to grasp what it was all really about. Too be honest, I hate the term Web 2.0 because it simply is nothing more than a catch phrase.

    You say it does exist and that there's even a concept. That's fine. I could not disagree more and we'll leave it at that.
    That's cool, we all can't agree on everything. That's what makes us all unique .

  22. #22
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by netgrubber View Post
    The concept has to exist somewhere for even them to use the jargon and have a basic idea of "modernized" web design.
    That's where we differ. A concept does not have to exist for a term to be coined. The illusion of a concept may exist and I do not blame clients for using that term. However, I cannot count the times I've heard clients say they wanted a Web 2.0 design and, I can tell you that features, functionality, and design aesthetics could not have been more diverse. There are no components that make a site Web 2.0. If anything that is considered modern can be attributed to being Web 2.0, then that's evidence to me that there is no underlying concept behind it. There are no specific characteristics that are exclusive, or even partially inherent to Web 2.0. Yes, I do understand that you disagree, but, like I said, the things you attest to being Web 2.0, like usability and accessibility, have nothing to do with Web 2.0 at all, but rather with good web design as a whole.

    As I think of it, it's been quite a few years since I've last heard web designers use that term anymore.

    I don't mind when clients say they want a Web 2.0 design, because, as you said, they exclusively mean that they want a trendy design, and the trend changes every other week. Were there a concept, it'd have a face, an idea, a line of thought, some kind of methodology, something that is particular, but it doesn't ...


    And the software example isn't flawed, it's actually pretty accurate for what the "concept" of the term Web 2.0 signifies. An up-to-date version (or more accurately, thought process) of web development.
    It is flawed to me because I negate the existence of a concrete concept. An application has a tangible concept (well, it should have), and version updates denote an upgrade, improvement, or fixing of one and the same application. I don't see how that can be translated to Web 2.0, but my imagination might be limited here.

    As I previously stated, there have been countless articles and books written about it. One of them is a great book titled, Professional Web 2.0 Programming by Wrox Press and it pretty much explains what I talked about earlier. The concept of Web 2.0 being about a more secure, stable web design with a higher degree of user interactivity and high visual appeal, again, I'm just summarizing in a nutshell.
    I realize that these exist. I do not negate the fact that the term exists, obviously, and that a market has been established for it, but to me that's nothing but a marketing scheme, because it does not introduce a new concept, nor does it introduce anything that didn't exist before. Instead, it lumps a few components into one basket and slaps the label "Web 2.0" onto it, whereby those components comprise something else every time, depending on the agenda.


    Sorry, but yes they do. They are a major component of what the concept truly is. And I ask you this, how can you say that they don't go hand-in-hand when you're stating that it doesn't exist in the first place? That's like saying eggs don't exist yet the yolks and whites have nothing to do with the formation of a complete egg .
    No, if took your metaphor and based that on what I said, then it would have to be: "Eggs don't exist, therefore yolks and whites don't exist". But that's not what I said or implied. Accessibility is a concept. Usability is a concept. These two concepts have existed for ages and have nothing to do with Web 2.0. That's all I meant to say.

    And indeed If you look at sites that label themselves Web 2.0, you'll find that these sites are the worst in terms of accessibility, usually don't work without JS enabled, and are highly resource-intense, so quite the opposite. I've never seen a good designer/agency website use that term anywhere in their sales pitch, not even the "big" designers.


    I think the original intent of the term wasn't a marketing term, but I do agree with you that it has become nothing more than that now. Everybody flocked to it because it was the "trendy and cool" thing to do without stopping to grasp what it was all really about. Too be honest, I hate the term Web 2.0 because it simply is nothing more than a catch phrase.
    Yes, I dislike it as well and wished it were never coined to begin with because it's entirely useless, the components arbitrary, and nothing but a synonym for trendy design that will mean something today and something entirely different tomorrow.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  23. #23
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    As Kohoutek says, clients can mean anything and everything with the phrase "Web 2.0." I might know what I think a client means when she says it, but not being a mindreader, I might be wrong, and have been before. The posts on Clients from Hell are loaded with chunky, chewy "Web 2.0" goodness. Not to disparage anyone, or to come running to the defense of a fellow advisor (believe me, she can handle herself, she doesn't need me to come running to her defense!), it's just true.

  24. #24
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oi vay! .

    I agree that there is no concrete, physical structure to define what Web 2.0 is and I agree that, as I stated earlier, there's as many opinions and thoughts to what that is as there are as many rocks in the river. They are endless, unorganized and based on misleading information for trend purposes. But, there's the but lol, I still believe the general concept of what the term was originally meant to mean was simply that web design had a new and improved methodology behind it.

    The Clients from Hell is funny. I have my own horror stories when it comes to hellish clients. Here's a couple:

    1. I once had a client that wanted me to build her a website (with full functionality is how she put it). So, after a long and lengthy conversation, I was finally able to determine what she meant but "full functionality" (A custom PHP news system w/ MySQL DB storage, client registration, file uploading etc., etc.) and went right to work. The website took about a week to create, after all was said and done because of everything she wanted. The problem came when it was time to pay for the job. Instead of paying what she owed, which was a little over three thousand, she tried to re-negotiate with this, "How about instead of paying for the website you built, why don't I just pay you $100 and you just give me a copy of your work?" Needless to say, this client-professional relationship ended on a sour note when I flatly refused her request .

    2. When I was a computer tech for a local business back-in-the-day, there was this old guy that repeatedly called for tech support after buying a computer from our store before finally coming into the store. The problem was he kept saying that his new computer did not work. No matter what he did, it would not turn on. I tested the computer in the store and it turned on with no problems and it boot right up. The man was happy his computer worked but he "swore" that we were taking advantage of him and it was all a scam. He left with his computer and within hours, he recalled the store and again was adamant that his computer was broken. He was pretty belligerent and hostile and was screaming that "his [bleep], [bleep] computer did not work!" He returned to the store angry and wanting a refund. I again hooked his computer up and turned it on. Same thing, it booted up just fine. Clearly convinced that we were scamming him because he was "old", he had me show him step-by-step what I did to turn it on. So I showed him. During the hooking up process, I got to the part where I plugged the tower into the electrical outlet and he started to demand I explain to him what I was doing followed by a few expletives and more accusations. So, being the good, patient tech I was (lol), I explained to him that I was plugging the computer in because it needs power to turn on. His embarrassed reaction, "Oh, I didn't know that. I thought it ran on batteries." Long story short, he wasn't plugging it in .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •