Membuat Toolbar Object Dock MAC OSX Snow Leopard di Blog dan Website

Suatu ketika sedang mengunjungi blognya teman. Eh secara tidak sadar aku menemukan postingan untuk mencoba membuat gambar agar tetap berada di pojok dari Browser atau istilah kerennya sih Float Images. Dan setelah aku coba eh ternyata bisa yaitu gambar ini posisinya akan tetap berada di pojok dari browser (bisa pojok kiri-atas, kiri-bawah, kanan-atas, atau kanan-bawah), kedudukan/posisi gambar ini akan tetap dan tidak berubah meskipun layar browser di scroll ataupun jendela browser seperti Mozilla Firefox/Opera di tekan tombol Restore, gambar float ini masih tetap mempertahankan posisinya.

Dari sinilah saya mulai berfikir dan mengembangkan ide dan kreatifitas saya…hehe.., kalau aku buat kayak toolbar (Object Dock) seperti itu gimana ya…Akhirnya kemarin sempet saya coba membuatnya seperti toolbar, lebih miripnya seperti toolbarnya Windows XP. Tetapi setelah saya pikir-pikir kok ada tulisannya memakan banyak tempat akhirnya saya kembangkan lagi lebih miripnya seperti Object Docknya MAC OSX yang ditampilkan hanya Icon-iconnya saja tanpa ada tulisan dengan ditambahi efek transparan, bayangan serta efek pantulan kaca.
Sebenarnya saya hanya memanfaatkan gambar yang float artinya gambar ini kedudukannya tetap terhadap layar dan posisinya tidak berubah meski layar di scroll dan posisi gambar ini bisa paling atas sendiri (Bisa menutupi tulisan/gambar yang ada di bawahnya). Sehingga tampilannya yang selalu tetap dan terlihat akan sangat bagus kalau saya buat semacam toolbar Object Doct seperti taskar pada sistem operasi MAC OSX yang terkenal dengan efek transparan, bayangan, dan pantulan kaca.

Nah dari sini akan dimulai proses pembuatannya. Hal pertama yang perlu disiapkan adalah program pengolah grafis disini saya membuatnya dengan Adobe Photoshop.

Yang Kedua adalah latar toolbar. Kita bisa membuatnya dengan mencari referensinya di Google atapun bisa anda buat/kembangkan sendiri di Photoshop.
Yang Ketiga adalah Icon-Icon lucu berbentuk PNG (*.png). Kenapa saya menggunakan png karena efek yang paling keren dari gambar PNG adalah gambar ini bisa memiliki efek transparan/tembus pandang. Lain halnya dari gambar-gambar lain seperti JPEG, GIF ataupun BMP yang tidak bisa tembus pandang.
Untuk contoh referensi komponen pendukungnya sudah saya sediakan baik file project dari Photoshop ataupun dari file gambar PNG, silahkan anda Download DISINI.

Download

Download

Mungkin disini saya akan menjelaskan sedikit tentang cara membuat gambar agar bisa transparan dan memiliki efek bayangan.

1. Yang pertama yang harus anda lakukan adalah dengan cara membuat latar belakang (Bisa juga yang berbentuk bar). Seperti pada gambar 1.

Gambar 1 Membuat Background

2 . Selanjutnya pada gambar 1 kita akan memberikan efek transparan / tembus pandang serta efek bayangan. Langkah yang harus dilakukan adalah dengan cara klik kanan pada window Layer seperti pada gambar 2 lalu pilih Blending Options.

Gambar 2 Pengaturan Blending

3. Setelah Menu Blending Options dipilih maka akan tampil sebuah window “Layer Style” disitu terdapat menu untuk membuat gambar kita transparan pada menu “Opacity”. Seperti nampak pada gambar 3, Jika 100 maka gambar tidak transparan/solid tetapi semakin kecil nilai opacity ini maka gambar akan semakin transparan.

Gambar 3 Pengaturan Efek Transparan

4. Masih Di window “Layer Style” yang sama. pilih Tab “Drop Shadow” dan pilih tanda centang di sebelahnya. Pada menu ini untuk membuat gambar memiliki bayangan di bawahnya. Seperti Nampak pada gambar 4 di bawah ini terdapat menu “Distance” untuk meletakkan posisi bayangan. Kita masukkan nilai 0 untuk bayangan berada tepat ditengah-tengah. Menu “Spread” untuk menentukan kekuatan bayangan, jadi semakin besar nilainya maka bayangannya pun semakin padat. Sedangkan menu “Size” adalah untuk mengatur besarnya bayangan yang akan dibuat. Setelah diatur semua maka klik tombol OK. Hasilnya seperti pada gambar 5.

Gambar 4 Pengaturan Bayangan

Gambar 5 Gambar Background terdapat Bayangan Shadow

5. Untuk menyimpan Background ini menjadi transparan dan tembus pandang maka hilangkan tanda centang pada “window layer” di pojok kanan bawah Photoshop. Contohnya seperti pada Gambar 6. Jika sudah lalu silahkan anda simpan dengan ekstensi (*.png) dan pilih menu “Interlaced” agar bisa transparan.

Gambar 6 Menghilangkan Centang Background

6. Selanjutnya kita akan membuat ikon home. Maka buka terlebih dahulu gambar ikon home. Seperti nampak pada gambar 7. Lalu kita pindahkan gambar ikon home ini ke window di sebelahnya pada gambar background. Dengan cara memilih tool “Move Tool” yang terdapat pada Photoshop.


Gambar 7 Menambahkan Icon Home Pada Gambar Toolbar

7. Setelah itu kita atur ukurannya ikon home agar ukurannya sesuai dengan background dengan cara menekan hotkey CTRL+T (Atau pada menu Edit | Free Transform) Seperti pada gambar 8 kita masukan ukuran dengan memperkecil gambar sekitar 60%.

Gambar 8 Free Transform

8. Lalu untuk memberi efek bayangan dan transparan seperti langkah 3-4 dengan mengklik kanan pada window “Layer Style” pilih “Blending Option”. Seperti pada gambar 9 dan 10.

Gambar 9 Window/Jendela Layer (Ada di Pojok Kanan Bawah Photoshop)

Gambar 10 Pengaturan Untuk Memberikan Efek Bayangan

9. Nah setelah efek bayangan selesai, selanjutnya kita akan membuat efek pantulan kaca seperti Object Dock dari MAC OSX. Maka langkah pertama yang harus dilakukan adalah Kita akan menduplikat gambar ikon home yang sudah kita buat tadi dengan cara kita klik kanan pada jendela “Layer di pojok kanan bawah” pada item Ikon home, lalu pilih menu “Dulicate Layer”. Nampak seperti Gambar 11.

Gambar 11 Duplicate Layer

10. Saat itu akan ada konfirmasi untuk membuat layer baru dengan nama. Kita isikan sembarang misalnya “Ikon home shadow” Lalu klik OK. Tampilannya seperti pada gambar 12.

Gambar 12 Beri Nama pada Duplicate Image

11. Karena hasil duplikat ini sama persis baik gambar serta bayangannya, maka kita perlu untuk membalik gambar duplikatnya dengan cara pilih menu “Edit | Transform | Flip Vertical” seperti pada gambar 13. Lalu geser gambar duplikat ini ke bawahnya dengan “Move Tool” sehingga seolah-olah ada kaca di bawah ikon home tersebut.

Gambar 13 Flip Vertikal

12. Setelah di geser kebawah ini masih belum sempurna karena hasil dari pantulan masih sama persis dengan ikon aslinya. Untuk menambahkan efek pantulan kaca ini akan semakin indah dengan memberikan efek “Masking” dengan cara pilih pada menu utama “Layer | Add Layer Mask | Reveal All”. Seperti pada gambar 14.

Gambar 14 Membuat Masking

13. Lalu kita pilih tool yang namanya “Gradien Tool” seperti gambar di bawah ini (Gambar 15) untuk membuat efek masking dengan cara Drag mulai dari bawah sendiri sampai ke atas pada gambar duplikat tadi. Sehingga hasilnya seperti gambar 15.

Gambar 15 Gradien Tool

14. Kita dapat menyimpan ikon ini sebagai file PNG tersendiri agar dapat kita klik nantinya jika kita masukkan pada blog / website. Dengan cara membuat layer baru dengan ukuran sekitar “34px x 34px” setelah itu kita drag ikon home ke layer baru ini. Contohnya seperti pada gambar 16. Dan kita hilangkan tanda centang pada item Background seperti langkah ke 5.

Gambar 16 Layer Baru berukuran (34px x 34px)

15. Lalu Ikon yang nantinya bisa klik ini kita simpan menjadi file PNG agar terlihat transparan. Seperti pada gambar 17. Jika ada peringatan “PNG Options” maka pilih saja “Interlaced” seperti gambar 18 lalu klik OK.

Gambar 17 Save Image ke dalam Format .PNG

Gambar 18 Pilih Interlaced lalu OK

16. Selesai

Hmmm Capek juga membuatnya itu baru satu ikon saja, disini saya menggunakan lebih dari 25 ikon. Banyaknya ikon ini tergantung penggunaan dan kebutuhan.
Langkah selanjutnya jika semua gambar PNG telah selesai dibuat maka adalah dengan memasukkan script ini (saya memasukkan pada posisi Bawah-Kiri)

<a style="display:scroll;position:fixed;bottom:0;left:79px;"
 title="Beranda Bagus Dream's"
 href="http://bagusdream.wordpress.com">
<img src="http://bagusdream.files.wordpress.com/2011/04/ikonhome.png" /> </a>

Untuk Poisisinya
    Posisi bawah-kanan:

    <a style="display:scroll;position:fixed;bottom:0;right:0;">
    <img src="URL gambar" />
    </a>

    Posisi atas-kanan:

    <a style="display:scroll;position:fixed;top:0;right:0;">
    <img src="URL gambar" />
    </a>

    Posisi bawah-kiri:

    <a style="display:scroll;position:fixed;bottom:0;left:0;">
    <img src="URL gambar" />
    </a>

    Posisi atas-kiri:

    <a style="display:scroll;position:fixed;top:0;left:0;">
    <img src="URL gambar" />
    </a>

Nanti script ini dimasukkan pada wordpress pada bagian widget dan pilih “Teks” paste disitu lalu simpan..

Untuk melihat hasilnya disini sudah saya pasang toolbar ini diblog bagusdream.wordpress.com ada di layar paling bawah pada Browser ini.
Sekian terima kasih…

thanks to this inspiration

Terlantar

Terima Kasih atas kunjungannya di

bagusdream.wordpress.com

Silahkan tinggalkan komentar anda di bawah ini agar blog ini semakin terupdate, menarik dan tentunya dapat berguna serta bermanfaat bagi kita semua tentunya. Amin.

Apabila ada pertanyaan seputar tips trik, informasi, pertanyaan, komentar dan saran silahkan kirimkan email ke
bagusdream@gmail.com

About bagusware

Aku adalah aku, dan kamu adalah kamu... Aku dan kamu pasti bisa...

Posted on 16 April 2011, in IT, Tips. Bookmark the permalink. 17 Komentar.

  1. KERENN, besok saya coba di rumah saja, nanti klo ada yang sulit mohon bantuannya😛

    • Oke..
      makasih silahkan dipraktekkan ya….
      hehe… siapa tau ja lebih keren dari punyaku…sip..sip

      • dah jadi sob, tapi masih kurang , mampir saja, tapi masih bagus punyamu. susah satu persatu, tapi sesuai dengan kesusahannya jadi tambah keren , dulu dah nyoba, tapi g makai toolbar, dan gede2, skarang nyoba lagi🙂

  2. zzzzzz !
    satu toolbar aja aku dah hampir setengah mate !!!
    tapi itu lahh komputer

    • hehe..iya lah…
      aku kemarin ja membuatnya lumayan lama…3 harian deh …udah gitu harus diupload ….
      tapi lasilnya lumayan lah…
      Blogku jadi terkesan unik…

  3. @ Terlantar : Sip sob toolbar yang ada di bawah itu udah mirip ama toolbarnya Windows XP Seven..

  4. ship, keren bgt shob, thanks ya infonya?????

  5. lumayan !
    tapi aku masih lom bsa buat !
    aku binggung pd gmbr ke satu .
    koq adobe potoshop ku ga persis !

  6. Iya dicobain aja dek…
    aq nyoba buatnya memakai Adobe Photoshop 7 yang lama…Karena Photoshop ini lumayan enteng daripada yang CS…🙂
    Mungkin kamu memakai Adobe Photoshop CS yang baru sehingga ada tampilan menu dan tombol yang ada di screen shoot ada yang tidak sama..
    Tetapi kalau menu dan tombol ada di Photoshop 7 ada yang jelas biasanya Photoshop CS yang baru ada dek dan lebih lengkap…

  7. izin coba bro….😀

    • hehehe….iya gan…
      eh tapi pas aq kunjungi blog kamu …udah dipasang ya widget Toolbar Object Dock MAC OSX Snow Leopard nya…hehe..
      mantap gan …makin keren aja blognya….

  8. Hehee…thx sob…atas infonya….klo da wktu ntar saya edit toolbarnya, saat ini pake pnya sobat dulu ya….bolehkan? Hehee….:mrgreen:

  9. Sip gan tambah keren udah bisa nempel di samping kiri nih…🙂

  1. Ping-balik: Mencoba membuat gambar tetap berada di pojok (Float Images) « lostmyidea

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: