2013年1月30日 星期三

聯成電腦PhotoShop教學:台灣棒球,加油! photoshop縫線布標技法

文章轉載自http://lccnetvip.pixnet.net/blog/post/30265980

忠孝分校 姜佑駪 老師 
ball27.jpg棒球一直是令我們驕傲的國球,也是最貼近大眾的庶民運動,近幾年的打假球、簽賭風波,傷了許多球迷的心,大眾對棒球的熱愛也在這一次次的傷害中,漸漸冷卻。我希望這一次次的傷害能夠為台灣的棒球帶來更透明、更健康的成長,讓這些教訓轉化為讓棒球生生不息的動力,希望有一天所有的優秀球員都能把留在故鄉打乾乾淨淨的棒球,當成莫大的驕傲!
基於這個題材,我想跟大家分享一個Photoshop的技法,透過建立筆刷、運用圖層樣式的效果,做出一個簡單又擬真的布標,有興趣的同學可以照樣去做一個車縫在衣服上,哈哈!或是你可以發揮想像力,看看這個技法還可以用在甚麼地方?


Step-1. 首先,請大家在Photoshop建立一個寬1024,高768像素,解析度為72像素/英吋,白色為底的RGB新文件,並在圖層面板中新增一個空白圖層,取名為(丹寧布),接著執行編輯\填滿的指令,在對話視窗中的內容-使用列表中,選擇以(圖樣)填滿,並按下方的圖樣例圖旁的箭頭,在彈出的選單右上角小箭頭上再按一下,選擇(圖樣2)的集合,接著在確認的對話視窗中選擇(加入),如此就可以把圖樣2加入而不會覆蓋原先的圖樣,在新加入的圖樣2集合中選擇(丁尼布)這個圖樣,(奇怪的名詞,台灣都稱這是丹寧布啊?),混和模式維持正常,不透明度100%,按確定後這個新圖層就會被丹寧布的布紋質感所填滿。

ball02.jpg
ball03.jpg
Step-2. 我們不需要將整個版面都填滿布紋,所以接著要製作布標兩端有線頭抽絲的效果,選用矩形選取工具,邊緣的羽化值設為0,在這文件上選取一個適合布標大小的選取區域,然後選按色版面板下方的(製作新色版),將剛才的選取範圍轉成色版,取消選取並取名為(布標),接著要為布標色版加上一些濾鏡的效果。
   ball04.jpg
Step-3.保持位在這個新色版,到濾鏡\濾鏡收藏館中,在素描項目中選取(蠟筆紋理),設定值可參考附圖。色版的兩側就會變成不規則的質感,繼續執行濾鏡\風格化\風動效果,設定值為方法-輕微,方向-從左方,接著再執行一次,這一次將方向改為從右方,如此布標色版的兩側就有了初步的線頭抽絲效果了。
  
ball05.jpg

ball06.jpg
Step-4.接著按著CTRL鍵不放,游標點一下布標色版的縮圖,就會啟動這色版的選取範圍,接著切換回圖層面板的丹寧布圖層,選按面板下的增加圖層遮色片圖示,就會啟動遮色效果囉。
  
ball07.jpg
Step-5.在丹寧布圖層的上方再新增一個名為(抽絲)的空白圖層,接著按住ALT鍵不放,將丹寧布的遮色片縮圖拖移到抽絲圖層上,就會很快速的完成遮色片的複製動作,然後按住CTRL鍵不放,游標再點一下抽絲圖層的遮色片縮圖,就會再啟動抽絲圖層的選取狀態,接著你可以按下CTRL+H的快速鍵來隱藏選取範圍,切換工具為筆刷工具,將筆刷的尺寸設為適當大小,填色設為白色,筆刷的透明度可以調整為50%,小心地在抽絲圖層將抽絲的地方塗抹成白色線頭的感覺,不需畫得太筆直才會有自然的感覺,完成後即可取消選取。接著到色版面板中改用黑筆刷修飾抽絲的遮色片色版,將太長的抽絲效果塗抹掉形成線頭較整齊的感覺,接著你可以再切換到丹寧布圖層,啟動圖層面板下方的fx圖層樣式,為丹寧布加一些陰影的效果,設定可參考附圖。丹寧布以及抽絲的效果到此就大功告成了,接下來,我們要來用筆刷建立縫線效果!
  
ball08.jpg

ball09.jpg
Step-6.另外新增一個寬高皆為50像素,解析度為72像素/英吋的白色新文件,將筆刷工具設為9像素粗細,硬度100%,填色為黑色,按照例圖塗抹來當作縫線的效果,如果你想要做出交叉的縫線?只要畫出個X就可以啦,如果想要單純的一字縫線,則畫個一字就可以啦!非常簡單,接著執行編輯\定義筆刷預設集,並取好筆刷的名稱即加入筆刷資料庫,如此就完成了自製的縫線筆刷。接下來就可以來製作逼真的縫線效果囉!
ball10.jpg
 Step-7.接著開啟視窗\筆刷面板,先做好筆刷的設定,可參考附圖的設定值,你會發現剛才製作的縫線筆刷,可以在筆刷面板中設定成連續的效果,看起來就像是一段連續的縫線。
 ball11.jpgball12.jpg
Step-8.接下來在圖層面板的最上方新增一個叫(縫線1)的圖層,先來製作這個布標最外側的縫線,選用圓角矩形工具,在工具屬性列上選擇繪製(路徑)的模式,圓角半徑可設為15~20像素,在布標的邊緣上畫出一個圓角矩形的路徑線條,如不理想可復原重畫,接著切換面板到路徑面板,(如果發現右側面板區中沒有出現路徑面板,請到視窗功能列中的選單內勾選即會出現)點選面版右上側的選單按鈕中的(儲存路徑),將剛才畫的路徑存起來以便稍後的使用。
ball13.jpg
 Step-9.保持在(縫線1)這個圖層上,將工具箱中的前景色設為白色,並點選路徑面板中已儲存的這個路徑,在面版右上側的選單按鈕中選擇(筆畫路徑)這個指令,剛才所指定的路徑就會依筆刷面板的設定,完成縫線的效果!接著按CTRL+H,可以使路徑隱藏顯示。

ball14.jpg
Step-10.接著再製作一個文字的縫線效果,換用文字工具,輸入(台灣棒球),設定好字體、大小及顏色後(設定可參照附圖),會產生一個文字圖層,在調整好文字的位置及比例後,按住CTRL鍵不放,用滑鼠左鍵點一下圖層面版中文字圖層的縮圖就會啟動文字的選取範圍,接著切換到路徑面板,點選面版右上側的選單按鈕中的(製作工作路徑),在對話視窗中設定容許度為2.0像素,選取範圍就會轉變為工作路徑,接著別忘了將這個工作路徑再做一次(儲存路徑)的處理,使它成為正式的路徑!你就可以再新增一個(文字縫線)圖層,先依Step-7步驟調小筆刷的設定(筆刷直徑改為8px),再仿照Step-9的做法,環繞著文字周圍的縫線效果就成功了!
ball15.jpg


ball16.jpg
 Step-11.再依照Step-8到Step-9的做法,再分別建立2個(加油)、(分隔線)的新圖層,(請參照附圖的畫法)在這2個圖層我們用工具箱中的筆型工具,模擬電繡的一筆畫方式,以畫貝茲線的方式分別產生(加油!!)的字樣以及分割畫面用的線條,再把他們也轉變成縫線效果!
ball17.jpg
ball18.jpg

ball19.jpg
Step-12.所有的縫線圖層都建立後,再按住ALT鍵不放,將丹寧布的遮色片縮圖拖移到(分隔線)圖層上,快速的完成遮色片的複製動作,我們再利用路徑,為丹寧布加上一些顏色的變化,先點選抽絲圖層,然後按住圖層面板下方的(新增填色或調整圖層)功能按鈕不放,並在選單中選擇(色相/飽和度)功能,就會在抽絲圖層上方建立一個色相/飽和度的調整圖層,你可以在調整面板中設定顏色的變換(設定值請參照附圖),接著要利用調整圖層附有的空白遮色片,做出丹寧布局部顏色變換的效果,按住ALT鍵不放,將丹寧布的遮色片縮圖再次拖移到調整圖層的遮色片縮圖上,完成遮色片的取代,切換到路徑面板,按住CTRL鍵不放並點一下(分隔線)路徑的縮圖,再次啟動分隔線的選取範圍,再點選調整圖層的遮色片,執行編輯\填滿的指令,在對話視窗中的內容-使用列表中,選擇以(黑色100%)填滿,遮色片就會因局部塗黑而發揮遮色的效果,丹寧布就會出現雙色的效果,接著再啟動(台灣棒球)文字圖層的選取範圍,在遮色片中再追加文字部分的遮色效果,同時可將文字的圖層透明度降低一些,使文字部分的丹寧布顏色有另外的深藍色變化!
ball20.jpg
ball21.jpg
ball22.jpg
Step-13.最後,再到丹寧布的圖層雙響圖層名稱後方的fx圖層樣式標誌,再次啟動丹寧布的圖層樣式設定視窗,追加(緞面)效果(設定可參照附圖),布料就會有更自然擬真的顏色深淺變化!接著再為所有的縫線圖層追加fx圖層樣式中的(陰影、斜角和浮雕)這2種效果(設定請參照附圖),透過在圖層名稱上按右鍵選擇(拷貝圖層樣式),再到其他縫線圖層名稱上按右鍵選擇(貼上圖層樣式)這種方法,你只要完成一個圖層的fx樣式設定,就可以同時套用在其他的圖層,快速準確又方便!
ball23.jpg
ball24.jpg
ball25.jpg
Step-14.最後利用在網路上搜尋到的一些圖片,稍做處理後,去背置入成新的圖層,與我們的縫線布標做一個編排結合,單純的影像處理就有一些設計的巧思囉!
ball26.jpg
ball27.jpg

貼心小提醒:同學們對在網路上搜尋到的圖片使用要小心,私下做為練習尚無傷大雅,但千萬不可在未經圖片原主同意下做商業運用或公開展示,並且至少要稍作方向、顏色、比例上的修改,才可規避直接侵犯肖像權及著作權的爭議!

30 則留言:

  1. 很實用的分享唷!!有時被photoshop搞的一團亂都不知怎下手~~有了這篇可以來試看看囉!!

    回覆刪除
  2. photoshop真的是一套非常實用的軟體,你的教學寫得非常詳細~讓我這初學者~簡單上手~~感謝阿

    回覆刪除
  3. 姜老師的教學耶!
    沒想到老師也有在分享photoshop的教學文!
    讓我又多學了一招photoshop製作banner的方式。

    回覆刪除
    回覆
    1. 對你有幫助老師聽到一定很開心~希望常來參觀喔~

      刪除
  4. PHOTO SHOP讚阿!!
    老師的教學也是很詳盡
    讓學生都能盡全力學習到更多的東西
    太棒了。

    回覆刪除
  5. 超棒的photoshop教學
    沒想到可以在網路上看到這樣的教學資料
    感謝老師的分享

    回覆刪除
  6. 好有質感...

    沒想到有這麼實用的photoshop教學

    來試做籃球的好了= =。

    回覆刪除
  7. 沒想到photoshop可以做出這麼有質感的成品!
    而且只要這些步驟,就能完成!很棒的教學文!

    回覆刪除
    回覆
    1. 恩~~也歡迎你的分享作品到論壇喔~
      http://expert.lccnet.com.tw/zone/index.php

      刪除
  8. 這是傳說中的photoshop軟體嗎?!真的很強大耶~話說現在設計的海報有那些東西是真的啊,真的都看不出來了。好期待有更多的教學文~

    回覆刪除
    回覆
    1. 恩~~歡迎多來參觀~
      聯成部落格上很多教學分享喔
      http://lccnetvip.pixnet.net/blog/category/1462041

      刪除
  9. 我只能說這真是太神奇了~PHOTOSHOP~幾乎什們都可以做出來~給老師一個讚~

    回覆刪除
    回覆
    1. 小編也給老師大大的讚~~謝謝你的支持喔~

      刪除
  10. 正在找photoshop的教學資料,剛好看到這篇!!感覺實用性還滿大的趕快來試看看囉!!感謝分享!!

    回覆刪除
  11. 這篇photoshop教學真是讓我受益良多.真是太神奇了.這軟體超級厲害耶

    回覆刪除
    回覆
    1. 對大家有收穫~我想分享者一定很高興~感謝支持~

      刪除
  12. 好厲害的技巧
    實在太棒了
    感謝您的分享喔

    回覆刪除
  13. 有了這篇photoshop教學,

    我能做出很多相關的作品,

    例如..最近要上演的天后之戰~~~~~

    哈哈!

    回覆刪除
    回覆
    1. 期待你的分享喔~有空可以PO上論壇~
      http://expert.lccnet.com.tw/zone/index.php

      刪除
  14. photoshop的應用~真的好實用喔~`太讚的技巧了

    回覆刪除
  15. 剛好搭上這股棒球熱~全台瘋棒球

    我來試試看老師的教學 等等再來開發其他的效果

    回覆刪除