Creating Transparent Lockscreen Wallpapers for WP7
December 7, 2010 113 Comments
MY LOCKSCREEN APP – Get text on your lockscreen wallpaper (with or without PIN)
For more transparent wallpapers, check out TransparentWallpaper.net
YouTube often has the Wikipedia effect. I visit for a specific reason and end up on a completely unrelated subject and never leave bread crumbs to find out how I got there. Well, today I was on YouTube watching some physics videos and ended up with a trip down memory lane with the X-Men cartoon intro. With the theme tune on loop in my head whilst working on an app, I was inspired to take a break from development and update my lock-screen wallpaper on my device. I had an idea of creating (Wolverine-inspired) claw marks as part of the lock screen. All the wallpapers I’ve seen for Windows Phone 7 contain no transparency. I thought it would be cool to be able to display the home screen ‘through’ the claw marks.
First problem was to draw the claw marks. I simply fired up Gimp (I don’t have Photoshop, although if anyone from Adobe is reading this, I’d be more than happy to receive a copy :D). Not sure what the best way to draw claw marks is, but after some trial and error, I settled with using the lasso tool to draw the outline and used a combination of the smudge tool and the dodge tool. A few minutes later, I had the image below:
The image has to be a PNG file as it has a transparency channel. Naturally the transparency here is added to where the home screen should be visible (through the marks).
The second problem is getting this PNG image to the phone. The Zune software only seems to sync JPEG’s. I decided to try and email myself the image as a PNG and download it via the phone. This seemed to work perfectly. Simply send yourself an email with the image attached, then open the email on your phone and save the image. When you view the image, you have an option of setting it as your wallpaper.
There are two main caveats when using transparency in your wallpaper. Until the lock screen has started any animation, the home screen will appear black. Presumably this is because the home screen isn’t loaded until the lock screen has been touched, which makes sense. Secondly, it doesn’t work if you have a password on the lock screen. Having a password is obviously a good idea, so it’s a shame this doesn’t work with the password.
Key thing is, don’t set it as wallpaper as you would for another image, otherwise the transparency is lost. When you download, don’t download the entire message. Click on the PNG attachment and then wait a few moments. Once the ‘cancel’ button next the attachment disappears, click again. This should open it in the picture viewer with the option to set as wallpaper. If you’re having trouble with it, try sending it via another email address. (I used a Hotmail account, but not sure if that makes a difference).
Below is a video of the wallpaper on the phone (there’s no audio in the video). As you can see, all the animations and live tiles are fully working, even when the lock screen is down (but still active). Feel free to send in any of your designs and I’ll post them up. (The size of my wallpaper is 480 x 800). That was a fun distraction, but I should get back to work 🙂
As mentioned earlier, the home screen doesn’t show unless the lock screen is activated. Assuming you’re using the dark theme, you can use this to your advantage. I quickly drew a flashlight to see how it would look. Quite pleased with the results (and not being a fan of flashlight apps, I think irony has been bestowed upon this post :D). Check out the video and image below.
The image used: