This content has moved - please find it at https://blog.cyotek.com.

Although these pages remain accessible, some content may not display correctly in future as the new blog evolves.

Visit https://blog.cyotek.com.

Effect Presets and Image Optimization

I'm currently juggling time between our different software products, trying to balance bug fixes for one to general improvements to another. Today, I want to show a glimpse of some improvements being made to our Gif Animator.

Effect Presets

For some time now, I have been using an extension with Gif Animator that allows limited scripting using JavaScript. I mainly use this extension to automatically apply effects to animations via macro's, an example of which you can see below

function applyCyotekText()
{
  if(app.ActiveFrame != null)
  {
    var effect;
    var config;

    effect = app.GetEffect("Text");

    config = effect.CreateToken();
    config.Text = "Cyotek";
    config.Angle = 30;
    config.Font = new System.Drawing.Font("Segoe UI", 11);
    config.TextColor = System.Drawing.Color.FromArgb(64, 64, 96);
    config.AntiAlias = true;
  
    app.ApplyEffect(effect, config);
  }
  else
  {
    alert("Select a frame before trying to apply an effect.");
  }
}

Originally I intended on releasing this extension as I thought it was kind of cool. Well, it is kind of cool. But... it's a bit much expecting users to write scripts for this sort of thing. My next thought was maybe I could have Gif Animator generate the scripts, which is feasible but still doesn't seem like a great idea. Not to mention the JavaScript interpreter I was using didn't like talking to some parts of my API leading me to add in horrible methods like "GetEffect" instead of the existing indexers that serve the rest of the program quite well. No thanks!

So I decided to add presets which you can load and save directly from the effect configuration dialog.

Easily configure presets for your favourite effects

To load a preset, just select it from the drop down list and it will be immediately applied to the dialog configuration. Or, you can reset the configuration to the default for the effect by clicking the Reset to Default button.

Of course, you can save a preset too - just set the dialog configuration as you see fit, click the Save Preset button and give it a name. A small block of json will be saved containing the effect data in your user data directory for the program.

{
  "Alpha": 75,
  "Angle": 45,
  "AntiAlias": true,
  "Font": "Segoe UI, 11.25pt",
  "Text": "Example!",
  "TextColor": "Black",
  "X": 7,
  "Y": 20
}

Much easier than writing a script by hand! Admittedly, scripting is a more powerful solution but my goal at this point is to make the program as easy to use a possible in the GUI, and catering to the power users via the CLI.

Effect Configuration UI Improvements

I've also made the dual pane preview control slightly easier to use by adding buttons for manipulating the zoom, as sometimes I find I want to size the image to fit, and generally that can't be done with a single spin of the mouse wheel. Buttons are now available to allow this and other basic zoom tasks, along with an indicator of the current zoom level.

Although I don't see performance being an issue currently, there are now controls to disable the automatic updating of the effect preview whenever you adjust fields in the dialog, along with a button to trigger a manual preview when automatic refreshes are disabled.

Oh yes, and I added the ability to maximise the dialog - that one was bugging me.

Image Optimization

I mentioned above I wanted to make the program easier to use. Part of that meant getting rid of the old Optimize Image dialog. While there was nothing specifically wrong with the dialog as such, it didn't lead well to choosing the right type of colour reduction and didn't have very many options - for example no monochrome support and no reduction options other than nearest colour.

Those who read the programming side of this blog may be aware I spent some time researching dithering algorithms, and these are now part of Gif Animator, meaning when you optimise an image, you can choose a dithering algorithm which can often produce much better results.

This is done via the new Decrease Color Depth menu, which provides the ability to decrease the number of colours in an image from between 2 and 256.

New menus for colour reduction

The different modes are fairly similar, offering a choice of dithering routines and various options depending on the colour depth. Sadly, there's no ordered dithering at present as I haven't finished (well, started) my research into those algorithms yet.

Reducing the colour depth of an image

You might notice the dialog has the same zoom, preview and preset controls as the original text effect screenshot above. This is because the colour reduction functions are in fact just another type of image effect. Which is quite handy from a number of perspectives!

Release Date?

At the moment I'm not quite sure when this update will be released. I'm still wrestling with if I should leave Gif Animator on .NET 3.5, or move it (and all other Cyotek products) to .NET 4.5. There isn't really an incentive to stay on the legacy platform except to support a legacy OS and I don't really have the time or the budget for that.

I'd also like to implement some ordered dithering as this type of dithering really fits in well with 8bit images.

Hopefully this glimpse of future functionality is useful, as always, feedback is welcome.

Update History

  • 2015-06-22 - First published
  • 2020-11-23 - Updated formatting

Leave a Comment

While we appreciate comments from our users, please follow our posting guidelines. Have you tried the Cyotek Forums for support from Cyotek and the community?

Styling with Markdown is supported