[Tutorial] Make Logo Using Photoshop

This tutorial will explain you the easiest way how to make glossy web 2.0 stylish logo for a blog. Simple web image designing technique using Photoshop. I use Photoshop CS2 on this example. As we know that now a days web 2.0 stylish design can be found a lot on the net. So now we'll try to remake our blog to be web 2.0 using cool glossy logo for your blog name. The final result should be like this.
1.Open up new Photoshop document. You can easily do this by hitting Ctrl+N on your keyboard. Set it up like this one below. Just a note, I use 400x400px document just to make us easier in working with this Photoshop.
2. Using text tool, now type your blog name. A word for your blog logo. Set your text font as illustrated below. I use Calibri 48px Bold as my text font. To make it more web 2.0 stylish, you have to use some simple fonts. Suggestion; Calibri, Tahoma, Trebuchet MS, and Segoe UI are working fine.
3. We have to rasterize our text layer. We can do this by clicking Layer menu than Rasterize Type.
4. Before we move up around, we need to set Foreground and Background color at first. Now set it to #ffb60e for Foreground and #ffce00 for background color. We need to do this step for our text gradient at next.
5. Now we'll give some effects to our text layer. Bring Blending option dialogue up by right clicking on the text layer and choose Blending option. Or we can do this by clicking Layer menu, than Layer Style, now choose Blending option. Check drop shadow option and set its attributes like below illustration.
6. We'll also give it outer glow effect. Just set it like illustration below.
7. Now it is time to add one of glossy element. Give our text layer gradient effect by checking Gradient overlay tab. Don't forget to use Foreground to Background overlay. See illustration below.
8. Last effect to add should be Stroke effect. Set stroke size to 5px and set its color to #e58100. Now just press OK button to confirm it.
9. From this step your blog logo should be a bit like this one. It is web 2.0 enough but we'll redesign it to be more stylish. Yes, by giving it a glossy effect.
10. We can make such glossy effect in very simple easy way. Now create a new layer by hitting Ctrl+Shift+N on your keyboard press than OK or just Enter. Now make creative selection using Lasso tool. Use your bright creative brain, just an improvization like this one. I'm not so good on this step, so use your own.
11. Oke you are good. Next step is more simple step. Fill this selection with white (#ffffff) color. Do this by clicking Edit menu than Fill. Or simply hit Shift+F5 buttons. After you do this right now set this layer opacity to 35%.
12. Wow.. our logo now is a web 2.0 logo. And of course we can use it for our blog. If you did it right your logo should be like my logo below. I know you are good in making this logo design. We're done!!
Conclusion
From many steps above we know that making a web 2.0 logo for a blog is not so hard to do. You can improve your creativity in using style, colors, and blending option settings. I know you can do better than me. So if you feel this tutorial is good and you've made a logo from this tutorial, feel free to post it here. Just comment this tutorial. Below is my other final result from this tutorial, just added some glass shadow.

Read More......

[Tutorial] Anim8or: Memberi Efek Pada Model 3D

1. Efek Pada Model 3D

Efek pada permukaan sesebuah model amat penting dalam memberikan ‘feel’ berbeza ke dalam gambaran 3 dimensi. Ianya amat penting untuk mencipta efek material yang dijana pada sesebuah model seperti efek berkilat, bercahaya, malap dan sebagainya. Untuk mendapat keadaan ini, di dalam Material Editor memiliki beberapa Properties yang boleh disetkan untuk memberi efek berbeza bergantung kepada nilai yang diberi pada sesuatu penetapan.

2. Menetapkan Nilai Pada Material Editor

Ikuti langkah berikut untuk mencipta material anda sendiri. Buka perisian Anim8or dan mulalah membina material anda sendiri. Untuk membuat material yang baru, anda boleh klik pada butang Material dan senarai Material Name akan dipaparkan. Daripada situ pula, anda boleh double-click pada ruang New.

Tetingkap berikut akan dipaparkan untuk membolehkan kita setkan sebarang nilai yang dikehendaki dalam membina efek material. Seperti yang kita ketahui sebelum ini, Anim8or memiliki keupayaan untuk menghasilkan material bagi model 3D. Untuk mendapat hasil yang memuaskan dan gambaran material yang sebenar, kita perlu mengambil kira 7 perkara:

1. Ambient
2. Diffuse
3. Specular
4. Emissive
5. Rough
6. Brilliance
7. Transparency

Di sinilah peranan Material Editor mengambil tempatnya dimana kita boleh menjustifikasikan tahap setiap gaya visual yang dikehendaki. Ia akan menjanakan ‘appearence’ yang berbeza mengikut pilihan masing-masing.

AMBIENT – merupakan warna material dalam bayangan.

DIFFUSE – meruapakan ‘warna’ bagi material iaitu gabungan jumlah warna dan cahaya yang memancar pada model yang dimasukkan sebagai warna akhiran.
SPECULAR - sebahagian daripada komponen yang menyebabkan ’sinaran’ dan biasanya disetkan dengan warna putih untuk memberi reflek pada cahaya warna.
EMISSIVE – komponen yang mewakili cahaya yang dijanakan oleh material itu sendiri tetapi tidak berpunca daripada pencahayaan. Ianya menjadikan seolah-olah material berkenaan yang bercahaya.
ROUGHNESS – nilai yang tinggi akan menyebabkan permukaan semakin bersinar. Nilai dari 1 (tidak semua bersinar) hingga ke 100.
TRANSPARENCY -ianya adalah darjah lutsinar sesebuah material. Nilai bermula dari 1.0 ketampakan penuh hingga 0.0 iaitu lutsinar sepenuhnya.
BRILLIANCE – ianya adalah faktor yang mengubah persembahan komponen DIFFUSE. Ia boleh menambah persembahan kepada lebih metalic, warna yang lebih terang dan memperkayakan ‘appearance’ sesebuah material.

3. Contoh Efek Model 3D

Dalam Material Editor ini, anda boleh setkan nilai-nilai tertentu dalam Surface Properties dan juga pewarnan yang menggunakan nilai RGB atau HSL. Contoh-contoh berikut adalah efek yang boleh dihasilkan dengan mengubah nilai pada Surface Properties.

Contoh Efek Artificial

Contoh Efek Keemasan

Contoh Efek Perak

Contoh Efek Marble

Contoh Efek Toon

Contoh Efek Natural

Read More......

[Tutorial] Anim8or: Dari 3D Kepada Efek 2D Toon

1. Pengenalan

Dalam tutorial ini, saya akan menunjukkan kaedah memberikan efek ‘toon’ atau lebih mudah disebut sebagai bentuk kartun. Bentuk biasa yang dirender dalam Anim8or adalah dalam imej 3D, namun ada masanya kita ingin gunakan model 3D yang telah dihasilkan untuk membentuk watak kartun. Sebagai contoh model 3D Doraemon berikut telah diberikan efek ‘toon’ seolah-olah ianya dilukis. Perhatikan perbezaan antara model di sebelah kiri dan sebelah kanan. Ikuti langkah-langkah berikut untuk menghasilkan efek ‘toon’ yang sama. Kita akan gunakan model yang paling ringkas bagi memudahkan proses kefahaman teknik ini.

2. Membentuk Objek 3D Ringkas

Hasilkan sebuah objek ringkas misalnya bentuk sphere atau cube. Misalnya pada ilustrasi di bawah, sebuah sphere telah dibentuk. Pastikan anda meletakkan kedudukan sphere berkenaan ditengah bagi memudahkan kerja penyuntingan model ini nanti.

Untuk melokasikan objek  ini  anda perlu klik pada menu Edit dan pilih  Locate>Centre about Origin.

Tukarkan sifat objek sphere ini kepada Mesh bagi membolehkan ianya diedit dengan klik pada menu Build>Convert to Mesh. Jika  anda perasan, kotak  segiempat  kuning diluar objeks sphere berkenaan   telah bertukar warna kepada putih. Mesh kita telah sedia untuk disunting.

Sekarang, kita akan membentuk pula objek berkenaan supaya menjadi suatu sphere yang lonjong. Pada butang pilihan sebelah kanan, klik pada butang Non-Uniform Scale. Ini diikuti pula dengan klik uncheck pada butang Enable Y-Axis. Tujuan kita uncheck pada butang  Enable Y-Axis  supaya  sebarang pergerakan atau perubahan pada model tidak akan menggugat kedudukan menegak (vertikel) sesebuah objek. Sekarang cuba anda tarik ke kanan atau kiri  dengan menggunakan tetikus dan sesuaikan agar saiznya menepati citarasa anda. Perhatikan ilustrasi berikut.

Sekarang kita telah mempunyai objek 3D paling ringkas sekali. Kita akan gunakan objek ini untuk menguji efek ‘toon’ yang bakal kita hasilkan nanti. Sebelum itu, mari kita render dahulu untuk melihat keadaan 3D objek sphere lonjong ini dengan klik pada menu Render>Render Image…

Sebuah tetingkap yang dikenali sebagai Frame Spec Editor akan dipaparkan. Hanya klik pada butang Ok dan paparan 3D yang telah dirender  akan dihasilkan seperti ilustrasi berikutnya.

Model yang kita ada belum memiliki apa-apa warna pada surface mahu pun texture. Oleh  itu,  kita akan meletakkan pewarnaan yang  sebenarnya memberi  efek kepada hasil render model ini nanti. Sekarang, klik pada butang Material Seterusnya bahagian senarai material sebelah kiri akan dipaparkan. Bahagian ini sebenarnya digunakan untuk menyenaraikan material yang ingin kita gunakan pada model 3D kita. Untuk mensetkan material  kita sendiri, anda cuma perlu double-klik didalam kotak segiempat yang tertulis New tersebut. Hasilnya, sebuah tetingkap Material Editor akan dipaparkan seperti berikut.

Dalam Material Editor  inilah kita akan membuat ketetapan pelbagai tahap, gaya, jenis texture dan sifat permukaan material. Kita boleh hasilkan berbagai-bagai efek permukaan material dengan mengubah sebarang nilai yang boleh ditetapkan didalamnya.

Disini kita boleh memberikan property pada permukaan objek berkenaan seperti warna dan sebagainya. Letakkan warna kesukaan anda, misalnya dalam contoh kita tetapkan R=224, G=240 dan B=88, manakala Ambient=0.1, Diffuse=0.5, Specular=0, Emissive=0, Rough=0, Brilliance=0.1 dan Trans=1.

Klik butang Ok pada Material Editor dan klik butang Apply dalam senarai material. Hasilnya objek yang akan kita perolehi nanti akan seperti berikut.

3. Memberi Efek 2D Toon Pada Objek

Langkah seterusnya ialah kita perlu membuat salinan kepada objek ini. Copy dan Paste objek ini dan gerakkan sedikit ke kiri. Tujuannya ialah untuk menjadikan objek yang telah kita salin ini sebagai kulit luaran apabila dirender nanti. Sekarang kita telah memiliki 2 objek yang sama. bentuk Anda perlu membesarkan sedikit objek yang telah disalin tadi.

Selanjutnya, kita perlu berikan property material yang berlainan untuk objek berkenaan. Buka Material Editor yang baru dan setkan seperti berikut. Dalam kes ini, kita perlu setkan 2 permukaan yang berbeza iaitu Front dan Back. Masukkan nilai-nilai properties seperti dalam ilustrasi berikut.

Apabila selesai, klik butang Ok pada Material Editor dan butang Apply pada senarai material. Hasilnya, objek yang kita salin tadi telah bertukar seperti berikut.

Gerakkan kembali objek berkenaan ke dalam objek asal. Ini bermakna, objek asal yang bewarna kuning akan berada didalam objek salinan tadi. Kita telah hampir kepada hasilnya iaitu sebuah objek yang memiliki Outline atau garisan luar bewarna hitam.

Cuba anda render objek berkenaan dan lihatlah hasilnya.

Read More......

[Tutorial] Game Editor: Membina Permainan 2D Pong (Bahagian 2)

4. Mengaktifkan Pergerakan Bola

Sekarang kita akan memberikan sifat pada actor bola_kuning berkenaan dengan mengikuti langkah berikut. Buka panel actor control bola_kuning terlebih dahulu.

Selesai sahaja, tutup actor control dan uji pergerakan bola berkenaan dengan klik pada menu Game Mode. Hasilnya, bola berkenaan akan mula bergerak 45 darjah ke sebelah kanan sebanyak 8 piksel per bingkai dan terus keluar dari kawasan permainan.

Untuk memberikan pantulan pada dinding_kiri, dinding_kanan dan bar_hijau pada sebarang sentuhan dengan bola berkenaan, buka kembali actor bola_kuning dan ikuti langkah berikut:

5. Mengawal Pergerakan Bar

Kita akan mengawal actor bar_hijau dengan tetikus sahaja. Bar ini hanya mempunyai fungsi boleh bergerak ke kiri dan kanan sahaja. Untuk memberikan sifat ini, buka actor control bar_hijau terlebih dahulu dan ikuti langkah berikutnya.

Sekarang, anda boleh menguji bar berkenaan dengan masuk ke Game Mode. Cuba gerakkan tetikus anda ke kiri dan kanan, sambil menghalang bola berkenaan daripada terkeluar dari kawasan permainan bawah.

Anda akan dapati bola bergerak ke serata arah dalam kawasan permainan dan tidak terkeluar selagi ianya melanggar penghalang iaitu dinding_kiri, dinding_kanan dan bar_hijau. Selagi anda mengawal tetikus dan mempastikan bar_hijau dapat menghalang bola_kuning dari terkeluar dari kawasan permainan, maka selagi itu bola berkenaan aktif bergerak.

6. Sistem Pemarkahan

Untuk memberikan nilai tambah dalam permainan ini, kita boleh meletakkan papan markah sebagai ukuran tahap permainan. Sistem pemarkahan yang ringkas ini akan membantu pemain melihat prestasi semasa mereka. Kita boleh menggunakan font sedia ada dalam komputer mahupun, menggunakan font yang dibuat dari imej format grafik. Untuk tutorial ini, kita akan cuba hasilkan papan markah daripada sebuah imej grafik yang mengandungi angka 0 sehingga 9.

Fail imej dinamakan sebagai papan_markah.png dan ikuti langkah berikutnya. Hasilkan satu actor yang baru dan namakan ianya sebagai papan_markah.

Actor anda akan bertukar kepada bentuk nombor dan menayangkan angka 0 sebanyak 4. Posisikan kedudukan actor papan_markah ini pada penjuru sebelah atas dan kanan kawasan permainan anda seperti berikut.

Setting permulaan dengan angka 0000 digunakan kerana pemarkahan akan dikira dari sifar. Dari itu, angka akan menaik sebanyak mana markah yang diperuntukkan kepada sesuatu aksi. Ini bermakna kita menetapkan bahawa, jumlah maksimum markah yang boleh diperolehi ialah 9999 sahaja.

Bagaimana pula kita integrasikan papan markah ini dengan jumlah markah? Baiklah, berdasarkan kawasan permainan yang telah kita bina, terdapat satu ruang di atas iaitu antara dinding_kiri dan dinding_kanan. Sekiranya bola_kuning tersebut berjaya dimasukkan ke dalam ruang berkenaan, anda akan diberi markah, iaitu ia berperanan sebagai tiang gol!

Langkah seterusnya. Buat sebuah actor jenis Filled Region dan namakannya sebagai penanda_gol. Seperti biasa, anda perlu klik menu Add Actor dan pada panel Add Actor letakkan nama penanda_gol, tukar Type kepada Filled Region dan klik butang Add. Kecilkan saiz actor penanda_gol tersebut (actor berkenaan dalam bentuk segiempat biru yang boleh diubah saiznya). Letakkan pada kedudukan seperti dalam ilustrasi di bawah iaitu ditengah antara dua dinding berkenaan.

Actor penanda_gol ini seolah-olah sebagai pengesan apabila bola_kuning berada pada luar kawasan sasaran dan bola berkenaan bersentuhan dengannya. Berikutnya, kita akan memberikan markah iaitu jumlah markah pada actor papan_markah akan meningkat apabila bola berlanggar dengan actor penanda_gol. Buka panel Actor Control bola_kuning dan ikuti langkah berikutnya.

Berdasarkan langkah tadi, kita akan menambah 10 markah apabila bola_kuning mengenai atau berlanggar dengan actor penanda_gol. Cuba uji permainan ini dengan klik pada Game Mode.

Sekiranya bola berjaya dimasukkan dalam gol, maka 10 markah bertambah. Beginilah sebahagian daripada kaedah membina permainan gaya pong yang ringkas. Anda boleh mencuba sendiri pelbagai gaya lain yang unik untuk menghasilkan permainan anda sendiri. Selamat Berjaya!

Read More......

[Tutorial] Game Editor: Membina Permainan 2D Pong (Bahagian 1)

1. Gaya Permainan

Permainan berasaskan ‘pong’ merupakan jenis permainan paling awal sekali dibina dan mempunyai konsep asas yang mudah. Ianya terkenal sebagai permainan yang dibina untuk menguji keupayaan sesuatu bahasa pengaturcaraan. Ianya terdiri daripada sebuah bola yang melantun antara dinding dan pemain mengawal bar supaya bola berkenaan sentiasa melantun sehingga objektif tertentu dicapai. Terdapat pelbagai jenis serta gaya dalam permainan ini dan ianya boleh jadi apa sahaja bergantung kepada kreativiti pembangunnya. Ianya boleh dihasilkan untuk 2 pemain berlawan antara satu sama lain, boleh juga menentang komputer, dan sebagainya. Permainan dalam tutorial ini memiliki satu antaramuka permainan, bola yang akan dikawal seorang pemain dan dinding kiri kanan yang menghalang bola dari melantun keluar.

2. Kawalan Permainan

Kita akan mengawal pergerakan bar dengan tetikus (mouse). Bar boleh bergerak ke kiri atau ke kanan sahaja. Tugas utama bar ini adalah untuk mengelakkan bola terkeluar dari kawasan permainan dan mengawal arah bola berkenaan.

3. Actor Permainan

Kita akan menggunakan 4 imej asas untuk actor permainan ini iaitu:

Bagi antaramuka permainan ini, kita akan menggunakan window bersaiz 240 x 320 yang kecil. Anda boleh mengubah saiz dengan klik pada menu Config > Game Properties. Dalam panel Game Properties, ubah saiz Game resolution berkenaan kepada 240 x 320 dan tutup panel berkenaan. Anda boleh menguji terlebih dahulu saiz resolusi permainan ini dengan klik pada menu Game mode. Hasilnya, tingkap berikut dipaparkan. Tekan kekunci Escape atau klik pada butang tutup (butang X pada penjuru kanan window).

Sekarang, anda telah kembali semula ke menu penyunting utama Game Editor. Hasilkan pula actor dinding_kiri dengan klik pada menu Add Actor, dan di dalam panel Add Actor, taipkan nama dinding_kiri.

Selesai sahaja klik pada butang Add dan satu imej pacman dipaparkan.

Sekarang, anda telah memiliki actor dinding_kiri yang diwakili oleh imej pacman berkenaan, dan perlu masukkan animasi imej dinding_kiri.png ke dalam actor berkenaan. Ikuti langkah berikut untuk memasukkan imej berkenaan (setiap langkah adalah berdasarkan panel aktif yang dipaparkan). Buka panel Actor Control bagi dinding_kiri terlebih dahulu.

Actor berkenaan menggunakan imej dinding_kiri.png dan anda boleh letakkan imej berkenaan seperti berikut:

Ulangi langkah yang sama seperti sebelum ini untuk membina actor-actor lain iaitu bar_hijau, bola_kuning dan dinding_kanan. Selepas itu, susun actor-actor yang telah dibina tadi seperti dalam ilustrasi berikutnya:

Main Editor

Sekarang, kita telah memiliki asas antaramuka permainan ini. Tujuan actor dinding_kiri dan dinding_kanan adalah untuk menghalang actor bola_kuning daripada keluar daripada kawasan permainan. Actor bar_hijau pula adalah bar yang akan dikawal pemain supaya dapat mengelakkan bola berkenaan daripada keluar dari kawasan permainan di bawah. Ianya akan melantun setiap kali terkena kedua-dua dinding dan bar berkenaan.

Sekiranya anda perhatikan betul-betul, terdapat satu ruang kecil diatas diantara kedua-dua dinding_kiri dan dinding_kanan. Ianya seolah-olah pintu sebuah palang gol. Jadi, kita boleh gunakan ruangan ini untuk memberikan markah sekiranya pemain berjaya memasukkan bola_kuning ke dalam ruang gol ini.

Read More......