What's Ofebia? What's Ofebia?
รูปภาพเนื้อหา
ยินดีตอนรับเข้าสู่ Ofebia ^^ สวัสดีค่ะ ^^ ยินดีตอนรับทุกท่านเข้าสู่ web.ofebia นะค่ะ ทางเว็บไซต์จัดทำขึ้นเพื่อเผยแพร่ความรู้เกี่ยวกับการพัฒนาเว็บไซต์ และเรื่องน่ารู้ต่าง ๆ ที่น่าสนใจเกี่ยวกับการพัฒนาเว็บไซต์ เพื่อให้ผู้ที่สนใจได้เข้ามาทำการศึกษาหาความรู้ และแบ่งปันประสบการณ์เกี่ยวกับการพัฒนาเว็บไซต์ค่ะ ใครที่สนใจอยากจะเผยแพร่ความรู้ของตนก็สามารถทำได้นะค่ะ สามารถ สมัครสมาชิก ได้นะค่ะ ยินดีตอนรับทุกท่านเข้าสู่ web.ofebia เสมอค่ะ ตอนนี้เว็บของเรากำลังอยู่ในช่วงการพัฒนานะค่ะ หน้าตา Interface อาจจะไม่สวย หรือบางอันก็ยังไม่มี Interface ก็ดู ๆ กันไปก่อนนะค่ะ เพราะว่าเป็นช่วงเริ่มแรก เพิ่งทำเสร็จได้ไม่นาน กำลังเอามาทดสอบใช้ แต่ก็สามารถใช้งานได้ดีค่ะ เพียงแค่บางอันยังไม่มีหน้า Interface เท่านั้นค่ะ ซึ่งทางเรากำลังเร่งพัฒนาให้เสร็จเรียบร้อย และทำการเพิ่มฟังก์ชั่นต่าง ๆ เข้าไปเรื่อย ๆ เพื่อรองรับการใช้งานอยู่สมาชิกทุกท่านค่ะ ถ้าท่านใดมีข้อสงสัย หรือเจอปัญหาเกี่ยวกับการใช้งานเว็บไซต์สามารถส่งอีเมล์มาบอกได้นะค่ะ  webmaster@ofebia.com หรือ ofebia@googlegroup.com ขอบคุณค่ะ สวัสดีค่ะทีมงาน web.ofebia.com
Tutorial : Graphic Tutorials : Graphic
วิธีทำตัวอักษรให้ขาดออกจากกัน
วิธีทำตัวอักษรให้ขาดออกจากกัน
วันนี้มีวิธีทำตัวอักษรให้ขาดออกจากกันมานำเสนอ ลองทำดู ไม่ยาก1. สร้างเอกสารใหม่ จากนั้นให้เปลี่ยนสีพื้นหลังเป็นสี #f6f6f6 สร้าง Layer ใหม่ เลือกเครื่องมือ Elliptical Marquee Tool   เพื่อสร้าง selection เหมือนดังรูปด้านล่าง  2. จากนั้นเลือกที่เครื่องมือ Gradient Tool   เติมสีแบบ Black to Transparent Gradient ลงไป กดปุ่ม Ctrl + D เพื่อยกเลิก selection 3. ต่อไปให้ไปที่เมนู Filter > Blur > Gaussian Blur กำหนดค่า Radius = 2.0 pixels จะได้ 4. ขั้นตอนต่อไป ให้พิมพ์ข้อความลงไป โดยเลือกเครื่องมือ Horizontal Type Tool   จากนั้นก็พิมพ์ข้อความที่ต้องการไว้ตรงกลาง จากนั้นให้กำหนด Layer Style ให้กับตัวอักษร โดยกำหนดค่า Gradient Overlay ดังรูป และกำหนดค่า Bevel and Emboss ดังรูป จะได้ 5. สร้าง Layer ใหม่ไว้บน Layer ตัวอักษร จากนั้นให้รวมทั้ง 2 Layer ไว้ด้วยกัน โดยเลือก Layer ทั้ง 2 จากนั้นให้คลิกขวา เลือก Merge Layers ต่อไปจะทำเงาให้กับตัวอักษรกัน เริ่มจาก สร้าง Layer ใหม่ แล้วลากมาวางไว้ด้านล่าง Layer ตัวอักษร จากนั้นให้ใช้เครื่องมือ Elliptical Marquee Tool   เพื่อสร้าง selection แล้วเติมสีดำลงไป ดังรูป จากนั้นให้กดปุ่ม Ctrl + D เพื่อยกเลิก selection และกดปุ่ม Ctrl + F เพื่อเรียกใช้ Filter Effect ที่ใช้ไปก่อนหน้านี้กับ Layer นี้ด้วย (ในที่นี้คือ Gaussian Blur Filter Effect ที่ใช้ในข้อที่ 3 จ้า) จะได้ดังรูป ทำตามขั้นตอนดังกล่าว กับทุกตัวอักษร หรือจะคัดลอก Layer เงาแล้วนำไปปรับขนาดให้เหมาะกับแต่ละตัวอักษรก็ได้ 6. มาถึงขั้นตอนที่ทำให้ตัวอักษรขาดออกจากกัน เริ่มจากใช้เครื่องมือ Polygonal Lasso Tool   สร้าง selection ทับบนตัวอักษรที่ต้องการให้ขาด (แยกจากกัน) ไปที่ Layer > New > Layer via Cut (Shift + Ctrl + J) เพื่อตัดตัวอักษรส่วนที่เลือกไว้ให้ออกจากกัน แล้วใช้เครื่องมือ Move Tool   ย้ายตำแหน่งของตัวอักษรดังกล่าวเล็กน้อย ทีนี้ก็แล้วแต่คุณว่าจะหั่นตัวอักษรออกเป็นกี่ชิ้น
ร่างเส้นตัวอักษรด้วย Photoshop
ร่างเส้นตัวอักษรด้วย Photoshop
คราวก่อนเคยนำเสนอ tutorial ทำตัวอักษรให้เป็นแบบร่าง (Sketch Font) ซึ่งใช้โปรแกรม Illustrator มาคราวนี้จะใช้โปรแกรม Photoshop บ้าง ในครั้งนี้จะร่างเส้นขอบรอบตัวอักษรด้วย Photoshop1. เริ่มจากสร้างเอกสารใหม่ กำหนดขนาดและสีพื้นก็ตามต้องการ แล้วให้ใช้เครื่องมือ Type Tool   พิมพ์ข้อความที่เราต้องการที่จะทำให้เป็นแบบร่างลงไป  2. กำหนดค่า Layer Fill = 0% และให้ดับเบิ้ลคลิกที่ Layer ตัวอักษร เพื่อกำหนดค่า Layer Style โดยให้กำหนดค่า Bevel and Emboss ดังรูป  3. ต่อมาให้คัดลอก Layer ตัวอักษร โดยคลิกที่ Layer แล้วกดปุ่ม Ctrl+J เพื่อคัดลอก และให้กดปุ่มลูกศรขึ้น 3 ครั้ง และกดปุ่มลูกศรไปด้วนซ้ายอีก 3 ครั้ง เพื่อย้ายตำแหน่งของตัวอักษรให้อยู่เยื้องไปจากเดิมเล็กน้อย จากนั้นให้กำหนดค่า Bevel and Emboss ให้กับ Layer ดังกล่าว ดังรูป จะได้ 4. มาถึงขั้นตอนการร่างเส้น guide line ให้ตัวอักษร โดยเริ่มจาก สร้าง Layer ใหม่ แล้วใช้เครื่องมือ Line Tool   กำหนดความกว้างของเส้น 1px (weight: 1 px) กำหนดสีเส้นเป็นสีดำ #000000 โดยให้ลากเส้นในแนวตั้งเท่านั้น จะได้ดังรูป จากนั้นให้ไปที่เมนู Filter > Blur > Motion Blur กำหนดค่า Angle = -90 องศา และค่า Distance = 18 pixels ดังรูป จะได้ 5. ขั้นตอนต่อไปก็ให้ทำคล้ายกับขั้นตอนที่ 4 แต่ให้เปลี่ยนจากการร่างเส้นในแนวตั้งเป็นแนวนอน ให้สร้าง Layer ใหม่ แล้วใช้เครื่องมือ Line Tool   กำหนดความกว้างของเส้น 1px (weight: 1 px) กำหนดสีเส้นเป็นสีดำ #000000 โดยให้ลากเส้นในแนวนอนเท่านั้น จะได้ดังรูป จากนั้นให้ไปที่ Filter > Blur > Motion Blur กำหนดค่า Angle = 0 องศา และค่า Distance = 18 pixels ดังรูป จะได้ แค่นี้เราก็จะได้ภาพร่างเส้นรอบตัวอักษรแบบง่ายๆ แล้ว ส่วนใครอยากจะปรับเพิ่มเติมแต่งอะไรอีกก็ไม่ว่ากัน สำหรับเรา ขอปรับแต่งอีกหน่อยแล้วกันเปลี่ยนสีพื้นหลังดีกว่า เอ๊ะอยากทำให้ดูเหมือนน้ำกระเด็นใส่สักเล็กน้อยดีกว่า ให้คลิกเลือก Layer ใด Layer หนึ่ง แล้วคลิกขวา เลือก Merge Visible เพื่อรวม Layer ทั้งหมดไว้ด้วยกัน แล้วไปที่เมนู Filter > Brush Strokes > Spatter ตั้งค่าดังรูป จะได้ ดูแปลกๆ อะ ตัวอักษรดูเปื้อนๆ แต่พื้นหลังกับเรียบกริบเลย ใส่ Texture ให้พื้นหลังดีกว่าให้ไปที่ Filter > Texture > Texturizer กำหนดค่าดังรูป จะได้  พอแล้วมั้ง รูสึกว่ายิ่งทำยิ่งไม่สวย 555
วิธีทำนามบัตรแบบง่ายๆ ด้วย Illustrator
วิธีทำนามบัตรแบบง่ายๆ ด้วย Illustrator
กลับมาอีกครั้งแล้วกับ Tutorial วิธีการทำนามบัตร แต่คราวนี้จะใช้โปรแกรม Illustrator บ้าง จากบทความก่อนที่เคยนำเสนอวิธีการทำนามบัตรด้วย Photoshop คราวนี้มีวิธีการทำนามบัตรแบบง่ายๆ ด้วย Illustrator มาฝากกันด้วย รอช้าอยู่ใย เริ่มกันเลยดีกว่า.....1. เริ่มจากการทำด้านหน้าของนามบัตร ให้เลือกเครื่องมือ Rectangle Tool (M)   แล้วคลิกที่พื้นที่การทำงาน 1 ครั้ง จะมี Options ขึ้นมา ให้กำหนดขนาด 3.5” x 2” (252 pt x 144 pt) จะได้รูปสี่เหลี่ยมผืนผ้าขึ้นมา 1 รูป ใส่สีเขียวเป็นสีพื้น (#A7D22A) ไม่ต้องใส่สีขอบ ดังรูป 2. ใช้เครื่องมือ Type Tool (T)   พิมพ์ชื่อบริษัทลงไป ใส่โลโก้ไปด้วย และอย่าลืมใส่ชื่อเว็บไซต์  โดยกำหนดให้ทั้งหมดเป็นสีขาว จะได้ดังรูป เสร็จแล้ว...... ด้านหน้าของนามบัตร ก็บอกแล้วว่าเป็นการทำนามบัตรแบบง่ายๆ ก็ต้องทำให้สมชื่อหน่อย easy easy :) 3. มาถึงด้านหลังของนามบัตร ด้านหน้ามีพื้นเป็นสีเขียว ตัวอักษรสีขาว ด้านหลังจะทำพื้นเป็นสีขาว และมีตัวอักษรเป็นสีเขียวบ้าง เริ่มจากใช้ เครื่องมือ Rectangle Tool (M)  ทำรูปสี่เหลี่ยมผืนผ้าขึ้นมาเหมือนกับข้อที่ 1 จากนั้นให้เติมสีขาวเป็นสีพื้น และกำหนดสีขอบเป็นสีดำ (ค่อยเอาสีขอบออกตอนหลัง เพราะเดี๋ยวจะกลืนไปกับสีพื้น หรือใครจะใช้เส้น Guides ช่วยก็ได้) 4. เลือกที่เครื่องมือ Rectangle Tool (M)  อีกครั้ง กำหนดสีพื้นเป็นสีเขียว (#A7D22A) ไม่ต้องใส่สีขอบ จากนั้นให้ลากเป็นรูปสี่เหลี่ยมขนาดให้พอจุชื่อ และนามสกุล (ค่อยปรับตอนหลังก็ได้) ตรงมุมขวา ดังรูป คลิกเลือกรูปสี่เหลี่ยมรูปเล็ก ให้กดปุ่ม Ctrl + C เพื่อคัดลอก แล้วกดปุ่ม Ctrl + B เพื่อวางรูปที่คัดลอกไว้ด้านหลังรูปต้นฉบับ จากนั้นให้กดปุ่มลูกศรไปด้านบน 3 ครั้ง ไปด้านขวา 3 ครั้ง แล้วให้เปลี่ยนสีเป็นสีเทา (#CCCCCC) ดังรูป 5. ขั้นตอนต่อไป ให้พิมพ์ชื่อและนามสกุลลงบนรูปสี่เหลี่ยมเล็กที่ทำไว้ และพิมพ์ข้อมูลต่างๆ ของเราลงไป แล้วอย่าลืมเอาสีดำของขอบนามบัตรออกด้วย หรือใครจะเอาไว้เพื่อให้ง่ายในตัดก็ไม่ว่ากัน แค่นี้ก็จะได้นามบัตรแบบง่ายๆ ไว้ใช้งานแล้ว แม้ว่าจะดูเรียบไปหน่อย แต่กระดาษที่คุณเลือกใช้ จะมีส่วนช่วยให้นามบัตรดูดีขึ้นได้ แต่ๆๆๆๆๆ ถ้าใครไม่ชอบแบบเรียบๆ  ก็ใส่ Effect ให้สักหน่อย โดยคลิกที่พื้นของนามบัตร แล้วไปที่เมนู Effect และเลือกใส่ Effect ที่ต้องการได้เลย แต่จะแนะนำอีกวิธีคือ ให้คลิกที่ Layer พื้นของนามบัตร กดปุ่ม Ctrl + C แล้ว กดปุ่ม Ctrl + F เพื่อคัดลอก Layer และวางไว้ด้านหน้าของ Layer ต้นฉบับ จากนั้นให้ไปที่เมนู Window > Swatch Libraries > Patterns > Decorative > Decorative_Geometric 2 จะเห็นกล่อง Patterns ขึ้นมา ให้เลือกรูปแบบตามต้องการ จากนั้นให้ไปที่ Window > Transparency กำหนดค่า Opacity = 5% เมื่อทำครบทั้งด้านหน้าและด้านหลังของนามบัตรแล้วจะได้ดังรูป  แค่เครื่องมือ Rectangle Tool และ Type Tool   ก็สามารถสร้างนามบัตรแบบเรียบง่ายได้แล้ว :)
สร้างสก็อตเทปด้วย Photoshop
สร้างสก็อตเทปด้วย Photoshop
หลังจากที่ห่างหายไปนาน วันนี้ขอนำเสนอเทคนิคง่ายในการทำสก็อตเทป ด้วย Photoshop มาฝากเริ่มกันเลยดีกว่า 1. ขั้นตอนแรกก็ให้สร้างเอกสารใหม่ กำหนดขนาดและสีพื้นหลังตามต้องการ ในที่นี้ใช้สี #171700   2. จากนั้นให้นำภาพเข้ามา 1 ภาพ ถ้าต้องการจะปรับขนาดภาพให้กดปุ่ม Ctrl + T แล้วปรับขนาดหรือหมุนภาพได้ตามต้องการ 3. ต่อไปให้สร้างขอบและเพิ่มเงาให้กับภาพโดยการ ดับเบิ้ลคลิกที่ Layer รูปภาพ แล้วตั้งค่า Drop Shadow และ Stroke ดังรูป  จะได้ดังรูป 4. มาถึงขั้นตอนการทำสก็อตเทปกันแล้ว เริ่มจากสร้าง Layer ใหม่ เลือกเครื่องมือ Polygonal Lasso Tool   วาดรูปสก็อตเทป และเติมสี #c1cccd ดังรูปด้านล่าง 5. ให้กดปุ่ม Ctrl + D เพื่อยกเลิกการเลือก จากนี้จะเป็นขั้นตอนที่ทำให้สก๊อตเทปเหมือนจริง เริ่มจากเลือกเครื่องมือ Eraser Tool   และเลือกรูปแบบของหัวแปรงดังรูป ปรับแต่งปลายของสก็อตเทปเพื่อให้สมจริง และให้ปรับค่า Layer Opacity = 20%  แค่นี้ก็จะได้สก็อตเทปใสไว้แปะรูปกันแล้ว แต่ยังไม่จบแค่นี้ ยังมีวิธีทำให้เหมือนกว่านี้อีก ทำตามข้อข้างล่างนี้สิ6. เลือกเครื่องมือ Dodge Tool   กำหนดค่าดังนี้ Brush = 7px, Range = Highlights, Exposure = 50%   จากนั้นก็ทำ Highlight ให้สก็อตเทปกันสักเล็กน้อย  ให้กดปุ่ม Ctrl+J เพื่อคัดลอก Layer สก็อตเทป แล้วปรับ Layer Mode เป็น Overlay จากนั้นให้ไปที่ Filter > Stylize > Emboss ตั้งค่าตามรูป  เสร็จแล้ว
สร้างพื้นหลังแนว Typographic ด้วย Photoshop
สร้างพื้นหลังแนว Typographic ด้วย Photoshop
สวัสดีทุกคน วันนี้มี Tutorial วิธีสร้างพื้นหลังแนว Typographic ด้วย Photoshop มาฝาก รับรองว่าไม่ยาก เริ่มกันเลยดีกว่า1. สร้างเอกสารใหม่ กำหนดขนาด 1920×1200 pixels กำหนดสีพื้นหลังเป็น #222222 จากนั้นให้คัดลอก Layer พื้นหลัง แล้วตั้งชื่อใหม่ว่า Film grain 2. ไปที่ Filter > Artistic กำหนดค่า Grain = 2, Highlight Area = 0 และ Intensity = 0  ปรับค่า Layers opacity =  50% จะได้ดังรูป 3. สร้าง Layer ใหม่ ตั้งชื่อว่า Lightning จากนั้นให้ไปที่เครื่องมือ Gradient Tool  กำหนดสีเป็น สีดำและสีขาว  (Default Foreground and Background Colors) เลือกรูปแบบ Gradient เป็น Radial Gradient  ลากเส้นเพื่อไล่สี ให้มีลักษณะดังรูป  เปลี่ยน Layer mode เป็น Overlay และปรับค่า Layer Opacity = 55% 4. ไปที่เครื่องมือ Type Tool  ปรับ Mode เป็น Smooth แล้วพิมพ์ข้อความลงไป (กำหนดขนาดของ font ตามความเหมาะสม) ปรับค่า Layer Opacity = 15% 5. จากนั้นให้สร้าง Group ใหม่ขึ้นมา โดยไปที่ Layer > New > Group หรือ Create a new group ที่ Layers Palette ตั้งชื่อ Group ว่า Words จากนั้นก็ให้ใช้เครื่องมือ Type Tool พิมพ์ข้อความลงไป โดยกำหนดขนาดและแบบอักษรที่แตกต่างกัน จะได้ดังรูป 6. ขั้นตอนต่อไป ให้เลือกที่ Layer กลุ่มของคำ แล้วไปที่ Layer > Duplicate Group ตั้งชื่อว่า Words Merge จากนั้นให้ทำการรวมคำทั้งหมดในกลุ่มไว้ด้วยกันด้วยคำสั่ง merge โดยไปที่ Layer > Merge Group (Ctrl + E) เสร็จแล้วให้ปิดการมองเห็น Group Words ออก โดยคลิกเลือกสัญลักษณ์ดวงตาจาก Group Words ออก ดังรูป 7. จากนั้นให้เลือก Layer ของตัวอักษรที่ใหญ่ที่สุดในที่นี้คือ OFEBIA ให้กดปุ่ม Ctrl ค้างไว้ แล้วคลิกที่ thumbnail ของ Layer ดังกล่าว จะได้ดังรูป ให้คลิกที่ Layer Words Merge แล้วกดปุ่ม (Ctrl+J) จะได้ Layer ใหม่ขึ้นมา ตั้งค่า Layers Opacity =  50% จะได้ดังรูป  8. ดับเบิ้ลคลิกที่ Layer Words Merge เลือกที่ Color Overlay ตั้งค่าตามรูป  ตั้งค่า Layers Opacity =  70% 9. คัดลอก Layer Words Merge ตั้งชื่อว่า Words Merge 2 แล้วให้ลากไปวางไว้ใต้ Layer Words Merge แล้วไปที่ Filter > Blur > Motion Blur ตั้งค่าตามรูป ตั้งค่า Layers Opacity =  50% 10. เลือกที่ Layer ของตัวอักษรที่ใหญ่ที่สุดในที่นี้คือ OFEBIA ให้ปรับค่า Layers Opacity = 5% ก็จะได้ พื้นหลังแนว Typographic แบบง่ายๆ
สร้างพื้นหลังแสงแดดยามเช้าด้วย Photoshop
สร้างพื้นหลังแสงแดดยามเช้าด้วย Photoshop
วันนี้มี Tutorial มาฝากกันอีกแล้ว คราวนี้เรามาต้อนรับแสงแดดยามเช้ากับวิธีการสร้างพื้นหลังแสงแดดยามเช้าด้วย Photoshop (Aurora Wallpaper in Photoshop) ต้องขอออกตัวก่อนว่า จะไม่เหมือนของจริงสะทีเดียว แต่ก็ประมาณนั้นแหละ 55 หมายเหตุ: Photoshop CS3 1. สร้างเอกสารใหม่ กำหนดขนาดเป็น 1024x768px หรือแล้วแต่ resolution ของเครื่องคุณแล้วกัน อันนี้ไม่ได้บังคับ :) 2. สร้าง layer ใหม่ ตั้งชื่อว่า city จากนั้นให้หา Brush ที่เป็นรูปเมือง หรือถ้าใครเบื่อบรรยากาศในเมืองแล้ว จะเปลี่ยนเป็น ป่า เทือกเขา หรืออะไรก็ได้ เพื่อสร้างบรรยากาศ แต่ในที่นี้ขอเป็นในเมืองแล้วกัน (แบบว่าเป็นเด็กบ้านๆ อยากเห็นบรรยากาศยามเช้าในเมือง) ดังรูปด้านล่าง ถ้าใครไม่มีก็สามารถดาวน์โหลดมาติดตั้งได้ มีแจกฟรีหลายเว็บมาก ex. brusheezy.com free-brushes.com เป็นต้น 3. ต่อไปก็ให้หาพื้นหลัง ทิวทัศน์ในยามค่ำคืน มีดาวเต็มฟ้า (ขึ้นอยู่กับความชอบแล้วกัน) ในที่นี้ใช้ภาพจากที่นี่  จากนั้นให้นำภาพดังกล่าวมาวางไว้หลัง layer city แล้วตั้งชื่อ layer ว่า starscape 4. เพิ่มแสงให้กับท้องฟ้าหน่อย โดยให้สร้าง layer ใหม่ ตั้งชื่อว่า aurora bottom โดยให้ layer aurora bottom อยู่ระหว่าง layer starscape และ layer city จากนั้นให้ใช้เครื่องมือ Brush tool   เลือกหัวแปรงแบบนุ่ม โดยขนาดของหัวแปรงขึ้นอยู่กับความเหมาะสม กำหนดสีให้กับ Brush ในที่นี้ใช้สี #c6ea00 ลาก Brush ให้ตรงในแนวนอน (กดปุ่ม shift ค้างไว้) เพื่อใช้เป็นจุดเริ่มต้นของแสง ดังรูป ไปที่ Filter > Blur > Gaussian Blur กำหนดค่า Radius = 40 pixels แล้วเปลี่ยน Blending mode เป็น Hard light และกำหนดค่า Opacity = 50% 5. ต่อมาก็ให้เพิ่ม layer แสงอีก โดยให้สร้าง layer ใหม่ ตั้งชื่อว่า aurora middle ให้ layer aurora middle อยู่หลัง layer aurora bottom จากนั้นใช้เครื่องมือ Brush Tool  ลากเส้นเป็นแนวนอน เหมือนกับขั้นตอนที่แล้ว โดยให้อยู่ในตำแหน่งสูงกว่าเดิมเล็กน้อย ในที่นี้ใช้สี #c1f89b จากนั้นให้ไปที่ Filter > Blur > Motion Blur กำหนดค่า Angle = 90o และค่า Distance = 100 pixels แล้วให้ไปที่ Filter > Blur > Gaussian Blur กำหนดค่า Radius = 40 pixels จากนั้นให้เปลี่ยน Blending mode เป็น Lighten และกำหนดค่า Opacity = 90% 6. ต่อไปเราจะต้องสร้าง Brush เพื่อนำมาใช้ในการนี้โดยเฉพาะ (โอเวอร์เล็กน้อย อิอิ) ให้สร้างเอกสารใหม่ ขนาด 30 x 300px โดยกำหนดพื้นหลังเป็นแบบโปร่งใส (Transparent) จากนั้นให้ใช้เครื่องมือ Pen Tool (P)  กำหนดจุดสองจุดเพื่อสร้างเส้นตรงในแนวตั้ง (กดปุ่ม shift ค้างไว้ จะได้เป็นเส้นตรง) กำหนดสีพื้น (Foreground color) เป็นสีดำ  จากนั้นเลือกเครื่องมือ Brush Tool   กำหนดหัวแปรงแบบ Hard Round  ขนาด 9 pixels  แล้วใช้เครื่องมือ Path Selection Tool (A)  เลือกที่เส้น Path  แล้วให้คลิกขวา เลือก Stroke Path จะมี Stroke Path Option ขึ้นมา ให้เลือก Stroke Path เป็น Brush และเลือก Simulate Pressure ด้วย จากนั้นให้กดปุ่ม Delete เพื่อลบเส้น Path ออก จะได้ดังรูป ต่อไปให้ปรับแต่ง Brush กันเล็กน้อย โดยให้ไปที่ Edit > Define Brush Preset ตั้งชื่อให้ Brush ในที่นี้ตั้งชื่อ Brush ว่า Aurora แล้วไปที่ Window > Brushes (F5) เลือก Aurora Brush ที่สร้างขึ้นเพื่อปรับแต่งค่าตามรูป  7. จากนั้นให้กลับไปที่ไฟล์ภาพพื้นหลัง ได้เวลาใช้ Aurora Brush ที่สร้างขึ้นแล้ว เริ่มจากสร้าง layer ใหม่ ตั้งชื่อว่า layer aurora top ให้ layer aurora top อยู่หลัง layer aurora middle ตั้งค่าสีพื้นเป็นสี #90b980 แล้วใช้ Brush ที่สร้างจากขั้นตอนที่แล้ว (Aurora brush) ลากเป็นเส้น ตามแนวนอน ให้ซิกแซ็กบ้างเล็กน้อย แล้วไปที่ Filter > Blur > Motion Blur กำหนดค่า Angle = 65o และค่า Distance = 100 pixels  จากนั้นให้เปลี่ยน Blending mode เป็น Color Dodge 8. เพิ่มสีสันกับสีม่วงกันหน่อย #a73c63 โดยให้สร้าง layer ใหม่ ตั้งชื่อว่า aurora highlight 1 โดยให้ layer aurora highlight 1 อยู่ก่อน layer aurora bottom แล้วให้ไปที่ Filter > Blur > Gaussian Blur กำหนดค่า Radius = 100 pixels จากนั้นให้เปลี่ยน Blending mode เป็น Exclusion ปรับค่า Opacity = 60% 9. สร้าง layer ใหม่อีก 1 layer ตั้งชื่อว่า aurora highlight 2 โดยให้ทำคล้ายๆ กับขั้นตอนที่แล้ว แต่ปรับขนาด Brush ให้ใหญ่ขึ้นอีกนิด ในที่นี้ใช้สี #9a586f แล้วไปที่ Filter > Blur > Motion Blur กำหนดค่า Angle = 90o และ Distance = 100 pixels จากนั้นให้เปลี่ยน Blending mode เป็น Overlay 10. คราวนี้มาปรับค่า Aurora Brush กันอีกสักครั้ง โดยให้เลือก Aurora Brush ที่เราสร้างขึ้นจากขั้นตอนที่ 6 จากนั้นให้ไปที่ Window > Brushes (F5) เลือก Aurora Brush แล้วปรับค่า Scattering และ Dual brush ตามรูป  ต่อไปให้สร้าง layer ใหม่ ตั้งชื่อว่า aurora highlight 3 ให้อยู่ก่อน layer aurora highlight 2 ปรับค่าสีพื้นเป็นสีขาว จากนั้นให้เลือกเครื่องมือ Brush Tool  แล้วเลือก Aurora Brush ที่ได้ปรับแต่ค่าไว้แล้ว ค่อยๆ ลาก Brush ให้มีลักษณะดังรูป แล้วไปที่ Filter > Blur > Motion Blur กำหนดค่า Angle = 90o และ Distance = 30 pixels แล้วไปที่ Filter > Blur > Gaussian Blur กำหนดค่า Radius = 5 pixels จากนั้นให้เปลี่ยนค่า Opacity =  50% 11. มาถึงขั้นตอนสุดท้าย ให้สร้าง layer ใหม่ ตั้งชื่อว่า Clouds โดยให้อยู่บน layer aurora highlight 3 ตั้งค่าสีเป็นค่า default ดำขาว    แล้วไปที่ Filter > Render > Clouds เปลี่ยนค่า Blending mode เป็น Soft light และปรับค่า Opacity =  20% เสร็จแล้ว เอ๊ะ! หรือจะปรับแต่งอีกหน่อย :) ทีนี้ถ้าอยากได้บรรยากาศในสถานทีอื่น ก็แค่เปลี่ยน layer city เป็น สถานที่ที่คุณอยากได้ เช่น   โหลดพื้นหลัง 1024x768px แสงแดดยามเช้าในเมือง โหลดพื้นหลัง 1024x768px แสงแดดยามเข้าทิวเขา
วิธีทำนามบัตรด้วย Photoshop
วิธีทำนามบัตรด้วย Photoshop
เคยเห็นนามบัตรของคนอื่นที่สวย ๆ แปลก ๆ หรือ ไอเดียดี ๆ ก็เยอะ แต่พอจะทำนามบัตรให้ตัวเอง กลับคิดรูปแบบเด็ดๆ ไม่ออก เลยทำแบบเรียบๆ (ประมาณว่าเป็นคนที่ใช้ชีวิตแบบเรียบง่าย สบายๆ ^_^ ) เลยแล้วกัน ไว้โอกาสหน้า ถ้าคิดแบบเด็ด ๆ ออก ก็ค่อยเปลี่ยนใหม่วันนี้เลยนำมีวิธีทำนามบัตรแบบเรียบง่าย ด้วย Photoshop มาฝากกัน สำหรับใครที่มีไอเดียออกแบบนามบัตรแบบเจ๋ง ๆ แนว ๆ ก็นำมาโชว์ให้ดูเป็นขวัญตาบ้าง :)หมายเหตุ: Photoshop CS31. สร้าง เอกสารใหม่ ใส่สีพื้นเป็นสี #414141 สร้าง Layer ใหม่ จากนั้นใช้เครื่องมือ Rounded Rectangle Tool   กำหนดค่า radius = 10px วาดรูปสี่เหลี่ยมกว้าง 360px และสูง 184px ใส่สีพื้นเป็นสี #232323 ตั้งชื่อ Layer ว่า Outline 2. ต่อไปให้กำหนดค่า Layer Style โดยดับเบิ้ลคลิกที่ Outline Layer ให้กำหนดค่า Drop Shadow และ Inner Shadow ดังรูป 3. สร้าง Layer ใหม่ ใช้เครื่องมือ Ellipse Tool  วาดรูปวงรีตรงมุมบน ใช้สีขาว #FFFFFF เป็นสีพื้น ตั้งชื่อ Layer ว่า Brighter ดังรูป  ไปที่ Filter > Blur > Gaussian Blur กำหนดค่า Radius = 60 pixels จะได้ดังรูป จากนั้นให้เปลี่ยน Layer mode เป็น Soft Light จะได้ดังรูป 4. ต่อไปให้ลบแสงที่สร้างจากคำสั่ง Gaussian Blur ที่อยู่นอกนามบัตรออก โดยให้กดปุ่ม Ctrl ค้างไว้ แล้วคลิกที่ Thumbnails ของ Layer Outline จะเห็น Selection ของนามบัตรขึ้นมา ไปที่ Select > Inverse ให้กดปุ่ม Delete เพื่อลบส่วนที่เกินออก และกดปุ่ม Ctrl + D เพื่อยกเลิกการเลือก Selection 5. จากนั้นให้ใช้เครื่องมือ Rectangular Marquee Tool  วาดรูปสี่เหลี่ยมเป็นแนวยาวด้านล่าง ใส่สีพื้นเป็นสีเขียว #a9d13d ทำซ้ำขั้นตอนดังกล่าวอีกครั้ง แต่ให้ขนาดเล็กลง ดังรูป 6. ขั้นตอนต่อไปให้พิมพ์ข้อความลงไปบนเส้น (ชื่อเว็บไซต์ ชื่อบริษัท ฯลฯ) 7. นำ Logo เว็บไซต์ หรือ บริษัท มาวางตรงพื้นที่ว่าง กำหนดค่า Opacity และค่ำ Fill ให้ต่ำๆ เพื่อให้ Logo ดูจางๆ ซึ่งขึ้นอยู่กับลักษณะของ Logo นั้นๆ เสร็จแล้ว ด้านหน้าของนามบัตร ในส่วนของด้านหลังก็มีขั้นตอนคล้ายกัน โดยให้คัดลอกนามบัตรด้านหน้า แล้วลบขีดด้านล่าง ข้อความ และ Logo ออก แล้วใส่ชื่อ นามสกุล และที่อยู่เข้าไปแทน   เสร็จแล้ว.......
สร้างซองจดหมาย ด้วย Illustrator
สร้างซองจดหมาย ด้วย Illustrator
ในบทเรียนนี้จะสอนวิธีสร้างซองจดหมาย โดยการใช้เครื่องมือพื้นฐานของ Illustrator แม้ว่าจะมีหลายขั้นตอนแต่ก็เป็นการใช้เครื่องมือพื้นฐานเท่านั้น ซึ่งใครมีไอเดียเก๋ๆ ก็สามารถตกแต่งเพิ่มเติมเพื่อทำเป็น icon ที่ไม่ซ้ำใครเลยก็ได้ หมายเหตุ: บทเรียนนี้ใช้ Illustrator CS3 1. เริ่มจากใช้เครื่องมือ Rectangle Tool   สร้างรูปสี่เหลี่ยมผืนผ้าขึ้นมา ให้เติมสีขอบเป็นสี #CCCCCC ส่วนข้างในให้เติมสีแบบไล่โทนสี จากสีเทาอ่อน #DDDDDD ไปสีขาว #FFFFFF โดยให้มีการไล่โทนสีแบบ Radial ดังรูป 2. จากนั้นให้ใช้เครื่องมือ Pen Tool  วาดเป็นปากซองจดหมาย ดังรูป ให้เปิดใช้ตัวเลือก Snap to Point ด้วย โดยไปที่ View > Snap to Point (Alt + Ctrl + “) 3. ทำซองจดหมายให้ดูนุ่มนวลหน่อย โดยทำปากซองจดหมายให้โค้ง โดยใช้เครื่องมือ Pen Tool เพิ่มจุดยึด (Anchor Point) อีก 2 จุด ตรงปลายของปากซองจดหมาย ดังรูป จากนั้นให้ลบจุดยึด (Anchor Point) ตรงกลางออก ต่อไปก็ให้ใช้เครื่องมือ Convert Anchor Point Tool (Shift + C)  เลือกจุดยึดตรงปลายปากซองจดหมายจุดใดจุดหนึ่งแล้วปรับให้ตรงปลายโค้งดังรูป เติมสีให้กับปากซองจดหมายโดยเลือกที่เส้น Path ปากซองจดหมาย และเลือกการเติมสีแบบไล่โทนสี จากสีเทาอ่อน #DDDDDD ไปสีขาว #FFFFFF โดยให้มีการไล่โทนสีแบบ Linear ดังรูป 4. คัดลอกปากซองจดหมายโดยคลิกที่ปากซองจดหมายแล้วกดปุ่ม Ctrl + C เพื่อคัดลอก จากนั้นให้กดปุ่ม Ctrl + B เพื่อวางไว้หลังต้นฉบับ จากนั้นก็ให้กดปุ่มลูกศรลง 15 ครั้ง จะได้ดังรูป จากนั้นให้กดปุ่ม Ctrl ค้างไว้ แล้วเลือกตรงมุมใดมุมหนึ่งของจุดยึดด้านบนแล้วลากขึ้นไปให้ตรงกับขอบซองจดหมาย ดังรูป ให้เติมสีเทา #CCCCCC เพื่อทำให้ส่วนนี้เป็นเงา จะได้ดังรูป ใช้เครื่องมือ Direct Selection Tool (A)   เลือกจุดยึดตรงกลางของเงาทีละข้าง แล้วดึงออกไปด้านข้างเล็กน้อย เพื่อขยายขนาดของเงา ดังรูป จะได้ 5. เลือกทีปากซองจดหมาย แล้วไปที่ Window > Stroke (Ctrl + F10) เพื่อเปิด Stroke Palette ขึ้นมา จากนั้นให้ปรับขนาดเส้นเป็น 0.25 6. ใช้เครื่องมือ Line Segment Tool (\)  วาดเส้นในแนวเฉียง โดยกำหนดความหนาของเส้น = 2 กำหนดมุมเส้นให้เป็นแบบ Round Cap และให้สีเส้นเป็นสีเป็นสีเทา #CCCCCC ดังรูป จากนั้นให้กดปุ่ม Ctrl + C เพื่อคัดลอก แล้วกดปุ่ม Ctrl + F เพื่อวางไว้หน้าต้นฉบับ ให้กดปุ่มลูกศรด้านขวา 1 ครั้ง ลงล่าง 1 ครั้ง แล้วให้เปลี่ยนขนาดของเส้นเป็น 1 และเปลี่ยนสีเส้นเป็นสีขาว #FFFFFF จะได้ดังรูป 7. เลือกเส้นทั้งสอง จากนั้นให้กดปุ่ม Ctrl + C เพื่อคัดลอก แล้วกดปุ่ม Ctrl + F เพื่อวางไว้หน้าต้นฉบับ แล้วให้ลากเส้นทั้งสองไปยังอีกด้านและให้หมุนเส้นทั้งสองกลับด้าน จะได้ดังรูป จากนั้นให้คลิกเลือกเส้นทั้งสี่ แล้วกดปุ่ม Ctrl + [ สองครั้ง เพื่อให้เส้นทั้งสี่อยู่หลัง Layer เงาของปากซองจดหมาย 8. ต่อไปจะสร้างเงาให้กับซองจดหมาย โดยให้ใช้เครื่องมือ Ellipse Tool  วาดรูปวงรีด้านล่างซองจดหมาย ให้เติมสีเทาเข้ม #999999 เป็นสีพื้น ไม่ต้องเติมสีเส้น จากนั้นให้ไปที่ Effects > Blur > Gaussian Blur กำหนดค่า Radius = 5.0 pixels แล้วให้กดปุ่ม Ctrl + Shift + [ เพื่อย้าย Layer เงาของซองจดหมายไปไว้หลังสุด เสร็จแล้วซองจดหมายแบบเรียบๆ ที่นี้ก็ขึ้นอยู่กับแต่ละคนแล้วว่าอยากจะตกแต่ซองจดหมายอย่างไรไม่ให้เหมือนใคร ส่วนซองจดหมายฉบับ ofebia ก็เป็นอย่างที่เห็นข้างล่างนี้แหละ :)
Tutorial : Web Design Tutorials : Web Design & Other
Tutorial : Programming & Server Tutorial : Programming & Server
News News
Knowledge Knowledge
Showcase Showcase
Introduce Website Introduce Website
Bookmarks Bookmarks
Other Login Sevice(BETA)
Connect
ค้นหา
Custom Search
บริจาค สนับสนุนเว็ปไซท์
Adverties
Tag
3D 3มิติ Abstract Amazon Apache Backlinks Blender Blog Blognone CMS CSS Layouts CSS Syntax CSS tip CakePHP Codeigniter Colors Community Debian Directory Drupal File Google Google Analytics Google Wave Grouping IT Illustrator Inkscape Installation Java Keyword Keywords LAMP Linux Meta Meta tag Mirror Model MySQL Narisa News PHP Photoshop Tutorial Ping Sitemaps Pylons Python SEO SQLAlchemy Search Engine Sitemaps Sketch Font Text Effect Text mode Tutorial Tutorials Ubuntu W3C Web Wordpress add sitemap google background background tutorial business card color controller css facebook facebook API framework gimp graphic hosting html5 ie6 joomla menu navigation photoshop robot server showcase sitemap vista กรณีศึกษา การสร้างข้อความลายภาพ บอท สร้างกรอบให้กับภาพ สอน photoshop เว็บไซต์ แนะนำเว็บ
10 คอมเม้นล่าสุด
2008 Ofebia. Creative Commons Attribution 3.0 License