Create an icon for the extension

thamara / vscode-code-annotation

Code Annotation Extension for VSCode

https://marketplace.visualstudio.com/items?itemName=tkcandrade.code-annotation

GNU General Public License v3.0

67 stars 27 forks source link

Create an icon for the extension #13

Closed thamara closed 4 years ago

thamara commented 4 years ago

We have an icon for the extension, but it's not pretty and gets really nasty on the activity bar:

We need a new icon, and one version of such icon just with lines.

m1ga commented 4 years ago

how about combining them and remove the outer part? Something like this:

BarbaraAlmeida commented 4 years ago

I've sketched some ideas: annotation_extension_icon_ideas

Anything that you're interested in seeing on vector?

BarbaraAlmeida commented 4 years ago

Going a bit more abstract (aka crazier) with the sticky notes idea: annotation_extension_icon_ideas_2

thamara commented 4 years ago

Thank you @BarbaraAlmeida and @m1ga for your suggestions. I really liked the more abstract feel of one of Barbara's suggestions. I liked the colorful "plus sign", maybe with a "cut" for something that would look like a comment. Something like:

Barbara, would you be willing to work on that?

BarbaraAlmeida commented 4 years ago

Sure, I'm working on it.

Just 2 attention points:

With the + sign logo the sticky notes are smaller to the cuts may be too small, but I'll work on a feel variations and we can test it.
I've noticed afterwards that the + version looks a bit like slack icon: Not too close but I wanted to let you know.

thamara commented 4 years ago

I haven't noticed that! Maybe because the icon I'm used to see is within a white bg hahahah But I still think it's different enough, especially because of the harder edges on the "post it tags".

BarbaraAlmeida commented 4 years ago

Before adding colors and the cuts, here are some options for the proportion of the sticky notes: annotation_icon_proportions_1 annotations_icon_proportions_2 annotations_icon_proportions_3 annotations_icon_proportions_4 What do you prefer @thamara (you can also choose something in between)? Also, what do you think of how close they are of each other?

thamara commented 4 years ago

I think the first options looks better. It looks like it fills the square space better.

Regarding the space between each other, I think the one you have on the mockup looks pretty good already. Considering a smaller icon, around 48-ish px, maybe it's worth to make them a little apart, but I cannot really judge that now. I believe you can judge that :)

m1ga commented 4 years ago

Those look like a Playstation D-Pad if you arrange them like this. They even have almost the same colors for the buttons so when people see that icon they'll think of a Playstation extension :)

thamara commented 4 years ago

Some more ideas:

thamara commented 4 years ago

@m1ga I could not unseen the Playstation symbol hahahahah Thanks for this feedback. I was talking with @BarbaraAlmeida and we converged into an icon that is a mix of the indication post its with a file:

BarbaraAlmeida commented 4 years ago

I can't unsee it either 😅

Here's the result of our brainstorm from yesterday:

thamara commented 4 years ago

LOVED IT!

thamara commented 4 years ago

To publish a PR, you'll need to add the icons to resources, replacing the icons that existed there. If you keep the same name, you won't need to do anything else.