Tutorial

Tutorial Flash 8

2009-05-17T23:04:00.001-07:00

Setelah beberapa link software portable yang telah sediakan, antara lain, Microsoft Windows Home Edition Portable, CorelDraw 11 portable, dan Adobe Photoshop CS Portable, kini kami kembali hadir untuk menyediakan link Macromedia Flash 8 Portable yang bisa anda download secara gratisan. Hampir semua fitur yang ada di macromedia flash 8 versi installasi itu ada dalam versi yang portable ini. Bisa langsung didownload di :

http://rapidshare.com/files/34611826/MacromediaFlash8Portable.rar
passwordnya : WWW.HEARTODARK.COM

Selamat Mencoba !! :D

Sumber dari situs Ilmu Website dalam kategori flash dengan judul Macromedia Flash 8 portable Pro

Script Login | Register | Logout

2009-05-17T22:48:00.000-07:00

Semua E-Book kategori Tutorial PHP ilmuwebsite.com edisi ke 1 telah kami upload dalam bentuk pdf.
Format dan ukuran ebook juga telah kami bentuk supaya mudah di print dan di baca secara offline.
Dalam file zip di bawah ini telah kami include kan file file pendukung nya

Silahkan di download dan di sebarkan :) Free Open Source:

Link telah kami perbaiki..!!!

Silahkan ambil semua

Apabila anda masih pemula di php, ada baiknya anda belajar php dulu.
Semuanya untuk komunitas ilmuwebsite.com :)

Happy Opensource :D~
Dalam menjalankan script php anda membutuhkan XAMPP Server Console PHP Apache

Sumber dari situs Ilmu Website dalam kategori news dengan judul Download Semua Ebook Tutorial PHP ilmuwebsite

MEMBUAT AJAX COMMENT

2009-05-13T18:24:00.000-07:00

Hampir dari kita semua pasti telah memiliki
account facebook. Pada situs jejaring sosial ini, apapun bisa kita
komentari. Setiap kali ada teman ganti status kita bisa langsung beri
komentar. Kalau ada teman yang baru ganti foto, kita bisa langsung beri
komentar. Justru karena komentar-komentar inilah yang menjadikan kita
kembali mengunjungi situs ini.

Menurut perkiraan saya, hampir 80% dari proses apalikasi yang ada
pada facebook menggunakan pendekatan ajax. Begitu pula dengan aplikasi
komentarnya. Ketika kita menekan tombol submit setelah menuliskan
komentar, tanpa ada proses refresh halaman, komentar kita akan secara
otomatis muncul dan berbarengan dengan itu di simpan juga ke dalam
database. Bagaimana kah proses ini bisa terjadi? Saya akan
menjelaskannya berikut ini.

DEMO | DOWNLOAD

Proses menambahkan komentar

Untuk bisa menampilkan komentar yang baru saja kita tulis tanpa
perlu refresh halaman, kita perlu mendapatkan komentar-komentar yang
sudah diposting sebelumnya. Untuk mendapatkannya kita menggunakan:

document.getelementbyId(’nama_id’).innerHTML;

Nama_id di sini adalah div yang berada di antara semua komentar yang sudah ada. Contohnya adalah sebagai berikut:

<div id=”CommentList”>

<!– list start –>

<div class=”Comment” id=”1″>

<div class=”SenderName”>Kandar</div>

<div class=”CommentDate”>23, April 2009</div>

<div class=”CommentContent”>Ini komentar dari kandar</div>

</div>

<div class=”Comment” id=”2″>

<div class=”SenderName”>Foo</div>

<div class=”CommentDate”>24, April 2009</div>

<div class=”CommentContent”>hellow world</div>

</div>

<div class=”Comment” id=”3″>

<div class=”SenderName”>Kandar</div>

<div class=”CommentDate”>23, April 2009</div>

<div class=”CommentContent”>Ini komentar dari kandar</div>

</div>

<!–list end–>

</div>

Untuk mendapatkan seluruh isi dimulai dari komentar list start hingga list end kita gunakan method

document.getElementById(’CommentList’).innerHTML;

Untuk mendapatkan komentar yang telah ada kita buat satu variable dengan nama currentContent.

var currentContent = document.getElementById(’CommentList’).innerHTML;

Berikutnya kita membuthkan sebuah variabel yang berfungsi untuk
menginisialisasi nilai dari form komentar. Variabel ini bertugas
mendapatkan nilai dari input nama dan isi komentar. Variabel ini kita
beri nama commentValue.

var commentValue = ‘name=’ + encodeURI(
document.getElementById(’name’).value ) + ‘&YourComment=’ +
encodeURI( document.getElementById(’YourComment’).value );

Agar variabel ini bisa berfungsi, kita harus membuat sebuh form html. Berikut adalah kodenya:

<form name=”CommentForm” id=”CommentForm” class=”cssform” action=”javascript:postContent()” method=”post” />

<p><label for=”name”>Name:</label> <input type=”text” name=”name” id=”name” />

<p><label for=”YourComment”>Comment:</label>
<textarea name=”YourComment” id=”YourComment”
/></textarea></p>

<p><input name=”Submit” type=”submit” value=”Submit” /></p>

</form>

Langkah berikutnya adalah membuat suatu fungsi javascript yang
bernama postContents yang salah satu isinya adalah variabel
commentValue. Kodenya adalah sebagai berikut:

function postContent(){

/* Query yang nilainya akan dikirim ke php.*/

var commentValue = ‘name=’ + encodeURI(
document.getElementById(’name’).value ) + ‘&YourComment=’ +
encodeURI( document.getElementById(’YourComment’).value );

/* File php yang bertugas melalukan proses penyumpanan. */

var send_to = ‘manage-comment.php’;

/*Div id untuk menampilan gambar preloader dan error.*/

var respons = ‘alert’;

postAjax(send_to, commentValue, respons, handleResponComment);

}

Selain variabel commentValue, di dalam fungsi postContent kita
mendapatkan sebuah fungsi bernama postAjax. Ini adalah fungsi yang
mengirimkan nila variabel commentValue dengan metode Ajax. Untuk itu
kita membuthkan suatu fungsi yang bertugas yang menginisialisasi
XmlHttpRequest. Berikut adalah fungsingya:

var xmlHttp = createXmlHttpRequest();

var obj = ”;

Selanjutnya kita membuthkan sebuah fungsi yang bertugas untuk
menerima respon setelah terjadi proses XmlHttpRequest. Fungsi ini kita
beri nama handleResponComment berikut adalah kodenya:

function handleResponComment(){

if (xmlHttp.readyState == 4){

if (xmlHttp.status == 200){

/* Untuk menerima respon balik dari php, kita menggunakan JSON. */

var JSONRespons = eval(’(’ + xmlHttp.responseText + ‘)’);

if(JSONRespons.status == 1){

* Jika penyimpanan data ke dalam database telah berhasil, proses selanjutnya adalah memanggil fungsi commentResponse.

*/

commentResponse(JSONRespons);

}

else{

/*Jika komentar baru sudah muncul, form kita aktifkan kembali dengan
memanggil fungsi enableForm() dengan menggunakan event onload pada
image.*/

document.getElementById(obj).innerHTML = JSONRespons.message +
‘<img src=”ajax-loading.gif” width=”0″ height=”0″
onload=”enableForm();”>’;

}

} else {

/* Tampilkan error jika ada.*/

document.getElementById(obj).innerHTML = ‘Error: ‘ + xmlHttp.statusText;

}

else{

* Nonaktifkan form sesaat setelah user menekan tombol submit.

* Munculkan juga image preloader.

*/

document.getElementById(obj).innerHTML = ‘<img src=”ajax-loading.gif”>’;

document.getElementById(’name’).disabled=true;

document.getElementById(’YourComment’).disabled=true;

document.getElementById(’submit’).disabled=true;

}

untuk mencegah user menekan tombol submit kembali, selama proses
berlangsung, form kita nonaktifkan dahulu. Jika semua proses telah
selesai kita membuthkan sebuah fungsi yang bertugas untuk kembali
mengaktifkan form. Berikut adalah fungsinya:

function enableForm(){

/* Mengaktifkan kembali form jika semua proses telah selesai. */

document.getElementById(’name’).disabled=false;

document.getElementById(’YourComment’).disabled=false;

document.getElementById(’submit’).disabled=false;

}

Jika semua proses penyumpanan komentar baru telah berhasil, sekarang
waktunya untuk menampilkan komentar yang baru saja di tambahkan oleh
user. Berikut adalah fungsingya:

function commentResponse(JSONRespons){

/*Melist komentar yang telah ada.*/

var current_contents = document.getElementById(’CommentList’).innerHTML;

/* List komentar yang telah ada ditambah komentar baru. */

var newComment = current_contents + ‘<div class=”Comment” id=”‘ +
JSONRespons.message_id + ‘”><div class=”Remove”><a
href=”javascript:deleteContent(’ + JSONRespons.message_id +
‘);”>Remove</a></div><div
class=”SenderName”><img src=”ajax-loading.gif” width=”0″
height=”0″ onload=”enableForm();”>’ + JSONRespons.name +
‘</div><div class=”CommentDate”>’ + JSONRespons.date +
‘</div><div class=”CommentContent”>’ + JSONRespons.comment
+ ‘</div></div>’;

/* Mendapatkan total komentar saat ini*/

var currTotalComm = document.getElementById(’numComment’).innerHTML;

/* Total komentar saat ini ditambah satu.*/

document.getElementById(’numComment’).innerHTML = parseInt(currTotalComm) + parseInt(1);

/*Munculkan semua komentar, termasuk yang baru saja ditambahkan.*/

document.getElementById(’CommentList’).innerHTML = newComment;

/* reset form.*/

document.getElementById(’CommentForm’).reset();

/* Hilangkan image preloader.*/

document.getElementById(’alert’).innerHTML = ”;

}

Proses menghapus komentar

Berikut ini adalah tiga buah fungsi yang bertugas untuk menangani proses penghapusan komentar.

function deleteContent(messageID){

var postValue = ‘id=’ + messageID;

var send_to = ‘manage-comment.php’;

var respons = ‘alert’;

input_box = window.confirm(’Are you sure want to delete this comment?’);

if (input_box==true){

postAjax(send_to, postValue, respons, handleDeletedComment);

}

function handleDeletedComment(){

if (xmlHttp.readyState == 4){

if (xmlHttp.status == 200){

var JSONRespons = eval(’(’ + xmlHttp.responseText + ‘)’);

if(JSONRespons.status == 1){

deleteNow(JSONRespons.id);

}

else{

document.getElementById(obj).innerHTML = JSONRespons.message;

}

} else {

document.getElementById(obj).innerHTML = ‘Error: ‘ + xmlHttp.statusText;

}

function deleteNow(id){

var delete_comment = document.getElementById(id);

var currTotalComm = document.getElementById(’numComment’).innerHTML;

document.getElementById(’numComment’).innerHTML = parseInt(currTotalComm) - parseInt(1);

delete_comment.parentNode.removeChild(delete_comment);

enableForm();

document.getElementById(’alert’).innerHTML = ”;

}

Untuk proses yang ditangani php, semuanya ada pada file manage-comment.php.

Demikian panduan Comment Ajax ini dibuat, semoga bisa membantu para teman-teman developer.

Sumber dari situs Ilmu Website dalam kategori ajax dengan judul Membuat Comment Ajax

TAB CSS MENU SEDERHANA

2009-05-13T18:19:00.000-07:00

Suka dengan CSS menu? cobalah membuat CSS menu anda sendiri.

Berikut ada contoh membuat menu CSS sederhana, untuk proses belajar anda bisa memodifikasinya :)
Code nya:

------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
         <meta
http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
         <title>DHTML Tab,JavaScript Tab</title>
    <style type="text/css">
         #tabs {display: block;float: left;width: 160px;}
         .panel
{border: solid 1px #D8D8D8;border-top: none;background-color:
#FFFFFF;padding: 0px;width: 158px;overflow: auto;clear: left;}
         .tab_bdr{padding:
0px;width: 158px;border: 0px;border: 1px solid #645DB5;height:
4px;margin:0px;background: #645DB5;clear: left;font-size: 0px;}
         .tab{font-family:tahoma;
FONT-SIZE:
11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-bottom:
1px solid #FFFFFF;height:19px;padding-top:3px;margin:0px;width:60px;
float:left; text-decoration:none;}
         .tab_sel{font-family:tahoma;
FONT-SIZE:
11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-bottom:1px
solid #645DB5;height:19px;padding-top:3px;margin:0px;width:60px;
float:left; text-decoration:none;}
    </style>
    <script language="JavaScript" type="text/javascript">
    var panels = new Array('panel1', 'panel2'); // IDs of the content panels must be put here
    var tabs = new Array('tab1', 'tab2'); // IDs of the tabs must be put here
    function displayPanel(nval)
    {
         for(i = 0; i < panels.length; i++)
         {

document.getElementById(panels[i]).style.display = (nval-1 == i) ?
'block':'none';

document.getElementById(tabs[i]).className=(nval-1 == i) ?
'tab_sel':'tab';
         }
    }
    </script>
    </head>
    <body>
         <div id="tabs">

<div id="tab1" class="tab_sel" align="center" onClick="javascript:
displayPanel('1');">Tab 1</div>

<div id="tab2" class="tab" style="margin-left:1px;" align="center"
onClick="javascript: displayPanel('2');">Tab 2</div>
         </div>

<div class="tab_bdr"></div> 
         <div
class="panel" id="panel1" style="display: block">1</div>

         <div class="panel" id="panel2" style="display: none">2</div>
    </body>
</html>
------------------------------

contoh jadi: http://www.ilmuwebsite.com/test/css-tab.htm
Terimakasih

Sumber dari situs Ilmu Website dalam kategori html dengan judul Tab CSS Menu Sederhana

Trick Upload PHP Auto Rename

2009-05-13T18:04:00.000-07:00

Trick Upload PHP Auto Rename

BELAJAR PHP

2009-05-13T17:48:00.000-07:00

Operasi string begitu penting dalam dunia per-php-an. Kenapa begitu penting ? Karena melakukan pekerjaan dengan php, baik itu membangun suatu sistem informasi, membuat fasilitas searching di web, dan berbagai hal lain yang berhubungan dengan web development tak lepas dari operasi string. Begitu banyak fungsi operasi string yang ada, dan banyak pula fungsi string yang sering digunakan, sehingga penulis perlu membaginya menjadi beberapa artikel mengenai operasi string ini. Untuk artikel bagian pertama penulis akan menjelaskan 2 fungsi yang memiliki tugas tambahan selain dari mencari string. Antara lain :

substr()
strstr()

Substr(), memiliki fungsi untuk mengambil satu, atau banyak karakter dari suatu variable. Implementasinya seperti mengambil karakter yang dihasilkan dari fungsi DATE() –nya mysql. Contoh penggunaannya adalah sebagai berikut :

<?php
$tanggal = '012409';

$bulan = substr($date, 0, 2);
$hari = substr($date, 2, 2);
$tahun = substr($date, -2);

echo "$hari/$bulan/$tahun";
?>

Hasilnya adalah :
24/01/09

Penjelasannya adalah sebagai berikut :

$bulan = substr($date, 0, 2);
Ambil 2 karakter dari digit terdepan, hasilnya adalah 01

$hari = substr($date, 2, 2);
Ambil 2 karakter dari digit ke 3. Karena string memiliki urutan awal 0, maka angka 2 pada variable $tanggal memiliki posisi di urutan ke 2. Hasilnya adalah 24.

Untuk membuktikannya :
<?php
$tanggal = '012409';
echo $tanggal[2];
?>

hasilnya adalah :
2

Dan yang terakhir adalah
$tahun = substr($date, -2);
Ini berarti ambil 2 karakter dari belakang. Hasilnya adalah 09.

Strstr(), fungsi ini digunakan untuk mengembalikan semua string dibelakang string yang dicari. Misalnya ada sebuah kalimat :
"Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k",
karakter yang dicari adalah "--",
maka hasil dari fungsi strstr() adalah "--Al-k"

Contoh penggunaanya :

<?php
$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';
$yangdicari = strstr ($kalimat, $tanda);
echo $yangdicari;
?>

Hasilnya adalah :
--Al-k

Implementasi penggunaan strstr() contohnya seperti ini :
<?php
$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';

if ($yangdicari = strstr ($kalimat, $tanda)) {
   echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";
} else {
   echo "Nggak ada ungkapan tuhh !!";
}
?>

Penjelasannya adalah sebagai berikut :

if ($yangdicari = strstr ($kalimat, $tanda)) {
jika karakter yang di cari dalam hal ini $tanda ada pada string $kalimat, maka kembalikan string yang berada di belakang tersebut kedalam variable $yangdicari.

echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";

bagian intinya adalah substr ($yangdicari , strlen ($tanda))

Jika di ubah kedalam nilai sebenarnya adalah
substr ("--Al-k" , 2 )

tampilkan string yang dicari tersebut dengan melewatkan tanda --.

Hasilnya adalah :
Al-k

Sehingga hasil keutuhan dari script

<?php
$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';

if ($yangdicari = strstr ($kalimat, $tanda)) {
   echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";
} else {
   echo "Nggak ada ungkapan tuhh !!";
}
?>

Adalah :

Ungkapan mantap tadi di buat oleh 'Al-k'

Cukup mudah ya ? Cukup narsis juga ! :D

Artikel Lebih dalam dengan operasi string bagian pertama saya cukupkan sampai disini. Untuk bagian ke 2 dan terakhir akan penulis jelaskan di belajar php berikutnya.

Greetz : b_scorpio, abuzahra, peterpanz, kandar, phii_, syahrilrohman, ivan, dr.emi, safril, najwa, Lapak-online Team!

Sumber dari situs Ilmu Website dalam kategori php kuliah dengan judul Lebih dalam dengan operasi string bag.1

TEKHNIK SHAPPING DALAM Corel Draw

2009-05-13T17:30:00.000-07:00

Ya.... selamat pagi menjelang siang, selamat siang menjelang sore, selamat sore menjelang malam.... ZzzZzZzzzz.... :D Banyaknya komentar yang masuk membuat penulis merasa tertantang untuk mencoba kembali membawakan satu buah tutorial coreldraw dengan teknik shaping yang sedikit berbeda dari tutorial sebelumnya. Dalam tutorial kali ini penulis mencoba beberapa teknik pewarnaan untuk menghasilkan sebuah box yang terlihat seperti gelas dalam sebuah ruangan yang menyerupai kaca. Mohon maaf jika terdengar berlebihan. Padahal hasil akhirnya tidak seperti itu... :D. Dan tentunya penulis menyadari teknik yang akan penulis bawakan masih memiliki banyak sekali kekurangan. Sangat membutuhkan campur tangan anda dalam proses penyempurnaan, sehingga objek yang dibuat nantinya benar-benar terlihat seperti glossy box dalam glossy environment. Apapun istilahnya yang jelas intro tutorial kali ini di cukupkan saja. Penulis akan coba langsung ke inti pembahasan.

Seperti biasa siapkan terlebih dahulu sebuah lembar kerja yang kosong.

Untuk memudahkan proses pekerjaan, samakan konfigurasi lembar kerja, silahkan ubah nilai Units, dari inches menjadi pixels.

Dengan rectangle tools,
atau anda bisa menekan tombol F6 di keyboard untuk membuat objek persegi panjang dengan ukuran width 774px dan height-nya 281 px

Kemudian dengan shape tools lekukan di ujung-ujung persegi tersebut dengan mengklik dan drag kotak hitam kecil.

sehingga hasil menjadi seperti ini :

Selanjutnya, dengan Interactive Fill Tools atau dengan menekan tombol G di keyboard, berikan pewarnaan gradien kepada objek yang tadi. Menjadi seperti ini ...

Ganti warna defaultnya, dalam keadaan objek terpilih lakukan double klik pada fill color yang terletak di kanan bawah aplikasi coreldraw.

Kemudian akan muncul sebuah windows baru, Fountain Fill :

kemudian ganti color blend-nya dari Two Color menjadi Custom

Ganti warna hitamnya menjadi warna biru, caranya klik kotak putih kecil di bagian kiri window fountain fill, sampai warnanya berubah menjadi kotak hitam kecil kemudian klik button Others. Setelah itu akan muncul windows kecil baru, yaitu Select Color.

ganti Nilai model dari RGB menjadi CMYK, kemudian isi nilai :

C dengan 61
M dengan 61
Y dengan 0
K dengan 37

kemudian klik button Ok.

Isi Fountain color secara otomatis berubah.

Lakukan ulang untuk warna yang satunya lagi, klik kotak putih di kanan fountain fill, kemudian sampai warna kotak kecil tersebut menjadi putih, kemudian klik Others. Akan muncul satu windows select color, ganti CMYK dengan RGB, kemudian isi :

R dengan 191
G dengan 255
B dengan 255

kemudian klik Ok. Fountain color pun menjadi berubah :

Langkah selanjutnya adalah double klik di antara 2 warna tadi.
Double klik di bagian yang telah penulis beri tanda seperti gambar di bawah ...

sehingga hasilnya ada 1 segitiga kecil berwarna hitam di bagian yang di klik tadi

Klik kembali segitiga kecil tersebut, kemudian klik button others ganti warnanya isi :
C dengan 65
M dengan 43
Y dengan 0
K dengan 27

selesai, klik ok. Kemudian klik ok kembali untuk keluar dari windows Fountain Fill.

Hasilnya ...

...

Dengan Rectangle Tools ( F6) buat kembali satu objek persegi di atas persegi yang tadi ...

Kemudian convert to curves, bisa dengan menekan ctrl + Q di keyboard, atau klik kanan objek yang baru di buat kemudian convert to curves. Kemudian engan shape tools ( F10) lekuk-lekukan objek tersebut, hingga menjadi seperti ini :

Kemudian, pilih kembali kedua objek tersebut, pertama klik terlebih dahulu objek yang baru di lekukan tersebut, setelah itu pilih objek yang telah di beri warna.
Dalam keadaan kedua objek terpilih, kemudian klik icon intersect ada di toolbar atas.

Delete objek yang di lekukan tadi, sisakan objek hasil intersect. Hasilnya seperti ini :

Beri warna putih objek hasil intersect tersebut, kemudian dengan Interactive Transparency tool, beri efek transparan objek tersebut sehingga menjadi seperti ini ...

Selanjutnya dengan Pick Tool

, buat objek yang baru saja di beri efek transpan tersebut tidak terlalu menempel di ujung-ujung objek dibawahnya, buat menjadi seperti ini ...

Buat duplikat dengan cara copy paste objek yang telah di beri transparansi tersebut, kemudian beri warna hitam,

kemudian lakukan mirror pada objek yang di beri warna hitam transparansi tersebut

letakkan di atas objek yang di beri warna gradien biru.

Pilih objek yang memiliki transparasi hitam tersebut, kemudian klik menu Bitmaps | Convert to Bitmap,

isi Resolution dengan 600 dpi. Nilai 600 dpi di berikan agar pemberian efek kepada bitmap menjadi sangat halus. Klik ok.

Masih dalam objek tersebut terpilih, masuk kembali menu Bitmap | Blur | Gaussian Blur, isi radiusnya dengan 2.2 pixels

...
Mohon maaf, artikel di percepat .. :D
Buat 2 buah objek baru, sehingga objek keseluruhan akan seperti ini ...

Buat satu buah persegi di atas, objek button cari ...

Convert to curves ( ctrl + Q ) Lekukan objek baru tersebut, hingga menjadi seperti ini

Pilih objek yang sudah di lekukan tersebut kemudian pilih objek yang di bawahnya, lakukan intersect kepada kedua objek tersebut, dengan mengklik icon intersect di toolbar atas.

Beri warna putih ...

kemudian beri transparansi ... dan dengan pick tool kecilkan objek tersebut ... hasilnya seperti ini ...

kemudian duplikasi objek yang tadi, kemudian lakukan mirror, dan ubah transparansinya, buat menjadi seperti ini ...

Seleksi semua objek kemudian lakukan group dengan menekan ctrl + G di keyboard, atau klik kanan Group.

Duplikasi objek yang di group tersebut, kemudian lakukan mirroring hingga hasilnya seperti ini ..

Pilih objek yang di bawahnya ... kemudian masuk menu Bitmaps | Convert to Bitmap

Kemudian masuk kembali menu Bitmap | Blur | Gaussian Blur, beri nilai 4.0 untuk Resolution-nya

Lakukan transpansi untuk objek yang baru saja di beri efek blur, sehingga hasilnya menjadi seperti ini :

Buat kembali sebuah objek baru, atau dapat mengambil dari objek persegi yang sebelumnya ukurannya adalah :
width : 774 px
height : 281 px,

buat menjadi seperti ini ...

Pilih persegi berwarna hitam tersebut, kemudian klik menu Bitmaps | Convert to Bitmap ... Klik ok. Masih dalam keadaan objek hitam terpilih, masuk kembali menu Bitmap | Blur | Gaussian Blur beri nilai 45 px untuk resolutionnya, hasilnya menjadi seperti ini :

Letakkan di bawah objek search box, caranya pilih objek hitam tersebut, kemudian tekan shift + page down, atau bisa juga klik kanan | order | to back of layer, menjadi seperti ini ...

Ya benar ! Si objek tersebut di jadikan sebagai bayang bagi objek box di atasnya. Berikan transparansi hingga hasilnya menjadi seperti ini ..

Buat satu objek persegi sebagai backgroundnya ... dengan ukuran sebagai berikut :
Width : 1865 px
Height : 1038 px

Berikan warna abu ( 40 % black ) Letakkan di belakang search box
Seperti ini ...

Dengan interactive fill tool lakukan gradasi pada objek yang akan di jadikan background tersebut ...

Buat kembali satu buah objek sebagai alas dari search box ... beri warna putih letakkan di belakang dari box ...

Kemudian lakukan transparansi kepada objek putih tersebut ...

Buat kembali satu objek persegi berwarna putih, dan letakkan di belakang search box.

Lakukan transparansi objek persegi putih tersebut ...

Buat satu buah objek lingkaran dengan ukuran 522 x 522 px. Letakkan di atas objek search box.

Pilih lingkaran tersebut kemudian masuk menu Bitmaps | Convert to bitmap, klik Ok. Kemudian Masuk kembali menu Bitmap | Blur | Gaussian Blur, isi radiusnya dengan 200 pixels

Letakkan di bawah objek search box, lakukan pembesaran. Kemudian berikan transparansi hingga hasil akhir menjadi seperti ini ..

Lakukan duplikasi objek yang menjadi kilapan search box dengan cara copy paste, hasilnya seperti ini ...

Kemudian klik objek duplikat tersebut, kemudian masuk menu bitmaps | convert to bitmap, masih dalam keadaan terpilih masuk menu Bitmap | Blur | Gaussian Blur, isi radiusnya dengan 78 pixels, dan letakkan di atas search box...

Hasil akhirnya ...

Fiuhh... akhirnya selesai juga tutorial Coreldraw kali ini.... selamat mencoba. Jika ada yang di tanyakan, kirim saja pertanyaannya ke email penulis ...
alkemail@gmail.com

File corelnya dapat di download di sini ....

Selamat ... :D

Greetz : b_scorpio, abuzahra, peterpanz, kandar, phii_, syahrilrohman, ivan, dr.emi, safril, najwa, Lapak-online Team!

Sumber dari situs Ilmu Website dalam kategori coreldraw dengan judul Teknik Shaping Glossy Environment