===== Create a Shape Using a See-Through Background =====

This process is useful for creation or manipulation of shapes that are used anywhere in the launcher or for icons. Icons typically are for just one app or widget. But with this described technique, it is possible to have a see through shape which //holds// an icon or other objects.

==== Create or Obtain the "Invisible" Shape ====

The procedure to apply the "invisible" image to the shape is shown below. There are 2 sources for that image:
  * Create it with an image design application
    * a Window application, [[https://apps.microsoft.com/detail/9PNSJCLXDZ0V?hl=en-us&gl=US&ocid=pdpshare|GIMP]], is available for download from Google Play Store
<WRAP indent>
<WRAP indent>
<WRAP indent>
++++Click here to view the GIMP procedure|
  - With GIMP open, select ''File'' > ''New''
    - Set ''width'' to 500 and ''height'' to 500 in pixels
    - Select that same dialog's ''Advanced Options'' to open a sub-dialog: 
      - Change ''Fill'' to show ''Transparency'' and click OK (a checkerboard pattern shows)
  - The canvas has been created. A shape will be placed on it.
    - Select the rectangle tool from the tool dialog (or just press ''R'')
    - The Tool Options dialog shows in the left panel
    - Check ''Round corners'' and set the ''radius'' to 50
    - Now use the mouse/cursor to draw a square in the center of the canvas and release it when completed. Do not draw outside of the canvas as the resulting rounded square will define the outer edge of the object. The shape has been created.
  - Define the "frosting": A white block will be added. It's transparent center will extend toward the shape's outer boundaries,
    - In the Layer panel in the bottom right, add a layer by right-clicking on the existing layer
      - Select ''New layer''. Click it's name and enter ''Frosted Glass''
      - While the "Frosted Glass" layer is selected, click ''File'' > ''Edit'' > ''Fill'' and in the open dialog cause the ''FG Color'' to be white using the color dialog. Click OK and the rounded square will be solid white
  - Define a border of the frost: From the top menu bar, select ''Select'' > ''Shrink'', enter 20 (pixels), click OK
    - Define a gradient effect for the soft border: From the top menu bar, select ''Select'' > ''Feather'', enter 30 (pixels), click OK
    - Now press keyboard ''Delete'' key to see the center become transparent towards the border's edge
      - If less frost is desired, press ''Delete'' again; or more frost is desired press ''Ctrl''+''Z''
  - Add a "glass effect" to the lens so that the center is not completely empty but slightly //glassy//
    - With the outer shape selected, then right click the ''Frosted Glass'' layer in the Layer panel (bottom right)
      - Click ''Alpha to Selection''
      - In the main menu bar select ''Layer'' > ''New layer'' and name it ''Tint''
        - Fill this layer with white (the ''FG Color'' should still show white from the previous process)
      - In the Layer panel, set the ''Tint'' layer ''Opacity level'' to 15% to make the the center appear more like glass is there instead of strict transparency.
  - Ready to export the file.
    - Select ''File'' > ''Export as'' and rename the file (top of screen) to ''glass_shape.webp'' (JPGs do not support transparency)
      - Decide which directory on the device to export the file: directory in the 1st column, then the sub-directory (if desired) in the 2nd column)
      - Click ''Export'', then ''Export'' again.
  - **Process Complete!** The PNG/WEBP is ready to place in Total Launcher Resources.
++++

</WRAP>
</WRAP>
</WRAP>
  * //-or-// use the PNG/WEBP image(s) offered below for download at the bottom of this page. 
Whichever route is selected results in a reusable //glass container// for any icon, shape or widget!

==== Import the PNG/WEBP to Resources ====

Any external image to be used by Total Launcher needs to be added to the ''Image Resource'' area. If unfamiliar with this, the procedure is [[section:section1-2-d_understanding_resources#resources_add_to_a_category_s_storage|here]].

==== Create the Resource Shape for the Transparent PNG/WEBP ====

<WRAP right>
☛ {{https://youtu.be/BxdWVIRFHTY|Demo Video for the procedure}}
</WRAP>
  - Place the desired shape on the page:
    - In ''Edit On'' mode, in the top Page Design, menu, tap ''+'' icon
      - Select ''Graphic'' > ''Image'' > ''Default'' > ''Shape'' > ''Add (+)'' 
      - In the Add Shape dialog select ''Shape'' > ''Round rectangle'' and then re-name the ''Label'' as "frost"
      - Tap the Option {{:ui:ui-icon_option.webp?20}} icon to open the radius dialog
      - The default setting of 28 which represents Google's current material rounded corner for icons. Modifications can be made by direct input or using the slider. Leave it at the default setting. Select OK.
      - The Shade Add dialog where the "frost" shape is now shown, tap "frost" to place it on the page.
    - The created shape (white rounded rectangle) is now on the page and selected and can be moved by dragging. Move it to any location.
    - In the Object Design men (top) tap Option {{:ui:ui-icon_option.webp?20}} icon to open the shape's  Edit dialog.
      - Tap ''Image'' > ''Icon pack'' and select any desired icon
  - The shape with icon is now on the page. 
    - The video's icon had //no// background. Other icons may have a colored, or shaded backgrounds or insets. If so, see the next step to "minimize" that.
    - In the Object Design menu tap Options to open the Option Edit dialog. 
      - Select ''Background'' which opens Image Resources. Scroll  and select ''frost'' image (created in Gimp or Photoshop or downloaded from this page and previously in Image Resources).
  - The "frost" is added to the shape's background. 
  - **If** the icon is larger than desired, //scale// it down (or vice versa). It will //not// affect the size or the shape of the object (frost).
    - Tap Options in the Object Design menu and scroll to ''Margins'' at the bottom. Tap to open it's dialog. Here, the margins are increased (interior borders are moved towards the center) which //shrinks// the icon.
      - Tap OK and back out of the editing dialog to the page.
  - Project completed.

<WRAP center round tip 60%>
Margin manipulation for an object, called scaling, is helpful. Explore it more fully [[section:section-margins-page_and_object|here]].

</WRAP>

==== Image Download ====

 The above procedure to creates a shape which places an "clear" image as it's background. Either of the images below (Frost or Shadow) could be used on dark-mode or light-mode wallpaper or used as image headers for folders.

<WRAP center>
^  **Clear Frosted Border\\ Round Rectantle**  ^  **Clear Shadowed\\ Round Rectangle**  ^
|  {{:howto:howto-shape-clear_frost-4background-image.webp?direct&200x200}}  |  {{:howto:howto-shape-clear_shadow-4background-image.webp?direct&200x200}}  |
^  {{:howto:howto-shape-rnd_frost-file.webp?linkonly|Download}}  ^  {{:howto:howto-shape-clear_shadow-file.webp?linkonly|Download}}  ^
</WRAP>
----

<WRAP round tip>
^  Summary of Marial Design (Material You v3) Standards for Radii Corners  ^^^
|  **12**  |  Medium  | cards or grouped lists inside a widget |
|  **16**  |  Large  | floating action buttons (FABs): square-ish\\ or smaller widgets |
|  **28**\\ or\\ **Fully Rounded**  |  Stadium  | standard buttons typically ½ the height\\ (e.g., height = 50, radius is 25: pill shaped) |
</WRAP>

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>