Results 1 to 7 of 7

Thread: [Tutorial] BenKs Tutorial For Making iRShell Skins

  
  1. #1
    BenKs's Avatar
    BenKs is offline -Hacks Newbie
    Join Date
    Jan 2010
    Posts
    43
    Rep Power
    278

    Default [Tutorial] BenKs Tutorial For Making iRShell Skins

    I've searched the web looking for a good tutorial on making iRShell Skins and could only find tutorials on how to do certain elements of the skin, but nothing from start to finish. I also found a lot of people asking for a tutorial so I decided to try and figure it out. I was semi-successful and thought I would write up a Tutorial in hopes to see more Skins out there by artists more talented then me. This tutorial is more of a Tutorial that fills in the gaps that the other tutorials leave out and also breaks everything down so you know what these tutorials are trying to tell you.

    Tools Required


    Creating Your Icons
    1. Extract the Stainless Zip Folder and start up Gimp.
    2. In Gimp, click File > Open and go into the extracted Stainless Folder and open the file "stainless.psd"
    3. On the right hand side you will see all the layers listed. Take a moment to familiarize yourself with gimp. To the left of each later title (ex. logo, logo2, hlmpmenu) there are two buttons. A lock button (chain) and a View Button (an eye). By clicking the view button you toggle the layer visibility.
    4. The reason I told you to download Stainless was so if you were unfamiliar with gimp it gave you something to work with but more importantly it can be used as a template. Toggle all of the layers to be off except the Menu Outline layer. This layer will give you a guide to where the Icons should be placed.
    5. Right click on any of the layers and click on Create New Layer. Change the dimensions of the layer depending on what size you want the Icon to be. For a regular sized Icon choose 60 pixels width and 40 pixels hight. Change the Background to Transparent and Name of the Icon to the appropriate Icon you're making (easier for editing later).

    6. Now find, or make, the icon. If you're making your own Icon from scratch inside of Gimp skip to the next step. If you're copying and pasting Icons there are a few things you will need to know about Gimp. After you have copied your Icon, go into Gimp and make sure that the Layer you wish to paste the image onto is selected on the right. Click Edit>Paste (Or ctrl+v). If your image is bigger then the layer you created it may not appear to show up. You will see an outline of the image you pasted click the icon and drag the Icon inside the layer. If your icon is too big then either shrink it, or make the layer dimensions larger. To shrink it click the Icon then click the image. After you have the image to the proper size and visible look on the right hand side where all of your layers are listed. You will see a layer that you didn't intentionally make called "Floating Selection (Pasted Image). Right click on it and click Anchor Layer. This will make the pasted image a part of the Layer.
    7. Drag your image inside the appropriate square and position it as you want. Repeat Steps 5. - 7. until you have all of your Icons made.

    Creating your own Wallpaper
    1. Create a new layer. Leave the dimensions at 480 Width and 272 pixels in hight(The Background colour doesn't matter much). Click on the newly created layer and drag it to the Very Bottom of the list. This will allow all of the other layers to appear over top of the wallpaper.
    2. Either create your own wallpaper using Gimp or copy and paste it from a different source. For Copying and Pasting Read Step 6. of Creating Your Icons in this Tutorial.

    Designing your Icon Highlights
    For this part of the tutorial I will have to link you to Osgelds tutorial Here. His tutorial will explain how to edit how your Icons look when they are highlighted. This step is not required but if you choose to skip it you may not like how your icons look when they are highlighted. Something that Osgeld doesn't mention is that Instead of making your Icons highlight you can do other things to display which Icon is selected. Follow the tutorial up to "Step 2." and you will see what parts of your Icons will be highlighted. If you want you can add or remove from these highlights. For example you could make it look like a mouse arrow, or a glow coming from behind the Icon. As you get more experienced and creative you will be able to think of other things you can try. After you have all of your Icon highlights looking good, continue with the rest of his tutorial.

    Creating Your Help Menus, Boot Screen, Directory, Remote and iRConfig backgrounds
    This next part can be a bit time consuming. If you wish you can use Stainless as a Guide. For all of the following screens you need to follow these steps once you have your screen ready.
    1.SAVE YOUR FILE! When you type the title you want your file to be make sure the file extension is .psd. This will allow you to edit it in the future without going through too much trouble.
    2.Make sure All layers you want visible are currently visible and the unwanted layers invisible and click Image>Flatten Image. All of your visible layers will merge together to make one layer.
    3.Click File>Save As. Depending on what Screen your making (ex. Help Screen, Boot screen) it will require a certain title which is listed below. Add .bmp to the end of the image title. (ex "hlpcombo.bmp") and Click Save. A dialog box will pop up. Click the + button for Advanced Options and select 16 Bits A1 R5 G5 B5.

    Screen and corresponding file title:
    Boot Screen - "logo"
    Directory browser - "irshell"
    Config background - "irscfg"
    remote background - "ircomm"
    Main controls - "hlpmain"
    L Button Help - "hlpcombo"
    R button (mp3) - "hlpmp3"
    Photo Controls - "hlpphoto"

    Help Menus
    In the list of layers provided by the Stainless.psd file you will see layers called hlpmp3, hlpphoto, hlpcombo and hlpmain. You can use these for a guide to your help menu. Go down the list of layers and make one of the hlp layers visible along with your background of choice and the "psp" Layer.

    Changing Your Text and Other Colours in iRshell
    This part I havn't completely figured out myself. You will have to do a bit of Trial and Error. Use Qoel's Tutorial Here to get a basic understanding of how the color.def file is organized. Also download his Version of the color.def file Here because it has text (not read by irshell) that will also assist in figuring this out. You will find out in order to create the colours you need to understand how use RGB values. The easiest way to get the colour you want is to Open Paint, Click Colours>Edit Colours and then click "Define Custom Colors" In the Dialog box that opens. Using the colour chart find the colour you want and down the right hand side you will see Red, Green, Blue with a value beside each one. Those are the values you will need to use.


    Creating Custom Fonts
    Use Beelzebub0660's tutorial Here to Create the custom fonts. One thing to keep in mind is when you save your font file make sure your file extention is .fnt (ex. "coolestmffont.fnt")


    After you have created all of the elements required, put them all into a folder and place the folder on your psp under ms0:/IRSHELL/SKINS, go into your iRshell Configurator>Skins and select your skin. At the Preview screen you may have to push Circle to create some colour file (Not sure on this part but theres no harm in doing it regardless) then press cross to install your skin and then Circle to save settings. And there you go! Your skin has been created!

    The Fruits of My Labor
    Click HERE To download the first Skin I created WITH the PSD files. For those of you Making a Skin, you can use elements from my skin if you wish.


    Click HERE to download the Font I created. Its Small Caps.

    PSP-1001 Running CFW 5.00 m33-6
    Fall To Ashes

  2. #2
    Pterodactyl's Avatar
    Pterodactyl is offline -Hacks Smarty
    Join Date
    Feb 2010
    Posts
    183
    Rep Power
    9

    Default

    Very nice tutorial! Good job man.

  3. #3
    BenKs's Avatar
    BenKs is offline -Hacks Newbie
    Join Date
    Jan 2010
    Posts
    43
    Rep Power
    278

    Default

    Thanks! Hope it helps and gets more skins out there!
    PSP-1001 Running CFW 5.00 m33-6
    Fall To Ashes

  4. #4
    Organized_Chaos's Avatar
    Organized_Chaos is offline Senior Member -Hacks Titan
    Join Date
    May 2008
    Posts
    4,768
    Rep Power
    53962

    Default

    Quote Originally Posted by BenKs View Post
    Tools Required
    Photoshop would also work. Gimp is just free so I assume that's why you chose it.

    Great guide! I haven't read it yet but I will when I make my first skin.
    Last edited by Organized_Chaos; 02-15-2010 at 04:41 AM.

  5. #5
    iamafreak's Avatar
    iamafreak is offline Senior Member -Hacks Titan
    Join Date
    Nov 2008
    Posts
    6,343
    Rep Power
    542

    Default

    nice guide Benks...

  6. #6
    BenKs's Avatar
    BenKs is offline -Hacks Newbie
    Join Date
    Jan 2010
    Posts
    43
    Rep Power
    278

    Default

    [QUOTE=Organized_Chaos;1299407]Photoshop would also work. Gimp is just free so I assume that's why you chose it. [QUOTE]

    Yeah thats why I chose Gimp. Its a great program for being free and I lost my copy of Photoshop. Also I know not everyone has photoshop. really hoping to see some more skins on here though!
    PSP-1001 Running CFW 5.00 m33-6
    Fall To Ashes

  7. #7
    Organized_Chaos's Avatar
    Organized_Chaos is offline Senior Member -Hacks Titan
    Join Date
    May 2008
    Posts
    4,768
    Rep Power
    53962

    Default

    Quote Originally Posted by BenKs View Post
    Creating Custom Fonts
    Use Beelzebub0660's tutorial Here to Create the custom fonts. One thing to keep in mind is when you save your font file make sure your file extention is .fnt (ex. "coolestmffont.fnt")
    The link to the font tutorial is dead. Can anyone recommend a new tutorial?

Posting Permissions

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