Important Tip for Recoloring Themes

[Mr GRiM]

When your doing recolors you have to be very careful with some images, if you are extracting the images with a resource hacker like Restorator then a lot of the recolors will come out wrong.

With some images it is important that you edit them in WSB and then export the image checking the box "don't undo alpha premultiplication"

If you notice any colored image with transparency when exported and not checking that box will be brighter and more vibrant, this is because it represents the image as it was before it was added to WSB or as it looks when you use Edit Image in WSB, if you check that box though it will export the image as it saved in the msstyles.

This means if you are recoloring the images extracted using Restorator the images will end up dull when imported back in again, this can also lead to other sorts of problems if you have to edit one of the images again in WSB as when you save it back to WSB again it can become a different shade to the rest of your images in a start menu for instance.

Here is one such example:

Edited using Edit image in WSB



Edited using images extracted from the msstyles



As you can see the glow on the text has almost been removed in the one extracted from the msstyles, now this is not something you will have to do for all images, batch recolors are a great idea but even then those images have to be imported again within WSB or the alpha premultiplication will not take place and this can cause problems with the images and sometimes it will display a white square instead.

I hope these tips were helpful for you all and that you can continue to do great recolors in all of their glory.

Some info on Premultiplied alpha

Spoiler!

Premultiplied alpha In computer graphics there are two different ways to represent the opacity of a color value. Win2D uses both methods. This article explains the difference, and which is used where.

Straight alpha
When using straight, also known as linear, alpha:

• RGB values specify the color of the thing being drawn
• The alpha value specifies how solid it is

In this world, RGB and alpha are independent. You can change one without affecting the other. To make an object fade out, you would gradually reduce its alpha value while leaving RGB unchanged.
To perform a source-over blend between two colors that use straight alpha format:
Copy

result = (source.RGB * source.A) + (dest.RGB * (1 - source.A))



Premultiplied alpha
When using premultiplied alpha:

• RGB specifies how much color the thing being drawn contributes to the output
• The alpha value specifies how much it obscures whatever is behind it

In this world, RGB and alpha are linked. To make an object transparent you must reduce both its RGB (to contribute less color) and also its alpha (to obscure less of whatever is behind it). Fully transparent objects no longer have any color at all, so there is only one value that represents 100% transparency: RGB and alpha all zero.
To perform a source-over blend between two colors that use premultiplied alpha format:
Copy

result = source.RGB + (dest.RGB * (1 - source.A))


Premultiplied alpha is used in graphics rendering because it gives better results than straight alpha when filtering images or composing different layers. For more information see the articles:

• https://blogs.msdn.com/b/shawnhar/arc...ied-alpha.aspx
• https://blogs.msdn.com/b/shawnhar/arc...mposition.aspx

Alpha in Win2D
Win2D uses straight alpha in its API surface, but premultiplied alpha for internal rendering operations.
Windows.UI.Color values use straight alpha. Whenever you pass a color to a Draw* or Fill* method, set the color of a brush, or clear to a color value, this color is specified using straight alpha.
The pixel values stored in a bitmap or rendertarget, and the drawing or blending operations that operate on these surfaces, use premultiplied alpha. When bitmaps are loaded from a file their contents are automatically converted into premultiplied format. When you call a Win2D drawing method, its color parameter is converted from straight to premultiplied before the actual drawing takes place.
Win2D image effects use a mixture of straight and premultiplied alpha. Some effects operate on one format, some on the other, and some provide a property to choose. The documentation for each effect type describes which alpha mode it uses. Effect input data is always assumed to be premultiplied, so when an effect needs to work with straight alpha it will first apply an unpremultiply transform, compute the effect, and then re-premultiply the output.
The bitmap APIs GetPixelBytes, SetPixelBytes, GetPixelColors, and SetPixelColors, do NOT perform any alpha format conversions. They just directly transfer bit values to or from the underlying GPU texture. This allows you to observe what alpha format Win2D is using internally:

• Create a drawing session on a rendertarget
• Call drawingSession.Clear(Colors.Tranparent)
• Colors.Tranparent is defined as R=255, G=255, B=255, A=0
• Win2D will convert this value to premultiplied format, yielding R=0, G=0, B=0, A=0
• Use GetPixelColors to read back the contents of the rendertarget
• Observe that it contains premultiplied format RGB=0, not RGB=255 like the original straight alpha Colors.Tranparent value

Converting between alpha formats
To convert a straight alpha color value to premultiplied format, multiply its R, G, and B values by A. To convert premultiplied to straight, divide R, G, and B by A.
Note that color information is often represented as byte values ranging from 0 to 255 (for example the Windows.UI.Color structure consists of 4 bytes). This representation is scaled up by a factor of 255, so a byte value of 255 actually means 1, while 128 is half intensity. That scaling factor must be taken into account during format conversions, so to convert a Windows.UI.Color from straight to premultiplied:
C#

Copy

premultiplied.R = (byte)(straight.R * straight.A / 255);
premultiplied.G = (byte)(straight.G * straight.A / 255);
premultiplied.B = (byte)(straight.B * straight.A / 255);
premultiplied.A = straight.A;


If you have image data that is using the wrong alpha format, PremultiplyEffect or UnPremultiplyEffect can be used to convert it.

Spoiler!

PremultiplyEffect Class[NoComposition] Converts an image from unpremultiplied to premultiplied alpha format.
Inheritance Hierarchy
System.Object
Microsoft.Graphics.Canvas.Effects.PremultiplyEffect


Namespace: Microsoft.Graphics.Canvas.Effects
Assembly: Microsoft.Graphics.Canvas (in Microsoft.Graphics.Canvas.dll) Version: 0.0.0.0Syntax
C#

Copy

public sealed class PremultiplyEffect : ICanvasEffect,
IGraphicsEffect, IGraphicsEffectSource, ICanvasImage, IDisposable



The PremultiplyEffect type exposes the following members.
Constructors

	Name	Description
	PremultiplyEffect	Initializes a new instance of the PremultiplyEffect class.

Top
Properties

	Name	Description
	BufferPrecision	Specifies what precision to use for intermediate buffers when drawing this effect.
	CacheOutput	Enables caching the output from drawing this effect.
	Name	Attaches a user-defined name string to the effect.
	Source	Gets or sets the input source for Premultiply effect.

Top
Methods

	Name	Description
	Dispose	Releases all resources used by the effect.
	GetBounds(ICanvasResourceCreator)	Retrieves the bounds of this PremultiplyEffect.
	GetBounds(ICanvasResourceCreator, Matrix3x2)	Retrieves the bounds of this PremultiplyEffect.
	GetInvalidRectangles	Queries what regions of the effect output have changed since it was last drawn.
	GetRequiredSourceRectangle	Queries what part of an effect source image is needed to draw an output region.
	GetRequiredSourceRectangles	Queries what parts of the effect source images are needed to draw an output region.
	InvalidateSourceRectangle	Notifies the effect that one of its source images has changed.

Top
Remarks
Supported by Win2D but not Windows.UI.Composition.
This Windows Runtime type corresponds to the D2D Premultiply effect.

See Also
Reference

Microsoft.Graphics.Canvas.Effects Namespace

Spoiler!

UnPremultiplyEffect Class[NoComposition] Converts an image from premultiplied to unpremultiplied alpha format.
Inheritance Hierarchy
System.Object
Microsoft.Graphics.Canvas.Effects.UnPremultiplyEffect


Namespace: Microsoft.Graphics.Canvas.Effects
Assembly: Microsoft.Graphics.Canvas (in Microsoft.Graphics.Canvas.dll) Version: 0.0.0.0Syntax
C#

Copy

public sealed class UnPremultiplyEffect : ICanvasEffect,
IGraphicsEffect, IGraphicsEffectSource, ICanvasImage, IDisposable



The UnPremultiplyEffect type exposes the following members.
Constructors

	Name	Description
	UnPremultiplyEffect	Initializes a new instance of the UnPremultiplyEffect class.

Top
Properties

	Name	Description
	BufferPrecision	Specifies what precision to use for intermediate buffers when drawing this effect.
	CacheOutput	Enables caching the output from drawing this effect.
	Name	Attaches a user-defined name string to the effect.
	Source	Gets or sets the input source for UnPremultiply effect.

Top
Methods

	Name	Description
	Dispose	Releases all resources used by the effect.
	GetBounds(ICanvasResourceCreator)	Retrieves the bounds of this UnPremultiplyEffect.
	GetBounds(ICanvasResourceCreator, Matrix3x2)	Retrieves the bounds of this UnPremultiplyEffect.
	GetInvalidRectangles	Queries what regions of the effect output have changed since it was last drawn.
	GetRequiredSourceRectangle	Queries what part of an effect source image is needed to draw an output region.
	GetRequiredSourceRectangles	Queries what parts of the effect source images are needed to draw an output region.
	InvalidateSourceRectangle	Notifies the effect that one of its source images has changed.

Top
Remarks
Supported by Win2D but not Windows.UI.Composition.
This Windows Runtime type corresponds to the D2D Unpremultiply effect.

See Also
Reference

Microsoft.Graphics.Canvas.Effects Namespace

[Shemhamforash]

Good to know, in the Slate theme for example how many images have been messed up would you say? The one with the glow text in start menu is one, is there a type of image or characteristic I should look for?

[Mr GRiM]

Good to know, in the Slate theme for example how many images have been messed up would you say? The one with the glow text in start menu is one, is there a type of image or characteristic I should look for?

Any bright colored images that have very low transparency, mostly things like glow around an image but also sometimes in the image depending on the image transparency, In some cases I prefer to do my recolor of an image in WSB and then export the image with box checked for alpha premultiplication and then import it using Restorator, this is helpful if an image is used in multiple locations and saves you having to edit/import the same image again and again.

Some other examples in the HUD themes would be the drop down buttons/separators in the address bar, the expand/collapse buttons in explorer, another one I noticed a color darkening on was the Command Module buttons.

In this theme that I got from Lamia there was a total of 8 images that I did angain and that would be the same for most of the HUD recolors.

I have attached the images I needed to edit for this theme, take note that these are how they are when they come from the msstyles or are exported with alpha premultiplication and can not be recolored again unless imported to WSB, I use the red theme as a base and do my edits in WSB and then export the recolored images I need with alpha premultiplication.

[freak69ize]

Also.. if youre batch recoloring.. some images may come out slightly a different shade of the color if you use Restorator.

[Shemhamforash]

I have attached the images I needed to edit for this theme, take note that these are how they are when they come from the msstyles or are exported with alpha premultiplication and can not be recolored again unless imported to WSB, I use the red theme as a base and do my edits in WSB and then export the recolored images I need with alpha premultiplication.

Very useful, I'm thinking I may combine the two threads like you guys did and eventually will post an update/updated preview image.

Based on what freak69ize just said, is it safe to add the new images to the msstyles in restorator, or will they fade color? I'd like to start doing recolors using restorator only for the images because of the time save, but only if there isn't a drawback to that method.

[freak69ize]

Very useful, I'm thinking I may combine the two threads like you guys did and eventually will post an update/updated preview image.

Based on what freak69ize just said, is it safe to add the new images to the msstyles in restorator, or will they fade color? I'd like to start doing recolors using restorator only for the images because of the time save, but only if there isn't a drawback to that method.

Usually things like start menu and task bar all come out looking fine for me. Some images are of a different shade of color and may come out darker or lighter color. Say youre coloring something to red.. it's very possible if you batch color all the red images from the image folder you dragged from restorator.. you may come out with some pink images. I make a new folder on desktop.. drag all start menu, task bar images and any image that looks the same color and batch recolor them to red.. drag back into restorator.. save file. All explorer and other images i do from edit image inside PS. It's a pain in the arse but i think it's still faster than doing it all from wsb