Headlines News :
Home » » Membuat simple progress bar dengan photoshop

Membuat simple progress bar dengan photoshop

Written By VINCI PER NOI SRIWIJAYA FC on Selasa, 17 Juli 2012 | 07.48

Mendesain progress bar dengan photoshop
Pada tutorial photoshop kali ini, kita akan mempelajari bagaimana cara membuat progress bar biru yang elegant dengan status persen diatasnya, kita akan banyak mempermainkan teknik Layer style photoshop disini.

Download juga hasil desain tutorial ini di akhir postingan sebagai bimbingan anda.

Preview Desain

Berikut hasil desain yang akan anda pelajari pada tutorial ini.
Mendesain progress bar dengan photoshop

Detail tutorial

  • Tingkat kesulitan : Pemula
  • Software yang digunakan : Adobe Photoshop
  • Materi yang dipelajari : Layer style, layer mode
  • Lama pembuatan : 15 Menit

Resource

Berikut file-file pendukung jika anda ingin mengikuti tutorial photoshop ini.

Tutorial

Langkah 1 : Membuat lembar kerja baru dan background

Buat sebuah lembar kerja baru pada Photoshop anda, buat dengan ukuran 500px x 250px dengan resolution 72 pixels/inch. Setelah membuat lembar kerja baru, buat layer baru (ctrl + shift + alt + n) dan buat sebuah gradient, kita akan membuat backgroundnya.
Gradient overlay
Turunkan opacitynya menjadi 20%, lalu buat layer baru dan buat gradient seperti sebelumnya.
Gradient overlay 2
Ubah layer mode menjadi Hard light dan opacity sebesar 15%. Hmm, tampaknya kurang menarik dengan warna putih abu-abu, mari kita buat dengan warna lain. Tanpa menghapus layer tadi, buat layer baru dibawah kedua layer tadi yang kita buat, tambahkan gradasi warna biru.
Gradient overlay
Kembali buat lagi sebuah layer diatas gradient warna biru yang telah kita buat, isikan dengan warna putih dan tambahkan layer style pattern overlay. Pattern dapat anda peroleh pada kolom resource diatas.
Pattern overlay
Beri layer mask pada layer tersebut, isikan mask tersebut dengan warna hitam. Dengan brush lembut warna putih, buat brush hingga menghasilkan efek background seperti berikut ini.
Membuat background gelap

Langkah 2 : Membuat objek progress bar

Langkah pertamanya panjang juga ya :D , Sekarang kita akan mendesain progress barnya. Dengan Rounded rectangle tool, buat sebuah objek dengan Radius 50px, warna #32526b
Membuat objek
Beri layer style.
Drop shadow
inner shadow
Kembali dengan Rounded rectangle tool, buat objek kecil didalamnya yang menandakan persentasi loadnya,
Membuat objek load
Dengan Ellips tool buat lingkaran kecil untuk progress bar yang kita buat (tekan ctrl agar objek bulat sempurna).
Ellips tool
Pada lingkaran tersebut tambahkan layer style seperti berikut ini
Inner shadow
Inner glow
Gradient overlay
Agar lebih realistis, kita akan menambahkan bayangan pada lingkaran tersebut. Pilih pen tool dan buat sebuah bentuk bayangan lingkaran.
Membuat bayangan
Tambahkan blur di filter > blur > gaussian blur dan isi radius sebesar 3 pixels. Tempatkan layer bayangan dibawah lingkaran dan hapus sedikit bagian bayang tersebut hingga membentuk sebuah bayangan yang realistis.
Membuat bayangan

Langkah 3 : Membuat pop up progress

Langkah ini adalah tambahan untuk menambah pop up atau biasa kita lihat sebagai persentase dari sebuah loading, Dengan rounded rectangle tool buat sebuah kotak kecil dengan radius 5 px.
Membuat objek dengan rounded rectangle\" data-mce-src=
Pilih pen tool, dan buat segitiga yang menyatu dengan objek sebelumnya dengan terlebih dahulu mengaktifkan “add to shape area” pada option bar.
add to shape area
Beri layer style untuk objek tersebut
Drop shadow
Inner shadow
Inner glow
Gradient overlay
Stroke
Berikut hasil desain simple progress bar yang telah kita buat.
Hasil desain
Tambahkan angka yang mewakilkan persentase progress bar.
Menambah teks
Demikian tutorial photoshop membuat simple progress bar, semoga ada banyak hal baru yang anda pelajari disini.
Jika ada pertanyaan atau request tutorial, isi di kotak komentar dibawah. Like jika anda rasa tutorial ini berguna, hasil desainnya bisa anda download disini. :)

Sumber
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

Translate

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. WaHz WebBlog - All About Info - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger