Results 1 to 10 of 10

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: [How To] Make iNSPIRED Landscape Icons using PSD Files

  1. #1
    MMi's "X" Member awesomeSlayer's Avatar
    Join Date
    May 2008
    Location
    Dragonspiral Tower in 3DS
    Posts
    4,522
    Thanks
    114
    Thanked 347 Times in 259 Posts

    Default [How To] Make iNSPIRED Landscape Icons using PSD Files
    EDIT: Now easier to follow and execute
    First off, I like to thank k.nitsusa for making this amazing theme. I did see users having trouble making icons so follow my guide.

    Before you make iNSPIRED icons, you must download/get these things:
    -iNSPIRED Landscape PSD Icon Files
    -Adobe Photoshop Program (you can download the free trial; make sure you have enough RAM to open the PSD files.)
    -NeoTech/Helvetica Font (Bold is recommended)
    -Snapshot of the iPhone/iPod touch application (not required)
    -SSH

    My snapshots may look a little confusing since I have to use both Adobe Photoshop Elements and Limited Edition because Elements can't open the PSD files due to insufficient RAM and my phtoshop programs are old. Also, I am using a Windows computer so I can't help Mac users with a few things. Also, since my photoshop programs can't read Typography and some of its data, my guide can be complicated.

    Before you start making icons:
    1. Place your font in the Fonts folder.


    2. Open up Adobe Photoshop.

    3. Open iNSPIRED PSD files



    Then look at the Layer Box as directly shown above. The layers should look like this. Let me give you a note: some of the layers are not needed to make the icons. Here is the key for the color of the lines:
    -Red lines pointing at the layers are needed to make game (red) icons
    -Green lines pointing at the layers are needed to make app (green) icons
    -Black lines pointing at the layers are needed to make utility (gray) icons
    -Purple line pointing at the layer is needed for all icons.
    Skip the key of the color of the lines if your photoshop can read the whole data!!
    So how you make an icon? Well, here you go.
    Let's use the NES icon or game icon for my example.

    Make icons:
    1. Hide the unneeded layers by clicking on the eyes. The eyes mean it is showing. If it is not there, it is hiding the layer. Only skip this if your photoshop program can read the whole data. For those you can read "Typography" data, open the folder.


    2. Rename the Title of Game, App, or Utility. If you can't, delete the layer.


    3. Click on the Type Tool and size the font to the same size as "Game Title" and use NeoTech/Helvetica font and place the font in the bottom middle of the icon. Skip this step if you were able to rename the title.




    4. Now open up the snapshot for the icon and go to Image>Rotate>Canvas 90 degrees Left. Wording varies from version to version.


    5. Now shrink down the image after unchecking the lock box in the Layers Box or crop any part of the image you want for the image for the icon if needed. Make sure it fits in the window of the icon correctly. You can also scale by going to Edit>Transform>Scale.



    6. Then place it in your window of the icon. Make sure the image is between the font layer and the Top-Graphics layer (if necessary)and rotate the icon 90 degrees to the right (or rotate it later after you saved the image. Right click the saved image and click on Preview then rotate.


    Now you're done. Go to File and click on Save As or Save As Copy, not Save or you will lose the PSD file. When the Save As box appears ad change file to png and save it in the Icons folder.


    It was tough to create this guide. zero-x has a guide in this thread as well if my guide is difficult so thanks to him. There are many ways to create those icons, however, it varies from version to version. If you want to post your guide here, you sure can.
    Now you can use the icon for the theme. If you have questions, just ask me and try to help you or ask someone else.
    Last edited by awesomeSlayer; 2009-09-26 at 09:09 PM. Reason: Neccesary Changes and Photo
    Asking for help is different from being stupid. Fanboys can rot in @#$%!

  2. #2
    "The Chuck Bass of Theming" k.nitsua's Avatar
    Join Date
    Mar 2009
    Location
    Merced, CA
    Posts
    4,422
    Thanks
    1,761
    Thanked 19,217 Times in 2,596 Posts

    I think you made it more complicated than it really easy.

    The font layers already have the proper colors, you just need to replace the typography. You also didn't mention the masks. And what's with the RAM issues? lol.

    I do appreciate the effort though, don't get me wrong. You did mention about the rotating canvas, which I would assume most people who are jumping into photoshop do not know about - but the dropper and the deleted layers isn't really necessary.
    #eli7e revived me

  3. #3
    iPhone? More like MyPhone
    Join Date
    Sep 2009
    Location
    tehran/iran
    Posts
    285
    Thanks
    172
    Thanked 42 Times in 31 Posts

    what is PSD?

  4. #4
    alright ill make a tutorial for photoshop (might still be wrong though)

    okay so u will need the following:

    -Photoshop
    -icons PSD(peterboi made a good PSD without the errors + the neotech font: iNSPIRED Icon Templates FIX.zip) Thanks perterboi
    -picture you want to use for the app

    1.install the font neotech
    2.open up photoshop and open the icon psd

    3.Now you want to select which icon you want (app,games,settings) by clicking on the box next to the layer name
    4. open the folder by clicking the arrow next to it
    5. now open the typography folder
    6. next,double click the text and type the app name

    7. now open up the icon area folder
    8. open up your app picture in photoshop, select it and drag it to the icon area folder ( what i do is open up the picture, Select it and copy it. then select the icon area folder and paste it)



    9. now with the image selected, press edit>transform>scale and scale the picture to the way you want it to be( u can also drag it around until you get the desired image)

    10.when you're done, right click and select merge down.

    11.a message should pop up. select preserve

    12.now if your doing landscape, go to image>image rotation>90 clockwise(if your doing portrait skip this step)

    13. now the last thing to do is save it as a .png file
    remember to name it exactly as it is named on springboard (case sensitive)

    im tired right now so ill fix it tomorrow and add more details
    also i need help from photoshop experts if they have a better way of doing this becuase im sorta new to it.

  5. #5
    MMi's "X" Member awesomeSlayer's Avatar
    Join Date
    May 2008
    Location
    Dragonspiral Tower in 3DS
    Posts
    4,522
    Thanks
    114
    Thanked 347 Times in 259 Posts

    Quote Originally Posted by k.nitsua View Post
    I think you made it more complicated than it really easy.

    The font layers already have the proper colors, you just need to replace the typography. You also didn't mention the masks. And what's with the RAM issues? lol.

    I do appreciate the effort though, don't get me wrong. You did mention about the rotating canvas, which I would assume most people who are jumping into photoshop do not know about - but the dropper and the deleted layers isn't really necessary.
    I will try simplifying it to make things easier. I don't know why Elements is having the issue with RAM. Both of my Adobe Photoshop Programs can't read "Typography" and some of its data which is why I have to delete some layers.

    @zero-x: I might use some of the steps for my guide and give some credit to you.

    Quote Originally Posted by italodance View Post
    what is PSD?
    I am guessing it stands for Photoshop Data which contains the data of the template used by Adobe Photoshop Programs.
    Last edited by awesomeSlayer; 2009-09-26 at 05:06 PM. Reason: Automerged Doublepost
    Asking for help is different from being stupid. Fanboys can rot in @#$%!

  6. #6
    To me zero has the best way to do it

  7. #7
    MMi's "X" Member awesomeSlayer's Avatar
    Join Date
    May 2008
    Location
    Dragonspiral Tower in 3DS
    Posts
    4,522
    Thanks
    114
    Thanked 347 Times in 259 Posts

    Quote Originally Posted by Pablo FBB View Post
    To me zero has the best way to do it
    Technically, zero's guide is easier since my programs can't recognize Typograhy. That's way I allow more than one guide since there are many ways.
    Asking for help is different from being stupid. Fanboys can rot in @#$%!

  8. #8
    Quote Originally Posted by awesomeiPod View Post
    Technically, zero's guide is easier since my programs can't recognize Typograhy. That's way I allow more than one guide since there are many ways.
    now we have to wait for k.nitsua to release his even easier guide

  9. #9
    MMi's "X" Member awesomeSlayer's Avatar
    Join Date
    May 2008
    Location
    Dragonspiral Tower in 3DS
    Posts
    4,522
    Thanks
    114
    Thanked 347 Times in 259 Posts

    True

    Wow...I realized there is no need to delete layers. Time to edit.
    Last edited by awesomeSlayer; 2009-09-26 at 08:04 PM. Reason: Automerged Doublepost
    Asking for help is different from being stupid. Fanboys can rot in @#$%!

  10. #10
    dont have to worry i think most people know how to make icons now

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •