第二堂課上課囉~
這次要教大家的是
如何在圖片做些邊框及陰影的效果
一起來學習吧!
繼上次教授在圖片上壓上專屬的字樣後,
這次要教大家的是圖片邊框的製作~
怎麼樣才能快速又有效率的做好圖片的邊框呢?
這一堂課比起上一堂課,會教的更多些步聚
大家要耐心學習喲~
一起跟著via來上課囉!
軟體使用:Photoshop CS2
《Lesson 1-2. 圖片製作邊框及陰影》
STEP 01.
透過「檔案→開新檔案」開啟一個新的檔案
點擊後會出現彈跳視窗
A:寬/高我們可以自行輸入(記得單位要選擇像素)
在本範例裡我們將設寬600像素/高400像素
使其成為一個橫向的長方型 (做直向的圖片就把寬設成400/高600)
B:解析度設計72即可,越高的解析度雖然能獲得越漂亮的畫面呈現
但檔案大小相對較大,所以在一般設72即可
特別注意在下圖有個色彩模式,請設定為RGB色彩
RGB通常為電腦看到的顏色,灰階會使圖片呈現灰色
而CMYK則為印刷用色彩
另外背景內容,依個人習慣設定,像via習慣會設為白色
以上都設定好後,按下「確定」,便新增了一張編輯的底圖
※這時再小小提醒一下,請注意左下角是否為100%,這才是實際的畫面大小喔
STEP 02.
在空白的底圖上,製作一長方形框,做為待會圖片要呈現的大小
首先,要新增一個圖形,還記得Photoshop圖層的概念嗎?
每一個圖層盡量獨立,新開圖層製作,才不會都做在同一層
記得要在「圖層」這個視窗內,按下右下角的小圖「建立新圖層」,
下圖中的圖層1,便是我們新建立的圖層
開立好新的圖層後,我們在工作列選擇矩形工具
附帶一提:在矩形工具列上,只要在按鍵上按下滑鼠右鍵
則各式的形狀都能在這裡做選擇,如果要楕圓工具,則在此選擇即可
選好我們的矩形工具後,在剛才開啟好的空白新檔上
記得請在選擇「圖層1」的狀況下,開始拖拉滑鼠
製作出你要的形狀大小,本範例如下圖:
灰色的那一塊,則為我們自行畫出的長方形大小
基本上,顏色會依你在工具列下方,上面那個顏色為主
所以看每個人選擇什麼樣的顏色就會不同
不過由於待會我們將覆蓋上圖片,所以在這個地方顏色不會造成我們的困擾
(不過不建議用白色,會變成方塊及背景融合)
※如果發現畫好了方框,
想移動它請務必在工具列先選好移動工具,再做移動
STEP 03.
再來請開啟一張欲編輯的照片圖檔,使用「檔案→開啟舊檔」
在資料夾裡將照片開啟
並運用上一章所教過的,使用「影像→影像尺寸」將圖片縮小
這次的縮小,我們也是將寬設為600像素
這樣,畫面上就會有二個視窗
一個是欲加入框邊的圖片,另一個是之前做好的灰底圖片
這時將下圖A滑鼠點擊後不放,拖拉至圖B
這樣剛才開啟被縮小的圖片,就可以順利拉到我們們欲做框邊的編輯視窗囉
STEP 04.
請選擇我們欲編輯的視窗(也就是上圖B的視窗),
請點選它後,再看到它的「圖層視窗」,
透過上步驟所教的拖拉圖片,此時在圖層視窗中,
欲編輯的圖片已經在圖層中的最上方
(如果不是在最上面,請拖拉該圖層至最上面)
再接下來,我們要使用的是圖層中的「遮色片功能」
請在照片的圖層上按下右鍵,會出現一彈跳視窗,請點選其中的「建立剪裁遮色片」
完成後,圖層會變成下圖的模樣
此時我們來看編輯視窗的圖片,也因為我們剛才設定剪裁遮罩功能
所以圖片會依我們之前所做的灰底大小,而剪裁圖片
透過此功能,相同的,不論你是做矩形、隋圓形或著圓角矩型各式不規則的形狀
都能先建立好圖形後,再拖拉照片進來,再使用剪裁遮色片功能
如下圖所示,所以大家可以嚐試著試作看看喲
※使用此剪裁遮色片的功能有個好處,
在處理下一張照片時,只要重覆將照片拖拉進編輯視窗
並在該圖層使用「建立剪裁遮色片」
一張一張的圖片,就可以堆疊製作,不用再另外做框邊的處理了
STEP 05.
當圖片都已經依照你要的大小做好剪裁後,還是會遇到有時圖片太大張的問題
這是我們可以透過「編輯→任意變形」這個功能
再把圖片縮小一點,來附合你要的大小
※請注意喔,圖片只建議縮小,不建議拉大,拉大會造成圖片模糊
如果真的太小張了,建議重開原始檔案再重調一次大小,千萬不要由小拉到大
當選擇任意變形時,該圖片就會出現如下圖的線及小方格
只要拉取小方格就可以任意變形
在這裡再講一個觀念,當你選擇任意變形時,
請注意畫面上方的工具列,其中有個鎖型的項目請務必點選
因為這樣你任意的拉大拉小才能是等比例的狀態~
之前via有說過,圖片是不是等比例是很重要的一件事喲!
做好前面的步驟後,我們終於要來製作圖片的框邊了~呵
前面步驟都是讓未來你製作圖片時更加方便,
所以大家不要偷懶,多重覆練習幾次喲
STEP 06.
在「圖層視窗」選擇之前做好的灰底圖層,
在此圖層上按下右鍵,選擇「混合選項」
混合選項是一個超強大的功能,能幫我們做出許多美美的效果
就待往後慢慢的介紹,我們這次就依我們會用到的功能來說明
打開混合選項後,會彈跳出圖層樣式的視窗
首先,我們要製作的是陰影,請在左邊選項中勾選陰影
且注意陰影是不是有反黑,有反黑的狀態才表示你在陰影此項中
如果沒有反黑,就代表你停留的不是陰影的選項內容
在影陰的項目內有許多項目可以選擇,
首先我會設不透明度,可以透過拖拉選擇影陰的強度
再來間距及尺寸,都可以隨個人喜好做調整
你可以依上圖via設定的值做做看,也可以自己變換數值看看
就知道其中的差別囉
按下確定鍵後,做出來的效果就如下圖
STEP 07.
設定完陰影,我們可以再設定框邊
一樣在灰底的圖層按下右鍵,選擇混合選項
(或著在圖層後方快速點擊二下也會跳出混合選項的視窗)
出現視窗後,這次我們勾選筆畫的項目
記得,要反黑才是選到該項目喔
A:像素越大,邊框越大
B:位置可以選擇內部或外部,此範例我們選擇內部
C:顏色可以自動做更換,此範例我們採用白色
做出來的效果如下:
框邊也可以透過上圖的C,改成黑色的
或著,你也可以在原本灰底底下,再建立一新圖層(如下圖圖層4)
然後自行畫一個長方型,這樣也是另一種框底的呈現喔
STEP 08.
這樣一張張加了框邊的圖片,就完成囉!
記得,存成JPEG的圖檔時,請用上一章教過的『檔案→儲存成網頁用』
一張張圖片存儲完成
不過,我們辛辛苦苦做好的圖片邊框及陰影的檔案
也可以透過「檔案→儲存檔案」將它儲存成PSD檔
這樣下次要再幫圖片加上邊框時,
只要在photoshop開啟此檔,就可以再拖拉圖片,
並以本章中介紹的建立剪裁遮色片的功能,重覆一直製作下去囉
當然,上一章所教的圖片上壓字及LOGO的部份
也別忘了應用在此章節喔!
這樣的圖片邊框製作,就教到這裡囉!
比起第一堂課,這一堂教的會比較難一些些
但相信反覆做了幾次,熟練之後,你的PS功力會大增喔!
這些也都是via平常在做影像修圖時,
都會製作的動作呢!
就分享給大家囉!^____^
呼~這一章的教學檔可真的花了via不少的時間及心力
下一章,要教什麼咧??呵~讓我保密一下囉^^
我也是南投人~~~
你的部落格格做的很不錯喔~~
我幾乎每天都有看~~
做的很好也~~
哈囉小呂:謝謝你~^^ 又多了一個同鄉喲~~
歡迎你有空常留言和via分享你的旅行心得或想法喲!!^__^
感謝via~~
受益良多^^
哈囉mimi:不用客氣喲~~^^ 加油加油 希望對大家有幫助喔
哇~受益良多
謝謝阿毛~
哈囉~~~~~~~~pink~~~~~~~~~~~~~~是妳是妳耶~~~~~~~~~~~~
PS.誰叫你叫我什麼…什麼什麼的…哈哈!!
能讓P姊有收獲,很開心喲~~(攦紙花~)有空多來留言嘿….嘿嘿
呼~~等了好久終於等到第二部了!!!
謝謝via囉!!!
哈囉 蛋蛋:嗯,第二篇講了比較多步驟及觀念,要用點耐心下去學習喲^^
在製作的過程也才發現到,photoshop有許多觀念必須釐清才好製作
所以邊做會覺得 要分享給大家的東西好多呢..^^ 希望你們能真的吸收喔~呵 謝謝蛋蛋的支持
Via你好,想請問你有什麼軟體可以一次壓縮大量圖片上傳到網路的
因為拍了一堆照片可是檔案都很大又不想又小畫家一張一張用,所以想請教你有什麼撇步,感謝!!><\"
你好…^^ 已經回覆囉~~~
Via,想請問你有沒有好用的大量壓縮圖片容量的軟體呢?因為想上傳到網路,但又不想一張一張用小畫家壓縮,所以想請教你,謝謝><
哈囉 忠實觀眾你好喲~~^^ 嗯,關於這個問題
photoshop有自行批次轉檔的功能,可以一次批次轉檔將圖片縮小
方便網路上傳…不過方式可能要上網搜尋一下,
嗯,有機會via再分享個教學文,解決大家這個煩惱>"<
Via~~我是因為你的照片而吸引過來的~~
我想要請教你~~你的相機是哪種的!我現在也很努力在學攝影這門~~我好喜歡好喜歡你所拍出來的每一張照片唷!!
哈囉~N:via的相機是NIKON D40x 鏡頭16-85mm
謝謝你喜歡via拍的照片..^____^
via在攝影這門藝術也還在自我學習中~~我們一起一起加油喔!!!^____^
哈囉,真得很感謝妳發表的文章
會發現妳的這個部落格是因為妳攝影的技巧實在太好了,一張張美美的圖片很吸引人呢
就因為這樣,很想好好學習妳,看到妳這兩篇的教學,我照做了一次,真得很有效果!!!好不容易找到這麼優質,這麼清楚明白的教學文,我很開心,也很感動,我十二萬分的感謝妳~~
Jessie:謝謝你的留言,很開心真的有人一步一步的跟著作…
讓分享文章的我,有很大的感動呢~呵
也很開心能讓你清楚的學習到怎麼製作…….
本來很想再多分享幾篇,但後來一直都很忙
希望有時間,我會再分享新的教學文~屆時還要再來學喲!^^
請問,你知道要怎嚜在照片上加上小框框嗎?
不是邊框喔
就是一般用來放字的背景,在照片裡淡淡的邊框。
就是上述教的過程中,使用「混合選項」裡的「筆畫」功能
可以挑淡一點的灰色即可呈現^^
via:
很喜歡妳的格子,請問一下如果是新手上路該怎麼開始自己的部落格?以後可以發文教學嗎?(要淺顯易懂的)拜託啦,,,,,,,,,,,,
感恩妳!!
哈囉,yy~呵,其實網路上應該有不少人有分享…可以搜尋看看
我也很想來多發一些這類的教學文,但其實是很耗工、耗時的
再加上最近好多的遊記等待我分享,所以就比較少時間來處理這一些
建議市面上也有賣相關書藉喔,你可以去參考看看!^^
請問您教的這個加框的設計,可以用批次處理其他一大堆的照片嗎?要怎麼使用呢?
感謝分享..
請問製作好邊框跟陰影後要如何放上網誌上邊框跟陰影還存在?我弄好存JPG上傳部落格 確還是沒有陰影跟邊框><