Maybe there allready exist a similar post but as a therapy task during a horrible long meeting i am writing this anyway and maybe it can inspire some skinners :)
I am writing this blind (meaning i do not have precision X on my work computer) but i will keep updating the post once i am home and can see if i have made any errors. My goal is to explain each variable and picture as a full tutorial.
Tools: Notepad (or text/code editor of choice)
Photoshop/Paint.# (or any image editor of choice)
How to start? Start by decompiling the default skin. You can of course decompile any skin but by using the default you know you get all the pieces that the original composer(EVGA) intended should be there.
You can decompile in 2 ways.
Option A:
- Press start, and type cmd in the little search field and press enter.
- In the command window navigateto where your evgaprecision.exe is located. (You do this by typing cd c, cd program files etc etc, cd.. will bring you one step back)
- Type EVGAPrecisionX.exe –ds default,jsRfsgTd
(default is the name of the skin/usf file you are decompiling and jsRfsgTd is the password used by precision X)
Option B:
- Rightclick on EVGAPrecision.exe and select ‘create a shortcut’.
- Rightclick on the shortcut and select ‘Properties’.
- Under Target add –ds default,jsRfsgTd
- Press ok
- Doubleclick your shortcut.
Either case, once done a new folder will be created under the folder ‘skins’ named ‘default’. It have all the files for skinning.
I recommend to open the folder, copy all and then create a new folder with your skin name of choice and paste the files in there.
Now you want to open the file named Header. Open it with Notepad and change the description name close to the top.
This is what will show as name when you go in user interface under the settings tab in Precision X.
Now repeat Option A or Option B above but replace –ds with – cs and replace default with your-skin-name and skip the password.
"EVGAPrecision.exe –cs myskin"
Once done you will have a new skin to chose in Precision X. At this point it is a duplicate of default but still :)
Pics While browsing your skin folder you will notice that most pics have a white/black duplicate named somethingAlpha.bmp
Alpha images are masks used to make parts of the real picture invisible. Imagine that you put the somethingAlpha.bmp on top of your something.bmp and everything that is under the white areas on the alpha image will be visible and everything that is under the black area on the alpha image will now be deleted/transparent/invisible.
Performancelog.bmp
and performancelogalpha.bmp
(yeah, its the white pic above the highlighed line lol) I recommend to use photoshop or other tools that allows you to work in layers. That way it is very easy to work with alpha by creating a new layer on top of the actual image and that way see what will be covered and what will not.
Remember when saving your bmp work, to save it as uncompressed 24bit bmp. The skin will not compile if not 24bit bmp.(Thanks Drerex, keep em coming)
Do not delete any pictures at this point since it will cause your skin to fail compiling unless it is equally modified in the header file. I have not found a good way of deleting pictures yet so what i have been doing instead for unused items is to give them a 888,888 start coordinate for a skin that is 600,200. That basically place the image in a wasteland nobody can ever see or use without having to delete it.
The header file will use coordinates for 90% of the items. Rather then testing a million times to get everything in the right spot, again i recommend using an image editor that have mouse coords. In photoshop, click on top menu 'Windows' and then select 'Info' in the drop down and it will give you the coords of your mouse cursor.
Header File Here is a description of the Header file parameters and what they mean. I will only list items that you can change. If it is not listed in here then i can not guarantee the compile will work if you modify it. Ofcourse you can always change it back.
Do not remove a line unless you know what it is, the compile process is fairly sensitive.
Name = EVGA Precision X Mini skin
The name of your skin, this is not related to your skin folder name.
Author = SpacepiG
If you write something in here it will add "By SpacepiG" after the skin name.
BMP_PREVIEW = Preview.bmp
Now you will see a long list similar to this line. It is to give the skin engine a usable name that you will use further down in the header file. It is not needed to change if you base your skin on an existing skin and dont rename the files.
BMP_PREVIEW_HOT = Preview.bmp,Hot
This line indicates that there is a bmp effect added to the image at certain situations. See below.
[BitmapEffect.Hot]Brightness = 25
Bitmaps effects are used to modify images such as buttons when something is pressed, mouse over or selected. You can add as many effects as you want to a bitmap.
Look at test button. To the left it is normal, middle mouse over and right, mousedown (button, hot, pressed)
Here are some effects:
Brightness, uses an integer(number for value) Higher value gives more brightness, negative value gives darker effect.
Gamma, uses an integer. Adjusts the color brightness and sharpness.
Scroll, use an x and or y value. (scroll = x,y). This effect will scroll your bitmap. Can be quite powerful with an alpha mask.
Base = 0,0,,BMP_BASE
Use a coordinate on a picture to define transparent color. In this case pixel 0,0 from the image BMP_BASE will be used as color key. This is mainly used if you want a non square/rectangular main window. You then paint the surrounding with the color found in pixel 0,0 and it will be transparent.
Preview = BMP_PREVIEW
An image used to show your skin in PrecisionX. You can also add texts or watermark on that picture if you want. (see pic above)
[WND_MAIN.Sites]SITE_MONITORING = 186,150, ,, ,0,0,BMP_MONITORING_PANEL,
You can define panels, as example the profiles, monitoring and framerate are defined as sites. The values are Name of site, coordinates for the top left corner, coordinates for color key, background image used.
[WND_MAIN.Buttons]
This is a long one so i will not list all. Values are: Name of button, Coordinates for top left corner, name for regular button image, name for alpha, name for hot(mouseover), name for hot alpha, name for pressed, name for pressed alpha,
[WND_MAIN.Sliders]
Sliders, used to change values on Fan ie. Values are: Name of slider = coordinates for top left,00000001(up/down) or 00010001(left to right), slider image, slider alpha image, slider hot image, hot alpha, slider background image, background alpha, selected image, selected alpha image.
Keep in mind that a sliders length and thereby sensitivity is controlled by the length of the pic. Too small and you will not be able to change it very easily. Also, all sliders do not have to use the same images.
[WND_MAIN.Texts] TEXT_CORE_CLK = 210,96,00000011h,, ,BMP_FONT,BMP_FONT_ALPHA,,12,12,2Eh 7Fh 2Fh 20h
This is for various text areas at PX. Dynamic textfields. The values are: Name = Coordinates top left corner, code,,, name of image and alpha,,size x size y, color codes.
Keep in mind that you will need 2 images (reg and alpha) to change fontsize so design well, they take a little time to create.
Indicators are controls changing their appearance based on dynamic values. With some light header coding the indicator can be connected to another control in the skin to respond to a slider position or pressed button as example.
IND_CORE_VOLTAGE = 239,103, ,, ,1,1,,BMP_VOLTAGE_INDICATOR,BMP_VOLTAGE_INDICATOR_ALPHA,1,00000000h,0061CEB4h
Indicator Name = x,y,,Indicator image,Indicator image alpha,1,background color, bar color
I am unsure of the remaining values but found the statement below online. I will investigate.
<indicator_id> = <x>,<y>,<flags_override>,<z_order>,<site>,<indicat or_animation_matrix_x>,<indicator_animation_matrix _y>,<indicator_animation_matrix_frametime>,<indica tor_bitmap_id>,<indicator_bitmap_alpha_id>
<indicator_animation_matrix_x>,<indicator_animatio n_matrix_y>,<indicator_animation_matrix_frametime> ,<indicator_bitmap_id> and <indicator_bitmap_alpha_id> items define indicator animation parameters, animation matrix image and alpha channel bitmaps. <indicator_animation_matrix_x> and <indicator_animation_matrix_y> items define horizontal and vertical matrix sizes (in sprite units). <indicator_animation_matrix_frametime> item defines animation frame time in milliseconds. Animation matrix rows define passive animation frames loop and animation matrix columns define animation frames for different states indication.
Please take a note that you can use fake indicators with a single animated row (i.e. indicators looking similar regardless or indicated parameter value) to add some passive animation to your skins.
I am waiting for some updates on indicators but i will keep adding info while waiting. [WND_MAIN.Placeholders]
PLACEHOLDER_MON_WND = 0, 0, ,,SITE_MONITORING ,613,63,000000h,FFFFFFh,181818h,FFFFFFh,00FFFFh,606060h
The placeholders are fake mainly non skinable controls that we need to assign space for. In this example we are telling the monitor graph to start at 0,0 (see above for assigned coords for sites), use the SITE_MONITORING site, 613pixel width, 63 pixel height, black background (000000 hex is black), white text (FFFFFF hex is white. The rest i am unsure of, Drexrer, do you know?
Each time you change anything in your Header file or an image you need to compile to see the change.
- change something
- compile it
- close/open precision X or change to default skin and back to your new skin.
- Tadaa, you can now see your changes.
Default skin folder:
post edited by spacepig - 2012/04/19 23:55:34