Table of Contents

How To: Create a "Card" or "Icon" with Shadow Effect

Soft Card on Light Background
with a Soft Drop Shadow
Button/Icon Soft Lift Contrasting Shadow
on Dark Background
Icon/Button with a Soft Lift
Shadow for Light Background
Icon/Button with a Hard Lift
Shadow for Light Background

Prerequisite: Background Layer Setup

Phase 1: Create the Shadows

  1. In Edit mode (pinch in) select Main menu > Launcher Options > Resources > Shadow
  2. Tap the “Add” icon
  3. For “Label” enter Soft_Card_Shadow_Light_Bkgd
    1. “Shadow color”: Tap the box area and select “Color”. For ARGB enter 80000000 (Black with ~25% opacity)
    2. The “color box” for “OK” will change. Tap it to return to the “Shadow Add” dialog.
    3. For “Shadow radius” enter 32
    4. For “Offset X” enter 0
    5. For “Offset Y” enter 10
  4. Tap OK to return to the Shadow dialog
  1. Tap the “Add” icon
  2. For “Label” enter Button_Lift_Shadow_dark_bkgd
  3. “Shadow color”: Tap the box area and select “Color”. For ARGB enter 5AFFFFFF (Black with ~35% opacity)
  4. The “color box” for “OK” will change. Tap it to return to the “Shadow Add” dialog.
  5. For “Shadow radius” enter 22
  6. For “Offset X” enter 15
  7. For “Offset Y” enter 15
  8. Tap OK to return to the Resource dialog
  1. Tap the “Add” icon
  2. For “Label” enter Button_Lift_Shadow_light_bkgd
  3. “Shadow color”: Tap the box area and select “Color”. For ARGB enter 80000000 (Black with ~35% opacity)
  4. The “color box” for “OK” will change. Tap it to return to the “Shadow Add” dialog.
  5. For “Shadow radius” enter 22
  6. For “Offset X” enter 15
  7. For “Offset Y” enter 15
  8. Tap OK to return to the Resource dialog

Phase 2: Create the Shapes

  1. Back out to the Resources dialog and select Shape
  2. Tap the Add icon
  3. For “Shape” select Round rectangle
  4. Tap its Option icon and for its radius set 28
  5. “Color1”: Tap the icon, select “Color”
  6. For ARGB enter 3CFFFFFF (Note: The 1st 2 digits represent Alpha. 3C is ~60% opacity for a frosted look)
  7. Tap OK
  8. “Border width” set at 1, do not tap OK yet
  9. “Border color”: tap and select “Color” and for ARGB enter 26FFFFFF
  10. Label: enter Shadow_Card and tap OK to return to the Shape dialog
  1. Still in the Shape dialog, tap the Add icon
  2. For “Shape” select Round rectangle
  3. Tap its Option icon and for its radius set 20
  4. “Color1”: Tap the icon, select “Color”
  5. For ARGB enter 50FFFFFF (represents Alpha of ~80% for a slightly more solid button)
  6. The “color box” for “OK” will change. Tap it to return to the “Shadow Add” dialog.
  7. “Border width” will remain at 0 (not used)
  8. Label: enter Shadow_Button and tap OK to return to the main menu

Phase 3: Apply the Resources to Objects

  1. In Edit On mode tap the Add icon in the Page Design Menu
  2. Select Graphic > Image > Default > Icon packs
  3. Scroll or use the search dialog to select the desired icon. Tap to select it.
  4. The App icon is on the page and selected. In the Object Design menu tap the “Option” icon
  5. In the main Option Edit dialog, tap “Background” > select «“Shape”» > Shadow_Button
  6. In the main Option Edit dialog (do NOT tap Background again), scroll to find “Shadow” > select Button_Lift_Shadow
  7. Tap “Margins” and set to 14 for all 4 sides. Tap OK.
  1. In Edit On mode tap the Add icon in the Page Design Menu
  2. Select Graphic > Shape
  3. The default shape is placed on the page. In the Object Design menu tap the “Option” icon
  4. In the main Option Edit dialog, tap “Shape” > select Glass_Card
  5. In the main Option Edit dialog, scroll to find “Shadow” > select Soft_Card_Shadow
  6. Tap OK.
  7. Resize this panel to your desired dimensions.
  8. Note: Ensure this panel is layered behind your icons by tapping its option menu and selecting “Send to back”.