iPhone 5 / iOS 7 grid

Before you just go download it, let me explain the thinking behind the grid.

The iPhone resolutions so far are:

640 ✕ 960   &   640 ✕ 1136

If you want to sub-divide those into the largest possible squares you need to find the highest common divisor. On the iPhone 4 that is 32px, on the iPhone 5 it’s 16px.

Read More

Traditionally designers working on apps or websites, often end up with a lot of duplicated layers that look the same. This is because they’ll design each screen in a separate file, separate artboard, or separate folders within a file.

The result is that if you make any small change to any object on one screen (the object itself, the style or the position) you may need to update the object on the other screens. This can make creating variations and iterations a very slow an painful process - and when things are slow and painful I find that we are discouraged from being fully creative and from improving our designs.

Layer comps solve this problem beautifully! They allow you to toggle visibility position and style of your layers and save those states. So any layer used in one of your screens can be used again in your other screen. No more duplicate stuff to manage!

I hear some of you saying “but I can just use symbols / smart objects!”. Well, sure that helps, and you probably want to use them anyway. Bu if you want to move a title 2 pixels up in one screen, and have it be a different color in some screens but not others, Smart Objects won’t help you much.

On the latest Photoshop CC update released on the 18th of June, Layer Comps got a lot more powerful and in this video I show you how I use them.

Here are the PSDs used in this video if you want to explore

Date Picker: https://db.tt/yKcxztvK

Buttons: https://db.tt/xaQIDSzr

Time Travel App: https://db.tt/B43rb8c4

If you have any questions, please let me know in the comments or on twitter either on @phtshp or @edwardsanchez.

ShortcutMapper

Pretty nifty way to visualize default shortcuts for Photoshop and other apps!

Quick tip on a better way to create divider lines using text dashes instead of vector lines.

One more thing I forgot to mention in the video is that you should select NONE for text antialiasing, otherwise the lines may appear blurred with half pixels.

Play with different fonts to get different a line thickness.

Digital Font Rendering Options

I recently heard that not many people know about this feature, even though it’s been around for about a year.

Photoshop didn’t use to render fonts very well for digital mediums, which use sub-pixel rendering to anti-alias fonts - making them appear slightly thicker but not as thick as the “Strong” settings.

As a result, if you wanted to mock-up a website or app, the font rendering options never quite matched the way fonts appear when loaded on a browser or mobile device.

Photoshop then added two new rendering options, Mac LCD and Mac, which solves the problem beautifully!

Non-Linear History is a hidden feature that can be very useful for iterating!

Introducing Asset Handoff

layervault:

Today we released something called Asset Handoff that bridges the gap between design and development. We’re excited to show it to you.

Read More

Source: layervault