WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#20293 closed enhancement (fixed)

Icons and images look fuzzy on Retina displays.

Reported by: chexee Owned by: azaozz
Milestone: 3.4 Priority: high
Severity: normal Version: 3.4
Component: UI Keywords:
Focuses: Cc:

Description

Let's create some 2x images and sprites to make things look shiny on Retina displays.

Attachments (10)

wordpress-logo-2x.png (4.8 KB) - added by chexee 2 years ago.
2x login screen logo
icons32.png (35.3 KB) - added by empireoflight 2 years ago.
A 2x version of the wp menu icons
icons64.png (39.8 KB) - added by empireoflight 2 years ago.
A 2x version of the larger icons
menu-2x.2.png (35.3 KB) - added by iammattthomas 2 years ago.
icons32-2x.png (36.3 KB) - added by iammattthomas 2 years ago.
menu-2x.png (32.0 KB) - added by iammattthomas 2 years ago.
Updated menu sprite
icons32-vs-2x.png (35.7 KB) - added by SergeyBiryukov 2 years ago.
admin-bar-sprite-2x.png (4.1 KB) - added by chexee 2 years ago.
production version of 2x admin icons
admin-bar-sprite-2x.fw.png (217.3 KB) - added by chexee 2 years ago.
working version of 2x admin icons
wp-badge-2x.png (27.5 KB) - added by chexee 2 years ago.
Production version of wp-badge.png

Download all attachments as: .zip

Change History (45)

chexee2 years ago

2x login screen logo

comment:1 jane2 years ago

  • Component changed from General to UI
  • Keywords ui-feedback removed
  • Owner set to azaozz
  • Status changed from new to assigned
  • Type changed from defect (bug) to enhancement
  • Version set to 3.4

@chexee: Have already asked azaozz to port over the work that was done for this on .com.

comment:2 empireoflight2 years ago

Icons almost done...

empireoflight2 years ago

A 2x version of the wp menu icons

empireoflight2 years ago

A 2x version of the larger icons

iammattthomas2 years ago

iammattthomas2 years ago

comment:3 iammattthomas2 years ago

azaozz asked me to take a look at Ben's new icons to make sure they match up with the alignment of the existing icon sprites. I've fixed up the positioning of the two new @2x sprites and run them through pngcrush to optimize the file size.

http://core.trac.wordpress.org/attachment/ticket/20293/icons32-2x.png
http://core.trac.wordpress.org/attachment/ticket/20293/menu-2x.png

iammattthomas2 years ago

Updated menu sprite

comment:4 iammattthomas2 years ago

Sorry, I uploaded the wrong version of menu-2x.png there. All done now.

comment:5 azaozz2 years ago

In [20356]:

Double-size icons and WordPress logo for retina displays, props chexee, props empireoflight, props iammattthomas, see #20293

comment:6 follow-up: nacin2 years ago

.icon32 { background-image } may break plugins which are specifying their own class name via the screen_icon() property then applying their own CSS.

We may need to find a better way to do this even if it requires a bit more CSS and some repetition.

Also, in [20356] the @media rules are commented out.

comment:7 azaozz2 years ago

In [20362]:

More specific selectors for the 2x images, see #20293

comment:8 azaozz2 years ago

In [20364]:

More specific selectors for the 2x images take 2, don't specify background-size for the 1x background, see #20293

comment:9 in reply to: ↑ 6 azaozz2 years ago

Replying to nacin:

Right, added more specific selectors to target only the default icons. Also uncommented the 2x background sprites for the blue theme although they point to the gray sprites at the moment (good enough for testing for now I hope). Will be adding blue sprites soon.

comment:10 azaozz2 years ago

In [20367]:

Dashboard icon back in, see #20293

comment:11 azaozz2 years ago

Related #20382.

comment:12 gluten2 years ago

It seems like some of the 1x background-images still have a background-size. For instance, the login screen logo sets a background-size that is causing my customized logo to look stretched.

comment:13 ryan2 years ago

  • Priority changed from normal to high

comment:14 azaozz2 years ago

Still need to add the sprite with the blue 2x icons.

comment:15 markjaquith2 years ago

Some background information (get it? I'm here all night):

In my Login Logo plugin, I was specifying width/height, and then using background-size: constrain; if their background image was too big. That shrinks it down proportionally to fit. The change I had to make for 3.4 was to do background-size: auto; if the background image was not too big. This was needed to override the precise background-size dimensions set in 3.4. I suppose I also could have used background-size myself to set precise dimensions. But since I was already specifying the width/height of the element, using auto was the easiest solution.

comment:16 goto102 years ago

  • Cc dromsey@… added

comment:17 follow-ups: helenyhou2 years ago

Would say that the toolbar needs a 2x sprite as well - the W logo looks particularly terrible. Might also be nice to have a 2x of wp-badge.png, since it appears both on the about screen and the welcome panel.

comment:18 nacin2 years ago

In [20624]:

Remove img width/height from the readme.html WP logo. props soulseekah. fixes #19955. see #20293 for any follow-ups.

SergeyBiryukov2 years ago

comment:19 SergeyBiryukov2 years ago

icons32-vs-2x.png is an attempt at the blue 2x icons.

comment:20 azaozz2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In [20702]:

Add blue sprite for icons32, props SergeyBiryukov, fixes #20293

comment:21 in reply to: ↑ 17 ; follow-up: nacin2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to helenyhou:

Would say that the toolbar needs a 2x sprite as well - the W logo looks particularly terrible. Might also be nice to have a 2x of wp-badge.png, since it appears both on the about screen and the welcome panel.

comment:22 in reply to: ↑ 21 azaozz2 years ago

Replying to nacin:

Potentially we should update most if not all images used in the admin. Other places needing 2x sprites are the admin-bar-sprite.png, editor buttons, pointer arrows, perhaps the icons in wp-includes/images/crystal and the screenshots used on the about screen, etc. Not sure if all this would make it in 3.4.

comment:23 azaozz2 years ago

We still need the 2x for the toolbar sprite. That would replace the (very fuzzy) W icon.

Perhaps the rest of the icons there http://core.trac.wordpress.org/browser/trunk/wp-includes/images/admin-bar-sprite.png can be enlarged to something like 4x, sharpened a little, then reduced to 2x size. This would make them look a bit better in the 2x sprite.

chexee2 years ago

production version of 2x admin icons

chexee2 years ago

working version of 2x admin icons

comment:24 follow-up: chexee2 years ago

I created a 2x admin bar sprite. For graphic elements we should make it a point to upload the working files as well as the production files. That way, if the original creator isn't available someone else can pick it up with as many resources as possible.

I did my best to get the shadowing and redraws right, but I don't have a retina display to test them on. Please test the sprite and let me know if any changes are needed.

comment:25 in reply to: ↑ 24 ; follow-up: azaozz2 years ago

Replying to chexee:

...For graphic elements we should make it a point to upload the working files as well as the production files...

Absolutely agree.

I did my best to get the shadowing and redraws right...

All looks very good :)

comment:26 azaozz2 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [20814]:

Retina display icons: add 2x sprite for the toolbar, props chexee, fixes #20293

comment:27 in reply to: ↑ 25 chexee2 years ago

Replying to azaozz:

Replying to chexee:

...For graphic elements we should make it a point to upload the working files as well as the production files...

Absolutely agree.

I'll do my best to follow my own rule! :)

chexee2 years ago

Production version of wp-badge.png

comment:28 in reply to: ↑ 17 ; follow-up: chexee2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to helenyhou:

Would say that the toolbar needs a 2x sprite as well - the W logo looks particularly terrible. Might also be nice to have a 2x of wp-badge.png, since it appears both on the about screen and the welcome panel.

Just saw this comment. I've attached a 2x version of the badge.

The working PSD of the badge can be downloaded here: http://chx.mx/3s3e0B243I2f3d0p2A0i

comment:29 azaozz2 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [20818]:

Retina display icons: add 2x image for wp-badge.png, props chexee, fixes #20293

comment:30 in reply to: ↑ 28 ; follow-up: ocean902 years ago

Replying to chexee:

The working PSD of the badge can be downloaded here: http://chx.mx/3s3e0B243I2f3d0p2A0i

We should gather all these PSD files in one place. Maybe a special page on make.wordpress.org/ui/.

comment:31 in reply to: ↑ 30 ; follow-up: helenyhou2 years ago

Replying to ocean90:

We should gather all these PSD files in one place. Maybe a special page on make.wordpress.org/ui/.

Agreed. There's already a link in the sidebar there to the admin PSD (also on CloudApp). Seems that it would be better to upload these to Make UI itself rather than relying on a third party service for long-term uploads - there was already a weird accidental replacement of an image in a post recently. I think I'm only an author there, though, so I can't make the changes.

comment:32 in reply to: ↑ 31 ; follow-up: chexee2 years ago

Replying to helenyhou:

Replying to ocean90:

We should gather all these PSD files in one place. Maybe a special page on make.wordpress.org/ui/.

Agreed. There's already a link in the sidebar there to the admin PSD (also on CloudApp). Seems that it would be better to upload these to Make UI itself rather than relying on a third party service for long-term uploads - there was already a weird accidental replacement of an image in a post recently. I think I'm only an author there, though, so I can't make the changes.

I think it would make more sense to have a repository for design files. That way we can not only have the resources, but we can track hov they've changed over time.

Version 0, edited 2 years ago by chexee (next)

comment:33 in reply to: ↑ 32 nacin2 years ago

Replying to chexee:

I think it would make more sense to have a repository for design files. That way we can not only have the resources, but we can track how they've changed over time.

We have design.svn.wordpress.org but have never used it. We also have http://code.svn.wordpress.org/wordpress-sources/ (see http://code.trac.wordpress.org/changeset/134 for explanation).

That said, I don't really feel like SVN is necessarily needed. Uploading them to Trac and keeping them linked on make/ui is more than enough, at least for now. And easier to find/organize as things are grouped with tickets.

comment:34 jane2 years ago

I was just about to comment that I thought MT had set up a repo a long time ago.

comment:35 jane2 years ago

I agree with Chelsea that using the repo would be best. It's how it works on wordpress.com, and then it doesn't matter which blog it was on, how the file was named, etc and you can see the history which can be really useful. Then when we get into wordpress.org site stuff that can live there too and no one will have to go looking for assets because they'd all be in one place.

Note: See TracTickets for help on using tickets.