蘋果的icon怎麼畫 將圖層樣式進行到底

2021-02-12 趁孩子睡了


此教程：來自UI君的小夥伴P大點S 微信號：（Photoshop-ps）


本教程來自P大點S的Projava！在photoshop中，圖層樣式是最為直觀的東西，所有的效果都能量化，以數值的形式表現出來，就是各種晦澀難懂的等高線也可以用數字來表現。利用圖層樣式中的混合模式可以得到千變萬化的效果，很多的UI和icon絢麗的效果大多數是靠圖層樣式來實現的。

今天的iTunes圖標是一個非常經典的icon，不過現在你們看不到了。現在的版本只能說是走火入魔，推崇扁平化，說它漂亮也談不上，說難看也不至於~

下面是我完成的效果圖，不過我對它的外輪廓作了一些惡搞性質的變化。這個外形介於正方形和圓形之間，它跟圓角矩形不是一個概念，迎合了現在的「審美觀」：


下面開始製作過程，首先我百度了一張原圖作為參考～


新建一個1000X1000的新畫布~


粘貼剛才複製的iTunes原圖，移動到角落上作為參考~


按ctrl+r打開標尺，右鍵標尺選擇百分比~


快捷鍵alt+v+e（按住alt，依次按V再按E）在垂直位置輸入50%~


繼續橫向位置也是50%~


設置好參考後點擊圖層欄下面的快捷按鈕添加一個漸變調節層。


選擇你認為比較合適的顏色搭配。本來我打算給出顏色的代碼，後來想想還是算了，每個人都有自己的獨好。我認為好看的你不一定也認同，所以這裡你大可不必按照我的選擇。

在圖形工具裡選擇橢圓工具~



以參考線的交叉點為中心畫一個大小差不多跟畫布大小的圓形。至於它的顏色大可不必在意，任何顏色都可以，我只要的是它的形狀~


右擊「選擇工具」，選擇「直接選擇工具」，也就是白色的箭頭。如果你比較熟悉這個工具的話可以結合ctrl建快速轉換~


框選水平方向的兩個錨點~


右鍵選擇「自由變換點」~


在"設置水平縮放"裡輸入80%大小。這時候你看到這個圓形變成一個橢圓


同樣框選垂直方向的兩個錨點，在垂直方向輸入80%。現在你看到的形狀跟我頂樓的差不多了~


按ESC隱藏路徑。雙擊打開圖層樣式，添加一個漸變。如果你的想像力足夠豐富的話，可以隨意填充你認為漂亮的顏色組合~


繼續添加描邊。其實用斜面浮雕效果也差不多，不過我認為用線性漸變的描邊來模擬「倒角」更加細膩~


ctrl+j複製一層，ctrl+t自由變換。打開「保持長寬比」，同比例縮小為95%~


重新修改它的圖層樣式數值，首先是漸變填充~


它同樣也有一個線性漸變的描邊，注意它的顏色要加深~


ctrl+j複製一層，在圖層縮略圖上右鍵清除圖層樣式~


ctrl+t自由變換。同樣要打開「保持長寬比」縮小為95%~


按ESC或者點擊矢量蒙版隱藏路徑。雙擊進入圖層樣式，添加一個徑向漸變。每個人的口味不同，這裡我想儘量模擬原圖的風格，所以選擇了接近原圖的顏色~


添加內發光，我們要摒棄一個概念，「發光」不一定是亮的，有時候也可以的暗的~


再次添加「投影」，現在我得到一個邊緣看上去比較柔和的效果。其實這裡你盡可使用「外發光"，效果是一模一樣的，不過投影的控制更加靈活，它還有」距離「的選項，」外發光「相比之下比較死板~


還有這個形狀下面的反射效果，以前我在別的網站見過ps愛好者臨摹這個icon的時候比較拘謹，他另外使用選區的減除來實現這個效果，這裡我覺得可以鄙視一下，相比之下他對圖層樣式的理解沒有我透徹，我就這樣吹一下牛大概不會影響到我的光輝形象吧？開啟內陰影模擬下面的反射效果，這裡我要提醒各位注意」使用全局光「的選項~


繼續複製一層，在圖層上右鍵清除圖層樣式~


ctrl+t把這個形狀縮小至98%~


單獨選擇下面的錨點往上移動~


結合shift選擇左右兩個錨點，右鍵選擇」自由變換點「編輯這個形狀的外形~


雙擊這個結果編輯的形狀進入圖層樣式，添加線性黑白漸變，注意混合模式的變化~


還有白色的」內陰影「模擬高光~


接著是icon中的音符，這裡要使用到圖形工具。先畫一個橢圓，大小隨意，到時候我們可以編輯~


用」疊加模式「畫一個矩形，記得要用第二個的疊加按鈕，這樣能保證它們在一個圖層裡~


選擇」路徑選擇工具「，框選這兩個形狀後按ctrl+alt+t複製移動到合適的位置~


同樣還是選擇」路徑選擇工具「，點擊任意一個矩形，ctrl+alt+t自由變換，把它設為音符橫向~


點擊上面的」組合「合併~


選擇鋼筆中」刪除錨點工具「，刪除右邊多餘的錨點~


選擇」添加錨點工具「，在橫條中間增加兩個錨點~


ctrl+t 編輯這個音符，在垂直斜切裡輸入-11度，這裡沒有硬性規定必須要11度。我只是目測它大概是這個角度~


使用」直接選擇工具「選擇這兩個剛剛添加的錨點，往上移動一些距離~


雙擊這個音符圖層打開圖層樣式，先添加一個徑向漸變~


添加斜面浮雕效果~


外發光，我使用了」柔光「模式以強化它的通透效果~


這個音符的外發光還有更深的一層，既然我已經用過了」外發光「，只好使用投影來實現，不過我前面說過了，用投影來實現一點也不遜色於外發光~


接著用一個內發光來強化這個音符。這裡我墨跡幾句，個人認為圖層樣式裡最強大的功能不是投影，也不是斜面浮雕，而是等高線。如果你的觀察力足夠強的話你會發現我使用了一個很特別的等高線~


選中所有可移動的圖層，往上一動一段距離~


最後一步，我用Photoshop力最基礎的畫筆來製作它的陰影，畫筆是Photoshop裡最強大的功能，而且沒有之一。如果沒有畫筆你什麼都幹不了，在漸變背景層上新建一層，用一個硬度為0，差不多120大小在底下點一下~


ctrl+t自由變換，水平拉伸~


不要確認這個操作，繼續右鍵選擇變形，仔細的把它調成這個形狀~


稍微往上移動~


選擇這個陰影層，開啟圖層欄上面的」鎖定像素「按鈕，給它填充比漸變背景上更深的顏色~


選擇畫筆，減少透明度和流量，在最接近圖標的地方塗抹更深的顏色~


完成！


相關焦點

  • AutoCAD圖層、文字樣式、標註樣式設置
    我們在剛開始使用AutoCAD時，都要先創建自己的圖層、文字樣式、標註樣式。本文以AutoCAD 2014版為例進行講解。一、圖層一個機械圖樣至少要有粗實線、細實線、中心線、虛線、剖面線、標註、文字這7個圖層。輸入快捷鍵「LA」，打開圖層管理器，新建上述的七個圖層，並把各個圖層的線型、顏色、線寬進行修改（見圖1）。
  • ps大神透露圖層混合模式和圖層樣式使用大全,花錢都學不到的乾貨
    混合模式和圖層樣式Ps的混合模式總共有27個，使用前提是兩個及以上圖層才能進行混合正常模式：需要通過調整圖層的不透明度才能發生變化變暗混合組：可以使得圖像變暗，將疊加效果圖各個模式的比較Ps的圖層樣式很多，找到圖層樣式窗口的方法：雙擊圖層縮覽圖後方，彈出對話框/點擊圖層面板下方的fx按鈕，添加圖層樣式/圖層菜單欄中選擇圖層，圖層樣式
  • ps可愛Q彈的icon
    不露又和大家見面了，今天給大家帶來的是一個可愛Q彈的icon~看起來像塊餅乾是吧~做起來非常簡單哦，快打開PS一起躁起來吧。
  • 利用圖層樣式渲染炫彩特效文字
    用Photoshop做圖，經常需要用到一些文字特效，怎麼輕鬆打造文字炫彩效果呢？利用圖層樣式就可以輕鬆做到啦！快來看看吧~1.首先百度找一個合適的背景，如果自己有準備好的素材也可以直接使用。打開PS，創建一個1500×900像素的文檔，解析度可以設置為為300p，並且置入準備好的素材，得到效果如下所示：2.將置入的圖層可以再複製一個，將文件自由變換後垂直翻轉，並在圖層上方設置混合模式為正片疊底，設置這個圖層的不透明度為20%，將文件柵格化後按下Ctrl+I進行反相，效果如圖所示。
  • ps餅乾icon教程
    今天給大家帶來的是一個可愛Q彈的icon~看起來像塊餅乾是吧~做起來非常簡單哦，快打開PS一起躁起來吧。
  • 64款PS文字特效圖層樣式,設計師必須收藏
    這些Photoshop文字圖層樣式有很多風格，比如金屬、復古、水彩、3D等效果，樣式很多，適用於淘寶海報設計、網頁banner或是賀卡，此外，有的素材使用了智能對象，用戶只需要輸入文字就能自動轉換對應的圖層樣式，非常簡單，建議大家收藏起來，日後用上的時候再慢慢挑選。
  • PS教程:巧妙調整圖層樣式,製作逼真燙金LOGO
    2、打開背景素材，拖入我們製作好的logo素材，如下圖所示，按住Ctrll鍵對文字進行透視變形，使它符合近大遠小的透視關係，調節完成，打勾確認。3、選中圖層1，單擊滑鼠右鍵，在打開的菜單中，選擇「轉換為智能對象」。
  • PS怎麼合併圖層,PS合併圖層後怎麼分開?PS合併圖層快捷鍵
    在使用ps的過程中，圖層太多會給我們帶來一定的麻煩，比如說不停地命名新圖層都要花費時間，這時候適當的合併一些圖層會讓ps所佔的內存減少，移動這些圖層位置的時候也可以更方便，今天小編來介紹下如何使用PS合併圖層。
  • sai板繪怎麼畫?幾分鐘畫出一個星球!
    sai板繪怎麼畫？幾分鐘畫出一個星球！如何畫出氣勢磅礴的宇宙星球？在廣闊無際的宇宙中，有著太多還未被人類發現的星球，而這些星球散發的光景又讓人忍不住想去探索。沒錯今天給大家分享就是星球畫法，那麼接下來讓我為大家介紹，怎樣在5分鐘內完成一幅勾起人類探索之心的星球插畫。
  • PS練習圖層樣式中內發光命令,我戀愛了
    本次來練習圖層樣式中內發光命令，我戀愛了，哈哈。第一步：我們新建一個很像的畫布，在畫面上輸入我戀愛了，紅色文字，粉色背景。第二步：我們雙擊文字圖層打開圖層樣式面板，選擇內發光命令，混合模式是設置為正片疊底，內發光和圖層內容之間的混合方式，不透明度為內發光的不透明度，雜色為給內發光添加一些隨機的光暈顆粒感。內發光顏色為藍紫色。第三步：方法我們設置為柔和，不設置精準，源為光源的位置，居中就是兩邊都有，邊緣為向內。阻塞用來在模糊和清晰之前收縮內發光的邊界。大小為光暈的範圍大小。
  • PS鋼筆路徑工具描邊選項輕鬆畫圖標應用教程!
    使用這個工具能使圖標畫出來非常的便捷，在繪製圖標中主要有下面幾大優勢！1. 提高了圖形的描邊質量，描邊更為圓滑我們在繪製圖形採用圖層樣式做描邊效果時，如果用到較大的數值，描邊會產生分塊曲線，邊緣有鋸齒感。那麼我們通過矢量描邊處理可得到完美的結果。我猜測這是因為，矢量描邊是由原始的矢量形狀圖層數據而來，而圖層樣式的描邊是由該形狀的位圖蒙版而來。
  • sketchbook怎麼畫星空
    下面介紹sketchbook怎麼畫星空。第一步，我們需要選擇一個較暗的背景色進行填充，這裡我們選擇B39號顏色。第二步，點擊菜單欄中的油漆桶工具，點擊圖層空白處進行填充。第三步，在筆刷庫中找一個星光樣式的筆刷。
  • 在Photoshop中使用圖層蒙版的10個技巧
    圖層蒙版是Photoshop工作流程的基礎。從隱藏和顯示圖層的各個部分到創建更高級的選擇，再到無損工作，「圖層蒙版」可以幫助我們做很多事情。請按照以下步驟進行操作，以分解掌握該基本Photoshop工具的十大技巧。什麼是層遮罩？從最重要的問題開始：圖層蒙版到底是什麼？
  • 1個 icon 1毛錢,超值 icon bundle - 設計師必備
    之前
  • SAI怎麼畫厚塗插畫?SAI厚塗上色教程!
    SAI怎麼畫厚塗插畫？怎樣才能畫好厚塗插畫？畫好厚塗插畫有哪些技巧？
  • 使用Photoshop圖層效果將透明文本融合到圖像
    在「圖層」面板中，單擊底部的fx圖標單擊圖層效果圖標然後從列表中選擇「 陰影」選擇「拖放陰影」投影的選項在Photoshop的「圖層樣式」對話框中打開仍在「圖層樣式」對話框中，從左側的列中選擇「 描邊」。
  • 笨辦法學像素畫系列:像素畫遊戲icon圖標繪畫方法
    作者：三二教你畫像素畫原創教程icon圖標在遊戲中是必備常用的
  • PS教程:我心中的圖層
    那麼在一個設計人員心中如此重要的圖層到底是什麼東東呢？　　我想起了吃的千層餅。我喜歡它的味道。我層嘗試著自己做，不過很可惜，沒有做成功。但是我知道，千層餅，只要你喜歡，你可以在每一層上都灑上你喜歡的蔥花、芝麻等等。你甚至可以在每一層餅上描畫。吃自己創作的藝術餅，一定很棒！　　我的圖層就是透明的千層餅。
  • 一起製作金牌播放器icon
    02 將正圓形狀複製並等比縮小一個出來，效果及修改圖層樣式參數如下04 繪製圓角三角形：a 先利用多邊形工具畫好三角形作為參考。b 在三個頂角處繪製半徑為6px的正圓。 c 利用鋼筆工具將每兩個圓的共切線連接起來。 d ctrl+E 合併b c 兩部的形狀。