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:
Feel free to share any of your wallpapers here. You can see a video on how to create transparent images here.
Phone 7 
Pingback: Make Your WP7 Lock Screen Transparent To Show Homescreen
Pingback: Lockscreen Trasparente : WindowsBlog.it
Doesn’t work for me. Transparent parts stay black. Maybe because I’ve set a lock screen password? Can’t disable password, because it comes from a policy attached to my Exchange mail box account.
I just tried it with a password and it doesn’t work. I’m guessing this is because of privacy reasons (as the user may expect all details to not be visible unless the password is entered).
Same here, password protected phone does not support this.
It’s most likely a case of it being programmed such that it loads the home screen only if it’s visible. Without a password, it’s probably still considered “invisible” and so nothing is displayed. This is proven by setting the theme to ‘light’. Instead of it being black in the claw marks, it’s white, so you’re seeing the main background colour.
Pingback: Comment avoir un wallpaper transparent sur Windows Phone 7 ! | WP7Blog : le blog pour les fans de Windows Phone 7
Pingback: Tip: Create transparent lock screen wallpapers for Windows Phone 7 | Windows Phone Secrets
Pingback: Wolverine’s WP7 Lock Screen! | windows mobile apps
Worked for me on a Samsung Focus with no password. Cool trick, thanks!
Thanks for testing G-Reg!
Works great on my Focus as well. Check out the gaming related wallpaper I created on my blog http://conflictinggamers.com/2010/12/10/windows-phone-7-transparent-wallpaper/
-Conflicting Gamers-
ciao ragazzi ho bisogno del vostro aiutoo ho un omnia 7 nn mi funziona nessun immaggine trasparente si vede doppia l immaggina riesco a vede la ttrasparenza ma l immaggine e doppia o kuasi tripla perche ragazzi le dimensioni sono buone
Ciao, purtroppo questo è parte del Mango. È l’unica alternativa al momento di utilizzare questo metodo.
Sort of works on a HD7, though it’s blank until you tap it then it becomes transparent
Hi Stephen, that’s the same in all cases. I don’t think the home screen is loaded until the lock-screen is activated. Thanks for the HD7 confirmation.
KeyboardP, can u please give me instructions of how to use GIMP to create a custom WP7 wallpaper as im a noob at photo editing 🙂
Thanksss!
Hi Alex,
Fire up Gimp and go to File…New… I set my width to be 480 and my height to be 800. Before clicking OK, click on “Advanced Options” and set “Fill With” to “Transparency”. Click OK and you should have a grey chequered pattern. This means it’s transparent, so anywhere you see that will be transparent. Now, on the right hand side you’ll see a mini-version of your chequered pattern called “Background”. This is the ‘Layer’ window. Right click in that window and click “New Layer”. Click OK. In this New Layer, draw what you want. Just remember, anywhere you see the grey square pattern will be transparent. Once you have your image, click on File…Save…. Set the file type to be “PNG” , so your filename should look like “myImageName.png”. Click Save and a small window should pop up. In this window, click Export. That’s your image 🙂
Cheers for the quick reply! Just created a ‘monster logo’ transparent wallpaper 😛
Thanks for your help KeyboardP!
You’re welcome 🙂 Next stop, Red Bull! 😀
Hey keyboardP,
When using Gimp, where does the finished product save to?
Thanks,
Daffy
Hi Daffyduff87,
You can select where you save it. I’m not sure what the default folder is, but if you didn’t select the folder yourself, check the “My Pictures” folder in “My Documents”. If it’s not there, and you’re on Windows 7, click on ‘Start…Pictures’ and see if it’s there. If not, reply back 🙂
Pingback: Windows News » Wolverine’s WP7 Lock Screen!
Pingback: Windows Phone 7 transparent wallpapers
Super cool. Will try on my HD7. A thought for a different wallpaper. How about a window, with mullions (the vertical and horizontal little bars between the glass pnes). Bit of interior wall around the transparent part so the message/phone icons are clear at the bottom. My current forest scene makes the icons hard to see.
Nice idea! I thought of a grid or something, but the window idea gives it a nicer feel. You’d need to the dimension of the wallpaper and the grids in order to have it line up, but could look very cool.
Pingback: Transparent Wallpaper for Windows Phone 7 | Apple/Android/Blackberry/Windows
Pingback: Transparent Wallpaper for Windows Phone 7 | ITboxS
Pingback: Transparent Wallpapers | Windows Roundup
Pingback: Transparent Wallpaper for Windows Phone 7 | Windows 7
Pingback: How to Make Your Windows Phone 7 Background Transparent to Show The Homescreen | OmniTechNews
It works if i directly set it as wallpaper while preview from mail. Otherwise it doesn’t work if i first save it to my pictures and then i set it as wallpaper.
Hi Garen,
You’re right. I tried different ways of moving the image to the phone, but each time it would lose the transparency. The only way I found was to email myself the image and set it directly from there.
Just tried it on my phone (still with lock screen password set), but even using this direct approach it doesn’t work. Which was what I expected and I guess this is also what you want if you set a password.
Indeed. I think what happens is that, to save battery, the OS doesn’t load any of the tiles unless the user is allowed to see them. In the case of a password, the user is only allowed to see them when the password is entered, and so the tiles are not loaded at all. This can be shown by changing the theme. When the theme is light, the background will be plain white, and when the theme is dark, the background will be all black. So technically, the transparency is still working, but the layer inbetween the main background and the lock screen is not loaded.
I’m not sure it’s the way you describe it. I don’t think it has anything to do with battery life.
I find it pretty amazing that Microsoft apparently renders the whole background, even though it normally (without this hack) isn’t visible. But that’s not entirely true now, is it? They normally do show some background. They need the underlying tile image, so they can display a little piece of it when you press the lock screen. That little jumping animation shows a small piece of the tile screen underneath. The apparently render the full tile screen, just so they can display the appropriate bottom part.
For password-locked Lock Screens they don’t need the underlying image, so I guess that’s the reason it isn’t rendered. The fact that it displays the right theme color is because this color is also used as background for the password entry keyboard.
The phone only renders the home screen when it it may be possible to see. So, when the lock-screen is touched, the tiles are loaded (all of them). However, when the screen is not being touched, therefore no chance of the background being visible (normally), the home screen is not loaded. I don’t mean only visible tiles are loaded. I’d image the entire layer is loaded, which is why the hack works.
Pingback: Transparent Wallpaper for Windows Phone 7 « Nieuws « Red je PC
Pingback: Transparan Wallpaper untuk Telepon Windows 7 | godzam bLog
any new designs? may i suggest something like the japanese or philipino sun?
I’ll update the wallpaper page tomorrow, so keep a look out 🙂
Tried all options but nothing worked. I always get the black screen and not a transparent ones.
I mailed it, opened it from the mail but still the wall paper always shows only black within the claw. It is never transparent.
Hi Karthik,
What device do you have? Make sure that your image is saved as a PNG file and not a JPG. Email this PNG file to yourself and on your phone, click on the “imagename.png” link. Don’t download the entire message. When you click “imagename.png”, there should be a cancel button appearing as it downloads. Once this cancel button disappears, click “imagename.png” again. This should open it in the picture viewer. From here, use the ApplicationBar to display the menu and select “Use as wallpaper”. Don’t save it to the phone. That should work 🙂
Hi,
I have the same problem as Kathik….on LF Optimus 7. The image isn’t even saved on the phone, only opened from the mail message and set as wallpaper.
Verified the png with transparent channels on my PC too. AH well.
I am having a samsung focus. I did save it in my machine as a png file and it is transparent in my desktop.
I sent the file to my gmail account as well as my hotmail account with which i have phone access. In the phone i opened the xxx.png it opened it in the picture viewer and when i click on the use as wall paper it goes to the crop section and once i hit the click button i get the image on my wall paper. But it is always black.
Hi Karthik and Twisticles (lol, interesting name),
I’ve had confirmation that it works on the Optimus 7 and on the Focus, so it might be down to the image itself, or the way you’re doing it. Try the claw image and the flashlight and see if either work. Or, you could try a few from the gallery. Just remember, when it comes to cropping, don’t change anything – just cick on the tick. Let me know how it goes with the other images 🙂
Ahhhh I tried in IE instead of Chrome…all works no problem!
Very cool, and thanks very much!
That’s awesome, Twisticles. Credit for for the IE idea goes to Big Slim. Karthik, any luck with IE?
Pingback: Wolverine’s WP7 Lock Screen!
Pingback: WP7 Transparent Lockscreen Wallpapers — windows phone 7 apps / WP7 games / WP7 Accessories
The claw image works but the flashlight doesn’t and neither does amy images I have created (trying for hours last night !) transparant bits just show as black. All are png. Any ideas?
I used fire fox pic. I would love to post a pic here but dont know how….instructions anyone??
Hi Nick and Andrew,
Nick, feel free to send me your images and I’ll test them on my Mozart. You can email them to me (phone7 AT live DOT co DOT uk).
Andrew, you could upload them to various web services such as imgur and post the link in a comment here. Or you can email me the image and I’ll upload it.
Pingback: Transparent Wallpaper for Windows Phone 7 | Windows 7 Editing
Pingback: Transparent wallpaper for lock screen - Windows Phone Forums at wpcentral.com
I can confirm that it works on the Samsung Focus. So far I only tried the flashlight one using the instructions provided. Saved image as a PNG file and emailed it from Gmail to another email adress that I use on my Focus. I did not save the image but set it as wallpaper directly from the email. Pretty cool.
Thanks for letting me know MaulerX, I’ve updated the post.
Pingback: WP7 Transparent Lockscreen Wallpapers | Free Pocket PC Software
Pingback: Transparent wallpapers are all the rage | Best Smartphone Blogging
Pingback: Transparent lockscreen for Windows Phone 7 | PocketHacks.com
Pingback: Criando papéis de parede transparentes para WP7 | Windows Phone Blog Brasil
Pingback: More WP7 transparent lock screen goodness!
Pingback: Windows Phone 7 Transparent Lock Screen (video) - Geeky Gadgets
Pingback: kevinpaquet.com » Windows Phone 7 Transparent Lock Screen (video)
After numerous times of failing to get this to work on my Focus, I found out that for some reason, using Firefox to save the images wasn’t working. I used IE8 to save them and they now work! =)) I can’t get that Dannahan one to work though.
Thanks a lot for the info Big Slim! I don’t have access to a Focus to test on, so nice work on finding a reason why it may not work on it.
No problem. Thanks for your great work! One more new thing to show off to all the friends.
Pingback: Ingenio, transparencias y Windows Phone 7 | Arenamovil
I like the dog. lol
Regards
http://soonstudios.wordpress.com/
Pingback: Transparent Wallpapers in WP7 – Video Tutorial | www.nalli.net
After creating the first wallpaper pack (displayed in your gallery), I created 24 more to make a few more packs. I sent them to a friend to test on his phone first, as I don’t have a WP7 (yet). He is saving them to his phone and says they display distorted in thumbnail view. Also if he sets them as wallpaper from the phones save folder they look distorted when set. I read a few posts where you said not to save them to phone and set them as wallpaper directly from email………… Just curious, were you getting the same effect with your wallpapers as well when you saved them to the phone?
Hi Lee,
Saving them to a phone converts them from a PNG to JPG. This means that the transparency channel is removed and so using that image will not have any transparency. The reason this trick works is because the wallpaper is being set before any conversion takes place and so the PNG file stays as a PNG file. First time I tried, I saved it to the phone and it became distorted as all the transparent areas became solid black.
I’ve got a video tutorial on YouTube. The process has to be carried out exactly as in the video (skip to 4:06 to see the actual setting of the wallpaper as before it is simply creating a basic image). Let me know if that helps 🙂
Pingback: ShMarker.com
Doesn´t work for me on my HTC 7 Mozart. I did everything what you wrote.
Hi Felix,
It won’t work if you have a password on your lockscreen. I’ve created a video here which shows you how to do it step by step. Let me know if that helps.
I have a Samsung Focus and this doesn’t work. I have emailed myself the .png images here and set them as wallpaper and they aren’t transparent. I don’t have a password either.
Hi solroger,
This should work fine on Samsung Focus phones. Follow the steps as shown in this video (it should start at the email bit). Let me know if that method works. A key thing to remember is to not save the image onto the phone itself.
i want info about WP7 Transparant
price,?
Hi Wij,
I don’t quite understand what you mean, but the transparent effect mentioned above can be done for free.
Pingback: WP7 – átlátszó háttérkép « Surex's developer blog
Pingback: Transparent wallpapers for the WP7 lock screen « Binary Tropic
Pingback: Transparent wallpapers for your DVP - Windows Phone Forums at wpcentral.com
Thanks works on HTC Mozart!
I tried to save them etc on the phone via Zune first until I found the solution here! 🙂
i try using the software and it work i’m using unlock HD7 i did try and error inorder to get the transparency.One thing that it couldn’t do is that i’m taking my picture jpg transfer to png do the tranparency thing email to myself the picture is not acceptable more on darkerside though the picture taken during daylight.
Hi Mohammad!
JPGs will not work with transparency. If you want to convert a JPG to a PNG, with transparency, then you’ll have to add an Alpha layer. You can do this in any major art programs. I use GIMP. If you’re using GIMP, you can add an alpha layer to your image like this. I have a video here showing how to create a brand new transparent image – it might also be useful :).
Hope that helps!
Pingback: Transparent Wallpapers on Windows Phone
I’ve tried the transparent wallpaper, it works but i have symbols the live times, time and date etc also showing transparent ghost images on the screen, can anyone help?
I’ve gotten the same issue. Does it have anything to do with the mango update? I’d rather have a black screen over a jarbled one. Does it have anything to do with interlacing or dpi?
Hi guys,
It seems that the Mango update has messed up the transparent wallpapers. They no longer work as nicely as they did pre-Mango. The closest you can do now is follow the instructions here. This doesn’t necessarily fix the issue with existing wallpapers, but shows you how to create wallpapers that won’t ghost (because of the way they’re designed). When I get some time, I’ll see if I can find another way around the Mango wallpaper.
So I looked at what you linked me to, and I’m wondering if anyone has figured out the template for covering the repeat. Your top third covers the first repeat. But I haven’t figured out how many times it would repeat or what specifically offsets it in the first place. You could strategically set masks for where the lockscreen time date player and battery WiFi area repeats, but you end up with less transparency. Call Microsoft, tell them to drop everything and make this a usable function =) call it the window update. It’ll take you 5 mins to fix it, and all the art geeks will love you for it. Actually f that I want origami lockscreens. I want to have to fold the lock screen up strategically like a password screen. Then we need to have a talk about ringers and notifications when you are done.
lol, aye aye cap’n :D. The origami idea is actually pretty cool. It’s sort of like a gesture pin, but with a bit more animation. As for ringers, you can add your own MP3 ringtones now in Mango, which is nice. Would be cool if it could be done without needing to sync with Zune, but hopefully they add that in a future update!
I want to know to put your own picture. I only know how to do the page curl. HELP! I watched the video a couple of times but I want to use a picture I downloaded.
Hi Nasra.
The first thing you need to do is make sure that the image has a transparency channel. In the video, you can see that there is a square-pattern that show where the transparency will be. If your image isn’t a PNG, it probably won’t have it. You can add it as explained in this post. Once you have that channel, you can use the Eraser tool to erase the areas you want transparent. You should see the square pattern come up wherever you erase. Save the file as a PNG file and you’ll have your image. 🙂
Hey!
I tried to do it right now and I still don’t understand. Can I send a picture for you to do for me? I’ve just tried it right now and sent it to my phone, but it still doesn’t work!
I don’t really have time at the moment, but you can email it to me with a description of what bit you want transparent. If I get time, I’ll do it for you 🙂 My email address is phone7 {at} live {dot} co {dot} uk.
ok! That’s great!
Hey!
I think you should make a video tutorial on how to make downloaded pictures into transparent wallpapers.
Hi Nasra!
Thanks for the suggestion. I’ve got plans for a few other videos as well (not related to wallpapers), so I might create one when I create those as well.
okay, so I just wanted to make a transparent wallpaper right now but the toolbar on the left isn’t there. How do I get it back??
Sorry, I meant the toolbar on the right.
Never mind I got it back.
Cool 🙂
Are you using a Mac or a PC? If you’re using a Mac, the toolbar might have gone behind the window. If you minimise the main window, you might see it again. If you accidentally closed it, try going to “Windows” (in the toolbar at the top, next to “help”). Then go to “Recently Closed Docks” and then “Layers, Channels, Paths, Undo…”.
I have a real issue with the wallpapers, i have a samsung omnia 7 and I am using a transparent wallpaper, but when its locked, the wallpaper multiplies and I get multiple copies of the time and picture all over my screen until i touch the screen
Anybody got any ideas?
Hi Martin. This is a Mango problem and unfortunately there’s no way to fix it. For some reason, Mango messes up the transparent wallpapers. There is one workaround you can try, which is this.
Thanks for such a quick response, are you aware of any places i can get these mango style transparent wallpapers from??
Unfortunately not. There doesn’t seem to be any real gallery with these wallpapers, maybe because they take longer to create than the old ones. I’m working on trying to figure out any other ways, but so far no luck :(.
I guess we can’t win them all. I guess this is only the second annoying thing about wp7 for me, along with the not connecting to hidden wifi!! But thats a small gripe
If you’re running Mango (which you seem to be since the transparent wallpapers have gone strange), you can connect to hidden WiFis. Go to Settings…WiFi…Advanced…Click the ‘Add’ button at the bottom 🙂
Pingback: Tapety na telefon | Telefon-Telefony
Pingback: Criando papéis de parede transparentes para o Windows Phone 7 – Windows Phone Brasil
Pingback: PocketPC.ch - Deine Smartphone Community
THERE IS A TRICK…100% working.. YOU NEED TO MAKE IT IN PNG AND THEN RENAME IT TO .JPG And then sync it to phone with ZUNE!
WORKS! B)