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

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,

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

Not so easy? Any help? https://www.google.com/search?q=free+Gray+Outline+Star+icon
or even better https://www.google.com/search?q=free+Gray+Outline+Star+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.

// http://css-tricks.com/examples/ShapesOfCSS/

Here we go:



#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.

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…) :wink:

===> 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

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 :shifty:

https://www.google.co.uk/search?q=inkscape+stars&oq=inkscape+star&aqs=chrome.1.69i57j0l5.7817j0j7&sourceid=chrome&espv=210&es_sm=119&ie=UTF-8
which leads you to:
http://www.penguintutorials.com/tutorials/inkscape/introduction-stars

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… :stuck_out_tongue:

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

Sincerely,

Debbie

[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!! :smiley:

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. :tup:

Sincerely,

Debbie

When I need stars from whatever I just take a screen shot and crop it. Simple

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 :shifty: