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…
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.
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.
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.
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
[FONT=Georgia]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.[/FONT]
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)
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!!
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”.