Discussion Forums  >  Uncategorized

Replies: 12    Views: 380

rgtichy
Lost but trying
Profile
Posts: 104
Reg: Oct 14, 2011
Barrington
1,040
01/14/12 10:23 AM (14 years ago)

@2x ? Anybody know about this?

look at: http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml Does this business with the @2x get handled by the iOS automatically? Is this something we can make use of in our BT apps, or is it not supported? Or is it not relevant?
 
GoNorthWest
buzztouch Evangelist
Profile
Posts: 8197
Reg: Jun 24, 2011
Oro Valley, AZ
1,000,000
like
01/14/12 10:31 AM (14 years ago)
It's just a higher resolution version of Default.png, which gets loaded automatically when an app gets loaded. I'm guessing that iOS determines the type of display, and loads the correct version. Myself, I use the Default*.png files as my splash screen, since it's always loaded. Works perfect for me! Mark
 
Annonymous
Profile
01/14/12 01:52 PM (14 years ago)
Hello @rgtichy Yeah, as Mark said, it is just a higher resolution version of your image files to be delivered to the iPhone 4 & 4S Retina Display. iPhone 3g & 3GS have the following screen dimensions in pixels: 320px Wide by 480px Height and 163 dpi. iPhone 4 & 4S: 640px Wide by 960px Height and 326 dpi. If you have access to Photoshop, creating optimized images is easier. Default.png is the loading screen, the first thing folks see when they launch your app. So for a portrait retina display version of Default.png, I create a new document in photoshop 640px Wide by 960px Height Resolution DPI 326 Add my artwork/logos etc... Then save that file for web and devices in photoshop as [email protected] and place into my BT_Art folder (or BT_Images - if you don't have art folder) in Xcode, replacing the old/blank one already in there. Then to make a standard - non retina version of the same file you created above, I go to the following menu in Photoshop -> Image / Image Size then set the DPI to 163 If constrain proportions is checked, then your image will resize to 320px Wide by 480px Height Then you can save that as Default.png in the same folder. When you reference your icon or image name in Buzztouch, you don't need to enter anything special to use the Retina Optimized images. Simply referencing Default.png is all you need to do. The iPhone will automatically use [email protected] when running on an iPhone 4. You notice a big difference in quality especially in the icons with iPhone 4's Retina Display. I use the Glyphish icon pack: http://glyphish.com/ They include the Retina icons, so it is a snap to add to the project. For example, if I want to use the icon named 01-refresh.png, I simply enter the image name in Buzztouch, the iPhone will automatically use [email protected] for iPhone 4's Retina display. As long as the icons are inside the BT_Images folder in Xcode you should be good to go. Hope this helps a little. Best Regards, Brian-
 
birwin
Lost but trying
Profile
Posts: 93
Reg: Dec 29, 2010
location unknow...
3,080
like
01/14/12 01:53 PM (14 years ago)
Hello @rgtichy Yeah, as Mark said, it is just a higher resolution version of your image files to be delivered to the iPhone 4 & 4S Retina Display. iPhone 3g & 3GS have the following screen dimensions in pixels: 320px Wide by 480px Height and 163 dpi. iPhone 4 & 4S: 640px Wide by 960px Height and 326 dpi. If you have access to Photoshop, creating optimized images is easier. Default.png is the loading screen, the first thing folks see when they launch your app. So for a portrait retina display version of Default.png, I create a new document in photoshop 640px Wide by 960px Height Resolution DPI 326 Add my artwork/logos etc... Then save that file for web and devices in photoshop as [email protected] and place into my BT_Art folder (or BT_Images - if you don't have art folder) in Xcode, replacing the old/blank one already in there. Then to make a standard - non retina version of the same file you created above, I go to the following menu in Photoshop -> Image / Image Size then set the DPI to 163 If constrain proportions is checked, then your image will resize to 320px Wide by 480px Height Then you can save that as Default.png in the same folder. When you reference your icon or image name in Buzztouch, you don't need to enter anything special to use the Retina Optimized images. Simply referencing Default.png is all you need to do. The iPhone will automatically use [email protected] when running on an iPhone 4. You notice a big difference in quality especially in the icons with iPhone 4's Retina Display. I use the Glyphish icon pack: http://glyphish.com/ They include the Retina icons, so it is a snap to add to the project. For example, if I want to use the icon named 01-refresh.png, I simply enter the image name in Buzztouch, the iPhone will automatically use [email protected] for iPhone 4's Retina display. As long as the icons are inside the BT_Images folder in Xcode you should be good to go. Hope this helps a little. Best Regards, Brian-
 
Paddy
Lost but trying
Profile
Posts: 240
Reg: Oct 08, 2011
Hands Up !
12,500
like
01/14/12 02:04 PM (14 years ago)
Thanks Brian, very good explanation.
 
rgtichy
Lost but trying
Profile
Posts: 104
Reg: Oct 14, 2011
Barrington
1,040
like
01/14/12 03:21 PM (14 years ago)
Very good explanation, Brian! Answers all of my question. I saw this info at that link (above), and I had never seen any discussion of this here in the forum.
 
GoNorthWest
buzztouch Evangelist
Profile
Posts: 8197
Reg: Jun 24, 2011
Oro Valley, AZ
1,000,000
like
01/14/12 04:32 PM (14 years ago)
This is an awesome discussion! Thanks for bringing it up! Mark
 
Paddy
Lost but trying
Profile
Posts: 240
Reg: Oct 08, 2011
Hands Up !
12,500
like
01/15/12 12:21 AM (14 years ago)
BTW, should this also apply to photos, like in the Gallery or pics we include in BT_Images folder ? I been using the old 72dpi resolution, but maybe I should change this. Glyphish icons are great, always have the one you need. They also have some nice backgrounds for ten bucks. http://glyphish.com/backgrounds/ Some great free UI elements also at 365psd.com
 
birwin
Lost but trying
Profile
Posts: 93
Reg: Dec 29, 2010
location unknow...
3,080
like
01/15/12 01:58 AM (14 years ago)
Hello, No problem at all! The different resolutions and optimized images adds some grunt work to the process, but it is worth it when you see your razor sharp icons on a retina display. @Paddy - Thanks for the FYI on Glyphish Backgrounds! I need to check that out For gallery images, I have been just keeping them as 72 dpi jpegs, which are fetched remotely off of a server. I size them up a bit larger than the screen dimensions of the iPhone, that way they scale down without loss in quality. At first I tried to make @2x.png images for every photo I included in my BT_Images folder. The project ended up getting too big. Over 20 megs, which doesn't sound like a lot, but when someone is downloading your app from a cell network, it can take a while. I also tried referencing my images remotely with a url in Buzztouch. One thing I forgot to note is that @2x.png images don't work when fetching from remote urls. For example, say you have a header image that you want to reference through a remote url: You created the normal and retina versions iphoneheader.png and [email protected] uploaded them to your server You Add the normal image in your url: http://www.mysite.com/images/iphoneheader.png The @2x.png image won't load, so the Retina display will only see iphoneheader.png, which was meant for the lower res screen of the 3g and 3gs. It's a happy medium. The home screen background on my app changes often and it has to be loaded by a remote url. So I create one version sized for Retina (640px Wide by 960px Height) and save it as a JPEG. Then in Buzztouch Screen Background settings, I set the Background Image Scale / Position to Fullscreen in the drop down box. The image looks good on both the 3g and on the 4s. The 3G will simply scale it down. Anyways, just a few things I have tried out that seem to work. Best Regards, Brian-
 
rgtichy
Lost but trying
Profile
Posts: 104
Reg: Oct 14, 2011
Barrington
1,040
like
01/15/12 07:29 AM (14 years ago)
This really is great info, and we should get it into a document, andhave one of the tutorial guys host it for everyone to read as a reference. Without casting any blame, the info we have just discussed is more useful than the PDF that BT has right now on background images and sizes. I think that this @2x feature of iOS needs to be well understood by all of us, and that Brian has already put enough though into this that he's giving us all a leg up on how it all works! (I wonder whether the iPad will have some similar feature if it ever switches to a size that accommodates 1080HD resolution?)
 
rgtichy
Lost but trying
Profile
Posts: 104
Reg: Oct 14, 2011
Barrington
1,040
like
01/15/12 08:38 AM (14 years ago)
https://docs.google.com/document/d/1njONrTkm9-DrWX0Qi9tIw54BwMFm0NB78c8mQ9lxa4c/edit I wrote this up (quickly) and posted it in Google docs. Currently anyone can comment, but not edit. Brian (and others), if you would check it for errors, and supply changes in comments, I'll edit it and we can finalize the document sometime soon. Then we'll see if we can get it added to one of the user tutorial sites as a reference. Let's keep discussion and questions here, and not in the comments in the doc, okay?
 
rgtichy
Lost but trying
Profile
Posts: 104
Reg: Oct 14, 2011
Barrington
1,040
like
01/15/12 08:40 AM (14 years ago)
GoNorthwest-- Could you explain your post more fully? I'm not sure I even know about default.png or how default*.png works either! -Rob
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.