SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Google Stars

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Google Stars

    I would like some advice and help on making icons that look like what I am calling "Google Stars".

    When you go into Gmail, Google provides the ability to "star" an Email in your Email Folders to signify it is important. (Likewise, you can do this in the actual Email itself, like when you are viewing it.)

    This may sound simple, but here are my challenges...

    1.) I don't have any Graphics Design Software
    2.) I have no Graphic Design knowledge
    3.) It's not just the "Yellow Star" that I want/need, but it the "Gray Star Outline"... (And getting that "hover effect" is even trickier!!)

    I am on a new MacBook Pro.

    Based on my need and constraints mentioned above...

    How hard would it be for me to make the "Gray Star Outline"/"Yellow Star" by myself in something like Inkscape or Gimp??


    I don't have months or years to become a Graphic Designer or an expert in Inkscape or Gimp, but I am willing to give it a go if it is attainable with some help from you guys...

    What do you think?

    Sincerely,


    Debbie

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,806
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Hi Debbie,

    Try Googling for "CSS stars".

    No need to learn graphics or to increase your page loading time by having to include extra images, etc,

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,032
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Yes, I imagine there are a lot of (search for) "free star icons" available on the web.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    Yes, I imagine there are a lot of (search for) "free star icons" available on the web.
    I looked on WikiMedia Commons last night.

    Found a couple of keeper stars, but here is the deal...

    a.) Finding a Gray Outline Star isn't so easy.

    b.) Since I refuse to use JavaScript, it seems to me if I could create a Sprite, it might give me the effects I want without having to turn to "The Dark Side".

    c.) I don't think a tiny Star would hurt page loading times that much.


    Have you ever used Inkscape or Gimp?


    Debbie

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,032
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Not so easy? Any help? https://www.google.com/search?q=free...line+Star+icon
    or even better https://www.google.com/search?q=free...ar+icon+sprite

    A sprite would have some advantage. It isn't the file weight(s) that is the benefit, it's the reduction in the number of HTTP requests the browser would need to make. Similar to how combining referenced CSS and javascript files can be advantageous.

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,806
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    // http://css-tricks.com/examples/ShapesOfCSS/

    Here we go:
    HTML Code:
    #star-six {
    	width: 0;
    	height: 0;
    	border-left: 50px solid transparent;
    	border-right: 50px solid transparent;
    	border-bottom: 100px solid red;
    	position: relative;
    }
    #star-six:after {
    	width: 0;
    	height: 0;
    	border-left: 50px solid transparent;
    	borden: absolute;
    	content: "";
    	top: 30px;
    	left: -50px;
    }
    NO additional HTTP requests to increase page loading times.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I appreciate the alternative ideas, but first, back to my question in the OP...


    How hard would it be for me to make the "Gray Star Outline"/"Yellow Star" by myself in something like Inkscape or Gimp??

    (Since this is a Graphics forum, I assume you guy know how to use tools like Inkscape...)


    ===> The end-effect that I am going for is how Gmail and/or Yahoo Mail allow "starring" of messages.



    Gmail has 3 states: Star with Grey Outline, Star with Darker Grey Outline (Hover), Yellow Star (Clicked)

    Yahoo Mail also has 3 states: Light Solid-Grey Star, Darker Solid-Grey Star (Hover), Yellow Star (Clicked)


    If I understand how CSS and Sprites work, if I could create the 3 States in something like Inkscape, and make them into one Sprite, then I could just use "shifting" to make the Stars look "dynamic" - all without using JavaScript.

    Sincerely,


    Debbie

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,032
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    I haven't done a whole lot of graphics work, but my experience (mostly with Corel) was that working with "gif like eg. icon" images (vector) was a lot less involved than working with "photo like eg. avatar" images (bitmap - raster).

    Learning the software wasn't that hard, but as to my having any artistic talent, let's just say there's a reason I'm on the Programming Team and not Graphics

  9. #9
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ummm, I already Google the U.S. version of that stuff last night.

    But that still doesn't exactly tell me how hard it is to learn Inkscape well enough to accomplish what I described above...

    More so, it would be useful to confirm that Inkscape is indeed the best (open-source) tool to use...

    Sincerely,


    Debbie

  11. #11
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Jeez lady, just pick one and try it!

    Everyone has his or her own way of doing things. What seems easy for me, or seems like an easy application for me, may not suit you. The only way to know what would suit yourself best is to experiment on your own. Decide what you like and dislike.
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You may be trying to be too fancy for your own good.

    My suggestion would be to use generated TEXT. (remember CSS can control text color and add nifty drop shadows and glows for compatible browsers)

    ★ ★ black star
    ☆ ☆ white star

    So the hover would be a simple character change on a pseudo element. If that is not fancu enough you could still draw a star sprite in inkscape and just use images.

    CSS has no control over clicking/selecting so unless you are willing to do a non standard radio/checkbox trick, you will need .js for the onclick stuff (remember , CSS is for appearance , .js is for events)

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    You may be trying to be too fancy for your own good.

    My suggestion would be to use generated TEXT. (remember CSS can control text color and add nifty drop shadows and glows for compatible browsers)

    ★ ★ black star
    ☆ ☆ white star

    So the hover would be a simple character change on a pseudo element. If that is not fancu enough you could still draw a star sprite in inkscape and just use images.
    I took the leap this weekend and installed Inkscape, and believe it or not, was able to make a pretty studly 3-star sprite. My first ever!!



    Quote Originally Posted by dresden_phoenix View Post
    CSS has no control over clicking/selecting so unless you are willing to do a non standard radio/checkbox trick, you will need .js for the onclick stuff (remember , CSS is for appearance , .js is for events)
    I thought there was a way to get drop-shadows "on hover" in CSS.

    Instead I ended up going with a Lt Gray Star for display, Darker Gray Star on hover, and a Red Star for on click and when the PM is marked as "Important".

    Turned out quite well.

    Sincerely,


    Debbie

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    When I need stars from whatever I just take a screen shot and crop it. Simple

  15. #15
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,032
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Yes, as long as the image is free, public domain, it should be legal. I think something relatively generic like a star should be easy to find.

    But using another's copyrighted image, even if altered, could result in a take down notice if you don't get permission.

    For example, if I started using this for a logo, someone might not like it
    eyes2.jpg


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
  •