1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

User Bar Tutorial - Cara Mudah

Discussion in 'Desain Web & Grafis' started by fuad, Feb 22, 2007.

  1. fuad

    fuad Hero

    Joined:
    Aug 23, 2006
    Messages:
    588
    Likes Received:
    4
    Location:
    Kos2an yg sllu q rindu
    Permisi assalamualaikum,..
    Sesuai dengan judulnya saya akan mencoba untuk membagi tutorial sederhana pembuatan User bar dengan menggunakan SotoShop (photoshop).
    Mungkin tutorial ini sangat sederhana tapi ide untuk posting tutorial ini muncul karena menurut saya thread web graphic ini kurang bergitu ramai, ya..cuman sekedar ikut meramaikan saja.
    Semoga bermanfaat bagi kita semua .. amiien..

    Tinjauan Pustaka
    Apa sich user bar?? ini loh
    Intinya tatap tergantung kreatifitas, ntar kalo ada waktu saya coba buat tut animated user bar, semoga sempat ..hehe..

    Bahan dan Alat:
    1- Biasalah kopi secangkir dan udut sebatang sudah cukup
    2- Photoshop (currently use CS2)
    3- Kompie lengkap dengan monitornya..
    4- Sedikit waktu dan kreatifitas anda..
    5- PHP/MySQL, gak perlu dech gak nyambung..

    Langkah kerja:

    Yah kira-kira nanti seperti ini hasilnya..

    [​IMG]

    Oke siaap..mulai dari langkah pertama,
    Silahkan buka Adobe photoshop, buat lembar kerja baru [control+N] dengan ukuran 350x19 px resolusi 72 pixel/inch 8 bit aja
    liat gambar screenshoot aja dech..

    [​IMG]

    Kemudian setting warna foreground dan background sesuai dengan warna logo yang akan digunakan, dalam kasus ini saya menggunakan warna foreground kuning muda (#ffff99) dengan background kuning lebih gelap (#ffcc00).

    [​IMG]

    Gunakan Gradient tool dengan settingan seperti ini (foreground to background) :

    [​IMG]

    Pada layer tersebut Tarik gradient dari sisi atas ke bawah.. Jika benar maka hasi;nya akan seperti ini

    [​IMG]

    Kemudian buat layer baru klik Layer->New Layer atao tekan Shift+Ctrl+N. Jika sudah tinggalkan sebentar lembar kerja tersebut dan buat lembar kerja baru (Ctrl+N) dengan ukuran 3x3 px saja. lalu zoom ke 1600% agar mudah.
    set warna foreground menjadi hitam (#000000) dan gunakan pencil tool untuk membuat garis diagonal seperti contoh

    [​IMG]

    Kemudian klik Edit->define pattern lalu beri nama terserah anda. ex "garis"

    [​IMG]

    kembali lagi ke lembar kerja pertama tadi, pada layer baru yg telah dibuat sebelumnya trus klik edit->fill (Shift+F5) fill dengan pattern yang telah anda buat tadi.

    [​IMG]

    Setting opacity layer tersebut pada 40%. Kira-kira akan terlihat seperti ini

    [​IMG]

    Pilih gambar yang ingin anda jadikan logo, saya coba menggunakan logo ICQ seperti ini

    [​IMG]

    Copy pastekan logo tersebut di lembar kerja user bar anda, ya jika sama kira2 seperti ini

    [​IMG]

    atau anda juga bisa menambahkan sedikit efek layer seperti outer glow.
    Ini bagian yang seru, anda tinggal menambahkan text sesuai selera anda. Untuk hasil yang lebih baik gunakan file visitor yang bisa anda download di sini.
    Tambahkan efek layer stroke dengan ukuran 1px warna hitam

    Selanjutnya buat layer baru lagi, gunakan Eliptical Marque Tool untuk menyeleksi sebagian layer lalu fill dengan warna putih. Set layer opacity pada 50%.
    Kira2 seperti dibawah ini

    [​IMG]

    Save as atau save for web..Oke selamat dan sukses, sekarang anda sudah bisa menikmati hasil karya anda. Perlu diingat tutorial ini hanyalah sederhana, silahkan kembangkan dengan kreatifitas anda sendiri

    Berikut hasil akhirnya

    [​IMG]

    Habis dech..Jika anda ikutan buat user bar silahkan posting aja disini untuk di comment bareng-bareng..hehe..
     
  2. momogi

    momogi Ads.id Pro

    Joined:
    Jun 21, 2006
    Messages:
    276
    Likes Received:
    1
    Kapan2 boleh ya minta tolong untuk rancang logo di site ogut... :p
     
  3. fuad

    fuad Hero

    Joined:
    Aug 23, 2006
    Messages:
    588
    Likes Received:
    4
    Location:
    Kos2an yg sllu q rindu
    Boleh aja, teman2 tolong liatin donk koq hapis saya post gambarnya gak keluar semua. Tolong di cek apakah bisa terlihat semua gambarnya (seharusnya ada 12 gambar contoh). Tolong yach..
     
  4. born2learn

    born2learn Hero

    Joined:
    May 8, 2006
    Messages:
    579
    Likes Received:
    12
    Location:
    Pemalang - Jateng
    Ms. Danu, gambarnya gak keluar semua tuh. kenapa ya?
     
  5. fuad

    fuad Hero

    Joined:
    Aug 23, 2006
    Messages:
    588
    Likes Received:
    4
    Location:
    Kos2an yg sllu q rindu
    Wah aneh, padahal di tempatku bisa keluar keliatan gambarnya tapi cuma 6 aja, yang enam sisanya kemana ya..?
     
  6. jokvenus

    jokvenus Hero

    Joined:
    Jul 6, 2006
    Messages:
    603
    Likes Received:
    6
    sama ogut keluar semua bang Danu. Thanks tutorialnya yah! karma +1 deh....
     
  7. fuad

    fuad Hero

    Joined:
    Aug 23, 2006
    Messages:
    588
    Likes Received:
    4
    Location:
    Kos2an yg sllu q rindu
    Beneran nich gambarnya keluar semua, jangan boong dech..btw thanks karmanya, tau aja gw doyan karma applaud..hehe..
     
  8. born2learn

    born2learn Hero

    Joined:
    May 8, 2006
    Messages:
    579
    Likes Received:
    12
    Location:
    Pemalang - Jateng
    Beneran Ms. Danu. di tempatku yg keluar cuma 6 gambar. kenapa ya?
     
  9. fuad

    fuad Hero

    Joined:
    Aug 23, 2006
    Messages:
    588
    Likes Received:
    4
    Location:
    Kos2an yg sllu q rindu
    Thuh kan..ntar dech gue fixin menyusul..ntar gue uploadin lagi sabar yach sabar nak..sabar nduk..
     

Share This Page