Dark Theme Icons & small suggestions

Hey guys, I’m currently in the process of redesigning the icons so that they work well with the dark theme. I’ve also got a few suggestions that I’d like to share as well.

Suggestions:

#1: Default Synfig to the Dark Theme. Photoshop, Clip Studio, ToonBoom and even Krita have already done this. The dark theme is easier on the eyes and I have to assume that it’s a better choice from a marketing position as well. (BUG: While in dark theme, the number of the current frame is black which makes it hard to read.)

#2: The toolbar must be able to be compressed down to a single column. At the moment, it can only be compressed to three columns. The color picker and everything with it will need to be rearranged and scaled down in size to save toolbar space.

#3: Make the tool buttons more square instead of rectangular and make them larger so that the user can see more of the image icon.

#4: Give the option to change icon sizes in the view drop-down menu. There should be options for normal, Large, XLarge for people with various size monitors and eyesight.

#5: Change the font. The current font is too thin and is difficult to read. The font should focus on being clean and readable.

#6: Icon location in Synfig is a total mess. All icons for the program should exist in a single, easy to find, folder. This will help artists organize and update icons.

#7: When changing to a different tool, don’t have the tool properties tab automatically active. Some people have their tools already set to the way they want and find it annoying when the tool property auto-activates. In my case, I have to keep reactivating the layers tab due to the tool tab turning itself on.

#8: After drawing with the spline tool, it would be nice if the tool completed the shape when a hotkey like ‘space’ or ‘enter’ was pressed.

#9: Give an option to collapse animation channels in the timeline. Usually the user just wants to see channels that actually have keyframes in them. All unused channels are essentially just wasting space and making the timeline harder to read.

#10: Remove any incomplete tools like the brush tools from the stable release. I can’t stress this enough, but you can’t afford to have beta testing stuff in the stable version. Basically, it makes Synfig look unprofessional. You guys need to make it a rule that only polished and complete tools go into the release, everything else is forked to experimental builds.

#11: Combine Tools together to keep redundancy low. You guys really don’t need a circle, square and polygon tool. You could just have a single draw shape tool and have the shape type as a tool setting. Aim to reduce the toolbar to one line of very concise and well polished tools.

#12: Give us a ‘grid’ in the timeline. This makes it easier to see what frame number a keyframe is on.

1 Like

+1 for everything
-G


I’m getting carried away with this. :laughing:

Okay, the dark theme icons are ready to go. In case anyone is curious, ALL of these icons were either made by me or are modifications I made to Synfig’s original icons. So yes, add these icons to the main branch if you want. I’m going to start working on a light theme pack next. :smiley:

NEW TOOL ICONS:

DOWNLOAD: https://drive.google.com/file/d/0Bwzk-fAhFYDzcTUtOVJsUldMTzQ/view?usp=sharing

INSTALL INSTRUCTIONS(windows):
PLACE ALL THE ICONS IN synfigIcons in: C:\Program Files\Synfig\share\pixmaps
PLACE ALL THE ICONS IN synfigIcons2 in: C:\Program Files\Synfig\share\icons\Adwaita\16x16\actions

ANOTHER SUGGESTED FIX:
#13: It’s difficult to see whether a button is toggled on or off in the dark theme. Make the toggle button color a little bit lighter so it contrasts more with the panel. Notice how difficult it is to see which buttons are toggled in the image below:

#14: Change the canvas so that it defaults to showing a pure white background instead of the checkered background. Add a toggle button on the header bar to toggle the checkered background on and off. It’s important to note that the background will always be transparent, I’m just suggesting that we give the user to toggle the checkered background on and off. This makes the program prettier to look at, but also easier to draw in.

#15: Why is there an “Advanced Outline Layer” and a regular “Outline Layer”? This is needlessly confusing and needs to be combined. If there are features in advanced layers that aren’t always needed, then just provide a toggle feature for the layer to turn those features off if not needed.

You should consider to work together with Jcome (Yu Chen) who is working on may aspects of the user interface, included the new theme icons:

github.com/synfig/synfig/commit … 94f485cbb0
plus.google.com/+YuChen/posts/4WYDJm964bp

Also worth reading this:

We are very respectful with keeping the author of the works so probably if we take your designs would ask you for the license of your artwork.
Thanks in advance!
-G

Also, those “small suggestions” are very valuable for us, so if you want to help us a little more, please join to our issue tracker and add the feature requests you consider:
synfig.org/issues/thebuggenie/synfig
Thanks!
-G

Thanks, Genete. I made the icons for you guys, so they’re all yours. :smiley:

I looked at Jcome’s icons, he put a lot of work into them. My design and his seem to be very different, so I don’t know if I can actually help him. If he does update the themes, I hope we keep the current dark theme as an option since it works well with the icons I designed. If he’s interested in the icons I made, I’d definitely be willing to collaborate.

I updated the icons. I added new icons and changed some of the old ones. I hope you guys like them.

Sharing the icons as PNG is not useful for us. We do not provide icons images with the source code but we provide the source code of the icon (the sif file) and during construction, the image file is generated and packed for the installer.
Thanks to that, you’ve been able to create your own icon set because the sif files of them all were available.
Please share the sif files of them to really help us to improve the application. Otherwise your work would be only a patch for a few people who take effort and interest on replace the png images by yours.

Thanks!
-G

At the moment they’re just rasters. I don’t want to take the effort to convert everything to vector if the devs aren’t interested.

When I import an SVG into synfig, the tangent handles are reversed. Is there a way to correct this?

I’m asking because I can export SWF files from Anime Studio. I can then convert the SWF to SVG using this site: http://riaxe.com/online-swf-to-svg-converter/

My only issue is that the tangent handles are all reversed. :confused:

It is better to open the SVG with Inkscape and export to sif format directly from Inkscape. It will open fine in Synfig.
Since Inkscape 0.49 (I think) the svg to sif exporter is native.
-G

Awesome, I didn’t know inkscape worked so well with synfig.

Be careful. SVG artwork could have too much points on it that wouldn’t be friendly with any vector animation program. Also, if prefer to import artwork from Inkscape it is better to prepare it organized by layers.
Finally, the way the commercial/public SVG artwork create outlines/contours is overlapping two regions and placing one bigger (the outline) behind the other (fill) what is not a good idea at all.
-G

These are the sif files: https://drive.google.com/file/d/0Bwzk-fAhFYDzYzdIWGlPZE1hWkE/view?usp=sharing

I should note that these are only the light icons. I need to make dark variations. It will be easy for me to make changes using an illustrator batch process, it’s just hell opening up every illustrator file in inkscape and saving to sif.

Is there a way to batch import and save to sif using inkscape?

I don’t know about inkscape batch processing.
In Synfig you just need to add a Solid color layer on top with the proper dark grey and establish its blend method to “Darken”.
-G

Is there a way to do that in batch? I’m just trying to find a way from having to alter and save 102 icons manually.

On Windows 8.1 Synfig 1.01 dark ui theme has black FONT ON VERY DARK GREY BACKGROUND…for the Current Time, so is hard to read… how can I change this font color to something readable against a very dark gray background? I like the dark theme.120fSnippet.PNG

Could you help to open an issue in issue tracker, so that we don’t forget it. Thanks.

Hey, I would like to help with synfig project. I’am not strong with programming but I really can help with GUI design, because in current release I see a lot of problems from user side(especially with small screens). I wold like to contact with someone who redesigning interface and discuss about changes.