{"id":3398,"date":"2012-04-24T00:00:00","date_gmt":"2012-04-23T22:00:00","guid":{"rendered":"http:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/"},"modified":"2012-04-24T00:00:00","modified_gmt":"2012-04-23T22:00:00","slug":"how-to-slice-a-psd-for-use-with-iphone-ipad","status":"publish","type":"post","link":"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/","title":{"rendered":"How to slice a PSD for use with iPhone & iPad"},"content":{"rendered":"

If you are designer doing iOS interfaces and want to help your developer, these guidelines are for you.<\/p>\n

    \n
  1. Slice both a regular and retina version.<\/li>\n
  2. Retina files are postfixed with “@2x.png” (for “two times”) e.g. “account.png” vs “account@2x.png”<\/li>\n
  3. Retina files must be placed in same folder as its non-retina brother<\/li>\n
  4. Retina dimensions must be dividable with 2 e.g. 25×13 is not a valid retina dimension but 26×14 is fine<\/li>\n
  5. All files should be of type PNG (24bit if necessary)<\/li>\n
  6. Background files might be in JPG too (saves on file size)<\/li>\n
  7. Use transparency if needed – no<\/em> background color<\/li>\n
  8. All files must be lower-cased<\/li>\n
  9. All files must not<\/em> include any spaces<\/li>\n
  10. Separate filenames with dashes if necessary e.g. “black-box.png”<\/li>\n
  11. Group files in folders if needed e.g. “icons\/account.png”, “backgrounds\/washed.png”<\/li>\n
  12. Keep folder structure after delivery to developer and update files in that structure if needed<\/li>\n
  13. Animations must be postfixed with a number e.g. “anim_0.png”, “anim_1.png”, “anim2.png”, etc. (retina would be “anim_0@2x.png”, “anim_1@2x.png”, etc)<\/li>\n
  14. Inform developer of any special masking necessary<\/li>\n
  15. Slice each image with zero margin\/padding i.e. keep to size of image<\/li>\n<\/ol>\n

    An additional tip for Mac users. Download Slicy<\/a> from macrabbit. It’s an incredible cool tool which slices your PSDs automatically based on your layer naming.<\/p>\n

    Let me know in the comments if you have more suggestions I need to put on the list.<\/p>\n","protected":false},"excerpt":{"rendered":"

    If you are designer doing iOS interfaces and want to help your developer, these guidelines are for you. Slice both a regular and retina version. Retina files are postfixed with “@2x.png” (for “two times”) e.g. “account.png” vs “account@2x.png” Retina files must be placed in same folder as its non-retina brother Retina dimensions must be dividable … Continue reading How to slice a PSD for use with iPhone & iPad<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","spay_email":"","jetpack_publicize_message":""},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"yoast_head":"\nHow to slice a PSD for use with iPhone & iPad • Peter Theill Site<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to slice a PSD for use with iPhone & iPad • Peter Theill Site\" \/>\n<meta property=\"og:description\" content=\"If you are designer doing iOS interfaces and want to help your developer, these guidelines are for you. Slice both a regular and retina version. Retina files are postfixed with “@2x.png” (for “two times”) e.g. “account.png” vs “account@2x.png” Retina files must be placed in same folder as its non-retina brother Retina dimensions must be dividable … Continue reading How to slice a PSD for use with iPhone & iPad\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/\" \/>\n<meta property=\"og:site_name\" content=\"Peter Theill Site\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-23T22:00:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@theill\" \/>\n<meta name=\"twitter:site\" content=\"@theill\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.theill.com\/#website\",\"url\":\"https:\/\/www.theill.com\/\",\"name\":\"Peter Theill Site\",\"description\":\"What\\u2019s going on in the personal life of Peter Theill\",\"publisher\":{\"@id\":\"https:\/\/www.theill.com\/#\/schema\/person\/d65d009363af2cc0a150b55dc20fa301\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.theill.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/#webpage\",\"url\":\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/\",\"name\":\"How to slice a PSD for use with iPhone & iPad • Peter Theill Site\",\"isPartOf\":{\"@id\":\"https:\/\/www.theill.com\/#website\"},\"datePublished\":\"2012-04-23T22:00:00+00:00\",\"dateModified\":\"2012-04-23T22:00:00+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.theill.com\/#\/schema\/person\/d65d009363af2cc0a150b55dc20fa301\"},\"headline\":\"How to slice a PSD for use with iPhone & iPad\",\"datePublished\":\"2012-04-23T22:00:00+00:00\",\"dateModified\":\"2012-04-23T22:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.theill.com\/#\/schema\/person\/d65d009363af2cc0a150b55dc20fa301\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.theill.com\/#\/schema\/person\/d65d009363af2cc0a150b55dc20fa301\",\"name\":\"Peter\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.theill.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f4f96a08152550e603ee595403f3ba57?s=96&d=retro&r=g\",\"caption\":\"Peter\"},\"logo\":{\"@id\":\"https:\/\/www.theill.com\/#personlogo\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_shortlink":"https:\/\/wp.me\/p8TYI1-SO","jetpack-related-posts":[{"id":3410,"url":"https:\/\/www.theill.com\/blog\/2010\/08\/18\/upgraded-shoutsms-from-rails-2-3-8-to-rails-3-in-five-minutes\/","url_meta":{"origin":3398,"position":0},"title":"Upgraded ShoutSMS from Rails 2.3.8 to Rails 3 in five minutes","date":"August 18, 2010","format":false,"excerpt":"Today I wanted to try how easy it would be to upgrade our existing ShoutSMS (pretty small) rails application from 2.3.8 to latest Rails 3 release candidate (currently rc3). Without taking our test suite into consideration it took around five minutes with help from the official rails_upgrade[1] plugin. This is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3417,"url":"https:\/\/www.theill.com\/blog\/2009\/03\/16\/upgrading-rails-engines-project-to-rails-2-3-2\/","url_meta":{"origin":3398,"position":1},"title":"Upgrading Rails Engines Project to Rails 2.3.2","date":"March 16, 2009","format":false,"excerpt":"My lifestyleapps project (still in very early beta) was running Rails 2.2.2 with the Rails Engines plugin ten minutes ago. Today, Rails 2.3.2 was released so I decided to try if I could easily upgrade it and avoid using the Rails Engines plugin anymore. It was beautiful simple and took\u2026","rel":"","context":"In "development"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3401,"url":"https:\/\/www.theill.com\/blog\/2011\/04\/30\/how-to-hide-icon-in-your-dock-for-any-mac-application\/","url_meta":{"origin":3398,"position":2},"title":"How to hide icon in your dock for any Mac application","date":"April 30, 2011","format":false,"excerpt":"Just got a beta of a Mac notifier for Podio and didn\u2019t like it showed both an icon in my menubar and my dock (sometimes also referred to as the taskbar). If you want to avoid having any Mac application shown in your dock, it\u2019s possible to patch its package\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3406,"url":"https:\/\/www.theill.com\/blog\/2010\/10\/27\/how-to-backup-redmine-on-google-storage\/","url_meta":{"origin":3398,"position":3},"title":"How to backup Redmine on Google Storage","date":"October 27, 2010","format":false,"excerpt":"If you would like to backup your Redmine database and files, you might to consider Google Storage as your backup location. It comes with a 100 GB free monthly usage. First, you need to sign up for a Google Storage account if you don\u2019t have an account already. Once done,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3407,"url":"https:\/\/www.theill.com\/blog\/2010\/09\/02\/using-vi-for-your-simple-day-to-day-editing-needs\/","url_meta":{"origin":3398,"position":4},"title":"Using vi for your simple, day-to-day editing needs","date":"September 2, 2010","format":false,"excerpt":"My favorite editor isn\u2019t vi, but I\u2019m still using it at least a couple of times each day. It\u2019s a short two character command, it\u2019s always available and it starts fast. I have used it for decades and still, I only know these commands. I really don\u2019t need to learn\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3414,"url":"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/","url_meta":{"origin":3398,"position":5},"title":"Facebook CSS for will_paginate gem","date":"January 27, 2010","format":false,"excerpt":"Today I needed to add pagination to my Danish beta application for handling your accounting called Hurtigmoms. Since I'm developing in Rails it was a logically choice to use \u201cwill_paginate\u201d to support pagination. Our prototype layout is using a Facebook header and so I wanted my pagination control to mimic\u2026","rel":"","context":"In "development"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"amp_validity":null,"_links":{"self":[{"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/posts\/3398"}],"collection":[{"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/comments?post=3398"}],"version-history":[{"count":0,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/posts\/3398\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/media?parent=3398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/categories?post=3398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/tags?post=3398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}