Branded Images

Branded imagery allows you to make stock photos or visuals from various sources feel more unified within your publication by adding a special overlay or a frame. Think of this as an image “filter” but specifically for publishing.

Examples

Image with colored background

6 columns grid HTML

<figure class="stk-snippets-branded-image-01 stk-reset stk-image-figure" data-ce-tag="image-figure">
  <div data-ce-tag="mask" class="stk-mask"></div>
</figure>

CSS

.stk-snippets-branded-image-01 .stk-mask {
  padding-right: 8px;
  padding-bottom: 8px;
}

.stk-snippets-branded-image-01 .stk-mask img {
  box-shadow: 8px 8px #4A00FF;
}

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust background color and photo margins in the component CSS.

Image with the custom border

6 columns grid HTML

<figure class="stk-snippets-branded-image-02 stk-reset stk-image-figure" data-ce-tag="image-figure">
  <div data-ce-tag="mask" class="stk-mask"></div>
</figure>

CSS

.stk-snippets-branded-image-02 .stk-mask {
  mask-border: url("data:image/svg+xml,%3Csvg width='19' height='28' viewBox='0 0 19 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.14085 28H0V0H4.14085C4.14085 2.72253 6.3479 4.92958 9.07043 4.92958C11.793 4.92958 14 2.72253 14 0H18.1409V28H14C14 25.2775 11.793 23.0705 9.07043 23.0705C6.3479 23.0705 4.14085 25.2775 4.14085 28Z' fill='black'/%3E%3C/svg%3E%0A") 5 2 round;
}

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust border style in the component CSS.

Content Experience Impact

According to Lucidpress, maintaining brand consistency across your channels can lead to an average 33% growth in revenue—and 50% of companies say that customers expect consistent branding across the board. So, this is about more than just making your content look sleek. You can use the power of components to help bring everything together by designing some standard frames or overlays that you can quickly pop any image into and make it yours.

Dos

• Align your branded imagery designs with your organization’s style guide, using the colors, fonts, icons, and the like that are used across your site.

• Develop a style guide specifically for your imagery, outlining the types of photos or illustrations you choose from stock sites. It will be easier to unify them with branded overlays when they already align with your brand styles in some way.

• Consider designing some branded image templates for fun—like illustrative overlay designs that make images stand out—and some for utility—like creating frames that look like a phone or computer interface to drop screenshots into.

Don'ts

Don’t make your branded overlays too busy—you don’t want to take away from the imagery itself or make your graphics look like an ad with tons of texts and logos.

Learn More

3 Content Design Mistakes That Are Majorly Hurting Your Branding—and How to Fix Them Fast Setka

The Art of a Consistent Brand Image Canva

Extra Inspiration