How to make wallpapers optimized for Android

How to make wallpapers optimized for Android
Sometimes you snap a photo or find an image on the web that you would love to display on your Android device, but it doesn’t fit quite right, it’s gigantic, or you just can’t get the right parts of the image to show on the center home screen. Today we’re going to talk about the anatomy of Android wallpapers so you can create your own that are a perfect fit for your device.

The first thing you will need is an image editor. Your computer may have come with one or you may already have an image editor of your choice ready to go. Some popular ones are Photoshop, Photoshop Elements, and Paint Shop Pro. There are also a handful of free editors that are wonderful and will work great for making Android wallpapers. A few you can check out are GIMP (Linux, Windows, OS X), Photoscape (Windows), Seashore (OS X), and, if you don’t want to install anything, Pixlr is completely web based.

The next thing to understand is how Android wallpapers work. As you’ve noticed, it isn’t just a static image that your various home screens slide across, the background moves slightly with each swipe. In order to make the perfect background, we have to understand how Android handles the image.

In order to start your image, you’ll need to know the screen resolution of your device. If you don’t know what yours is off hand, go to PhoneArena.com and search for your device. We have the resolutions for just about every device on its specs page. In this tutorial we’ll be using a Motorola DROID RAZR, which has a resolution of 540 x 960 pixels. In order to achieve the sliding effect, the wallpaper's width needs to be double the screen resolution's width and the wallpaper's height needs to be the same as the screen resolution's height. That means our final image will need to be 1080 x 960.

Once you have the resolution information for your device, you want to set up the template. First, create a new image that matches the screen resolution of your device - in our case it will be 540 x 960. If your image editor has guides, place them at the edges of your canvas. If yours doesn’t, which many free ones do not, you can make your own. Simply create a new layer and use the marquee tool to make a 1 or 2 pixel wide line on the edge of your canvas and fill it with the color of your choice. Duplicate this process on both sides of your canvas. Once you have your guides placed on the side of your canvas, edit your canvas size to double the width. If you are given the option, be sure to set your anchor point in the center. The resulting image should give you a center box marked off the matches the size of your device’s screen.


Let’s break down the template real quick so you understand how it translates to your device. One you apply your wallpaper, your home screen will display whatever is inside the guides, which we filled with gray. As you swipe, the graphic will slide in different increments depending on how many home screens you have. In the end, your 1st, or left most screen, will display what we outlined in blue and your last, or right most screen, will display what we outlined in red.

Another thing to keep in mind is that depending on your skin, your dock may cover a portion of the bottom of your image. Finally, the other variable is when you tilt the device into landscape mode. Some devices center the home screen on the image, while others take the center top. You’ll have to test out your device and plan accordingly if you are also trying to get your wallpaper to look a certain way in landscape mode.

Essentially at this point you can start building your image however you want. You can paste in family photos, images from the web, sports teams, favorite musicians, and custom text - the possibilities are endless. You just want to make sure your main subject matter rests in between those guides so, say for example, when you unlock your phone you're not looking at half of someone’s face.

For our wallpaper, we’ll quickly use our logo, slogan, and a few shapes and borders to make it pleasant looking. Once you're finished you can save it out as a jpg and copy it to your device. When you set your new image as your wallpaper, the crop box will still show up. Simply maximize it and it should (if you did everything right) surround the entire image perfectly. Set it and voila! You now have a perfectly sized wallpaper that has everything exactly where you want it.

To see our creation in action on our DROID RAZR, here are screen shots of each of the 5 home screen from our device once our wallpaper was applied.



We’ll leave you with one final tip. Sometimes you may find that when you load your wallpaper on your phone, it feel like it “competes” too much with the icons and they may seem hard to read. If that happens, try creating a new layer on top of your finished composition and fill it with a dark color, like black or a darker version of one of your theme colors. Then, drop the opacity of the layer way down until it darkens the image just a touch. Depending on your image, you can use this same technique with white or a very light color. In our example we used a very dark blue, dropped the opacity down to 25%, and added a blending mode to help make our icons pop a bit off the background.

Overall, just play around with it until you get the image that suits you. Good luck and happy wallpapering!

FEATURED VIDEO

17 Comments

1. itiswhatitis

Posts: 423; Member since: Jan 23, 2012

Looks real hard!

2. KingKurogiii

Posts: 5713; Member since: Oct 23, 2011

good article. this may have been just what some people needed to know. also...can we have that wallpaper? (: oh and if you guys are madly into customizing your phones here's a site i recommend.http://mycolorscreen.com/ and here's my profile page.http://mycolorscreen.com/KingKurogiii/

11. nnaatthhaannx2

Posts: 820; Member since: Oct 19, 2011

Does it require root? (That site)?

12. KingKurogiii

Posts: 5713; Member since: Oct 23, 2011

nah, just whatever means you're willing to go to make your handset look all fancy. :3

3. bomariam1

Posts: 43; Member since: May 08, 2012

To bad I only use live wallpaper

4. JBz007

Posts: 63; Member since: Mar 02, 2012

Same here but I bet the How To guide on that would be significantly larger.

5. phoneman09

Posts: 12; Member since: Mar 23, 2012

Good article but unless I misunderstanding forget all this work and just go for an app like this:https://play.google.com/store/apps/details?id=com.shirobakama.wallpaper&feature=search_result#?t=W251bGwsMSwyLDEsImNvbS5zaGlyb2Jha2FtYS53YWxscGFwZXIiXQ.. this should be just fine.

13. samiazza

Posts: 8; Member since: Jan 15, 2012

THANK YOU

16. Brewski

Posts: 710; Member since: Jun 05, 2012

Phone Arena this is way too confusing and has too many steps. @PhoneMan09 your method is super easy and you can do it all from your phone.

6. EarnYourLeather

Posts: 87; Member since: Feb 14, 2012

Why doesn't that RAZR MAXX have ICS? OH Wait, that's right! Despite the umphteen articles about it coming, Verizon still hasn't pushed the OTA update yet! Seriously though, come on already. I shouldn't have to root my phone to get access to an OS that was used as a major selling point for the device MONTHS AGO.

7. KingKurogiii

Posts: 5713; Member since: Oct 23, 2011

it's not hard at all to flash a leak, if you had just taken an hour or two of your time almost two months ago you would have had ICS this whole time. so either flash a damn leak or shut up and wait like you chose to do.

8. RORYREVOLUTION

Posts: 3131; Member since: Jan 12, 2010

If you want to troll about this phone, by all means do it on an article about the update itself, not how to optimize a freaking wallpaper.

9. GeekMovement unregistered

Nice article, Paint Shop Pro ftw I still love that program. The only sad thing is the Samsung Galaxy S II Epic 4G Touch doesn't support scrolling wallpapers anymore.

10. Non_Sequitur

Posts: 1111; Member since: Mar 16, 2012

It doesn't? Wow. I've only been using the ICS Phase Beam live wallpaper on my E4GT lately, so I wouldn't know lol.

14. andro.

Posts: 1999; Member since: Sep 16, 2011

Two words: wallpaper wizardrii . A free app that gives you best quality and most options for your wallpaper

15. saiki4116

Posts: 413; Member since: Mar 31, 2011

good and usefull article....

17. rdenapril

Posts: 1; Member since: Oct 17, 2013

Great options, but if you want something more than just static backgrounds or live wallpaper, get free, shuffling wallpaper with bitmado. Basically, bitmado is here to become your latest source of mobile inspiration by providing a place where you can be both the content creator and judge of the best wallpapers for your phone or tablet. This free app lets you: Experience a stream of endless, shuffling wallpapers Create your own wallpapers with a simple upload tool Build and/or follow your own wallpaper categories Vote on which wallpapers deserve to be seen more (or less) Customize your viewing experience by choices like "hot" or "daily Give it a go here: play.google(dot)com/store/apps/details?id=com.bitm​ado&hl=en

Latest Stories

This copy is for your personal, non-commercial use only. You can order presentation-ready copies for distribution to your colleagues, clients or customers at https://www.parsintl.com/phonearena or use the Reprints & Permissions tool that appears at the bottom of each web page. Visit https://www.parsintl.com/ for samples and additional information.