This is my first attempt at creating such tutorials, I would greatly appreciate any feedback!



Important note:
 
This tutorial is intended for an experienced user that are familiar with Skyrim modding, Skyrim files, modding tools, mod managers, etc. as well as with bitmap images editing.

What you need to do:
 
1. Prepare the needed tools:
 
1.1. JPEXS Decompiler - download and install the latest release version.
1.2. Any bitmap graphics editor that support exporting to PNG (I use Photoshop).
1.3. Any vector graphics editor that support exporting to SVG (I use Inkscape).
 
2. Download the archive provided at this mod page. Extract it somewhere.
 
3. The folder structure inside this archive is already prepared to be used with Dear Diary. So, all the files must stay in their original place. For example, the book menu file is located in interface\deardiary\bookmenu\ - the file name is bookmenu_BG.swf.
 

The file bookmenu_BG.png is the PNG image you want to edit.
The file bookmenu_BG.psd is the PSD (Photoshop) source of this image.You may use it or just ignore it and edit bookmenu_BG.png directly.
 
4. After you’ve completed editing the image file, save it, and then open the bookmenu_BG.swf file with JPEXS Decompiler.
 

 
In the left menu open the images directory, then select the only image presented here. Then click “Replace…” button under the image. Select your previously saved PNG file, and then Save the SWF file.
 
Done! You’ve managed to replace the book menu UI.
 
5. Repeat steps 3 and 4 for the rest files.
 
6. Prepare the archive for installation via mod manager. All you need to do is to delete everything besides .swf files (delete .png, .svg and .psd files to save some space, these files are not used by the game).
 
7. Create the archive and (optionally) upload it to the nexusmods. You must warn users that the SkyUI 5.2SE and Dear Diary 3.0 and above are required!

Few more tips:
 
- The PNG files must be the same resolution as in the archive provided here. Otherwise, the UI will be misaligned.
- There must be a fully transparent border 1 pixel wide in all files (you may see it in bottom bars, it’s intentional).
- If you want to upload your new skin for public use (nexusmods or anywhere else), you need to cover all the files, even if you don't use the options these files provided for. 
 
Full files description:
 
deardiary\bookmenu\
bookmenu_BG.swf
- the bottom bar of book menu UI.
 
deardiary\configpanel\
configpanel_BG.swf
- the main MCM window.
 
configpanel_input_BG.swf
- the window that appears when you need to assign a key to an action in MCM.
 
configpanel_tip_BG.swf
- the window that contains tips text for MCM options.
 
configpanel_window_BG.swf
- the window for messages, options tuning, settings enabling, etc.
 
customcontent_BG.swf
- the custom content background; try to make it darker than other UI because in most cases the MCM images (custom content, like mod logo) is designed with dark default SkyUI in mind.  
 
deardiary\favoritesmenu\
favoritesmenu_extended_BG.swf
- the extended favorites menu background.
 
favoritesmenu_normal_BG.swf
- the normal favorites menu background
You need to cover both favorites menu versions regardless of your own choice if you want to upload the skin for public use.
 
deardiary\inventory\
craftingmenu_BG.swf
- the crafting UI (smithing, tempering, alchemy, enchanting and cooking) background.
 
inventorylists_BG.swf
- the background for inventory, magic, container, barter and gift UI.
 
craftingmenu_alchemy_BG.swf
- the additional image for alchemy UI. The vertical line here is a part of UI.
 
craftingmenu_enchanting_BG.swf
- the additional image for enchanting UI. The vertical line here is a part of UI.
 
itemcard_1_BG.swf to itemcard_6_BG.swf
- the backgrounds of item cards.
 
deardiary\levelupmenu\
levelupmenu_BG.swf
- the level-up menu background.
 
deardiary\loadingmenu\
loadingmenu_BG.swf
- the loading menu background.
 
deardiary\lockpickingmenu\
lockpickingmenu_BG.swf
- the lockpicking UI background.
 
lockpickingmenu_cheat_BG.swf
- the background of additional cheat-mode lockpicking frame. You need to cover it even if you don’t use the lockpicking cheat-mode in case you want to upload the skin for public use.
 
deardiary\map\
map_bonus_BG.swf
- additional image for map finder UI.
 
map_bottombar_BG.swf
- the map UI bottom bar background.
 
map_local_BG.swf
- the background for local map and map finder UI.
 
deardiary\messagebox\
messagebox_BG.swf
- the message box background. Please keep in mind that this image will stretch vertically and horizontally for different message content.
 
deardiary\quest_journal\
quest_journal_BG.swf
- the journal UI background.
 
deardiary\sleepwaitmenu\
sleepwaitmenu_BG.swf
- the sleep-wait menu background.
 
deardiary\startmenu\
startmenu_load_BG.swf
- the background for load panel in start menu.
 
startmenu_new_BG.swf
- the background for new game and continue panels in start menu.
 
deardiary\statsmenu\
statsmenu_bottombar_BG.swf
- the stats menu bottom bar background (used in Vanilla and Experience options).
 
statsmenu_extendedUI_BG.swf
- the background for Extended UI stats menu.
 
statsmenu_legendary_BG.swf
- the background for unallocated perks counter and legendary reminder.
 
statsmenu_topbar_BG.swf
- the stats menu top bar background (used in Vanilla and Experience options).
You need to cover all files (for Extended UI and Vanilla/Experience) regardless of your own choice if you want to upload the skin for public use.
 
deardiary\trainingmenu\
trainingmenu_BG.swf
- the training menu background.
 
deardiary\tutorialmenu\
tutorialmenu_BG.swf
- the tutorial message boxes background.
 
deardiary\tweenmenu\
tweenmenu_BG.swf
- the tween (tab) menu background.
 
tweenmenu_icons_BG.swf
- the icons for tween menu. It’s the only one file that contains vector (not bitmap) image. It stored in SVG format, may be opened and edited via free Inkscape editor. To replace the image, after opening the SWF file, navigate to shapes directory, right click on the only shape here and select Replace. Choose your
edited SVG file and then Save the SWF file.

 
exported\moreHUDIE\
baseIcons.swf
- this file contains all the icons for moreHUD Inventory Edition mod. You can export shapes from it, then edit them, then replace. It’s completely optional. Please keep the original color scheme of the icons.
 
baseLargeItemCard.swf
- the background of large item card provided by moreHUD Inventory Edition mod.
You need to cover this file even if you don’t use this mod in case you want to upload the skin for public use.

--
If you have any questions about creating your own skin for Dear Diary or if you face any issues, feel free to post here.