Old 01-07-2020, 03:54 PM   #1
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default FL Studio Theme - Beta 4


This is a theme based on FL Studio 20. It's still a work-in-progress, and it only supports 1920x1080 yet. I'm planning on making a 4k-version when the 1080-version is done. I've tested it in Windows only. Note that the theme adjuster does not work with this theme.

How to install
- Put contents of the zip-file in your Reaper resources folder, inside "ColorThemes".
- Install the fonts located under "FL Studio Theme (beta x)\Fonts".





These are the track colors I use:
Code:
Blue - 61 141 251
Brown - 170 88 28
Cyan - 45 255 250
Green - 103 215 66
Orange - 255 187 45
Pink - 247 53 155
Red - 226 85 69
Yellow - 248 224 92
Here are some preferences that makes it behave a bit more like FL:



Source file
I am using Affinity Designer to create all the images. If you want to edit this theme or make your own, download the source file here.

Special thanks
StefBosch
gxray - For helpful feedback and tips
Georgedayren - For the MIDI color map image
TheFRXST & Melethinnil - For the redesigned logo (v5)
__________________

Last edited by Mordi; 08-08-2022 at 12:46 AM. Reason: Update
Mordi is offline   Reply With Quote
Old 01-08-2020, 01:28 AM   #2
synkrotron
Human being with feelings
 
synkrotron's Avatar
 
Join Date: May 2015
Location: Warrington, UK
Posts: 1,444
Default

Looking very nice Mordi

So is that mock-up taken directly from your vector graphics software? It already looks like HiDPI
__________________
Bandcamp // YouTube // SoundCloud
synkrotron is offline   Reply With Quote
Old 01-08-2020, 01:55 AM   #3
+NRG
Human being with feelings
 
+NRG's Avatar
 
Join Date: Aug 2014
Location: NY
Posts: 791
Default

Looks great!
__________________
“Where words fail, music speaks”
+NRG is offline   Reply With Quote
Old 01-08-2020, 03:22 AM   #4
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Quote:
Originally Posted by synkrotron View Post
Looking very nice Mordi

So is that mock-up taken directly from your vector graphics software? It already looks like HiDPI
Yep, I designed it at 1080p resolution, but since it's vector I can just resize it to 4k.

Quote:
Originally Posted by +NRG View Post
Looks great!
Thanks!

I think I'll redo the TCP at some point. There's something about it that looks iffy.
__________________
Mordi is offline   Reply With Quote
Old 01-08-2020, 03:45 AM   #5
synkrotron
Human being with feelings
 
synkrotron's Avatar
 
Join Date: May 2015
Location: Warrington, UK
Posts: 1,444
Default

What vector graphics program do you use?
__________________
Bandcamp // YouTube // SoundCloud
synkrotron is offline   Reply With Quote
Old 01-08-2020, 03:59 AM   #6
b0se
Human being with feelings
 
b0se's Avatar
 
Join Date: Jan 2019
Location: UK
Posts: 938
Default

Looks great, good luck with development!

Quote:
Originally Posted by synkrotron View Post
What vector graphics program do you use?
Affinity Designer if I recall correctly.
__________________
Smooth V6 1080P/HiDPI Theme
b0se is offline   Reply With Quote
Old 01-08-2020, 04:02 AM   #7
synkrotron
Human being with feelings
 
synkrotron's Avatar
 
Join Date: May 2015
Location: Warrington, UK
Posts: 1,444
Default

The enlarged screenshots look far too "refined" to be output to 1080P so I am assuming that they are taken directly from the vector graphics software.
__________________
Bandcamp // YouTube // SoundCloud
synkrotron is offline   Reply With Quote
Old 01-08-2020, 04:35 AM   #8
Alez156
Human being with feelings
 
Alez156's Avatar
 
Join Date: Jun 2015
Location: Venezuela
Posts: 345
Default

Nice one Mordi!! keep it up! I was also thinking there should be a FL studio theme
__________________
💙 I run Reapertips.com | 🦋 Reapertips Theme | ☕️ Buy me a coffee
🎸 Modern Metal Songwriting REAPER Template
Alez156 is offline   Reply With Quote
Old 01-08-2020, 12:41 PM   #9
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Quote:
Originally Posted by synkrotron View Post
What vector graphics program do you use?
I use Affinity Designer. It's almost like the Reaper of illustration, but not quite.

Edit: And yes, with vector graphics you can zoom in infinitely and everything still looks sharp. Those zoomed images are just screengrabs from inside Affinity, whiled zoomed in.

Quote:
Originally Posted by b0se View Post
Looks great, good luck with development
Thanks b0se!

Quote:
Originally Posted by Alez156 View Post
Nice one Mordi!! keep it up! I was also thinking there should be a FL studio theme
Thanks! Glad I'm not the only one.
__________________

Last edited by Mordi; 01-08-2020 at 12:47 PM.
Mordi is offline   Reply With Quote
Old 01-08-2020, 01:37 PM   #10
Eliseat
Human being with feelings
 
Eliseat's Avatar
 
Join Date: Mar 2018
Location: Cologne
Posts: 1,362
Default

That looks pretty awesome. Nice and clean. Even if its only a mockup and mixture of the two worlds its a really promising project.

Keep it up. And thanks for the info.

Greetings
Eli
__________________
☆.。.:*・°☆.。.:*・°☆.。.:*・°☆REAPER//✿◔‿◔)°☆.。.:*・°☆.。.:*・°☆
Eliseat is offline   Reply With Quote
Old 01-08-2020, 02:30 PM   #11
synkrotron
Human being with feelings
 
synkrotron's Avatar
 
Join Date: May 2015
Location: Warrington, UK
Posts: 1,444
Default

Quote:
Originally Posted by Mordi View Post
Those zoomed images are just screengrabs from inside Affinity, whiled zoomed in.
Ah, I thought so, thanks. They looked a bit too crisp to have been converted to 1080P images.

Affinity Designer user here too, although my skills are rather basic, hence the simplistic theme of mine. But even for the simple stuff I find it easier to create in Affinity and then export to PNG.


cheers

andy
__________________
Bandcamp // YouTube // SoundCloud
synkrotron is offline   Reply With Quote
Old 01-08-2020, 03:55 PM   #12
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Thanks Eliseat.

Yeah, Affinity is great. I've been trying to use stuff like Symbols and Constraints, but I find that it can be a bit unwieldy. It seems buggy, but it might just be my unfamiliarity with it.

Today I discovered Global Colours, which lets your elements share colors that you can edit after applying them. I've been missing this in Photoshop CS6 for years!

I'm redoing the TCP and lining up elements in the Master track. Got this so far:


It goes a bit away from the FL look, but something like this would look better anyway I think.
__________________
Mordi is offline   Reply With Quote
Old 01-08-2020, 05:03 PM   #13
+NRG
Human being with feelings
 
+NRG's Avatar
 
Join Date: Aug 2014
Location: NY
Posts: 791
Default

Quote:
Originally Posted by Mordi View Post
It goes a bit away from the FL look, but something like this would look better anyway I think.
My worthless opinion... Take inspiration from what you like but make it your own!
__________________
“Where words fail, music speaks”
+NRG is offline   Reply With Quote
Old 01-09-2020, 02:56 AM   #14
georgemickel
Human being with feelings
 
georgemickel's Avatar
 
Join Date: Jun 2018
Location: Pewaukee,WI
Posts: 283
Default

Great job Mordi!

G
georgemickel is offline   Reply With Quote
Old 01-09-2020, 02:59 AM   #15
synkrotron
Human being with feelings
 
synkrotron's Avatar
 
Join Date: May 2015
Location: Warrington, UK
Posts: 1,444
Default

Quote:
Originally Posted by Mordi View Post
Today I discovered Global Colours, which lets your elements share colors that you can edit after applying them.
Thank you for the heads-up on Global Colours. I will have a look at that.
__________________
Bandcamp // YouTube // SoundCloud
synkrotron is offline   Reply With Quote
Old 01-09-2020, 07:41 AM   #16
Tobbe
Human being with feelings
 
Tobbe's Avatar
 
Join Date: Sep 2009
Location: Northern Lights
Posts: 742
Default

Looks fantastic.
__________________
OS: Manjaro KDE Plasma, Reaper For Linux (64Bit) native linux-vst plugins, LSP-Plugins, TpL-Plugins, Harrison's AVA & VST Plugins. Behringer U-PHORIA UMC22.
Tobbe is offline   Reply With Quote
Old 01-09-2020, 01:13 PM   #17
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Quote:
Originally Posted by +NRG View Post
My worthless opinion... Take inspiration from what you like but make it your own!
Yep - Looks like it'll differ more than I was going for at first.

Quote:
Originally Posted by georgemickel View Post
Great job Mordi!
Thanks George!

Quote:
Originally Posted by Tobbe View Post
Looks fantastic.
Thank you, Tobbe!

Outline mode looks pretty neat. Would make for a horrible theme!


Not sure what's missing in the TCP now.


Fancy icons. Going a bit overboard with the gradients. =P
__________________

Last edited by Mordi; 01-09-2020 at 02:02 PM.
Mordi is offline   Reply With Quote
Old 01-09-2020, 04:41 PM   #18
lucas_LCS
Human being with feelings
 
Join Date: Dec 2015
Posts: 2,099
Default

Looks nice!
have you tried removing the shadow on the knobs, like you did with the buttons?

::
__________________
LCS Themes
lucas_LCS is offline   Reply With Quote
Old 01-09-2020, 04:45 PM   #19
b0se
Human being with feelings
 
b0se's Avatar
 
Join Date: Jan 2019
Location: UK
Posts: 938
Default

Quote:
Originally Posted by lucas_LCS View Post
Looks nice!
have you tried removing the shadow on the knobs, like you did with the buttons?

::
I'd vote for no button shadow too :¬)
__________________
Smooth V6 1080P/HiDPI Theme
b0se is offline   Reply With Quote
Old 01-10-2020, 06:56 AM   #20
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Quote:
Originally Posted by lucas_LCS View Post
Looks nice!
have you tried removing the shadow on the knobs, like you did with the buttons?

::
Quote:
Originally Posted by b0se View Post
I'd vote for no button shadow too :¬)
Good idea. Looks cleaner.

__________________
Mordi is offline   Reply With Quote
Old 01-10-2020, 01:43 PM   #21
Nostrap
Human being with feelings
 
Join Date: Dec 2017
Posts: 179
Default

Looking great so far!
Nostrap is offline   Reply With Quote
Old 01-10-2020, 02:21 PM   #22
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Thanks Nostrap!

Everything except the knobs are transparent, so I figured I might as well do those too. Twiddled the IO-button a bit as well.


After investigating how to export, it seems that the pink lines are going to be problematic. There doesn't seem to be a way to tell Affinity that those pink lines should be 1 pixel.

I found a solution that's going to take many hours to set up, where I simply create a 2x version of each element manually - by simply scaling them. There are ways to have 1px pink lines stay 1px when scaling inside the program.

Hopefully I can find a smarter way to do it, or else it's going to take a long time to get a 4k version ready.

Edit: A lot of elements luckily do not have pink lines, such as mute and solo-buttons. This makes exporting those a breeze, at least.
__________________

Last edited by Mordi; 01-10-2020 at 02:41 PM.
Mordi is offline   Reply With Quote
Old 01-10-2020, 03:21 PM   #23
synkrotron
Human being with feelings
 
synkrotron's Avatar
 
Join Date: May 2015
Location: Warrington, UK
Posts: 1,444
Default

Quote:
Originally Posted by Mordi View Post
After investigating how to export, it seems that the pink lines are going to be problematic. There doesn't seem to be a way to tell Affinity that those pink lines should be 1 pixel.
I had problems with the pink lines initially in Affinity. But I seem to be exporting them okay now.

As long as the lines are 1px thick then you should be okay, and they of course need to be located correctly. This is a screenshot of my mcp_recinput image taken from Affinity:-



You know if the pink lines haven't exported because you will see them in your theme in REAPER.

I have tried various settings for the export and they all seem to give the same positive result. I exported that one using the Bilinear resample setting.


cheers

andy
__________________
Bandcamp // YouTube // SoundCloud
synkrotron is offline   Reply With Quote
Old 01-10-2020, 03:48 PM   #24
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Thanks for the tip, Andy. My hope for Affinity was to make exporting to both 1080p and 4k a one-click affair, but it seems it can't be done quite that easily as long as the pink lines are involved.

I tried exporting my mute and solo buttons. Looks alright, I think. The red and yellow looks iffy though.


Edit: Managed to get the rest of the tiny TCP knocked out.


The record arm button sticks out like a sore thumb.
__________________

Last edited by Mordi; 01-10-2020 at 05:48 PM.
Mordi is offline   Reply With Quote
Old 01-10-2020, 07:30 PM   #25
timbralzoom
Human being with feelings
 
timbralzoom's Avatar
 
Join Date: Apr 2010
Location: Turkey/Istanbul
Posts: 1,820
Default

looking handsome!
timbralzoom is offline   Reply With Quote
Old 01-10-2020, 07:50 PM   #26
pandabot
Human being with feelings
 
pandabot's Avatar
 
Join Date: Oct 2018
Posts: 367
Default

This looks pretty good 👍

Hopefully they'll generalize the v6 theme adjuster at some point so themes like this can use it too, that would be cool
pandabot is offline   Reply With Quote
Old 01-10-2020, 11:39 PM   #27
Gecho
Human being with feelings
 
Join Date: Nov 2019
Posts: 8
Default

is it be possible to create an alternative vertical 8 bars block with a little difference in color intensity as in FL studio?
Gecho is offline   Reply With Quote
Old 01-11-2020, 12:25 AM   #28
+NRG
Human being with feelings
 
+NRG's Avatar
 
Join Date: Aug 2014
Location: NY
Posts: 791
Default

Quote:
Originally Posted by Mordi View Post
Everything except the knobs are transparent, so I figured I might as well do those too. Twiddled the IO-button a bit as well.
Looks great! I have a similar idea that I’ve been working on with the inactive elements being (semi) transparent... Your design is much more refined / polished!

My opinion would be at least the volume knob should stand out more (and the pan knob a little bit different than the rest of the elements). And the background for the routing button... If the background was more neutral the colored routing indicators would stand out more.

Looking forward to watching this develop! B)
__________________
“Where words fail, music speaks”
+NRG is offline   Reply With Quote
Old 01-11-2020, 11:36 AM   #29
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Quote:
Originally Posted by timbralzoom View Post
looking handsome!
Thanks, timbralzoom!
Quote:
Originally Posted by pandabot View Post
This looks pretty good 👍

Hopefully they'll generalize the v6 theme adjuster at some point so themes like this can use it too, that would be cool
Thanks, pandabot. This is based on Fusion, which itself was based on the v4 default theme. I'm not a fan of the V6 layout - I think V4 got it mostly right.

Quote:
Originally Posted by Gecho View Post
is it be possible to create an alternative vertical 8 bars block with a little difference in color intensity as in FL studio?
You mean in the arrange window? I think every other bar is possible - not sure about every 8th. I would like to see that as well, since FL uses every 4th or every 8th afaik.

Quote:
Originally Posted by +NRG View Post
Looks great! I have a similar idea that I’ve been working on with the inactive elements being (semi) transparent... Your design is much more refined / polished!

My opinion would be at least the volume knob should stand out more (and the pan knob a little bit different than the rest of the elements). And the background for the routing button... If the background was more neutral the colored routing indicators would stand out more.

Looking forward to watching this develop! B)
Thanks +NRG! Yeah, I see your point about having the volume and pan stick out, and be more distinct from eachother. In fact, in my current theme (a mod of Fusion) the volume and pan are exactly alike, which has led to several occasions where I've mistaken one for the other.

For me, I think the distinction is clearer now when they are right next to each other. I can always make alternate layouts with variations like this though.
__________________
Mordi is offline   Reply With Quote
Old 01-11-2020, 02:28 PM   #30
pandabot
Human being with feelings
 
pandabot's Avatar
 
Join Date: Oct 2018
Posts: 367
Default

Quote:
Originally Posted by Mordi View Post
Thanks, pandabot. This is based on Fusion, which itself was based on the v4 default theme. I'm not a fan of the V6 layout - I think V4 got it mostly right.
Oh yeah I'm not a big fan of the V6 layout either, but I like the introduction of the theme adjuster to allow users to show/hide the different elements without having to look at WALTER code. I like to remove almost everything so I don't have to look at so much. For example I rarely touch the rate control so I don't need a separate slider for it, I also don't need the global automation state control because I rarely use that either and can always adjust it through Actions. I'm not sure if people actually use these things or if designers are just afraid to remove them because they're on all the default themes.
pandabot is offline   Reply With Quote
Old 01-11-2020, 05:10 PM   #31
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Your opinions align mostly with mine, pandabot. I never use those things either, except very rarely. I was thinking about removing global automation actually. I will remove the "record mode" button in the TCP, because I usually just right click the record arm button when I need MIDI overdub.



Here's a gif with more elements themed. Quite nifty to have the record monitor button appear only when tracks are armed.

The record arm button looks a bit weird. Not sure what to do with that one.
__________________
Mordi is offline   Reply With Quote
Old 01-11-2020, 05:48 PM   #32
lucas_LCS
Human being with feelings
 
Join Date: Dec 2015
Posts: 2,099
Default

- Recarm button looks fine to me. you might try removing the gradiation and making it 'flat' when armed or 'lit'.
- like the shadowless knobs.
- preferred the gray knobs to the 'monochrome' version, but that version still works.
- Monochrome knob version could use a touch more differentiation/delineation for faster identification

::
__________________
LCS Themes
lucas_LCS is offline   Reply With Quote
Old 01-12-2020, 08:57 AM   #33
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

I tried a bunch of variations for the record arm button. In the end, I went with gradient since almost every other element has a soft gradient, so it's more consistent.

Decided to go for Blackadder ITC as the track title font.


jk

Edit: Most of the TCP is usable now. Not sure how to color the FX button when it has plugins on it.


The exporting process in Affinity is really nice for elements that do not need pink lines. Literally done in seconds.
__________________

Last edited by Mordi; 01-12-2020 at 09:22 AM.
Mordi is offline   Reply With Quote
Old 01-12-2020, 09:47 AM   #34
AugerJ
Human being with feelings
 
Join Date: Dec 2015
Posts: 476
Default

Quote:
Originally Posted by Mordi View Post
Not sure how to color the FX button when it has plugins on it.
How's this as an idea: the font color changes from dark grey to light grey and the (background) button color gets darker?

P. S. If you don't mind me saying this, it seems there's a bit too much space on the right of "X" from "FX"...

And if on the Route button the Send and the Receive lines were not vertical but horisontal (let's say, with the Send line on the top),
it would be easyer to "read". "No vertical lines — no Master send".

Last edited by AugerJ; 01-12-2020 at 10:03 AM.
AugerJ is offline   Reply With Quote
Old 01-12-2020, 10:36 AM   #35
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Quote:
Originally Posted by AugerJ View Post
How's this as an idea: the font color changes from dark grey to light grey and the (background) button color gets darker?

P. S. If you don't mind me saying this, it seems there's a bit too much space on the right of "X" from "FX"...

And if on the Route button the Send and the Receive lines were not vertical but horisontal (let's say, with the Send line on the top),
it would be easyer to "read". "No vertical lines — no Master send".
Tested your FX suggestion before, and it didn't look right to me - even though I agree it makes sense. I'll experiment more - thanks for the suggestion.

Yep, I've been meaning to fill that gap. I didn't originally intend for everything to be so close together, but I kind of like it. Saves some pixels for the name label too. I might include this as a "compact" layout.

For a while I had horizontal lines, but since the button is slightly wider than it is tall, I found that vertical stripes was best.

Edit: Being able to quickly experiment is nice. I like how clutter-free it looks when the buttons are gone.
__________________

Last edited by Mordi; 01-12-2020 at 12:58 PM.
Mordi is offline   Reply With Quote
Old 01-13-2020, 01:46 PM   #36
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

Had a look at theme colors today. It looks iffy, but at least it's dark. Still have a lot of images yet to revamp.




Found out you can change the splash image via themes. It's completely horrible, and I like it.


Made a fancy knob effect, totally not by accident.
__________________

Last edited by Mordi; 01-14-2020 at 02:39 PM.
Mordi is offline   Reply With Quote
Old 01-14-2020, 02:39 PM   #37
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

There we go. I like this differentiation of the knobs, although they are currently no different when at zero.


Now they're different at zero.
__________________

Last edited by Mordi; 01-14-2020 at 02:59 PM.
Mordi is offline   Reply With Quote
Old 01-14-2020, 04:25 PM   #38
poetnprophet
Human being with feelings
 
poetnprophet's Avatar
 
Join Date: Jan 2018
Posts: 1,651
Default

very cool stuff, I'm a fan of FL so keep up the good work!
__________________
https://www.kdubbproductions.com/
https://www.youtube.com/channel/UCpC...2dGA3qUWBKrXQQ
i7 8700k,4.9Ghz,Win10,Reaper 6,Motu 828es, Cranborne ADAT500
poetnprophet is offline   Reply With Quote
Old 01-15-2020, 03:49 AM   #39
AugerJ
Human being with feelings
 
Join Date: Dec 2015
Posts: 476
Default

Quote:
Originally Posted by Mordi View Post
Now they're different at zero.
They look better this way. And a user can immediately see that they are knobs and not just some dark and round thingys.

Maybe, (a bit more) rounded corners for pits (or buttons)?
AugerJ is offline   Reply With Quote
Old 01-15-2020, 04:03 AM   #40
vanhaze
Human being with feelings
 
vanhaze's Avatar
 
Join Date: Jul 2012
Location: Netherlands
Posts: 5,247
Default

Mordi, awesome Job man, i wish you fun and succes with developing your FL Theme further.
Looking forward to a release !
__________________
Macbook Pro INTEL | Reaper, always latest version | OSX Ventura | Presonus Studio 24c
My Reaper Tips&Tricks YouTube Channel: https://www.youtube.com/user/vanhaze2000/playlists
vanhaze is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 04:03 AM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.