Membuat LOGO UBUNTU

Membuat LOGO UBUNTU

  • klik new file
  • buat elipse tool atau tekan F7 ( buat lingkaran…)
  • lalu set dengan ukurannya H = 3.0 px dan W = 3.0px
  • klo bisa letakan  lingkaran di tengah, supaya kelihatan teratur
  • Gunakan interactive fill tool, set file type menjadi : linear, lalu set warna hitam dan putih
  • klik pada linkaran1 lalu tekan ctrl+c lalu ctrl+v (copy-paste) perkecil ukuran nya       dari pojok jangan dari bawah, atas, atau samping, supaya pengecilan nya teratur (jgn terlalu kecil atau besar)

    atur linkaran2 tepat di tengah-tengah lingkaran1 dan warnai dengan warna selain warna linkaran1 supaya telihat seperti donat lubang
    Nb : kuncu lingkaran1 atau yg terbesar caranya klik kanan pada lingkaran terbesar itu lalu klik Lock object
  • copy-paste linkaran2 untuk membentuk linkaran3 beri warna putih
  • buat bangun persegi panjang yg menyerupai garis (ingat jangan terlalu besar hasilnya akan jelek klo boleh saya usul ukurannya lebarnya 0.11 px untuk panjang terserah anda) untuk membagi lingkaran menjadi 3 potong sama besar( seperti di gambar

    Saya menggunakan titik hitam dengan linkaran
    Untuk membuat suatu titik pusat agar lebih mudah
    Caranya… untuk rotasi supaya sempurna saya gunakan rumus matematika 360/3
    jadi 120 jadi saya ketik supaya berputar kekiri sebanyak 120 derajat :
    persegi panjang 1  , Persegi panjang 2 
    Lalu saya Move, supaya menjadi seperti gambar di atas…
  • Setelah langkah ke 8 selesai tekan ctrl + A setelah terseleksi semua kecuali linkaran1 jadikan simplify caranya : arrange – shaping – simplify
  • Setelah anda simplify, klik 3 persegi panjang itu (satu-satu yach) delete satu persatu juga lingkarang 3 dan linkaran pusat

    ……jreeeenng….. apa yg terjadi…. Bagian tadi terpotong bukan…
  • setelah terhapus klik linkaran ke 2 yg berwarna orange (warna linkaran punya saya ) truz klik break apart / ctrl + K (break apart berguna untuk memisah bagian yg tadi 1 bangun tapi terpisah menjaadi beberapa bangun)
    • Setelah menjadi bagian sendiri sendiri warnai seperti punya saya, sudah tahu kan bagaimana cara mewarna melalui interactive fill tool…. Seperti berikut ini




  • langkah selanjutnya buat lubang seperti gigitan dengan cara berikut
    - buat lingkaran kecil dengan ukuran sama (0.6 x 0.6 px)
    - lalu letakan seperti gambar ini


    - setelah itu gunakan methode simplify lagi: tekan shift + klik bangun a & b dan delete bangun a, hingga jadi seperti :

    Lakukan hal yang  sama terhadap bangun yg laen…
    • setelah itu di celah gigitan tadi selipkan lingkaran yg lebi kecil diameter nya dari gigitan tersebut…dan beri warna seperti ini 



    Lambang ubuntu sudah jadi tinggal anda beri efek saja…..


    Ya, logo Ubuntu 

    Selesai, Semoga bermanfaat
    Unknown 12.24 5 comments Read More

    Desain Logo Wordpress

    Desain Logo Wordpress


    Tutorial Kali ini saya akan membagi cara membuat logo wordpress dengan Program Coreldraw yang merupakan program favorit saya...

    Pertama
    buka lembar kerja kosong. Lalu buat lingkaran simetris. Kemudian paste lingkaran itu tapi dikecilkan sebanyak 3 lingkaran. Lihat gambar bawah :


    Potong lingkaran terbesar dengan lingkaran yang ditengah dengan tool “trim”. Lihat gambar bawah :


    Lalu klik lingkaran di tengah dan delete. Kemudian buat huruf w. Tapi usahakan yang mirip dong dengan huruf w pada wordpress. Akan tetapi bila anda tidak mempunyai fontnya, saya anjurkan untuk menjiplak saja dengan logo wordpress yang telah anda siapkan ( di sini saya menggunakan “freehand tool” untuk membuat pola w ). lihat gambar:



    Selanjutnya "w" tersebut letakkan pas di tengah lingkaran paling kecil. Lalu potongkan pada lingkaran kecil itu. Dan sesudahnya delete huruf w. Hasil akan terlihat pada gambar dibawah :


    Tapi kita belum selesai sampai disini. Untuk membuat gradasi warna supaya gambar tampak seperti 3D. Saya akan menggunakan “fountain fill”. Akan tetapi saya akan membuat terlebih dahulu garis bantu. lihat bawah:


    Lalu gunakan tool “intersect” untuk membuat bangun yang sama persis pada logo. Lihat bawah :


    Dalam gambar diatas menjelaskan bahwa ada garis putis yang membatasi antara bawah dan atas. Kemudian saya klik bagian atas dan saya degradasi dengan menggunakan tool “fountain fill”. Lihat bawah :


    Kalau anda klik, akan keluar menu seperti dibawah :


    Nah, dari sini kita tinggal mengatur kontras yang anda inginkan pada gambar. Lalu putar pada bagian yang berwarna biru keatas, dan “mid point pada bawah menu juga geser ke kiri supaya gradasi warna tidak terlalu mencolok.  lihat bawah :


    Hasil akan tempak seperti dibawah :

    Logo Wordpress
    Ayo Ngeblok eh NgebloG... See my (Amin ilmugrafis) blog at http://gudanghumor.wordpress.com

    Terima kasih telah belajar Coreldraw bersama saya... Salam hangat Amin ilmugrafis
    Semoga Bermanfaat
    Unknown 12.24 Leave a Comment Read More

    Membuat Drop Down Menu Sederhana di Website

    Membuat Drop Down Menu Sederhana di Website

    Publish: 7 Juni 2012 | Author & Copyright: Johan | Status: FREE tutorial

    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="#" class="dropdown">Menu One</a></li>

    <li class="sublinks">
    <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="#" class="dropdown">Menu Two</a></li>

    <li class="sublinks">
    <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 Disinis. 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
    Unknown 12.10 2 comments Read More

    Membuat Slideshow Foto Auto dengan jQuery

    Membuat Slideshow Foto Auto dengan jQuery

    Sewaktu membaca inbox di gmail ternyata ada seorang yang menanyakan kepada saya bagaimana cara untuk membuat Automatic Animasi Slideshow atau Slide Foto Auto dengan menggunakan jQuery. Biasanya fitur ini dipakai untuk membuat animasi pada headline berita pada sebuah halaman utama website. Sehingga berita akan tampil bergantian sesuai dengan pengaturan waktu (timer) yang anda inginkan.
    Download dulu bahan - bahan (support file) pembuatan animasiSlideshow foto otomatis autoplay :
    download
    Download Now
    Isi Support Files :
    A. jquery-1.8.0.min
    B. head.css
    C. headline.js
    D. headnews.html
    E. bahan foto slideshow
    Tanpa bertele - tele dan panjang lebar maka berikut ini tutorial cara membuat animasi Slideshow Foto Otomatis yang akan saya jelaskan secara singkat jelas dan padat.
    1. Langkah pertama adalah bersabar & fokus... hehehe...
    ok, mari kita pelajari kode yang ada di dalam headnews.html. (Klik kanan "headnews.html" lalu pilih open with notepad / dreamweaver ) untuk mengetahui kode di dalamnya.
    step 1
    coba perhatikan kodenya :
    <link rel="stylesheet" type="text/css" href="head.css">
    <script src="jquery-1.8.0.min.js"></script>
    <script src="headline.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    // untuk permulaan, tampilkan content nomor 1 '#slideAwal'
    bukaContent($('#slideAwal'),'div1');
    });
    </script>
    Script diatas fungsinya untuk menghubungkan ketiga bahan : jquery-1.8.0.min + head.css + headline.js
    Sedangkan kode diantara <script type="text/javascript"> ... </script> adalah untuk memanggil fungsi jquery. Bingung? ok silahkan anda baca lagi apa itu jQuery di Tentang jQuery
    2. Sekarang masuk ke tahap input / memanggil gambar, perhatikan kode berikut ini :
    Kode ini terletak diantara tag <body> ... </body>
    <div id="divTrigger">
    <a href="javascript:;" onClick="bukaContent(this,'div1')" id="slideAwal">1</a>
    <a href="javascript:;" onClick="bukaContent(this,'div2')">2</a>
    <a href="javascript:;" onClick="bukaContent(this,'div3')">3</a>
    <a href="javascript:;" onClick="bukaContent(this,'div4')">4</a>
    </div>
    <div id="divContent">
    <div id="div1">
    <span class="title">Slide 1</span>
    <img src="images/1-slide.jpg" align="left" />
    Slide show pertama! wow!
    </div>
    <div id="div2">
    <span class="title">Slide 2</span>
    <img src="images/2-slide.jpg" align="left" />
    Slide show kedua! awesome!
    </div>
    <div id="div3">
    <span class="title">Slide 3</span>
    <img src="images/3-slide.jpg" align="left" />
    Slide show ketiga! cute!
    </div>
    <div id="div4">
    <span class="title">Slide 4</span>
    <img src="images/4-slide.jpg" align="left" />
    Slide show keempat, Finish! hehehe ayo - ayo jangan bengong aja gan! Kembali fokus...!
    </div>
    </div>
    Anda tinggal mengganti input dari Title (judul foto slideshow), img src (ini untuk menghubungkan image / foto yang akan kita slideshow), dan teks (berfungsi sebagai deskripsi / tambahan keterangan)
    Mudah bukan, nantinya anda tinggal mengutak - atik inputnya
    3. Untuk merubah ukuran border maka kita bisa mengutak - atiknya di head.css, jadi buka head.css di aplikasi notepad atau dreamweaver
    step 2
    Sesuaikan dengan ukuran gambar. Disini gambar saya resolusinya adalah 700 x 350
    slideshow
    Jadi usahakan ukurannya tidak lebih kecil gambar slideshow kita.
    Hasilnya Lihat Disini :
    live demo icon

    Animasi Foto Slide Automatis dengan jQuery Slideshow telah saya tes di browser mozilla firefox, google chrome, android browser, opera browser maupun opera mini dan semuanya berjalan baik dan lancar (all work). Terima kasih, semoga bermanfaat
    Unknown 12.08 Leave a Comment Read More
    Diberdayakan oleh Blogger.

    Get Free Updates

    Subscribe Now