【Via教你玩部落格】Adobe photoshop教學～圖片加上框邊及陰影效果

第二堂課上課囉～

這次要教大家的是

如何在圖片做些邊框及陰影的效果

一起來學習吧！

 

繼上次教授在圖片上壓上專屬的字樣後，
這次要教大家的是圖片邊框的製作～

怎麼樣才能快速又有效率的做好圖片的邊框呢？

這一堂課比起上一堂課，會教的更多些步聚
大家要耐心學習喲～

一起跟著via來上課囉！

軟體使用：Photoshop CS2

《Lesson 1-2. 圖片製作邊框及陰影》

STEP 01.

透過「檔案→開新檔案」開啟一個新的檔案

 
 

點擊後會出現彈跳視窗

 

Ａ：寬／高我們可以自行輸入（記得單位要選擇像素）
在本範例裡我們將設寬600像素／高400像素
使其成為一個橫向的長方型 （做直向的圖片就把寬設成400／高600）

Ｂ：解析度設計72即可，越高的解析度雖然能獲得越漂亮的畫面呈現
但檔案大小相對較大，所以在一般設72即可

特別注意在下圖有個色彩模式，請設定為RGB色彩
RGB通常為電腦看到的顏色，灰階會使圖片呈現灰色
而CMYK則為印刷用色彩

另外背景內容，依個人習慣設定，像via習慣會設為白色

 

以上都設定好後，按下「確定」，便新增了一張編輯的底圖

 

※這時再小小提醒一下，請注意左下角是否為100%，這才是實際的畫面大小喔


STEP 02.

在空白的底圖上，製作一長方形框，做為待會圖片要呈現的大小

首先，要新增一個圖形，還記得Photoshop圖層的概念嗎？
每一個圖層盡量獨立，新開圖層製作，才不會都做在同一層
記得要在「圖層」這個視窗內，按下右下角的小圖「建立新圖層」，
下圖中的圖層1，便是我們新建立的圖層

開立好新的圖層後，我們在工作列選擇矩形工具

附帶一提：在矩形工具列上，只要在按鍵上按下滑鼠右鍵
則各式的形狀都能在這裡做選擇，如果要楕圓工具，則在此選擇即可

選好我們的矩形工具後，在剛才開啟好的空白新檔上
記得請在選擇「圖層1」的狀況下，開始拖拉滑鼠
製作出你要的形狀大小，本範例如下圖：

 
 

灰色的那一塊，則為我們自行畫出的長方形大小
基本上，顏色會依你在工具列下方，上面那個顏色為主
所以看每個人選擇什麼樣的顏色就會不同
不過由於待會我們將覆蓋上圖片，所以在這個地方顏色不會造成我們的困擾
（不過不建議用白色，會變成方塊及背景融合）

※如果發現畫好了方框，
想移動它請務必在工具列先選好

移動工具，再做移動

STEP 03.

再來請開啟一張欲編輯的照片圖檔，使用「檔案→開啟舊檔」
在資料夾裡將照片開啟

 

並運用上一章所教過的，使用「影像→影像尺寸」將圖片縮小
這次的縮小，我們也是將寬設為600像素

 

這樣，畫面上就會有二個視窗
一個是欲加入框邊的圖片，另一個是之前做好的灰底圖片
這時將下圖Ａ滑鼠點擊後不放，拖拉至圖Ｂ
這樣剛才開啟被縮小的圖片，就可以順利拉到我們們欲做框邊的編輯視窗囉

 

STEP 04.

請選擇我們欲編輯的視窗（也就是上圖Ｂ的視窗），
請點選它後，再看到它的「圖層視窗」，
透過上步驟所教的拖拉圖片，此時在圖層視窗中，
欲編輯的圖片已經在圖層中的最上方
（如果不是在最上面，請拖拉該圖層至最上面）

再接下來，我們要使用的是圖層中的「遮色片功能」
請在照片的圖層上按下右鍵，會出現一彈跳視窗，請點選其中的「建立剪裁遮色片」

 

完成後，圖層會變成下圖的模樣

 

此時我們來看編輯視窗的圖片，也因為我們剛才設定剪裁遮罩功能
所以圖片會依我們之前所做的灰底大小，而剪裁圖片

 

透過此功能，相同的，不論你是做矩形、隋圓形或著圓角矩型各式不規則的形狀
都能先建立好圖形後，再拖拉照片進來，再使用剪裁遮色片功能
如下圖所示，所以大家可以嚐試著試作看看喲

 

※使用此剪裁遮色片的功能有個好處，
在處理下一張照片時，只要重覆將照片拖拉進編輯視窗
並在該圖層使用「建立剪裁遮色片」

 

一張一張的圖片，就可以堆疊製作，不用再另外做框邊的處理了
 

STEP 05.

當圖片都已經依照你要的大小做好剪裁後，還是會遇到有時圖片太大張的問題
這是我們可以透過「編輯→任意變形」這個功能
再把圖片縮小一點，來附合你要的大小

※請注意喔，圖片只建議縮小，不建議拉大，拉大會造成圖片模糊
如果真的太小張了，建議重開原始檔案再重調一次大小，千萬不要由小拉到大

 

當選擇任意變形時，該圖片就會出現如下圖的線及小方格
只要拉取小方格就可以任意變形

 

 
在這裡再講一個觀念，當你選擇任意變形時，
請注意畫面上方的工具列，其中有個鎖型的項目請務必點選
因為這樣你任意的拉大拉小才能是等比例的狀態～
之前via有說過，圖片是不是等比例是很重要的一件事喲！

 

做好前面的步驟後，我們終於要來製作圖片的框邊了～呵
前面步驟都是讓未來你製作圖片時更加方便，
所以大家不要偷懶，多重覆練習幾次喲
 

STEP 06.

在「圖層視窗」選擇之前做好的灰底圖層，
在此圖層上按下右鍵，選擇「混合選項」

 

混合選項是一個超強大的功能，能幫我們做出許多美美的效果
就待往後慢慢的介紹，我們這次就依我們會用到的功能來說明

打開混合選項後，會彈跳出圖層樣式的視窗

 

首先，我們要製作的是陰影，請在左邊選項中勾選陰影
且注意陰影是不是有反黑，有反黑的狀態才表示你在陰影此項中
如果沒有反黑，就代表你停留的不是陰影的選項內容

在影陰的項目內有許多項目可以選擇，
首先我會設不透明度，可以透過拖拉選擇影陰的強度
再來間距及尺寸，都可以隨個人喜好做調整

你可以依上圖via設定的值做做看，也可以自己變換數值看看
就知道其中的差別囉

按下確定鍵後，做出來的效果就如下圖

 
STEP 07.

設定完陰影，我們可以再設定框邊
一樣在灰底的圖層按下右鍵，選擇混合選項
（或著在圖層後方快速點擊二下也會跳出混合選項的視窗）

出現視窗後，這次我們勾選筆畫的項目
記得，要反黑才是選到該項目喔

 

　
Ａ：像素越大，邊框越大

Ｂ：位置可以選擇內部或外部，此範例我們選擇內部

Ｃ：顏色可以自動做更換，此範例我們採用白色

做出來的效果如下：

 

框邊也可以透過上圖的Ｃ，改成黑色的

　　或著，你也可以在原本灰底底下，再建立一新圖層（如下圖圖層4）

 

然後自行畫一個長方型，這樣也是另一種框底的呈現喔

 

STEP 08.

這樣一張張加了框邊的圖片，就完成囉！

記得，存成JPEG的圖檔時，請用上一章教過的『檔案→儲存成網頁用』
一張張圖片存儲完成

不過，我們辛辛苦苦做好的圖片邊框及陰影的檔案
也可以透過「檔案→儲存檔案」將它儲存成PSD檔
這樣下次要再幫圖片加上邊框時，
只要在photoshop開啟此檔，就可以再拖拉圖片，
並以本章中介紹的建立剪裁遮色片的功能，重覆一直製作下去囉

當然，上一章所教的圖片上壓字及LOGO的部份
也別忘了應用在此章節喔！

這樣的圖片邊框製作，就教到這裡囉！

比起第一堂課，這一堂教的會比較難一些些
但相信反覆做了幾次，熟練之後，你的PS功力會大增喔！

這些也都是via平常在做影像修圖時，
都會製作的動作呢！

就分享給大家囉！^____^

呼～這一章的教學檔可真的花了via不少的時間及心力

下一章，要教什麼咧？？呵～讓我保密一下囉^^
 

延伸閱讀

• 【Via教你玩部落格】photoshop教學～幫圖片壓上部落格LOGO