meta data for this page
Translations of this page:
  • en
Book Creator
 Add this page to your book
Book Creator
 Remove this page from your book  

 Manage book(0 page(s))
 Help

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

  • Examples of the shadow effects to be created below:
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

  • A shadow effect requires a complex, colorful or polar background layer to be visible. Ensure the layer behind your shadowed objects— whether that is the system wallpaper, a page background image, or a background graphic object — is a colorful photograph or gradient, not a solid white or black color.\
  • The created shadows will be selected as the Background for the “button shape” or “icon image” used.

Phase 1: Create the Shadows

  • Create the Shadow A (Soft Card Shadow for Light Background)
  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
  • Create the Shadow B (Button Soft Lift for Dark Background)
  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
  • Create the Shadow C (Button Hard Lift for Light Background). Note: This is duplicates the previous shadow, but the shadow color changes to contrast with the destination background to provide the offset.
  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

  • Create the Card Shape (used for main panels and widgets)
  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
  • Create the Button Shape (used for icons and taps)
  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

  • Apply to a “floating” app icon
  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.
  • Create a visual “Shadow Card” panel on the page
  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”.

Discussion

Enter your comment. Wiki syntax is allowed:
Please solve the following equation to prove you're human. 168 -0 =