#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)
Change History (45)
#1
@
13 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.
#3
@
13 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
#6
follow-up:
↓ 9
@
13 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.
#9
in reply to:
↑ 6
@
13 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.
#12
@
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.
#15
@
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.
#17
follow-ups:
↓ 21
↓ 28
@
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.
#19
@
12 years ago
icons32-vs-2x.png is an attempt at the blue 2x icons.
#21
in reply to:
↑ 17
;
follow-up:
↓ 22
@
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
@
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
@
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.
#24
follow-up:
↓ 25
@
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:
↓ 27
@
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 :)
#28
in reply to:
↑ 17
;
follow-up:
↓ 30
@
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
#30
in reply to:
↑ 28
;
follow-up:
↓ 31
@
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:
↓ 32
@
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:
↓ 33
@
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.
#33
in reply to:
↑ 32
@
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.
#35
@
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.
2x login screen logo