hotoshop可以說是每個設(shè)計師都必須會用的設(shè)計工具之一了。為了設(shè)計要求,大家會在Photoshop里搭配一些PS插件來使用。這篇文章就為大家整理了22款最佳PS插件,一起來看看吧。
點擊獲取,ps全套插件合集,一鍵選裝,自動識別ps版本
摹客iDoc是一個更快更簡單的產(chǎn)品協(xié)作設(shè)計平臺。摹客iDoc主要用戶人群涵蓋產(chǎn)品經(jīng)理,設(shè)計師和工程師,其核心功能點包括:智能標注、一鍵切圖、多樣批注、快速交互、全貌畫板、團隊管理。從產(chǎn)品到開發(fā),真正實現(xiàn)了只要一個文檔,更加高效流暢的協(xié)作方式,降低溝通成本,提升產(chǎn)品效率。摹客iDoc支持PS。通過摹客iDoc PS插件,可以上傳PS設(shè)計稿以進行標記切圖等(摹客iDoc PS插件教程)。PS 中的設(shè)計稿上傳至iDoc中后,可以進行以下操作:
GuideGuide是一款針對photoshop的輔助工具。通過這款軟件,可以輕松的即可完成標準的輔助線,從而讓設(shè)計師更輕松地進行作品制作,節(jié)約畫圖的時間。軟件操作比較簡單,只需要將插件載入PS中,即可完成各種輔助線的制作。
Lumenzia 是款Photoshop蒙版擴展插件,可以對PS中的圖片進行添加城市風格的濾鏡效果。插件支持對調(diào)整亮度、區(qū)域范圍的各種效果,也可以自定義調(diào)整區(qū)域、添加顏色等。
Fluid Mask 3是一款可以幫助處理PS圖像的工具。該插件中的編輯功能非常豐富,支持多種畫筆工具,可以將摳圖的照片加載到編輯區(qū)域,利用不同的畫筆工具對其進行處理,從而優(yōu)化PS圖像;同事還支持邊緣寬度調(diào)整、蒙版設(shè)計、色調(diào)調(diào)整、抓取、縮放、拍照等輔助功能。
Long Shadow Generator是一個Photoshop長投影插件。長投影效果在網(wǎng)頁設(shè)計、UI元素與圖標等設(shè)計上的應(yīng)用很常見。這款 長投影插件除了支持4個方向的長投影,還支持設(shè)置投影長度等。
具體請看功能展示視頻:如何使用Long Shadow Generator
CSS3Ps是一款PS圖層轉(zhuǎn)換軟件,可以將圖層轉(zhuǎn)換為能在瀏覽器中查看的CSS3代碼,方便直接在設(shè)計軟件中添加相關(guān)的設(shè)計程序。其操作過程很簡單,通過鼠標簡單的操作就能完成轉(zhuǎn)換任務(wù)。轉(zhuǎn)換的時候,可以選擇單個或多個圖層,并通過點擊轉(zhuǎn)換實現(xiàn)批量處理功能。
Ink是一款幫助顯示Photoshop圖層詳細信息的擴展插件。通過這款插件可以快速生成指定圖層的詳細信息,例如圖層的信息、大小、顏色等,從而為前端提供圖層信息。有了這款插件,設(shè)計師可以輕松輸出規(guī)范文檔,這樣就不會因缺乏規(guī)范而導致不準確的前端輸出。
具體請看使用教程:如何使用Ink
CSS Hat 是一款 PhotoShop 插件,能夠把PSD效果圖層自動轉(zhuǎn)化為轉(zhuǎn)換成CSS樣式代碼。此插件對于 Web 設(shè)計開發(fā)相關(guān)工作者相當有幫助,生成的 CSS 樣式可以直接使用,可節(jié)省大量的時間。
標注、切圖、交互、原型,2019年必備神器![color=rgb(255, 255, 255) !important]立即體驗iDoc
具體請看功能展示視頻:如何使用CSS Hat
點擊獲取,ps全套插件合集,一鍵選裝,自動識別ps版本
大家多多評論,提高推薦,閱讀超過5000,小編將分享更給力的資源,或者大家有什么需求可以在評論區(qū)留言!
1、素材文件來源于互聯(lián)網(wǎng),素材版權(quán)歸原作者所有
2、素材僅供個人學習研究,不得任何形式商用。如需商用,請聯(lián)系原創(chuàng)作者購買版權(quán),
否則帶來版權(quán)法律問題,請自行負責
者 | 小胡
責編 | 郭芮
說到圖片處理,我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者,我們經(jīng)常會需要處理一些特效,例如根據(jù)不同的狀態(tài),讓圖標顯示不同的顏色。或者是hover的時候,對圖片的對比度,陰影進行處理。”
不過你以為上面的圖片都是經(jīng)過PS軟件處理出來的?不不不,純粹是用CSS寫出來的,很神奇吧。
CSS濾鏡(filter)能夠提供模糊、銳化或元素變色等圖形特效,過濾器則通常用于調(diào)整圖片、背景和邊界的渲染。
CSS標準里包含了一些已實現(xiàn)預定義效果的函數(shù):
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
<!--html--> <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原圖">
filter: none
沒有任何效果,默認filter就為none。
filter:blur( ) 高斯模糊
給圖像一個高斯模糊效果,length值越大,圖像越模糊。我們來嘗試一下:
img { filter:blur(2px);; }
brightness(%) 線性乘法
可以讓圖片看起來更亮或者更暗:
img { filter:brightness(70%); }
contrast(%) 對比度
調(diào)整圖像的對比度:
img { filter:contrast(50%); }
設(shè)置陰影效果(h-shadow v-shadow blur spread color)
陰影是合成在圖像下面、有模糊度的,可以以特定顏色畫出的遮罩圖的偏移版本。函數(shù)接受<shadow>(在CSS3背景中定義)類型的值,除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似,不同之處在于,通過濾鏡,一些瀏覽器為了更好的性能會提供硬件加速。
利用這個方案,我們可以改變圖標的顏色,比如黑色圖標變成藍色圖標:
img { filter: drop-shadow(705px 0 0 #ccc); }
在這里,我們將圖片投影形成一個同等大小的灰色區(qū)域:
hue-rotate(deg) 色相旋轉(zhuǎn)
img { filter:hue-rotate(70deg); }
看,我的小姐姐變成了阿凡達!
invert(%) 反轉(zhuǎn)
這個函數(shù)的作用是反轉(zhuǎn)輸入圖像,有點像曝光的效果:
img { filter:invert(100%) }
grayscale(%) 將圖像轉(zhuǎn)換為灰度圖像
這個效果可以將圖片做舊,有一種時代滄桑感。喜歡古風的人一定會喜歡上這個效果的:
img { filter:grayscale(80%); }
除了古風還有一種用法是有的時候需要將全站變成灰色,如大屠殺紀念日的時候:
可以這樣設(shè)置:
*{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
sepia(%) 將圖像轉(zhuǎn)換為深褐色
下面給我的小姐姐一個暖暖的色調(diào):
img { filter:sepia(50%) }
大家是不是發(fā)現(xiàn)我并沒有把url()方法寫到這上面來?
沒錯,因為我想把這個內(nèi)容放到最后來說,filter:url()就是CSS濾鏡改變圖片的終極方法。CSS:filter可以導入一個svg濾鏡,作為它自己的濾鏡。
為什么說filter:url()是圖片變色的終極解決方案?請容我慢慢道來。
我們先科普一下PS的工作原理,我們都知道網(wǎng)頁是有三原色的R(紅) G(綠) B(藍),常見的RGBA還包括一個opicity值,而opcity值是根據(jù)alpha通道計算出來的。也就是說,我們見到的網(wǎng)頁的每一個像素點都是由紅藍綠再加alpha四個通道組成,每一個通道我們稱之為色板,PS中8位板的意思就是2的八次方256,意思就是每一個通道的取值范圍都是(0-255)。
如果我們可以改變每個通道的值是不是就能完美的得到我們想要的任意顏色了呢?原理上,我們可以像PS那樣利用svg濾鏡得到任何我們想要的圖像,不僅僅是變色,我們甚至可以憑空生成一幅圖像。
svg feColorMatrix大法好
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix type="matrix" values=" 0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> </svg> <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">
img { filter:url(#change); }
通過單通道我們可以將圖片變成單一的顏色:
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter> </defs> </svg>
通過雙通道我們可到一些非常炫酷的PS效果:
當然,在這里只是舉個例子,通過配置矩陣中的值,我們可以配置每一個像素點的值按照我們定義的規(guī)則顯示。
我們在這里詳細講一下feColorMatrix 矩陣的計算方式:
其中Rin Gin Bin a(alpha) 為原始圖片中每個像素點的rgba值,通過矩陣計算,得到的Rout Gout Bout Aout就是最終顯示出來的rgba值。
將圖片轉(zhuǎn)為單色,以棕色rgba(140,59,0,1)為例
根據(jù)上面的公式,我們可以簡化一些計算,同一行中,只設(shè)置一個通道的值,其他通道為0。不難得出矩陣:
0 0 0 0 目標值R 0 0 0 0 目標值G 0 0 0 0 目標值B 0 0 0 0 1
根據(jù)規(guī)則,只需要計算,255/想要顯示的顏色對應(yīng)通道 = 目標值,我們想要的棕色rgba(140,59,0,1) 換算成色板 rgba 為 140 59 0 255,可以算出目標值0 0 0 0 0.55。
0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0 0 0 0 0 1
多通道設(shè)置出來的炫酷效果
就如同之前我們看到的雙通道形成的炫酷圖片一般。
要把圖片的飽和度提高,首先當然是想想飽和度的成因,就是紅的越紅,藍的越藍,綠的越綠。由這個成因出發(fā),我們的矩陣就可以寫成下面的樣子,看到矩陣當中出現(xiàn)了3 和-1,一定會很那悶這是怎么來的,原理其實很容易理解,讓我們假設(shè)某一個像素的RGB 分別是(200/255),(100/255),(50/255),呈現(xiàn)的應(yīng)該是有點暗沉的橘色,經(jīng)過矩陣的換算:
R 變成了200/255x3-100/255-50/255= 1.76;
G 變成200/255x(-1)+100/255*3-50/ 255=0.2;
B 變成200x(-1)+100x(-1)+50x3=-0.59。
因此RGB轉(zhuǎn)換后就是:200x1.76,100x0.2,50x-0.5。
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter> </defs> </svg>
其他方案
除了feColorMatrix svg濾鏡還有很多的方法可以定義濾鏡,它們同樣可以作用到圖片上。由于篇幅限制,這里就不詳細展開了。
CSS3提供了filter這個屬性,使得通過前端技術(shù)實現(xiàn)更多炫酷的特效成為了可能;依賴于svg的濾鏡,我們可以實現(xiàn)復雜的濾鏡效果。
但是要注意:
文章難免會有疏漏,歡迎大家指正批評。
作者:小胡,曉教育前端,開源愛好者。
聲明:本文為作者投稿,版權(quán)歸其個人所有。
源:量子位
本文約2509字,建議閱讀4分鐘。
本文介紹資深前端用HTML+CSS繪畫,全程不用PS、AI這種圖形化的圖片編輯器,單純敲一行行代碼純手工繪制。
HTML不是編程語言,但這并不妨礙精通它的大佬玩出花來。
普通的前端,用HTML+CSS制作網(wǎng)頁,元素簡單,工具豐富。
大佬級前端,用HTML+CSS繪畫,全程不用PS、AI這種圖形化的圖片編輯器,單純敲一行行代碼純手工繪制。
把代碼轉(zhuǎn)換之后,就變成了鮮嫩的水果:
或者畫出洛可可風格的古典女性肖像:
還有弗拉芒巴洛克肖像風格的人物畫像,充滿了中世紀的禁欲感:
現(xiàn)代的也有,比如這位在粉色燈光下的著禮服的妹子:
以及充滿者50年代氣息的復古風人物海報:
曲線、光影、漸變,每個元素都相當復雜。
而且,創(chuàng)作過程中不用SVG,只用Atom文本編輯器和Chrome開發(fā)者工具。
也就是說,畫面上的每一條曲線和漸變、每一處高光和陰影、每一根頭發(fā)和睫毛、每一片蕾絲和褶皺,都是一行行代碼從頭敲出來的!
如此精細程度和創(chuàng)造力,讓學美術(shù)的網(wǎng)友感嘆“學畫畫不如寫代碼”,讓學計算機的同學覺得“別人寫的這么藝術(shù),一定是我的教科書打開方式不對”。
真·交叉學科大佬。
這個項目也一度登上了GitHub Trending排行榜第二名:
并且Issues里都是諸多用戶的膜拜:厲害!崇拜!太棒了!
它們的作者,是灣區(qū)前端大神Diana Smith小姐姐,她目前是企業(yè)及軟件開發(fā)商Atlassian的一名資深Web開發(fā)。
Diana在專門討論CSS的網(wǎng)站CSS-Tricks寫下了詳細的教程。
畫出這樣一個圖形分成幾步?
如果不用CSS,一般都是直接嵌入這個特殊的圖形。
如果用CSS,那么就從黑色矩形開始,然后在兩側(cè)加上上兩個
與白色背景顏色匹配的邊框半徑元素。
先畫出一個黑色矩形,然后兩邊用圓弧遮擋。有了基礎(chǔ)形狀后,下一步就是給它添上漸變的背景。但是如果用矩形方式填充,得到的效果就是這樣的:
Diana的辦法是:在保留矩形的同時,加上兩個彎曲的div,把凹進去的部分也填充上。
最后完整的代碼是這樣的:
div{
width: 500px;
height: 350px;
background: #000;
position: relative;
&::after, &::before{
width: 20%;
height: 100%;
position: absolute;
top: 0;
z-index:2;
content: "";
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
&::after{
border-radius: 100% 0% 0% 100%;
right: 0;
}
&::before{
border-radius: 0 100% 100% 0;
left: 0;
}
}
body{
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
你也可以去這個完成查看CSS樣式的實際運行效果:
https://codepen.io/jean-jordan/pen/KeKaBw
剛剛我們畫的那幅畫像不像人的脖子?好的,我們再回到人像畫上,Diana繪制人物的脖子也是類似的過程。
在上面這張圖里,我們看到了Diana如何逐步改形狀,最終得到了油畫中人物的脖子。
但是僅僅會畫各種幾何形狀,是無法生成藝術(shù)品的,Diana總結(jié)了她在繪圖中的5個重要CSS屬性。
1、邊界半徑(border-radius)
邊界半徑是為了讓矩形的邊角過渡得更自然,對于大多數(shù)網(wǎng)頁開發(fā)者來說,只需一個參數(shù)border-radius,可以設(shè)定不同的半徑數(shù)值。
border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;
2、盒子陰影(box-shadow)
對多個盒子陰影進行分層是增加深度的最佳方法之一。框陰影將粘附到html容器的邊緣,也會沿著邊界半徑定義的邊緣。
box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;
開發(fā)者可以指定模糊半徑,以及陰影是向內(nèi)延伸還是向外延伸。
3、變形(transform)
變形的主要方式有:旋轉(zhuǎn)(rotate)、縮放(scale)和傾斜(skew)
transform: rotate(-45deg)
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);
此外還有透視,讓物體產(chǎn)生遠小近大的視覺效果,或者是僅僅為畫出一個梯形。
transform: perspective(10px) rotateY(5deg);
4、線性梯度(linear-gradient)和徑向梯度(radial-gradient)
線性梯度用于定義一個方向上的漸變效果,徑向梯度用于定義圓和橢圓形的漸變效果
background-image: linear-gradient(0deg, blue, transparent 60%),
radial-gradient(circle at 70% 30%, purple, transparent 40%);
5、層疊(overflow)
層疊是一種將大量雜亂元素填充到一個整齊的包中的方法,可以創(chuàng)建一些有趣的形狀。在變形那部分的基礎(chǔ)上使用hidden參數(shù),可以把邊緣遮蓋起來。
overflow: hidden;
以上5種元素缺一不可,隨便少一種都會產(chǎn)生怪異的效果。
不過即使這樣,也很有抽象藝術(shù)的美感,仿佛在看畢加索的作品。
不過,由于這是一個純個人藝術(shù)創(chuàng)作,Diana小姐姐并不關(guān)心瀏覽器適配性。
因此,這些代碼在Chrome里可以完美展現(xiàn),但如果用其他瀏覽器打開,可能就會出現(xiàn)不一樣的效果。
比如,MAC上的Safari瀏覽器打開,妹子的眼睛就方了:
肩膀上的高光,變成了一個大圈圈:
胸前的禮服上,也被潑了一道墨:
如果用早期的Chrome打開,會出現(xiàn)驚悚的頭身分離的效果:
早期的Opera瀏覽器,打開之后臉方了:
Windows 7上從IE 6到IE 11,顯示出來的都是這個鬼樣子:
濃重的線條,甚至有點抽象藝術(shù)的感覺。
同樣是早期IE,放到Mac上也一樣鬼畜,這是IE 5.1.7的效果:
還有人試了試,在Windows 98系統(tǒng)的IE 7瀏覽器打開,會變成非常像素風的樣子:
最恐怖的是三星手機上的夜間模式打開:
連人種都變了啊!
其他的幾張畫,換個瀏覽器打開也比較鬼畜。
妹子你bra里的鋼圈出來了啊!
拉夫領(lǐng)變得透明而有光澤,領(lǐng)口的蕾絲干脆斷掉了,仿佛是逃難時期的肖像畫。
最后,如果你在iPhone上裝了Chrome,出來的也是Safari的效果,想看完整效果的話,請在安卓手機或者電腦的Chrome上打開。
因此,有不少網(wǎng)友都覺得,這幾幅畫可以當成瀏覽器測試項目,一試就能知道內(nèi)核用的是誰家的。
CSS太難,學不會?不要緊,雖然我們不能把代碼變成圖片,但是可以把圖片變成代碼啊。
沒錯,就是ASCII藝術(shù),早在DOS時期,就有人用命令行界面來顯示圖片。直到今天已成為一種流行的互聯(lián)網(wǎng)文化。
用單色字符來畫出世界名畫已經(jīng)不算新鮮事。最近又有個碼農(nóng)開發(fā)了一個新的項目Primg,讓任何一幅畫都可以用質(zhì)數(shù)來表示。
比如蒙拉麗莎,就可以用一個3萬位的質(zhì)數(shù)二進制方式繪制出來。
作者的GitHub:
https://github.com/cyanharlow
作者博客主頁:
https://diana-adrianne.com/
教程:
https://css-tricks.com/solving-lifes-problems-with-css/
用質(zhì)數(shù)生成任意ASCII藝術(shù):
https://github.com/geonnave/primg
—完—
關(guān)注清華-青島數(shù)據(jù)科學研究院官方微信公眾平臺“ THU數(shù)據(jù)派 ”及姊妹號“ 數(shù)據(jù)派THU ”獲取更多講座福利及優(yōu)質(zhì)內(nèi)容。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。