Package stylization

Each package can have its own image for header; that makes the visual style more unique.
You can use an image of any size of format .PNG

Example of stylization headers

The image is automatically aligned left-center.

Header alingment

Color of a background filling

An image of any size including a small one) can be extended by a color of background filling.

To the left - a small image, to the right - a filling color.

Example color continue

Add a gradient mask to your image to create a transition into a color of a common filling (to make the image proceed with the help of the color, not expanding beyond the header).

Use gradient mask to create transition in color

Copy HEX (in our example it's #D81C52) of the filing color and add into common package settings, in a part of stylization.

"stylization": {
"header_color_hex": "#D81C52"
}

How can you see the header in a test mode?

You can see how the package image will look like before the compilation.
Just place the header image near your package file (.ATOM), give it a name custom_header_name, preserving image format .PNG

Image Header in test package

Now you can launch the test mode in the extension, add your package and see its header.

You can finally integrate the header into your package at the stage of compilation.