Google Web Designer เป็นเครื่องมือสำหรับช่วยสร้างเว็บไซต์ในแบบ HTML5 และแบนเนอร์โฆษณา แบบโต้ตอบ ฟังก์ชั่นการใช้งาน คร่าวๆ คือ เหมาะสำหรับการสร้าง แบนเนอร์โฆษณา(Ads) และ Google Web Designer ยังออกแบบมาเพื่อใช้งานในการพัฒนา เว็บไซต์ ในรูปแบบ html5, CSS3 และ Javascript เพื่อนสร้างสรรค์เว็บไซต์ให้ทันสมัยและสวยงาม ส่วนหน้าตาของโปรแกรมแล้ว โทนสีของ UI ก็ค่อนข้างชินตา เพราะมีลักษณะที่คล้ายกับ Adobe PhotoshopCS6
รู้จักกับ Google Web Designer 2. วิธีสร้าง Project และเรียนรู้ User Interface (ส่วนติดต่อผู้ใช้) ใน Google Web Designer 3. การสร้าง Animation แบบสบายๆ ด้วย Google Web Designer 4. วิธีทดสอบ HTML Animation ใน Google Web Designer 5. การ publish animation ใน Google Web Designer ออกไปใช้งาน 1. ลองใช้ Google Web Designer สำหรับพวกเราที่ยังไม่เคยหรือไม่เคยรู้จัก Google Web Designer ก็ต้องทำความรู้จักกับมันก่อน เหมือนเวลาเราไป B2S จะซื้อปากกามาใช้ซักด้าม ก็ต้องทดสอบจับมันมาขีดๆ เขียนๆ ให้คล่องมือก่อนเอากลับมาใช้บนโต๊ะทำงาน ในหัวข้อแรกเราจะมาดูกันว่า เรียน Google Web Designer ไปทำไม และใช้ทำอะไรกัน? 2.
Google Web Designer – โปรแกรมจาก Google ไว้ใช้สำหรับสร้างแบนเนอร์โฆษณา ลงเว็บ หน้าตา คล้าย ๆ โปรแกรม Flash ของค่าย Adobe แต่ Google Web Designer ใช้งานง่ายกว่า ลูกเล่นอาจไม่ เยอะเท่า แต่ก็พอเพียงสำหรับจบงานเช่น Banner หรือ Ad อื่น ๆ ได้สบาย ๆ ครับ... ที่สำคัญคือ ฟรี!!! ฮะ ฟรี ปัจจุบันยังเป็นเวอร์ชั่น Beta อยู่นะครับ เท่าที่ลองใช้ก็ยังไม่เจอบั๊คอะไรหนักหนา มากมายเท่าไหร่... อ้อลืมบอกไปว่า โปรแกรมนี้ Export File งานออกมาเป็น Html5 นะครับ ซึ่งรองรับกับเว็บสมัยใหม่... Tutorials หาได้ง่าย ๆ ใน Youtube วันนี้ผมก็เลยขอแนะนำ Tutor แค่ตัวเดียวนะครับ เป็น Basic การใช้งาน โปรแกรมฮะ... Introduction Google Webdesigner... สามารถดู Tutorials อื่น ๆ จากของ Google เองก็ได้นะที่ช่อง Youtube นี้ครับ... Link: และเข้าไป Downloads โปรแกรมได้ที่เว็บของ Google เองเลยครับ ที่นี่ฮะ... ครับไว้คราวหน้าจะนำโปรแกรมดีดีมาฝาก ทุกท่านอีกครับ ขอบคุณครับ........
Big Data คืออะไร? + วิธีใช้ Hadoop/Spark บน Cloud Dataproc Big Data คืออะไร? + วิธีใช้ Hadoop/Spark บน Cloud Dataproc Suranart Niamcome Nov 7, 2015 Docker คืออะไร + สอนวิธีใช้สไตล์ Web Developer Docker คืออะไร + สอนวิธีใช้สไตล์ Web Developer Suranart Niamcome Aug 30, 2015 Webpack คืออะไร? + สอนวิธีใช้ร่วมกับ React Webpack คืออะไร? + สอนวิธีใช้ร่วมกับ React Suranart Niamcome Jul 26, 2015 Flux คืออะไร? + สอนวิธีนำไปใช้กับ React Flux คืออะไร? + สอนวิธีนำไปใช้กับ React Suranart Niamcome Jun 20, 2015 Isomorphic คืออะไร? + สอนวิธีทำด้วย React Suranart Niamcome May 24, 2015 ECMAScript 6 คืออะไร? + สอนวิธีใช้ Suranart Niamcome Apr 26, 2015 สร้างแอพ Chat ด้วย และ สร้างแอพ Chat ด้วย และ Suranart Niamcome Apr 5, 2015 เรียนรู้การเขียนแอพ Android สไตล์ Front-end Web Developer Suranart Niamcome Feb 23, 2015 เมื่อไรควรจะใช้ Web Animations? Suranart Niamcome Feb 17, 2015 รีวิว Hotjar Web Analytics Tools รีวิว Hotjar Web Analytics Tools Suranart Niamcome Feb 6, 2015 Git คืออะไร Git คืออะไร Suranart Niamcome Jan 30, 2015 ออกแล้ว!
การใช้งานโปรแกรม Google Web Designer - YouTube
เคลื่อนไหวไป 200px ในแนวนอน 2. ลดขนาดลงครึ่งหนึ่ง สมมติว่าคุณกำลังสร้างครีเอทีฟโฆษณาขนาดใหญ่ขึ้น และองค์ประกอบต้องมีขนาด 200x200px คุณก็แค่เลือกคีย์เฟรมแรกและอัปเดตคุณสมบัติ "ความกว้าง" และ "ความสูง" เนื่องจากความกว้างและความสูงไม่ได้ใช้ในการเคลื่อนไหวขององค์ประกอบ สิ่งที่คุณเปลี่ยนแปลงในคีย์เฟรมแรกจะถ่ายทอดไปยังคีย์เฟรมต่างๆ ที่ตามมาทั้งหมด 3. เลือกคีย์เฟรมแรก 4. อัปเดตความกว้างและความสูง ตอนนี้องค์ประกอบจะมีขนาด 200x200px และเคลื่อนผ่านหน้าจอไป 200px โดยมีขนาดลดลงเหลือครึ่งหนึ่ง ดังนี้ 5. คีย์เฟรมที่ 2 6. ความกว้างและความสูงเท่ากับในคีย์เฟรมแรก 7.
ความโปร่งแสง เพิ่มคีย์เฟรมที่ 2 ที่คุณต้องการแสดงองค์ประกอบ ซึ่งในตัวอย่างนี้ จะอยู่ที่เวลา 3s และตั้งค่าความโปร่งแสงขององค์ประกอบเป็น 1 ณ จุดนี้ ถ้าแสดงพรีวิว คุณจะเห็นว่าองค์ประกอบเคลื่อนไหวจากความโปร่งแสง 0 เป็น 1 เนื่องจากการค่อยๆ เปลี่ยนตั้งค่าเป็น linear โดยค่าเริ่มต้น คลิกขวาที่ระยะห่างระหว่างคีย์เฟรมและเปลี่ยนการค่อยๆ เปลี่ยนจาก linear เป็น step-end ณ จุดนี้ องค์ประกอบจะไม่แสดงจนกว่าจะถึงคีย์เฟรมที่ 2 1. ความโปร่งแสง 2. การค่อยๆ เปลี่ยนแบบ step-end เพิ่มคีย์เฟรมที่ 3 ซึ่งในตัวอย่างนี้ จะอยู่ที่เวลา 5s และทำให้องค์ประกอบเคลื่อนไหว (ในตัวอย่างนี้ องค์ประกอบจะเคลื่อนผ่านพื้นที่งาน) หากต้องการซ่อนองค์ประกอบอีกครั้ง ให้เพิ่มคีย์เฟรมอีกรายการหนึ่งที่เวลา 5. 5s และตั้งค่าความโปร่งแสงเป็น 0 และการค่อยๆ เปลี่ยนเป็น step-start 3. ความโปร่งแสง 4. การค่อยๆ เปลี่ยนแบบ step-start 5.
ยังไงก็ติดตามกันได้นะครับ เป็นอีกตัวที่ผมสนใจและก็จะอัพเดตตามเรื่อยๆ ดูเครื่องมือหรือเทคนิคอื่นๆ ได้ในส่วนของ Nextflow Learn หรือสนใจมาอบรมกับผมก็สามารถดูได้ใน Nextflow training และถ้าอยากอัพเดตของใหม่ๆ ไปพร้อมกับคนอื่นๆ ก็สามารถฝาก email ไว้ที่นี่ แล้วผมจะส่ง email แจ้งทุกครั้งที่มีข่าว หรือกิจกรรมใหม่ๆ ถึง inbox ของคุณเลย และที่สำคัญ กำลังใจในการสอนสิ่งใหม่ๆ ของผมก็จะมาจาก comment ให้กำลังใจของคุณ ติชมอะไรก็ฝากไว้ด้านล่างได้เลยนะครับ