Making a skin from scratch: default skin study.

setronic
Synthedit regular

Posts: 293

Making a skin from scratch: default skin study. Feb 2, 2014 7:48:58 GMT 1 Claus likes this

Quote

Post by setronic on Feb 2, 2014 7:48:58 GMT 1

here's a project skin in progress. has 2 light and dark versions,
(i find this useful for distinguishing container views)

GREYSKIN

(not all objects are done yet)

i find graphics a bit of a pressure when you're trying to figure out
the inside of a plugin, so i want to get better at knocking out a
skin quickly, if that is possible. my first skins had wrong sizes in
them and were full of unused junk, that then got copied into other
skins, result: a mess

you're left to figure out how it works, and that isn't hard, but you
realise different things at different times if you're new to skins.
(besides, everyone seems to have their own way of implementing
skins)

i'll try to get round to completing that skin some time, and add a
couple of colour variations. i want to go through the different
possibilities for each object, and requirements (file types, etc.)
i think i've found out how most work..

Last Edit: Feb 23, 2014 19:12:49 GMT 1 by setronic

setronic
Synthedit regular

Posts: 293

Making a skin from scratch: default skin study. Feb 13, 2014 18:36:13 GMT 1

Quote

Post by setronic on Feb 13, 2014 18:36:13 GMT 1

if you were a new user looking at the default skin for the first
time, wondering how to make your own slick professinal skin, the
first thing you look at might be:

global.txt

where are defined - what? > fonts, their sizes, colours, backgrounds.
i don't know if you can make an empty skin folder and have it appear
in the skins menu, but chances are that global.txt is the minimum you
have to have to have a new skin.(at the risk of being boring)here are
the contents of global.txt, in default skin:
______________________________________________________________________

;other skin settings

; Fonts
; www.w3.org/TR/REC-CSS1#font-variant
; font-color - BBGGRR Blue-Green-Red mix, hexadecimal numbers
; background-color SAME (-1 = transparent)
; font-size - Height in pixels
; font-family - Searches available fonts, left to right. Specific font name, or generic...
; 'serif' (e.g. Times)
; 'sans-serif' (e.g. Helvetica)
; 'cursive' (e.g. Zapf-Chancery)
; 'fantasy' (e.g. Western)
; 'monospace' (e.g. Courier). Dosn't seem to go smaller than 12
; Arial, Times New Roman, and Courier New are core fonts to Windows
;
; text-decoration underline (overline, line-through, blink not supported)
; font-style normal |italic (oblique not supported)

; font-weight : normal | bold | light | 100 | 200 | 300 | 400
; | 500 | 600 | 700 | 800 | 900
; following not supported at present: bolder | lighter
; text-align center | left | right

FONT_CATEGORY module_title
font-family Arial, "sans-Serif"
font-size 12
font-color #FFFFFF

FONT_CATEGORY panel_group
;font-family "System", "sans-Serif"
font-family "MS Sans Serif", "sans-Serif"
font-size 14
font-weight bold
font-color #FFFFFF

FONT_CATEGORY control_label
;font-family System, "monoSpace"
;font-size 12
font-family "MS Sans Serif", "sans-Serif"
font-size 14
font-weight bold
font-color #FFFFFF

FONT_CATEGORY control_edit
;font-family System, Arial, "sans-serif"
;font-size 12
font-family "MS Sans Serif", "sans-Serif"
font-size 14
font-weight bold
;font-color #000000 - don't apply to edit boxs

; this category is for LED Stack item labels and rotary switch labels
FONT_CATEGORY switch_label
font-family Verdana, "monoSpace"
font-size 10
font-color #F5F5F5

FONT_CATEGORY selector_text
;font-family System, "monoSpace"
;font-size 10
font-family "MS Sans Serif", "sans-Serif"
font-size 14
font-weight bold
font-color #ff0000

; the writing on container and VST plugin displays
FONT_CATEGORY tty
font-family terminal, monoSpace
font-size 10
font-color #00f000
background-color #000000

; plugs
FONT_CATEGORY plug
font-family Arial, "MS Sans Serif", Verdana
font-size 10
font-color #000000

FONT_CATEGORY "Normal"
font-family "MS Sans Serif"
font-size 12
font-color #000000
background-color #ffffff
text-align center

FONT_CATEGORY "Heading 1"
font-family Arial, Verdana
font-size 28
font-color #fff7f7
text-align center
text-decoration underline
;font-style italic
font-weight 900

FONT_CATEGORY "Heading 2"
text-align center
font-family Arial
font-size 18

FONT_CATEGORY "Heading 3"
text-align center
font-family Arial
font-size 14

FONT_CATEGORY "User 1"
font-family Arial Unicode MS
font-size 14
font-color #464646
background-color #ffffff
text-align left

FONT_CATEGORY "User 2"
font-family Courier

FONT_CATEGORY "User 3"
font-family Fixedsys

setronic
Synthedit regular

Posts: 293

Making a skin from scratch: default skin study. Feb 13, 2014 18:41:26 GMT 1

Quote

Post by setronic on Feb 13, 2014 18:41:26 GMT 1

ok: so if you thought the layout of that was 'sacred' (you'll
have to excuse the layman's approach folks), consider the other
'official' SE skin, Propet Black, here:
_______________________________________________________________
; SynthEdit Skin Definition File
;
; Skinset: ProphetBlack
;
; Last update 24/02/04

// Panel group
FONT_CATEGORY panel_group
font-family Ariel
font-size 12
font-weight bold
font-color #7E7E7E

// Labels on controls (titles)
FONT_CATEGORY control_label
font-family Ariel, BMutopia
font-size 14
font-weight normal
font-color #7E7E7E

// Rotary switch labels
FONT_CATEGORY switch_label
font-family Ariel, BMutopia
font-size 12
font-weight normal
font-color #7E7E7E

// Selector (button stacks, LED stacks Up down Selectors)
FONT_CATEGORY selector_text
font-family Ariel, BMutopia
font-size 12
font-weight normal
font-color #7E7E7E

// the writing on container and VST plugin displays
FONT_CATEGORY tty
font-family Ariel, BMutopia
font-size 12
font-weight normal
font-color #7E7E7E

FONT_CATEGORY "User 3"
font-family Ariel, BMutopia
font-size 12
font-color #7E7E7E

setronic
Synthedit regular

Posts: 293

Making a skin from scratch: default skin study. Feb 13, 2014 19:05:28 GMT 1

Quote

Post by setronic on Feb 13, 2014 19:05:28 GMT 1

see? it's quite a bit shorter, some items are not defined,
and because they are(?)rem'd with the semicolon, you can
put whatever you like there.

you can also use '//'

as with every other item in the default skin - that synthedit
looks for when loading - if there is no definition in the
global.txt file, it will refer to the original default folder.
that is why you don't edit the default, among other reasons
(you will get a strange display in structure view unless you
really know what you're doing)

you see: i did the newb thing, and copied the entire folder,
and started making timid edits to see what happened.

i should have noticed 3rd party skins by pros with only a few
items in them: >*only include the objects you want to replace*..

so: you could, for example, make a ski called ' Alternative Fonts1'
and it would just contain global.txt - and your new global dot text
could only contain a few references, not all, if you only wanted to
change fonts for a few but not all text displays.
is this correct? i sense it will be if i try it.

i experienced a bit of a disappointment seeing one of my projects on
someone else's computer with the wrong font ;( i'd tried to be clever
with font, but they have to exist on the host system - Jeff recently
gace a list of those that are common to all win systems on the usergroup,
i think. so the font define isn't as promising as it looks - unless there's
a way of packing a font with a plugin, but i can't see it, because they
have to be installed and you can redistribute copyrighted etc. although you
could make your own font and give it as part of the install...?

ok >>>*what is the point of this post?*
> since you can pretty much have whatever you want 'rem'ed with semicolons
in this global. txt file, it could be made a little bit !*clearer*! what all
the entries are in the original default skin version, ( a'it..)so i propose
we rewrite it, more informatively and make it more recognisable for use
in new skins. and that it should pretty much be headed with instructions/easy
reference notes. there: mooted ..
(i hope you knw what i'm on about, lol =) )

Last Edit: Feb 23, 2014 19:14:35 GMT 1 by setronic

setronic
Synthedit regular

Posts: 293

Making a skin from scratch: default skin study. Feb 13, 2014 19:09:26 GMT 1

Quote

Post by setronic on Feb 13, 2014 19:09:26 GMT 1

so then the next thing i tried to do was make a replacement graphic
for..yeah it was a knob of course. knobman is your friend. and of
course i didn't know much about the importance of size (oh ho ho)
and snap to position, or any of that. my very modest simple graphics
were hopping all over the place every time i swapped skins. this wasn't
at all like changing skins in winamp or ableton

i didn't knw the different between small button and switch. or led.
small button is 'click' action -momentary-, switch is 'stepped' -2step:'latch' -
and led isn't defined, and therefore is 'passive', a slave graphic.

knob med.png and knob small.png are 'type animated' with mouse response rotary.
in contrast to the fader used with the standard fader, which is a bitmap with a
mask. why the different method? it is as if we are left with a load of shorthand
clues, all the elements/info, and left to get on with figuring out how it works.
no manual, like one of those cosmis devices in a sci-fi movie: learn to read the
runes, all the information is there .. i had nà idea i could replace the bitmap+mask
with a png with transparency, as long as i observed positioning and size(making
it *much easier* to make new faders!)

are you really supposed to start using the subcontrols knobs straight off? you
don't of course, you use the stock knob and fader when you're knocking up an
idea - so ideally, it would be nice to re-do those in your new skin. even if you
use subcontrols. in fact the quest would ideally be to produce a complete
replacement generic skin where you can change the colours easily(for example).

that is quite a bit of work if you want to know what is going on with each different
object type. i think the 'workmanlike' approach of just bashing out new graphics,
rigourously adhering to default sizes, and maintaining consistency in style, may be
the quickest and most effective way to achieve this, ultimately. i went off on a
tangent for a long time, using the skin for the bare minimum, just font and background,
replacing all other objects with subcontrols that used graphics stored in a library folder
in 'my documents', so i didn't have to go into the Program Files\SE\skins folder. it works
but you can't easily change skins and have another look at your project.

i'm coming back toward skins because i just want a set of functional working project
skins in a selection of drab colours so i can differentiate levels easily, and produce
plugins with plain functional skins more quickly-taking time out to design new objects
can be time consuming as well as unproductive.

Last Edit: Feb 13, 2014 19:31:17 GMT 1 by setronic

setronic
Synthedit regular

Posts: 293

Making a skin from scratch: default skin study. Feb 15, 2014 15:01:14 GMT 1 stephenblevin likes this

Quote

Post by setronic on Feb 15, 2014 15:01:14 GMT 1

getting back to the original 'global.txt' (in case anyone is
wondering what this is about)

explanation of some of the less immediately obvious entries,
could be a useful reference (and included in the ideal 'global.txt
for ease of use). (will edit/complete later)

default skin global.txt annotated!)

;other skin settings
; EVERYTHING WITH SEMICOLONS IS IGNORED
; Fonts
; www.w3.org/TR/REC-CSS1#font-variant
; font-color - BBGGRR Blue-Green-Red mix, hexadecimal numbers
; background-color SAME (-1 = transparent)
; font-size - Height in pixels
; font-family - Searches available fonts, left to right. Specific font name, or generic...
; 'serif' (e.g. Times)
; 'sans-serif' (e.g. Helvetica)
; 'cursive' (e.g. Zapf-Chancery)
; 'fantasy' (e.g. Western)
; 'monospace' (e.g. Courier). Dosn't seem to go smaller than 12
; Arial, Times New Roman, and Courier New are core fonts to Windows
;
; text-decoration underline (overline, line-through, blink not supported)
; font-style normal |italic (oblique not supported)

; font-weight : normal | bold | light | 100 | 200 | 300 | 400
; | 500 | 600 | 700 | 800 | 900
; following not supported at present: bolder | lighter
; text-align center | left | right
;UP TO THIS POINT,EVERYTHING ABOVE IS INSTRUCTIONS FOR HOW TO DEFINE FONTS
;
;TEXT DISPLAY CATEGORIES FOLLOW:
; >(text on modules title bar, structure view)
FONT_CATEGORY module_title
font-family Arial, "sans-Serif"
font-size 12
font-color #FFFFFF

FONT_CATEGORY panel_group (panel lines title font)
;font-family "System", "sans-Serif" <THIS IS IGNORED but why 2 options below?
font-family "MS Sans Serif", "sans-Serif"
font-size 14
font-weight bold
font-color #FFFFFF

FONT_CATEGORY control_label (never sure about this one.. ?default control text?)
;font-family System, "monoSpace"
;font-size 12
font-family "MS Sans Serif", "sans-Serif"
font-size 14
font-weight bold
font-color #FFFFFF

FONT_CATEGORY control_edit (get confused by this one too..)
;font-family System, Arial, "sans-serif"
;font-size 12
font-family "MS Sans Serif", "sans-Serif"
font-size 14
font-weight bold
;font-color #000000 - don't apply to edit boxs

this one is obvious
; this category is for LED Stack item labels and rotary switch labels
FONT_CATEGORY switch_label
font-family Verdana, "monoSpace"
font-size 10
font-color #F5F5F5

FONT_CATEGORY selector_text >this too.
;font-family System, "monoSpace"
;font-size 10
font-family "MS Sans Serif", "sans-Serif"
font-size 14
font-weight bold
font-color #ff0000

; what about this one? structure view only?
; the writing on container and VST plugin displays
FONT_CATEGORY tty
font-family terminal, monoSpace
font-size 10
font-color #00f000
background-color #000000

; plugs the pins in structure view?
FONT_CATEGORY plug
font-family Arial, "MS Sans Serif", Verdana
font-size 10
font-color #000000

FONT_CATEGORY "Normal"
font-family "MS Sans Serif"
font-size 12
font-color #000000
background-color #ffffff
text-align center

FONT_CATEGORY "Heading 1"
font-family Arial, Verdana
font-size 28
font-color #fff7f7
text-align center
text-decoration underline
;font-style italic
font-weight 900

FONT_CATEGORY "Heading 2"
text-align center
font-family Arial
font-size 18

FONT_CATEGORY "Heading 3"
text-align center
font-family Arial
font-size 14

FONT_CATEGORY "User 1"
font-family Arial Unicode MS
font-size 14
font-color #464646
background-color #ffffff
text-align left

FONT_CATEGORY "User 2"
font-family Courier

FONT_CATEGORY "User 3"
font-family Fixedsys

-------------------------------
those last ones are obvious. i just forget a couple
of them whilst editing and mix them up.

note that there is a full set of parameters for each
text category, but that it is not always used in full;
so you could add extra parameters like background
colour to things (- bearing in mind i didn't get into
synthedit to become a graphic or web designer ;-) so
i had take these things onboard - when i'd really be
quite happy with a really functional plain interface
for any GUI i do. i might even prefer to use 3rd party
skins, who knows, and not have to bother with graphics.)

Last Edit: Feb 15, 2014 15:02:56 GMT 1 by setronic

setronic
Synthedit regular

Posts: 293

Making a skin from scratch: default skin study. Feb 27, 2014 5:56:02 GMT 1

Quote

Post by setronic on Feb 27, 2014 5:56:02 GMT 1

want to ask some questions about global.txt, above - in the
meantime here is one of the other items in the 'default skin'/
SE native objects i have questions about:

LED2 / colour change graphics: how does the mask image
work on that? what other image format let me avoid using
*.bmp? i haven't tried editing this for a long time:
i think half-tones(greys instead of black/white) allow
tone effect but i've never been able to edit this
*predictably*(i know more or less that the mask provides
opacity/transparence information, that it differs from
regular 'movement' bitmap mask.

the bitmap+mask method of obtaining transparency is very
slow to use: *.png + alpha is the easy way. but it would
be useful neverthless to know. also what properties file
types like *.tga have (format used by Orion in its skins)

bitmap and mask have corresponding 'info' pixel areas, and
there is maybe a subtraction/etc. process, to provide visible
pixels-but i've no idea how to control this fully, and have
just experimented, guessing tones. is there an editor that
deals with this?(free? 'dedicated'/specific?)

>>if i use a solid black base image-can be any format?- 1 frame,
    i can use *.png on top of that, but i'm having trouble getting
    predictable results: should the solid base be other than solid
    black?eg: grey? must it be a bitmap(eg: 100% opaque)?

>>what is the relationship between black/white halftone shade
    and transparency? what is the (method) called? could you
    point to a link with information?(while i google...)

>>i'm looking for an effective way of using the colourchange HSB
    module in all controllers - maybe inserting all objects with a
    kind of midtone default, and they gain their colour definition
    within the project (if you see what i mean) with the patchmems
    that control HSB. - could be a huge CPU hog, with 3 patchmem
    for each part of the GUI that changes colour. unless i can use
    a DH/DD array thing to store all colours on one text patchmem.
    (speed/refresh issues in plugin??)

Last Edit: Feb 27, 2014 6:14:09 GMT 1 by setronic

steve
New Member

Posts: 12

Making a skin from scratch: default skin study. Nov 7, 2021 22:09:44 GMT 1

Quote

Post by steve on Nov 7, 2021 22:09:44 GMT 1

Panel Group appearance.
I find the thickness of the lines on the default rather heavy, and a bit unsightly. (personal view)
There is way to make the lines on the panel group module thinner, and change the colours. You need photo/graphics editing software such as Corel Paintshop Pro to edit the lines.png file, or you can use mine. There's no need to edit lines.txt as it all lines up (sorry-awful pun) as it is.
The text colour, size and weight are edited in the global.txt file in your skin folder (NOT THE DEFAULT!)

This is the lines file and how it looks (transparent background):

Edit the lines below to change the group text appearance.

FONT_CATEGORY panel_group
font-family Verdana
font-size 12
font-weight normal
font-color #000000

This is how the end result looks.

Note: The global.txt file is standard CSS for those with a bit of web page creation know-how.

Last Edit: Nov 7, 2021 22:43:14 GMT 1 by steve