meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
howto:howto-shape_with_clear_background [2026/04/25 14:04] – ↷ Links adapted because of a move operation 31.6.17.4howto:howto-shape_with_clear_background [2026/05/10 18:09] (current) – external edit 127.0.0.1
Line 36: Line 36:
       - 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.       - 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.   - Ready to export the file.
-    - Select ''File'' > ''Export as'' and rename the file (top of screen) to ''glass_shape.png'' (JPGs do not support transparency)+    - 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)       - 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.       - Click ''Export'', then ''Export'' again.
-  - **Process Complete!** The PNG is ready to place in Total Launcher Resources.+  - **Process Complete!** The PNG/WEBP is ready to place in Total Launcher Resources.
 ++++ ++++
  
Line 45: Line 45:
 </WRAP> </WRAP>
 </WRAP> </WRAP>
-  * //-or-// use the PNG image(s) offered below for download at the bottom of this page. +  * //-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! Whichever route is selected results in a reusable //glass container// for any icon, shape or widget!
  
-==== Import the PNG to Resources ====+==== 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]]. 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 ====+==== Create the Resource Shape for the Transparent PNG/WEBP ====
  
 <WRAP right> <WRAP right>
Line 61: Line 61:
       - Select ''Graphic'' > ''Image'' > ''Default'' > ''Shape'' > ''Add (+)''        - Select ''Graphic'' > ''Image'' > ''Default'' > ''Shape'' > ''Add (+)'' 
       - In the Add Shape dialog select ''Shape'' > ''Round rectangle'' and then re-name the ''Label'' as "frost"       - In the Add Shape dialog select ''Shape'' > ''Round rectangle'' and then re-name the ''Label'' as "frost"
-      - Tap the Option {{:ui:ui-icon_option.png?20}} icon to open the radius dialog+      - 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 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 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.     - 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.png?20}} icon to open the shape's  Edit dialog.+    - 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       - Tap ''Image'' > ''Icon pack'' and select any desired icon
   - The shape with icon is now on the page.    - The shape with icon is now on the page. 
Line 88: Line 88:
 <WRAP center> <WRAP center>
 ^  **Clear Frosted Border\\ Round Rectantle**  ^  **Clear Shadowed\\ Round Rectangle**  ^ ^  **Clear Frosted Border\\ Round Rectantle**  ^  **Clear Shadowed\\ Round Rectangle**  ^
-|  {{:howto:howto-shape-clear_frost-4background-image.png?direct&200x200}}  |  {{:howto:howto-shape-clear_shadow-4background-image.png?direct&200x200}}  | +|  {{: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.png?linkonly|Download}}  ^  {{:howto:howto-shape-clear_shadow-file.png?linkonly|Download}}  ^+^  {{:howto:howto-shape-rnd_frost-file.webp?linkonly|Download}}  ^  {{:howto:howto-shape-clear_shadow-file.webp?linkonly|Download}}  ^
 </WRAP> </WRAP>
 ---- ----