You are on page 1of 3

iPhone 4S Template Readme ========================= Huzzah!

------Thanks for checking out this iPhone 4S template, which was meticulously handcraf ted 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 re adme file (it's instructive) and keep intact the "Made by @marshallbock" layer i nside 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 t emplates 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 commun ity with a little freebie. What You're Getting ------------------So what's all in this thing, you ask? Some pretty cool stuff, actually. Here's w hat 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 la yer groups. Among them are the three orientation groups: "Portrait," "Angled," a nd "Landscape." Each orientation has two subgroups, "White" and "Black," which relate to the bod y colors. NOTE: Never have both of the body colors visible at the same time for the same o rientation, 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 ge t more nasty jaggies. The 4 and 4S differ only in their bezel seams and button placement, so be sure y ou've got the right one showing. (By default, the 4S body is visible for every o rientation.) The "Background" group at the bottom of the stack contains a white and a black b ackground. Show the one you want, add another color, or hide the background alto gether. 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%, e tc.) to maintain pixel precision at all scales. To scale it down, I'd only recommend reducing to exactly 50%, though, as the lay er styles will render unpredictably at other sub-100% scales. You can aim for s omewhere 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 inc orrectly before CS4 (feathered vector masks); and the screen images are Smart Ob jects, which CS1 doesn't support. Credits -------

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

You might also like