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

-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

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)

• Save Image :

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)

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

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

MGDW4 Online Camp #5b: How to use gimp

Education

GIMP – Esercitazione 1 · EIS – GIMP Facoltà di Lettere e Filosofia GIMP Software libero per l’elaborazione delle immagini GIMP = Gnu Image Manipulation Program Alternativa

GIMP Brightness and Contrast - Wofford Collegewebs.wofford.edu/whisnantdm/Courses/CS101/GIMP/GIMP 02 Brightness and Contrast.pdfLesson 2 GIMP – Brightness and Contrast February 28,

MGDW4 Game Template: Tower defense

Chapter 5B Modern CPUs. 5B- 2 Different Processors 5B- 2

5B/254G 5B/254M 5B/255M 5B/256M 5B/257M 5B/258M · Title: 5B/254G 5B/254M 5B/255M 5B/256M 5B/257M 5B/258M Author: STC Subject: FP-2001-09-21 Created Date: 9/22/2001 12:58:43 AM

MGDW4 Online Camp #2 (Game loop, game logic, dan game input)

Practica gimp

Tutorial Gimp Open source image-editing Gimp Gimp: Going ... · Tutorial Gimp Gimp Tutorial September 2009LXF122 83 If you missed last issue Call 0870 837 4773 or +44 1858 438795

Tutorial Gimp Open source image-editing Gimp Gimp: Product

Tutorial Gimp Open source image-editing Gimp Gimp: Create ...index-of.co.uk/DG-LIBRE/LXF121.tut_gimp.pdf · Tutorial Gimp Gimp Tutorial August 2009LXF121 83 If you missed last issue

APRENDEMOS A TRABAJAR CON GIMP 0.pdf - created by ...iesbdebraganza.juntaextremadura.net › ... › 09 › ...gimp.pdfUnidad 0 Conociendo GIMP 3 Iniciar GIMP Para empezar con GIMP

GIMP Tutorial Efectos en Gimp 2

Practicasguiadas gimp

Bildbearbeitung GIMP€¦ · GIMP Bildschirmfenster Werkzeuge ----- geöffnetes Bild mit Infos in der Titelleiste und die einzelnen Bilder als Ebenen Was heisst GIMP! GIMP ist ein

TUTORIAL GIMP ARCHIVOS EPS EN GIMP!

INTRODUZIONE A GIMP - mcurie.edu.it · INTRODUZIONE A GIMP •GIMP è uno strumento multipiattaforma per l'elaborazione di immagini fotografiche e l‘acronimo GIMP sta appunto per

MGDW4 Online Camp #5 - Game Artist Workflow

MGDW4 Online Camp #3a: Primitive Graphics

DPF ZW40-5B .ZW50-5B .ZW80-5B .ZWIOO-5B .ZW120-5B …park8.wakwak.com/~kitakantotcm/201619jyosetu.pdf · .zw80-5b .zwioo-5b .zw120-5b .zw180-5b (doc) (zw80/100/120/180-5) zwao-5b

Tutorial Gimp Open source image-editing Gimp Gimp: Enhance ... · % tar xvzf gps_v1.0.tar.gz % cd gps_v1.0 % cp -r * ~/.Gimp-2.6/ Gimp window layout The installation of GPS is copied