#更新
使用深色圖片簡單實現隱藏圖片二不需要網格摳圖
http://blog.csdn.net/chenzhuyu/article/details/54766757
#效果圖:
在QQ聊天的時候,圖片在聊天窗口與詳情兩個界面顯示的是不同的圖片.
電腦端查看也具有類似效果
貼吧也有相同效果
聊天界面縮略圖查看效果:
聊天界面點擊查看詳情效果
#原理
使用了兩張圖片進行拼接,並使用PNG透明特性,使得圖片在白色背景和黑色背景下具有不相同的顯示,在白色背景下,以白底爲主色的圖片變爲全白,無法識別;在黑色背景下,以黑色爲主色的圖片變爲全黑,無法識別.
#術語
這裏我自行規定幾個術語
1.縮略圖–在聊天界面看到的圖片
2:詳情圖–點擊查看到的圖片
#製作素材
需要圖片
一張網格圖,如下兩張圖,每個方塊越小越好,我這裏爲邊長一像素.
不同的網格圖在顯示效果上也略有區別,主要體現在電腦上的點擊查看效果上:
- 第一張製作的詳情圖在以淺色較多的圖片下效果不好
- 第二張在非100%放大下,詳情圖顯示爲縮略圖內容
#製作步驟
- 打開PS,新建兩個圖層,分別填充純黑和純白
- 藉助網格圖,分別將兩個圖層上網格圖對應的另一個顏色的部分刪除,刪除的部分爲透明.並且兩個圖層能夠互補.也就是:白色圖層只有網格圖中白色部分,沒有黑色部分;黑色圖層只有網格圖中黑色部分,沒有白色部分;並且兩個圖層合併以後便爲網格圖
- 將作爲縮略圖的圖片設置爲黑色圖層的圖層蒙版,並且反相蒙版;將作爲詳情圖的圖片設置爲白色圖層的圖層蒙版.(選中圖層,添加圖層蒙版,將圖片導入到一個圖層,全選複製,ALT+左鍵點擊蒙版,然後粘貼)
- 黑色圖層與白色圖層現在便是兩個純色圖層,並且圖層透明度與圖片灰度一致.
- 只顯示黑白兩個圖層,另存爲PNG格式,並且勾選交錯選項.
- 檢查方法:在最底層新建一圖層,填充純白或者純黑,分別顯示縮略圖或詳情圖
#製作效果
##效果1
#小提示
目前感覺600*480分辨率配合網格圖2效果最好.
#附錄
##原圖與製作的圖片
##網格圖素材
注:可能圖片被壓縮,建議通過反覆複製粘貼本文開頭的局部網格圖
