N I N E Q U A D R A T BY:IIEN SOLIHIN

Download Wallpapers Layout Projects

  • Ninequadrat
  • Labels:
  • Change wallpaper if you as User Computer almost do something work project with computer and always save the project file on desktop, maybe you can choose this wallpapers with Design Layout Project sort by difference classifications with manually arrange icons files from your computer such as Exploring Files then like start the Test Project. From Progress Project to Final Project, Downloaded Files, choosing your best Internet Browser Programs and arrange icons Best Computer Game Applications your choices. The layout design of wallpapers for Wide Screen this will be make your desktop neat impressed.

    Hopefully useful

    Size 590px × 369px sample of wallpaper

    Select Wallpaper Themes
    enable for all size resolution WIDE SCREEN DESKTOP
    800 x 600
    1024 x 768
    1280 x 600
    1280 x 720
    1280 x 768
    1280 x 800

    Dark Themes Borobudur Themes Flower Themes
    Green Themes Macintosh Themes Naruto Themes
    Orange Themes Pink Flowers Vector Reog Themes
    Sakura Flower Windows Themes

    »»  READMORE...

    Tutorial Flash Animation Wave Flag

  • Ninequadrat
  • Labels:
  • Video Tutorial how to make animation waving flag with Flash


    Play Video Flash Tutorial





    »»  READMORE...

    Ninequadrat Doodles Blog Banner

  • Ninequadrat
  • Labels:
  • Inspiring from GOOGLE DOODLES when GOOGLE INC. changing Google Style holiday and events his logo theme sites. This blog is also changing design and theme style on special day's or special situation to create blog banner and blog template.

    1st banner blog created when I create this blog on 2008 to 2011,
    I like blue colors, so the design is vector face my Self with a blue background.
    2nd banner blog created on January 2011,
    first beginning my activities for writing more blog posts, in this year I full redesign layout and
    template this blog for attracted by yellow bright colors and cute green snake with yellow cap.
    3th banner blog created on February 2011,
    red themes in Chinese New Year (Gong Xi Fa Coy). The Chinese culture was inspiring me
    in created banner with Lion Dance and Chinese ornament.
    4th banner blog created on February 2011,
    in this month I also create Valentine Day's banner with red heart symbol and pink flowers.
    I think in this opportunities this blog is cute with pink template.
    5th banner blog created on March 2011,
    my message in this banner is "We Must Save Our world and Go Green".
    6th banner blog created on May 2011,
    my message in this banner is "We Must Keep to Protecting Coral Reefs from Theft".
    7th banner blog created on June 2011,
    redesign from toothpaste brand mark, I wanna be strong concept designing
    Creative Multimedia and Design with Strengthen Layout Resolution.
    8th banner blog created on July 2011,
    when I eat chocolate and drink orange juice was inspiring me
    to create banner with orange color and layout.
    9th banner blog created on August 2011,
    welcome the month of Ramadan.
    10th banner blog created on August 2011,
    Indonesia Independent Day's 66th, 17 August 2011.
    Hopefully this moment will be a spirit for us to be Road to 100000 blog visitors.
    11th banner blog created on August 2011,
    end of the month Ramadan.
    12th banner blog created on September 2011,
    fruit and vegetables.
    »»  READMORE...

    Tutorial Rollover Image Photoshop

    How To Make Rollover Image With Photoshop
    Kelebihan Rollover Image pada Photoshop adalah bisa dibuat nya Rollover Button untuk Script HTML yang berbasiskan image (gambar) dari dua jenis gambar yang berbeda, adapun gambar tersebut adalah gambar utuh yang tersusun dari potongan-potongan gambar baru (rollover slice) yang dibuat dengan Photoshop.
    Untuk lebih memudahkan dalam mem-parsing link Original Image dengan Rollover Image, maka rollover image yang di buat menggunakan Dreamweaver juga agar kode HTML yang tercipta mudah di modifikasi dan ditampilkan di website.


    Contoh sederhana Rollover Image Bumblebee Transformers  Robot yang dibuat dengan Adobe Photoshop dan Adobe Dreamweaver.

    Semoga Bermanfaat
    Posted By : Ninequadrat

    THE TUTORIAL

    Step 1
    1. Open File Gambar yang akan dibuat Rollover Image dengan Photoshop.
    2. Gunakan Slice Tool (K) untuk membuat potongan-potongan bagian rollover image.
    3. lalu buatlah area Slice Rollover Image menjadi 6 bagian :
      • Kepala
      • Tangan Kanan
      • Tangan Kiri
      • Badan
      • Kaki Kanan
      • Kaki Kiri
    Step 2
    Setelah semua area rollover sudah terbagi bagi, langkah selanjutnya adalah simpan File Image menjadi file Web HTML : Save for Web & Devices (Alt + Shift + Ctrl + S).
    Step 3
    Maka muncul lah window dialog Save for Web & Devices,
    1. Gunakan lah setting pengaturan type file GIF dengan Color BIT Depth sesuai keinginan, pada gambar dibawah ini menggunakan 16 Colors, agar ukuran file nya tidak terlalu besar.
    2. Dilanjutkan dengan klik tombol Save.
    Step 4
    Setelah menekan tombol save maka akan mucul window dialog lokasi (folder) tempat penyimpanan, yang harus dilakukan adalah :
    1. Buatlah folder baru dengan Click Icon New Folder dengan nama folder "button-off".
    2. Kemudian simpan file HTML nya juga dengan nama "button-off", pada gambar dibawah ini contoh file HTML dengan nama "tutorial-rollover-image-button-off.html".
    3. Diakhiri dengan klik tombol Save.
    Dengan demikian terciptalah file HTML Rollover Image dengan Button OFF
    Step 5
    Sekarang adalah tahap membuat rollover image dengan Button ON
    1. Gunakan perintah Duplicate Image pada menu Image > Duplicate Image.
    2. Maka akan muncul Window Dialog Duplicate Image, Duplikasikan gambar dengan memberi nama file "tutorial-rollover-image-button-on".
    3. Diakhiri dengan klik tombol OK.
    Step 6
    1. Pilih layer Bumblebee pada menu susunan Layers di pojok kanan bawah
    2. Gunakan Menu Layers
    3. Gunakan Layer Style
    4. Lalu gunakan layer style Outer Glow
    Step 7
    Pada setting pengaturan Outer Glow, gunakan warna yang berbeda, pada contoh ini menggunakan warna Hijau dengan Blend Mode Normal dan Opacity 100%
    Step 8
    Gunakan juga layer style Color Overlay dengan warna yang di inginkan, pada contoh ini menggunakan warna Hijau dengan Blend Mode Overlay dan Opacity 50%. Lalu dilanjutkan dengan klik tombol OK
    Step 9
    Kemudian simpanlah gambar yang telah di duplikasi (tutorial-rollover-image-button-on) seperti pada Step 2 to Step 4.
    Ini adalah akhir pembuatan dari program Photoshop, jangan lupa menyimpan juga semua file Photoshop nya (PSD) dengan nama yang sejenis (tutorial-rollover-image-button-off dan tutorial-rollover-image-button-on), agar di lain waktu bisa di edit kembali.
    Step 10
    1. Buka file "tutorial-rollover-image-button-off.html" dengan program Dreamweaver, lalu pilih bagian rollover image klik bagian Kepala Bumblebee.
    2. Kemudiah hapus gambar rollover Kepala Bumblebee dengan menekan Keyboard DELETE. Pada tahap ini adalah menghapus satu persatu bagian-bagian rollover yang sudah ada lantas menggantinya dengan file GIF image yang dibuat dengan Photoshop, lihat Step 11.
    Step 11
    Pada contoh gambar dibawah ini memperlihatkan hanya bagian Kepala Bumblebee yang sudah dihapus, dalam hal ini diperlukan menghapus semua bagian-bagian Bumblebee seperti Kepala, Tangan Kiri, Tangan Kanan, Badan, Kaki Kanan dan Kaki Kiri semuanya dihapus.
    Kemudian pada slot kosong yang sudah dihapus di isi kembali dengan Rollover Image di Dramweaver.
    1. Pilih bagian bagian Kepala Bumblebee, lalu hapus dengan menekan Keyboard DELETE.
    2. Klik icon menu Image
    3. Lalu klik Rollover Image
    Step 12
    1. Beri nama Rollover Image Name : kepala
    2. Browse Image letakan file GIF Original Image kepala Bumblebee, pada contoh ini kepala Bumblebee dengan nama : "tutorial-rollover-image-button-off_04.gif".
    3. Browse Image letakan file GIF Rollover Image kepala Bumblebee, pada contoh ini kepala Bumblebee dengan nama : "tutorial-rollover-image-button-on_04.gif".
    4. Isi Alternate Text dengan : Kepala Bumblebee
    5. Masukkan juga URL yang dikehendaki (When clicked, Go to URL)
    6. Lalu diakhiri klik tombol OK.
    Lakukan Step 12 ini pada bagian tubuh Bumblebee yang lainnya, seperti Tangan Kanan, Tangan Kiri, Badan, Kaki Kanan dan Kaki Kiri. Pastikan juga selalu memberi nama Rollover Image Name dengan nama yang berbeda-beda dan tidak salah Browse dalam menempatkan file GIF Original Image dan Rollover Image.


    Dibawah ini adalah potongan-potongan file GIF Rollover Image (Rollover Slice)
    yang terletak di folder images file HTML dari Photoshop
    tutorial-rollover-image-button-off.html
    dan
    tutorial-rollover-image-button-on.html

    ORIGINAL IMAGE
    (ROLLOVER OFF)
    ROLLOVER IMAGE
    (ROLLOVER ON)
    tutorial-rollover-image-button-off_04.gif tutorial-rollover-image-button-on_04.gif
    tutorial-rollover-image-button-off_03.gif tutorial-rollover-image-button-on_03.gif
    tutorial-rollover-image-button-off_05.gif tutorial-rollover-image-button-on_05.gif
    tutorial-rollover-image-button-off_07.gif tutorial-rollover-image-button-on_07.gif
    tutorial-rollover-image-button-off_08.gif tutorial-rollover-image-button-on_08.gif
    tutorial-rollover-image-button-off_09.gif tutorial-rollover-image-button-on_09.gif
    Step 13
    Jika seluruh Rollover Image dari nomor 1 sampai nomor 6 sudah dihubungkan semuanya, maka selesailah pembuatan Rollover Image dari kombinasi dua program yang berbeda, Adobe Photoshop dan Adobe Dreamweaver. Simpanlah Rollover yang sudah dibuat sebagai file web agar kode HTML nya bisa digunakan di Website ataupun Blog seperti contoh diatas.
    »»  READMORE...
    Related Posts
    (c) Copyright 2010 Ninequadrat . Blogger template by Bloggermint | Powered by Blogger
    Sponsored by Ninequadrat