I'm using Storyboard and I created a UIButton with a custom image.
I have a problem that the edges of the button are pixelated:
Image:
Any idea? Thank you!
Asked
Active
Viewed 322 times
3
Ashish Kakkad
- 23,586
- 12
- 103
- 136
FS.O
- 403
- 6
- 24
-
2The image size and imageview size should be exact same. – Mar 18 '16 at 12:30
-
You must have the all size images `@1x`, `@2x` and `@3x` images. Or you can use vector image. and imageview/button's size should be `@1x` image. – Ashish Kakkad Mar 18 '16 at 12:31
-
@AshishKakkad Thank you! – FS.O Mar 18 '16 at 12:35
-
@AshishKakkad Do you know any software for Mac that can convert an image to all the required sizes? – FS.O Mar 18 '16 at 12:37
-
@AshishKakkad Do you know its name? – FS.O Mar 18 '16 at 12:40
-
2@FS.O Generally it is given by the designer. else you can use [Prepo](https://itunes.apple.com/in/app/prepo/id476533227?mt=12) or a tool for Xcode [RTImageAssets](https://github.com/rickytan/RTImageAssets). – Ashish Kakkad Mar 18 '16 at 12:41
-
you can use mac preview app to increase the image size @FS.O – Teja Nandamuri Mar 18 '16 at 12:46
2 Answers
3
3 Ways to create this button.
- You can add plus character in the default button. Give the red background and corner radius.
Add all assets like @1x, @2x and @3x in the folder.
You can prepare assets by using Prepo or a tool for Xcode RTImageAssets Or any-other tool that fits your requirement.
Use vector image as asset. Article : Use of vectors in Xcode
Shabbir Dhangot
- 8,954
- 10
- 58
- 80
Ashish Kakkad
- 23,586
- 12
- 103
- 136
-
I'm trying to do it using RTImageAssets but it seems it generates the same size for all sizes (I put a 1000X1000 image on the 3x and it generates the same size for 1x and 2x), and the button is still pixelated – FS.O Mar 18 '16 at 12:52
-
-
3x (retina which will be used in iPhone 6 Plus) is maximum size for button. 1x = 3x/2 and 2x = 1x * 2. This is the concept now just put the image size that you want. – Ashish Kakkad Mar 18 '16 at 12:55
-
So if the UIButton size on the storyboard is 45x45, the 3x image should be 45x45? – FS.O Mar 18 '16 at 12:56
-
0
If you are viewing this in the simulator in scaled mode, the image may appear to be blurry. Viewing this in 100%scaling mode may remove this effect. But if you are having this problem in a device, then there is a problem with your image assets. Using adobe photoshop you can create images according iOS guidelines. This link can help you https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1
Soham Ray
- 215
- 2
- 4