• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 PS電腦繪圖 】Photoshop繪製金屬質感的語音圖標教程




    Photoshop繪製金屬質感的語音圖標教程

    這一次的教學是屬於PS教程領域中的鼠繪教程的相關教學。

    文章出處是來自P大點S微薄的PS教程類文章,寫教學的作者是P大點S,感謝P大點S提供鼠繪教程的實作教學。

    教學大綱:

    教程介紹如何快速臨摹一個圖標,思路:先認真分析圖標的構成,尤其是一些細節的構造,然後分析一遍各個部分的大致實現方法;最後就是新建文件,從底層開始製作即可。


    鼠繪教程教學開始

    最終效果

    Photoshop繪製金屬質感的語音圖標教程

    這個是原圖:

    Photoshop繪製金屬質感的語音圖標教程

    1、下面開始我的製作過程。為了後面的工作更加輕鬆便捷,所以我把新建的畫布尺寸設成一個比較好計算的整數。

    Photoshop繪製金屬質感的語音圖標教程

    2、原圖的背景過於簡單,我畫蛇添足,製作一個iOS風格的背景。新建一層純黑色填充層。

    Photoshop繪製金屬質感的語音圖標教程

    3、新建一層,填充白色。執行“濾鏡-雜色-添加雜色”,參數如圖。

    Photoshop繪製金屬質感的語音圖標教程

    4、濾鏡-模糊-動感模糊。

    Photoshop繪製金屬質感的語音圖標教程

    5、把這個動感模糊層的透明度調到45%。

    Photoshop繪製金屬質感的語音圖標教程

    6、複製一層,CTRL+T自由變化旋轉90度,把透明度調回100%,圖層混合模式改為“疊加”。

    Photoshop繪製金屬質感的語音圖標教程

    7、畫布四周的“毛邊”看着很不和諧,選中這兩個動感模糊層,CTRL+T自由變化,放大一些,直至毛邊不見為止,背景完成。

    Photoshop繪製金屬質感的語音圖標教程

    8、ctrl+r開啟標尺,在標尺上右鍵選擇百分比。按ALT+V+E快速布置水平和垂直兩條處於中心位置的參考線。

    Photoshop繪製金屬質感的語音圖標教程

    9、為了圖層欄的簡潔以及照顧到以後臨摹方便起見,我把屬於背景的三個圖層打包成組且隱藏。選擇“編輯-首選項-參考線.網格和切片”,把間隔單位設為20個像素,子網格設為2,單純設為10像素的話覺得密密麻麻的不舒服。

    Photoshop繪製金屬質感的語音圖標教程

    10、用“橢圓工具”畫一個直徑為840像素的圓形。為了讓它跟白色的背景區分開來,我給它設了一個85%的灰色。

    Photoshop繪製金屬質感的語音圖標教程

    11、按ctrl+’隱藏網格。雙擊這個形狀層,添加投影。我稍微調整了一下“等高線”,讓這個投影是邊緣收縮一些,再加一點點雜色。

    Photoshop繪製金屬質感的語音圖標教程

    12、再加一個人見人愛的角度漸變,用它來模擬圓形金屬是最好用了。

    Photoshop繪製金屬質感的語音圖標教程

    13、最後是這個金屬圓盤的倒角,斜面浮雕是不二之選。

    Photoshop繪製金屬質感的語音圖標教程

    14、我仔細觀察了原圖,金屬圓盤上似乎有“拉絲”的效果,但不是我們大家習慣使用的雜色+徑向模糊的那種。而是類似於很細很密的同心圓。按D恢復前景色和背景色。新建一層填充白色。選擇濾鏡素描中的半調圖案。

    Photoshop繪製金屬質感的語音圖標教程

    15、然後極坐標,一個同心圓的拉絲效果出來了。

    Photoshop繪製金屬質感的語音圖標教程

    16、如果你對上面的半調圖案有異議我認為很正常,因為半調圖案里有“圓形”的選項,可以直接製作同心圓。但是直接製作出來的同心圓的線條比較粗,我想要一個線條很細,很精緻的同心圓,所以選擇直線選項再用極坐標后它的效果比較符合我的要求。最後把這個同心圓的透明度調到8%左右,隱隱約約能看到就行,繼續把它剪切蒙版到金屬圓盤。或者給它一個蒙版也行。

    Photoshop繪製金屬質感的語音圖標教程

    17、接着我要用圖形工具製作圖標中間的麥克風,按ctrl+’開啟網格,先用橢圓工具畫一個15%灰色,比“金屬圓盤”小1.5個網格單位的圓形。

    Photoshop繪製金屬質感的語音圖標教程

    18、繼續用“減去”模式再畫一個小1.5間隔單位的圓,這樣我得到一個邊寬為1.5間隔單位的圓環。

    Photoshop繪製金屬質感的語音圖標教程

    19、製作裡面的麥克風。打開網格,選用圓角矩形工具,把圓角的直徑儘可能的設得大一些,比如現在我就是500,用“添加”模式以膠囊狀下半圓直徑為中心畫一個的麥克風支架。

    Photoshop繪製金屬質感的語音圖標教程

    20、繼續用“減去”模式再畫一個小1.5間隔單位的膠囊,因為網格的“吸附”功能,精確的完成這些都不叫事。

    Photoshop繪製金屬質感的語音圖標教程

    21、用鋼筆裁去上半部的膠囊。不要用矩形工具去裁剪,那樣會把外圍的圓環也破壞掉。

    Photoshop繪製金屬質感的語音圖標教程

    22、在裁斷的位置再布置一條參考線作為話筒的中心點。畫一個小1.5網格單位的膠囊作為麥克風的話筒。

    Photoshop繪製金屬質感的語音圖標教程

    23、還有下面的底座。

    Photoshop繪製金屬質感的語音圖標教程

    24、添加“內陰影”。

    Photoshop繪製金屬質感的語音圖標教程

    25、以及白色的投影。

    Photoshop繪製金屬質感的語音圖標教程

    26、用“創建”模式畫一個小於麥克風話筒半個單位間隔的膠囊。

    Photoshop繪製金屬質感的語音圖標教程

    27、添加圖層樣式中的漸變。

    Photoshop繪製金屬質感的語音圖標教程

    28、淺粉色的投影。

    Photoshop繪製金屬質感的語音圖標教程

    29、最後斜面浮雕是必須的,不過我選用外斜面。

    Photoshop繪製金屬質感的語音圖標教程

    30、畫一個25%灰色大小適中的圓形,ctrl+alt+t移動一段距離后,ctrl+shift+alt+t垂直方向複製一組。

    Photoshop繪製金屬質感的語音圖標教程

    31、橫向錯開一段距離複製一組。

    Photoshop繪製金屬質感的語音圖標教程

    32、繼續移動複製。

    Photoshop繪製金屬質感的語音圖標教程

    33、不用理會下面的鏤空孔,重新安排一下上面的鏤空孔的位置,多餘的可以刪除掉,逐個移動位置不科學的孔,使它們位置符合話筒的半圓形。

    Photoshop繪製金屬質感的語音圖標教程

    34、框選右邊的三排鏤空。把中心點移到垂直參考線上水平複製。

    Photoshop繪製金屬質感的語音圖標教程

    35、雙擊這個圓圈鏤空層,進入圖層樣式,把混合模式改為正片疊底,透明度調到65%左右。把“圖層蒙版隱藏效果”打鉤。

    Photoshop繪製金屬質感的語音圖標教程

    36、簡單的斜面浮雕。

    Photoshop繪製金屬質感的語音圖標教程

    37、給這個鏤空層添加一個蒙版,讓下半部分漸隱。

    Photoshop繪製金屬質感的語音圖標教程

    38、新建一層,按ctrl點擊鏤空層的矢量蒙版獲得選區,用畫筆塗抹上面一小部分。

    Photoshop繪製金屬質感的語音圖標教程

    39、取消選區,ctrl+t自由變化,把中心點設在話筒的中心水平位置,垂直翻轉。

    Photoshop繪製金屬質感的語音圖標教程

    40、高斯模糊1.0,感覺不夠的話可以稍微增大這個數值。

    Photoshop繪製金屬質感的語音圖標教程

    41、漸漸調小畫筆的大小和硬度,在鏤空孔的位置點幾下,模擬燈光逐級減弱的效果。

    Photoshop繪製金屬質感的語音圖標教程

    42、新建一層,添加矢量蒙版,把下面的麥克風話筒的路徑複製進來,再用鋼筆刪去一部分,填充白色,減少透明度。模擬玻璃鏡面反光的效果。如果你覺得矢量蒙版麻煩的話完全可以用圖層蒙版。

    Photoshop繪製金屬質感的語音圖標教程

    43、最後一步,新建一層,用硬度為0的400像素大小的畫筆在中心位置點一下,把混合模式改為“濾色”,透明度調到50。

    Photoshop繪製金屬質感的語音圖標教程

    最終效果:

    Photoshop繪製金屬質感的語音圖標教程

    — —

    文章永久連結為: Photoshop繪製金屬質感的語音圖標教程