Command-Tab » Photoshop

iPhone 512×512 Icon Template

Collin — Sat, 04 Apr 2009 18:59:45 +0000

If you’ve downloaded my iPhone and iPod Touch icon Photoshop template in the past, you may want to re-download it, as a larger version has been added. It now comes with the standard 57×57 iPhone springboard template as well as a 512×512 version for producing iTunes-ready artwork.

Sexy Music Album Overlays

Collin — Fri, 27 Mar 2009 20:55:27 +0000

If you’re an avid fmTuner user, or just have a need to make some flat music album covers pop off the page, check out Rogie King’s in-depth tutorial on how to make gorgeous web-ready image overlays. Complete with a free set of covers you can use anywhere and the necessary CSS (even IE6 fixes), Rogie’s tutorial will have your displayed albums looking shiny and spectacular in no time!

iPhone and iPod Touch Icon Template

Collin — Sun, 21 Sep 2008 00:09:19 +0000

While working on some iPhone and iPod Touch apps, I found that the iPhone OS automatically masks and overlays your application icon for quick and easy development. You supply a square 57×57 pixel image, and it rounds off the corners and overlays the Mac-like gloss to create a consistent look.

When developing an icon for a Touch-based application, it’s handy to be able to see what your rendered creation will look like without going through the hassle of exporting your icon, compiling your code, and running your software every time a change is made. To that end, I present a small Photoshop file which very closely mimics the iPhone-applied mask and gloss, which you can place over top of your in progress icon layers to approximate the final result. Also, if you dislike the gloss, or have something special in mind, you can set a certain flag in the application’s Info.plist to disable the gloss… I hope my Photoshop file will help others create great looking Touch app icons!

April 4, 2009 Update
By request, I’ve added a 512×512 version of the template as well, so you can get a good feel for what your icon will look like when displayed in iTunes. Both files are now combined in a zip archive, downloadable below.

Photoshop Tip: Zoom While Transforming

Collin — Sun, 02 Mar 2008 22:40:13 +0000

When you use Adobe Photoshop day in and day out, certain things about its interface and workflow start to grate on you, like the inability to zoom while in the middle of a transform or applying Layer Effects. Much to my delight, Photoshop is also jam packed with hidden commands and modifier keys, which turned up a discovery today, shown here:

If you’re in the middle of a Transform or Layer Effects change and need to get your changes just right, you can adjust your view simply by holding the correct keys and using your mouse. On the Mac, hold Space and drag to pan around the background window. Command-Space-click on the document to zoom in, and Command-Option-Space-click to zoom out. Note that some of these key combos collide with the system-wide Spotlight commands, so you may consider remapping them in System Preferences, depending on your usage of each. Personally, I’ve moved Spotlight to Control-Space just to use these great hidden features of Photoshop.

Font Finders

Collin — Wed, 06 Jun 2007 00:28:32 +0000

For the graphic designers and Photoshop enthusiasts, here are a few resources for identifying fonts:

WhatTheFont
WhatTheFont is far and away my favorite tool in the bunch primarilty because it’s automated, fast, and shockingly accurate. Just upload an image (the more contrast, the better) or provide a URL and their software will match characters and, more often than not, the correct font name.

WhatTheFont Forum
If fully automated solutions are of no help, you can always call upon others in the industry who deal with typefaces every day. Someone out there knows about your font, and the WhatTheFont Forum is one of the best places to get a good response.

Identifont
Identifont helps you find fonts by asking multiple questions about the font you’re looking for. It’s a unique approach that, in my usage, works about 30 to 40 percent of the time. As a last resort, it may very well come through, despite it’s apparently limited font selected.

Aqua Spinners

Collin — Mon, 22 Jan 2007 04:33:43 +0000

While we’d all like our software and web pages to have instantaneous results, the reality is that some computer operations take a noticeable amount of time. When that happens, it’s good practice to display an icon or message indicating that your desired action is happening, and that your computer hasn’t simply ignored your obviously stressful request. For those developing software or web-based applications, here’s a small collection of Mac-like spinners of varying formats, including animated GIF and PNG image sequences (in filmstrip style). Just one collection of the many bits of “I might be able to use this one day” junk I collect while browsing the web or disassembling applications…

Dugg Stories Photoshop

Collin — Wed, 02 Nov 2005 11:02:40 +0000

I updated the style of the Dugg Stories area, adding a white background for the items and a footer with links to my Digg RSS feed and Digg.com. Here is the final (hopefully!) version of my Photoshop file that went into the creation of the Digg sidebar area. In it you’ll find all the layers making up the header, middle, footer, and text elements, along with a few items that were created but not used. Enjoy!

Dugg Stories

Collin — Tue, 01 Nov 2005 11:43:51 +0000

For the past day or so, I’ve been thinking about creating a WordPress plugin to display recently “dugg” stories from Digg.com. Then I remembered that Digg offers RSS feeds for each individual user, so you can keep up on items your friends are interested in. Writing a whole plugin to display a simple, styled RSS feed is overkill, and more work than I want to do.

Browsing around for a simpler solution, I discovered the highly configurable Feed2JS, which will take RSS data and display it using JavaScript. After tinkering in BBEdit and Photoshop for about half an hour, I had my newly created Dugg Stories section up and running, complete with RSS caching. The results of my efforts can be seen at right (jump there). That was far easier than writing a whole plugin, doing caching, and handling XML. (If you decide to do your own Digg sidebar area, feel free to swipe my Dugg Stories header image. I may also post the Photoshop file I created, if there’s interest.)

Update
Here is the Photoshop file I created along the way.

Halo 2 Carnage

Collin — Sun, 30 Oct 2005 10:31:55 +0000

Recently, my Photoshop posts have been lacking in layers, which I tend to equate with how much others can learn from them. A file with few layers really only allows for simple usage of the content, and leaves little room to learn from. To try and make up for some of that, here’s a multi-multi-layer Halo 2 Photoshop file where a large portion of the background was cut away to make the image fit the design on (the subsequently redesigned) Xbox.com.

You can view the original screenshot here to see how much area had to be recreated. Luckily, I just happened to have some good source material to pull from. The photo used to rebuild the missing chunk of sky is quite possibly part of the original Halo 2 artwork, as it’s from a PDF I stumbled upon not too long ago. Looking at the original PDF, you’ll notice parts of the sky which have cloud formations matching those in the screenshot. With some clone stamp work, color adjustments, and a new black gradient, the restored image looks good as new. While the original Halo 2 image surely exists somewhere out there, this is a decent Photoshop file tutorial showing how to merge two related images with minimal changes.

Whether you use it for something, learn from it, or just find the files cool to check out, I’d like to hear from you! I know I always enjoy looking through others’ Photoshop files to see how they do things. Could I do anything to improve my posts? Have any requests?

Xbox 360 Marketing

Collin — Fri, 21 Oct 2005 05:05:53 +0000

With the upcoming release of the Xbox 360, I thought it would be fitting to post a few related images I had squirreled away (I save almost everything interesting I come across — a digital packrat).

The first image I have is the new Xbox Live logo for the Xbox 360, which uses the new, official, Helvetica-looking Xbox font. I like the old blocky font more, but I’m sure Microsoft will still manage to pull the marketing materials together nicely. Overall, I enjoy the Xbox marketing styles far more than those used for Windows.

The second file is an Xbox 360 ad I saw on a website, and recreated it in Photoshop. You can see the preview here, or download the layered Photoshop file. Enjoy!