Tutorial Adobe Photoshop membuat interface Aplikasi Audio yang Cantik

Tutorial ini akan menunjukkan cara membuat antarmuka musik Anda sendiri yang memungkinkan Anda mengelola lagu di perangkat Anda, entah itu telepon, komputer atau tablet. Dengan mempelajari beberapa trik desain keren, Anda bisa membawa gagasan antarmuka Anda sendiri ke kehidupan. Tutorial ini akan menunjukkan cara membuat dua layar untuk antarmuka Anda; layar pemuatan dan antarmuka utama dengan daftar lagu.

Preview Hasil Akhir

Sumber Tutorial

Pembicara - 123rf.com
Kain karpet - cgtextures.com

Langkah 1

Baiklah, mari kita mulai dengan menciptakan kanvas sedikit lebih besar dari pada layar terakhir yang kita inginkan. Mari kita atur ke 1080 × 1920 dan resolusi 72 px / inch. Untuk warna background pilih warna hitam.

Langkah 2

Ambil Rectangular Marquee Tool (M) dan gambarlah pilihan yang menutupi seluruh bagian atas kanvas (sekitar 1/3 dari keseluruhan gambar). Gunakan Paint Bucket (G), lalu isi seleksi dengan warna hitam. Selanjutnya masuk ke Filter> Noise> Add Noise.

Langkah 3

Sekarang masuk ke Filter> Blur> Gaussian Blur dan tambahkan kabur sekitar 0,4 jari.

Langkah 4

Lalu pergi ke Filter> Sharpen> Unsharp Mask dan pertajam seperti yang ditunjukkan di bawah ini.

Inti dari ini adalah membuat tekstur itu sedikit lebih halus daripada kebisingan itu sendiri. Jika Anda merasa teksturnya bisa lebih mempertajam, maka maju dan tekan Ctrl + F, ini akan menerapkan filter bekas terakhir (yang merupakan Unsharp Mask), dengan cara ini efeknya akan menjadi lebih kuat.

Langkah 5

Pada dasarnya tidak terlalu penting berapa banyak suara yang Anda berikan pada awalnya, karena ini bisa disesuaikan. Bergantung pada seberapa banyak Anda menginginkan tekstur latar belakang Anda terlihat, Anda perlu mengatur Opacity lapisan kami yang berisi suara bising. Aku akan pergi ke depan dan di Palette Layers menurunkannya menjadi sekitar 4%.

Jika Anda ingin tekstur Anda menjadi lebih terlihat, Anda bisa menambahkan sedikit ketajaman (seperti pada langkah 4).

Langkah 6

Sekarang karena tekstur suara itu mulus, Anda dapat dengan mudah menduplikatnya (Ctrl + J) dan menghubungkan setiap ubin untuk menciptakan jenis latar belakang apa pun.

Langkah 7

Cobalah untuk menghubungkan mereka seperti yang ditunjukkan pada langkah sebelumnya dan pindahkan sedikit ke atas sehingga keseluruhan desain memiliki satu celah kecil seperti pada layar di bawah ini.

Langkah 8

Sekarang buat layer baru di atas, ambil Rectangular Marquee Tool (M) dan pilih keseluruhan bagian bawah latar belakang (mulai dari langkan gap). Kemudian pilih Brush Tool (B), atur Opacity menjadi 100%, Arahkan ke 1% dan Hardness menjadi 0%. Gunakan warna putih dan cat lembut pada layer baru, di dalam seleksi (seperti ditunjukkan).

Langkah 9 (Menciptakan Highlights Tepi)

Sekarang, cobalah untuk memahami dan mengingat langkah-langkah berikut, karena kami akan mengulanginya berkali-kali:

Pastikan pilihan Anda masih aktif, jika Anda membatalkan pilihan, buat kembali pilihan yang sama lagi. Perkecil area celah dan buat layer baru di atas segalanya, beri nama "Edge highlight". Pilih Rectangular Marquee Tool (M), lalu klik kanan pada kanvas dan pilih "Stroke ..." dari kotak dialog. Tetapkan seperti yang ditunjukkan di bawah ini.

Untuk membatalkan pilihan klik tekan Ctrl + D.

Setelah menerapkan pengaturan ini, garis akan terlihat seperti ini.

Langkah 10 (Menciptakan Highlights Tepi)

Selanjutnya pergi ke Layers Palette, tambahkan layer mask ke layer "Edge highlights". Klik topengnya dan tekan Ctrl + I (invert). Ini akan membalikkan topeng yang membuat semua lapisan tersembunyi.

Langkah 11 (Menciptakan Highlights Tepi)

Kemudian untuk membuat tepian sorot kita perlu mengungkapkan topengnya. Cukup pilih layer mask dan cat lembut sepanjang seluruh horisontal panjang celah (arah ditunjukkan oleh panah merah). Untuk melakukan ini gunakan sikat putih lembut (pengaturan sikat: Opacity sampai 100%, Arus sampai 5% dan Kekerasan sampai 0%).

Langkah 12

Sekarang Anda tahu bagaimana membuat highlight tepi, yang sangat penting dalam desain seperti ini. Mereka sekarang akan muncul di mana pun Anda ingin memasukkan celah. Jadi, teruskan dan gunakan pengetahuan ini, marilah kita membuat celah untuk logo antarmuka kita.

Ambil Pen Tool dan menggambar lapisan bentuk hitam seperti yang Anda lihat di bawah ini. Jika Anda tidak begitu familiar dengan menggambar bentuk maju dengan Pen Tool, Anda bisa menggunakan Rounded Rectangle Tool sederhana (U) yang diisi dengan warna hitam atau menggambar trapezoid bentuk bermata tajam.

Setelah selesai lihat langkah 9, 10, 11 (buat sorotan tepi) dan tambahkan sorotan yang bagus di bagian bawah bentuk bersamaan dengan arah yang ditetapkan oleh panah merah. Ingatlah bahwa sekarang Anda akan mendasarkan pada pilihan trapezoid (untuk memanggil pilihannya cukup tahan Ctrl dan klik kiri pada thumbnail layer tarpezoid, kemudian ikuti langkah-langkah yang disebutkan: 9, 10, 11). Prosesnya identik.

Langkah 13

Sekarang kita akan membuat interface logo / nama. Saya telah menggunakan font Sofia Pro di sini, mengaturnya ke Bold, 80pt. Anda bisa menggunakan font serupa seperti Futura atau Century Gothic dll, bahkan Helvetica tua yang baik akan melakukan pekerjaan itu, hanya sampai selera perosnal. Setelah font diatur, posisikan di tengah bentuk dan ubah warnanya menjadi oranye # dd5316.

Pergi ke Bleding Options (Layer Style) dari lapisan jenis itu dan periksa Stroke. Tetapkan seperti yang ditunjukkan di bawah ini.

Juga pastikan Anda menurunkan lapisan Fill sampai 0% di Palet Lapisan, jadi menjadi transparan.

Langkah 14

Selanjutnya, duplikat layer tipe itu (Ctrl + J). Bawa Isi kembali ke 100% dan hapus centang pada pilihan Stroke pada Blending Options (Layer Style). Pada dasarnya batalkan langkah sebelumnya, jadi lapisannya adalah teks oranye sederhana.

Langkah 15

Gandakan layer teks itu lagi (tipe oranye). Pilih Move Tool (V) dan gunakan panah keyboard untuk memindahkannya 1 pixel ke bawah dan 2 piksel ke kanan (1 tekan panah ke bawah, 2 hits panah kanan). Lalu pergi ke Bleding Options lagi dan atur Gradient Overlay dan Drop Shadow seperti yang ditunjukkan di bawah ini.

Setelah selesai - sekali lagi masuk ke Palet Lapisan dan matikan teks ini Disiapkan dengan menurunkannya menjadi 0%. Hasilnya akan terlihat seperti yang berikut. Seperti yang bisa dilihat, gaya lapisan memberi bayangan bagus ke bagian bawah teks, sementara gerakan yang dilakukan dengan keyboard menghasilkan sorotan tepi yang mengagumkan dan tajam di sisi kiri atas teks.

Langkah 16

Sekarang duplikat layer teks terbaru, buka Blending Options dan atur seperti gambar di bawah ini.

Sekali lagi isi harus diatur ke 0%.

Langkah 17 (Menciptakan Gloss)

Oke, selanjutnya ambil Pen Tool (P), pastikan sudah diatur untuk menggambar Shape. Kemudian coba buat bentuk yang mirip dengan tambang. Pastikan Anda mengubah warnanya menjadi putih.

Bila sudah selesai dengan bentuknya, maka yang terpenting disini adalah masuk ke layer Properties dan atur Feather dari bentuk menjadi 2,0 px - ini akan memberi bentuk tepi yang terasa lembut. Jika Anda tidak melihat Properties, pergi ke bar Photoshop utama di bagian atas dan pilih Window> Properties.

Langkah 18 (Menciptakan Gloss)

Sekarang pergi ke Layers Palette dan buat layer mask untuk lapisan bentuk putih ini. Ambil sikat hitam (pengaturan: Opasitas sampai 100%, Arahkan ke 5% dan Kekerasan sampai 0%) dan cat pada masker layer untuk membuat transisi yang halus. Lakukan perlahan dengan presisi. Intinya adalah menjadikannya tidak biasa. Mulai dari sisi kiri (buat kurang terlihat disana) ke sisi kanan (buat lebih terlihat disana).

Langkah 19

Untuk menambahkan sentuhan akhir untuk logo ke Palet Lapisan, tahan Ctrl dan leftclick pada thumbnail layer bentuk trapesium (ini akan mengingat pilihannya). Lalu pergi ke Select> Contract, dan tetapkan nilai yang sesuai dengan ukuran bentuk Anda. Jika itu serupa dengan saya, ketik sekitar 25 piksel di sana. Jika tidak, cukup bereksperimen dengan nilainya.

Seleksi sekarang harus menyusut 25 piksel. Jadi buat layer baru di atas dan ambil Brush Tool (B). Atur semua nilai sikat menjadi 100% (kecuali untuk Kekerasan, bisa sekitar 50-60%) dan catkan goresan horizontal yang tidak rata. Gunakan warna kulit yang panas (bisa berwarna jenuh dan merah terang atau oranye, atau coklat dll)

Setelah selesai hapus pilihan (Ctrl + D) dan turunkan opacity layer stroke merah menjadi sekitar 6%, jadi hampir tidak terlihat, namun tetap terlihat.

Langkah 20

Sekarang mari kita membuat beberapa tombol. Ambil Rounded Rectangle Tool (U), atur Radius sudut membulat menjadi 20px (ditunjukkan dengan lingkaran merah di bawah). Kemudian pilih warna hitam dan gambar bentuk tombol, seperti gambar di bawah ini.

Langkah 21

Selanjutnya duplikat tombol itu dan gunakan Ctrl + T> Free Transform untuk mengubah ukurannya. Jika proporsinya tidak tepat, Anda bisa mencoba menyesuaikannya dengan Direct Selection Tool (A). Alat ini memberi Anda kemampuan untuk mengubah penempatan anchor points. Anda bisa mengubahnya dengan mengklik jalur bentuk.

Jika Anda tersesat atau tidak tahu bagaimana melakukan ini, ada dua cara lain untuk melakukannya dengan cukup cepat:

1. Anda bisa kembali ke Rounded Rectangle Tool (U) dan menggambar bentuk tombol yang sama, namun sedikit lebih kecil, jadi sangat cocok di tengah bentuk utama kami.

2. Lihat langkah 19 (tembakan layar pertama pada langkah ini) dan ikuti instruksi yang tepat di sana. Ini pada dasarnya adalah proses yang sama, namun nilai Kontrak seharusnya sekitar 12 piksel sekarang.

Gandakan bentuk hitam yang lebih kecil (jadi Anda memiliki 3 bentuk hitam di palet layer Anda: 1 lebih besar dan 2 yang lebih kecil). Ubah warna bentuk baru menjadi cokelat satuated # 401c02. Tekan Ctrl + Alt + G sehingga layer menjadi clipping mask. Lalu pergi ke Palette Layers, tambahkan layer mask ke lapisan bentuk coklat ini (jika belum ada di sana), pilih masker dan tekan Ctrl + I untuk membalik warnanya. Ini akan membuat tombol coklat hilang.

Sekarang pastikan Anda memiliki lapisan topeng yang dipilih dengan mouse Anda. Kemudian pilih Brush Tool (B), atur Opacity menjadi 100%, Flow to 2% dan Hardness menjadi 0%. Gunakan warna putih dan cat lembut pada masker (di mana panah merah menunjukkan) untuk mengungkapkan warnanya.

Baiklah, jika Anda mendapatkannya dengan benar, seharusnya sekarang terlihat seperti layar di bawah ini. Untuk memastikan Anda mengerti apa itu Clipping Mask (Ctrl + Alt + G), perhatikan lingkaran merah di palet layer di bawah ini.

Langkah 22

Buka Palette Layers, Ctrl + rightclick pada thumbnail layer "button center" untuk memanggil pilihannya. Kemudian klik kanan dan pilih Stroke.

Lalu pergi ke Layer> Layer Mask> Hide All.

Ungkapkan masker dengan paitning di atasnya dengan sikat putih lembut. Cat di mana panah merah menunjukkan untuk memberi sedikit cahaya tepi yang bagus.

Langkah 23

Sekarang ketik "Music chart" (warna tidak masalah) di tengah tombol. Selanjutnya, pergi ke Layers Palette, rightlclick pada layer teks dan pilih Blending Options. Atur semuanya persis seperti yang ditunjukkan pada gambar di bawah ini.

Langkah 24

Baiklah, seperti untuk langkah terakhir, masuk saja ke Palette Lapisan, temukan lapisan gloss dari tangga 17 dan 18 dan cukup duplikatnya menggunakan Ctrl + J). Seret layer itu ke grup tombol kami (di bagian paling atas), ubah ukurannya sedikit (jadi sesuai tombolnya), posisikan dengan benar di bagian tengah dan tekan Ctrl + Alt + G untuk kliping topeng.

Pastikan setiap lapisan dalam kelompok itu ada di kliping masker sehingga tidak keluar dari bentuk pusat.

Langkah 25

Untuk memberi sentuhan kelas pada tepi tombol, Anda bisa merujuk ke langkah 9, 10, 11 (menciptakan highlight tepi) dan dengan menggunakan teknik yang sama, tambahkan sedikit cahaya ke bagian kiri bawah.

Perlu diingat bahwa sekarang Anda dapat menduplikat seluruh kelompok lapisan (Ctrl + J) dan meletakkannya di tempat lain untuk membuat lebih banyak tombol. Satu-satunya hal yang perlu Anda lakukan hanyalah mengubah jenisnya.

Langkah 26

Buka gambar speaker, ekstrak dengan menggunakan Magic Wand Tool (W) dan seret ke suatu tempat dalam ilustrasi kami.

Selanjutnya tekan Ctrl + U (Hue / Saturation) dan tetapkan nilai yang tepat ke Reds, Yellows, Cyans and Blues.

Langkah 27

Sekarang ambil Elliptical Marquee Tool (M), tahan Shift dan gambar lingkaran bagus di sekitar membran.

Kemudian tahan Alt dan gambar lingkaran lain untuk mengecualikan bagian tengah speaker. Kita hanya ingin selaput yang dipilih.

Petunjuk: Untuk memindahkan pilihan saat menggambar, gunakan Space bar pada keyboard.
Contoh: jika Anda ingin mengecualikan bagian tengah dari pilihan saat ini, tekan Alt (exclude) menggambar lingkaran pilihan, sekarang jika Anda ingin memindahkannya - tetap tahan Alt tapi juga tekan dan tahan panel Space di keyboard - sekarang Anda mampu memindahkan / memposisikan ulang pilihan, sampai Anda menjatuhkan Space bar.

Setelah selesai, pergi ke Layers Palette, pilih Hue / Saturation. Ini harus secara otomatis sesuai dengan pilihan Anda. Kemudian sesuaikan seperti yang ditunjukkan di bawah ini dan tekan Ctrl + Alt + G untuk kliping masker.

Langkah 28

Sekarang ingat pilihan itu lagi.

Langkah 29

Selagi memiliki pilihan ini aktif pergi ke Palet Layers dan sekarang pilih Color Balance. Sekali lagi itu akan otomatis sesuai seleksi masking keluar segala sesuatu di luar itu. Tekan Ctrl + Alt + G untuk kliping masker dan menerapkan nilai yang sama seperti yang ditunjukkan di bawah ini.

Langkah 30

Sekarang buat layer lain di bagian atas, gunakan clipping mask - Ctrl + Alt + G. Ubah blending mode menjadi Soft Light dan pilih warna kuning muda # ffed9a. Kemudian pilih Brush Tool (B), atur Opacity menjadi 100%, Arahkan ke 5% dan Hardness ke 0% dan cat (seperti yang ditunjukkan) untuk membuang sedikit cahaya.

Langkah 31

Ulangi proses yang sama seperti pada langkah sebelumnya, tapi kali ini gunakan layer baru dengan overlay blending mode dan cat dengan warna putih. Ini harus meningkatkan efeknya.

Langkah 32

Gabungkan semua lapisan speaker menjadi satu (pilih semuanya dan tekan Ctrl + E) dan duplikat (Ctrl + J) 3 kali lagi. Lalu posisikan seperti yang ditunjukkan di bawah ini.

Langkah 33

Selanjutnya ambil Rectangle Tool (U) dan gambarlah bentuk abu-abu gelap besar (# 2d2d2d) dari bawah tombol ke bagian paling bawah kanvas. Turunkan Opacity menjadi sekitar 80%, jadi terlihat seperti gambar di bawah ini.

Selanjutnya pergi ke Layers Palette dan buat layer baru, beri nama "fabric". Ingat kembali pilihan dengan memegang Ctrl dan leftclicking pada thumbnail layer bentuk. Kemudian klik pada ikon Layer Mask di Palette Layers (seperti yang ditunjukkan di bawah).

Ini secara otomatis akan menutupi semua hal yang tidak sesuai pilihan kita. Dan sekarang semua yang Anda masukkan ke dalam kelompok itu hanya akan mempengaruhi area pilihan kami. Jadi pertama letakkan layer warna abu-abu itu di kelompok itu.

Langkah 34

Ingat bahwa kita akan bekerja dalam kelompok itu sekarang, jadi pastikan Anda memasukkan semuanya ke dalamnya. Sekarang buka tekstur kain, taruh di "kain" kelompok. Atur Opacity menjadi 80% dan ubah Blending Mode menjadi Screen.

Jika teksturnya tidak cukup besar agar sesuai dengan kanvas Anda, cukup duplikat (Ctrl + J) beberapa kali dan hubungkan ubin untuk membuat pola lebih besar - teksturnya mulus, sebaiknya mudah terhubung.

Tekan Ctrl + U dan atur nilai Hue / Saturation seperti yang ditunjukkan.

Langkah 35

Sekarang layer adjustment baru (Levels) diatas, di grup itu. Sesuaikan seperti yang ditunjukkan.

Langkah 36

Selanjutnya, pergi ke Layers Palette dan tambahkan lapisan penyesuaian lain (Solid Color) di atas, di grup itu. Atur ke warna yang sangat gelap # 0a0908 dan turunkan Opacity menjadi 80%.

Langkah 37

Sekarang duplikat layer kain, seret salinan ini ke atas semua lapisan di grup "fabric". Tekan Ctrl + Shift + U untuk mendeaturasi semuanya dan tekan Ctrl + L (Level). Sesuaikan seperti yang ditunjukkan di bawah ini.

Langkah 38

Ubah Blending Mode layer duplikat ini menjadi Screen. Hal ini akan membuat highlight pada tekstur pop out lebih banyak. Kita seharusnya cukup baik sekarang, tapi aku merasa seperti itu terlalu banyak dari spot yang disorot ini. Oleh karena itu saya telah meninggalkan mereka hanya di atas (seperti yang ditunjukkan) dan saya menghapus sisanya (kebanyakan di bagian bawah), cukup menggunakan Eraser Tool (E).

Langkah 39

Dan akhirnya memberi efek kain yang sedikit lebih realistis, buat lapisan baru di bagian atas semua lapisan dalam kelompok "faryic". Ubah Blending Mode menjadi Soft Light. Kemudian pilih Brush Tool (B), atur Opacity menjadi 100%, Flow to 5% dan Hardness menjadi 0%. Gunakan warna putih dan cat lembut pada lapisan ini seperti ditunjukkan di bawah ini.

Langkah 40

Sekarang ambil Line Tool (U), atur Weight to 6px (di bar bagian atas) atau Anda juga bisa menggunakan Rectangle Tool (U). Kemudian tarik dua garis horizontal, atur warnanya menjadi hitam.

Jika Anda bingung lihatlah zoom yang ditunjukkan di bawah ini.

Selanjutnya, buat bentuk ukuran yang sama seperti tombol atas (atau salin dari tombol), pastikan warnanya hitam.

Gandakan bentuk itu (Ctrl + J) dan gunakan Ctrl + T> Free Transform untuk mengubah ukuran bentuk ke bawah. Ganti warnanya menjadi abu-abu gelap. Lalu pergi ke mask Properties dan mengatur Feather menjadi 49%.

Jika Anda tidak melihat Properties, Anda mungkin perlu menyalakannya dengan membuka bar bagian atas dan memilih Window> Properties.

Selanjutnya masuk ke layer Blending Options dan atur Inner Glow.

Langkah 41

Sekali lagi lihat langkah 9, 10, 11 (buat highlight tepi) dan tambahkan sorotan yang bagus di bagian bawah bentuk bersamaan dengan arah yang ditetapkan oleh panah merah. Perlu diingat bahwa sekarang Anda akan mendasarkan pada pemilihan bentuk tombol dan dua bentuk garis horizontal (untuk memanggil seleksi cukup tahan Ctrl dan leftclick pada thumbnail layer, kemudian ikuti langkah-langkah yang disebutkan: 9, 10, 11). Prosesnya identik.

Langkah 42 (Membuat Screw)

Ambil Ellipse Tool (U) dan buat dua lingkaran sempurna (Tahan Shift sambil menggambar lingkaran). Buat bagian belakang satu hitam dan berwarna abu-abu depan.

Buat layer baru diatas bentuk hitam, tekan Ctrl + Alt + G (clipping mask). Kemudian pilih Brush Tool (B), atur Opacity menjadi 100%, Flow to 3% dan Hardness menjadi 0%. Gunakan warna putih dan cat lembut di lapisan baru tempat tanda panah menunjukkan.

Saat anak panah menjadi lebih ringan (dari bawah ke atas), dengan cara yang sama Anda harus memberi nilai nada - paling gelap di bagian bawah, paling ringan di bagian atas.

Langkah 43

Selanjutnya pindah ke bentuk abu-abu bagian atas, perbaiki warnanya menjadi abu-abu gelap (# 272727), lalu ingat pilihan bentuk ini (Ctrl + leftclick on layer's thumbnail), buat layer baru di atas bentuknya. Tekan Ctrl + Alt + G untuk kliping masker, lalu klik kanan dan pilih Stroke. Saat kotak dialog muncul atur nilai seperti gambar di bawah ini.

Selanjutnya pilih Move Tool (V) dan gunakan panah keyboard pindahkan layer membelai 1 atau 2 px ke bawah, untuk mendapatkan sesuatu silimar pada gambar di bawah ini.

Langkah 44

Sekarang ambil Pen Tool (P) dan gambarlah bentuk X.

Langkah 45

Pastikan Anda memberikannya nada yang terang (# a2a2a2). Kemudian buat layer baru di bawah lapisan membelai (yang dengan pukulan putih yang baru saja kita buat), tekan Ctrl + Alt + G untuk kliping masker, dan kali ini gunakan sikat hitam untuk melukis. Seperti tanda panah merah, coba tambahkan hanya sedikit bayangan di sekitar bentuknya (untuk mendapatkan kedalaman yang lebih dalam).

Langkah 46

Sekarang pindah ke layer bentuk X, duplikat (Ctrl + J) dan ubah ukurannya (Ctrl + T) atau rekreat itu benar-benar menggunakan Pen Tool (P) dan warna hitam. Pastikan tampilannya mirip dengan yang ada di bawah ini.

Langkah 47

Di Palette Lapisan pilih layer X bagian belakang, klik ikon Add Layer Mask untuk menambahkan masker dan kemudian gunakan sikat hitam lembut untuk dilukis di atasnya. Cat di mana panah merah menunjukkan untuk memberikan kedalaman yang bagus ke bentuk putih sehingga terlihat seperti cahaya tepi.

Lalu pindahkan ke bentuk X depan (hitam), tambahkan layer mask ke dalamnya, lalu gunakan sikat putih lembut untuk melukis di atasnya. Cat di mana panah merah menunjukkan untuk menghapus bentuk hitam dan mengungkapkan beberapa cahaya dari bentuk di belakang. Pastikan Anda melakukannya dengan sikat kecil agar sesuai bentuknya.

Jadilah akurat saat Anda melakukan masking ini. Jika Anda terlalu banyak Anda mungkin mendapatkan hasil yang berbeda. Beberapa pastikan Anda sedekat mungkin dengan hasil yang ditunjukkan di bawah ini.

Juga perlu diingat, sementara masking Anda harus menggunakan sikat yang sangat lembut - katakanlah 2-3% Flow.

Langkah 48

Sekarang pilih semua layer tombol dan gabungkan mereka (Ctrl + E). Kemudian buat layer baru di atas, tekan Ctrl + Alt + G untuk kliping mask. Ubah Blending Mode menjadi Overlay. Pilih sikat putih dan cat lembut seperti tanda panah merah. Beri sedikit cahaya dari atas.

Langkah 49

Ulangi langkah sebelumnya tapi kali ini buat layer baru dengan Multiply Blending Mode dan gunakan sikat hitam lembut untuk shading. Cat tempat panah merah menunjukkan.

Langkah 50

Akhirnya buat layer baru di bawah sekrup, atur Blending Mode menjadi Multiply dan gunakan sikat hitam lembut untuk membuang bayangan di bawah tombol (ke bawah).

Langkah 51

Gandakan sekrup ini sebanyak yang Anda mau (Ctrl + J) dan pastikan penempatannya simetris. Juga jika Anda ingin menempatkannya di lubang seperti yang saya lakukan, cukup mengacu pada langkah-langkah paling awal (misalnya langkah12) namun dalam kasus ini untuk sebuah lubang cukup gunakan lapisan bentuk bulat. Semuanya di sini bekerja pada rutinitas yang sama, satu-satunya hal yang berubah adalah bentuknya, yang mana di sini adalah sebuah lingkaran.

Langkah 52

Baiklah kita memiliki layar pertama yang dilakukan. Sekarang tinggalkan file project yang sama dan mari kita bergerak lebih jauh. Pergi ke bagian atas palet layer dan buat layer shape, gunakan Rectangle Tool (U) dengan warna sangat gelap (# 0a0a0a).

Langkah 53

Gandakan salah satu tombol atas (Ctrl + J) dan letakkan di bagian tengah sedikit di bawah tombol atas. Pastikan sesuai celah (yang ada di tempat yang sama) di layar sebelumnya. Hapus lapisan gloss, ubah teks menjadi "daftar lagu" dan biarkan seperti ini.

Langkah 54

Sekarang saat Anda menggulung kelompok tombol baru ini, Anda memiliki lapisan yang sama persis seperti sebelumnya pada tombol atas ini. Jadi pilih layer di bagian paling bawah yaitu celah hitam kita, duplikatnya (Ctrl + J) dan letakkan di bagian atas.

Saya telah berubah warna menjadi putih sehingga kita tahu lebih baik apa yang terjadi di sana.

Langkah 55

Tekan Ctrl + T dan ubah ukuran bentuk putih ke bawah. Pastikan itu sekitar 3 pixles lebih kecil.

Langkah 56

Ulangi pilihan bentuk putih (Ctrl + leftclick on layer's thumbnail).

Pergi ke Select> Modify> Contract dan kontrakkannya sekitar 6 pixel.

Pastikan Anda memiliki bentuk putih yang dipilih, lalu di Layers Palette klik tombol add layer mask.

Langkah 57

Selanjutnya pergi ke Blending Options di layer putih dan atur seperti gambar di bawah ini.

Langkah 58

Klik kanan pada lapisan cahaya dan pilih Copy Layer Styles.

Selanjutnya ambil Rectangle Tool (U) dan gambar garis hitam horizontal tebal di bawah tombol daftar lagu.

Perkecil garis hitam dan buat dua garis horizontal putih di dalamnya, masing-masing sekitar 6 piksel.

Langkah 59

Sekarang klik kanan pada masing-masing garis itu dan pilih Paste Layer Styles.

Duplikat (Ctrl + J) semua 3 stipes ini (1 hitam, 2 bercahaya) dan posisi di bawahnya, di akhir lapisan bentuk latar belakang.

Langkah 60

Sekarang kita isi isinya. Pertama kita akan membuat tombol sama elemen yang dimaksudkan untuk menampilkan grafik dari track saat ini. Jadi ini pada dasarnya adalah hal yang sama seperti membuat tombol. Satu-satunya hal yang berbeda adalah bentuknya lebih persegi sekarang. Cukup lihat langkah 20, 21, 22 dan ikuti petunjuk sebelumnya tentang cara membuat tombol. Selesaikan bagian saat kita menggunakan warna untuk mengisi bagian tengah, lakukan itu hitam putih.

Langkah 61

Seperti yang dikatakan pada awalnya, sebagian besar barang di sini bekerja pada pengulangan. Sekarang kita perlu menambahkan beberapa celah pada bentuk padat di latar belakang. Untuk melakukan ini gunakan Rectangle Tool (U) dan gambar kecil 2-3 piksel garis horisontal hitam (shape layer).

Langkah 62

Sekarang ulangi hal yang sama, tapi kali ini tambahkan 1 horisontal garis abu-abu horizontal. Gunakan Line Tool (U) atau Rectangle Tool (U). Pindahkan garis itu ke bawah sehingga menempel pada bentuk hitam.

Tampilan di bawah ini diperbesar.

Langkah 63

Tambahkan layer mask ke garis abu-abu ini dan gunakan soft blash untuk menghapus garis miring sedikit.

Langkah 64

Selanjutnya gunakan Rounded Rectangle Tool (U) dan gambarlah 1 bentuk garis bulat. Gandakan itu 7 kali, jadi Anda mendapatkan 8 dari mereka. Tempatkan mereka di samping satu sama lain dan menggabungkan mereka (Ctrl + E). Pastikan semuanya abu-abu gelap.

Sekarang duplikat layer gabungan ini, ubah warnanya menjadi putih dan tekan Ctrl + Alt + G untuk kliping masker, sehingga bentuknya putih tidak bisa keluar dari batas bentuk abu-abu. Sekarang gunakan Path Selection Tool (A) dan pindahkan masing-masing bentuk sehingga mereka membuat berbagai gerakan (gerakkan satu ke bawah, satu ke atas, dan seterusnya).

Langkah 65

Selanjutnya ketik beberapa nama lagu, rightlclick pada layer teks itu (di layer palette) dan pilih Paste Layer Styles lagi.

Langkah 66

Yang kita butuhkan sekarang adalah tombol putar / berhenti / jeda. Agar bisa meraih Ellipse Tool (U) dan menggambar lingkaran sempurna. Pastikan lapisan bentuknya putih dan atur Feather menjadi 2,8px.

Selanjutnya buat lingkaran lain (Anda bisa menduplikat yang pertama tapi ingat untuk membuat nilai properti default). Atur warnanya menjadi hitam.

Gandakan bentuk hitam 2 kali sekarang (jadi Anda mendapatkan 3 lingkaran hitam). Dan ubah ukuran 2 duplikat baru ini sedikit ke bawah. Ubah warna yang paling tinggi menjadi # 2d0600.

Saat Anda berada di lapisan bentuk merah, tekan Ctrl + Alt + G untuk kliping masker. Kemudian tambahkan masker layer dan gunakan sikat hitam lembut untuk menghapus area kanan atas (sehingga Anda hanya mendapat sedikit sentuhan lampu merah di bagian bawah).

Kemudian gunakan Pen Tool (P) dan gambarlah bentuk simbol bermain.

Pilih bentuk putar, klik kanan dan pilih Paste Layer Styles lagi. Gunakan clipping mask (Ctrl + Alt + G).

Sekarang kembali ke salah satu tombol yang Anda buat tadi, duplikat layer gloss dan seret ke tombol putar kita. Gunakan clipping mask (Ctrl + Alt + G) untuk membuatnya dibatasi oleh lingkaran hitam bagian dalam.

Kemudian tahan Ctrl dan klik kanan pada thumbnail layer bentuk hitam itu. Saat pilihan muncul, klik kanan dan pilih Stroke. Pilih 1 px stroke dan di dalam seleksi.

Gunakan Eraser Tool (E) dan hapus garis bawah stroke seperti yang ditunjukkan. Anda mungkin juga menurunkan opacity dari stroke itu sedikit.

Sekarang sampai ke lingkaran putih yang kita buat di awal langkah ini, tambahkan lapisan masker ke dalamnya dan gunakan sikat hitam lembut untuk menghapus bagian atas putih sehingga bagian bawahnya tetap terang.

Langkah 67

Gandakan tombol putar 2 kali (Ctrl + J), tapi singkirkan lapisan bentuk warna dan ganti simbol di tengahnya. Gunakan Pen Tool (P) atau Rounded Rectangle Tool (U) untuk melakukan ini.

Langkah 68

Gandakan salah satu tombol bulat hitam dan putih dan cukup ubah simbolnya, semuanya tetap sama. Sekali lagi Pen Tool (P) atau Rounded Rectangle Tool (U) melakukan ini. Anda juga bisa menggunakan Custom Shape Tool (U) dan cari form yang sudah dibuat agar sesuai dengan tombol Anda.

Hasil akhirnya benar-benar terserah Anda sekarang. Saya telah menyalin nama trek, tombol rotasi dan garis batas untuk membuat daftar lagu lengkap - seperti yang ditampilkan di hasil akhir.

Hasil Akhir

Tutorial oleh Wojciech Pijecki

Terima kasih telah membaca tutorial sampai akhir. Saya harap Anda mempelajari beberapa teknik bagus dan berguna yang akan membantu Anda menciptakan beberapa desain antarmuka musik yang luar biasa!

- Wojciech

Seni Photoshop