|
|
@@ -17,7 +17,7 @@ The best way to get a feel for this is probably to look at the included themes f
|
|
17
|
17
|
|
|
18
|
18
|
### Required options
|
|
19
|
19
|
|
|
20
|
|
-The following options are required (they aren't required for every theme, as long as they're present in `default`):
|
|
|
20
|
+The following options are required (they aren't required for every theme as long as they're present in `default`):
|
|
21
|
21
|
|
|
22
|
22
|
* `width` - desired video width in pixels (e.g. `1280`)
|
|
23
|
23
|
* `height` - desired video height in pixels (e.g. `720`)
|
|
|
@@ -75,10 +75,6 @@ You can set both a `backgroundColor` and a `backgroundImage`, in which case the
|
|
75
|
75
|
|
|
76
|
76
|
After you've edited `settings/themes.json`, you'll want to run either `npm run rebuild` or `npm start` to rebundle the new themes for the editor.
|
|
77
|
77
|
|
|
78
|
|
-### A note about layout
|
|
79
|
|
-
|
|
80
|
|
-When designing your own themes, keep in mind that web browsers and social apps put a variety of overlays on videos when they're paused or playing, like a progress bar at the bottom or a fat play button in the middle. Try to space things out so that important parts of your design aren't obscured.
|
|
81
|
|
-
|
|
82
|
78
|
### A note about fonts
|
|
83
|
79
|
|
|
84
|
80
|
By default, Audiogram will already have access to fonts on your system. This might be fine for local use, but it will become a problem on a server without the fonts you're used to, or if you want to use a specific font across lots of installations.
|
|
|
@@ -107,3 +103,20 @@ The bad news is that the font handling in the library Audiogram relies on has a
|
|
107
|
103
|
2. Ensure that the font name defined in the font file's metadata matches the font name you're using (e.g. if your font definition says "32px Gotham", make sure that when you open your font file in something like Font Forge and look at the metadata, the font name is also "Gotham" and not some variant.
|
|
108
|
104
|
|
|
109
|
105
|
3. Use TrueType fonts (.ttf) rather than other formats.
|
|
|
106
|
+
|
|
|
107
|
+
|
|
|
108
|
+### A note about layout
|
|
|
109
|
+
|
|
|
110
|
+When designing your own themes, keep in mind that web browsers and social apps put a variety of overlays on videos when they're paused or playing, like a progress bar at the bottom or a fat play button in the middle. Try to space things out so that important parts of your design aren't obscured.
|
|
|
111
|
+
|
|
|
112
|
+These diagrams show you what gets covered up in various web players for a 1280x720 video (the in-app players are generally more minimalistic):
|
|
|
113
|
+
|
|
|
114
|
+
|
|
|
115
|
+
|
|
|
116
|
+
|
|
|
117
|
+
|
|
|
118
|
+
|
|
|
119
|
+
|
|
|
120
|
+
|
|
|
121
|
+
|
|
|
122
|
+
|
Noah