How To Create 3D Floating Image Frames In Total Launcher

Elevate a home screen design by giving flat photos and icons a premium, three-dimensional presence. Use this guide to build a 'floating frame' (layered shape) effect utilizing Total Launcher’s native graphic shapes. Instead of relying on basic containers, learn how to stack geometric shapes to act as strict vector clipping masks for images. By combining these masked image layers with precisely calibrated, deep Gaussian shadows on the base frame, a striking illusion of depth is created. This walkthrough covers the entire workflow from establishing perfect Z-order alignment to calculating the exact shadow-margin safety buffers needed to prevent visual clipping.

This is the resulting form that the procedure will create:

1. The Shape Base (Frame)
   • This layer acts as the physical frame and casts the deep shadow.
   1. Create the Object: Long-press an empty spot on your screen and select Add > Graphic > Default > Shape.
      1. Select Add (+)
      2. At Type, select round_rectangle
      3. Change label to 0_rnd_rec_base
      4. In Options (gear), retain the default ‘’28’’ as that is a Material You standard
      5. In Fill, select Solid which is the default, and for Color1 input #FFFFD208 for a goldish hue.
      6. The dialog is as shown here , then tap OK to place the shape on the page
2. Size and Position
   • Resize this new shape to the desired overall frame dimensions and place it in the approximate location on the page.
3. The Base Shadow
   • Create the shadow to be applied to the base.
   1. With the base shape selected, tap Options to open the Object Edit menu.
      1. The shape (0_rnd_rec_base) is shown as the Image in the dialog.
      2. Scroll down to tap Background > Shadow
      3. Tap Add (+)
         1. Tap Shadow color and enter the hex number 4D000000
         2. For Shadow radius slide to 20 (or enter 20 and tap required OK)
         3. For Shadow offset X leave at default 0
         4. For Shadow offset Y slide to 22 (or enter 22 and tap the required OK)
         5. Change the label to 0_shadow_c4D000000_r20_y22
         6. The dialog is as shown here , then tap OK to return to the Shadow list dialog. The required shadow now exists.
4. Apply the Shadow to the Base
   1. Select the Base Shape and tap the Object Design menu Option icon
      1. Note the image entry reflects the current object 0_rnd_rec_base
   2. Apply a shadow to the base shape by scrolling down and tapping Shadow > select entry 0_shadow_c4D000000_r20_y22
   3. Appropriate Margins are required to prevent the shadow from being clipped.
   4. Scroll down and tap Margins
      1. The Shadow/Margin Rule manually requires a calculation of increasing the object's margins to be greater than or equal to the shadow's radius and offset. In this case, that is 20 + 22.
      2. But the Launcher does follow the premise:
         1. Tap Suggest to see all sides appropriately filled in.
      3. The dialog is as shown here , then tap OKTap OK to exit.
   5. The shadow has been added to the base as its background
   6. The Frame with Shadow has been created.
5. Clipping Mask
   • Overlay a second Shape, in this case a photograph.
   1. Create the Photo Layer: Long-press the screen again and add a second shape: Add > Graphic > Default > Shape.
      1. Tap Add (+)
      2. Select Type and input round_rectangle
      3. Change label to 0_rnd_rec_image
      4. In Options (gear), retain the default 28 as that is a Material You standard
      5. In Fill Type, select Image to open the Image Resource dialog.
         1. Select the desired image
      6. Tap OK. The two dialogs in this section can be viewed here. The masked image has been placed in the Shape Resources.
6. Layer the Masked Image over the Frame
   1. Add the Image Shape to the page. In the Page Design menu, tap Add > Graphic > Default > Shape > 0_rnd_rec_image
   2. The Launcher places the Masked Image in the center of the page.
   3. If the Frame/Shadow is still in that location, the Masked Image is placed directly on top (Z-order).
      1. If not, move the 2 objects to the desired location with the Masked Image set directly on top.
      2. The default shape (object size) is 431. In order to view the Frame/Shadow, the size of the Masked Image must be reduced in size.
   4. Select the Masked Image to reveal the Edit icon (pencil) and tap it.
   5. Activate the Keep aspect ratio and tap the Width dialog to enter 334 (this can be changed if desired)
   6. Tap OK
   7. The Masked Image will approximate the center of the Frame/Shadow but may require adjustment. Either use Precision or Visual Adjustment :
      1. Precision
         1. Select the Base Shape and tap the Position & size icon (the intersecting arrows). Note the exact Center X and Center Y values.
         2. Select the Masked Image, open its Position & size menu, and manually type in those exact same Center X and Center Y values.
      2. Visual Adjustment
         1. With the Masked Image selected, select the move icon (joystick) to precisely locate the image
7. Scaling the Frame/Shadow/Masked Image
   1. If the final result needs to be resized, scale it:
      1. Group the objects
         1. In the Page Design menu, tap the Selection icon
         2. Tap/drag from right to left to cover at least part of both objects. This will group both objects.
      2. In the Object Design menu (bottom), tap the Group icon.
         1. In that same menu (bottom), now tap the Rotate/Transform icon, then activate Transform
         2. The top slider (default of 100) is the Scale action