Umcaruje
commented
7 years ago We've successfully redesigned all of the effects. Thank you to everyone involved :tada: :tada: :tada:
Closed RebeccaDeField closed 7 years ago
Umcaruje
commented
7 years ago We've successfully redesigned all of the effects. Thank you to everyone involved :tada: :tada: :tada:
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:
@Umcaruje @mikobuntu @BaraMGB @IvanMaldonado