วาดลายอิฐบล็อก [Ai] by

30
Apr
0

คราวที่แล้วเป็นลายไม้ รอบนี้วาดอิฐมั่ง

สร้างสี่เหลี่ยมผืนผ้าสีส้มขึ้นมาซักชิ้น เป็นก้อนอิฐ

copy อิฐโดนการเอาเมาส์กดพร้อม Alt ลากไปข้างๆ

จากนั้นก็ Ctrl+C, Ctrl+D รัวๆ จะได้อิฐมาหนึ่งแถวจ่ะ

copy อิฐลงมาอีกแถว วางให้สลับกันตามแบบ

Ctrl+C, Ctrl+D ทั้งสองแถว ปูอิฐให้เต็มหน้า

จากนั้นสุ่มสีอิฐให้มีสีเข้มบ้าง สีอ่อนบ้าง

โดยการเลือก HSB Color Mode ตรงหน้าต่างสีนะจ๊ะ

เพื่อที่สีอิฐจะได้เป็นโทนเดียวกันอยู่

สีอ่อนก็ทำแบบเดียวกัน

เสร็จแย๊ววว

ใส่พื้นหลังสีเทา + ใส่กรอบ

เป็นอันเรียบร้อยจ้า

วิธีสร้าง Alpha Animation ใน Unity by

30
Apr
0

เนื่องจาก Unity ไม่สามารถแก้ไขค่า alpha จากตัว Unity ได้โดยตรง ต้องเขียน code ใน monodev เพื่อแก้ค่า alpha เท่านั้น ผมจึงต้องหาทางแก้ไขปัญหานี้ โดยวิธีแก้มีดังนี้

สร้าง script (C#) ขึ้นมาดังนี้


using UnityEngine;
using System.Collections;
public class test11 : MonoBehaviour {
public float alpha = 0f;
void setColor(float num) {
Color color = this.renderer.material.color;
color.a = num;
this.renderer.material.color = color;
}
void update() {
setColor (alpha);
}
}

โดยหลักการก็ไม่มีอะไรมาก แค่ตัวแปร alpha ซึ่งเซ็ตเป็น public จะปรากฏใน Inspector ของ Unity ให้เซ็ตค่าได้ และสิ่งสำคัญคือต้องกำหนดเป็น float ไม่อย่างนั้นจะไม่สามารถนำตัวแปรนี้ไปใส่ทำ Animation ได้ดังภาพด้านล่าง

หลังจากใส่ลงไปแล้ว คลิก Add curve ตามรูปเพื่อเลือก Alpha โดยจะสามารถกำหนดเลข alpha ได้ตั้งแต่ 0, 0.1 ไปจนถึง 1 ซึ่ง 0 คือโปร่งใสไม่เห็นอะไรเลย และ 1 คือเห็นภาพครบถ้วนปกติ จะสามารถสร้าง animation alpha ได้โดยง่าย ซึ่งหลักการก็คือนำตัวแปร alpha ที่เราประกาศ public ไว้ไป set ค่า alpha ใน function update ตลอดเวลาเพื่อให้การแสดงผลค่าโปร่งใสเปลี่ยนทุก frame เท่านี้ก็เรียบร้อย :)

[NGUI]การทำ Drag Panel ใน Unity3D (2D) by

30
Apr
0

ถ้าลองคิดถึงการทำ Scroll Panel หรือ DragPanel ใน Unity แล้ว คงไม่พ้นการวาง Code ครั้งยิ่งใหญ่เป็นแน่

ครั้งนี้เราเลยจะหาเครื่องทุ่นแรงซะหน่อย นั่นก็คือ!! NGUI Package( โดย Tesharen Extertainment)
เริ่มจากการสร้าง Project Unity ขึ้นมาโปรเจคนึง (อย่าลืมเปลี่ยนตรง Setup Default เป็น 2D ด้วยนะ) จากนั้นทำการ Import NGUI Package ที่จะใช้ลงมาใน Assets (ตัวที่ใช้ในตัวอย่างเป็น ver.2.7 “ฟรี” )

จากนั้นลบตัว Main Camera ตัวเก่าทิ้ง (ใน Panel ที่จะสร้างจะมีให้อยู่แล้ว) แล้ว Add Panel ตามเมนูด้านบน (NGUI -> Create a Panel)

แล้วจะได้หน้าตาแบบนี้ :D (สังเกตว่าจะมี Script ของ NGUI แนบมาให้ใน Component แล้ว)

จากนั้นเราจะทำการ Add Grid เข้าไปใน Panel
โดย Grid ที่ว่านี้จะทำหน้าที่คล้ายๆ ตัวจัด GameObject ใน Grid นั้นๆ ให้เป็นระเบียบ
เริ่มจากการ Add GameObject เปล่าๆ เข้าไปใน Panel แล้วใส่ Script ของ NGUI เข้าไป
(Add Component -> NGUI -> Interaction -> Grid)

สังเกตที่บริเวณ Script ของ Grid ตรงบริเวณ Max Per Line คือจำนวณ Object ต่อแถว (0 คือไม่จำกัด)
เสร็จแล้วจึงกด Reposition Now เพื่อจัดหน้าใหม่อีกครั้ง
ต่อไปเราจะทำการ Add Object เข้าไปใน Grid เพื่อเป็น Drag Content ของเรา
ตัวอย่างนี้จะ Add Sprite เข้าไปผ่านทางหน้า Widget Wizard ของ NGUI (ที่เมนูด้านบน, NGUI -> Open Widget Wizard )
**NGUI จะใช้ Sprite ผ่านทาง Atlas(Prefab ที่เก็บ Sprite) ไม่ได้ใช้ Sprite Renderer ของ Unity
จึงจำเป็นต้องทำ Sprite ให้เป็น Atlas ก่อนโดยใช้ Atlas Maker Tool ของ NGUI (NGUI -> Open the Atlas Maker)

จากนั้นทำการ Add Collider เข้าไปที่ Sprite แต่ละตัว เพื่อเป็นตัวตรวจจับการคลิก/ทัช
**สามารถใช้ NGUI Tool ตรงเมนูด้านบนได้  แล้วขอบ Collider จะตรงกับขอบรูป โดยทำการ Add ได้ทีละ Object เท่านั้น (ถ้ามีเป็นสิบก็ทำใจคลิกแอดไปทีละอันล่ะ)
แล้วกลับมาที่ Object ที่ชื่อว่า Panel ของเรา เพื่อที่จะ Add Script Draggable Panel ลงไป (Add Component – > NGUI -> Interaction -> Draggable Panel)

สังเกตตรงแถบ Scale, ตรงนี้จะกำหนดแกนที่เราจะ Slide (แนวนอน : x=1,y=0/แนวตั้ง : x=0,y=1)
จากนั้น Add Script ที่ชื่อว่า Drag Panel Contetn ลงไปใน Object ใน Grid ของเรา เพื่อเป็นตัว Detect Collidor ที่จะใช้ Response ต่อการ Drag

สังเกตตรง Draggable Panel ในช่อง Script Drag Panel Content ดีๆ ว่าต้องเป็น Panel เดียวกันกับที่มี Script Draggable Panel
จากนั้นลองกด Play เพื่อทดลอง :D
ถ้าคิดว่าแค่นี้ยังไม่สะใจ จะทำ Panel ซ้อน Panel ก็ได้
ถ้าข้องใจสามารถดูตัวอย่างได้ที่ Folder Example -> Scene ของ NGUI ชื่อ Scroll View นะฮ้าฟ

ตัดเส้นตัวการ์ตูนด้วย Path (Photoshop) by

30
Apr
0

ร่างภาพขึ้นมา (ภาพอะไรก็ได้แล้วแต่เราเลย)

เมื่อร่างภาพเสร็จไปตรงOpacity ปรับให้จาง
(เพื่อให้เห็นเส้นง่ายขึ้น แต่อย่าจางจนมองไม่เห้นเส้นที่ร่างละ ฮาาา)

สร้าง layer ใหม่ขึ้นมา

คลิกเครื่องมือ Pen Tool (หรือจะใช้คีย์ลัด [P] ก็ได้)

ใช้เครื่องมือ Pen Tool คลิกลงไปมันจะเป็นจุดเริ่มต้นที่เราต้องการจะวาดเส้น Path

เราก็ดราฟตามเส้นที่เราร่างไปเลย โดยการคลิกจุดเพิ่มขึ้นมาอีกจุด
(จะเห็นเส้นลากเชื่อมต่อระหว่างสองจุดขึ้นมา)

เมื่อเราดราฟเส้นเสร็จ ให้กด Enter เพื่อที่จะให้จุดดราฟหายไป(บ่งบอกว่าดราฟเสร็จแล้วนะแจ๊ะ)

คลิกขวาไปที่ Stroke Path

จะขึ้นหน้าต่างนี้ก็กด OK

จะได้เส้น Stroke ที่เราดราฟไว้ตั้งกะตอนแรก

สร้าง Layer ขึ้นมาอีกอัน

เปลี่ยนชื่อ Layer (เพื่อให้ไม่สับสนในการใช้งาน)
ในอันนี้เปลี่ยนจาก
Layer 1 เป็น เส้นร่าง
Layer 2 เป็น เส้น
Layer 3 เป็น สี
นำ Layer ที่ 3 ไปไว้อันที่ 2 (ก่อน Layer 1 ) เพื่อที่จะลงสี

ไปที่เครื่องมือ magic wand tool

คลิกตรงส่วนที่เราจะลงสี จะเกิด Selection ขึ้นมาตามขอบของเส้น
ดูที่ Layer ด้วยว่าเราทำที่Layerไหนอยู่ (อันนี้ทำในLayerเส้น แต่เวลาลงสีให้ไปลงสีในLayerสี)

ถ้าสังเกตุดีๆจะเห็นขอบระหว่าง Selection กับเส้นอยู่
ถ้าลงสีไปตอนนี้จะทำให้มีช่องว่างเหลือระหว่างเส้นกับสีได้
แก้ด้วย คลิกเมนู > Select > Modify > Expand

กำหนดค่าของ Expand Selection ให้เป็น 2 เพื่อขยายขอบออกไป

มาลงสีกันเลยยยย

*****ในการลงสีอย่าลืมดู Layer ด้วยยยย

ลงสีให้ครบทุกส่วน เท่านี้ก็เสร็จแล้วววววววววววววววววววววว เย่

ว่างๆก็ลองทำดู กันนาาาา ไม่ยากๆ

Tip เล็กๆน้อยๆ
ก่อนจะตัดเส้นให้ดูหัว Brush กะขนาดหัว Brush

****** เส้นแล้วแต่ความชอบเลย ว่าจะให้แบบไหนกัน

ง่ายๆแค่นี้เองกับการตัดเส้นPathในPhotoshop
(ข้อดีก็คงเป้นการทำใน Photoshop คือลงสีที่ง่ายกว่าใน Ai มาก
เวลาปรับเปลี่ยนทิศทาง ความโค้งก็ง่ายกว่าใน Ai เยอะ)

ลองทำดูๆ นะค่าาาาาาา
ปล.ตอนทำมันตัวแบทแมนมันดูโล่งๆไปกลัวเหงา เลยทำโรบินเพิ่มมาด้วย
แบทแมนมันต้องมีโรบินข้างกายเซ่!!!   แอร๊ยยยยยยยยยยย

การใช้ clipping mask ใน illustrator นะฮาฟว์ by

29
Apr
0

ปกติเนี่ยเวลาเวลาผมจะใช้ clipping mask tool ผมมักจะได้ทำได้ใช้ใน Ps ซะมากกว่า พอดีช่วงนี้ได้จับ Ai บ่อยๆเข้ามันก็เลยมีเหตุต้องใช้เครื่องมือนี้กะเขาด้วย ชักช้าอยู่ไยเรามาเริ่มกันเลยดีกว่า

หากรอบที่เราจะใช้เป็นตัว clipping mask กับรูปที่จะตัดมาซะ

เลือกให้ตัวกรอบอยู่บนภาพที่เราจะตัด

จากนั้นกดเลือก Object ทั้งคู่ แล้วใช้คำสั่ง Object >> Clipping mask >> Make หรือกดคีย์ลัด Ctrl+7

โชะเด๊ะ รูปก็จะถูกตัดตามกรอบที่เราวางไว้เรียบร้อย ^^

แล้วถ้าอยากจะทำกรอบเยอะๆเหมือนแอปฯมือถือล่ะทำไง ไม่ยากๆ

สร้างกรอบที่เราต้องการ เอาไปวางแหมะบนภาพเลย

กดเลือกกรอบทุกอันแล้วก็ใช้คำสั่ง Object >> Compound path >> make หรือคีย์ลัด Ctrl+8

กรอบที่เลือกก็จะเป็น Object เดียวกันแล้ว

จากนั้นก็ขั้นตอนเดิมฮะ เลือกกรอบ+รูป แล้วกด Ctrl+7 โลด ///อย่าลืมวางกรอบไว้ข้างบนรูปเสมอนะ

เรียบร้อย

ส่วนวิธีเอา clipping mask ออกก็ไม่ยาก จิ้มที่ Object ที่จะเอาออกแล้วใช้คำสั่ง Object >> Clipping mask >> Release หรือคีย์ลัด Alt+Ctrl+7 เท่านั้นเอง

สามารถนำไปไประยุกต์ได้มากมายเลยล่ะเด็กๆเย้เฮ >w<)

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน