31
Oct
AngryBirds

Yesterday, I told you how to use pre-made icons to create a custom Android Phone 7 theme. Today, I'll walk you through how to create your own icons in Adobe Photoshop. I'm going to assume you have at least a basic understanding of Photoshop.

Estimated time required: 15 minutes for the first icon, and 2 minutes for each subsequent icon.

Difficulty: Low if you've used Photoshop before.

What You Need

  • Adobe Photoshop
  • The .PSD templates (included in the full ZIP, linked)

Getting Started

Rally The Troops

Before we begin making the icons, you'll need to make a list of what Apps you want to have immediate access to. For this example, I'll be creating a 1x1 Angry Birds icon and a 3x1 Advanced Task Killer icon. Once you know what you want, all that's left is finding the images you want to use.

angry_bird ATK

There are a few ways to find your images: DeviantArt is an awesome website full of amateur and professional works, and Google Images is a handy backup method. Many of the existing icons came from DeviantArt, but both of the images I'm using today (see above) are from Google Images.

Fire Up Photoshop

Now that you know what you're making and have the stock images to use, let's get to work:

  1. Open up the template files. I used the 1x1.PSD and 3x1.PSD for my icons, but you should open whichever ones you need. Note: You might get an error here about the font or text. The template .PSD's are from newone757, who used Helvetica. I don't have Helvetica, and you might not have it either. Photoshop substitutes Myriad Pro, which is a very close replacement.
    font_sub
  2. Open your image files.
  3. In your image file, go to Select -> All (or press Ctrl + A).
    selectall
  4. Copy it: Edit -> Copy (or Ctrl + C).
    copy_paste
  5. Paste the image into the icon template (Edit -> Paste or Ctrl + V). For Angry Birds, I dropped it into the 1x1, and for ATK I used 3x1.
  6. Move the image so that it's roughly centered. For example, when I pasted the Angry Bird image into the 1x1, it automatically anchored at the top-left corner. I then moved it so that it was centered the way I wanted it to be.
    centered
  7. Chances are the image is way too big for the icon, so we'll need to scale it down. To do so, go to Edit -> Transform -> Scale. Hold Shift to keep the axes locked and maintain the aspect ratio. Depending on the size of your image, you may want to zoom out first or go through a process of scaling down and then centering the image. If you centered your image (Step 6), you can scale from all four corners to have the icon placed and sized pretty well without much tweaking.
    scale 
    resize
  8. Depending on your image, you may want to make all but select parts of it black and white. There are various ways of selecting certain parts of the image, but that's beyond the scope of this article.

    For those who are a little more familiar with using Photoshop: for the Bird image, if I only wanted to keep the yellow color of the eyes and make the rest black and white, I'd probably use the Magic Wand tool to select the eyes and copy them to a new layer, then make the rest of the image black and white. For the ATK image, I used the Quick Selection tool, first at 8px to make the selection, and then 4px to fine-tune and deselect parts. Once again, I copied my selection to a new layer and made the full layer black and white.

  9. In your layers box, click and hold on the image layer (Layer 1) and drag it to the bottom of the stack so that it's below everything else. Right click on the Background layer and select Delete Layer.
    layers
  10. Click on your Texts layer to select it. Select the Type tool and select the word Texts. Type in whatever word you need for your app. Since "Angry Birds" wouldn't fit, I decided to go with "AngBrd". Note: Depending on your tastes, you may want to move the text to the right or left side of the image. In the 1x1's case, this only equates to a few pixels in one direction or the other, but for 3x1 images, you're going to be moving it from the far left to the far right.
    text texts
  11. You're done! Go to File -> Save As and save the file as a .PNG. Make sure you don't save over the template! After you click Save, it will ask you about Interlacing. Just click OK.
    saveas
  12. Copy the image file onto your phone and use the information covered in Part 1 to apply your icon. Here's what I came up with:

AngryBirds ATK

ABss ATKss

And that's that! For those familiar with Photoshop, this should be a fairly quick and easy procedure (I made my 10 custom icons in about 30 minutes total, including time to find source images). Be sure to post your results below, and if you have any suggestions for future How To Theme articles, feel free to shoot me an email!

Aaron Gingrich
Aaron is a geek who has always had a passion for technology. When not working or writing, he can be found spending time with his family, playing a game, or watching a movie.

  • John

    Nice tutorial. That being said, I really wish tutorials like this would focus more on software that doesn't require piracy or hundreds of dollars to use. Yes, I know that you can get Photoshop much cheaper by being a student, or if your business owns a license that you can take home with you. However, that is not the case for most of us. Gimp and Paint.NET are two of my favourite image editors and they are both free. Both include more than enough functionality for this project and in many cases they are easier to use than Photoshop.

    • Aaron Gingrich

      Yea, I completely agree... but I can only share what I know. I can't very well tell you how to do it in GIMP when I can't do it myself, can I?

      You can still open PSD files in GIMP last I heard, and this is a very, very simple thing to do. I'd guess that anyone with GIMP could likely do this based on the above Photoshop oriented tutorial.

  • TaskKillerHater

    Wow! Supposedly well informed folks like yourselves still advocating use of ATK (or task killers in general)?! I expected better. Oh well, I guess it's just time to lower my expectations of your journalism.

    • Aaron Gingrich

      I use it to kill apps that I don't want kept open. For example, I rarely ever play Air Control on my phone. Why would I want to keep it open and running in the background for days on end? I don't, so I ATK it. Not sure why that's a big deal.

      Also, I don't see how sharing the fact that I use it is the same thing as "advocating use" of it.

      • Phil

        Why would you want to close it? Thats where most people are going to jump on you. You really don't gain anything by closing it. But its possible that by closing it you can cause something else to run slowly...say another app that reuses some intent exposed by Air Control. Air Control isn't a great example but you should get my point.

        I think desktops have taught us to close things without really understanding why we do. You basically do it to conserve system resources. But if the system will do this for you then you don't have much reason to close anything. Its just an unexplained habit that we've brought over that Android bloggers should probably be trying to break.

        Sorry to get off on that subject. This is a really cool tutorial.

        • Aaron Gingrich

          No worries. I suppose it comes down to A) efficiency which steps from B) my personality. To me, having something running in the background is inefficient, even if it's not really hurting anything (although how can it not be? it's using resources. IMO, it has to be zapping performance or battery, even if imperceptibly). It's the same reason I uninstall apps that I don't use even though I have plenty of free space on my phone - it's just less cluttered, and thus more efficient. That's just my personality - I'm fairly Spartan about things (I recently moved out of my apartment - it took about 2.5 hours from start to finish, and I only needed 3 boxes).

          And for the record, I'm equally as close-it-all about my PC. Same deal - and I suppose it's arguably more reasonable on my PC since I frequently multitask and/or play more demanding games (i.e. Bad Company 2).

          Finally, I'm glad you enjoyed the tutorial :)

  • http://suddenfish.net Daryl

    Thanks again for another awesome tutorial! :)

    One thing though... are you sure that the font used in newone757's pictures is Helvetica? I have Helvetica installed, and it looks completely different. Google shows me the same font when I have installed, when I search for Helvetica.

    • Aaron Gingrich

      Glad you enjoyed it! Thanks!

      Yep, I'm sure. Check out the SS in Step 1, or for cross reference, here's newone757 saying it in his source post (typo his): "the font used is Helvitca. Not a free font and no i can not provide it. "

  • TheWorkz

    Created a just a few extra's I use and threw into a zip for anyone who wants.. Sorry for the 3 ebay's, couldn't decide which "car" i liked better.. :)
    http://ayjax.com/android7.zip

    • Aaron Gingrich

      Very cool :) thanks for sharing!

      • TheWorkz

        Thank you very much for the Tutorial! I am finding myself spending a lot of time tweaking with this after reading your two posts this weekend.. :) Have now done panels with contacts pictures on a page.. Lot's of possibilities..

        • Aaron Gingrich

          Haha exactly, nothing like having a unique layout :)

  • Terrell Washington

    I already got lost trying to do this using GIMP

  • Chris

    Just got done creating some images in GIMP,its possible took a while to figure out but once I did can create a icon in bout 10 mins

  • abhi

    gr8 post thanks...