Redesign The Effects Plugins #2831

Open
RebeccaDeField opened this Issue Jun 9, 2016 · 41 comments

Projects

None yet

10 participants

@RebeccaDeField
Contributor
RebeccaDeField commented Jun 9, 2016 edited

It has been requested by some here that all of the Effects Plugins are redesigned to fit with the new theme. There are a lot of plugins and some people have already started collaborating with me on this. Bellow I have listed all of the elements and design standards that will be needed to design matching plugins that look consistent. I think it's important that if someone would like to contribute a design for one of the plugins that they say so in the comments bellow so that two people don't redesign the same plugin.

FONTS
The font that I am using is Orbitron Bold in ALL CAPS with 1.50 tracking in 11px. The font (and preferably all elements) have a 8px space around them. For best results, export your final SVG as a Cairo .png (I prefer to use the Save A Copy fuction here).

If the Cairo .png leaves some of the elements looking a bit to crisp, you can always export the text with Cairo and the background with Inkscape. Use the "Color to Alpha" option in GIMP to cut out the bg and then place it on the background. This is only necessary if you are creating a more complex graphic.

BACKGROUND
It is important to me the the background of the plugins have a little bit of contrast with the Title Bars. Let's try to keep backgrounds that are going to be flush with the Title Bars the same as the "Plugin BG" background in my source files.

GRADIENTS
Please note that your eyes follow the direction that a gradient is facing. For example, the gradient that I used in the LFO controller was linear so that the your eyes would be drawn from the title down to the content of the plugin. If the gradient pointing at an odd angle, the plugin will be a bit less intuitive for the user. Gradients should be subtle when possible. This is not exactly a rule, but because many prefer flat design and many others don't I try to keep it somewhere in between.

KNOBS
The knobs were designed to look slightly transparent in the center, but they actually a solid color. This is just the green with an overlay of the background color to give it the same transparent look, while making sure that the knobs are perfectly visible in all parts of the program.

BUTTONS
You will find various buttons in my .SVG source files. Please reference the SENDS buttons. I usually just create pixel perfect text from scratch because it doesn't take me very much time but if you want to use a font, just make sure that you are using good hinting when you export. Inactive buttons are lighter with white text, active buttons are darker with green text. Again, you should easily be able to resize the buttons in my source files so don't worry about creating that from scratch.

SLIDERS
Please see the Faders Knobs in my source files for a reference.

OTHER BACKGROUNDS
Although I strive for simplicity, it may be necessary to group certain elements in some cases. For this, please reference my "Plugin Box" graphic in my source files. This was designed for a specific element, but it is using the same gradients and style elements you would want to use if you wanted to box in a section up.

I think that covers all of the elements will be needed in the plugins. Please let me know if I missed anything or if you have any questions.

This issue is for the effects plugins only. If someone wants to redesign instrument plugins I think that can be another discussion for another time. :)

LIST OF EFFECT PLUGINS

Note: you can replace @mentions with PR # once ready.

c23fe13a-2769-11e6-8d73-77afd310cdc1

@Umcaruje @mikobuntu @BaraMGB @IvanMaldonado

@BaraMGB
Contributor
BaraMGB commented Jun 9, 2016

👍

#2816

@Umcaruje Umcaruje added the gui label Jun 9, 2016
@Umcaruje
Member
Umcaruje commented Jun 9, 2016 edited

@RebeccaDeField could you turn this into a meta issue, by adding a checklist so we keep track of all the plugins that get redesigned.

@RebeccaDeField
Contributor
RebeccaDeField commented Jun 10, 2016 edited

@Umcaruje Done 😄

For some updates to the plugins and LFO controller BG please refer to this PR.

@tresf tresf added the meta label Jun 10, 2016
@RebeccaDeField
Contributor
RebeccaDeField commented Jun 10, 2016 edited

I redesigned the Spectrum Analyzer. I will post a screenshot when I get the chance.

@RebeccaDeField
Contributor

So I placed the updated files in plugins/spectrumanalyzer yet I am still not seeing my updated design when I load it. I found the original files here. Am I not using the right folder or missing somerhing here? Thought it also might be a computer/file permissions issue.

@BaraMGB
Contributor
BaraMGB commented Jun 10, 2016

Unfortunately you have to make the whole compile procedure again if you change a plugin graphic. I guess cmake has to reference the new files. @tresf is there a faster way for this?

@Umcaruje
Member

is there a faster way for this?

in your build folder navigate to the plugins folder and find your plugin an open its folder. Delete the embedded_resources.h file and recompile. Takes around 2 seconds for me.

@RebeccaDeField
Contributor

@Umcaruje Now I understand the importance of your earlier comment about this. Thank you for the tip, I will let you know how it goes.

@mikobuntu
Contributor

This will give me something to work on today. The Carla plug-in ( Linux only at the moment I believe ) needs updating to be more in-line with the rest of the plugins.

@RebeccaDeField
Contributor
RebeccaDeField commented Jun 12, 2016 edited

@mikobuntu Looking forward to seeing the updated design. If you have any design related questions at all, feel free to let me know.

@RebeccaDeField
Contributor
RebeccaDeField commented Jun 16, 2016 edited

@Mentioning some talented contributors that might be interested in redesigning more plugins...
@diizy @IvanMaldonado @Umcaruje @BaraMGB

@IvanMaldonado
Contributor

Do we want the plugins to have an independent design like pro tools or fruity loops? or do we want them to follow a unique design like Logic pro X?

I vote for different designs and colours for different plugins, I worked on a mockup some time ago for Organic (#2404) and I could do more designs for some of the plugins mentioned but I need opinions on how do we want them to look.

@tresf
Member
tresf commented Jun 16, 2016

Historically, effect plugins generally remain relatively standard themed/consistent whereas the instrument plugins are still allowed to stand out. There are exceptions of course, the Equalizer is a GUI of it's own.

@BaraMGB
Contributor
BaraMGB commented Jun 16, 2016

@RebeccaDeField I suggest we work together one plugin after another. I could imagine there has to be a lot of rearranging of the layout, too. If I have a mock up, I can do that. After that, we only have to change the background artwork. What do you think?

@RebeccaDeField
Contributor
RebeccaDeField commented Jun 24, 2016 edited

What do you think?

@BaraMGB Sounds great.

@RebeccaDeField
Contributor

@LocoMatt Is working on a redesign for the waveshaper. Just want to give people a heads up here so that two people don't accidentally work on the same plugin 👍

@Umcaruje
Member

I'm going to redesign the Amplifier, the Bass Booster, and the Stereophonic Matrix (probably)

@Umcaruje Umcaruje added this to the 1.2.0 milestone Aug 19, 2016
This was referenced Aug 20, 2016
@Umcaruje
Member

I'll be tackling the Crossover EQ next, and probably the multittap echo after that.

@RebeccaDeField
Contributor
RebeccaDeField commented Aug 21, 2016 edited

@LocoMatt is also be on the bitcrush and dynamics processor.

@RebeccaDeField
Contributor

@LocoMatt also might also help with the Equalizer but it needs a lot of design and coding work so that will probably be a team effort.

This was referenced Aug 22, 2016
@BaraMGB
Contributor
BaraMGB commented Aug 23, 2016

Any suggestions for the LFO controller?

lfo

@BaraMGB
Contributor
BaraMGB commented Aug 23, 2016

Okay, I take the EQ plugin. I'm familiar with the code.

@RebeccaDeField
Contributor

@BaraMGB Could you remove some of the space on the top and bottom to match the sides?

This was referenced Aug 25, 2016
@jasp00
Member
jasp00 commented Aug 28, 2016

Is the classic theme being broken with these changes? Should the positions and sizes be moved to the style sheet?

@jasp00
Member
jasp00 commented Aug 29, 2016

The classic theme looks fine.

@RebeccaDeField
Contributor

The classic theme looks fine.

@jasp00 Glad to hear that.

@RebeccaDeField
Contributor
RebeccaDeField commented Sep 30, 2016 edited

This is progressing very nicely! The only redesigns that have yet to be claimed are:

  • Delay

(Edit: @simonvanderveldt is working on the Dual Filter)

@LocoMatt I just wanted to follow up with the plugins designs that you volunteered your time to create:

  • Waveshaper Effect
  • Bitcrush
  • Dynamics Processor

If you could, I would really appreciate it if you posted some screenshots or WIP designs here so that contributors can give feedback, assistance and help out wherever needed.

Thank you!

@simonvanderveldt
Contributor

Current WIP for Dual Filter
image

Note that the styling of the whole widget is done using CSS, no pixmaps or anything.

I'm going to move the Led/Checkbox and make the dropdowns smaller to make the whole window smaller, also have to cleanup the code. Will create a PR once I'm done doing those three things.

@tresf
Member
tresf commented Oct 16, 2016

I'm going to move the Led/Checkbox

From a consistency perspective, perhaps...

screen shot 2016-10-16 at 7 32 49 pm

@BaraMGB
Contributor
BaraMGB commented Oct 17, 2016 edited

LEDs should be labeled. But looks good! 👍

@BaraMGB
Contributor
BaraMGB commented Oct 17, 2016 edited

Dual Filter :
I've just read on discord that the LEDs turns of the sound at all if both are off. I'm unsure if this a behavier we want. My feeling is that the LEDs bypass the filter. But perhaps we can add a "No filter" entry in the combobox for bypassing and get rid of the LEDs?

@Umcaruje @simonvanderveldt

@simonvanderveldt
Contributor
simonvanderveldt commented Oct 18, 2016 edited

@tresf @BaraMGB How about this?
image
I wasn't able to position the LedCheckBox using CSS, so had to resort to using move. Might've missed something though.

@BaraMGB @Umcaruje

I've just read on discord that the LEDs turns of the sound at all if both are off. I'm unsure if this a behavier we want. My feeling is that the LEDs bypass the filter. But perhaps we can add a "No filter" entry in the combobox for bypassing and get rid of the LEDs?

For me the current behavior doesn't make sense either, turning the filters off should imho result in a bypass. I focused what I did solely on the redesign/looks of the Dual Filter. Is it OK to address how it works in another PR/issue? That way we can finalize the redesign stuff (hopefully) a bit sooner :)

@Umcaruje
Member

f3045b04-9580-11e6-913c-c97ae43b53e1

The LED's should be moved one pixel to the right, like in the pic.

@simonvanderveldt
Contributor

The LED's should be moved one pixel to the right, like in the pic.

That's funny, I aligned them the same as the LEDs in the effect "instruments" in the effects chain :P
image
What to do?

@RebeccaDeField
Contributor

@simonvanderveldt Can you fix the spacing on both LEDs so that the alignment can be both correct and consistent? If not, is there someone that would know how?

From what I can tell, the element that you are using to box up the effects is missing a border to be consistent with the rest of the plugins, but it is hard for me to tell for sure from your screenshot. Would you be willing to check the "Plugin Box" element in my source files to make sure it matches? You've done a really great job on this design so far. 👍 😄

@simonvanderveldt
Contributor

@simonvanderveldt Can you fix the spacing on both LEDs so that the alignment can be both correct and consistent? If not, is there someone that would know how?

I'll have another look if I really am using the same distance/offset. If that's the case and if it's important someone should decide what the correct distance/offset should be and I can incorporate that no problem.

From what I can tell, the element that you are using to box up the effects is missing a border to be consistent with the rest of the plugins, but it is hard for me to tell for sure from your screenshot. Would you be willing to check the "Plugin Box" element in my source files to make sure it matches? You've done a really great job on this design so far. 👍 😄

I'll re-check that and create a PR afterwards.
Thanks! :)

@RebeccaDeField
Contributor
RebeccaDeField commented Oct 28, 2016 edited

I think I might have some time to take on the Delay plugin, but not sure. What kind of layout changes do we need to make, if any?

I'm assuming that we will also want to make the same label changes to the knobs that we did for the Flanger.

@Umcaruje @BaraMGB

This was referenced Oct 31, 2016
@RebeccaDeField
Contributor

Update: @simonvanderveldt paved the way for a great redesign with the Dual Filter Plugin (thank you!) but they are currently unavailable to recreate it in the format we are using. See details here #3093. If anyone is willing or available to take that on, it would be highly appreciated.

@m-xbutterfly Thank you for your aweesome work on the Waveshaper plugin. I don't believe it would take much to reuse that design for the Dynamics Processor, so I wanted to know if you might be interested in working on that plugin as well. If you are not available for that right now or have other things to work on, I completely understand. :)

I am still working on the Delay design. The Bitcrush plugin is also available if anyone wants to claim that design.

@m-xbutterfly
Contributor
m-xbutterfly commented Dec 10, 2016 edited

Not a problem @RebeccaDeField. Can I play around with the dynamics processor for a couple days and then get back to you? In the meantime if anyone claims it that would also be fine with me.

I could recreate the dual filter plugin though. That shouldn't take very long.

@RebeccaDeField
Contributor
RebeccaDeField commented Dec 10, 2016 edited

Can I play around with the dynamics processor for a couple days and then get back to you?

@m-xbutterfly absolutely and thank you.

@zonkmachine
Member

This is some seriously good stuff but I don't think this issue should block rc2, we haven't released anything in some nine months... 🐌
Maybe merge the one's that are not completely finished but still good looking and then sneak back in a month or two and fix them up?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment