The above video goes away if you are a member and logged in, so log in now!
[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.
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"
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.
Very nice tutorial! Good job man.
Thanks! Hope it helps and gets more skins out there!
Last edited by Organized_Chaos; 02-15-2010 at 03:41 AM.
[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!
The link to the font tutorial is dead. Can anyone recommend a new tutorial?
Originally Posted by BenKs