Create a Mobile App Icon in Photoshop

posted on 02 May 2012 12:33 by cgshelf in PSD directory Cartoon, Tech, Knowledge
สวัสดีครับ กลับมาอีกครั้งกับบทความเเปลtutorialของเราครับผม วันนี้เราจะมาดูการใช้brush paintเเสงเงาในการสร้างไอค่อนกันครับผม
 
 
 
อนึ่ง บทความนี้เเปลมาจากเว็บpsdtut+ ขอขอบคุณเจ้าของบทความไว้ ณ ที่นี้
 
 
 
Tutorial Assets


สิ่งที่ต้องใช้เพิ่มเติม    Wood Texture


Step 1
สร้างdocument ใหม่ เราจะใช้ขนาดของflieเป็น1024x1024 pixelสำหรับtutorialนี้ครับ  เเต่หลังจากเสร็จเเล้วก็สามารถลดขนาดลงเป็น256x256 หรือ512x512ได้เลย


Step 2
ใช้Rounded Rectangle Tool (U) ทำรูปทรงสี่เหลี่ยมขึ้นมา เทสีเเดงใส่  ในที่นี้ผมใช้Eyedropper Tool(I)

 
 
Step 3
ใช้Brush Tool(B) ลงสีเเดงสดเพื่อสร้างจุดที่เเสงจกกระทบลงบนส่วนบนขวาของiconของเรา

 
 
Step 4
เพิ่มเงาดำด้วยBrush toolอีกที เงาดำจะอยู่ด้านล่างดังรูปครับ

Step 5
เพิ่มรูปทรงเเบบนี้ลงไปในด้านบนของรูป โดยใส่Layer styleตามเข้าไปดังนี้
 

Step 6
จากนั้นDuplicateเเละปรับรูปร่างของรูปทรงที่เราเพิ่งทำมาด้วย Cmd/Ctrk + T ในเลเยอร์ใหม่นี้ setเป็นclipping mask (Alt-Clickตรงเส้นช่องที่้เเบ่งเลเยอร์ในlayer palette )
เสร็จเเล้วเพนท์สีเเดงสร้างเเสงตกกระทบด้วยบรัชครับ  

Step 7
ลงสีเพื่อเพิ่มเเสงเงาลงไปอีกทีด้านบนด้วยBrush toolดังภาพ


Step 8
ทีนี้เรามาปรับเเต่งเส้นขอบของไอค่อนอีกที ดังรูป

Step 9
สร้างlayerใหม่ ใช้Rectangular selection tool (M) สร้างเส้นเล็กๆสองเส้นด้วยBlend mode Overlay


Step 10
สร้างRectangular selectionขี้นมา Fillด้วยGradient tool(G) setค่าจากสีขาวสู่ใส ดังภาพ ปรับขนาดภาพด้วยCmd/Ctrl +T

Step 11
สร้างเลเยอร์ใหม่ ใช้Rectangular Selection(M) สร้างเส้นบางๆขึ้นอีกครั้ง ทีนี้Fillด้วยสีดำ ปรับขนาดเช่นเดียวกับขั้นตอนที่เเล้ว จากนั้นเอาไปไว้ตรงกลาง ดังภาพ

Step 12
จากนั้นสร้างเลเยอร์ใหม่ เพนท์เงาด้วยbrush tool(B)

Step 13
เพิ่มเติมhighligtsให้เส้นในไอค่อนของเรา ทำเหมือนstep11อีกครั้ง


Step 14
เพนท์เก็บรายละเอียดอีกทีด้วยBrush Tool(B) ที่เส้นขอบเเละตรงกลางของไอค่อน

Step 15
จากนั้นเราเพิ่มเติมtextureให้ไอค่อนของเราด้วย filter Noise > Add Noise จากนั้นเซ็ทค่าblending modeเป็นSoft light ปรับขนาดให้เข้าที่เหมือนเดิมด้วยCmd/Ctrl + T


Step 16
ใช้Rectangular Shape Tool สร้างเครื่องหมายบวก ปรับค่าlayer styleดังภาพ
 


 
 
 
 
Step 17
จากนั้นduplicateเครื่องหมายบวกของเรา เเละshiftลงมาด้านล่างเล็กน้อยด้วยMove Tool(V) เซ็ทค่าLayer ดังรูป

 
 
Step 18
จากนั้นสร้างreflectionsด้วยPen Tool(P) สร้างรูปทรงขี้นมาด้วยสีดำในLow layer's opacity


Step 19
จากนั้น เติมความเด่นในขอบของไอค่อนด้วยการเพิ่มเส้นสีขาวด้วย Pencil Toolเข้าไป


Step 20
เสร็จเเล้วใช้Magic Wand เพิ่มปากกาสีดำลงไป เซ็ทค่าlayer styleตามภาพ

 
 
 
Step 21
เพิ่มสีขาวที่ด้านบนของปากกา ด้วยค่าlayer stlyeตามนี้

 
Step 22
จากนั้นทำขอบบนของปากกาให้เรียบร้อย เซ็ทค่าlayerตามนี้

 
Step 23
ตรงหัวภู่กันนี้ เริ่มเเรกออกเเบบรูปทรงด้วย Pen Tool (P) ใช้Layer style


 
 
 
Step 24
ใช้Brush tool (B)เพ้นท์สร้างเเสรงเงาให้หัวเเปรงด้วย บรัชหัวกลมเล็ก ลองเปลี่ยนสีบรัชดู เเละลองใช้ลูกเล่นจากBrush panelดูได้โดยการกดF5


Step 25
สร้างเลเยอร์ใหม่ ลงเงาบริเวณด้านล่างเเละลงสีเหลืองที่ด้านบนของiconด้วย brush tool

Step 26
สร้างทรงกรวยด้วย Pen Tool (P) กำหนดเลเยอร์สไตล์ดังภาพ
 

 
Step 27
ใส่Textureไม้ลงไปในรูปทรงที่เราสร้างมาขั้นตอนที่เเล้ว ด้วยClipping maskในOverlay mode


Step 28
ในส่วนที่เป็นเหล็ก สร้างรูปทรงขึ้นมาอีกที ด้วยเลเยอร์สไตล์ตามภาพ เก็บเงาโดยการสร้างเลเยอร์ใหม่เเละเพนท์สีดำลงไป


 
 
Step 29
สร้างเลเยอร์ใหม่ เเละเพนท์ควันด้วยBrush tool ด้วยสีม่วงเเละสีเหลือง

 
 
Step 30
สร้างรูปดาวด้วย custom shape tool จากนั้นปรับเลเยอร์สไตล์ดังรูป


 
 
Step 31
จากนั้นDuplicateดาวที่สร้างขึ้นมา เเละใช้สีเหลืองหม่นๆเพนท์ลงไป จากนั้นปรับค่าlayerให้เหมือนในขั้นตอนที่30


Step 32
ก่อนจะปิดจ๊อบ เพนท์เก็บรายละเอียดของเเสงในเลเยอร์ใหม่ด้วยBrush tool เพิ่มเติมรายละเอียดเล็กๆน้อยๆลงไป


Step 33
ใส่เเสงด้วยสีฟ้าลงไประหว่างวัตถุด้วยBrush toolในเลเยอร์ใหม่เป็นขั้นตอนสุดท้าย


Step 34
จากนั้นสร้างเลเยอร์ใหม่ setค่าdrop shadow สร้างbackgroundสีส้ม

 
 
เสร็จเเล้ว!!
 
 
 
 
สิ่งที่ผมคิดว่าได้เยอะจากtutorial ตัวนี้ก็คือ การเพนท์เเสงเเละเงาครับ จะเห็นว่าจะไม่มีเงาเเสงที่จะตกกระทบชั้นเดี่ยวเลย ต้องมีการเก็บเเสงเเละเงาหลายๆขั้นตอน เพราะเเสงจากเเต่ละวัตถุจะตกกระทบซึ่งกันเเละกัน เเละการที่จะเก็บรายละเอียดทั้งหมดให้ได้นั้น ก็ต้องใช้เวลาพอสมควรเลยทีเดียวครับ 
 
 
หวังว่าท่านผู้อ่านจะได้ไอเดียไม่มากก็น้อยนะครับ
 
 
 
 
 
 
 
 
 
 
 
 
 
อนึ่ง ขอโปรโมตกิจกรรมของทาง CGshelf เราเองด้วยนะครับ กิจกรรม CGshelf Contest Header
 

เป็นกิจกรรมconcept artครับผม ขณะนี้มีผู้ส่งงานเข้ามาร่วมสนุกบ้างเเล้ว อย่าช้านะครับ

เดือนเเรกนี้ เริ่มตั้งเเต่วันนี้เลยครับ โดยกิจกรรมจะสิ้นสุดวันที่ 31/05/12 เเละจะประกาศผลในวันที่1/06/12ครับ

Concept artประจำเดือนเเรกนี้ก็คือ  "ชั้นวางของ(Shelf)" ครับ
 
ทางเรามีเงินรางวัลให้ด้วยนะครับ สนใจติดตามรายละเอียดได้ที่นี่เลย
 
 
 
ขอบคุณครับ
 
CGshelf team.
 
 

Comment

Comment:

Tweet

Hot! Hot! Hot! Hot! Hot!

เจ๋งสุดๆค่ะ ทางนี้ใช้ PS ไม่เป็น 55

#5 By シロ on 2012-05-04 15:20

Hot! Hot! Hot!

เก่งมากเลยค่ะ

#4 By อา โอ ตั๊น on 2012-05-03 13:31

ฮาวทูน่าสนใจดีค่ะ

ละเอียดดีด้วย Hot! Hot!

#3 By luluke on 2012-05-02 21:38

น่าลองเอาไปใช้ดูครับHot! Hot! big smile

#2 By i-tose on 2012-05-02 18:38

Hot! Hot! Hot!

#1 By Нинџа ♥ on 2012-05-02 17:12