Help get this topic noticed by sharing it on Twitter, Facebook, or email.
I’m excited

Guide: This is how you add your own graphics to VIP

Hi everyone,

this is a guide showing you how to add your own thumbnails and pictures to VIP :-).

If you like unique graphics and a clean look - and haven't added your own pictures yet - this is the guide for you:



Requirements: Photo editing software - preferable Photoshop.
This tutorial is based on Windows 10.

I have created a template you can download from my dropbox folder (free).
I share a dozen of my graphics as well - they are on dropbox as well. If you use these graphics you might have to rename them to "YOURExpansionname.png".

https://www.dropbox.com/sh/u5ch7mbeuz...

_____________________________________________________________

How to use my template:

VIP requires three different kind of graphics:
1) The one on the GUI screen at the bottom right. 176*147px
2) The big one on the advance display. 198*241px
3) A small thumbnail for the main view. 30*30px or 40*40px
All saved as PNG 8Bit.
_____________________________________________________________

1.) Large picture for VIP Gui: Template_Big.psd:

a) just drag and drop your graphics on existing one
b) use (ctrl+t) and adjust size and center it.
b) export the file by using file - export - export as:
Save the file as "YOURExpansionname.png" in
"C:\ProgramData\VIP\skins\largePluginIcons"
depending where you installed VIP
_____________________________________________________________

2.) Large picture for the Advance screen: Template_bg.psd

a) Drag and drop your picture/logo on the screen and move the layer below "Logo" to enable the mask
b) Drag and drop it above "Logo" to make it visible.
c) Adjust the size (ctrl+t) and focus.
d) Drag and drop your background image and move the layer above "Background"
e) Adjust the size (ctrl+t) and focus.
f) Right click and chose option: "smart object".
g) Drag and drop the fx - represented by two empty circles - from "background" on your layer above.
h) Export the file by using file - export - export as. select png, translucent and enable 8bit.
8bit is important to reduce file size. if the file size is too big it takes too long to transfer on the keyboard screen.
i) Save the file as "YOURExpansionname_bg.png" in "C:\ProgramData\VIP\skins\largePluginIcons"
Depending where you installed VIP
______________________________________________________________

3.) Small thumbnails for the Advance main screen 40x40.psd:

CHOOSE CAREFULLY:
You can create thumbnails up to a size of 40*40 pixel which looks a lot cleaner and larger.
However all default thumbnails are 30*30 pixel. Mixing size looks quite odd.
I decided to go for 40x40 pixel, therefore is template 40*40 pixel.

a) Drag and drop your picture/logo on the screen and move your newly created layer below "Logo1" to enable the mask.
b) Drag and drop it above "Logo1" to make it visible.
c) Adjust the size (ctrl+t) and focus.
d) Export the file by using file - export - export as. select png, translucent and enable 8bit.
8bit is important to reduce file size. if the file size is too big it takes too long to transfer on the keyboard screen.
e) Save the file as "YOURExpansionname.png" in "C:\ProgramData\VIP\skins\40x40"
Depending where you installed VIP
______________________________________________________________

Have fun guys!
Cheers!
3 people like
this idea
+1
Reply