Translate

Searching...
Senin, 07 April 2014

Buat Ponsel Checkers permainan Antarmuka di Photoshop

16.53
 

Dalam tutorial ini, saya akan menunjukkan cara untuk membuat sebuah antarmuka untuk permainan catur bergerak di Photoshop. Saya akan mulai dengan menunjukkan Anda bagaimana untuk membuat sebuah grid sederhana. Kemudian, saya akan menjelaskan cara membuat komponen utama dari antarmuka menggunakan bentuk vektor dan sekejap Photoshop untuk fungsionalitas jaringan. Akhirnya, saya akan menunjukkan cara untuk menambahkan shading, highlight, dan tekstur menggunakan Layer Styles. Mari kita mulai!

1. Buat Dokumen Baru & Setup Grid

Buka Photoshop dan tekan Command / Ctrl-N untuk membuat dokumen baru. Masukkan semua data yang ditampilkan dalam gambar berikut dan klik OK. Aktifkan Grid (View> Show> Grid) dan Snap ke Grid (View> Snap To> Grid). Sebagai permulaan Anda akan perlu grid setiap 5px, jadi hanya pergi ke Edit> Preferences> Guides, Grid & Slices dan fokus pada bagian Grid. Masukkan 5 di gridline Setiap kotak dan 1 di kotak Subbagian. Juga, mengatur warna dari grid untuk #a7a7a7 . Setelah Anda telah mengatur semua properti ini klik OK. Jangan berkecil hati oleh semua grid tersebut. Ini akan memudahkan pekerjaan Anda nanti. Anda juga harus membuka Info panel (Window> Info) untuk live preview dengan ukuran dan posisi bentuk Anda. Anda tidak akan selalu membutuhkan sandang, sehingga perlu diingat bahwa Anda dapat dengan mudah menonaktifkan / mengaktifkannya dengan menggunakan cara pintas keyboard Command/Ctrl-.
Checkers Mobile Game Antarmuka

2. Latar Belakang dan First Two Kayu Shapes

Langkah 1

Pilih Rectangle Tool (M) dan fokus pada panel kontrol. Mengatur warna mengisi di #925016 maka cukup klik pada kanvas Anda. Masukkan 640 di kotak Width dan 1136 di kotak Height maka cukup OK untuk membuat bentuk vektor cokelat Anda. Pindah ke panel Layers, cukup klik ganda pada nama bentuk ini dan nama itu latar belakang.
Checkers Mobile Game Antarmuka

Langkah 2

Tekan Command / Ctrl-A untuk memuat seleksi di sekitar seluruh kanvas Anda. Pastikan bahwa bentuk vektor coklat Anda dipilih, ambil Selection Tool (V) dan cukup klik Align Vertikal Pusat dan Horizontal Center Align dari panel kontrol. Pada akhirnya bentuk vektor harus menutupi seluruh kanvas Anda seperti yang ditunjukkan pada gambar kedua. Setelah itu tekan Command / Ctrl-D untuk menyingkirkan pilihan tersebut.
Checkers Mobile Game Antarmuka

Langkah 3

Pastikan bahwa grid diaktifkan dan memilih Rectangle Tool. Mengatur warna mengisi di #e2a066 , membuat 15 x 940px persegi panjang dan tempatkan persis seperti yang ditunjukkan pada gambar berikut. Grid dan Snap fitur Grid harus memudahkan pekerjaan Anda.
Checkers Mobile Game Antarmuka

Langkah 4

Fokus pada Layers panel (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 properti yang ditunjukkan pada gambar berikut. sini Anda dapat men-download pola yang digunakan untuk gaya ini. Pastikan bahwa vektor bentuk tipis Anda masih dipilih dan duplikat menggunakan keyboard shortcut Command / Ctrl-J. Pilih copy, tarik ke kanan dan tempatkan seperti yang ditunjukkan pada gambar kedua. Sekali lagi, grid dan Snap fitur Grid akan berguna.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

3. Buat Side Dewan

Langkah 1

Pilih Rectangle Tool, mengatur warna mengisi di #e2a066 , menciptakan 610 x 20px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama. Buka jendela Layer Style untuk bentuk baru ini, aktifkan Gradient Overlay dan masukkan properti yang ditampilkan dalam gambar berikut (perlu diingat bahwa jumlah putih berdiri untuk Lokasi persentase). Pindah ke panel Layers, cukup klik ganda pada nama ini bentuk vektor baru dan beri nama bottomSide.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 2

Fokus pada panel Layers, pastikan bahwa bentuk vektor bottomSide Anda masih dipilih dan duplikat (Command / Ctrl-J). Klik kanan pada salinan ini dan pergi untuk Clear Layer Style untuk menghapus atribut Layer Style yang ada. Pastikan bahwa salinan ini tetap dipilih, menurunkan Fill menjadi 0% kemudian buka Layers Style window. Aktifkan Pola Overlay dan cukup memasukkan sifat yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 3

Pilih Rectangle Tool, pastikan bahwa warna mengisi ditetapkan pada #e2a066 , menciptakan 610 x 35px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama. Buka jendela Layer Style untuk bentuk baru ini, aktifkan Gradient Overlay dan masukkan properti yang ditunjukkan pada gambar berikut. Pindah ke panel Layers, dan hanya mengubah nama ini baru bentuk vektor topside.
Checkers Mobile Game Antarmuka

Langkah 4

Fokus pada panel Layers, pastikan bahwa bentuk vektor Topside Anda masih dipilih dan duplikat (Command / Ctrl-J). Klik kanan pada salinan ini dan pergi ke Clear Layer Style. Pastikan bahwa salinan ini tetap dipilih, menurunkan Fill menjadi 0% kemudian buka Layers Style window. Aktifkan Pola Overlay dan cukup memasukkan sifat yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 5

Nonaktifkan Grid (View> Show> Grid) dan memungkinkan Pixel Grid (View> Show> Grid Pixel). Pilih Rectangle Tool, mengatur warna mengisi di #ba4715 , membuat 1 x 35px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa Rectangle Tool tetap aktif, mengatur warna mengisi di #e0965f , membuat kedua 1 x 35px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar kedua.
Checkers Mobile Game Antarmuka

Langkah 6

Pilih kembali kedua bentuk vektor yang dibuat pada langkah sebelumnya dan Kelompok mereka (Command / Ctrl-G). Pindah ke panel Layers, klik dua kali pada nama grup segar ini dan nama itu separatorLong. Duplikat (Command / Ctrl-J), pilih copy dan tarik beberapa piksel ke kiri seperti yang ditunjukkan pada gambar kedua. Pastikan bahwa salinan grup Anda masih dipilih dan pergi ke Edit> Transform> Flip Horizontal. Tarik ini membalik copy ke kiri dan menempatkannya seperti yang ditunjukkan pada gambar keempat.
Checkers Mobile Game Antarmuka

Langkah 7

Pilih Rectangle Tool, mengatur warna mengisi di #ba4715 , membuat 1 x 20px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa Rectangle Tool tetap aktif, mengatur warna mengisi di #e0965f , membuat kedua, 1 x 20px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar kedua.
Checkers Mobile Game Antarmuka

Langkah 8

Pilih kembali kedua bentuk vektor yang dibuat pada langkah sebelumnya dan Kelompok mereka (Command / Ctrl-G). Pindah ke panel Layers, klik dua kali pada nama grup segar ini dan nama itu separatorShort. Duplikat (Command / Ctrl-J), pilih copy, flip itu horizontal (Edit> Transform> Flip Horizontal), tarik ke kiri dan menempatkannya seperti yang ditunjukkan pada gambar kedua.
Checkers Mobile Game Antarmuka

Langkah 9

Nonaktifkan Pixel Grid (View> Show> Grid Pixel) dan mengaktifkan Grid (View> Show> Grid). Pilih Rectangle Tool, mengatur warna mengisi di #ba783e , menciptakan 610 x 110px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama. Buka jendela Layer Style untuk bentuk baru ini, aktifkan Pattern Overlay dan cukup memasukkan sifat yang ditunjukkan pada gambar berikut. Pindah ke panel Layers dan hanya mengubah nama ini baru bentuk vektor Middleside.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 10

Fokus pada panel Layers, pastikan bahwa bentuk vektor Middleside Anda masih dipilih dan duplikat (Command / Ctrl-J). Hapus atribut Layer Style digunakan untuk menyalin ini, pastikan bahwa hal itu tetap dipilih, menurunkan Fill menjadi 0% kemudian buka Layers Style window. Aktifkan Inner Shadow, Inner Glow, Outer Glow dan Drop Shadow maka cukup masukkan properti yang ditunjukkan pada gambar berikut. Kembali ke panel Layers dan mengubah nama salinan yang dibuat pada langkah middleSideFront ini.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 11

Pilih Rectangle Tool, mengatur warna mengisi pada putih ( #ffffff ), membuat 10 x 110px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama. Fokus pada sisi kanan bentuk baru ini, pastikan bahwa hal itu tetap dipilih dan beralih ke Direct Selection Tool (A). Pilih titik anchor atas dan tarik ke bawah 5px kemudian pilih titik anchor bawah dan tarik 10px up. Pada akhirnya hal-hal akan terlihat seperti di gambar kedua. Buka jendela Layers Style untuk bentuk vektor putih, aktifkan Inner Shadow dan Gradient Overlay kemudian masukkan sifat yang ditunjukkan pada gambar berikut. Pastikan bahwa Anda menyimpan gradien digunakan untuk Gradient Overlay. Cukup klik tombol New dan gradien Anda akan muncul di jendela Presets.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 12

Pilih Rectangle Tool, pastikan bahwa warna mengisi ditetapkan pada putih, membuat 10 x 110px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama. Fokus pada sisi kiri bentuk baru ini, pastikan bahwa hal itu tetap dipilih dan beralih ke Direct Selection Tool (A). Pilih titik anchor atas dan tarik ke bawah 5px kemudian pilih titik anchor bawah dan tarik 10px up. Pada akhirnya hal-hal akan terlihat seperti di gambar kedua. Buka jendela Layers Style untuk bentuk vektor putih, aktifkan Inner Shadow dan Gradient Overlay kemudian masukkan sifat yang ditunjukkan pada gambar berikut. Untuk bagian Gradient Overlay menggunakan gradien tersimpan.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 13

Pilih Rectangle Tool, mengatur warna mengisi di hitam ( #000000 ), membuat 610 x 10px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama. Fokus pada sisi atas bentuk baru ini, pastikan bahwa hal itu tetap dipilih dan beralih ke Direct Selection Tool (A). Pilih titik anchor kiri dan tarik 10px ke kanan kemudian pilih titik jangkar kanan dan tarik 10px ke kiri. Pada akhirnya hal-hal akan terlihat seperti di gambar kedua. Buka jendela Layers Style untuk bentuk vektor hitam ini, aktifkan Gradient Overlay kemudian masukkan sifat yang ditunjukkan pada gambar berikut. Sekali lagi, gunakan gradien disimpan.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 14

Pilih Rectangle Tool, pastikan bahwa warna mengisi ditetapkan pada hitam, membuat bentuk 610 x 5px vektor dan tempatkan seperti yang ditunjukkan pada gambar pertama. Fokus pada sisi bawah bentuk baru ini, pastikan bahwa hal itu tetap dipilih dan beralih ke Direct Selection Tool (A). Pilih titik anchor kiri dan tarik 10px ke kanan kemudian pilih titik jangkar kanan dan tarik 10px ke kiri. Pada akhirnya hal-hal akan terlihat seperti di gambar kedua. Buka jendela Layer Style untuk bentuk vektor hitam ini, aktifkan Gradient Overlay kemudian masukkan sifat yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

4. Buat Side Wooden Top Dewan

Langkah 1

Fokus pada panel Layers, memilih ulang bottomSide Anda, topside, Middleside, bentuk vektor middleSideFront dan empat kelompok pemisah bersama dengan empat bentuk vektor hitam dan putih dan Kelompok mereka (Command / Ctrl-G). Terus fokus pada panel Layers dan mengubah nama grup ini Bawah baru. Gandakan kelompok Bawah Anda (Command / Ctrl-J), pilih copy, tarik dan tempatkan seperti yang ditunjukkan pada gambar kedua. Pastikan bahwa salinan masih dipilih dan pergi ke Edit> Transform> Flip Horizontal. Pada akhirnya hal-hal akan terlihat seperti pada gambar ketiga. Kembali ke panel Layers dan hanya mengubah nama Anda membalik copy group Top.
Checkers Mobile Game Antarmuka

Langkah 2

Fokus pada panel Layers dan membuka kelompok Top Anda. Buka jendela Layer Style untuk ada topside bentuk vektor dan hanya terbalik Angle digunakan untuk itu Gradient Overlay.
Checkers Mobile Game Antarmuka

Langkah 3

Terus fokus pada kelompok Top Anda. Buka jendela Layer Style untuk ada middleSideFront bentuk vektor dan hanya terbalik Angle digunakan untuk Shadow batin dan Drop Shadow.
Checkers Mobile Game Antarmuka

Langkah 4

Terus fokus pada kelompok Top Anda. Buka jendela Layer Style untuk dua, bentuk vektor putih dan hanya terbalik Angle digunakan untuk Inner Shadow.
Checkers Mobile Game Antarmuka

Langkah 5

Terus fokus pada kelompok Top Anda. Buka jendela Layer Style untuk dua, bentuk vektor hitam dan hanya terbalik Angle digunakan untuk Gradient Overlay.
Checkers Mobile Game Antarmuka

5. Buat Black and White Squares

Langkah 1

Pilih Rectangle Tool, mengatur warna mengisi di #e7d2bd , membuat 610px persegi dan tempatkan seperti yang ditunjukkan pada gambar pertama. Buka jendela Layer Style untuk ini bentuk vektor baru dan masukkan properti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 2

Pilih Rectangle Tool, mengatur warna mengisi di #fff0db , membuat persegi 75px dan tempatkan seperti yang ditunjukkan pada gambar pertama.
Checkers Mobile Game Antarmuka

Langkah 3

Multiply (Command / Ctrl-J) kotak 75px dan menyebarkan salinan seperti yang ditunjukkan pada gambar berikut. Pindah ke panel Layers, pilih semua enam belas kotak, klik kanan pada salah satu bentuk vektor ini dan hanya pergi ke Merge Shapes. Terus fokus pada panel Layers dan mengubah nama bentuk vektor yang dibuat dalam langkah ini whiteSquares.
Checkers Mobile Game Antarmuka

Langkah 4

Gandakan whiteSquares Anda bentuk vektor (Command / Ctrl-J). Fokus pada copy ini, mengubah nama itu blackSquares dan menggantikan yang ada mengisi warna ( #fff0db ) dengan #282823 . Pastikan bahwa blackSquares bentuk vektor Anda dipilih dan hanya pergi ke Edit> Transform> Rotate 90 ° CW.
Checkers Mobile Game Antarmuka

Langkah 5

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

Langkah 6

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

6. Tambahkan Shading Halus dan Highlights untuk Dewan Anda

Langkah 1

Pilih Rectangle Tool, mengatur warna mengisi pada putih #000000 , menciptakan 640 x 940px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar pertama.
Checkers Mobile Game Antarmuka

Langkah 2

Gandakan (Command / Ctrl-J) bentuk vektor hitam yang dibuat pada langkah sebelumnya. Pilih salinan ini dan drag di bagian bawah panel Layers, tepat di atas latar belakang vektor bentuk. Terus fokus pada panel Layers dan mengubah nama bentuk vektor yang dibuat pada langkah bayangan ini. Buka jendela Layer Style untuk bayangan vektor bentuk Anda, aktifkan Outer Glow dan masukkan properti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 3

Dapatkan kembali ke depan, hitam bentuk vektor. Turunkan Fill ke 0% kemudian membuka jendela Layer Style, aktifkan Inner Glow dan masukkan properti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 4

Pilih Rectangle Tool, mengatur warna mengisi di #000000 , membuat bentuk 640 x 5px vektor dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa persegi panjang tipis ini tetap dipilih, fokus pada panel Layers dan menurunkan Opacity menjadi 10%.
Checkers Mobile Game Antarmuka

Langkah 5

Pilih Rectangle Tool, pastikan bahwa warna mengisi ditetapkan pada #000000 , menciptakan 640 x 5px vektor bentuk baru dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa persegi panjang yang baru ini tetap dipilih, fokus pada panel Layers dan menurunkan Opacity menjadi 10%.
Checkers Mobile Game Antarmuka

7. Buat Checkers Potongan

Langkah 1

Pilih Ellipse Tool, mengatur warna mengisi di #d11812 , membuat lingkaran 55px dan tempatkan seperti yang ditunjukkan pada gambar pertama. Buka jendela Layer Style untuk ini bentuk vektor baru dan masukkan properti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 2

Pilih Ellipse Tool, mengatur warna mengisi di #bd0400 , membuat yang baru, 55px lingkaran dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa ini bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan hanya menggambar sebuah lingkaran 45px seperti yang ditunjukkan pada gambar kedua. Buka jendela Layer Style untuk vektor bentuk yang dihasilkan dan masukkan properti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 3

Nonaktifkan Grid (View> Show> Grid) dan memungkinkan Pixel Grid (View> Show> Grid Pixel). Pilih Ellipse Tool, pastikan bahwa warna mengisi ditetapkan pada #bd0400 , membuat lingkaran 41px dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa ini bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan hanya menggambar sebuah lingkaran 37px seperti yang ditunjukkan pada gambar kedua. Buka jendela Layer Style untuk vektor bentuk yang dihasilkan dan masukkan properti yang ditunjukkan pada gambar berikut. Kembali ke panel Layers, klik kanan pada bentuk vektor yang dibuat dalam langkah ini dan hanya pergi Copy Layer Style.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 4

Pilih Ellipse Tool, pastikan bahwa warna mengisi ditetapkan pada #bd0400 , membuat lingkaran 33px dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa ini bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan hanya menggambar sebuah lingkaran 29px seperti yang ditunjukkan pada gambar kedua. Pindah ke panel Layers, klik kanan pada ini bentuk vektor baru dan hanya pergi ke Paste Layer Style.
Checkers Mobile Game Antarmuka

Langkah 5

Pilih Ellipse Tool, pastikan bahwa warna mengisi ditetapkan pada #bd0400 , membuat lingkaran 25px dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa ini bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan hanya menggambar sebuah lingkaran 21px seperti yang ditunjukkan pada gambar kedua. Pindah ke panel Layers, klik kanan pada ini bentuk vektor baru dan hanya pergi ke Paste Layer Style.
Checkers Mobile Game Antarmuka

Langkah 6

Pilih Ellipse Tool, pastikan bahwa warna mengisi ditetapkan pada #bd0400 , membuat lingkaran 17px dan tempatkan seperti yang ditunjukkan pada gambar pertama. Pastikan bahwa ini bentuk vektor baru dan Ellipse Tool tetap dipilih, tahan tombol Alt dari keyboard Anda dan hanya menggambar sebuah lingkaran 13px seperti yang ditunjukkan pada gambar kedua. Pindah ke panel Layers, klik kanan pada ini bentuk vektor baru dan hanya pergi ke Paste Layer Style.
Checkers Mobile Game Antarmuka

Langkah 7

Pilih Ellipse Tool, mengatur warna mengisi di #bd0400 , membuat lingkaran 7px dan tempatkan seperti yang ditunjukkan pada gambar pertama. Buka jendela Layer Style untuk ini bentuk vektor baru dan masukkan properti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 8

Nonaktifkan Pixel Grid (View> Show> Grid Pixel) dan mengaktifkan Grid (View> Show> Grid). Pilih kembali semua bentuk yang membentuk sepotong catur dan kelompok mereka (Command / Ctrl-G). Pindah ke panel Layers dan mengubah nama grup ini redPiece baru. Duplikat (Command / Ctrl-J), pilih copy dan tarik beberapa piksel ke bawah dan ke kanan. Kembali ke panel Layers, mengubah nama salinan grup ini blackPiece dan membukanya. Pilih yang bentuk vektor satu per satu dan cukup mengganti warna yang ada isi dengan #1e1e1e .
Checkers Mobile Game Antarmuka

Langkah 9

Kalikan redPiece dan grup blackPiece dan menyebarkan salinan kira-kira seperti yang ditunjukkan pada gambar berikut. Pilih salah satu dari potongan-potongan dari luar papan dan tekan Command / Ctrl-T. Tahan shift dan hanya membuat bagian Anda 50px lebar. Ulangi teknik-teknik sederhana untuk karya lain dari luar papan. Akhirnya, fokus pada panel Layers, tarik potongan catur merah dari luar papan antara Middleside dan bentuk vektor middleSideFront dari Top grup Anda dan buah catur hitam dari luar papan antara Middleside dan bentuk vektor middleSideFront dari kelompok bawah Anda .
Checkers Mobile Game Antarmuka

Langkah 10

Pilih kembali salah satu redPiece dan blackPiece kelompok Anda dan duplikat mereka (Command / Ctrl-J). Resize dua salinan ini dan menempatkan mereka seperti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka

8. Buat Tombol dan Dewan Skor

Langkah 1

Pilih Rounded Rectangle Tool, mengatur warna mengisi di #b06e34 dan jari-jari di 5px. Buat dua, 155 x 55px persegi panjang bulat dan dua, 55px bulat kotak. Tempatkan bentuk vektor ini seperti yang ditunjukkan pada gambar pertama kemudian membuka jendela Layer Style dan masukkan properti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 2

Pilih Type Tool, cukup klik pada kanvas Anda, tambahkan PLAYER 1 buah teks dan tempatkan seperti yang ditunjukkan pada gambar pertama. Cobalah font Tidal, mengatur ukuran pada 35pt dan warna di #6e2e0d . Menggunakan alat yang sama dan atribut teks menambahkan tiga bagian lain dari teks yang ditampilkan dalam gambar pertama. Fokus pada panel Layers, membuka jendela Layer Style untuk potongan teks ditambahkan pada tahap ini dan menambahkan sifat yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Langkah 3

Pilih Rounded Rectangle Tool dan memastikan bahwa warna mengisi masih ditetapkan pada #b06e34 dan jari-jari di 5px. Buat 100 x 55px persegi panjang bulat, 200 x 55px persegi panjang bulat, 120 x 55px persegi panjang bulat dan 145 x 55 px bulat persegi panjang dan menempatkan mereka seperti yang ditunjukkan pada gambar pertama. Salin atribut layer style yang digunakan untuk empat lainnya persegi panjang bulat dan tempelkan ke bentuk-bentuk vektor baru. Pada akhirnya hal-hal akan terlihat seperti di gambar kedua.
Checkers Mobile Game Antarmuka

Langkah 4

Menggunakan Type Tool menambahkan beberapa bagian baru dari teks dan menempatkan mereka seperti yang ditunjukkan pada gambar berikut. Pilih atribut font dan warna yang sama yang Anda gunakan untuk potongan-potongan lain dari teks. Salin atribut layer style yang digunakan untuk potongan atas teks dan tempelkan ke potongan-potongan baru dari teks. Pada akhirnya hal-hal akan terlihat seperti di gambar kedua.
Checkers Mobile Game Antarmuka

9. Tambahkan Pola Sederhana untuk Background Shape

Langkah 1

Akhirnya, membuka jendela Layer Style untuk latar belakang vektor bentuk Anda, aktifkan Pattern Overlay dan masukkan properti yang ditunjukkan pada gambar berikut.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka
Iklan

Langkah 2

Anda juga dapat mencoba pola kulit ini bukan pola kayu.
Checkers Mobile Game Antarmuka
Checkers Mobile Game Antarmuka

Selamat! Anda Selesai!

Berikut adalah bagaimana seharusnya terlihat. Saya harap Anda menikmati tutorial ini dan dapat menerapkan teknik ini dalam proyek-proyek masa depan Anda.
Checkers Mobile Game Antarmuka
Berikut adalah bagaimana seharusnya terlihat di layar.
Checkers Mobile Game Antarmuka
Posting terkait

0 komentar:

Posting Komentar