

iPhone 4S Template Readme
=========================


Huzzah!
-------

Thanks for checking out this iPhone 4S template, which was meticulously handcrafted for your enjoyment by @marshallbock. Hope you dig it :)

It's cool if you wanna share the template, but if you do, please include this readme file (it's instructive) and keep intact the "Made by @marshallbock" layer inside the PSD. That's it. Thanks!


Contents
--------

* Why Another iPhone Template
* What You're Getting
* How to Use
* Scaling
* Compatibility
* Credits


Why Another iPhone Template?
----------------------------

First off, the iPhone 4S just came out, so somebody had to update the existing templates anyway.

Secondly, none of the templates I've seen have met my OCD expectations for pixel perfection and accuracy to the product dimensions. Maybe you're like me.

But mostly, it was fun! Plus, it's always nice to give back to the design community with a little freebie.


What You're Getting
-------------------

So what's all in this thing, you ask? Some pretty cool stuff, actually. Here's what you're getting:

* Both 4 and 4S models
* Both black and white body colors
* Portrait, landscape, and angled orientations
* Every combination of the preceding bullet points
* Rendering that matches Apple's product images as closely as possible
* Created at high res scale for Retina Display
* Made entirely of vectors and layer styles for scaling up
* Full alignment to a 2px grid for pixel precision at 50% scale
* Screen images as Smart Objects for inserting your own screenshots
* Clean, organized, color-coded, well-named groups and layers
* All of the above FOR FREE :D


How to Use
----------

When you open iPhone4STemplate.psd for the first time, you'll see some nested layer groups. Among them are the three orientation groups: "Portrait," "Angled," and "Landscape."

Each orientation has two subgroups, "White" and "Black," which relate to the body colors.

NOTE: Never have both of the body colors visible at the same time for the same orientation, otherwise you'll get some nasty jaggies on the rounded corners.

Inside each body color group is another set of subgroups. The important ones are color-coded for your convenience.

The "Screen" group includes a green Smart Object named "Display," which is where you can place your Retina-sized screenshots.

Further down, you'll see two red groups named "4S Body" and "4 Body." Just like with "White" and "Black," never show both of these at the same time or you'll get more nasty jaggies.

The 4 and 4S differ only in their bezel seams and button placement, so be sure you've got the right one showing. (By default, the 4S body is visible for every orientation.)

The "Background" group at the bottom of the stack contains a white and a black background. Show the one you want, add another color, or hide the background altogether. It's up to you.

It's easy. Make visible the body model and color in the orientation you prefer, insert your screenshots, and you're set!


Scaling
-------

When scaling this file, make sure to do it using "Image Size..." with the "Scale Styles" checkbox enabled.

To scale it up, I'd recommend targeting an interval of 100% (200%, 300%, 400%, etc.) to maintain pixel precision at all scales.

To scale it down, I'd only recommend reducing to exactly 50%, though, as the layer styles will render unpredictably at other sub-100% scales.  You can aim for somewhere in-between, but no one likes split pixels.


Compatibility
-------------

This template was made using Photoshop CS5. It should open just fine on earlier CS versions with a couple caveats: the shadows under the devices will render incorrectly before CS4 (feathered vector masks); and the screen images are Smart Objects, which CS1 doesn't support.


Credits
-------

This thing was made by Marshall Bock. Follow on Twitter: @marshallbock. Or see more stuff at http://marshallbock.com.

Enjoy :)

