這個iCloud大家應該已經是熟到不行了,不過這裡雖然會有教學步驟,不過主要的內仍並不是要教你怎麼按圖施工,而是要在一開始提醒你,做這個Logo其實有幾個注意事項,我個人感覺到特別重要,所以在一開頭便要求你們動動你們的腦袋瓜
第一個沒錯你確實已經看到這個UI上有幾個特別亮的地方,這些亮的地方是因為鋁的材質有圓形切割的關係,又受到光線的照射,所產生的折射
第二個有很多個圓形的切割線
好的知道上面的資訊之後,我們來做這個UI吧。
iCloud-Style-01.jpg  

這個iCloud大家應該已經是熟到不行了,不過這裡雖然會有教學步驟,不過主要的內仍並不是要教你怎麼按圖施工,而是要在一開始提醒你,做這個Logo其實有幾個注意事項,我個人感覺到特別重要,所以在一開頭便要求你們動動你們的腦袋瓜
第一個沒錯你確實已經看到這個UI上有幾個特別亮的地方,這些亮的地方是因為鋁的材質有圓形切割的關係,又受到光線的照射,所產生的折射
第二個有很多個圓形的切割線
好的知道上面的資訊之後,我們來做這個UI吧。

Step 1 開啟新檔以及設定前景顏色
開啟一個 1000 px X 1000 px檔案
點選前景顏色,修改顏色參數為”b4b4b4”
1.jpg  

Step 2 建立圓角矩形
建立一個正方形的圓角矩形,圓角的弧度設為120 px
2.jpg

圓角矩形
3.jpg

這個圖層必須做點陣圖形之後才能對他做進一步的編修,所以在這個圖層上按下右鍵/點陣圖形

4.jpg

5.jpg

Step 3 設定混和模式
在圖層上按下滑鼠右鍵,選混和模式
7.jpg

點選漸層覆蓋,並且對裡面的細節做一下設定
混和模式:覆蓋
不透明度:65%
樣式:角度

 8.jpg   

增加漸層顏色
我們一共需要9~11個指標顏色,排列的方式是黑、白、黑這樣一直排下去,你可以參考一下圖片的排法,問題是,顏色與顏色之間要等距嗎??答案是不用~!!你有看過光的折射是等距的嗎??

9.jpg

點選斜角和浮雕,並且對裡面的細節做一下設定
唯一需要做變動的是樣式改為內斜角,其他不用動10.jpg

Step 4 增加新圖層以及上色
按下新增圖層
11.jpg

確定前景顏色是否設為”b4b4b4”
按下填前景色的快速鍵 Alt+del12.jpg

Step 5 製作拉髮絲的效果
現在要開始做拉髮絲的效果了
濾鏡/雜訊/增加雜訊
13.jpg

這裡要注意的是,總量太多會失去重點,另外旋轉線條部份通常只有單一顏色,當然你也可以自己試試你喜歡的效果啦~!!數值大約介於7~10之間
14.jpg

 

幫增加近來的雜訊做旋轉效果
濾鏡/模糊/放射狀模糊
15.jpg

我們想要的是旋轉的效果沒錯吧??當然總量越多旋轉的圓圈圈就越多
16.jpg

Step 6 降低明暗度
按下快速鍵 Ctrl+M,叫出曲線調整整體的明暗度,這裡我們需要再調暗一點,這樣才看的到剛剛做好的拉髮絲

17.jpg

滑鼠移到之前做好的圓角矩形,先按下Ctrl再按下滑鼠左鍵,這樣可以載入這圖層的形狀18.jpg

增加遮色片
在圖層的下方按下增加遮色片
19.jpg

將正常改為覆蓋模式,你就會看掉亮晶晶拉髮絲的圖案了
20.jpg  
看一下效果,還不賴吧~!!
21.jpg  

 

Step 7 製作雲朵

我們可以用illustrator來處理這樣的圖形
小圓圈用1的比例,大圓我們用1.6的比例;算法是這樣,我預計想製做一個長度是696px,那麼寬便要處以1.6,會獲得435px這個值;於是我要畫一個696 X435這個矩形作為未來這4個圓的參考標準
當然所謂1的圓自然是用1.6的那個圓除以1.6倍換算來的,而較小1.6的圓就是用原先1.6的圓依比例縮小換算來的;最後會有一大塊空白的區域那麼我們就用長方形補上去就好了,若有人想看教學記得跟我說,下次我搞一個特集來作,事實上並不難,只是步驟上比較機車而已

黃金比例-UI.jpg

好了,我們把在illustrator做好的雲轉成JPG匯入Photoshop,去背之後,那麼接下來做一點加工吧
23.jpg

Step 8 線框混和選像編輯
斜角和浮雕編輯:(在圖層2)
在圖層上按右鍵選擇混和模式
點選斜角和浮雕,並且對裡面的細節做一下設定
樣式:浮雕
深度:150%;方向:”下”
尺寸:10
亮部模式/陰部模式的不透明要特別把陰部的不透明降低一點24.jpg

在圓角矩形1這個圖層按下右漸進入混和模式
24-1.jpg

點到漸層覆蓋的漸層後會跳出漸層編輯器25.jpg

在名稱上打上拉髮絲(我自己取的^^),按下新增之後預設集內會多出一個色票(這是剛剛新增的)26.jpg

Step 9 為線框套用漸層
現在回到剛剛置入雲的那一個圖層
(圖層2),按右漸進入混和模式
27.jpg

跟剛剛一樣,點選漸層覆蓋後,把漸層編輯器叫出來之後,點許剛剛新增的那個色票之後便可以按下確定28.jpg

最後一個步驟便是把樣式改為角度,這樣他的折色方向便都會一樣了28-1.jpg

Step 10 完成

最後,我們來看一下結果吧~!!^^
29.jpg
  

arrow
arrow

    Make Live 發表在 痞客邦 留言(0) 人氣()