Membuat userbar animasi dengan teks berjalan di Photoshop. Membuat userbar di Layanan Photoshop untuk membuat dan mengedit gambar, foto, dan grafik lainnya

Dengan tutorial ini Anda dapat dengan mudah membuatnya sendiri bilah pengguna anime di Adobe Photoshop. Pelajaran ini akan menunjukkan kepada Anda dua cara membuat bilah pengguna.

1 cara

Buat dokumen baru (Ctrl + N), berukuran 350x19 px (ukuran standar untuk userbar).

Kita perlu mengisi gambar kita dengan gradien.

Saya memilih hitam dan putih untuk gradien. Namun, Anda bisa memilih warna apa saja atau bahkan satu warna saja.

Dalam pengaturan gradien, saya mengatur isian menjadi lingkaran. Anda dapat memasang yang Anda suka.

Jangan takut untuk bereksperimen.

Sekarang mari kita buat blanko untuk isian berupa garis hitam miring. Untuk melakukan ini, buat dokumen baru dengan parameter 3x3 px, RGB, Transparan.

Pilih alat Pensil, hitam dan berukuran 1 px.

Tempatkan titik-titik secara diagonal seperti pada tangkapan layar.

Klik Sunting >

Pilih alat Paint Bucket. Di parameter, atur Pola dan pilih tekstur yang kita buat dari daftar drop-down. Isi layer baru.

Tambahkan gambar apa pun tanpa latar belakang.

Menambahkan prasasti. Pada dasarnya prasasti ditulis dengan font

Namun, Anda bisa menggunakan font apa saja.

Sekarang mari kita membuat efek volume.

Buat lapisan baru. Kami mengatur warnanya menjadi putih. Dengan menggunakan Ellipse tool, buatlah oval yang ukurannya sama dengan gambar.

Buka tab Paths dan klik tombol pertama (lingkaran hitam) di toolbar bawah. Lalu seret Work Path ke dalam bucket.

Atur opacity lapisan menjadi 40%.

Jika Anda ingin memperumit userbar Anda, Anda dapat menambahkan layer baru dan menggunakan kuas yang berbeda untuk membuat gambar.

Metode 2

Kami akan membuat userbar kedua berukuran sedikit lebih besar.

Buat dokumen baru (Ctrl + N), berukuran 350x40 px.

Pilih gambar apa pun yang Anda suka dan seret ke dokumen yang dibuat.

Sekarang mari kita buat blanko untuk isian berupa garis putih miring. Untuk melakukan ini, buat dokumen baru dengan parameter 5x5 px, RGB, Transparan.

Isi layer pertama dengan warna hitam dan buat layer lain. Pilih alat Pensil, putih, berukuran 1 px. Tempatkan titik-titik secara diagonal seperti pada tangkapan layar.

Hapus lapisan hitam dan simpan.

Klik Edit > Define Pattern dan beri nama pada tekstur kita.

Kami kembali ke gambar userbar masa depan kami dan membuat layer baru.

Pilih alat Paint Bucket. Di parameter, atur Pola dan pilih tekstur yang kita buat dari daftar drop-down. Isi layer baru. Atur parameter lapisan ke Soft Light.

Yang akan kita ikuti dalam pelajaran ini.

  1. Ukuran 350x19 piksel.
  2. Latar belakang dengan bayangan pada sudut 45°
  3. Fonta pengunjung
  4. Batas hitam di sekeliling gambar bilah pengguna, tebal 1 piksel. Anda tidak perlu melakukan ini, tetapi dengan garis hitam, bilah pengguna akan terlihat lebih baik dengan latar belakang kiriman forum.

1. Buka Adobe Photoshop. Buat dokumen baru ukuran 350x19:

2. Membuat bingkai: isi gambar dengan warna hitam (Edit --> Isi --> Hitam), lalu pilih alat tersebut Alat Tenda Persegi Panjang. Pilih bagian gambar sehingga ada area yang tidak dipilih sebesar 1 piksel di bagian tepinya. Hapus area yang dipilih. Setelah kita batalkan pilihan (Ctrl+D), kita akan memiliki bingkai hitam di sekeliling userbar.

3. Buat layer baru untuk background (Layer - New - Layer atau Shift-Ctrl-N) dan letakkan di bawah layer dengan bingkai. Isi dengan warna yang diinginkan


2a. Untuk membuat bingkai hitam, Anda dapat melakukannya secara berbeda. Setelah membuat dokumen (lihat langkah 1), isi dengan warna yang diinginkan. Kemudian di panel Layers, klik kanan pada layer kita dan pilih Opsi Pencampuran. Di panel yang muncul, buka tab “Penetasan” dan lakukan seperti yang ditunjukkan pada gambar di bawah ini:

Kami mendapatkan hasil yang sama seperti setelah langkah 2 dan 3.

4. Anda dapat menambahkan bayangan bagian dalam. Buka jendela yang sama seperti pada poin 2a dan pilih item Bayangan Batin(Bayangan Batin):


Tidak perlu menyetel parameter yang sama seperti pada contoh kami, Anda dapat bereksperimen.

5. Lakukan arsiran. Untuk melakukan ini, mari buat tekstur baru. Ini dilakukan seperti ini.

Mari kita membuat dokumen piksel 4x4 dengan latar belakang transparan.


Mari kita perbesar dokumen yang dihasilkan secara maksimal (1600%) agar lebih nyaman dalam bekerja. Pilih alat Pensil ( Pensil) ukuran 1px dan gunakan untuk menggambar garis dengan warna #91E780, seperti yang ditunjukkan di bawah ini:

Sekarang simpan gambar yang dihasilkan sebagai Pola: Menu Sunting --> Tentukan Pola dan beri nama pada pola Anda:


6. Mari kembali ke userbar kita. Membuka lagi Opsi Pencampuran(lihat poin 2a), buka tab Hamparan Pola, pada saat itu Pola pilih tekstur yang baru saja kita buat dan ubah parameter berikut:


7. Tambahkan teks. Kami memilih font Pengunjung - mudah dibaca bahkan dengan ukuran kecil (unduh fontnya). Warna putih. Setelah prasasti kita dibuat, kita akan menerapkan efeknya pada teks Bayangan Luar:


Dan tambahkan bayangan luar (goresan) setebal 1 piksel:


Hasil:

8. Anda dapat menambahkan efek kaca pada gambar kita. Untuk melakukan ini, buat layer baru (Lapisan - Baru - Lapisan atau Shift-Ctrl-N) di atas lapisan latar belakang, tetapi di bawah lapisan keterangan. Pilih bagian atas gambar dengan alat tersebut Alat Tenda Elips dan isi dengan warna putih menggunakan alat tersebut Alat Ember Cat (G). Selanjutnya, kurangi transparansi lapisan ini (Kegelapan) hingga 30%:

Bilah pengguna kami sudah siap.

Selain efek kaca, Anda dapat menggunakan teknik lain yang sering digunakan saat membuat bilah pengguna - mengisi latar belakang bukan dengan warna seragam, tetapi dengan gradien. Untuk melakukan ini, pilih dua warna untuk mengisi latar belakang di toolbar:

Lalu kita menggunakan alat tersebut Isi Gradien (Alat Gradien). Klik di bagian atas gambar Anda dan, tanpa melepaskan tombol kiri mouse, gambar garis ke bagian bawah dokumen (Anda dapat melakukannya sebaliknya, maka gradien akan mengarah ke arah yang berlawanan).

Maka userbar yang sudah selesai akan terlihat seperti ini:

Anda dapat mengunduh sumber PSD bilah pengguna ini untuk bereksperimen sendiri dan mempelajari cara menggambar bilah pengguna Anda sendiri. Jangan lupa bahwa Anda dapat menyisipkan gambar ke dalam bilah pengguna! Kami menyarankan Anda melakukannya sendiri. ;-)

Buat dokumen baru berukuran 8x8 piksel dan cat seperti berikut. Anda dapat mengambil warna abu-abu secara acak, tetapi peringkat warnanya harus diperhatikan.

Kemudian buka gaya lapisan dengan mengklik ikon yang sesuai di palet lapisan. Pilih sebuah item
"Pattern Overlay", di dalamnya kita memilih pola yang kita buat dan memberikan pengaturan berikut:

Itu saja, latar belakangnya sudah siap. Seharusnya terlihat seperti ini:

Pilih logo atau desain yang sesuai dan buka di Photoshop. Saya mengambil yang ini:

Atur mode tampilan ke "Windows" (mode tampilan diubah dengan tombol F) dan seret logo ke dokumen dengan bilah pengguna menggunakan mouse. Lapisan baru telah dibuat, dan secara otomatis disebut “Layer 3”. Di Panel Lapisan, kami memeriksa apakah lapisan dengan logo aktif, dan menggunakan alat "Pindahkan" untuk memberikan posisi horizontal yang diinginkan pada logo. Selanjutnya, aktifkan mode gertakan, jika tidak diaktifkan (tab Tampilan --> Gertakan atau tekan Shift+Ctrl+;), dan sambil menahan Shift, gerakkan logo ke bawah sehingga tepi atas logo “menempel” ke tepi bawah bilah pengguna.

Kami menulis beberapa teks. Font Pengunjung sangat cocok untuk bilah pengguna; Anda dapat mengunduhnya di artikel Font untuk bilah pengguna Pengunjung dengan dukungan untuk huruf Rusia. Cara memasang font dijelaskan dalam artikel Bekerja dengan font dan menambahkan font di Adobe Photoshop

Penting untuk diingat bahwa saat menggunakan font dengan ketebalan 1-2 piksel, Anda harus menonaktifkan anti-aliasing apa pun di palet font.

Saya membuat dua label, "pemrosesan gambar" dan "grafis-video.ru", masing-masing label pada lapisan pengujian terpisah, yang disebut lapisan ini "pemrosesan gambar" dan "teks: grafis-video.ru". Mereka diperlukan untuk menganimasikan teks, khususnya untuk menganimasikan tampilan teks huruf demi huruf.

Mari kita mulai animasi.

Sekarang yang utama adalah jangan membingungkan urutan tindakan, jika tidak maka akan menjadi berantakan. Namun, bagaimanapun juga, program Photoshop yang luar biasa selalu memungkinkan kita untuk membatalkan satu atau lebih tindakan yang salah dengan menekan kombinasi tombol Shift+Alt+Z.

Buka panel animasi (tab Jendela --> Animasi). Jika panel tidak terbuka dalam mode frame-by-frame, klik tombol (2). Bingkai pertama animasi dihasilkan secara otomatis. Atur waktu tampilan bingkai menjadi 0,1 detik dengan mengklik segitiga di sudut kanan bawah ikon bingkai.

Ingat, logo kita ada di bawah, tidak terlihat? Jadi dia tidak terlihat.

Buat frame kedua (klik tombol (1) pada panel animasi). Tahan Shift, seret logo “Layer 3” secara vertikal ke atas hingga menghilang dari zona visibilitas, sehingga tepi bawahnya menempel ke tepi atas bilah pengguna. Klik pada tombol (3), di jendela yang terbuka kita membuat 10 frame perantara.

Kami memeriksa apakah semua frame memiliki waktu tampilan 0,1 detik. Jika tidak, Anda dapat memilih yang Anda perlukan dengan menahan Ctrl, mengklik segitiga di sudut kanan bawah ikon bingkai mana pun, dan mengubah waktu di panel yang terbuka. Ini akan berubah untuk semua frame yang dipilih.
Klik mainkan dan nikmati hasilnya.

Setelah menikmati waktu yang diberikan, mari kita lanjutkan ke bagian kedua tarian berlogo tersebut. Mari kita klik frame terakhir di palet animasi (pastikan logo tidak terlihat di kolom userbar), lalu buat frame baru. Klik pada "Layer 3" di Panel Layers dan tekan Ctrl+J. Dengan ini kita mengkloning "Layer 3". Hasilnya adalah layer baru “Layer 3-copy”. Pindahkan ke tampilan, tekan Ctrl+T dan skalakan logo agar sesuai dengan bilah pengguna:

Ini adalah gambar grafis dengan dimensi 350x19 piksel. Userbars digunakan di forum, ditempatkan di tanda tangan dan mengekspresikan suasana hati, sikap terhadap sesuatu, minat, hobi, dan sebagainya. Untuk setiap suasana hati atau acara, Anda perlu membuat bilah pengguna dan menempatkannya di tanda tangan sesuai kebutuhan.

Bagaimana cara membuat bilah pengguna?

Membuat bilah pengguna adalah proses yang sederhana. Anda dapat membuat bilah pengguna online menggunakan editor grafis atau perancang spanduk gratis, atau Anda dapat menggunakan perancang bilah pengguna khusus, yang sangat mudah digunakan, dan hasilnya berupa gambar berukuran tetap yang bagus dengan teks Anda.

Untuk membuat userbar di layanan Userba, mulailah dengan mengatur latar belakang, lalu pilih arah dan warna gradien. Selanjutnya, tentukan efek tambahan yang akan digunakan pada userbar. Dari daftar drop-down, pilih bayangan latar belakang (Notch) dan hamparan pola (Effect) untuk menciptakan efek orisinal pada gambar, dan juga atur lokasi sorotan (Highlight) untuk memberikan tiga dimensi dan kepribadian pada gambar. bilah pengguna. Sejumlah besar templat akan memungkinkan Anda mewujudkan berbagai ide.

Yang tersisa hanyalah mengonfigurasi warna bingkai dan komponen teks pada bilah pengguna. Tentukan font, ukuran, warna teks dan tulis teks itu sendiri. Untuk melihat versi final, cukup klik tombol “Buat”, dan bilah pengguna online yang Anda buat akan muncul di jendela pratinjau.

Layanan untuk membuat dan mengedit gambar, foto, dan grafik lainnya:

Dan identitas perusahaan, amplop dan kartu nama

Mirip dengan Photoshop yang terkenal

Layanan menarik bagi yang suka menggambar

Brashechka

Cukup di layanan BannerFans

  • Sergei Savenkov

    semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat