Skip to main content
V
VitorCordeiro
Known Participant
May 21, 2019
Answered

Image drag and drop or image mask?

  • May 21, 2019
  • 2 replies
  • 3080 views

I was messing with the new (May update) responsive component with some text and background images. I was trying to replicate the banner tutorial (Responsive Resize for Components – Adobe XD Release May 2019 - YouTube ) but my masked image didn't behave like in the video. After some frustration I realize there's a difference between dropping an image into a shape and create a mask with a shape in a image already in your XD file. They both have the responsive options, but behave very differently.

Am I missing something? Is there a way to make the mask and the shape become responsive like the dragging and dropping?

This topic has been closed for replies.
Correct answer Peter Villevoye

There's indeed a subtle difference.

On the left:

An image mask created by selecting an image with a shape (on top or below it) will yield an object precisely cropped and positioned as prepared, with much more hierarchically constructed elements. Resizing the shape as a whole will reveal more of the image, but move the contained image around a bit oddly. Nevertheless, you can easily drill down and freely scale, rotate, and move anything around: either the shape, anchor points, content, whatever.

On the right:

Simply dropping an image into a shape creates a structurally simpler shape, with less levels of hierarchy and less options. E.g. the image will initially be inserted with either the height or width in full view (whatever fits first) and positioned centrally. Resizing the masked object as a whole will retain its filling appearance. You can freely move and scale the image within the masking shape, but here comes the strangest difference: try rotating it (numerically) and the rotation will be applied to the whole object !

The explanation:

You might have noticed that XD turns any normally imported or dragged image (on the left) already and automatically into a rectangularly masked image (so an image within a rectangular shape). This is achieved by using a similar technique as the "background image" of any kind of container (typically a DIV) in CSS. This method historically has options like fill or fit, scaling and positioning, but no rotation !

So using your own shape to mask an image actually wraps the image's container into a secondary container, allowing for rotation (a DIV can rotate, a background image can't). And this double-masked construction sure has awkward effect on any (auto)resizing...

The image directly dropped into the shape (on the right) yields no more than just that shape (not necessarily a rectangle), with the image as its background image. So no mask containing another mask. Nevertheless, this masked object behaves differently at first while resizing the shape (because of the filling background behaviour), but allows for a more specific position and size (but no rotation) once you select the image within.

To a front-end developer, the difference between a plain image and an image being shown as a background is very crucial ! The plain image will be part of the relevant content in HTML, but a background image will be processed as appearance in CSS. So text-only readers and many accessibility devices and tools often ignore them, and search engines regard them as less important in search results ranking.

A good UX designer may keep this typical difference in mind, when using images and knowing that decorative imagery will be processed and produced differently than relevant images. But it's not a big deal that XD makes this difference less obvious.

2 replies

Peter Villevoye
Community Expert
Peter VillevoyeCommunity ExpertCorrect answer
Community Expert
May 24, 2019

There's indeed a subtle difference.

On the left:

An image mask created by selecting an image with a shape (on top or below it) will yield an object precisely cropped and positioned as prepared, with much more hierarchically constructed elements. Resizing the shape as a whole will reveal more of the image, but move the contained image around a bit oddly. Nevertheless, you can easily drill down and freely scale, rotate, and move anything around: either the shape, anchor points, content, whatever.

On the right:

Simply dropping an image into a shape creates a structurally simpler shape, with less levels of hierarchy and less options. E.g. the image will initially be inserted with either the height or width in full view (whatever fits first) and positioned centrally. Resizing the masked object as a whole will retain its filling appearance. You can freely move and scale the image within the masking shape, but here comes the strangest difference: try rotating it (numerically) and the rotation will be applied to the whole object !

The explanation:

You might have noticed that XD turns any normally imported or dragged image (on the left) already and automatically into a rectangularly masked image (so an image within a rectangular shape). This is achieved by using a similar technique as the "background image" of any kind of container (typically a DIV) in CSS. This method historically has options like fill or fit, scaling and positioning, but no rotation !

So using your own shape to mask an image actually wraps the image's container into a secondary container, allowing for rotation (a DIV can rotate, a background image can't). And this double-masked construction sure has awkward effect on any (auto)resizing...

The image directly dropped into the shape (on the right) yields no more than just that shape (not necessarily a rectangle), with the image as its background image. So no mask containing another mask. Nevertheless, this masked object behaves differently at first while resizing the shape (because of the filling background behaviour), but allows for a more specific position and size (but no rotation) once you select the image within.

To a front-end developer, the difference between a plain image and an image being shown as a background is very crucial ! The plain image will be part of the relevant content in HTML, but a background image will be processed as appearance in CSS. So text-only readers and many accessibility devices and tools often ignore them, and search engines regard them as less important in search results ranking.

A good UX designer may keep this typical difference in mind, when using images and knowing that decorative imagery will be processed and produced differently than relevant images. But it's not a big deal that XD makes this difference less obvious.

    V
    VitorCordeiroAuthor
    Known Participant
    May 27, 2019

    Thanks for the clarification!

    I think they should have two types of masking them. Or after masking, you should be able to make the masked image behave the same as a dropped into a shape one. "Apply to shape" or something like that.

      Preran
      Community Manager
      PreranCommunity Manager
      Community Manager
      May 22, 2019

      Can you provide us with more information on what you mean by, "behave differently" so that we can better understand and respond to your question?

      Thanks,

      Preran

      V
      VitorCordeiroAuthor
      Known Participant
      May 23, 2019

      After turning the responsive resize ("ajuste responsivo" in portuguese) on both, the dragged image always fills the mask. The image I created with a mask goes only to it's regular size while the mask keeps going. I'm sending two images for you to understand better.

      Ex. 1: This is the masked image behavior:

      Ex. 2: This is the dropped image behavior:

      You can see in the first example I clicked and dragged the masked image and it stays the same size. In the second example, the dropped image fill the dragged frame automatically. Both are marked "automatic" on the responsive resize.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices