iPhone 5 PSD Template

iPhone 5 Device PSD Template

The iPhone 5 is an amazing, well-designed, and versatile device. However, as usual, it’s extremely hard to find good lossless pictures of the device for use in promotions, blog posts, and on websites. The press graphics provided by Apple itself have very strict licensing and only scale so far since they’re already rendered and you don’t get access to the source files.

Given that most of this iPhone’s design will most likely stick around for at least 2 years to come, I thought it made sense to spend some time on making a fully vector based replica of it to save time for designers working on apps and websites for the iPhone 5.

This illustration was made in Photoshop to ensure pixel perfection but is composed entirely of vector based or scalable elements. You can literally use Image Resize to scale this image up to be as tall as yourself at 300dpi with the same level of detail and no pixelation. For convenience the template is fitted at Retina resolution, so you can easily drop in iPhone 5 screenshots of apps/websites into the template without having to resize the device itself to fit.

Download PSD Template

Download iPhone 5 PSD Template (zipped .psd, ~54MB)

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Couldn’t find any better license than this. You’re free to use the artwork and modify it however you want for both personal and commercial use.

Information

These instructions are also embedded in the PSD template itself.

  • Right-click on the Smart Object the PSD opens to in the Layer palette and choose Replace Contents to fit your screenshot snugly in the frame.
  • The guides in the PSD are fitted to be exactly 640x1136px.
  • There are three pre-set slices in the PSD, two for exporting the entire device with padding and one for exporting the screen only.
  • A sample status bar exists in the “Screenshots” folder, use it to apply a custom carrier, time, and battery life.
  • There are two device shadows included: one that indicates a device balancing on it’s edge and one for when it’s laying flat on a surface.
  • Three backgrounds are bundled, disable all to get a transparent backdrop.
  • A device reflection is also included. Use in moderation!

Enjoy and happy shoppin’.

My favorite Photoshop Shortcuts

Recently I had the opportunity to give a new Photoshop user some pointers on how to use the program. One thing that I think is very important to get used to early on is to use keyboard shortcuts for as many actions as possible. The amount of time it saves over time is astounding.

Here are my most used Photoshop shortcuts, with notes.

CMD + 1
Zooms to 100%! Genius! Tip: CMD + 0 zooms to “Fit Screen”.

CMD + S
Do this a lot.

CMD + Shift + S
Save As.. useful for saving a copy, or if you need a non-optimized version of the file for use elsewhere.

CMD + Shift + Alt + S
“Save for Web & Devices”. Your best friend when you go on to create purpose-filled pixel fighters optimized for the web. Just make sure you further compress those .png’s with another application afterwards, to keep file sizes at an absolute minimum.

Spacebar
Holding the spacebar is a quick way to temporarily use the Hand tool (H). This allows you to drag around a section of your image without losing the tool you were working with – release the spacebar and you’re back.

F
Circle Screen Mode. This allows you to quickly switch between Standard Screen mode (with the tabs showing), Full Screen Mode With Menu Bar, and Full Screen Mode. I prefer the full screen mode with the menu bar, since it handles zoom the best and best leverages the limited pixels on my laptop screen.

Tab
Toggles the entire Photoshop interface. Very useful for small screens, this way you can get more screen space instantly when working on something bigger.

Control + Tab
Circle open Photoshop documents. (Instead of using the tab bar, which can be hard.)

CMD + Alt + Z / CMD + Shift + Z
Face it. Even with your mad Photoshop skills, you’re going to want to correct things from time to time. This bad boy will step back/forward in History for you, and effectively kills and buries CMD + Z.

0-9
Pressing any number between 0-9 will change the opacity of the selected layer, where 0 = 100%. Example: pressing 5 will set the opacity to 50%. Example 2: pressing 3 and then 5 quickly will set the opacity to 35%.

Shift + 0-9
Does the same as above, but instead sets the Fill opacity – handy if you work with layer blending options a lot.

Z
Zoom. Zoom in/out by either clicking+holding and then dragging (right to zoom in, left to zoom out), or by clicking repeatedly – and holding Alt to zoom out. I recommend only using the click and drag function to get to somewhat the right zoom level, and then making sure you’re at an even % zoom for best pixel editing power.

V
Move Tool. Move dat layah. Tip: while using the Move Tool, try holding CMD and clicking an element on the canvas. This will, with some luck, select that element in the Layers palette.

M / Shift + M
Rectangular / Oval marquee tool (selection). Select non-vector elements. Do crazy stuff.

G / Shift + G
Gradient / Paint Bucket (fill) Tool. Quick ways to draw gradients and fill selections (and more) for non-vector elements.

C / Shift + C
Crop / Slice / Slice Select tool. I don’t use Crop much at all, but Slices are a gift from heaven. Don’t crop your entire .psd to get single images ready for the web – use slices instead!

T
Mr. Double T as in Text Tool. Make that mockup come alive with some old-school latin vibes.

U / Shift + U
Rectangle / Rounded Rectangle / Ellipse / Polygon / Line / Custom Shape Tool. I generally prefer to use vector shapes for large interface elements – it’s just faster and more versatile. Especially when things like rounded corners are not usually done using rendered graphics anymore.

P / Shift + P
Pen Tool / Freeform Pen Tool. I really only use this to modify existing vector elements (see U). Tip: with a path selected and using the Pen Tool, hold Shift to temporarily turn it into the Convert Point Tool, allowing you to delete bezier curves, as well as transforming them.

A / Shift + A
Path Selection / Direct Selection Tool. Your best friend when dealing with vector elements in Photoshop. Just like in Illustrator, these allow you to select and manipulate a full path, parts of it, or individual curves. Tip: while using the Direct Selection Tool, hold Shift to select multiple points to manipulate.

D
Sets foreground/background color to default (black/white).

X
Swaps the foreground/background colors.

CMD + I
Inverts the current layer. Very useful if you need some contrast to be able to match up overlapping layers. Inverting again will of course bring the layer back to it’s normal colors without harm. Tip: for more precise matching of those “onion layers”, lower the opacity of the inverted layer when aligning.

CMD + T
Free Transform! Takes the layer’s contents (or the selected paths in a vector element) and puts them in free transform mode.

CMD + A
Select All. Selects the entire canvas. Tip: CMD + D deselects the canvas again.

CMD + N
New document. Very, very useful shortcut. Since Photoshop defaults to the size of any content in the clipboard, this is a great way to quickly check for pixel level imperfections and making sure elements align.

CMD + Shift + Alt + N
New layer (without dialog). Huzzah! Welcome newborn.

CMD + J
New layer via copy (duplicating). Beats drag and drop!

CMD + G
Group selected layers. Very handy way to quickly organize things. A tidy house makes for peace of mind (and a better shot at finding what you’re looking for 3 years from now).

CMD + E
Merge layers. Merges the selected layer with whatever is under it, unless it requires rasterizing.

CMD + H
Temporarily hide all guides and slices on the canvas. “Only show ’em when you need ’em.”

CMD + R
Show/hide rulers. This is the quickest way I know to double check that measurements are in the format I need (pixels, millimeters, centimeters, etc). Right click the ruler to bring up a small menu. Also useful for a basic sense of where you are, and creating guides. Tip: to create a guide, start dragging from either ruler. You can toggle between horizontal/vertical guides by holding Alt.

CMD + F
If you’re using Filters, this applies the last used filter again. Can be handy if you’re making minimal changes using a blurring filter or similar. Or to just mess up a picture completely. That’s always fun, too.

Did I miss any? What’s your most used shortcut?

WordPress for webOS released

A few days ago we were finally able to announce WordPress for webOS to the public. It’s a neat app made solely for the new HP TouchPad. Most of the work was done by Beau Collins, a great developer based in Seattle WA. My contribution to the project was mainly to make the app as suave as possible, and coordinating the launch.

It’s hard to design for a platform that barely exists. UI Guidelines gets updated while you’re working on conforming to them. I didn’t have a device myself, so most of my testing was done in an emulator and webkit-powered browsers. That’s the other thing about webOS, the name implies that it’s web-based – and it pretty much is. It uses web technology for almost every aspect in the app building process. For instance, changing the font size in a particular element within the app is as simple as writing a few CSS rules. Altogether, this enabled me and others working on the app to iterate very quickly and build powerful features in a very small timeframe.

A word of advice though, webOS is based on Enyo (JavaScript framework), HTML5, and CSS3 – but not everything works like you would expect it to. I’ve found the support for CSS3 rules to be spotty. While you can apply things like border-radius and gradients, as well as border-image, there is no support for box-shadow or even text-shadow. At one point I spent hours perfecting the look of some buttons with nested inset box-shadows, gradients, rounded corners, which all looked great in a browser. However when compiled, the buttons turned out very plain as most of these rules are not supported on an OS level.

WebOS is struggling with performance, and avoiding things that are heavy to render (such as box-shadow and text-shadow) makes a lot of sense to speed things up, but it’s annoying to have some of the most powerful rules taken away from you when working with web technologies.

As we release new revisions of the app, I’ll keep you posted about development tips and pitfalls from a designer point of view.

Find out more about WordPress for webOS here: webos.wordpress.org

New, flashy user menus for IntenseDebate!

User menu design for IntenseDebate by Isaac KeyetA few days ago we went live with some new user menus for the IntenseDebate plugin. I’ve made the design of course, and while they’re meant to resemble the looks of the old menus in a lot of ways, there are some notable differences. The most striking change is of course the avatar being a part of the popup as this was not the case before. An enlarged avatar gives the reader a more personal and complete insight in a user profile.

The goal for the redesign was to remove non-vital elements from the menu, items that you’re probably not interested in until you know the other stuff anyway. It now shows the username in large letters, along with the reputation meter. If you have enabled your latest twitter messages, and have a description as well, now both will show – not one or the other like it was before. This is true for the IntenseDebate.com profile as well.

Of course I’m going for pixel-perfect, clean, and with fancy effects once you notice them. Hint: The “border” around the avatar is actually a semi-transparent sweet-looking box, and all buttons have fancy :hover and :active effects. All in a single CSS sprite of course. Hope you like it!