mgdw4 online camp #5b: how to use gimp

Mobile Games Developer War 4: Online Camp

MGDW4 Online Camp #5b

Game Artist: How to use GIMP


Pengenalan Tools GIMP

Toolbox



Paint Tools



Selection Tools



Transform Tools



Color Tools



Other


Tips

-Bekerjalah menggunakan layer ( Ctrl + Shift + N)

-Biasakan save selalu ( Ctrl + S )

-Atur sendiri shorcut kalian ( Edit > Keyboard Shortcut)


LET’S DRAW !- Buat gambar berdasarkan referensi yang telah kalian kumpulkan- Diskusi gambar yang sudah dibuat


Pixel Art for Mobile Game


Definisi Pixel ArtSuatu bentuk seni digital, yang dibuat menggunakan software grafis raster, dimana gambar 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


Contoh Pixel Art

http://en.wikipedia.org/wiki/Pixel_art

http://www.ilmuwebsite.com/images/pixelart/bots1.png

http://en.wikipedia.org/wiki/Pixel_art




PIXEL ART


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


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)


WORKFLOW PIXEL ART ARTIST

Hindari jaggy (membuat garis terlihat tidak rata)

Credit to Derek Yu (www.Derekyu.com)

Muncul karena ada bagian yang lebih kecil atau lebih besar

Pastikan penambahan atau pengurangan line pada garis kurva

konsisten



1. Membuat sketsa

2. Membuat Outline dari sketsa (Outline jangan terlalu kasar)




3. Memberi warna dasar


JANGAN ! :• Jangan gunakan warna gradient• Jangan menggunakan warna yang terlalu mirip dengan yang lainnya



4. Shading :


Menentukan arah sumber cahaya Shading Soft Shadow Highlights



5. Dithering ( teknik untuk mendapatkan beberapa nuansa tanpa menggukanan banyak warna)




6. Menghaluskan Outline


mengganti warna outline hitam dengan warna yang mendekati warna

sprite.Tingkat keterangan warna tergantung dari arah sumber cahaya

Mengganti outlinemenjadi highlight

Menghilangkan outline hitam

Credit to natomic studio (www.natomic.com)



8. Menambahkan anti alias ( menambahkan intermediary colors untuk menghaluskan outline.)




9. Finishing

THANKS TO DEREK YU =)


http://www.pixeljoint.com/


SPRITE SHEET

• Animasi dari suatu karakter/objek• Sprite yang satu yang sprite yang

lain harus memiliki ukuran yang sama


SPRITE SHEET (GIMP)

• Menggunakan SpriteSheet.scm ({GIMP-HOME}\share\gimp\2.0\scripts\SpriteSheet.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


ANIMATION (.GIF)• Preview spritesheet• Filters > Animation > Playback

• Save Image :

1. File Type (GIF IMAGE)

2. Export File : Save As Animation

3. One frame per layer (replace)


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)


PNG-8

256 Colors 32 Colors 16 Colors 8 Colors



• Gunakkan Dithering untuk mendapatkan suasana yang berbeda-beda dengan warna yang disediakan

Credit to :-kiwinuptuo-d38pbk5-http://pixel.oceansdream.net-spriteland.com-http://www.wikihow.com



• Jangan terlalu banyak menggunakan anti alias

• Buatlah asset yang efektif/efesien• Size keseluruhan game standarnya sekitar

500kb. Target dibawah 1mb


Background – Paralax use layering

Sumber : spriters-resource.com

Layer 1 Layer 2 Layer 3 Layering


Tiles


Background


• Untuk menyelesaikan materi, isi form di link ini: http://bit.ly/KF6Pg4

• Untuk pertanyaan atau diskusi bisa dilakukan di forum: http://bit.ly/mgdw4forum

http://bit.ly/KF6Pg4



http://bit.ly/mgdw4forum

mgdw4 online camp #5b: how to use gimp

Education

mobile games developer

online campmgdw4 online

online campanimation

online camppixel art

online camphttp

online camp lets

online camp workspacegimp

pixel art1