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

當(dāng)然，在此之前記得看看往期干貨中有沒(méi)有你感興趣的素材：

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

全新的圖形設(shè)計(jì)和編輯工具 Pixelmator Pro

https://www.pixelmator.com/pro

Pixelmator Pro 是一個(gè)全新的圖形設(shè)計(jì)和編輯工具，很明顯它是對(duì)標(biāo) PS 和 Figma 這樣的工具而存在的，從功能上來(lái)說(shuō)，各種插畫(huà)、海報(bào)、UI都不在話(huà)下。在實(shí)現(xiàn)方式上，Pixelmator Pro 借助如今越來(lái)越成熟的人工智能技術(shù)，結(jié)合成熟的模板，確保能夠快速出圖，降低設(shè)計(jì)過(guò)程中的不確定因素。目前 Pixelmator Pro 提供免費(fèi)適用，對(duì)這類(lèi)工具有需求的同學(xué)可以上手試試看。

圖片放大提升清晰度+優(yōu)化 APP

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

和以往所提供的工具不同，這個(gè)名為 Alto AI 的工具是一個(gè)移動(dòng)端的 APP，你可以直接在自己的手機(jī)上將素質(zhì)不佳的照片的效果直接提升起來(lái)。這個(gè) APP 有 iOS 的版本也有 Android 的版本，完全免費(fèi)。相信有很多同學(xué)有類(lèi)似的需求，可以下載下來(lái)體驗(yàn)一下。

React 組件的可視化編輯器

https://aspect.app/

這個(gè)名為 Aspect 的工具也是為了最大程度地降低設(shè)計(jì)和開(kāi)發(fā)的難度而誕生的工具，它本身是一個(gè)可以直接編輯 React 控件的編輯器，但是為了更加貼合大家的使用場(chǎng)景和需求，你可以直接直接在其他網(wǎng)頁(yè)中找到你感覺(jué)可以用的空間，直接復(fù)制粘貼就能在這個(gè)編輯器當(dāng)中進(jìn)行處理了，當(dāng)然它還支持直接導(dǎo)入 React 和 HTML 代碼來(lái)進(jìn)行編輯，不過(guò)最近他們還加入了將 Figma 控件直接轉(zhuǎn)化為可用的 React 控件的功能，隨后還會(huì)支持 Sketch 和 Adobe XD。

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

https://extractbg.com/

不得不說(shuō)，用了那么多去背景的工具，從來(lái)沒(méi)想過(guò)這個(gè)事兒反過(guò)來(lái)一樣也非常有用。當(dāng)你發(fā)現(xiàn)一張非常漂亮的圖片，但是前景的人物或者元素你不需要的話(huà)，可以使用這個(gè)名為 Extract Bg 的服務(wù)，將前景的元素干掉，直接生成可以隨便哪里都能用的背景圖。這個(gè)工具和各種去背景的設(shè)計(jì)服務(wù)簡(jiǎn)直是絕配。

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

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

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

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

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

隨著今年 Figma 追加了「組件屬性」這個(gè)功能之后，設(shè)計(jì)師在設(shè)置每個(gè)組件的狀態(tài)的時(shí)候就更加方便了，不過(guò)在有的時(shí)候，還是需要將控件的不同樣式和狀態(tài)都羅列出來(lái)，在對(duì)接的時(shí)候可以更加直觀地看到，而且你還可以根據(jù)需求改變這個(gè)表單的呈現(xiàn)方式、優(yōu)先級(jí)排列等等。

根據(jù)LOGO自動(dòng)生成品牌素材的服務(wù)

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

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

100 款超級(jí)好用的按鈕樣式 CSS

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

這是一個(gè)包含有 100 種截然不同的按鈕的 CSS 代碼，它所提供的這些素材并不只是靜態(tài)的樣式，還包含有各種個(gè)樣的動(dòng)畫(huà)效果，方便設(shè)計(jì)師和開(kāi)發(fā)者直接一鍵使用。當(dāng)你選好感興趣的樣式之后，點(diǎn)擊進(jìn)去，直接復(fù)制這個(gè)按鈕對(duì)應(yīng)的 CSS 和 HTML 代碼，相當(dāng)方便了。