Melakukan Pembatalan Perubahan Arah Pandang Viewport

•Desember 13, 2012 • Tinggalkan sebuah Komentar

Jika Anda ingin membatalkan perubahan suatu objek 3D di Viewport , Anda bisa menggunakan fitur Undo. Namun bagaimana jika Anda ingin membatalkan perubahan suatu arah pandang Viewport?…

Anda tidak bisa menggunakan fitur Undo tersebut karena fitur ini hanya berlaku pada objek-objek 3d yang berubah saja. Solusinya, Anda harus memakai fitur Undo View Change.

Latihan dan Caranya :

1. Buka sebuah file 3DS Max yang Anda punya

Gambar 01. Sebuah File 3DS Max

2. Anda putar- putar view pandangan Viewport Perspektif dengan menggunakan tombol Arc Rotate

Gambar 02. Perubahan Arah Pandang Viewport Perspective

3. Bila Anda ingin mengembalikan ke pandangan yang sebelumnya, klik menu Views > Undo View Change. Maka View Perspective akan kembali ke pandangan yang sebelumnya

Gambar 03. Undo View Change

Terima Kasih dan Semoga Bermanfaat…

Selamat mencoba tutorial Pembatalan Perubahan Arah Pandang Viewport agar anda lebih ahli di bidang 3D
Tutorials ini diarsipkan di website ilmugrafis pada kategori 3DS Max, pelajari juga tutorial sebelumnya yaitu Merubah Tampilan Layout 3d MAX dan tutorial selanjutnya kita akan belajar yaitu Keunggulan dan Feature 3D Animation Dengan 3ds Max
Semoga bermanfaat. Salam.

Membuat Pigura dan Bingkai Lukisan atau Foto

•Desember 13, 2012 • Tinggalkan sebuah Komentar

Anda dapat membuat modeling objek berupa pigura lukisan atau bingkai/frame foto dalam 3ds max dengan menggunakan fitur Bevel Profile. Bevel Profile berfungsi membuat objek 2 Dimensi menjadi objek 3 Dimensi dengan menggunakan bentuk objek 2 Dimensi lainnya sebagai pembentuknya.

Berikut panduannya.

Langkah 1
Anda buat sebuah objek Rectangle dengan ukuran berikut

Gambar 01. Parameter Objek Rectangle

Langkah 2
Lalu buat juga sebuah objek Star dengan ukuran berikut

Gambar 02. Parameter Objek Star

Langkah 3
Hasilnya menjadi seperti gambar dibawah ini

Gambar 03. Bentuk Objek Rectangle dan Star

Langkah 4
Selanjutnya Anda pilih objek Rectangle, lalu buka kotak Modifier List (berada di tab Modify) dan berikan Modifier Bevel Profile

Gambar 04. Bentuk Objek Rectangle dan Star

Langkah 5
Kemudian klik tombol Pick Profile dan klik objek Star di Viewport

Gambar 05. Tombol Pick Profile

Langkah 6
Bentuknya akan menjadi seperti gambar dibawah.

Gambar 06. Bentuk Objek Setelah Pemberian Bevel Profile

Langkah 7
Anda Render objek tersebut.

Tutorial ini diarsipkan di ilmugrafis pada kategori 3DS Max. Selamat mencoba Membuat Pigura dan Bingkai Lukisan pada Foto, pelajari juga tutorial sebelumnya yaitu Membuat Sendiri Background Awan dan tutorial selanjutnya kita akan belajar yaitu Membuat dan Menambahkan Background pada Viewport
Semoga bermanfaat. Salam.

Membuat Server Lokal pada Laptop atau PC

•Desember 13, 2012 • Tinggalkan sebuah Komentar

Pada tutorial Website kali ini kita akan sedikit belajar tentang bagaimana cara membuat komputer atau laptop kita menjadi sebuah server (web server lokal atau dikenal dengan localhost). Server ini gunanya untuk menjalankan pemrograman PHP yang disertai DATABASE dan MySQL, JQUERY, maupun AJAX karena untuk menjalankan program – program scripting kita perlu menggunakan SERVER. Nah sebagai pemula maka kita terlebih dahulu belajar membuat website secara offline bukan? untuk itulah perlunya membuat server di PC atau Laptop kita sehingga kita bisa mengetes Program maupun Script yang telah kita buat.

Sebagai contoh, dalam keadaan OFFLINE web berformat *.Php dengan berformat *.Html. keduanya sama – sama bentuk extensi dari sebuah halaman website, namun ketika kita mengakses web dengan extensi php maka file web tersebut tidak akan terbuka pada browser kita. coba jika extensi tersebut adalah html (web statis) maka meskipun tanpa bantuan server, halaman web tersebut akan tetap bisa terbaca oleh browser kita.

Disini saya memberikan contoh file php dan contoh file html. bisa Didownload disini, agar tahu perbedaannya buka kedua file tersebut menggunakan browser anda (bisa firefox, chrome, internet explorer, safari, opera, dll)

Nah sekarang kembali ke cara membuatnya severnya (web server lokal atau localhost) bagaimana?
Ada beberapa jenis Software untuk Membangun Web Server lokal atau Localhost yang support Windows diantaranya adalah :

1. WampServer, Download di http://www.wampserver.com
2. XAMPP, Download di http://www.apachefriends.org/en/xampp-windows.html
3. AppServ, Download di http://www.appservnetwork.com
4. Php Triad, bisa dicari di Google Search atau http://sourceforge.net/projects/phptriad/

Software di atas merupakan gabungan dari php, mysql database dan apache. Semuanya memiliki fungsi dan kemampuan yang sama untuk membangun sebuah Webserver lokal pada Komputer PC maupun Laptop anda. Tidak perlu di instal semuanya, cukup pilih salah satu saja program dari 4 program yang saya contohkan di atas, disini saya menggunakan XAMPP. Program XAMPP merupakan sebuah paket instalasi untuk PHP, APACHE dan MySQL. Dengan menggunakan XAMPP, kita tidak perlu lagi repot menginstall ketiga software itu secara terpisah.

Bagaimana cara instalasinya? Seperti biasa tinggal download lalu instal seperti program windows pada umumnya.

Setelah selesai instalasi Langkah selanjutnya adalah menjalankan servicenya, maka Jalankan file xampp
Caranya:
1. klik kiri2x XAMPP Control Panel yang ada di desktop. Atau anda juga dapat menjalankan XAMPP Control Panel dari menu Start -> All Programs -> apachefriends -> xampp -> xampp control panel
xampp control panel
Tekan Start pada Apache dan MySql

2. Buka web browser anda, lalu ketikkan —> http://localhost <lalu tekan enter>. Jika tampilannya seperti di bawah ini, maka apache sudah terinstall dengan benar
xampp
3. Dari tampilan yang muncul Anda dapat melakukan berbagai administrasi untuk server Anda termasuk membuat database SQL di Phpmyadmin, pilih English
xampp

4. Untuk menonaktifkan server lokal Anda, keluar dari XAMPP Control Panel. Caranya, pada XAMPP Control Panel, klik [Stop] pada masing-masing [Apache] dan [MySql], lalu tutup jendela kontrol panel (klik X pada pojok kanan atas)

5. Agar terbaca pada server maka kita harus meletakkan file – file php kita di document root milik XAMPP terletak pada folder
(jika anda menginstal di directory file C) maka C:\Program Files\apachefriends\xampp\htdocs\(folder web anda)\index.php
Contoh: disini saya membuat offline http://www.ilmugrafis.com , maka di dalam htdocs saya membuat folder bernama “http://www.ilmugrafis.com” untuk project saya
(catatan penting: index.php –> file pertama yang dibaca oleh browser adalah index jadi untuk halaman utama wajib diberi nama index.php)

Untuk mengakses filenya, di browser tinggal ketik, http://localhost/(nama folder yang ada di htdocs)/index.php
Contoh: http://localhost/www.ilmugrafis.com/index.php

Maka di browser akan tampil isi dari index.php yang ada di folder http://www.ilmugrafis.com

Menarik bukan bermain web server di Komputer / Laptop. hehehe… Tunggu tutorial selanjutnya yang lebih seru, seperti membuat database sederhana di Server lokal, JQuery, dll
Terima kasih, Semoga Bermanfaat ^_^/

Membuat Drop Down Menu Sederhana di Website

•Desember 13, 2012 • Tinggalkan sebuah Komentar

Pada tutorial Dreamweaver kali ini saya akan mencoba memberikan penjelasan bagaimana cara membuat drop down menu yang simple dan sederhana agar bisa dan mudah dipelajari serta dikembangkan mungkin nantinya oleh para calon web developer maupun web designer yang singgah di website ilmugrafis. Sedikit penjelasan, Dropdown Menu merupakan menu yang bila kita sorot dengan mouse maka menu tersebut akan memunculkan menu yang lain (sub menu). Saat ini banyak sekali yang sudah menggunakan Drop Down menu karena alasan terlihat lebih modern dan canggih, menambah keindahan website sampai menghemat space/ruang di websitenya karena dengan drop down kita bisa memberikan sub menu tersembunyi pada menu di website kita.

Ok, mari kita mencoba membuatnya:

1. Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8 karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk semua dreamweaver
(start >> all program >> Dreamweaver)

2. buat CSS file, caranya. Klik File >> New >> Tab General >> Basic Page >> Css
membuat css

tulis Kode CSS di bawah ini

/* CSS untuk drop down menu dimulai */
ul
{
list-style:none;
padding:0px;
margin:0px
}

ul li
{
display:inline;
float:left;
}

ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
font-family:verdana;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}

ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}

ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}

ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}

ul li.sublinks
{
display:none;
}

/* CSS drop down menu sederhana end */

wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru anda buat dengan dreamweaver,
memasukkan css
save dan beri nama “dropdown.css”

3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena jika memilih format PHP butuh bantuan Sever untuk mengoprasikannya
caranya mirip css tadi, cuma urutannya File >> New >> Basic Page >> Html >> Ok
sekarang panggil css yang kita buat, caranya:
css oke
klik browse, lalu ambil “dropdown.css”, OK
Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html kita.
code css
itu artinya style (CSS) yang kita buat telah masuk ke halaman html

4. Masukkan kode ini ke code html kita. pilih code

<!– Menu Pertama Dimulai –>
<ul>
<li><a href=”#”>Menu One</a></li>

<li>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
<a href=”#”>Link 4</a>
<a href=”#”>Link 5</a>
</li>

</ul>
<!– Menu Pertama Selesai –>

<!– Menu Kedua Dimulai –>
<ul>
<li><a href=”#”>Menu Two</a></li>

<li>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
<a href=”#”>Link 4</a>
<a href=”#”>Link 5</a>
</li>

</ul>
<!– Menu Kedua Selesai –>
<!– dan seterusnya –>

copy dan paste code di atas di bagian antara <body> …. </body> , bagi yang belum mengerti tag seperti ini lihat tutorial BELAJAR WEBSITE HTML

4. Tambahkan JQuery Script, wow apa lagi ini ya? tenang… lebih jelasnya klik Pengenalan JQuery Website
memasukkan jquery
tulis codenya, Letakkan di bawah tag Title

setelah itu tambahkan code Javascript ini,
letakkan di bawah tag JQuery

<script type=”text/javascript”>

$(function(){
$(‘.dropdown’).mouseenter(function(){
$(‘.sublinks’).stop(false, true).hide();

var submenu = $(this).parent().next();

submenu.css({
position:’absolute’,
top: $(this).offset().top + $(this).height() + ‘px’,
left: $(this).offset().left + ‘px’,
zIndex:1000
});

submenu.stop().slideDown(300);

submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script>

ini gambarnya
tambahan javascript
Selesai, dan hasilnya kira – kira seperti ini
drop down menu
Gambar: Drop down menu sederhana

Drop down menu telah selesai dibuat, Lihat Demo Drop Down menu ini Disini. Anda bisa mengganti menu – menu sesuai keinginan anda dengan mengedit teks “Menu One” atau “Menu Two” dan Sub menu “Link 1” sampai dengan “Link 5” pada halaman coding HTML, silahkan dikembangkan sesuai keinginan. Sampai ketemu di tutorial website lainnya. Source code Drop Down menu ini bisa anda download disini. Terima kasih, semoga bermanfaat. Jika ada Saran maupun pertanyaan silahkan kontak saya. Terima kasih, semoga bermanfaat

Membuat Jam Dinding

•Desember 13, 2012 • Tinggalkan sebuah Komentar

Tik tok tik tok, sambil menunggu waktu berbuka puasa lebih baik kita belajar animasi dan Action Script dengan Flash. Pada Tutorial Flash kali ini kita akan mencoba membuat Jam dinding sederhana. Penasaran cara membuatnya? mari kita belajar bersama di IlmuGrafis

Langkah – langkahnya sbb:
1. Buka Program Flash
Start >> All Program >> Flash , pilih flash dokumen
disini penulis menggunakan Flash MX 2004 namun tutorial ini bisa diterapkan di Adobe Flash versi berapapun termasuk Flash CS5

2. Buat lingkaran Gunakan oval tool (shortcut tombol: O), tips: tekan dan tahan tombol shift pada keyboard agar lingkaran bulat sempurna
image ilmugrafis

3. Ubah warna fill jadi hitam, Gunakan text tool (Short cut tombol : T) dan tulis 1 per 1 nomor jam mulai dari 1 – 12 untuk penomoran angka
gunakan Selection tool untuk meletakkan nomor – nomor tersebut pada bagian jam
image ilmugrafis

4. Dengan Line Tool (N) buatlah 3 buah garis untuk penunjuk arah jam
garis jam (pendek) , garis menit (agak panjang) , garis detik (panjang)
image ilmugrafis
5. Seleksi garis yang paling pendek dengan selection tool (V) dan tekan F8
muncul jendela dan masukkan jam_mc dan pilih movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
image ilmugrafis
Seleksi movie clip jam_mc di Lembar kerja kemudian tekan Ctrl+F3 untuk memunculkan panel properties. Pada panel properties yang muncul masukkan jam_mc sebagai instance name.
image ilmugrafis

6. Sama seperti di atas
Seleksi garis kedua (agak panjang), kemudian tekan F8. Pada panel yang muncul masukkan menit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
Seleksi movie clip menit_mc. Pada panel properties yang muncul masukkan menit_mc sebagai instance name.

7. Sama seperti di atas
Seleksi garis ketiga (paling panjang), kemudian tekan F8. Pada panel yang muncul masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.
Seleksi movie clip detik_mc. Pada panel properties yang muncul masukkan detik_mc sebagai instance name.

8. Satukan dan letakkan garis dengan urutan jam lalu menit kemudian detik dan letakkan di dalam tempat jam
image ilmugrafis

9. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
image ilmugrafis

Masukkan code script berikut ini:
//perintah yang dijalankan ketika frame dimainkan
onEnterFrame = function () {
//membuat variable waktu sebagai date object
waktu = new Date();
//membuat variable jam dengan nilai sama dengan jam pada komputer
jam = waktu.getHours();
//membuat variable menit dengan nilai sama dengan menit pada komputer
menit = waktu.getMinutes();
//membuat variable detik dengan nilai sama dengan detik pada komputer
detik = waktu.getSeconds();
//digunakan jika komputer menggunakan sistem 12 jam
//jika nilai variable jam lebih dari 12 maka akan dikurangi 12
if (jam>12) {
jam -= 12;
}
//movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30 yang ditambah nilai variable menit di bagi 2
jam_mc._rotation = jam*30+(menit/2);
//movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6
menit_mc._rotation = menit*6;
//movie clip detik_mc akan berotasi sesuai nilai variable detik dikali 6
detik_mc._rotation = detik*6;
};

10. Tekan Ctrl+Enter untuk melihat hasilnya.
kira – kira seperti ini:
image ilmugrafis
Animasinya bisa diexport dalam bentuk flash movie dengan cara klik File >> Export movie, beri nama dan pilih format swf
seperti ini:

Tutorial Jam Dinding dengan Action Script
Tutorial ini saya buat sederhana namun bertujuan agar mudah dipraktikkan oleh pemula yang baru belajar flash. Anda dapat mengembangkannya dengan memperbaiki bagian grafisnya sehingga nantinya jam akan terlihat lebih bagus lagi.

Membuat Pencahayaan Global Illumination (GI)

•Desember 13, 2012 • Tinggalkan sebuah Komentar

Kali ini Anda akan membuat pencahayaan Global Illumination atau istilah kerennya adalah GI. Apa itu GI? GI adalah pencahayaan natural seperti pencahayaan yang terjadi didalam dunia nyata dimana cahaya yang jatuh mengenai objek, akan dipantulkan kembali. Sering diistilahkan sebagai “Bouncing Light” atau disebut juga pencahayaan Tidak Langsung (Indirect Illumination). Fitur yang digunakan adalah Skylight dan Light Tracer.

Teknik ini berbeda dengan teknik menggunakan lampu Omni, Target Direct maupun Target Spot. Ketiga jenis lampu tersebut merupakan pencahayaan langsung (Direct Illumination), yakni kebalikan dari teknik GI.

Bagaimana cara membuat pencahayaan GI? Ini caranya.

Langkah 1
Buka sebuah file 3DS Max yang Anda punya

Langkah 2
Buka Tab Create > Lights > Skylight. Klik sekali di Viewport mana saja dan disembarang posisi. Misalkan Anda klik di Viewport Front.

Gambar 01. Opsi Skylight

Langkah 3
Pastikan objek Skylight terpilih dan Anda buka Tab Modify. Misalnya Anda tur nilai Multiplier = 1.15. Ini adalah nilai untuk meningkatkan intensitas cahayanya (Anda bebas mengatur nilai multiplier ini).

Gambar 02. Multiplier = 1.15

Langkah 4
Kemudian Anda klik Menu Rendering, lalu klik Advanced Lighting dan klik opsi Light Tracer.

Gambar 03. Fitur Light Tracer

Langkah 5
Akan terbuka jendela Render Scene. Anda klik tombol Render

Gambar 04. Tombol Render

Langkah 6
SIMSALABIM! Hasil Render tampak sangat realistic dan menarik.

Gambar 05. Hasil Render

Tutorial ini diarsipkan di ilmugrafis pada kategori 3DS Max. Selamat mencoba Membuat Pencahayaan Global Illumination (GI), pelajari juga tutorial sebelumnya yaitu Menambahkan Background pada Viewport dan tutorial selanjutnya kita akan belajar yaitu Menghapus Object – Object yang Teranimasi
Semoga bermanfaat. Salam.

Teks Efek Creative Mistery

•Desember 13, 2012 • Tinggalkan sebuah Komentar

Nih…. tutorial texs dengan efek misteri buat temen-temen yang lagi pada belajar photoshop sama kaya saya juga….silahkan di coba…

1. Langkah awal siapkan lembar baru dengan background warna hitam.
2. Gunakan Type Tool dan mulailah menulis kalimat yang kamu inginkan, disini saya menggunakan
Font Bill Hicks jika belum punya silahkan download dahulu, tulis Teks dengan warna merah
Hasilnya:
.

3. Klik menu Image – Rotate Canvas – 90 0 CW dan akhirnya posisi texs menjadi miring.
4. Setelah texs dalam keadaan miring klik Filter – Stylize – Wind

Dan hasilnya seperti gambar di bawah ini.

5. Nah kalo udah begini kita kembalikan posisi nya seperti semula dengan cara

Image – Rotate Canvas – 90 derajat CCW.

6. Setelah itu kita gunakan layer style dan pilih Bevel and Embos.

Dan hasilnya seperti gambar di bawah ini.

7. Beri Gradient hitam agar texs lebih terlihat sangar..

Untuk hasil yang sempurna bisa kita tambahkan gambar – gambar yang seram-seram agar terlihat lebih misteri..

SELAMAT MENCOBA….

Thanks juga buat Ilmu Grafis sebagai sarana berbagi ilmu grafis

SUKSES FOR YOU

Terima kasih

 
Ikuti

Kirimkan setiap pos baru ke Kotak Masuk Anda.