การออกแบบ Graphical User Interface Applications

การออกแบบ Graphical User Interface Applications

ชื่อ App : PUN PUN (ปั่น ปั่น)
เป็นApp เกี่ยวกับ : สูตรของน้ำปั่นมากมายแบบฟรีๆและแชร์ไปยัง Facebook Line และ Instagram ได้อีกด้วย
มีความแตกต่างอย่างไร : เราอาจจะเห็นภาพที่เป็น Vector เป็นส่วนใหญ่ เลยคิดว่าการนำการวาดสีน้ำมาประกอบช่วยให้Appดูแตกต่างและสวยงามมากขึ้น
กาเลือกใช้โทนสี : เลือกใช้โทนสีพาสเทล จะเป็นฟ้าอมเขียว เพราะอยากให้งานดูหวานแนวผู้หญิงหน่อย แต่ไม่ต้องจ๋ามาก อีกอย่างเพราะชอบโทนสีนี้มากๆ

แบบ Sketch

หน้าต่างๆ Icon และหน้าต่างๆของ App

POP APP

ออกแบบภาพเคลื่อนไหวไฟล์ .GIF จาก สติ๊กเกอร์ไลน์

การทำ VDO ให้เป็นไฟล์ GIF

การทำ VDO ให้เป็นไฟล์ GIF

   การทำ VDO ให้เป็นไฟล์ GIF นั้น มีหลายวิธีมากมาย เช่น 

1.ใช้ MPEG Streamclip 

2.ดาวน์โหลดโปรแกรมติดตั้ง Licecap 

3.แปลงวิดีโอ YouTube GIF ออนไลน์

4.Photoshop 

  

เราจะมาลองใช้วิธีที่ง่ายกัน คือ "แปลงวิดีโอ YouTube GIF ออนไลน์"

1. เข้าไปที่ https://imgflip.com/gifgenerator

2.เลือกลิงค์ video ที่อยากทำ สมมุติ https://www.youtube.com/watch?v=kOkQ4T5WO9E
เอาไปใส่ที่

 3.เลือกช่วงที่จะเอา

4.จะเลือกครอบก็สามารถทำได้

เสร็จแล้วก็กดเจเนอเรด ก็จะได้มาเลย

ที่มา : http://pantip.com/topic/33202607

ข้อแตกต่างในการออกแบบเว็บไซท์ในโปรแกรมคอมพิวเตอร์ กับ การใช้ฟรีซอฟท์แวร์สำเร็จรูป(Wordpress)

1.โปรแกรมมีความสับซ้อน : Wordpress มีขั้นตอนที่ง่ายกว่า
2.โปรแกรมสามารถทำตามแบบที่เราต้องการได้ : Wordpress ไม่สามารถทำตามได้แบบที่เราต้องการ
3.โปรแกรมเราต้องออกแบบเองทุกอย่าง : Wordpress มีรูปแบบมาให้เลือกมากมาย
4.โปรแกรมไม่ต้องใช้อินเตอร์เน็ตก็สามารถทำได้ : Wordpress ต้องใช้อินเตอร์เน็ตในการทำงาน
5.โปรแกรมบางครั้งถ้าเราจำเป็นต้องใช้เครื่องอื่น ก็จะไม่สามารถทำได้ เพราะบางครั้งฟร้อนที่เราใช้ไม่มีบ้างก็ต้องไปหาโหลดอีก : Wordpress สามารถใช้คอมเครื่องไหนทำก็ได้แค่มีอินเตอร์เน็ตก็พอ

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

ขั้นตอนและการใช้งาน Wordpress

WordPress คืออะไร

   WordPress คือ โปรแกรมสำเร็จรูปที่มีไว้เพื่อสร้างและจัดการเนื้อหาบนอินเตอร์เน็ต ( Contents Management System หรือ CMS) กล่าวคือ แทนที่เราจะดาวโหลดโปรแกรมมาทำการสร้างและออกแบบเว็บไซต์บนเครื่องคอมพิวเตอร์ของเราอย่างเช่น Macromedia Dreamwaver, Microsoft Fontpage (มีใครทันรึเปล่า) เป็นต้น แต่ CMS นั้นถูกสร้างมาเพื่อใช้งานบนอินเตอร์เน็ตโดยตรง หมายความว่าเมื่อคุณจะใช้งานโปรแกรมนี้ คุณก็สามารถใช้ได้ทันทีผ่านอินเตอร์เน็ต เพียงแค่คุณล็อกอินเข้าสู่ระบบจัดการของ CMS นั้นๆ บางคนอาจจะคุ้นหูกับ cms เจ้าอื่น เช่น  joomla, simple machines, open cart, magento เป็นต้น

ขั้นตอนและการใช้งาน Wordpress 

ลิ้งเว็บ : https://travelingisfunsite.wordpress.com/

ข่าวสารเกี่ยวกับเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

 

วิธีปรับแก้ไขและ crop ภาพ บนเว็บไซต์ Google Photos

หากคุณเป็นผู้ใช้สมาร์ทโฟนที่ชอบถ่ายรูปเยอะๆ หรือช่างภาพที่มีรูปเยอะๆจนจะเต็มการ์ด Memory หลายท่านก็เริ่มหันมาใช้ Google Photos กันแล้วซึ่งสามารถเก็บรูปภาพได้ไม่จำกัด และยังสร้างลูกเล่นใหม่ๆสนุกๆทั้งคลิปไฮไลต์ GIF Animation รวมถึงการทำเป็น Story และแชร์ภาพให้เพื่อนๆได้เพิ่มภาพลงอัลบั้มร่วมกับเราได้ แต่ไม่ใช่เท่านี้ เว็บไซต์ Google Photos ยังสามารถปรับแก้ไขภาพและ Crop รูปภาพได้ด้วย

วิธีการคือเข้าเว็บไซต์ http://photos.google.com (ทำการ sign in ด้วยบัญชี Google ของเรา) จากนั้นเลือกรูปที่ต้องการจะปรับภาพหรือแก้ไขภาพสักรูปนึง

เมื่อเข้าที่รูปแล้ว คลิกที่ปุ่มไอคอนปากกา (ตามลูกศรชี้) เพื่อแก้ไขรูปภาพ

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

หากคลิกไอคอนต่อมา จะเป็นการใช้ฟิลเตอร์ เหมือน Instagram เลือก ฟิลเตอร์ที่เหมาะกับรูปภาพของเรา และปรับความเข้มของฟิลเตอร์ได้ตามต้องการ

คราวนี้มาแตะไอคอนต่อมา ซึ่งไว้ใช้สำหรับการ Crop รูปภาพและหมุนรูปภาพ

เมื่อคลิกแล้วจะเข้าสู่หน้าจอการ crop รูปภาพและการหมุนรูปภาพ คุณสามารถปรับเอียงภาพกรณีถ่ายเอียงให้ภาพดูตรงได้ตามต้องการ และสามารถ crop ตัดภาพตามสัดส่วนของภาพ หรือจะตัด crop แบบกำหนดเองได้

กรณีคลิกตัดภาพตามสัดส่วนของภาพ จะแสดงรูปแบบการ Crop ตัดภาพให้เลือก เช่น สี่เหลี่ยมจตุรัส 16:9 , 4:3 ให้เลือกด้วย

คราวนี้เมื่อแก้ไขภาพเสร็จ แนะนำให้แตะที่ไอคอน 3 จุด ดังรูป เพื่อ save ภาพแบบสำเนาภาพไว้ ไม่ให้บันทึกทับกับภาพต้นฉบับ แค่นี้ก็ได้ภาพใหม่ที่มีการปรับแต่งภาพ Crop ภาพ จาก Google Photos แล้ว
ข้อมูลจาก Google Plus Google Photos

ที่มา : http://www.it24hrs.com/2016/crop-edit-picture-google-photo/

Mind Map เทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

 ใช้ Google Drawings ในการทำ MindMap online

https://docs.google.com/drawings/d/1SG5nQThZ_Qo1lYc_6BZa4Fa6Ns2_abmvW8xoTwO6L7U/edit?usp=sharing