Highlighted

Image drag and drop or image mask?

Explorer ,
May 21, 2019

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

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 !

Schermafbeelding 2019-05-24 om 09.40.17.png

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 !

Schermafbeelding 2019-05-24 om 10.09.44.png

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.

Views

754

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Image drag and drop or image mask?

Explorer ,
May 21, 2019

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

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 !

Schermafbeelding 2019-05-24 om 09.40.17.png

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 !

Schermafbeelding 2019-05-24 om 10.09.44.png

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.

Views

755

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 21, 2019 0
Adobe Employee ,
May 22, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2019 0
Explorer ,
May 23, 2019

Copy link to clipboard

Copied

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:

masked.jpg

Ex. 2: This is the dropped image behavior:

dropped.jpg

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2019 0
Satty_ LATEST
Community Beginner ,
Jan 30, 2020

Copy link to clipboard

Copied

Hey Preran, is there any efforts being made to make options available for how drag and dropped images can be handled? When we do mockups we use lots of placeholders and then drop in the assets. We then hand it off to dev often they need more image then what is shown for animation purposes. Video below to hopefully help illustrate:

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2020 0
Adobe Community Professional ,
May 24, 2019

Copy link to clipboard

Copied

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 !

Schermafbeelding 2019-05-24 om 09.40.17.png

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 !

Schermafbeelding 2019-05-24 om 10.09.44.png

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 24, 2019 2
Explorer ,
May 27, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 27, 2019 0