2D image sizes vs phone resolutions

So I’m creating an effect and I just want to add a 2d image at the bottom of the screen. Should be simple, right?

I import the image and add a “2D > Screen Image”, and automatically by default it gets assigned a size in pixels that matches an arbitrary resolution of some arbitrary phone screen (720 x 1280).

I can easily resize the image to my desired size and place it at the bottom of the screen. but the screen resolution and aspect ratio of the user may vary.

In my case the image is a sort of banner and I want it to be at the very bottom of the screen, and to occupy a given percentage of the width of the screen while maintaining the original image’s aspect ratio.

All I see are absolute sizes that appear to be in pixels. Are they actual pixels or are they in proportion to a hypothetical reference screen resolution of 720x1280? That is, if I set a size of, say, 500 by 50 px, will it always be truly 500 by 50 pixels regardless of screen resolution, or will it be 500/720 of the device width? And either way, how will it be positioned on a screen that has a different aspect ratio??

How come none of this is specified in the documentation?

3 Likes

The most common resolution size for a phone screen is 720 x 1280, and since a very high amount of TikTok users use it on their phones, that’s why it’s the default size. Regarding for how it’s sized on the screen, that will ultimately depend on which stretch mode you set on the 2D image. Different stretch modes will decide whether your image stretches and adjusts to the screen size or stays the same size on all screens. This article might help a bit! :smiley_cat: https://effecthouse.tiktok.com/learn/guides/2d/screen-image/

1 Like

Love to do this 2d images

1 Like