Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign The Effects Plugins #2831

Closed
RebeccaDeField opened this issue Jun 9, 2016 · 51 comments
Closed

Redesign The Effects Plugins #2831

RebeccaDeField opened this issue Jun 9, 2016 · 51 comments
Labels
Milestone

Comments

@RebeccaDeField
Copy link
Contributor

@RebeccaDeField RebeccaDeField commented Jun 9, 2016

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 an 8px space around them. For best results, export your final SVG as a Cairo .png (I prefer to use the Save A Copy function 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
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 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.

Plugins before:
c23fe13a-2769-11e6-8d73-77afd310cdc1

@Umcaruje @mikobuntu @BaraMGB @IvanMaldonado

@BaraMGB
Copy link
Contributor

@BaraMGB BaraMGB commented Jun 9, 2016

👍

#2816

@Umcaruje Umcaruje added the gui label Jun 9, 2016
@Umcaruje
Copy link
Member

@Umcaruje Umcaruje commented Jun 9, 2016

@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
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jun 10, 2016

@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
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jun 10, 2016

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

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jun 10, 2016

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
Copy link
Contributor

@BaraMGB 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
Copy link
Member

@Umcaruje Umcaruje commented Jun 10, 2016

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
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jun 11, 2016

@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
Copy link
Contributor

@mikobuntu mikobuntu commented Jun 12, 2016

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
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jun 12, 2016

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

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jun 16, 2016

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

@IvanMaldonado
Copy link
Contributor

@IvanMaldonado IvanMaldonado commented Jun 16, 2016

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
Copy link
Member

@tresf 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
Copy link
Contributor

@BaraMGB 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
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jun 24, 2016

What do you think?

@BaraMGB Sounds great.

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Aug 18, 2016

@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
Copy link
Member

@Umcaruje Umcaruje commented Aug 19, 2016

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
Copy link
Member

@Umcaruje Umcaruje commented Aug 21, 2016

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

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Aug 21, 2016

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

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Aug 21, 2016

@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.

@BaraMGB
Copy link
Contributor

@BaraMGB BaraMGB commented Aug 23, 2016

Any suggestions for the LFO controller?

lfo

@Umcaruje
Copy link
Member

@Umcaruje Umcaruje commented Oct 18, 2016

f3045b04-9580-11e6-913c-c97ae43b53e1

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

@simonvanderveldt
Copy link
Contributor

@simonvanderveldt simonvanderveldt commented Oct 18, 2016

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
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Oct 25, 2016

@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
Copy link
Contributor

@simonvanderveldt simonvanderveldt commented Oct 25, 2016

@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
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Oct 28, 2016

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

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Dec 10, 2016

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
Copy link
Contributor

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

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
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Dec 10, 2016

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
Copy link
Member

@zonkmachine zonkmachine commented Dec 14, 2016

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?

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jan 23, 2017

@m-xbutterfly I just wanted to give you a heads up that I am taking on the Dynamics Processor design. Thank you very much for your work on the waveshaper which will make this very easy for me.

@m-xbutterfly
Copy link
Contributor

@m-xbutterfly m-xbutterfly commented Jan 24, 2017

Not a problem @RebeccaDeField. I tried to play around with the dynamics processor design but I didn't really get anything good.
image

That seemed cluttered to me, and I didn't like the way the stereomode switches turned out. If you want me to send you anything from that though let me know.

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Jan 24, 2017

If you want me to send you anything from that though let me know.

@m-xbutterfly It would be fantastic if you could send over what you have so far (more specifically dynamics_processor_control_dialog.cpp file) I think I have a good plan for those switches :)

@BaraMGB
Copy link
Contributor

@BaraMGB BaraMGB commented Feb 14, 2017

Equalizer done. What else?

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Feb 14, 2017

@BaraMGB At the moment, @Umcaruje has volunteered to finish on the Dual Filter Plugin and @Kitty-Dyson is working with me on the Bitcrush plugin so unless someone becomes unavailable there are no plugins that haven't already been claimed or completed 😊

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Mar 29, 2017

Almost done recreating the Dual Filter :)

shot-2017-03-29_16-06-10

We want to pull the last couple of plugin designs into the 1.2-stable branch instead of master, correct?

@tresf
Copy link
Member

@tresf tresf commented Mar 30, 2017

We want to pull the last couple of plugin designs into the 1.2-stable branch instead of master, correct?

Correct

@RebeccaDeField
Copy link
Contributor Author

@RebeccaDeField RebeccaDeField commented Apr 27, 2017

@Kitty-Dyson I just wanted to follow up with you on the bitcrush plugin. If you need any assistance at all, please don't hesitate to ask.

@Umcaruje
Copy link
Member

@Umcaruje Umcaruje commented May 27, 2017

We've successfully redesigned all of the effects. Thank you to everyone involved 🎉 🎉 🎉

@Umcaruje Umcaruje closed this May 27, 2017
@Umcaruje Umcaruje moved this from In Progress to Done in Release 1.2.0 RC3 May 27, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.