iPhone Wallpaper Template For Fireworks / Photoshop (Saucy)

Posted August 1, 2008 at 10:14 AM by Ben Nadel

It's Friday and I didn't feel too much like coding after I launched my POI customer tag library update. So I thought I would create a Wallpaper template for the iPhone in Adobe Fireworks. One of the problems I've found with the iPhone is that you find a cool picture and select it as your background only to find that it doesn't look nearly as good as you thought it would look on account of all the other junk that's on the screen. I've fooled around with the idea of creating some iPhone backgrounds and wallpapers, and to help me with that process, I wanted to see what the photo would look like before I actually even transferred or downloaded it to the iPhone. The only way to do that was to create a Fireworks PNG file that included the iPhone screen structures with accurate positioning and (fairly) accurate transparencies. This would allow me to see what the wallpaper would look like right from my Fireworks application. And so, here is what I created:


 
 
 

 
iPhone 3G Wallpaper Template Screen Shot  
 
 
 

You can download the layered Fireworks PNG file here.

You can download the Photoshop PSD file here.

Once I had that finished, it was easy to create a wallpaper that I though would look reasonably cool on my iPhone 3G:


 
 
 

 
iPhone 3G Wallpaper Demo For Kinky Solutions  
 
 
 

Hope that helps anyone who was looking for an iPhone background template or an iPhone wallpaper template. Happy Friday.



Reader Comments

Aug 1, 2008 at 10:42 AM // reply »
304 Comments

I just wish we could also mod the background of the main UI. The black is just... boring. (And when I say "I wish we could", I mean with a non-jailbreaked phone of course.)


Aug 1, 2008 at 10:44 AM // reply »
10,638 Comments

@Ray,

I agree. Although, I wonder with all the icons, it might just look too cluttered. But perhaps something like a gradient or a nice background pattern would look good.


Aug 1, 2008 at 10:51 AM // reply »
304 Comments

Oh yeah, I wouldn't want a picutre per se, like what you have, or what I have on my phone now, but _something_, like a wood grain or marble.

Heh, remember the old days when they first added background support to the BODY tag?


Aug 1, 2008 at 11:00 AM // reply »
10,638 Comments

@Ray,

Are you thinking what I'm thinking.... titled "Dancing Hamster" animated GIF backgrounds? Now those were the glory days of BODY tag backgrounds :)


Aug 1, 2008 at 11:08 AM // reply »
304 Comments

Were animated backgrounds even supported at first? Don't know. But no, I was remembering more all the marble variations they had, and wood grain. Of course, it made text unreadable. ;)

I can still remember when bgcolor came out, which I believe wasn't at the same time as background. I believe it came first with background a bit later. Just seeing _white_ was a pleasure to the eyes after so much time in gray.


Aug 1, 2008 at 11:14 AM // reply »
10,638 Comments

Yeah, people had all kinds of crazy backgrounds. It's like people would design them and publish them without even looking at the page to see if would make your eyes hurt.

Then there was the whole phase when 3D modeling came out and suddenly everyone had some sort of rotating 3D graphic like a @ sign or a scull or something.

And who can forget the animated Fire graphics.


Aug 1, 2008 at 11:16 AM // reply »
304 Comments

Dude - animated fired WOULD be a cool background. Don't you think? Or water. It would probably drain the batter but who cares. ;)


Aug 1, 2008 at 11:32 AM // reply »
10,638 Comments

Ha ha, yeah, I bet it would be pretty cool.


Aug 1, 2008 at 2:40 PM // reply »
29 Comments

When I first saw the title of your post, I thought that "Saucy" was the codename of an upcoming version of Fireworks. Like "Blackstone" or "Scorpio". I had completely forgotten about the whole not-safe-for-work encoding system you had devised!


Aug 1, 2008 at 2:57 PM // reply »
10,638 Comments

@Dave,

Ha ha, it's been a while since I have invoked the Saucy flag :) ... what can I say, it's Friday and I wasn't ready to start refactoring my OOPhoto domain just yet.


Aug 1, 2008 at 4:05 PM // reply »
92 Comments

Ray...

From the way you two are going on it sounds like YOU'VE been "draining the batter".

:)

Good idea Ben. I used to use a Photoshop template that was similar. It had browser chrome for IE 4 and 5, and Netscape 4 and 5 set up for an 800x600 browser window. Made it really easy to see what a design was going to look like.


Aug 6, 2008 at 9:00 PM // reply »
2 Comments

Ben - Nice work man as always!

Have you see the Rich symbols/template available on google source code for iPhone developers using Fireworks?

http://code.google.com/p/iphone-gui-fireworks-symbols/

I like how its open source and anyone can contribute. You might want to help out if you have time. Seems like an excellent resource for Fireworks users!

//Alan


Aug 7, 2008 at 1:57 PM // reply »
10,638 Comments

@Alan,

Thanks for pointing that out. I'll see what I can do.


Aug 25, 2008 at 7:06 AM // reply »
3 Comments

This is going to be very useful for making wallpapers - cheers.


Aug 25, 2008 at 7:18 AM // reply »
3 Comments

So does this not work in Photoshop : (


Aug 25, 2008 at 8:04 AM // reply »
10,638 Comments

@Colin,

It might work in PS CS3.


Aug 25, 2008 at 9:16 AM // reply »
92 Comments

Probably not Ben if you're offering up a Fireworks PNG. Photoshop doesn't support layered PNG files (at least not that I'm aware of). It might be better if you saved this file as a layered PSD from within Fireworks, then offered that file on your site. That way pretty much everyone could open it.


Aug 25, 2008 at 9:33 AM // reply »
10,638 Comments

@Andy,

Ah, ok. I just assumed in CS3, everything was cross compatible.


Aug 25, 2008 at 12:31 PM // reply »
3 Comments

Hi,

Sorry I realised it was a little stupid of me to ask - seeing as the title says quite clearly it was for Fireworks! But indeed it would be sweet as nut if you could save it as .psd file is possible.

Cheers


Aug 28, 2008 at 8:55 AM // reply »
1 Comments

hey. i found the whole package of the iPhone wallpapers:

http://lordofdesign.com/digital-blasphemy-collection-2007-iphone-320x480/


Aug 28, 2008 at 10:00 AM // reply »
10,638 Comments

Hey all, I uploaded the Photoshop PSD of the file (link is above in content below the PNG link). I didn't actually test this to see if it works, I simply did:

File > Save As > Photoshop (*.PSD)

Since this is Fireworks CS3, I assume they all play quite nicely together at this point.


Sep 7, 2008 at 9:49 PM // reply »
1 Comments

Works a treat - thankyou.

Will be a great aid in creating themes.

Cheers


Sep 14, 2008 at 5:01 PM // reply »
1 Comments

I've never actually used Fireworks, but I've often been told it's very good, but I've probably got too much Photoshop muscle-memory built up now :)

You can't teach an old dog new tricks I guess.

Anyway, I put together a similar template for Photoshop users, in case anyone finds it useful. It differs from yours slightly, in that I have put a whole bunch of Apple logos in there as well, for people to create good looking wallpapers in a very short time.

http://everythinghurts.com/iphone-wallpaper-template-psd/

I also agree with the comments here about having a wallpaper behind the main icons. It seems such a shame to spend time customising your phone with an image that you are only ever going to see for a fraction of a second before you unlock it.


Mar 10, 2009 at 7:36 PM // reply »
1 Comments

Thanks for the template, this is great!


Jun 18, 2009 at 2:01 AM // reply »
1 Comments

Thanks for this!


Jul 28, 2009 at 11:51 AM // reply »
1 Comments

Niceee thanks!!!


Aug 6, 2009 at 3:33 AM // reply »
1 Comments

Cool...thanks for the post. Came across a small site which had some pretty cool papers.

www.iphonewallpaperbabes.com


Jan 9, 2010 at 2:56 PM // reply »
1 Comments

Thanks for this cool resource; many people doesn´t know anything about Fireworks; the little photoshop brother or something like that...


Jan 19, 2010 at 9:12 AM // reply »
92 Comments

FYI, with BlackR4in, the jailbreaking tool for iPhone, you can make the black background go away and have your wallpaper shine through. Yay.


Aug 5, 2010 at 7:15 AM // reply »
1 Comments

This is a nicely done template -- exactly perfect for my needs. Thanks for making it and sharing it, kind sir!



Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:


Author Email:

Author Website:

Comment:

Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
InVision App - Prototyping Made Beautiful With Prototyping Tools Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
Feb 3, 2012 at 10:49 PM
How I Got Node.js Running On A Linux Micro Instance Using Amazon EC2
Wow this was really helpful! Only thing I would add is you need to update your .bash_profile after you edit the secure_path. This is what I did: $ . ~/.bash_profile Otherwise, NPM won't be found. ... read »
Feb 3, 2012 at 10:14 PM
Pushing Base64-Encoded Images Over HTML5 WebSockets With Pusher And ColdFusion
@Ben, Just wanted to let you know that pusher are soon to start limiting sizes on messages. This was the detail that came through in the Feb dispatch: "However, we will soon be limiting the s ... read »
Feb 3, 2012 at 5:05 PM
Regular Expressions Make CSV Parsing In ColdFusion So Much Easier (And Faster)
I tried using your RegEx in my C# program, but it was matching an extra empty-string at the end and so I would end up with an extra field that doesn't exist, so I changed it to this: (^|,)("(?: ... read »
Feb 3, 2012 at 3:47 PM
ColdFusion Supports HTTP Verbs PUT And DELETE (As Well As GET And POST)
Josh Cyr posted this on Twitter just a little bit ago. Thought it was appropriate. http://stackoverflow.com/questions/1619152/how-to-create-rest-urls-without-verbs/1619677#1619677 ... read »
Feb 3, 2012 at 2:28 PM
Changing The Execution Context Of Your Self-Executing Function Blocks In JavaScript
@Michael, You definitely make a good point (and extra points for quoting movies - I love movies). When you use a return() statement to define the object's public API, it does provide a consistent a ... read »
Feb 3, 2012 at 2:04 PM
Changing The Execution Context Of Your Self-Executing Function Blocks In JavaScript
To quote Jurassic Park: "Just because you can doesn't mean you should". I completely, utterly disagree with the thought that this is more readable. Consider the current module pattern: if ... read »
Feb 3, 2012 at 1:10 PM
REST API Design Rulebook By Mark Masse
@Jordan, Yeah, WRML was created by Mark Masse (author of the book). I also found it to be a bit convoluted. I suppose it is intended to allow the Client to be able to programmaticaly respond to cha ... read »
Feb 3, 2012 at 1:08 PM
ColdFusion Supports HTTP Verbs PUT And DELETE (As Well As GET And POST)
@Jason, To be honest, I don't have good answers for that kinds of stuff. And, to the point, that is specifically why I *really* liked the REST API Design Rulebook by Mark Masse - he just cuts throu ... read »