Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MGDW4 Online Camp #5b: How to use gimp

744 views

Published on

  • Be the first to comment

  • Be the first to like this

MGDW4 Online Camp #5b: How to use gimp

  1. 1. Mobile Games Developer War 4: Online CampMGDW4 Online Camp #5b Game Artist: How to use GIMP
  2. 2. Mobile Games Developer War 4: Online CampPengenalan Tools GIMP Toolbox
  3. 3. Mobile Games Developer War 4: Online CampPengenalan Tools GIMP Paint Tools
  4. 4. Mobile Games Developer War 4: Online CampPengenalan Tools GIMP Selection Tools
  5. 5. Mobile Games Developer War 4: Online CampPengenalan Tools GIMP Transform Tools
  6. 6. Mobile Games Developer War 4: Online CampPengenalan Tools GIMP Color Tools
  7. 7. Mobile Games Developer War 4: Online CampPengenalan Tools GIMP Other
  8. 8. Mobile Games Developer War 4: Online Camp Tips-Bekerjalah menggunakan layer ( Ctrl + Shift + N)-Biasakan save selalu ( Ctrl + S )-Atur sendiri shorcut kalian ( Edit > Keyboard Shortcut)
  9. 9. Mobile Games Developer War 4: Online Camp LET’S DRAW !- Buat gambar berdasarkan referensi yang telah kaliankumpulkan- Diskusi gambar yang sudah dibuat
  10. 10. Mobile Games Developer War 4: Online CampPixel Art for Mobile Game
  11. 11. Mobile Games Developer War 4: Online Camp Definisi Pixel ArtSuatu bentuk seni digital, yang dibuat menggunakan software grafis raster, dimanagambar akan diedit pada tingkat pixel. Pixel art sering digunakan ketika game komputer berbasis 2D pertama kali muncul. Lalu jarang digunakan ketika teknologi 3D berkembang. Sekarang dengan adanya game mobile atau gadget seperti GBA, NDS, dll, pixel art pun sering digunakan kembali
  12. 12. Mobile Games Developer War 4: Online Camp Contoh Pixel Art http://en.wikipedia.org/wiki/Pixel_arthttp://www.ilmuwebsite.com/images/pixelart/bots1.png
  13. 13. Mobile Games Developer War 4: Online CampPIXEL ART
  14. 14. Mobile Games Developer War 4: Online Camp Why Pixel Art1. Pixel art cocok untuk game mobile yang memiliki resolusi layar yang kecil, ketimbang menggunakan vector art yang di resize2. Pixel art dapat menyerupai game 3D dengan menggunakan teknik isometric3. Pixel art dapat menghemat ukuran file game, dengan menggunakan PNG – 8 Isometric Non – isometric
  15. 15. Mobile Games Developer War 4: Online Camp WORKSPACEGIMP 2• Small resolusi (100x100,etc)• Pencil tool /Q (Scale : 1)• Eraser tool /W( Hard edge )• Create New layer (Ctrl+Shift+N)PHOTOSHOP• Preferences (Ctrl + K)
  16. 16. Mobile Games Developer War 4: Online Camp WORKFLOW PIXEL ART ARTIST Hindari jaggy (membuat garis terlihat tidak rata)Muncul karena ada bagian yang Pastikan penambahan atau lebih kecil atau lebih besar pengurangan line pada garis kurva konsisten Credit to Derek Yu (www.Derekyu.com)
  17. 17. Mobile Games Developer War 4: Online Camp WORKFLOW PIXEL ART ARTIST1. Membuat sketsa2. Membuat Outline dari sketsa (Outline jangan terlalu kasar) Credit to Derek Yu (www.Derekyu.com)
  18. 18. Mobile Games Developer War 4: Online Camp WORKFLOW PIXEL ART ARTIST3. Memberi warna dasar JANGAN ! : • Jangan gunakan warna gradient • Jangan menggunakan warna yang terlalu mirip dengan yang lainnya Credit to Derek Yu (www.Derekyu.com)
  19. 19. Mobile Games Developer War 4: Online Camp WORKFLOW PIXEL ART ARTIST 4. Shading :Menentukan arah sumber cahaya Shading Soft Shadow Highlights Credit to Derek Yu (www.Derekyu.com)
  20. 20. Mobile Games Developer War 4: Online Camp WORKFLOW PIXEL ART ARTIST5. Dithering ( teknik untuk mendapatkan beberapa nuansa tanpa menggukanan banyak warna) Credit to Derek Yu (www.Derekyu.com)
  21. 21. Mobile Games Developer War 4: Online Camp WORKFLOW PIXEL ART ARTIST6. Menghaluskan Outline Mengganti outline menjadi highlight mengganti warna outline hitam dengan warna yang mendekati warna sprite.Tingkat keterangan warna Menghilangkan outline hitam tergantung dari arah sumber cahaya Credit to Derek Yu (www.Derekyu.com) Credit to natomic studio (www.natomic.com)
  22. 22. Mobile Games Developer War 4: Online Camp WORKFLOW PIXEL ART ARTIST8. Menambahkan anti alias ( menambahkan intermediary colors untuk menghaluskan outline.) Credit to Derek Yu (www.Derekyu.com)
  23. 23. Mobile Games Developer War 4: Online Camp WORKFLOW PIXEL ART ARTIST9. Finishing THANKS TO DEREK YU =)
  24. 24. Mobile Games Developer War 4: Online Camp http://www.pixeljoint.com/
  25. 25. Mobile Games Developer War 4: Online Camp SPRITE SHEET• Animasi dari suatu karakter/objek• Sprite yang satu yang sprite yang lain harus memiliki ukuran yang sama
  26. 26. Mobile Games Developer War 4: Online Camp SPRITE SHEET (GIMP)• Menggunakan SpriteSheet.scm ({GIMP-HOME}sharegimp2.0scriptsSpriteSheet.scm )• Filters > Sprite-Sheet > Create From Layers.• Jangan lupa image tiap layer lebarnya harus menyesuaikan lebar layar ( Klik kanan layer >> Layer to image size)• Save .png
  27. 27. Mobile Games Developer War 4: Online Camp ANIMATION (.GIF)• Preview spritesheet• Filters > Animation > Playback• Save Image :1. File Type (GIF IMAGE)2. Export File : Save As Animation3. One frame per layer (replace)
  28. 28. Mobile Games Developer War 4: Online Camp ANIMATION (.GIF)• Preview spritesheet• Filters > Animation > Playback• Save Image :1. File Type (GIF IMAGE)2. Export File : Save As Animation3. One frame per layer (replace)
  29. 29. Mobile Games Developer War 4: Online Camp ANIMATION (.GIF)• Preview spritesheet• Filters > Animation > Playback• Save Image :1. File Type (GIF IMAGE)2. Export File : Save As Animation3. One frame per layer (replace)
  30. 30. Mobile Games Developer War 4: Online Camp Pixel Art For Game Mobile• Jangan menggunakan terlalu banyak warna dalam 1 objek• Kompresi file size bisa dilakukan dengan save sebagai PNG-8 = 8/16/32 colors) Files > Save for web & devices (Alt+Shift+Ctrl+S)
  31. 31. Mobile Games Developer War 4: Online Camp
  32. 32. Mobile Games Developer War 4: Online Camp
  33. 33. Mobile Games Developer War 4: Online Camp
  34. 34. Mobile Games Developer War 4: Online Camp
  35. 35. Mobile Games Developer War 4: Online Camp PNG-8256 Colors 32 Colors 16 Colors 8 Colors
  36. 36. Mobile Games Developer War 4: Online Camp Pixel Art For Game Mobile• Gunakkan Dithering untuk mendapatkan suasana yang berbeda-beda dengan warna yang disediakanCredit to :-kiwinuptuo-d38pbk5-http://pixel.oceansdream.net-spriteland.com-http://www.wikihow.com
  37. 37. Mobile Games Developer War 4: Online Camp
  38. 38. Mobile Games Developer War 4: Online Camp Pixel Art For Game Mobile• Jangan terlalu banyak menggunakan anti alias• Buatlah asset yang efektif/efesien• Size keseluruhan game standarnya sekitar 500kb. Target dibawah 1mb
  39. 39. Mobile Games Developer War 4: Online CampBackground – Paralax use layering Layer 1 Layer 2 Layer 3 Layering Sumber : spriters-resource.com
  40. 40. Mobile Games Developer War 4: Online Camp Tiles
  41. 41. Mobile Games Developer War 4: Online CampBackground
  42. 42. Mobile Games Developer War 4: Online Camp• Untuk menyelesaikan materi, isi form di link ini: http://bit.ly/KF6Pg4• Untuk pertanyaan atau diskusi bisa dilakukan di forum: http://bit.ly/mgdw4forum

×