Photoshop Templates for iPhone 6 (Safari & Chrome)
Things have switched up again on us here in the world of iPhone designery. While we should all be learning or by now have learned how to be pixel independent, sometimes you just want a nice little template that tells you how many pixels you’re working with.
Thus, I present to you a sweet and simple Photoshop template that is accurate for both designing mobile sites in Safari and Chrome for iOS 8. Resolution on the new iPhones is complex at best, and I’m still working to completely decipher the exact specificity of how you multiply something like a pixel, divide it up a little less, and then expect a web designer to just feel good about himself at the end of the day.
Chrome for iOS 8 on an iPhone 6 offers up some additional screen real estate.Regardless, I feel this is an accurate PSD template because all I did was take a screenshot of a web page loaded into Safari and Chrome, and then make it simple to see how much space you’ve got to work with. Also, it ain’t no big thing.
Essentially though, if you’re working in Photoshop, we’re talking 640 x 1136 pixels to work with. In Chrome, that means 640 x 1008 pixels of visible screen real estate. In Safari, it’s a slightly lower 640 x 920 pixels.
To use this super basic template:
- Download the file
- Open it in Photoshop
- There are two folders: Chrome & Safari, pick one.
- Probably delete the text I have in there explaining the black rectangle…
- Otherwise, that’s your useable space.
Note that it comes down the pipe as a ZIP file.
If you want to get crazy deep into how resolution now works on iPhones, check this out.