Introduction:  Welcome back! In the first post in this series, we delved into the world of DIY UI design for embedded systems and introduced the concept of using off-the-shelf UI Kits and Element Packs. Today, we're taking the next step in this journey. You've chosen your UI Kit, and now it's time to extract the assets you need to create a cohesive and visually stunning user interface. This blog will focus on two popular types of UI Kits: Photoshop documents (.psd) and Figma files (.fig). We'll cover the essentials of working with these files, ensuring you can efficiently and effectively extract the elements needed for your embedded systems project.  Getting Started with .psd UI Kits:  Opening the Kit:  While Photoshop is a widely used standard of the design industry, it may not be acceptable for a myriad of reasons. There are several free or cheap alternatives, but Photopea.com has become my editor of choice when I need photoshop effects and filters, i.e. the fancy stuff that makes it look professional. When choosing your editor, make sure the opened file looks just like the website preview and that you do not need to flatten or merge any layers upon opening the file.  Left: .psd imported into Photopea.  Right: Watermarked preview from CreativeMarket.com     Exploring Layers and Groups:  The best .psd UI Kits are like well-organized filing cabinets, with each layer and group neatly labeled and structured. Start by familiarizing yourself with the layers and groups in the file. There should be logical hierarchy, making it easy to locate the elements you need. Look for layer groups named "Buttons," "Icons," "Backgrounds," etc. This organization is your map, guiding you through the design assets.     Customizing Elements:  Before extracting, you may want to customize certain elements to match your project’s theme. Change colors, adjust sizes, and tweak designs as necessary. For instance, if you have a button that needs to be a different shade to match your brand’s color scheme, now is the time to make those adjustments. If you are new to these tools there is a large user community out there to help with video tutorials. Still uncomfortable? Check out our Design Services.     Removing Embedded Text:  Most UI Kit files come with text layers that you might not need but are there to provide examples of what it could look like and offer a suggested font that pairs well with the design. To ensure the elements are ready for use in your embedded system, you will either need to remove any embedded text layers or create duplicate copies of each item for all possible labels, including any translations. It might seem like a no-brainer to remove the text, but that is not always the case. This choice might depend on the effects used on the label itself, such as glowing letters. Also note that many embedded systems do not have the full suite of text editing features that you have in graphic design tools, so dynamic text may not look as good as the text shown in the .psd file.     Exporting Elements:  Once you've customized

The Challenge for Engineers: As engineers, our primary focus is on functionality and performance. We thrive on solving complex problems and pushing the boundaries of technology. But when it comes to UI design, we often find ourselves out of our depth. You want it to be intuitive, visually appealing, and seamlessly integrated with your project.  This type of design requires a different set of skills - skills that many of us simply don't possess.  The best results are usually going to come from a professional User Experience and User Interface Designer. It is difficult to replace the benefits of a highly skilled graphic designer, but the cost of hiring one can be out of reach for smaller projects or hobbyists. And relying on random images sourced from the depths of the internet is like navigating a minefield, with the constant risk of running into copyright issues for products that will be sold, or ending up with a mishmash of styles that detract from the overall user experience.  Fear not, fellow engineer! I'm here to introduce you to a game-changing solution: DIY UI design using off-the-shelf "UI Kits". These collections of professionally designed images with a common theme are the secret weapon to create a cohesive and visually stunning UI for your embedded systems project, without breaking the bank or risking legal troubles.  Why DIY?: Now, let's talk business. As a company, your bottom line is always top of mind. So, why should you consider DIY UI design for your embedded systems projects? It's simple: time and money.  When you opt for DIY UI design using off-the-shelf UI Kits, you're not just saving on upfront costs compared to hiring a professional designer. You're also saving valuable time. Time that would otherwise be spent searching for the perfect images, negotiating licenses, or waiting for a designer to deliver the goods.  And as we all know, time is money. The quicker you can iterate on your HMI, the quicker you can get your product to market. And in today's fast-paced business landscape, speed is everything. By embracing DIY UI design, you're streamlining the design process, giving you more time to focus on the core competencies of your product and staying ahead of the competition.  But it's not just about speed. It's also about control. With DIY UI design, you have control over your UI, from the layout to the functionality. You're in the driver's seat, able to make changes on the fly and pivot as needed to meet the ever-changing demands of your customers and market, all without breaking the bank.  It is important to note that DIY UI design is not a substitute for the most crucial part of the design process, which is the User Experience. UI kits are exceptionally well made, and are usually up to date with the current trends in visual design, but these features do not guarantee an experience that is optimized for your user which will result in costs down the road to fix. In fact using UI kits may prove to be limiting in many