Zsolt's Visual Personal Knowledge Management - Shade Master - Obsidian-Excalidraw 2.7.3 - Recolor SVGs and Excalidraw Drawings
The "Shade Master" script for Excalidraw enables users to change the hue, saturation, and lightness of all elements in a scene, including SVG icons. This tool is particularly useful for customizing visuals in Obsidian, as it allows for the recoloring of icons while maintaining their connectivity within the vault. The video demonstrates how to use the script to adjust colors, explaining the underlying color theory and practical applications. Users can download SVG icons from sources like The Noun Project and use Excalidraw's cropping feature to remove watermarks. The script also supports recoloring nested Excalidraw drawings, although nested images themselves are not recolored. Additionally, the video highlights the importance of maintaining links between reused images to preserve the interconnectedness of visual elements in a vault. The Shade Master script can be installed via the Obsidian tools panel, requiring an update to Excalidraw Obsidian 2.7.3. The video also promotes a Visual Thinking Workshop, offering a collaborative learning experience with a focus on creating a book summary of "The Lessons of History."
Key Points:
- Shade Master script allows simultaneous color changes for SVG icons and elements in Excalidraw.
- Users can download free SVG icons from The Noun Project and use Excalidraw to edit them.
- The script maintains connectivity of images in Obsidian, crucial for visual PKM.
- Recoloring supports nested Excalidraw drawings but not nested images.
- Visual Thinking Workshop offers a collaborative project on "The Lessons of History."
Details:
1. 🎨 Exciting Update: Shade Master Introduction
- The Shade Master tool allows users to change the hue, lightness, and saturation of all elements in a scene simultaneously, enhancing efficiency in color adjustments.
- The tool supports not only Excalidraw elements but also embedded SVG icons, ensuring comprehensive color management across different graphic components.
- Users can transition entire scenes to grayscale with a single adjustment, offering flexibility in design processes.
2. 🖼️ Integrating SVG Icons from The Noun Project
- Create an account on The Noun Project to download icons for free.
- Downloaded icons have a watermark at the bottom; consider purchasing a subscription to remove it for professional use.
- Integrate SVG icons into projects by importing them into design tools like Adobe Illustrator or directly into code using SVG tags.
- Customize icons by editing the SVG code or using vector graphics software to match your project's theme.
- Ensure legal use of icons by adhering to The Noun Project's licensing agreements, particularly when used in commercial projects.
3. ✂️ Overcoming Icon Color Limitations
3.1. Icon Color Customization Challenges
3.2. Cropping Feature Enhancement
4. 🌈 Dynamic Color Customization with Shade Master
- Shade Master allows dynamic color changes to icons with just two base colors.
- Users can change icon colors by dragging toggles or using a color picker for precise selection.
- The 'initialize SVG colors' function resets icons to their original colors, facilitating easy experimentation.
- Hue changes do not affect icons until lightness is adjusted, highlighting the tool's unique color handling approach.
- Increased saturation is needed to fully utilize color changes, emphasizing the importance of understanding color properties.
5. 🔍 Exploring Color Theory with Paletton
5.1. Using Paletton.com to Understand Color Theory
5.2. Understanding Hue
5.3. Exploring and Effects of Saturation
5.4. Luminosity and its Impact
6. 🎚️ Advanced Color Adjustments and Icon Synchronization
6.1. HSL Adjustments and Color Wheel Techniques
6.2. Tools for Color Synchronization
7. 🔄 Managing Multiple Icon Colors and Transparency
- Shape Master allows simultaneous color changes to multiple items, demonstrated by adjusting the hue, effectively changing the color for both items together, which streamlines the design process.
- The tool enables independent adjustments of background and stroke colors, providing flexibility to apply transparency settings selectively, such as making only the background color transparent while keeping the stroke lines fully opaque.
- Opacity adjustments can be configured to affect both background and stroke colors or set specifically to maintain certain design elements opaque while others are transparent, showcasing the tool's versatility in preserving design integrity.
8. 🔗 Efficient Icon Management in Obsidian
- Obsidian uses a single file for each icon, so any color change applied to one instance using Shadem will automatically apply to all instances of that icon, which might not be desirable if different colors are needed for individual instances.
- To manage individual icon colors effectively, users need to understand how Obsidian stores images in the background. This involves using the copy command strategically to create distinct instances that can be individually customized.
- By copying icons, users can manage different color requirements for each instance, allowing for more personalized and varied visual representations within the same drawing.
9. 🧠 Creative Recoloring of Nested Excalidraw Drawings
- Recoloring involves creating a new copy of the image, resetting to the default color before selecting a new one, allowing for precise color adjustments.
- Users can apply multiple colors to the same icon by duplicating it, which is useful for producing various colored versions of the same image, enhancing visual diversity.
- This technique is particularly beneficial for developing multi-colored icons, such as thumbnails, adding visual interest and differentiation.
- In markdown view mode, different colored versions of a file are listed under embedded files, each maintaining a unique file ID but originating from the same original file. This setup allows for distinct color mappings in Obsidian vault, facilitating organized and varied presentations.
10. 🔧 Installing and Utilizing the Shade Master Script
- The Shade Master script allows for extensive customization of SVG images and Excalidraw drawings, enabling color changes without affecting nested images like Excalidraw elements, which remain unchanged to preserve their original state.
- A key benefit of the Shade Master script is its ability to apply recoloring while maintaining connectivity within a system of over 3,500 interconnected Excalidraw drawings, which would otherwise be lost if recolored manually.
- The script supports the reuse of images across different color contexts, crucial for preserving the original links and interconnectedness of visual elements, thereby preventing standalone images that lose essential connectivity.
11. 📚 Special Offer: Visual Thinking Workshop
11.1. Technical Update Instructions
11.2. Special Offer for Visual Thinking Workshop
12. 📅 Cohort 12: Collaborative Book Project & Insights
- The project involves a collaborative summary of 'The Lessons of History' by Will and Ariel Durant, with each participant contributing to different parts of the book on separate pages, enhancing engagement and understanding.
- The final session is designed to unify all contributions, fostering a collaborative and enjoyable workshop environment.
- A significant quote from Durant highlights that 'nothing that has ever happened is quite without influence at this moment,' emphasizing the importance of historical context in understanding present events.
- Durant's critique of modern focus on transient news over historical understanding underscores the imbalance between current events and the 'living past,' making the book's relevance particularly poignant amid current global turbulence.
- The structured, collaborative approach encourages participants to engage deeply with the material, facilitating a richer understanding of history's impact on the present.
13. 🗓️ Preparing for a Successful Workshop Experience
13.1. Workshop Registration
13.2. Workshop Preparation
14. 👋 Thank You and Year-End Reflections
- The introduction of the 'shape master' feature is a significant advancement, enhancing visual thinking tools and offering new possibilities for applications like Obsidian and Excalidraw. This feature is seen as a potential gamechanger in the field.
- The speaker is excited about upcoming projects and workshops focused on visual Personal Knowledge Management (PKM), indicating a strategic direction for future development and engagement in the coming year.
- Specific upcoming projects and workshops are planned to leverage the new 'shape master' feature, aiming to enrich user experience and broaden the application of visual PKM.
- The potential of the 'shape master' feature to redefine user interaction with visual tools highlights its strategic importance in future endeavors.