周二早上好！現在你看到的是這個炎熱的 7 月第最后一波干貨，這一次所梳理的干貨素材有一部分會更加偏向于前端和開發者，比如可以直接復制的按鈕 CSS 代碼素材和可以直接編輯樣式的 React 代碼編輯器，當然也有很多東西是設計師甚至非設計從業者都能用得上好東西，比如借助機器學習直接給圖片分層的插件，單獨提取圖片背景的工具，一次性生成品牌相關的主要素材和模板的服務，總會有那么一款素材正好是你需要的。

當然，在此之前記得看看往期干貨中有沒有你感興趣的素材：

下面我們具體看看這一期的干貨：

全新的圖形設計和編輯工具 Pixelmator Pro

https://www.pixelmator.com/pro

Pixelmator Pro 是一個全新的圖形設計和編輯工具，很明顯它是對標 PS 和 Figma 這樣的工具而存在的，從功能上來說，各種插畫、海報、UI都不在話下。在實現方式上，Pixelmator Pro 借助如今越來越成熟的人工智能技術，結合成熟的模板，確保能夠快速出圖，降低設計過程中的不確定因素。目前 Pixelmator Pro 提供免費適用，對這類工具有需求的同學可以上手試試看。

圖片放大提升清晰度+優化 APP

https://apps.apple.com/us/app/alto-ai-photo-enhancer/id1634488334

和以往所提供的工具不同，這個名為 Alto AI 的工具是一個移動端的 APP，你可以直接在自己的手機上將素質不佳的照片的效果直接提升起來。這個 APP 有 iOS 的版本也有 Android 的版本，完全免費。相信有很多同學有類似的需求，可以下載下來體驗一下。

React 組件的可視化編輯器

https://aspect.app/

這個名為 Aspect 的工具也是為了最大程度地降低設計和開發的難度而誕生的工具，它本身是一個可以直接編輯 React 控件的編輯器，但是為了更加貼合大家的使用場景和需求，你可以直接直接在其他網頁中找到你感覺可以用的空間，直接復制粘貼就能在這個編輯器當中進行處理了，當然它還支持直接導入 React 和 HTML 代碼來進行編輯，不過最近他們還加入了將 Figma 控件直接轉化為可用的 React 控件的功能，隨后還會支持 Sketch 和 Adobe XD。

從圖片中快速提取背景的工具

https://extractbg.com/

不得不說，用了那么多去背景的工具，從來沒想過這個事兒反過來一樣也非常有用。當你發現一張非常漂亮的圖片，但是前景的人物或者元素你不需要的話，可以使用這個名為 Extract Bg 的服務，將前景的元素干掉，直接生成可以隨便哪里都能用的背景圖。這個工具和各種去背景的設計服務簡直是絕配。

超智能的圖片素材分層處理插件

https://www.figma.com/community/plugin/1123355421740529204/ClipDrop

和上一個服務截然不同的地方在于，這個立足于 Figma 的圖片處理插件 ClipDrop 干脆就借助 AI 算法，直接把圖片本身的前后景素材全部拆分開來，想用前景的素材就用前景的，想把背景拿走就把背景拿走，按需取用，可以說是非常自由了。當然你也可以當之前的那些去背景或者去前景元素的工具一樣使用。

一鍵生成所有控件樣式列表的插件

https://www.figma.com/community/plugin/1116018586739867857

隨著今年 Figma 追加了「組件屬性」這個功能之后，設計師在設置每個組件的狀態的時候就更加方便了，不過在有的時候，還是需要將控件的不同樣式和狀態都羅列出來，在對接的時候可以更加直觀地看到，而且你還可以根據需求改變這個表單的呈現方式、優先級排列等等。

根據LOGO自動生成品牌素材的服務

https://www.crowdspring.com/brand-studio/

品牌設計通常會需要完整的設計規范和大量的輔助素材作為補充，而這個名為 Brand Studio 的服務可以根據他們事先提供的海量數據，通過算法根據你所提供的品牌、行業等信息，幫你直接生成可用的品牌設計素材，各種不同功用的免費模板，包括商業提案、發票、傳單模板、演示文稿模板等等等等。

100 款超級好用的按鈕樣式 CSS

https://ui-buttons.web.app/

這是一個包含有 100 種截然不同的按鈕的 CSS 代碼，它所提供的這些素材并不只是靜態的樣式，還包含有各種個樣的動畫效果，方便設計師和開發者直接一鍵使用。當你選好感興趣的樣式之后，點擊進去，直接復制這個按鈕對應的 CSS 和 HTML 代碼，相當方便了。