The Comm Pile

iOS Background Images

Joseph DiPaolo — Tue, 21 Jun 2011 16:12:37 +0000

Many of the interface screens, and the gameplay for that matter, in Puppy Hunt involve full screen background images. I wanted a quick and easy way to create these images, and see exactly what they would look like on the various screen sizes.

So, in Photoshop, I started with an assumed iPad Retina screen resolution. It makes sense that it would be double the current iPad’s resolution, just like Apple did with the iPhone Retina screen. So we start out at 1536 x 2048 for the iPad Retina, then scale down to 768 x 1024 for the iPad. Then we go to 640 x 960 for the iPhone Retina, and finally 320 x 480 for the original iPhone screen. For both the iPhone Retina and the iPhone screen sizes, we crop some to account for the difference in ratios to length/width.

Also, all of the scaled down versions are slightly oversized (and cropped) because you will sometimes get some transparency added to the edges by Photoshop’s scaling algorithms. So keep this in mind when creating your original background. Any borders around the edges that you want shouldn’t be created inside the “Original” smart object, but should instead be tailored for each resolution in the main file.

Here are the photoshop files in landscape, and portrait (the actual photoshop files behind the links have my own artwork removed):

iOS Backgrounds Landscape

iOS Backgrounds Portrait

Facebook Like Buttons

Joseph DiPaolo — Mon, 20 Jun 2011 13:58:56 +0000

So, same story as the Twitter Follow buttons. Wanted a Facebook like button in Puppy Hunt that resembles the button everybody is used to seeing on websites. But at only 20 pixels high it would be tiny on both the iPad and iPhone Retina screens. I don’t even want to think about how absurdly small it would be on any possible future iPad Retina screen.

So I created a much higher resolution replica of the real thing. 4x higher to be exact. Then I scaled that replica back down to 3x, 2x, and 1x (to compare to the original), and here are the results:

Facebook Like button at 78 x 188 pixels	Facebook Like button at 60 x 145 pixels
Facebook Like button at 41 x 98 pixels
Facebook Like button at 20 x 49 pixels	Original Facebook Like Button

Compare the two on the bottom. The one on the left is my button scaled down to the original size. It’s a bit fuzzy, and not exact, but I think it compares pretty well. If you want an original sized button, just use the original

If you think you can do better, feel free to download the source photoshop file and tweak it. Let me know how it turns out!

Facebook_Highres_Buttons.psd

Twitter Follow Buttons

Joseph DiPaolo — Sun, 19 Jun 2011 13:54:32 +0000

So I wanted to add some twitter follow buttons to Puppy Hunt but ran into a dilemma. I wanted to use the official twitter follow button that everybody is used to seeing from the web, but it is only 20 pixels high by 61 pixels wide. That would work just fine on the original iPhone screen resolution, but would be a pretty small button on the iPad. It would also be positively tiny on iPhone 4′s Retina screen.

So I set out to replicate the follow button as true to the original as possible, but in much higher resolution. Following are the results of my trials and tribulations.

Twitter Follow Button at 80 by 244 pixels	Twitter Follow Button at 60 by 184 pixels
Twitter Follow Button at 40 by 123 pixels
Twitter Follow Button -- Original Size	Original Twitter Follow Button

If you compare the bottom two, the one on the left is my twitter button scaled down to the original size. The one on the right is the original twitter button. They aren’t exactly the same, but they are pretty darn close. If you think you can do better, download the source photoshop file below, tweak it, and let me know how you do.

Twitter_Highres_Buttons.psd

Enjoy!!

Introducing The Comm Pile

Joseph DiPaolo — Sun, 19 Jun 2011 01:17:10 +0000

After many hours of work, sweat, and occasional whimpering in the corner our web site redesign is finally done. That includes this nifty new wordpress blog that we snazzed up with our mad css skillz.

Now it’s time to get back to the mines and dig up a major update to our flagship product Puppy Hunt. Work had actually already begun, but in the process we came up with a few helpful photoshop files that we thought the iOS community would like. Since some of them were inspired by Cocoia’s iPhone 4 icon PSD, we figured we would stop being jerks for once and give back by making our top sekrit files available to the internets at large.

So we got totaly side tracked and decided to add an official blog to our recently buffed website, cause we need a place to show off. Hence this blog, and this post.

P.S. Some helpful PSDs coming soon!!