Tutorial Loading User Bar UI

Sebelumnya Maaf, Gambar Ada Yang Tidak Saya Masukan Karena Melebihi Batasnya,Hasil Gambarnya Di Spoiler Paling Bawah,Terima Kasih...

Mari kita buka Photoshop!

Buat Lembar Kerja Baru / Ctrl + N Buat Ukuran 450pxl, 400pxl. Resolution 72, Backgroundnya Warna Putih

Selanjutnya, Klik Rounded Rectangle Tool (U) dan atur radius 1px. Gambarlah persegi panjang di tengah tengahnya Lalu Rasterize Layer Di Layer.



Sekarang Klik kanan pada layer persegi panjang > Blending Options dan pilih drop shadow. atur warna latar depan # 9e9c9c, sudut sampai 90".



Klik Gradient Overlay, Klik Gradientnya dan atur Warnanya (Jika Tidak Bisa Silang Dulu Blending Optionsnya Lalu Setting Warna ke 2 2nya, Urut! Lalu Kembali Lg Ke Gredient Overly Klik Gradient) dan tekan Ok.



Klik Stroke, atur warna latar depan # acacac dan ukuran 1px, tekan OK .



Buat layer baru, beri nama header. Klik Marquee Tool (M)Ukuran 1px dan pilih bagian atas nya. Sekarang isi dengan Warna #c8c6c6, dan tekan CTRL + SHIFT + I dan tekan DELETE.



Jadinya Akan Seperti Ini



Klik kanan pada layer header dan pilih Blending Options > Inner Glow atur warnanya #ffffff Size 1px , sisanya Sesuai Gambar



Berikutnya adalah Gradient Overlay Klik Gradient, copy warna Yang Di Gambar (Jika Tidak Bisa Silang Dulu Blending Optionsnya Lalu Setting Warna ke 2 2nya, Urut! Lalu Kembali Lg Ke Gredient Overly Klik Gradient) dan tekan Ok.



Lalu Stroke, ubah warna latar depan #acacac dan ukurannya 1px.



Duplicate layer header, Di Layer Copy hapus Semua Efeknya . Sekarang, Klik Filter> Noise> Add Noise dan Sesuaikan Dengan Gambar.



Gambar harus sama dengan yang Di Gambar. Tambahkan teks pada layer header, huruf arial 13pt warna # 919191.



Tambahkan drop shadow untuk teks, atur jarak dan ukuran 1px, Blend Mode normal dan warna latar depan #ffffff.



Pindah ke loading bar, pilih Rectangular Rounded (U) Size 1px dan gambar bentuk yang sama seperti di Gambar. Namanya Loding Utama.

Pada Loading utama, atur Drop Shadow normal dan warna latar depan #ffffff, ukurannya 1px.

Inner Shadow Blend Mode normal , warna latar depan #ffffff dan ukurannya 1px.

Pada Stroke, atur warna latar depan # 7c7c7c dan ukurannya 1px.

Perhatikan Loading utama layer style Yang kita buat sebelumnya, sekarang kita akan menambahkan loading bar hijau. Gandakan loading-utama (CTRL + J)Di Layer Loading Utama Copy hapus semua gaya blending mode. Isi dengan # 2be11d. Namanya Loading hijau Bisa Di Potong Dengan Marquee Tool (M).

Dalam Loading hijau layer, pilih Blending Options> Gradient Overlay Klik Gradientnya dan atur Warnanya (Jika Tidak Bisa Silang Dulu Blending Optionsnya Lalu Setting Warna ke 2 2nya, Urut! Lalu Kembali Lg Ke Gredient Overly Klik Gradient) dan tekan Ok.

Berikut ini adalah pengaturan untuk Gradient, mengubah opacity Menjadi 10%.

Warna stroke # 1ba910 dan ukurannya 1px.

selesai dengan loading bar, cukup rapi? Berikutnya adalah menambahkan teks di bawahnya, font arial 11pt Warna #636363 Aku juga akan menambahkan beberapa drop shadow ke satu ini.

Pada warna Drop Shadow yang ditetapkan dengan # ffffff dan Blend Mode normal, ukuran dan jarak ke 1px.

Aku menciptakan efek cekung ke teks. Sekarang kita juga menambahkan tombol keluar di sisi kanan atas, font arial 18pt Warnanya# a4a4a4.

Selesai! Membuat bar loading UI