Cara Membuat Antarmuka Game Checker Mobile di Photoshop

Dalam tutorial ini, saya akan menunjukkan cara membuat antarmuka untuk permainan pemeriksa ponsel di Photoshop. Saya akan mulai dengan menunjukkan cara membuat grid sederhana. Kemudian, saya akan menjelaskan bagaimana membuat komponen utama dari interface menggunakan bentuk vektor dan snap Photoshop ke fungsi grid. Akhirnya, saya akan menunjukkan cara menambahkan shading, highlight, dan tekstur menggunakan Layer Styles. Mari kita mulai!

1. Buat Dokumen Baru & Setup sebuah Grid

Buka Photoshop dan tekan Command / Ctrl-N untuk membuat dokumen baru. Masukkan semua data yang ditunjukkan pada gambar berikut dan klik OK . Aktifkan Grid ( Lihat> Show> Grid ) dan Snap to Grid ( Lihat> Snap To> Grid ). Sebagai permulaan, Anda memerlukan grid setiap 5px , jadi cukup buka Edit> Preferences> Guides, Grid & Slices dan fokus pada bagian Grid. Masukkan 5 di Gridline Setiap kotak dan 1 di kotak Subdivisi . Juga, atur warna grid ke #a7a7a7. Setelah Anda menetapkan semua properti ini klik OK. Jangan berkecil hati dengan semua grid itu. Ini akan mempermudah pekerjaan Anda nantinya. Anda juga harus membuka panel Info ( Window> Info ) untuk preview langsung dengan ukuran dan posisi bentuk Anda. Anda tidak akan selalu membutuhkan gird, jadi ingatlah bahwa Anda dapat dengan mudah menonaktifkan / mengaktifkannya dengan menggunakan shortcut Command / Ctrl- keyboard.

2. Latar Belakang dan Dua Bentuk Kayu Pertama

Langkah 1

Pilih Rectangle Tool (M) dan fokus pada panel kontrol. Atur warna fill saat #925016itu cukup klik kanvas anda. Masukkan 640 di kotak Lebar dan 1136 di kotak Height lalu cukup OK untuk membuat bentuk vektor coklat Anda. Pindah ke panel Lapisan , cukup klik dua kali pada nama bentuk ini dan ubah namanya menjadi latar belakang .

Langkah 2

Tekan Command / Ctrl-A untuk memuat pilihan di sekitar seluruh kanvas Anda. Pastikan bentuk vektor cokelat Anda dipilih, ambil Selection Tool (V) dan cukup klik Align Vertical Centers dan Align Horizontal Centres dari panel kontrol. Pada akhirnya bentuk vektor harus menutupi keseluruhan kanvas Anda seperti yang ditunjukkan pada gambar kedua. Setelah itu tekan Command / Ctrl-Duntuk menyingkirkan pilihan itu.

Langkah 3

Pastikan grid diaktifkan dan pilih Rectangle Tool . Atur warna fill pada #e2a066, buat persegi panjang 15 x 940px dan letakkan tepat seperti yang ditunjukkan pada gambar berikut. Kotak dan fitur Snap to Grid memudahkan pekerjaan Anda.

Langkah 4

Fokus pada panel Layers ( Window> Layers ) dan cukup klik dua kali pada bentuk vektor tipis yang dibuat pada langkah sebelumnya untuk membuka jendela Layer Style . Centang kotak Pattern Overlay dan masukkan properties yang ditunjukkan pada gambar berikut. Disini anda bisa mendownload pola yang digunakan untuk gaya ini. Pastikan bentuk vektor tipis Anda masih dipilih dan duplikat dengan menggunakan shortcut keyboard Command / Ctrl-J . Pilih salinannya, seret ke kanan dan letakkan seperti ditunjukkan pada gambar kedua. Sekali lagi, grid dan fitur Snap to Grid akan berguna.

3. Buat Side of the Board

Langkah 1

Pilih Rectangle Tool , atur warna isi #e2a066, buat bentuk vektor 610 x 20px dan letakkan seperti pada gambar pertama. Buka jendela Layer Style untuk bentuk baru ini, aktifkan Gradient Overlay dan masukkan properti yang ditunjukkan pada gambar berikut (ingatlah bahwa nomor putih sesuai dengan persentase Lokasi ). Pindah ke panel Lapisan , cukup klik dua kali pada nama bentuk vektor baru ini dan ganti namanya menjadi bottomSide .

Langkah 2

Fokus pada panel Lapisan , pastikan bentuk vektor bottomSide Anda masih dipilih dan duplikatnya ( Command / Ctrl-J ). Klik kanan pada salinan segar ini dan masuk ke Clear Layer Style untuk menghapus atribut Layer Style yang ada. Pastikan salinan ini tetap dipilih, kurangi Fill sampai 0% lalu buka jendela Layers Style . Aktifkan Overlay Pola dan cukup masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 3

Pilih Rectangle Tool , pastikan warna isi disetel #e2a066, buat bentuk vektor 610 x 35px dan letakkan seperti pada gambar pertama. Buka jendela Layer Styleuntuk bentuk baru ini, aktifkan Gradient Overlay dan masukkan properti yang ditunjukkan pada gambar berikut. Pindah ke panel Lapisan , dan ganti nama saja bentuk vektor baru ini di atas .

Langkah 4

Fokus pada panel Lapisan , pastikan bahwa bentuk vektor topSide Anda masih dipilih dan duplikatnya ( Command / Ctrl-J ). Klik kanan pada salinan segar ini dan masuk ke Clear Layer Style . Pastikan salinan ini tetap dipilih, kurangi Fillsampai 0% lalu buka jendela Layers Style . Aktifkan Overlay Pola dan cukup masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 5

Nonaktifkan Grid ( Lihat> Tampilkan> Kotak ) dan aktifkan Kotak Piksel ( Lihat> Tampilkan> Kotak Piksel ). Pilih Rectangle Tool , atur warna fill pada #ba4715, buat bentuk vektor 1 x 35px dan letakkan seperti pada gambar pertama. Pastikan Rectangle Tool tetap aktif, atur warna fill pada #e0965f, buat bentuk vektor 1 x 35px kedua dan letakkan seperti pada gambar kedua.

Langkah 6

Pilih kembali kedua bentuk vektor yang dibuat pada langkah sebelumnya danKelompokkan mereka ( Command / Ctrl-G ). Pindahkan ke panel Layers , klik dua kali pada nama grup segar ini dan renamelah separatorLong . Duplikatnya ( Command / Ctrl-J ), pilih copy dan seret beberapa piksel ke kiri seperti yang ditunjukkan pada gambar kedua. Pastikan salinan grup Anda masih dipilih dan masuk ke Edit> Transform> Flip Horizontal . Seret salinan flipped ini ke kiri dan letakkan seperti ditunjukkan pada gambar keempat.

Langkah 7

Pilih Rectangle Tool , atur warna isi #ba4715, buat bentuk vektor 1 x 20px dan letakkan seperti pada gambar pertama. Pastikan Rectangle Tool tetap aktif, atur warna isi #e0965f, buat bentuk vektor kedua, 1 x 20px dan letakkan seperti pada gambar kedua.

Langkah 8

Pilih kembali kedua bentuk vektor yang dibuat pada langkah sebelumnya danKelompokkan mereka ( Command / Ctrl-G ). Pindah ke panel Layers , klik dua kali pada nama grup segar ini dan ganti namanya menjadi separatorShort . Duplikatnya ( Command / Ctrl-J ), pilih salinannya, flip secara horizontal ( Edit> Transform> Flip Horizontal ), seret ke kiri dan letakkan di gambar kedua.

Langkah 9

Nonaktifkan Kotak Piksel ( Lihat> Tampilkan> Kotak Piksel ) dan aktifkan Grid ( Lihat> Tampil> Kotak ). Pilih Rectangle Tool , atur warna isi #ba783e, buat bentuk vektor 610 x 110px dan letakkan seperti pada gambar pertama. Buka jendela Layer Style untuk bentuk baru ini, aktifkan Pattern Overlay dan cukup masukkan properti yang ditunjukkan pada gambar berikut. Pindahkan ke panel Lapisan dan ganti nama bentuk vektor baru ini di tengahSide .

Langkah 10

Fokus pada panel Lapisan , pastikan bahwa bentuk vektor middleSide Anda masih dipilih dan duplikatnya ( Command / Ctrl-J ). Kosongkan atribut Layer Style yang digunakan untuk salinan ini, pastikan tetap terpilih, kurangi Fill to 0%lalu buka jendela Layers Style . Aktifkan Inner Shadow , Inner Glow , Outer Glowdan the Drop Shadow lalu masukkan saja properti yang ditunjukkan pada gambar berikut. Kembali ke panel Lapisan dan ganti nama salinan yang dibuat di langkah tengah iniSetiapFront .

Langkah 11

Pilih Rectangle Tool , atur warna fill pada putih ( #ffffff), buat bentuk vektor 10 x 110px dan letakkan seperti pada gambar pertama. Fokus pada sisi kanan dari bentuk baru ini, pastikan tetap dipilih dan beralih ke Direct Selection Tool (A) . Pilih titik jangkar teratas dan seret 5px ke bawah lalu pilih titik jangkar bawah dan seret 10px ke atas. Pada akhirnya semuanya akan terlihat seperti pada gambar kedua. Buka jendela Layers Style untuk bentuk vektor putih Anda, aktifkan Inner Shadow dan Gradient Overlaylalu masukkan properties yang ditunjukkan pada gambar berikut. Pastikan Anda menyimpan gradien yang digunakan untuk Gradient Overlay . Cukup klik tombol New dan gradien Anda akan muncul di jendela Presets .

Langkah 12

Pilih Rectangle Tool , pastikan warna isi diset pada warna putih, buat bentuk vektor 10 x 110px dan letakkan seperti pada gambar pertama. Fokus pada sisi kiri bentuk baru ini, pastikan tetap dipilih dan beralih ke Direct Selection Tool (A). Pilih titik jangkar teratas dan seret 5px ke bawah lalu pilih titik jangkar bawah dan seret 10px ke atas. Pada akhirnya semuanya akan terlihat seperti pada gambar kedua. Buka jendela Layers Style untuk bentuk vektor putih Anda, aktifkan Inner Shadow dan Gradient Overlay lalu masukkan properti yang ditunjukkan pada gambar berikut. Untuk Gradient Overlay bagian menggunakan gradien tersimpan Anda.

Langkah 13

Pilih Rectangle Tool , atur warna fill pada warna hitam ( #000000), buat bentuk vektor 610 x 10px dan letakkan seperti pada gambar pertama. Fokus pada sisi atas bentuk baru ini, pastikan tetap dipilih dan beralih ke Direct Selection Tool (A) . Pilih titik anchor kiri dan tarik 10px ke kanan lalu pilih titik jangkar yang tepat dan seret 10px ke kiri. Pada akhirnya semuanya akan terlihat seperti pada gambar kedua. Buka jendela Layers Style untuk bentuk vektor hitam ini, aktifkan Gradient Overlay lalu masukkan properties yang ditunjukkan pada gambar berikut. Sekali lagi, gunakan gradien yang tersimpan.

Langkah 14

Pilih Rectangle Tool , pastikan warna isi diset pada hitam, buat bentuk vektor 610 x 5px dan letakkan seperti pada gambar pertama. Fokus pada sisi bawah bentuk baru ini, pastikan tetap dipilih dan beralih ke Direct Selection Tool (A) . Pilih titik anchor kiri dan tarik 10px ke kanan lalu pilih titik jangkar yang tepat dan seret 10px ke kiri. Pada akhirnya semuanya akan terlihat seperti pada gambar kedua. Buka jendela Layer Style untuk bentuk vektor hitam ini, aktifkan Gradient Overlay lalu masukkan properties yang ditunjukkan pada gambar berikut.

4. Buat Sisi Kayu Atas Dewan

Langkah 1

Fokus pada panel Lapisan , pilih ulang bagian utama bottomSide , topSide , middleSide , middleSideFront dan keempat kelompok pemisah beserta empat bentuk vektor hitam dan putih dan Kelompokkan mereka ( Command / Ctrl-G ). Terus berfokus pada Layers panel dan mengubah nama ini kelompok baru Bawah . Gandakan grup Bawah Anda ( Command / Ctrl-J ), pilih salinannya, seret dan letakkan seperti ditunjukkan pada gambar kedua. Pastikan salinannya masih terpilih dan masuk ke Edit> Transform> Flip Horizontal. Pada akhirnya semuanya akan terlihat seperti pada gambar ketiga. Kembali ke Layers panel dan hanya mengubah nama Anda membalik copy kelompok Top .

Langkah 2

Fokus pada panel Lapisan dan buka grup Top Anda . Buka jendela Layer Styleuntuk bentuk vektor topSide yang ada dan cukup terbalik dengan Angle yangdigunakan untuk Gradient Overlay .

Langkah 3

Terus fokus pada grup Top Anda . Buka jendela Layer Style untuk bentuk vektor middleSideFront yang ada saat ini dan cukup terbalik dengan Sudut yangdigunakan untuk Inner Shadow dan Drop Shadow .

Langkah 4

Terus fokus pada grup Top Anda . Buka jendela Layer Style untuk dua, bentuk vektor putih dan cukup terbalik dengan Sudut yang digunakan untuk Inner Shadow .

Langkah 5

Terus fokus pada grup Top Anda . Buka jendela Layer Style untuk dua, bentuk vektor hitam dan cukup terbalik dengan Angle yang digunakan untuk Gradient Overlay .

5. Buat kotak hitam dan putih

Langkah 1

Pilih Rectangle Tool , atur warna fill pada #e7d2bd, buatlah kotak 610px dan letakkan seperti pada gambar pertama. Buka jendela Layer Style untuk bentuk vektor baru ini dan masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 2

Pilih Rectangle Tool , atur warna fill pada #fff0db, buat kotak 75px dan letakkan seperti pada gambar pertama.

Langkah 3

Multiply ( Command / Ctrl-J ) kotak 75px Anda dan sebarkan salinannya seperti yang ditunjukkan pada gambar berikut. Pindah ke panel Lapisan , pilih enam belas kotak, klik kanan pada salah satu bentuk vektor ini dan cukup masuk ke Merge Shapes . Terus fokus pada panel Lapisan dan ganti nama bentuk vektor yang dibuat pada langkah ini whiteSquares .

Langkah 4

Duplikat bentuk vektor whiteSquares Anda ( Command / Ctrl-J ). Fokus pada salinan ini, ganti namanya menjadi blackSquares dan ganti warna fill yang ada ( #fff0db) dengan #282823. Pastikan bentuk vektor blackSquares Anda dipilih dan cukup masuk ke Edit> Transform> Rotate 90 ° CW .

Langkah 5

Buka jendela Layer Style untuk bentuk vektor whiteSquares Anda , aktifkan Inner Glow dan masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 6

Buka jendela Layer Style untuk bentuk vektor blackSquares Anda , aktifkan Inner Glow dan masukkan properti yang ditunjukkan pada gambar berikut.

6. Tambahkan Shading yang Halus dan Sorotan untuk Papan Anda

Langkah 1

Pilih Rectangle Tool , atur warna fill pada putih #000000, buat bentuk vektor 640 x 940px dan letakkan seperti pada gambar pertama.

Langkah 2

Duplikat ( Command / Ctrl-J ) bentuk vektor hitam yang dibuat pada langkah sebelumnya. Pilih salinan ini dan seret ke bagian bawah panel Lapisan , tepat di atas bentuk vektor latar belakang . Terus fokus pada panel Lapisan dan ganti nama bentuk vektor yang dibuat dalam bayangan langkah ini . Buka jendela Layer Style untuk bentuk bayangan vektor Anda, aktifkan Outer Glow dan masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 3

Kembali ke depan, bentuk vektor hitam. Turunkan Fill ke 0% lalu buka jendela Layer Style , aktifkan Inner Glow dan masukkan properties yang ditunjukkan pada gambar berikut.

Langkah 4

Pilih Rectangle Tool , atur warna isi #000000, buat bentuk vektor 640 x 5px dan letakkan seperti pada gambar pertama. Pastikan persegi panjang tipis ini tetap dipilih, fokus pada panel Lapisan dan turunkan Opacity menjadi 10% .

Langkah 5

Pilih Rectangle Tool , pastikan warna isi disetel #000000, buat bentuk vektor 640 x 5px yang baru dan letakkan seperti pada gambar pertama. Pastikan persegi panjang baru ini tetap dipilih, fokus pada panel Lapisan dan turunkan Opacitymenjadi 10% .

7. Buat Potongan Checker

Langkah 1

Pilih Ellipse Tool , atur warna fill pada #d11812, buat lingkaran 55px dan letakkan seperti pada gambar pertama. Buka jendela Layer Style untuk bentuk vektor baru ini dan masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 2

Pilih Ellipse Tool , atur warna fill pada #bd0400, buat lingkaran baru 55px dan letakkan seperti pada gambar pertama. Pastikan bahwa bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan cukup menggambar lingkaran 45px seperti yang ditunjukkan pada gambar kedua. Buka jendela Layer Style untuk bentuk vektor yang dihasilkan dan masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 3

Nonaktifkan Grid ( Lihat> Tampilkan> Kotak ) dan aktifkan Kotak Piksel ( Lihat> Tampilkan> Kotak Piksel ). Pilih Ellipse Tool , pastikan warna isi disetel #bd0400, buat lingkaran 41px dan letakkan seperti pada gambar pertama. Pastikan bahwa bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan cukup menggambar lingkaran 37px seperti yang ditunjukkan pada gambar kedua. Buka jendela Layer Style untuk bentuk vektor yang dihasilkan dan masukkan properti yang ditunjukkan pada gambar berikut. Kembali ke Lapisanpanel, klik kanan pada bentuk vektor yang dibuat pada langkah ini dan cukup masuk ke Copy Layer Style .

Langkah 4

Pilih Ellipse Tool , pastikan warna isi disetel #bd0400, buat lingkaran 33px dan letakkan seperti pada gambar pertama. Pastikan bahwa bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan cukup menggambar lingkaran 29px seperti yang ditunjukkan pada gambar kedua. Pindah ke panel Lapisan , klik kanan pada bentuk vektor baru ini dan cukup masuk ke Paste Layer Style .

Langkah 5

Pilih Ellipse Tool , pastikan warna isi disetel #bd0400, buat lingkaran 25px dan letakkan seperti pada gambar pertama. Pastikan bahwa bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan cukup menggambar lingkaran 21px seperti yang ditunjukkan pada gambar kedua. Pindah ke panel Lapisan , klik kanan pada bentuk vektor baru ini dan cukup masuk ke Paste Layer Style .

Langkah 6

Pilih Ellipse Tool , pastikan warna isi disetel #bd0400, buat lingkaran 17px dan letakkan seperti pada gambar pertama. Pastikan bahwa bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan cukup menggambar lingkaran 13px seperti yang ditunjukkan pada gambar kedua. Pindah ke panel Lapisan , klik kanan pada bentuk vektor baru ini dan cukup masuk ke Paste Layer Style .

Langkah 7

Pilih Ellipse Tool , atur warna fill pada #bd0400, buat lingkaran 7px dan letakkan seperti pada gambar pertama. Buka jendela Layer Style untuk bentuk vektor baru ini dan masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 8

Nonaktifkan Kotak Piksel ( Lihat> Tampilkan> Kotak Piksel ) dan aktifkan Grid ( Lihat> Tampil> Kotak ). Pilih kembali semua bentuk yang membentuk potongan checker Anda dan Kelompokkan mereka ( Command / Ctrl-G ). Pindah ke panel Lapisan dan ganti nama redPiece grup baru ini . Duplikatnya ( Command / Ctrl-J ), pilih copy dan seret beberapa pixel ke bawah dan ke kanan. Kembali ke panel Lapisan , ganti nama grup ini dengan menyalin blackPiece dan membukanya. Pilih bentuk vektor satu per satu dan cukup ganti warna isian yang ada dengan #1e1e1e.

Langkah 9

Kalikan grup redPiece dan blackPiece Anda dan sebarkan salinannya kira-kira seperti yang ditunjukkan pada gambar berikut. Pilih salah satu potongan dari luar papan tulis dan tekan Command / Ctrl-T . Tahan Shift dan cukup buat potongan 50px Anda . Ulangi teknik sederhana ini untuk potongan lainnya dari luar papan. Akhirnya, fokus pada panel Lapisan , seret potongan-potongan pemeriksa merah dari luar papan di antara tengah- tengahnya dan bentuk vektor MiddleSideFront dari kelompok Top Anda dan potongan-potongan pemeriksa hitam dari luar papan antara tengahSide dan tengahSideFrontbentuk vektor dari kelompok bawah Anda .

Langkah 10

Memilih ulang salah satu dari Anda redPiece dan blackPiece kelompok dan duplikat mereka ( Command / Ctrl-J ). Ubah ukuran kedua salinan ini dan tempatkan seperti pada gambar berikut.

8. Buat Tombol dan Skor Board

Langkah 1

Pilih Rounded Rectangle Tool , atur warna isi #b06e34dan radiusnya di 5px . Buat dua, 155 x 55px persegi bulat bulat dan dua, kotak bulat 55px . Tempatkan bentuk vektor ini seperti yang ditunjukkan pada gambar pertama lalu buka jendela Layer Style dan masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 2

Pilih Type Tool , cukup klik di kanvas Anda, tambahkan satu teks PLAYER 1 dan letakkan seperti pada gambar pertama. Coba font pasang surut, atur ukuran 35pt dan warnanya #6e2e0d. Dengan menggunakan alat dan atribut teks yang sama, tambahkan tiga teks lainnya yang ditunjukkan pada gambar pertama. Fokus pada panel Lapisan , buka jendela Layer Style untuk potongan teks yang ditambahkan pada langkah ini dan tambahkan properti yang ditunjukkan pada gambar berikut.

Langkah 3

Pilih Rounded Rectangle Tool dan pastikan warna isi masih menyala #b06e34dan radiusnya di 5px . Buat persegi panjang bulat 100 x 55px , kotak bulat berukuran 200 x 55px , persegi panjang 120 x 55px dan kotak bulat bulat 145 x 55 px dan tempatkan seperti pada gambar pertama. Salin atribut gaya lapisan yang digunakan untuk empat kotak bulat lainnya dan tempelkan ke bentuk vektor baru ini. Pada akhirnya semuanya akan terlihat seperti pada gambar kedua.

Langkah 4

Menggunakan Type Tool menambahkan beberapa teks baru dan menempatkannya seperti gambar di bawah ini. Pilih atribut dan warna font yang sama dengan yang Anda gunakan untuk potongan teks lainnya. Salin atribut gaya lapisan yang digunakan untuk potongan teks teratas dan tempelkan ke potongan teks baru ini. Pada akhirnya semuanya akan terlihat seperti pada gambar kedua.

9. Tambahkan Pola Sederhana untuk Bentuk Latar Belakang

Langkah 1

Akhirnya, buka jendela Layer Style untuk bentuk vektor latar belakang Anda , aktifkan Pattern Overlay dan masukkan properti yang ditunjukkan pada gambar berikut.

Langkah 2

Anda juga bisa mencoba pola kulit ini dan bukan pola kayu.

Selamat! Kamu sudah selesai!

Berikut adalah bagaimana seharusnya terlihat. Saya harap Anda menikmati tutorial ini dan dapat menerapkan teknik ini dalam proyek masa depan Anda.

Berikut adalah bagaimana seharusnya tampilan di layar.

Author:

Andrei Marius

Saya seorang seniman vektor otodidak yang berusaha mencari nafkah untuk melakukan sesuatu yang saya sukai. Saya menghabiskan sebagian besar waktu saya bekerja di Adobe Illustrator, menghindari Pen Tool dan berjuang untuk menemukan warna yang sempurna. Anda dapat menemukan semua percobaan vektor saya di situs kecil ini: vforvectors.com.