Create plugin icons for all plugins

[iandunn]

​Core now displays plugin icons on the installer screen, so it'd be nice to have them for ​many of the official plugins.

[nacin]

I asked melchoyce if she could find the artwork for the importer headers and adapt them for icons.

I have scripts to quickly update and commit to all of the importers as well.

[karissa]

Replying to iandunn:

​Core now displays plugin icons on the installer screen, so it'd be nice to have them for ​many of the official plugins.

This looks like fun. Talked with Mel on #design so for details.

[karissa]

Ok so I'm digging in and have a couple questions.

I made ​https://docs.google.com/spreadsheets/d/1vVZz8ksVFj0a8CQ1w4a8Mnyr92JauIcjO7BlIzNMybo/edit?usp=sharing to track my progress and the age of them.

Since I'm new to this, you might have a better way to track all this? If not it would be awesome if someone could write some scripts so that the last updated date and downloads auto updated from the plugin repository.

I took the Tumblr Importer plugin as the initial one and made the header matching the blue/chalk style used on the other ones and the icons in 128x128 & 256x256 . Let me know if its good and then I will get to working up the rest of them.

Or if you would like me to update the look of blue/chalk style to something new, using the same icon > arrow > WP Icon format just let me know that too.

For the other ones that aren't importers, I assume take screenshots of the dashboard to use for the headers? I set up an install that will just have to plugins that need the graphics to do that. But could I have a little more background/thought process of the standards?

[karissa]

Tumblr Importer-icon-256x256.png

[karissa]

Tumblr Importer-icon-128x128.png

[karissa]

Tumblr Importer-banner-772x250.png

[melchoyce]

Hey Karissa,

I made ​https://docs.google.com/spreadsheets/d/1vVZz8ksVFj0a8CQ1w4a8Mnyr92JauIcjO7BlIzNMybo/edit?usp=sharing to track my progress and the age of them.
Since I'm new to this, you might have a better way to track all this? If not it would be awesome if someone could write some scripts so that the last updated date and downloads auto updated from the plugin repository.

This is killer! As far as I know we don't already have a good way of tracking, but @iandunn might know more.

I took the Tumblr Importer plugin as the initial one and made the header matching the blue/chalk style used on the other ones and the icons in 128x128 & 256x256 . Let me know if its good and then I will get to working up the rest of them.

I see where you're going with using the whole Tumblr logo rather than just the icon, but I think the style feels a little too grunge and not as chalkboard-y as the logo and arrow. Also looking at the exported icons, they seem pretty blurry, which is understandable since the source you had to work from was just a png.

Or if you would like me to update the look of blue/chalk style to something new, using the same icon > arrow > WP Icon format just let me know that too.

With the previous comments in mind, I think this is a good time to redesign both the banner and the icon to be either vector, or at least retina-ready at 2x so there's no blur. Would you be interested in redesigning all of the assets?

For the other ones that aren't importers, I assume take screenshots of the dashboard to use for the headers? I set up an install that will just have to plugins that need the graphics to do that. But could I have a little more background/thought process of the standards?

In general I think abstracted headers like the ones used in the importer plugins work better than screenshots, especially since text ends up overlaying the images on the actual plugin screens. @nacin or someone who was around when these graphics were originally made might be able to talk a little bit about the thought process.

[karissa]

Replying to melchoyce:

Hey Karissa,

I made ​https://docs.google.com/spreadsheets/d/1vVZz8ksVFj0a8CQ1w4a8Mnyr92JauIcjO7BlIzNMybo/edit?usp=sharing to track my progress and the age of them.
Since I'm new to this, you might have a better way to track all this? If not it would be awesome if someone could write some scripts so that the last updated date and downloads auto updated from the plugin repository.

This is killer! As far as I know we don't already have a good way of tracking, but @iandunn might know more.

Awesome!

I took the Tumblr Importer plugin as the initial one and made the header matching the blue/chalk style used on the other ones and the icons in 128x128 & 256x256 . Let me know if its good and then I will get to working up the rest of them.

I see where you're going with using the whole Tumblr logo rather than just the icon, but I think the style feels a little too grunge and not as chalkboard-y as the logo and arrow. Also looking at the exported icons, they seem pretty blurry, which is understandable since the source you had to work from was just a png.

Oh oops yah I was going to make it more chalk like but needed a filter for it.

Or if you would like me to update the look of blue/chalk style to something new, using the same icon > arrow > WP Icon format just let me know that too.

With the previous comments in mind, I think this is a good time to redesign both the banner and the icon to be either vector, or at least retina-ready at 2x so there's no blur. Would you be interested in redesigning all of the assets?

Yes definitely!

For the other ones that aren't importers, I assume take screenshots of the dashboard to use for the headers? I set up an install that will just have to plugins that need the graphics to do that. But could I have a little more background/thought process of the standards?

In general I think abstracted headers like the ones used in the importer plugins work better than screenshots, especially since text ends up overlaying the images on the actual plugin screens. @nacin or someone who was around when these graphics were originally made might be able to talk a little bit about the thought process.

Yes that makes since. I'll browse the rest of the plugins looking at the way others have made their headers to get more familiar with other styles.

[melchoyce]

Nacin managed to find the old plugin header files, if we need them for reference: ​https://cloudup.com/ccrBhs1vzBK

(Tried to upload directly to the ticket, but the zip is too large)

[samuelsidler]

Any update here?

[danieltj]

Can I have this one? So there just needs to be icons for the wordpressdotorg account plugins right?

Any specific guidelines for this? I'm happy to take it if no one else does.

[iandunn]

Replying to danieltj:

Can I have this one? So there just needs to be icons for the wordpressdotorg account plugins right?

In general. there's no need to call dibs on a ticket, especially one where there isn't much activity. Feel free to jump in and contribute wherever you'd like :)

If multiple people are working on the same thing, then I think it's best to collaborate to avoid stepping on each other's toes, but there aren't any formal processes for it.

Any specific guidelines for this?

Someone from the Design team would be better suited to answer that than me, but I'm guessing that ​the Design Handbook would provide some of direction in terms of philosophy, guidelines, existing patterns, etc.

You can also probably get some feedback on concepts/etc in the #design and #meta channels on Slack.

[karmatosed]

Hi @danieltj that would be amazing for you to do this! The best advice is:

• Make sure retina.
• Try and do one by one. Make sure you post each and then you can get feedback on that.

Look forward to what you can create for us.

[Otto42]

Note: I recommend making icons in SVG if possible, but if not, then 256x256 and 128x128 JPG/PNG is fine too.

[danieltj]

Replying to iandunn:

Replying to danieltj:

Can I have this one? So there just needs to be icons for the wordpressdotorg account plugins right?

In general. there's no need to call dibs on a ticket, especially one where there isn't much activity. Feel free to jump in and contribute wherever you'd like :)

If multiple people are working on the same thing, then I think it's best to collaborate to avoid stepping on each other's toes, but there aren't any formal processes for it.

Any specific guidelines for this?

Someone from the Design team would be better suited to answer that than me, but I'm guessing that ​the Design Handbook would provide some of direction in terms of philosophy, guidelines, existing patterns, etc.

You can also probably get some feedback on concepts/etc in the #design and #meta channels on Slack.

Replying to karmatosed:

Hi @danieltj that would be amazing for you to do this! The best advice is:

• Make sure retina.
• Try and do one by one. Make sure you post each and then you can get feedback on that.

Look forward to what you can create for us.

Okay no worries. I'll get started now and try come up with something.

I'll probably have to leave out the SVG though, at least until another rainy day.

[melchoyce]

I'll probably have to leave out the SVG though, at least until another rainy day.

If you make the banner in a vector program like Illustrator or Sketch, we can take care of making it an SVG for you.

[danieltj]

I can pass over the PSD to you if that'd help? I don't have Illustrator or Sketch, just Photoshop.

[danieltj]

I've attached five icons for the import tools which includes a PSD for them all.

If no one else jumps on this, I'll do the respective header images too but like I said; I've included the PSD if anyone jumps in on this too. Hope this is helpful!

[danieltj]

Import icons for 256 and 128

[melchoyce]

Thanks @danieltj!

Uploaded the higher-res versions directly to the ticket so it's easy to preview & review.

[danieltj]

Okay thanks! I'll look into doing the headers and extra plugin graphics soon if I find the time!

[alwaysbrightblue]

Hey guys - is ​this list the one we can work from to solve this ticket?

[mapk]

Replying to alwaysbrightblue:

Hey guys - is ​this list the one we can work from to solve this ticket?

Yes, it looks like your link aligns with the link in the above description of this ticket. I'd say that a great place to start.

[karmatosed]

@danieltj how is it going with this ticket? @alwaysbrightblue that would be ace to have you involved.

[danieltj]

Whoa, been a while since I checked into this. I'll take a look when I next get a free moment.

[obenland]

@melchoyce Any news here?

[cathibosco1]

@obenland This ticket was discussed in our design team meeting today - This is a lot of interest in completing the headers and getting designers to "adopt a plug-in" at an upcoming contributor day as well as on line here too. The specs for the graphics can be found here: ​https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/

I'll also post an invitation in the design slack channel to see if we can't get some new designers contributing. This is a nice opportunity for multiple designers to contribute.

Note: Header graphics are greatly needed FYI...
Woot!

[cathibosco1]

This is getting the attention of multiple designers - we are working in ​https://trello.com/c/g4t5MGtD/73-plugin-headers-and-icons and once we have the list ready we will ship it all here for implementation.

​https://trello.com/c/g4t5MGtD/73-plugin-headers-and-icons

Status Update March 9th 2018 - We hope to come together to complete this task. All are welcome to adopt a plug-in... keeping track on the design Team Trello card for now. 😎😎😎

[melchoyce]

A preview of all the "Importer" plugin icons.

[melchoyce]

Attached svgs and a preview of all the newly designed "Importer" plugin icons, which are all ready to be added:

• Blogger
• Blogware
• Dotclear
• Dotclear2
• GreyMatter
• Livejournal
• Movable Type
• OPML
• RSS
• Simple Tags
• TextPattern
• Tumblr
• Ultimate Tag Warrior
• WordPress

Props to @cathibosco1 and @uxkai.

[Otto42]

I'll look at adding them to the individual plugins.

[melchoyce]

Thanks Otto!

[cathibosco1]

Hello! The design team has the rest of the plugin icons ready for you to upload. Eventually we will design headers too...

Please find the additional plugin icons attached. Thank you! :)

props to @uxkai @hannowybrenmook1 @sjardo1 @jcmaepalmes @melchoyce @ryansogge @cathibosco1

[cathibosco1]

Plugin icons - the second batch :)

[Otto42]

Just to verify, so I can go through these in batch, are "WP plugins-icons-2018.zip​" and "Importer-Icon-SVGs.zip​" the two sets of icons thus far? Are there any others not in those ZIP files?

[cathibosco1]

Yes, Thank you Otto. I think that is everything you will need. :) Some plugins have icons already. FYI

[Otto42]

Updated first batch: ​https://plugins.trac.wordpress.org/changeset/1908362

admin-color-schemer
atom-publishing-protocol
background-update-tester
wp-content-blocks
debug-bar
memory-bump
rssjs
tagregator
taxonomy-converter
thx38
widgets-widgets-widgets
wpcat2tag-importer

Didn't know what plugins these were referring to:

author-widget-icon-header.zip
customizer pane resizer icon.zip

Don't know which option to use:

press-this-option-1.zip
press-this-option-2.zip

[Otto42]

Second batch: ​https://plugins.trac.wordpress.org/changeset/1908375

Added icons for:

blogger-importer
dotclear-importer
dotclear2-importer
greymatter-importer
livejournal-importer
movabletype-importer
opml-importer
rss-importer
stp-importer
textpattern-importer
tumblr-importer
utw-importer
wordpress-importer

For future ease of implementation, if any other batches are desired, I recommend the following:

1. Use a consistent naming method. Have the files named plugin-slug.zip, which then contain the properly named icon.svg, icon-128x128.png, and icon-256x256.png files. This would have helped, so I wouldn't need to go around renaming everything.

2. Include all three formats. For the importers, I had to manually create the PNG versions. Like it or not, the world just isn't ready for SVG only, the PNG versions are important to have too.

3. Please do some image optimization. For every PNG in the first batch, I had to load it and resave it with a good image program in order to get it down to a decent filesize. Some of them were 20K+ and when resaved with PNG compression, went down to under 1K in size. Speed counts, and smaller is better when it comes to images. PNG compression is lossless, so crank it up to maximum.

[Otto42]

Corrected mistaken plugin name for wp-content-blocks: ​https://plugins.trac.wordpress.org/changeset/1908385

[Otto42]

Found the author widget plugin, added icons and banners for it: ​https://plugins.trac.wordpress.org/changeset/1908390/

[cathibosco1]

@Otto42
Thank you for your notes, I really appreciate it.
I will ask more questions in future projects like naming systems and will optimize and review better before handing off files.

Thank you for doing extra work, if I can return the favor any time please let me know!

Please use option 1 for press this icon.
I think the "customizer pane resizer icon plugin" must have been removed since we started this process??

Again, thank you so much!

[obenland]

@Otto42 Is there anything left to do here?

[Otto42]

If there's no more icons or banners forthcoming, then nope, we're good.