2006/Oct/14

สวัสดีครับ หลังจากที่งมโข่งแก้ Theme มาตั้งนาน คราวนี้ก็ขอประเดิม New Entry ใหม่เลยละกัน ^^" ซึ่ง Blog ของเรา ที่ตั้งใจจะนำเสนอนั้น จะว่าด้วยเทคนิคเล็กๆน้อยๆ เกี่ยวกับการสร้างภาพ เพื่อตบตาคนอื่น (อ้ะไม่ใช่...) ด้วยโปรแกรมที่คุ้นเคยกันดีคือ Adobe Photoshop & Imageready นะครับ

** แรกเริ่มเลยก็อยากจะบอกว่า บางท่านอาจจะทราบแล้วเกี่ยวกับเทคนิคเล็กๆน้อยๆพวกนี้นะครับ ถ้าท่านใด ต้องการนำไปใช้ก็ไม่ได้ห้ามนะครับ ไม่เข้าใจ สงสัยอะไร ที่ไหน อย่างไร มีข้อผิดพลาดหรือติ-ชม ก็ Comments มาได้นะครับ ^^ **

>> ว่าด้วยการ Stroke & Gradient Overlay ใน Blending Options

การ Stroke นะครับ ก็คือการเพิ่มความหนาเป็นขอบออกมา สามารถใช้ได้ทั้งรูปภาพ Text รวมทั้ง Shape ด้วย ในวิธีทำจะเป็นการทำ Stroke ของ Text นะครับ แต่ถ้าจะใช้กับรูปภาพ หรือ Shape ก็ทำเหมือนกันครับ ไม่ยากเลย เริ่มเลยละกันนะ..

1. เข้า Photoshop ก่อนนะครับ (ของเราใช้ CS2 นะ) แล้วสร้างหน้ากระดาษเปล่าโดยคลิกที่ File > New (หรือ Ctrl+N) แล้วเลือกขนาดตามต้องการนะครับ (ในที่นี้เราใช้ 200x150 px.) เลือกแล้วกด OK เลย

2. จะได้หน้ากระดาษเปล่าๆ มา 1 หน้าครับ

3. ทำการสร้าง Text โดยการคลิกรูปตัว T ที่แถบ Tools ด้านซ้ายมือ > คลิกที่ตัว T > คลิกที่หน้ากระดาษค้างแล้วลากให้เป็นกรอบสี่เหลี่ยม แล้วปล่อย > พิมพ์ Text ที่ต้องการ โดยเลือก Fonts ขนาด และสี ได้ที่แถบด้านบนครับ

4. ดูที่แถบ Layers ด้านล่างขวามือนะครับ คลิกเครื่องหมายแรก (Add a layer style) เลย ที่เป็นรูป Flash น่ะครับ

5. แล้วเลือก Blending Options ซึ่งในส่วนนี้มีลูกเล่นมากมายเลยนะครับ แต่ขออธิบายเพียงแค่ Stroke กับ Gradient Overlay ละกันนะครับ เพราะว่าจำเป็นในการทำ Artworks งามๆ ครับ

6. จะเห็น Blending Options นะครับ ให้คลิกที่ Stroke นะครับ จะมีลูกเล่นมากมายเหมือนเคย จะอธิบายเป็นอย่างๆนะครับ..

>> ในแถบ Structure

  • Size - เป็นขนาดของ Stroke นะครับ ว่าจะให้ใหญ่มากน้อยเพียงใด
  • Position - เป็นตำแหน่งของ Stroke ครับ ว่าจะให้ Stroke ตรงไหน
  • Blend Mode - เป็นลักษณะการ Stroke ครับ
  • Opacity - เป็นค่าความโปร่งใสครับ
  • Fill Type - เป็นการตั้งค่า Stroke นะครับ โดยจะมี 3 ค่าคือ
    • Color - จะเป็นการ Stroke โดยแบบใช้สีธรรมดา คลิกเลือกสีที่ต้องการตรง Color ได้เลย
    • Gradient - Stroke แบบ Gradient ครับ เมื่อเลือก Stroke แบบ Gradient แล้วจะมี Options เพิ่มขึ้นมาครับ คำอธิบายอยู่บรรทัดต่อไป..
      • Gradient - เป็นการเลือกลักษณะของสีที่จะ Gradient ครับ
        อย่างเช่น Foreground to background - จะเป็นการ Gradient ตั้งแต่ Foreground ไปยัง background , Foreground to transparent - เป็นการ Gradient ตั้งแต่ Foreground ไปยังโปร่งใส เป็นต้นครับ
        ** คลิกถูกที่ Reverse เพื่อสลับสีการ Gradient ครับ **
        Style - เป็น Style การ Gradient ครับ
        Angle - ปรับองศาของการ Gradient ครับ จะว่าไปก็คือทิศทางการ Gradient แหละครับ
        Scale - คือการเซตค่าระหว่าง 2 สีที่จะนำมา Gradient ครับ ยิ่ง Scale น้อย Gradient จะออกมาไม่กลมกลืนกันระหว่าง 2 สีครับ มันจะดูเป็นการแบ่ง 2 สีออกจากกันเลย ไม่เชื่อลองทำดูสิ - -*
    • Pattern - Stroke แบบ ใช้ Pattern ที่มีมาให้ครับ

ชอบใจแบบไหนก็เลือกได้ตามสบายนะครับ เสร็จแล้วกด Ok เลยครับ (ในรูปเราใช้ Stroke-Outside , Fill Type-Color นะ)
** แนะนำนะครับ - พยายามใช้สีที่เป็นโทนเดียวกันนะครับ แต่ต่างระดับความเข้ม Text ที่ออกมาจะสวยครับ **

7. เสร็จแล้วครับ เป็นไงครับไม่ยากเลยเนอะ ^^* ถ้าชอบก็กด Save As แล้วเลือกรูปแบบ File ที่ต้องการเซฟครับผม
** แนะนำนะครับ - ถ้าเกิดว่าต้องการนำรูปไปลงในเว็บด้วย ให้เซฟแบบ Save For Web นะครับ โดยที่รูปแบบไฟล์จะเป็นแบบ .gif มีขนาดไฟล์น้อย แต่รูปภาพยังคงเหมือนเดิม ประหยัดขึ้นอีกนิดนึง - -

แต่ยังไม่พอครับ !!! เรายังมีเทคนิคที่จะนำเสนออีกอันนึงก็คือ Gradient Overlay ครับ โดย Gradient จะเป็นการไล่สีของของภาพ วัตถุ หรือพื้นที่ๆต้องการครับผม ซึ่ง Gradient Overlay จะเป็นการไล่สีภายในพื้นที่ๆเราต้องการ โดยใช้คู่กับ Stroke ได้ครับ ลองมาดูกัน..

8. ต่อจาก ข้อ 7. เลยนะครับ เมื่อได้ Text ที่ใส่ Stroke แล้ว (ดูภาพจากข้อ 7.) ให้ใช้วิธีการเดิมครับ
ดูที่แถบ Layers ด้านล่างขวามือ คลิกเครื่องหมายแรก (Add a layer style) เลย ที่เป็นรูป Flash แล้วเลือกไปที่ Gradient Overlay (ดูภาพจากข้อ 5. นะครับ แล้วเลือก Gradient Overlay)

9. คลิกเครื่องหมายถูกที่ช่องสี่เหลี่ยมหน้า Gradient Overlay ก่อนนะครับ ในส่วนของ Gradient จะมี Options เยอะพอสมควรนะครับ จะอธิบายเป็นอย่างๆนะ


Blend Mode - จะเป็นการ Gradient ใน Mode ต่างๆครับ
Opacity - เป็นค่าความโปร่งใสครับ
Gradient - เป็นการเลือกลักษณะของสีที่จะ Gradient ครับ อย่างเช่น Foreground to background - จะเป็นการ Gradient ตั้งแต่ Foreground ไปยัง background , Foreground to transparent - เป็นการ Gradient ตั้งแต่ Foreground ไปยังโปร่งใส เป็นต้นครับ
** คลิกถูกที่ Reverse เพื่อสลับสีการ Gradient ครับ **
Style - เป็น Style การ Gradient ครับ
Angle - ปรับองศาของการ Gradient ครับ จะว่าไปก็คือทิศทางการ Gradient แหละครับ
Scale - คือการเซตค่าระหว่าง 2 สีที่จะนำมา Gradient ครับ ยิ่ง Scale น้อย Gradient จะออกมาไม่กลมกลืนกันระหว่าง 2 สีครับ มันจะดูเป็นการแบ่ง 2 สีออกจากกันเลย ไม่เชื่อลองทำดูสิ - -*

10. เมื่อเซตค่าเสร็จเรียบร้อยแล้วกด OK เลยครับ ก็จะได้ภาพรวม ทั้ง Stroke + Gradient Overlay ครับ ตรงนี้จะเซฟหรือไม่เซฟก็ตามใจครับ

ปล. ไม Profiles เราไปอยู่ข้างล่างซะงั้น - -"

Comment

Comment:

Tweet


cry double wink
#13 by (203.172.167.119) At 2010-08-05 09:27,
คิดถึงนะ
#12 by (203.172.167.119) At 2010-08-05 09:26,
bgk[htkhokg
sad smile
#11 by (203.172.167.119) At 2010-08-05 09:25,
ดีมากเลยค่ะ
#10 by 56 (203.172.167.119) At 2010-07-30 10:13,
Hello! Good Site! Thanks you! bslbaiypbqe
#9 by fopbvocubz (212.107.116.240) At 2008-01-28 09:14,
เพิ่งเดินทางมาพบบล็อกนี้

ขอเรียนรู้เทคนิคด้วยคนนะค่ะ
#8 by HaN_ka*EW* (203.188.29.2) At 2007-05-05 19:24,
ที่ profile ไปอยู่ด้านล่าง ผมคิดว่าน่าจะเกิดจากการ set ccs เรื่องขอบหน้าต่าง post entry นะคับ ผมก็ไม่รู้ว่าใช่รึป่าว แต่ blog ผมต้องเข้าไปแก้ใน ccs เยอะเหมือนกันครับ
#7 by Tang-mae At 2006-10-18 01:07,
เง้อ เบื่อคนเก่ง ชิชิ ><

ทัมม่ะด้ายเเล้วจาเเวะมาดูข้อมูลน๊า
#6 by dew (124.120.85.153) At 2006-10-16 21:49,
อือ เนอะ สไตล์เดียวกันจิงๆด้วย




แต่บลอคนี้เจ๋งกว่า เพราะมีสอบชอปด้วย เราสอนไม่เป็น ทำได้นิดๆหน่อยๆเอง


ยินดีที่ได้รู้จักฮะ

#5 by mmg6 At 2006-10-16 21:40,
อ่า เป็น Windows ครับ แต่เราใช้Theme ของ Longhorn ครับ (Longhorn Transformation Pack) เราชอบสีฟ้าน่ะ
#4 by ニュビーズ ☆彡 At 2006-10-16 13:21,
ฮ่ะๆ อิจฉาคนใช้เทคนิคโฟโต้เป็น ><
ผมใช้แค่ทาสีอย่างเดียว ฮ่าๆ ไม่รุเทคนิคเรย - -"

แต่หน้าต่างแปลกๆแหะ นี่วินโดวหรือแมคอะงับ (บ้านอยู่หลังเขางิ ><)

ขอบคุณสำหรับคำชมธีมใหม่ของผมคับ ^^
#3 by ~d-oy [intanon pettaveeporndej] At 2006-10-15 23:02,
พี่เอามาลงอีกนะ ขอบคุณนะคะที่คอมเม้นให้ อืมkyomeน่ะจะพยายามทำภาพในโฟโต นะค่ะ
#2 by 草の 明ら  At 2006-10-15 19:45,
อุโอ้วโว้วว้าว~~~~~
ยังไม่เคยรุ้เทคนิคนี้เลยเเฮะ
><
ขอเอาเทคนิคไปใช้หน่อยนะครับ><
ขอขอบคูรสำหรับความรู้ใหม่ๆน้า~~~

ニュビーズ ☆彡
View full profile