Setka Components Library
  • Welcome
  • Getting Started
    • Introduction
    • Components
    • Tutorials
    • Setka Help Center
  • Organizing Content
    • Section Headers
    • Author Information
    • Table of Contents
    • Summary Card
    • Parallel Narrative
    • List Blocks
  • Data & Information
    • Data Highlights
    • Tables
    • Tips
    • Important Facts
    • Expert Profiles
    • Company Information
    • Spoilers
  • Visuals & Imagery
    • Immersive Article Covers
    • Branded Images
    • Photo Collages
    • Photo Captions
    • Pull Quotes
    • Bulleted Lists
  • Engagement & Sales
    • CTAs
    • Related Links
    • Relevant Products
Powered by GitBook
On this page
  • Examples
  • Image with colored background
  • Image with the custom border
  • Content Experience Impact
  • Learn More
  • Extra Inspiration

Was this helpful?

  1. Visuals & Imagery

Branded Images

PreviousImmersive Article CoversNextPhoto Collages

Last updated 4 years ago

Was this helpful?

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

<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>
.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;
}

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

Image with the custom border

<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>
.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;
}

You can also adjust border style in the component CSS.

Content Experience Impact

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

Extra Inspiration

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

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

, 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.

Setka

Canva

Introduction
Introduction
According to Lucidpress
3 Content Design Mistakes That Are Majorly Hurting Your Branding—and How to Fix Them Fast
The Art of a Consistent Brand Image