這種icon效果是如何實現的?

時間 2021-05-11 17:18:38

1樓:Rexroth

給乙個 Sketch 的方法,拋磚引玉。不得不說Sketch還不能很好地處理這麼多密密麻麻的細節,這種圖還是啊逗比的工具比較好(或者是本人小白,求老司機開個車)。因為工作的地方日常都用Sketch,所以這是個很好的技術挑戰,其蛋疼本質和用Excel做動畫差不多。

先上圖為敬:

講道理,除了幾百個中心放射狀圓點比較難辦以外,其餘的效果用Sketch都可以無壓力還原,方法和AI大同小異,都是通過調整陰影來達到立體感,而且Sketch有時可以做得更快。所以我只著重說一下這些要人命的點是怎麼用Sketch搞的。

先看一下要人命的點的細節圖:

其他答案也有提到,用Sketch自帶的功能大失敗,i7都帶不起來(應該指的是 Layer -> Path -> Rotate Copies)。這種做法具體是先畫一豎列的點,假定每一列點之間是2度,所以再選擇旋轉複製180次,然後等Mac小彩球等到天荒地老……等Sketch畫完了以後你也沒辦法給每個點加陰影和漸變,因為你每動一次滑鼠,Sketch就要卡個十分鐘,更別提給幾百個點加特技了。所以用自帶的功能是絕對不行的,估計得等下兩代的Intel CPU。

作弊方法:使用Sketch的乙個簡單外掛程式:Rotate Line.

這個外掛程式可以快速地畫出旋轉中心對稱圖形,其本質是把Sketch的Rotate功能自動化了。雖然依然沒有Illustrator快,但是……總比沒有強……

具體做法,先畫一豎列點,減去中間的部分(為的是儘量減少Sketch的運算量),設定旋轉角度為2度,複製一次,這時你得到了兩列相差2度的點。然後再複製這2豎列的點,旋轉4度,於是你現在有4列 -> 再複製到8列 -> 再加兩條,複製到10列 -> 複製到30列 -> 複製到90列 -> 複製到180列 -> 完成!

如果按照 2->4->8->16 ->32 -> 64 -> 128 -> 256 -> 512 的順序複製的話,刪多餘的點會讓你刪到手軟,所以提前要想好角度和需要複製的角度和步數,一步到位。

你的Sketch還是會卡,但是……不會卡到天荒地老了,只是稍微卡一點兒。總比沒有強……這一步結束以後,加上圖示背景,加上中心的圓,刪掉周圍多餘的點,效果大概如圖:

真正卡的是下一步。

首先選中所有的點,然後 Layer -> Path -> Flatten,重置所有被旋轉過的豎列點的狀態。

然後就可以統一改變所有的點的Fill和Border啦!只要把Border設定成從上到下的黑白漸變就可以了。但是我推薦一部分一部分地改這些點(一次改四分之一的量),因為感覺沒那麼卡。

一下子改變所有的點也可以,但是我i5的機器卡了大概有三分鐘。

好處在於,只要修改乙個點的漸變,所有被選中的點都會跟著變。

經過一番蛋碎,終於所有的點都有了立體感。剩下的就是摳其他細節了。

如果有老司機有更好的、更快的、這裡有哪一步有更優化的、只用Sketch以及其外掛程式的方法,認真求帶。

2樓:愛麗絲的人偶一號

一直以為這CD機是實拍的orz

話說回來,誰會用這麼煩的東西做個icon啊http://

3樓:餃子

細節多到髮指……

上午試了乙個,先放成圖↓↓。好久沒這麼磨圖示了……

其實不難,就是細節太多了太多了太多了

跟原圖還是有差距,我就說下方法,想精益求精還要沉下心再調調。

我是拿PS畫的AI助攻了下。

看下圖層先:

1.白色圓角矩形打底,這是最下面一層,給投影,原圖投影偏青色。大概給了下,後期可以細調。

2.再做乙個稍微小一點的圓角矩形,給描邊和漸變。

3.畫個圓,給圖層樣式-斜面和浮雕。就是凹陷的效果,試了很久,引數如下,可依個人口味酌情調節~

4.做完凹陷,現在再做凹陷底部的樣式,依舊各種圖層樣式的疊加。都要慢慢試,我先放我的引數。↓

5.其實這步是到最後才做的。這個很簡單,兩個矩形兩個圓,吸色就行。

6.這步做的是中間圓的邊緣一圈,用的漸變疊加,對照原圖一點一點吸色,調整角度。

7.簡單的給個圓,吸色。

8.中心的白色小圓,有點陰影,給個淺色的描邊即可。

9.黑片,黑圓+三個白色圓角矩形做布林運算。注意黑片的顏色,也是深灰色的漸變,左上角稍亮。

10.再畫乙個圓,吸色。

11.MUJI的LOGO,我直接用的原圖的。

12.喪心病狂的蜂窩矩陣,這步是AI做的。稍後說。

AI部分

觀察原圖的蜂窩點點們,從中心向外放射,很整齊,而且有從小到大從密到疏的漸變趨勢。

開啟AI

1.畫乙個圓。我畫的大概1.5MM,不過向量的多大都可以,最後調就行。

2.效果-扭曲和變換-變換。調節引數如下圖。

3.達到上圖效果後,再次選擇小圓點,選單欄-物件-擴充套件外觀。

4.選擇這一圈小點,然後再次開啟第二步的變換。調節引數如下圖↓:

5.將圖形再次擴充套件外觀,然後複製到PS中,選擇「形狀圖層」方式複製,調節下顏色給個遮罩就可以了。

完成。注意細節細節,我畫的比較敷衍,憋學我。

這種色彩位移效果是如何實現的?

細雨濕衣 把你想要的文字輸進去,複製再複製,一共三個圖層。顏色選CYMK色板。三層文字的顏色分別是第一層C100,M0,Y0,K0。第二層C0,M100,Y0,K0。第三層C0,M0,Y100,K0。然後圖層樣式選正片疊底。然後三層稍微移動下就看出效果了。 Donkihode 常見的RGB位移 一開...

這種效果是怎樣實現的?

蚊香灰 ps做一下 主要是透明漸變的運用 畫圓,拉漸變 然後用矩形漸變新增蒙版,就得到背景漸變圓環複製一層提亮。再複製一層,新增漸變描邊,高斯模糊一下,數值看著給。基本上差不多就是這樣了,裡面那個也是這樣操作,只是新增了個底色。星球表面的形狀照著畫一下就行了,然後也是新增漸變,高斯模糊一下。 CY王...

這種上色效果是怎麼實現的?

麥子 很簡單,用Photoshop裡的漸變對映,只需一步可將任何圖變成題主說的這種色彩斑斕的效果。並不需要用到混合模式之類的。Gradient Map 漸變對映 舉個例子 先隨便找張合適的底圖,Shift U或Ctrl Shift U去色。去色底圖 在圖層上加漸變對映 選擇需要對映到底圖中的漸變色,...