 |
| Cara Merancang Antarmuka Dalam Photoshop |
Selama bertahun-tahun Photoshop digunakan oleh sejumlah orang yang berbeda termasuk, tetapi tidak terbatas pada, fotografer dan desainer antarmuka. Sementara banyak tutorial bekerja membantu fotografer, tidak banyak membantu desainer antarmuka. Bagi mereka yang ingin mendesain antarmuka di Photoshop, berikut ini adalah panduan singkat tentang beberapa tips desain yang dapat Anda gunakan sehingga Anda dapat mencapai tujuan Anda.
Tips Cara Membuat Antarmuka (Interfaces) Photoshop
Langkah # 1 - Membagi Kanvas Anda
Langkah pertama untuk membuat antarmuka pengguna adalah membagi kanvas menjadi area utama yang berbeda untuk konten yang akan ditempatkan. Bergantung pada jenis antarmuka yang Anda buat itu harus mencakup area navigasi situs vertikal dan area sub navigasi horisontal. Anda juga harus membuat area untuk pratinjau artikel dan area lain untuk tweeting artikel atau berbagi ke platform media sosial.
Langkah # 2 - Tambahkan Tekstur
Hal berikutnya yang perlu Anda lakukan adalah menambahkan tekstur untuk mendapatkan daya tarik visual. Untuk pengembangan aplikasi, meskipun sebagian besar fitur penampilan seperti halus dan mengkilap, yang terbaik adalah menambahkan tekstur dengan mengasarkan area latar belakang. Ini benar-benar dapat menambahkan dampak visual yang bagus tanpa menyebabkan gangguan bagi pemirsa.
Langkah # 3 - Blokir Area Konten Utama
Memblokir area konteks utama dengan banyak warna sangat ideal untuk menyesuaikan aplikasi Anda dengan selera pengguna yang berbeda. Ini akan memberi Anda pandangan menyeluruh tentang apa produk jadi akan. Anda dapat bermain-main dengan lebar kolom untuk memastikan ada ruang yang cukup untuk setiap logo di kolom kiri, ikon di kolom kanan dan cukup ruang di tengah untuk konten.
Langkah # 4 - Buat Kerangka Ikon
Untuk membuat kerangka ikon, Anda perlu menggunakan beberapa keterampilan matematika. Misalnya, jika Anda memiliki 7 ikon berbeda yang perlu dimasukkan, Anda harus memastikan semuanya ditempatkan secara terpisah untuk menambahkan hasil akhir yang bersih sambil menyisakan ruang yang cukup 50-75px di bagian bawah dan atas. Alasan untuk ini adalah memungkinkan untuksub menu, pengaturan dan tombol yang akan ditambahkan untuk integrasi media sosial, login dan pengaturan akun, ditambah banyak lagi. Untuk mengetahui ruang ini, Anda dapat menggunakan yang berikut ini sebagai contoh:
Katakanlah tingginya 768px. Kurangi 100px dari bilah menu dari atas dan bawah. Ini menyisakan ruang 668px. Bagi angka ini dengan 7 (jumlah ikon yang Anda miliki) dan Anda akan memiliki ruang 95,42px per satu. Setiap ikon harus berukuran 95px jika Anda mengisi situs dengan ikon vertikal.
Langkah # 5 - Gambar Panduan Anda
Gambar panduan Anda dengan menggunakan penggaris dan piksel Anda, bukan inci. Anda dapat mengubah ke piksel dengan mengubah pengukuran penggaris saat Anda mengklik kanan penggaris itu sendiri. Gunakan aturan untuk mengeluarkan panduan teratas untuk meninggalkan ruang menu yang disebutkan sebelumnya.
Langkah # 6 - Gunakan Templat Persegi Panjang Untuk Menghemat Waktu
Dari perhitungan kita tahu setiap ikon harus 95px. Gunakan ‘alat tenda’ dan ‘alat panduan teratas’ untuk membuat templat persegi panjang sehingga Anda dapat menggandakannya sesuai kebutuhan. Gandakan layer persegi panjang Anda hingga Anda memiliki jumlah ikon yang perlu Anda tata secara vertikal. Juga jangan lupa untuk mengatur lapisan Anda di sepanjang jalan untuk membuat semuanya kurang membingungkan dan berantakan.
Langkah # 7 - Impor Logo
Logo dapat diimpor menggunakan banyak file. File vektor ilustrator dapat diimpor sebagai objek pintar. Untuk melakukan ini, Anda cukup membuka file ilustrator, pilih logo, salin pilihan, dan beralih ke Photoshop. Buka Edit, lalu Paste, ini akan menempelkan logo ke lapisan yang sedang Anda kerjakan. Ini juga dapat dilakukan dengan file PNG
Langkah # 8 - Navigasi Teratas
Yang terbaik adalah memecah navigasi di bagian atas halaman menggunakan menu tab shapelier. Anda dapat melakukan ini dengan membuat tab dan memilih alat bentuk persegi panjang bulat. Anda dapat mengedit bentuk dengan alat pemilihan dan alat pena sampai Anda membuat bentuk yang Anda inginkan. Salin dan tempel jumlah lembar yang perlu Anda masukkan ke dalam navigasi teratas Anda.
Langkah # 9 - Memecah Konten Anda
Saat Anda menampilkan sejumlah besar konten, pengguna perlu tahu di mana itu dimulai dan di mana itu berakhir. Untuk memecah konten Anda cukup gunakan aturan horisontal atau vertikal. Anda juga dapat membuat latar belakang berwarna sangat terang untuk setiap konten untuk menunjukkan di mana akhir konten.
Untuk tab teks gunakan alat teks untuk memilih font Anda. Seringkali yang terbaik untuk digunakan adalah font sans serif karena ia menunjukkan yang terbaik. Pilihan lain adalah Helvetica, Arial, dan Verdana.
Langkah # 10 - Tambahkan Media Sosial
Anda dapat memasukkan tombol media sosial dengan mengunduh yang gratis atau dengan mengimpor ikon dan menempelkannya ke aplikasi Anda. Pastikan jaraknya sama dan berada di kolom kanan untuk desain antarmuka yang lebih baik.
Kesimpulan
Seperti yang Anda lihat ada banyak hal berbeda yang perlu Anda ingat ketika datang untuk mendesain antarmuka Anda di Photoshop. Dengan menerapkan teknik-teknik ini, Anda dapat membuat mock-up antarmuka aplikasi Anda dengan cepat dan efisien. Jadi, sudahkah Anda membuat desain antarmuka?
