Make WordPress Core

Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#20293 closed enhancement (fixed)

Icons and images look fuzzy on Retina displays.

Reported by: chexee's profile chexee Owned by: azaozz's profile 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 12 years ago.
2x login screen logo
icons32.png (35.3 KB) - added by empireoflight 12 years ago.
A 2x version of the wp menu icons
icons64.png (39.8 KB) - added by empireoflight 12 years ago.
A 2x version of the larger icons
menu-2x.2.png (35.3 KB) - added by iammattthomas 12 years ago.
icons32-2x.png (36.3 KB) - added by iammattthomas 12 years ago.
menu-2x.png (32.0 KB) - added by iammattthomas 12 years ago.
Updated menu sprite
icons32-vs-2x.png (35.7 KB) - added by SergeyBiryukov 12 years ago.
admin-bar-sprite-2x.png (4.1 KB) - added by chexee 12 years ago.
production version of 2x admin icons
admin-bar-sprite-2x.fw.png (217.3 KB) - added by chexee 12 years ago.
working version of 2x admin icons
wp-badge-2x.png (27.5 KB) - added by chexee 12 years ago.
Production version of wp-badge.png

Download all attachments as: .zip

Change History (45)

@chexee
12 years ago

2x login screen logo

#1 @jane
12 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.

#2 @empireoflight
12 years ago

Icons almost done...

@empireoflight
12 years ago

A 2x version of the wp menu icons

@empireoflight
12 years ago

A 2x version of the larger icons

#3 @iammattthomas
12 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

@iammattthomas
12 years ago

Updated menu sprite

#4 @iammattthomas
12 years ago

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

#5 @azaozz
12 years ago

In [20356]:

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

#6 follow-up: @nacin
12 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.

#7 @azaozz
12 years ago

In [20362]:

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

#8 @azaozz
12 years ago

In [20364]:

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

#9 in reply to: ↑ 6 @azaozz
12 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.

#10 @azaozz
12 years ago

In [20367]:

Dashboard icon back in, see #20293

#11 @azaozz
12 years ago

Related #20382.

#12 @gluten
12 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.

#13 @ryan
12 years ago

  • Priority changed from normal to high

#14 @azaozz
12 years ago

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

#15 @markjaquith
12 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.

#16 @goto10
12 years ago

  • Cc dromsey@… added

#17 follow-ups: @helenyhou
12 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.

#18 @nacin
12 years ago

In [20624]:

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

#19 @SergeyBiryukov
12 years ago

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

#20 @azaozz
12 years ago

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

In [20702]:

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

#21 in reply to: ↑ 17 ; follow-up: @nacin
12 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.

#22 in reply to: ↑ 21 @azaozz
12 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.

#23 @azaozz
12 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.

@chexee
12 years ago

production version of 2x admin icons

@chexee
12 years ago

working version of 2x admin icons

#24 follow-up: @chexee
12 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.

#25 in reply to: ↑ 24 ; follow-up: @azaozz
12 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 :)

#26 @azaozz
12 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

#27 in reply to: ↑ 25 @chexee
12 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! :)

@chexee
12 years ago

Production version of wp-badge.png

#28 in reply to: ↑ 17 ; follow-up: @chexee
12 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

#29 @azaozz
12 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

#30 in reply to: ↑ 28 ; follow-up: @ocean90
12 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/.

#31 in reply to: ↑ 30 ; follow-up: @helenyhou
12 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.

#32 in reply to: ↑ 31 ; follow-up: @chexee
12 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 how they've changed over time.

Last edited 12 years ago by chexee (previous) (diff)

#33 in reply to: ↑ 32 @nacin
12 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.

#34 @jane
12 years ago

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

#35 @jane
12 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.