👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
While we’re waiting for the vector format to come across the web, we’re left to “fake” it out — our images (excluding photographs) times two (x2) to create a high-pixel-density image.
While we’re at it, let’s see how we can consolidate all those icons into one file and in hi-res fashion.
We have website icons sized 16px, 24px, 32px, etc. While laying it out in Illustrator or Photoshop, size wouldn’t really matter — just make it larger than 48 x 48 pixels.
Set out your canvas in a fixed manner — if you’ve settled with 48px, then multiply it by 10 and have a 480px wide canvas. It could contain 10 48px icons across.
In you CSS:
background-position:-32px 0; /* in increments of 32 pixels */