The app feels very instagram-esque, with easy sharing, and a way to view popular and recent cinemagraphs people have taken. For how cool the results are, it’s actually suprising how the fast the process is from start to end. You simple take a short video, mask out the section where you want to indicate movement, and add one of the many filters to add some character to the photo.

Here’s one I shot on the way to my car a few days ago.

While the load time on some of the images can be fairly large, it’s a pretty fun free app. You can check out some featured cinemgrams here, or download the app for free.

It’s super simple in it’s layout and style and lends itself perfectly to the game. Check out the video for a brief runthrough of the app.

Instead of going into depth on why I like it so much, take a look at this short video where the developer gives a little tour through the app.

Sounds simple enough, but you’ll have to be careful not to go overboard as noise can just straight up ruin your image. Here is safe way to add noise that isn’t destructive which will easily allow you to tweak settings if you feel like it later.

Here is a gradient I was having problems with yesterday. You’ll find the banding more noticeable when you have similar colors in a 2 color gradient, and the distance between the two is relatively far.

Lets start off by converting the gradient to a smart object by right clicking on the layer.

Then lets add some noise to the smart object by selecting Filter > Noise > Add Noise

Now the goal is to make this as subtle as possible, so lets only add 1%.

Looks like the banding is gone, but even at 1%, the image looks way too noisy. Since we added the noise on top of a smart object, we can easily modify attributes of the noise on the fly including the amount, and transparency. Since we already have the lowest amount of noise available, we’re going to reduce the transparency to make it a bit more subtle. If you look in the layers palette, you’ll now notice a little levels icon underneath our smart filter.

Double clicking that will allow us to edit the transparency of that smart filter alone. At this point you’re going to want to knock back the opacity to a nice middleground where the noise isn’t obvious, and the banding is gone. In this case, I’ll set it to 50%.

If you’re experiencing banding when you’re saving or compressing your images, another solution is to add noise to the channel where the banding is most prominent. There are a couple extra steps involved, but the end result is much more subtle and worthwhile.

HTML/CSS

• Awwwards
• Best Web Gallery
• CSS Based
• CSS Drive
• CSS Elite
• CSS Heaven
• CSS Line
• CSS Mania
• CSS Remix
• Design Fridge *
• Make Better Websites
• Unmatched Style
• Screenfluent
• siteInspire
• The Best Designs
• TheFWA

Web Mobile

• TheFWA Mobile
• Mobile Awesomeness
• CSS iPhone
• jQuery Mobile Gallery

iPhone, iPad & iOS

• iOSpirations
• Mobile UI Patterns
• Pttrns
• TapFancy
• TappGala

* If it’s starred then that means an editor favorite. Please feel free to comment if you feel one is missing. Granted there are also a lot out there so we may not post all galleries.

Clear is a minimal to-do list app that stands apart from the competitors with it’s simple interface and gesture based navigation. As interaction designers, we’re always looking for fun and intuitive ways to allow the user to navigate through content, while always having usability at the forefront. Clear does an exceptional job at introducing gesture based navigation for every task through the app, while making it easy and fun at the same time.

Check out a video of the app in use, or spend the buck and play with it yourself.

Rarepad wireframe templates

We designed these 11×17 templates to quickly sketch down ideas during the wireframe process. Download them, print a bunch, and start sketching.

Download them here.

iOS5 GUI PSD

Teehan & Lax have been putting out these hi-res templates for iOS for a couple years now, and we use them all the time if we need to drop in some standard iOS controls without having to recreate the element ourselves.

Download them here.

Liveview

Designing for the retina screen can be a little bit deceiving when you’re looking at it on your monitor due to the difference in pixel density. To ensure the design is looking how it should, we utilize an app called liveview which displays what you’re working on directly on the device. Handy.

Download it here.

Bjango Photoshop actions

I design all of my apps at retina resolution, then when it’s time to export assets for standard resolution, I can just use one of these actions and it will scale everything appropriately. The only thing to note is that you should constantly be aware that you need to have all attributes (drop shadow values, sizes, ect.) in multiples of 2 so that they are scaled down in the cleanest way possible.

Download them here.

App icon template

This icon template is amazing for quickly creating and exporting icons at all required sizes you need for your app store submission, as well as a couple other cool features.

Download it here