[วิธีทำ Emotion แบบง่าย ๆ ครับ เอาไปประยุคใช้ได้หลายอย่างครับ ลองทำกันดู]

[Takashi3]

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

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



หน้าจอโปรแกรมตอนเปิดนะครับ
เรามาเริ่มกันเลยนะครับ เริ่มที่ Create New > Fireworks Document(PNG) ครับ เป็นการเริ่มสร้างชิ้นงาน




ตรงหน้านี้เป็นการปรับขนาดความกว้าง และ ความสูง รวมถึงหน่วยที่ใช้วัดนะครับ ผมปรับที่ 100*100 เพราะใช้ทำตัวการ์ตูนแบบง่าย ๆ พอ



เครื่องไม้เครื่องมืออยู่ด้านซ้ายมือนะครับไม่ขออธิบายนะครับ ลองจับลากว่างเองจะเป็นเร็วกว่า หลาย ๆ ตัวมีเหมือนใน Photoshop และโปรแกรมแต่งภาพทั่วไปแต่ผมอยากให้สังเกตที่ Layers ครับเวลาเราวาดภาพ หรือ เอารูปภาพมาใส่ก็จะปรากฏอยู่ส่วนนี้ แต่สำหรับการสร้างรูปเครื่องไวในโปรแกรม Firework สามารถทำได้ง่าย ๆ ทันทีครับเพราะมีส่วนของ Frames มาช่วยในการสร้างภาพซ้อนทับหรือทำรูปเคลื่อนไหวต่าง ๆ และตัวโปรแกรมยังสามารถเปิดไฟล์ GIF ที่เป็นรูปเคลื่อนไหวมาแก้ไขเองได้อีกด้วย

ตรงนี้ให้สังเกตที่ Layers และ Frames ตรง Pages and Frames and History นะครับจะใช้งานตรงนี้เป็นหลัก ดูตามรูปจะเห็นผมคลิ๊ก 1 ที เป็นสีฟ้าเอาไว้


จากนั้นลองสร้างรูปภาพง่าย ๆ จากเครื่องมือนะครับ สังเกตุที่ layers นะครับจะมีรูปที่ผมสร้างปรากฏอยู่ จะเห็นว่ามีแต่วงกลมกับสีเหลี่ยม คือ ผมขี้เกียจนะครับ จากนั้นก็ทำการสร้าง Frames ใหม่ขึ้นมาครับ โดย Frames ที่เพิ่มมาจะสังเกตุเห็นว่าไม่มีอะไรอยู่ใน layers นะครับให้ copy รูปภาพใน layers ของ Frames ที่ 1 เอาไว้และเอามาว่าใน Frames ที่ 2 3 4




และที่นี้ก็ลองปรับแต่ละ Frames ให้มีรูปแบบที่ต่างกันแบบไหนก็ได้ครับลองดูนะครับ สำหรับผมก็ขยับซ้าย ขวาแบบง่าย ๆ พอ



จากนั้นถ้าจะลองดูตัวอย่างให้กดที่เครื่องมือที่ผมวงไว้เป็นสีเขียนครับเป็นเครื่องมือสำหรับการ ขยับและหยุด ภาพเคลื่อนไหน ถ้าพอใจแล้วก็ให้ไปที่ File > Image Preview... เพื่อทำการสร้างไฟล์รูปภาพเคลื่อนไหวครับ


สังเกตุที่ Options นะครับ > มาที่ Format เลือก Animated GIF



หลังจากนั้นก็ทำการปรับคุณภาพไฟล์ ตรงนี้สาระภาพว่าไม่เคยลองปรับจริง ๆ จัง ๆ เท่าไรลองมั่วเอานะครับ แต่ถ้าต้องการให้ไม่มีพื้นหลักสีขาว ให้คลิ๊กที่ ๆ มีม๊าคสีเขียว 1 > 2

ขออธิบายตรงนี้นิดหนึ่ง คือ อันนี้เป็นการคลิ๊กเลือกว่าเราจะให้เมล็ดสีตัวไหนกลายเป็นพื้นที่โปร่งแสง ถ้า คลิ๊กสีดำ แล้วคลิ๊กตรงหมายเลข 2 ก็จะทำให้สีดำโปร่งแสงเช่นเดียวกันครับ



สุดท้ายก็ save แล้วก็ได้ไอ้ตัวบ้า ๆ บอ ๆ นี้มาครับ อาจจะไม่สวยเท่าไรแต่เป็นการแนะนำเครื่องมาสำหรับทำภาพเคลื่อนไหวหรือทำพวกอีโมชั่นต่าง ๆ นะครับ


หวังว่าจะอ่านกันรู้เรื่องนะครับ ไม่ถนัดเขียนคู่มือเท่าไร

[9inepiek]

ขอบคุณครับ


แต่ผมไม่มีโปรแกรมน่ะซิ

[Takashi3]

ตัวโปรแกรมนี้จะอยู่รวมกับพวกโปรแกรมตระกูล Adobe ครับ ถ้ามีชุด Master หรือ WebDesign ก็จะมีครับ ตั้งแต่ CS1 ขึ้นไปมีหมดครับตัวนี้

[chui761]

ขอบคุณครับ


แต่ผมไม่มีโปรแกรมน่ะซิ

ออกแนวปั้มกระทู้นะ

เห็นมาหลายกระทู้แล้ว ไม่ไอคอน ก็คำสั้นๆ
+ ลายเซ็นผิดกฏ สูงชะลูดอย่างนี้

รอดูต่อไป ถ้ายังไม่แก้ไข แจ้ง mod

ปล. แอบมาดันกระทู้ดีๆ ของ จขกท. ด้วย