I'm trying to make icons for my app's navigation drawer and dashboard but the problem is whenever I try to decrease the size or pixels per inch value of the icons they get pixelated. I tried to redraw them with the pen tool in order to make vectors but the problem lingered. Is there any way to ease around this obstacle?
Why can't you just make icons in 72 ppi?
There is no way to make high quality icons in low ppi
Related
Is there a way to fix the Retina Blurry icons on cellphones without using the 2x sizing images hack?
I'm a Front-End developer and the Designer is not avaibable to giving me the icons of the Website at the double of its size.
So, I was wondering if there is any way to keep the original icons size and make it looks correctly on cellphones with Retina display.
Small pixel images are automatically enlarged by the browsers and the quality of the anti aliasing is depending on the rendering engine of the browser.
If you don't want to use the media queries #2 trick you could use svg icons instead as vector graphics are cristal sharp on every screen resolution and ppi.
Edit: As mentioned in the comment below you can disable antialias in browsers as described here: Disable antialising when scaling images
But that will not create eg a sharp round circle out of a 16 pixel graphic as the pixels will still be squared pixels (just enlarged)...
Some of the images that I am using are small icons. How can I scale them when viewing them at much higher resolutions such as 2560 x 1440?
Bojan is right: Using imulus.github.io/retinajs is a good way to accomplish this. A few things to note:
in your initial design, you should set your entire document to 150ppi. This is double resolution for retina display. When you're designing be sure all of the images and icons are scaleable to this size without pixelation.
Before you begin your build, cut out your images at this size and save them out like normal.Then scale it down to 72ppi so as you can cut out regular resolution images, and take measurements while you replicate the design into a website so you aren't constantly dividing by 2.
retinajs will replace your images as needed, but it will require you to assign dimensions to images that may not have them.
hope this helps
I'm building a page which is supposed to be full retina ready. I'm creating a retina version of all the small-medium images.
It looks good when you look at the 100x100 pixel version of a 50x50 image on devices with high density screens. But what if the image is much larger? Like a background image of a slider with 1700x600 pixel dimensions, should this get a retina version as well? The image's size is already much bigger than almost every mobile device's resolution. Would a 1700x600 or a 3400x1200 image look different on a 640x960 display?
Don't forget about retina enabled laptops, and iPads... In my experience most images you can save at a scale of about 150% the expected viewing size, and they still look great on a high density screen. You should play with compression quality as well, a lot of times you can lower the quality and still have an image that looks great because of the shear amount of extra pixels.
See this for an example of what I'm talking about: http://filamentgroup.com/lab/rwd_img_compression/
I notice that when I measure out something in Photoshop to "ensure pixel perfection" it's usually half of what's measured in Photoshop to go to CSS. So if I measure at 60px, in CSS it goes to 30px.
But only roughly so.. Is there a way to make sure it matches 100% so I don't have to guesstimate? And why does this happen?
When you are measuring out those pixels in Photoshop, you have to make sure you know what size your resolution is. For the web, it uses 72 dpi resolution, check in Photoshop under "image size" to see what resolution your image is. Sometimes images are at 300 dpi which if you use that and then try to save on the web will make the image larger than it should be.
In Photoshop:
Ctrl + N > Web tab > Web Most Common
This Artboard will set the settings to be fir for webpages. Now screenshots from the browser should match the PS pixels values.
Also make sure that your browser settings haven't changed the zoom ratio or font size.
I recently purchased Drew Wilson's Pictos icon library. It is a library of flat, monochromatic icons for use on the web and elsewhere. The only issue is: they're vectors. I know my way around Illustrator a little bit, but ultimately I want to import these icons into Photoshop CS4 and resize to various dimensions.
When I import an icon and resize it to, say, 20x20 pixels, I notice that there is a fair bit of aliasing around the edges of the icon. I'm sure there is some magic number where the edges of these icons will remain crisp, but I can't find any option or setting that will allow me to size these icons properly.
How can I snap these icons to the closest size that removes or minimizes the aliasing?
The aliasing / pixelating is because vectors export out of illustator # whatever size they're copied #
Try opening the icons in illustrator... scaling them waaay up
And then just keep a copy of the huge ones in a separate layer
Copy that layer when you want to scale it down ..annnd that way you'll have a copy to work with..and u won't have to re
Open the file every time u need to make an edit
And a good rule of thumb for pixelation is
You can always size down.. but sizing up will create pixelating in bitmaps
Chances are, you have your logo in .eps format. If you do, open your .eps file in Photoshop. A dialog box will pop up asking the size you want to import. Be sure to select RGB color if this will display on the web. Select the Anti-aliasing checkbox. When your file opens up, zoom in, and you'll notice that Photoshop has neatly anti-aliased all of your edges for you.