36 個你需要檢查的網頁設計師的 Photoshop 插件

已發表: 2017-09-24

WordPress 並不是唯一一個為其核心產品提供有用擴展的軟件。 Photoshop 是世界各地網頁設計師的首選工具之一,也支持這種可能性。 就像他們的 WordPress 插件一樣,Photoshop 插件也可以添加各種新功能。

由於我們知道我們的許多讀者定期使用 Photoshop,因此我們認為這次提供不同類型的插件列表是個好主意。 您將在下面找到我們可以在網絡上找到的最好的 Photoshop 插件。

他們通過各種改進來增強程序。 從小的腳本和快捷方式一直到全新的模塊,這些模塊將顯著改善您的工作流程並使使用 Photoshop 變得更加輕鬆。

準備好? 那麼讓我們開始吧。

任何網頁設計師都不應忽視的 Photoshop 插件

您可以在下面找到來自不同類別的 Photoshop 插件列表,這些插件可以進一步增強您最喜歡的軟件。

重新調整它

retinize it photoshop 插件

  • 價格:免費
  • 適用於: CC 2015

首先,我們有一個免費插件,可以快速為 Retina 顯示器創建資產。 Retinize 它為 Photoshop 添加了一個新動作,允許您以原始尺寸導出圖像或放大到兩倍或三倍大小。

安裝後,您會在“窗口”>“操作”下找到新選項 只需選擇一個圖層或一組圖層,運行操作,命名您的文件並接收切片資產。 非常適合製作支持視網膜的網站。

切開我

切開我

  • 價格:免費
  • 適用於: CS6

另一個直接從圖層導出資產的插件。 Cut&Slice me 會自動修剪您的圖像並將它們導出為 PNG 文件。 它可以處理重疊切片、多個按鈕狀態和多個分辨率。 不幸的是,它不是最新的,但仍然適用於舊版本的 Photoshop。

CSS3P

css3ps

  • 價格:免費
  • 適用於: CS3 及更高版本

顧名思義,該服務能夠將 Photoshop 圖層轉換為 CSS3。 它的特別之處在於它是一項基於雲的服務並且可以免費使用。

該插件支持多個圖層(包括文本)、陰影、漸變、邊框半徑等。 除此之外,它還可以處理 SCSS 和 SASS。

角落編輯器

  • 價格:免費
  • 適用於: CC 2015

如果您需要生成圓角,此腳本適合您。 它增強了 Photoshop 創建圓角的能力,適用於任何多邊形形狀,包括多種角樣式,允許您一次或多次編輯多個圖層。

HTML 塊

html 塊 photoshop 插件

  • 價格:免費
  • 適用於: CC 2015(僅限 Mac OS)

我們的下一個競爭者允許您將 HTML 和 CSS 直接放在 Photoshop 文檔中。 這樣,您就可以直接在軟件中創建 Web 資產並在 PSD 文件中使用在線資產。 後者包括網絡字體、外部 CSS 等。

字體真棒 PS

字體真棒 ps photoshop 插件

  • 價格:免費
  • 適用於: CC

Font Awesome 是一種圖標字體,越來越受歡迎和使用。 因此,只有包含在 Photoshop 文件中才有意義。 值得慶幸的是,這個插件讓餡餅變得如此簡單。 只需免費下載並安裝即可。

圖層控制 2

層控制

  • 價格:免費
  • 適用於: CC、CC 2014

這個插件是七個腳本的集合,可以讓 Photoshop 的一些更煩人的方面變得更容易。 它包括一個圖層名稱編輯器、刪除未使用效果的選項、可以自動刪除空圖層、光柵化智能對象、查找類似文件等等。 免費下載和使用。

CSS 帽子 2

css帽子

  • 價格: 39.99 美元
  • 適用於: CC 2014-2017

CSS Hat 自動將圖層樣式轉換為 CSS3。 這樣,您只需複制和粘貼它,而不是弄清楚如何在現場實施圖形。

該插件可以同時處理多個圖層、字體和不同的字體樣式,並且能夠輸出 LESS、SASS、Stylus 等。 它還具有您在代碼編輯器中可以找到的許多功能,例如語法突出顯示。 CSS Hat 也可用於較舊的 Photoshop 版本。

頁面層

頁面圖層Photoshop插件

  • 價格: 35美元
  • 適用於:僅 Mac OS X

此列表中的許多插件旨在更輕鬆地將 Photoshop 文件轉換為網站。 然而,反過來也是必要的。 這就是頁面層的用途。

該插件會自動將網站轉換為 PSD 文件,並將每個頁面元素保存為單個圖層。 在嵌入式瀏覽器中打開任何頁面,然後將其保存到 Photoshop。 該插件不是免費的,但聽起來物有所值。

PNG帽子

  • 價格: 27.99 美元
  • 適用於: CS5、CS6、CC、CC 2014.1+、CC 2015

該插件由與 CSS Hat 相同的人製作,增強了 Photoshop 導出 PNG 文件的能力。 例如,它具有更好的壓縮能力並且可以導出 CSS 規則。 如果您不滿意,PNG Hat 還提供慷慨的退款政策。

字體自己

字體自己

  • 價格: 49€
  • 適用於: CC 2015、CC 2017

接下來是一個插件,可讓您通過拖放來製作自己的字體。 在排版在網絡上變得越來越重要的時代,聽到這個消息真的很棒。 只需將(彩色)圖像和矢量轉換為 OpenType 字體。 控製字距調整、連字等。 Fontself 也是一個積極維護的插件,因此所有者可以免費獲得新功能。

Getty Images Photoshop 插件

  • 價格:免費
  • 適用於: CC 2016 及以上

Getty Images 擁有大量庫存圖片和一個插件,可讓您將它們直接導入 Photoshop。 搜索和過濾數以千計的高分辨率圖像,並使用 Getty 帳戶同步您的購買。

PSD 清潔器

PSD清潔工

  • 價格: 19.99 美元
  • 適用於: CC 2014.1+

Source 的另一個插件可以增強 Photoshop 的圖層面板。 PSD Cleaner 會自動掃描您的圖層結構並顯示改進機會。 它將幫助您找到未命名的圖層、刪除空圖層、查找超出畫布的圖層等等。 簡而言之,它會讓你井井有條。

網速

網速

  • 價格: 19美元
  • 適用於: CS5 及以上

這可能會讓人感到驚訝,但 Photoshop 實際上並不是為網頁設計而設計的。 該程序最初是作為照片編輯工具,後來才添加了創建佈局的功能。

為了彌補這一點,有 WebZap。 該插件提供了用於立即創建 Web 佈局模型的現成元素。 它基於 960 網格,可以創建格式化的 Lorem ipsum 文本、導航、按鈕等。

微妙的模式

  • 價格: 17.99 美元
  • 適用於: CC 及以上

Subtle Patterns 是一個免費的、可平舖的紋理圖案庫。 同名插件將它們帶到您的 Photoshop 儀表板。 就是這樣。

屏幕快照

屏幕快照 photoshop 插件

  • 價格: 9.99 美元
  • 適用於: CC 2014 或更新版本

我們的 Photoshop 插件列表中的下一個是 ScreenSnap。 該程序允許您從 PSD 文件(完整文檔或選定區域)創建屏幕截圖。 無需手動裁剪或保存,只需選擇一個文件夾,單擊一個按鈕即可。 非常適合與他人分享您的作品,即使是視網膜大小。

複印機

  • 價格:免費
  • 適用於: CC、CC2014

在這裡,我們有一個擴展,可以在您需要多個相同對象時快速克隆圖層和圖層組。 只需選擇您需要的副本數量以及您希望它們的間距。

透視模型

透視模型

  • 價格: 19美元
  • 適用於: CC 2017

從截圖中可以看出,插件主頁包含大量髒話。 除此之外,這個插件可以為您的設計製作透視模型。 這樣,您可以更好地了解他們在手機或平板電腦上的外觀。 該插件有許多預設,但也完全可編輯。

尺碼 PS

  • 價格:免費
  • 適用於: CC 2014

大小標記允許您使用選取框工具添加對像大小或對象之間距離的標籤。 每個標籤都保存在一個新圖層中,並且可以完全自定義。 這在為將 PSD 變成網站的人添加規格時非常有用。

豐泰亞

  • 價格:免費
  • 適用於: CC 2014、CC 2015

對於對 Photoshop 默認提供的字體不滿意的任何人,Fontea 都包含 Google Fonts 上可用的所有網絡字體(目前有 800 多種)。 該插件還與在線存儲庫保持同步,並允許您設置自己喜歡的字體集合。

知乎

  • 價格: 4.99 美元
  • 適用於: CC 2015 及更高版本

這個插件就像前面提到的 Getty 圖片插件,不過是針對 pixabay 圖片庫的。 它包含數十萬張免費庫存圖片,您現在只需單擊一下即可添加。 該插件還包括強大的搜索選項,所有圖像均獲得 CC0 許可。 另外,它非常實惠。

還有更多類似的插件可用於其他庫存照片庫,例如 Shutterstock 和 Pexels。

圖層工藝

分層工藝

  • 價格:免費
  • 適用於: CC、CC 2014

另一個用於從 Photoshop 圖層導出 UI 資產的插件。 LayerCraft 能夠在導出時縮放圖像,可以修剪透明像素並以不同大小導出以用於視網膜顯示。

Lorem Ipsum 生成器

免費 lorem ipsum 生成器

  • 價格:免費
  • 適用於: CS 5/6,CC

顧名思義,這是一個創建 Lorem ipsum 佔位符文本的插件。 這樣,您就不再需要從外部來源複製它。 生成器提供可定制的輸出,能夠一鍵複製到剪貼板並積極維護。

LoremPicsum

洛倫比克蘇姆

  • 價格:免費
  • 適用於: CS、CC

這個類似於 Lorem ipsum 版本,但是,它創建隨機圖像而不是文本。 選擇一個區域,選擇一個卡通,你就得到了一個佔位符圖像。 有趣的噱頭:圖片來自流行的電視節目和電影,如 Futurama、The Simpsons、Finding Nemo 和 Up。

社交套件專業版

社交工具包親

  • 價格: 9.99 美元
  • 適用於: CC 2015+

和另一個源插件。 這個旨在改善社交媒體的一切。 它包含用於在移動設備和桌面設備上創建廣告的模板、封面照片和個人資料圖片。 您甚至可以在 Photoshop 中實時預覽結果。

圖層指南

  • 價格:免費
  • 適用於:未知

指南是 Photoshop 中保持一切結構化的重要工具。 但是,處理它們可能很煩人。

這個插件希望緩解這種情況。 它添加了新按鈕以在圖層的側面以及它們的水平和垂直中心添加指南。 不再需要拖動,只需單擊即可。

長影發生器

長影生成器

  • 價格:免費
  • 適用於: CS6、CC

插件名稱基本上說明了一切。 Long Shadow Generator 可幫助您在 Photoshop 中創建長陰影。 您可以控制陰影長度和不透明度、顏色、漸變和角度。 然後只需單擊即可添加它們。

小PNG

  • 價格: 50 美元
  • 適用於: CS5、CS6、CC 及以上

TinyPNG 是我經常推薦的在線服務,用於在將圖像上傳到 WordPress 之前對其進行優化。 它壓縮 JPG 和 PNG 文件,使它們盡可能小。

該網站還提供了一個 Photoshop 插件,可以在圖像編輯軟件中執行相同的操作。 它允許您直接預覽和保存、縮放、使用部分選擇等。 如果他們的網站有任何跡象,則該插件非常物有所值。

格列佛

glifo photoshop 插件

  • 價格: 19美元
  • 適用於: CS5、CC

Glifo 添加了將矢量圖標從 Photoshop 導出為圖標 Web 字體的選項。 聽起來像是 Font Awesome 插件的一個很好的補充。

斯堪的納維亞

斑點

  • 價格: 19美元
  • 適用於: CS5、CS6、CC 2014 及更高版本

另一個將測量和設計規範添加到 Photoshop 文件的插件,但是,這次是高級版本。 測量尺寸、邊距和字體,並在可編輯疊加層中自動創建規格。 看起來超級簡單,使用起來很舒服。

出口套件

出口套件

  • 價格: 19.33 美元/月
  • 適用於: CS6 及以上

這個 Photoshop 插件可讓您將 PSD 文件轉換為 HTML、CSS、WordPress、iOS、Android 等。 它還包含協作功能。 看起來很強大,但是,它帶有月度許可證,並不便宜。

Photoshop 社交分享插件

photoshop 社交分享插件

  • 價格:免費
  • 適用於:未知(僅限 Mac OS)

我們列表中的下一項為 Photoshop 添加了重要的共享功能。 它允許您通過電子郵件、社交網絡和其他平台直接從程序內部共享和發布文件。 只需選擇一種格式,您就可以開始使用了。

變換每個

  • 價格:免費
  • 適用於: CS5、CS6、CC

Transform Each 是一個腳本,允許您一次轉換多個對象而不改變它們的位置。 下面的 GIF 很好地說明了這意味著什麼。 選擇你的錨點,你想要實現的轉換,它會一鍵讓你到達那裡。

香椿!

  • 價格: 129 美元
  • 適用於: Photoshop CS 及更高版本

最後一個有趣的。 如果您想創建在線圖畫小說,這項服務將大有幫助。 它將普通照片變成卡通,具有許多預設和成熟的技術。 雖然有點貴。

Photoshop 插件簡而言之……

Photoshop 是網頁設計師的絕佳工具。 它功能強大,功能豐富且不斷更新。

但是,有時我們希望它具有一些附加功能或更簡單的方法來完成任務。 這就是 Photoshop 插件的用武之地。

正如您從上面的列表中看到的,插件可以添加許多不同的功能。 從快捷方式到全新功能。

這只是對網頁設計有用的那些。 還有更多,尤其是圖像修飾。 你有什麼要補充的嗎?

您知道其他喜歡和推薦的 Photoshop 插件嗎? 請在下面的評論部分分享!

文章縮略圖由 VectorsMarket/shutterstock.com 提供