DEX 3.2 launched last week with a myriad of changes and new features, and today we’ve updated the PCDJ Skin Designer to allow even more customization of our DJ Software GUI (Graphical User Interface).
The PCDJ Skin designer allows you to more easily map your image-based design to a working DEX 3 (or RED Mobile 2) skin. The skin designer has always been flexible, allowing for layered panels, customization of layout and all colors. The new Skin Designer update includes a few notable changes and new capabilities our graphically talented DJs will love.
Here’s What’s New In the Skin Designer:
- New attributes for playlist customization
- Place album art on Jog Wheels (or in Decks)
- Album art on Jog Wheels is now “grab-able” so you can scratch with mouse etc
- A few bug fixes
Our DJ Software user community is always interested in trying new skins. If you create a DEX 3 or Red Mobile 2 skin and would like to share with our users, please contact us via the form below (below the quick start tutorial below). We’ll post your skin for user download at PCDJ.com (complete with credit to the author).
DEX 3.2 is designed to be touch-screen friendly, the browser already includes “zones” for different functions (such as scrolling versus drag-and-drop). We could really use a few touch-screen based skins, with large buttons conducive to “fat fingers”. Focus on the core-capabilities of DEX 3.2, such as play, pause, cue, sync, pitch control, auto-mix and mixer functions.
Here are the requirements for DEX 3 mixing software skins:
(PRO TIP: Open one of the DEX 3 default skins in the skin designer to get a feel for how mapping works – DEX 3 skins are stored in “Program files (x86) -> PCDJ -> DEX3 -> Skins)
You can do 2 things here to generate a skin design that can be mapped properly:
2 .PNG Images:
- The first one: The background image (with all the buttons in their off state, no slider cursors, no knobs cursors, no text that the app will display itself — but you can still leave descriptive text,etc)
- The second one: This is basically the same as the background image but with ALL the buttons in their pressed/on/lighted state, the cursors on the knobs and sliders, all the texts, etc.
Please note that the 2 images need to PERFECTLY OVERLAP !
- Create only 1 png file in the format of the other skins — meaning — just use the 2 images at #1 to make the bigger one. If you are able to start the second image at position 1000 (on the Y axis) that would be great as there will be exactly 1000 pixels difference between a button’s off state and it’s on state, (this will be easier to map the XML using the skin designer)
Either formats will work, but basically #2 is just the images at #1 put together.
Other Important notes:
- The elements of the skins should not overlap (eg. you can not have 2 buttons overlapping, or a button and a jog wheel, or 2 buttons, etc)
- The target resolutions (that will basically account for more than 95% of all laptop screens) are: 2880 x 1800 — this is 16:10 & 2880 x 1620 — this is 16:9
- I would suggest that only the playlist/browser are placed at the bottom, because of different aspect ratios — 16:9 vs. 16:10 — we basically need to cut the bottom part of the 16:9 skin so that’s why.