Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements

Dari Hanya Merancang ikon menjadi Master Ikon (+ Gratis PSD)

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Mutiara Nenny Pratiwi (you can also view the original English article)

Dalam artikel ini saya akan memperlihatkan apa yang diperlukan untuk berpindah dari perancang ikon ke ikon pro. Saya akan memperlihatkan bagaimana desain ikon dimulai, mulai hari ini, dan akan berlanjut ke masa mendatang, serta berbagi beberapa petunjuk dan tips yang berguna.


Pengantar

Kurang lebih dari enam bulan yang lalu saya memulai pekerjaan baru saya di mana saya diminta untuk memperluas satu set ikon yang ada. Hebat saya pikir, saya bisa memperbanyak ikon, setelah semua saya buat mereka menjadi 100 kali dari sebelumnya. Kemudian ketika saya melihat set ikon yang ada, itu cukup mengejutkan bagi saya. Mereka adalah desain yang paling sederhana dan saya benar-benar merasa tertantang untuk melakukan sesuatu yang sangat sederhana. Saya terbiasa menghabiskan waktu berjam-jam pada ikon-ikon yang biasanya saya buat, yang rasanya aneh bahwa saya hanya menghabiskan sepuluh menit pada ikon ini untuk menyelesaikannya.

Ini kemudian membuat saya berpikir tentang berbagai macam pertanyaan yang berkaitan dengan ikon seperti 'apa yang membuat ikon menjadi bagus' dan 'berapa banyak waktu yang harus dihabiskan untuk sebuah ikon?'. Saya akan berbagi beberapa jawaban dengan Anda di bawah ini. Saya telah berbicara dengan beberapa desainer ikon top lainnya untuk mendapatkan proses yang mereka ambil. Kami juga akan memperlihatkan bagaimana desain ikon dimulai, di mana saat ini, dan (yang lebih penting) di mana itu akan berada di masa depan. Jadi tetaplah dengan saya, membuat secangkir teh dan selamat merancang peeps!


Ikon Pertama

Jadi darimana mahakarya grafis kecil ini berasal? Semuanya dimulai pada tahun 1973 ketika komputer sedikit lebih dari sistem berbasis DOS di mana pengguna mengarahkan jalan mereka menggunakan perintah. Ini adalah waktu ketika desain grafis di komputer tidak ada. Tidak ada gerakan jari ataupun goresan jari untuk mengoperasikannya.

Seperti yang Anda bayangkan, ini bukan cara termudah untuk mendapatkan mesin Anda, dan perusahaan yang cukup terkenal di Amerika Serikat yaitu Xerox sibuk bekerja keras untuk mencoba dan mengatasi masalah ini. Pada tahun yang sama mereka merilis 'The Xerox Alto' yang menjadi komputer pertama dalam sejarah untuk beroperasi menggunakan antarmuka pengguna grafis (GUI untuk pendek). Tidak sampai beberapa tahun kemudian ketika seorang Mr Steve Jobs dan rekan karibnya Steve Wozniak mengambil ide-ide yang dikembangkan oleh Xerox dan membuatnya ke sistem operasi pertama yang kemudian tersedia secara komersial di dunia untuk menggunakan GUI. Itu disebut Macintosh. Hadirin sekalian ikon itu lahir!

original icons from the apple macintoshIkon pertama yang muncul adalah milik Apple di Macintosh.

Ini memang revolusi untuk bidang komputasi. Direktori sekarang memiliki representasi grafis yang muncul sebagai folder, file yang tampak seperti notes, jam dan kalkulator juga muncul.

Ikon komputer adalah pictogram yang ditampilkan pada layar komputer dan digunakan untuk menavigasi sistem komputer atau perangkat seluler.


Pedoman Desain Ikon

Berikut adalah beberapa prinsip desain yang paling penting saat membuat ikon

Buatlah tetap Sederhana dan Ringkas

Ini bisa dibilang salah satu aspek paling penting dalam desain ikon. Dari semuanya, ikon harus sederhana, jelas dan ringkas. Dalam kebanyakan kasus, Anda perlu membuat ikon dalam jumlah maupun ruang yang terbatas. Anda harus dapat menggambarkan produk Anda, layanan atau tindakan Anda dengan jelas dan to the point.

Simple icon designIkon sering bekerja paling baik ketika hanya dalam warna hitam dan putih. Setelah dipakukan, Anda dapat menambahkan warna dan merender ke ikon Anda.

Dalam beberapa skenario tersebut mungkin ide yang bagus dengan hanya menggunakan satu objek, atau satu karakter misalnya. Metode ini biasanya berfungsi meskipun kadang-kadang objek lain mungkin diperlukan. Lebih dari dua objek dan saya akan berhati-hati karena ini kadang-kadang dapat membuat tampak tidak jelas dan bisa menghalangi fokus dari ikon. Jika Anda menemukan diri Anda dalam situasi ini, maka cobalah melucuti objek tersebut menjauh sampai pesan Anda menjadi jelas.

Ikon mewakili tindakan yang akan dilakukan pengguna

Konsistensi

Jika Anda diberi tugas membuat serangkaian ikon, maka mereka harus memiliki beberapa bentuk konsistensi menyeluruh. Ini bisa dalam bentuk palet warna, bentuk, dan objek tertentu. Konsistensi juga harus hadir di seluruh aplikasi secara keseluruhan. Apa yang terjadi ketika pengguna Anda mengklik ikon? Apakah layar itu dibawa ke gaya dengan cara yang mirip dengan ikon Anda? Jika jawabannya adalah "tidak" maka Anda mungkin perlu membaca ulang sebagian keputusan Anda - pengguna sering membuat tautan antara dua peristiwa mengklik ikon dan layar berikutnya yang mereka tuju. Jika Anda melanggar konvensi ini maka ada risiko yang jauh lebih tinggi yaitu melanggar kepercayaan pengguna Anda.

Pahami Demografi Target Anda

Orang seperti apa yang paling mungkin mengklik ikon? Apakah ikon ditargetkan untuk anak usia lima tahun atau enam puluh lima tahun? Apakah itu untuk pengguna di China atau pengguna di Inggris? Jika Anda membuat ikon terkait makanan maka tidak akan ada gunanya menggunakan sumpit sebagai alat makan Anda jika ditargetkan di pasar Inggris. Anda harus memikirkan hal ini dan memastikan bahwa target demografi Anda akan dapat berhubungan baik dengan desain Anda.

Jadikan Mereka Muncul, Jadikan Mereka Bersuara

Sekarang lebih dari sebelumnya ikon Anda harus menonjol dari kerumunan. Dengan toko aplikasi bermunculan sepanjang waktu di berbagai perangkat dari ponsel pintar ke smart tv.

iconsIkon-ikon dari Ramotion dan George Gliddon menunjukkan kualitas ikon yang bagus yang muncul.

Jika ikon Anda untuk sebuah aplikasi, itu akan sering menjadi titik kontak pertama untuk itu. Ini toko Anda ke dunia. Orang-orang pada akhirnya dipengaruhi oleh desain. Anda mungkin memiliki aplikasi terbaik di dunia tetapi orang-orang akan berhenti jika mereka tidak pertama kali terlibat oleh ikon Anda. Pikirkan tentang itu, apakah Anda benar-benar akan masuk ke toko yang tampak kumal dari luar? Ini prinsip yang sama; tidak banyak orang akan mengambil langkah selanjutnya untuk mengetahui lebih lanjut tentang aplikasi Anda atau mengambil tindakan berikutnya.

Sketsa adalah Teman Anda - Konseptualkan!

Ok saya akui itu. Seni digital adalah kontak pertama saya dengan dunia seni. Photoshop adalah sketsa saya dan mouse adalah pensil saya. Saya belum pernah mempertimbangkan untuk membuat sketsa sebelumnya; lagipula gambar saya selalu menjadi sampah ketika menggambar dengan tangan bebas selama di sekolah. Itu tidak sampai satu tahun di universitas ketika saya menjelaskan ini kepada salah satu dosen saya ketika itu dia berbalik kepada saya dan berkata "Aaron membuat sketsa adalah teman Anda". Dia kemudian mulai menjelaskan kepada saya bagaimana Anda tidak perlu menjadi ilustrator terbaik dunia untuk membuat sketsa.

square iconBuatlah sketsa ikon Anda terlebih dahulu agar bisa berfungsi sebagai titik awal yang layak untuk desain akhir Anda.

Sketsa bukan tentang menciptakan representasi realistis dari apa yang sebenarnya dapat Anda lihat tetapi lebih merupakan metode untuk menciptakan dasar ide, inspirasi, konsep atau visi. Sejak hari itu saya selalu membawa buku sketsa di sekitar saya dan lebih sering yang tidak lain saya akan membuat sketsa desain saya untuk ikon. Ini sangat berharga dan dapat menghemat banyak waktu. Ini membantu Anda mendapatkan dasar ikon Anda dan sering dapat berfungsi sebagai titik awal yang layak untuk desain akhir Anda.


Studi kasus

Saya berhasil berbincang beberapa menit dengan desainer ikon berbakat Alex Volkov dan menanyakan beberapa pertanyaan mengenai desain ikon.

Alex volkov iconsIkon yang dibuat oleh Alex Volkov. Ini menunjukkan kemajuan yang telah dibuat selama bertahun-tahun dalam hal desain ikon.

QApakah faktor terpenting dalam menciptakan ikon yang bagus?

Faktor yang paling penting adalah menemukan gaya yang paling ekspresif untuk menggambarkan ikon, yang akan sesuai dengan tugas yang paling jelas dan seberapa efektif ia akan menjalankan fungsinya. Dari semuanya ikon harus indah.


Q Berapa banyak waktu yang harus dihabiskan untuk sebuah ikon?

Itu tergantung pada tugas ikon, ide dan gaya yang dipilih. Ini bisa memakan waktu dua hingga enam belas jam. Saat itulah saya perlu membuat ikon, sedangkan waktu untuk mencari ide dan persetujuan dengan klien bervariasi dan kadang-kadang bisa memakan waktu lebih lama daripada implementasinya.


Ikon Petunjuk & Tips

Berikut ini adalah beberapa petunjuk dan tips yang dapat membantu desain ikon Anda agar dapat berpindah dari level satu ke level expert. Tentu saja, seperti halnya semua desain, semakin Anda mencoba, semakin banyak kesalahan yang akan Anda buat. Tetapi semakin banyak kesalahan yang Anda buat, semakin baik Anda.

Dapatkan Cahaya yang Tepat

Jika Anda ingin menambahkan realisme ke ikon Anda maka sangat penting untuk memahami dari arah mana cahaya bersinar di atasnya. Anda harus dapat memvisualisasikan (di kepala Anda) suatu cahaya imajiner bersinar pada ikon. Yang ditunjukkan gambar dibawah ini.

unsing lighting and shadows in icon designGambar berlebihan ini menunjukkan sumber cahaya kita dan bagaimana itu akan jatuh pada ikon. Dari sini kita dapat menentukan di mana sorotan dan bayangan seharusnya.

Dengan memvisualisasikan ini kita dapat menambahkan highlight dan bayangan ke ikon karena mereka akan jatuh di dunia nyata.

Keindahan ada di Detail

Ketika membuat ikon perhatian terhadap detail sangat penting: glare, bayangan, refleks, pantulan, sifat material. Lihatlah dunia di sekitar Anda dan pikirkan bagaimana hal itu akan terlihat dalam kehidupan nyata. Interaksi dan perilaku dengan material ringan dan sekitarnya adalah penting. Cahaya dapat sering jatuh berbeda dalam kondisi cuaca yang beragam. Misalnya cahaya tidak akan melakukan perjalanan yang sama melalui ruang kosong seperti di ruangan yang penuh asap. Ketika kita mempertimbangkan faktor-faktor ini kita dapat membuat bukan hanya bentuk ikon, kita dapat membuat ikon dengan suasana hati dan perasaan tertentu.


Daftar Ikon Buruk

  • Gunakan sedikit atau tidak ada teks
  • Apakah ikon ini dapat dikenali secara universal? Misalnya, mobil polisi di AS tidak akan sama dengan mobil polisi di Australia.
  • Apakah Anda memiliki terlalu banyak objek dalam ruang yang terbatas?
  • Sudahkah Anda mendesain ikon pada ukuran yang sesuai?Jika tidak maka memang seharusnya memperbaikinya.

Ikon Aplikasi

Dengan diperkenalkannya ponsel pintar (terutama iPhone), tablet dan aplikasi ke layar, ikon telah mengalami sedikit revolusi. Belum pernah ada ikon yang tampak begitu halus, begitu nyata, penuh kedalaman, warna dan intensitas.

iphone ipad icon sizesGambar ini menunjukkan ukuran yang berbeda dari ikon aplikasi yang berbeda

IPhone menetapkan batasan dan panduan bagaimana ikon aplikasi dapat ditampilkan di layar sentuh mereka. Paling jelas mereka harus muat dalam kotak 57 x 57px (114 x 114px res tinggi). Keterbatasan ini mengatur imajinasi komunitas desain dan sebagai akibat dari ini kita sekarang memiliki semua jenis ikon aneh dan indah yang telah didasarkan di sekitar keterbatasan placeholder ikon persegi iPhone.

square iconBeberapa batasan ikon telah menciptakan gaya baru desain ikon seperti ini oleh Livie Leontidis, Ramotion dan Jackie Tran Anh.

Masa Depan Desain Ikon

Dengan melihat perjalanan yang sebelumnya diambil ikon, kita dapat mencoba dan memprediksi bagaimana ikon akan berada di masa depan dan bentuk apa yang mungkin mereka ambil. Tentu saja masa depan ikon sangat bergantung pada, bukan hanya prinsip dasar desain ikon yang bagus, tetapi juga pada alat yang digunakan untuk membuat ikon tersebut. Misalnya, untuk setiap fitur baru yang ditambahkan ke perangkat lunak seperti Photoshop, ini dapat membantu membentuk masa depan ikon. Namun prinsip dasar desain ikon yang baik tetap sama. Satu orang yang tahu mungkin lebih tahu dari yang lain tentang desain ikonik yang bagus adalah Rob Janoff. Rob mendesain logo apel di tahun 70-an. Saya berhasil mengambil obrolan Skype dengan Rob yang memberi tahu saya apa yang membuat ikon menjadi bagus.

Yang biasanya saya cari adalah kesederhanaan dan keanggunan. Dengan munculnya teknologi, semakin banyak renderings ikon yang rumit. Yang bagus ketika dilihat tetapi kadang-kadang teknik ini diganti untuk konsep. Untuk hal-hal yang sangat sederhana mereka lebih mudah diingat. - Rob Janoff

Untuk memahami masa depan ikon, kita juga harus melihat platform tempat mereka digunakan. Dalam wawancara baru-baru ini, Bill Gates ditanya apa yang paling dia nantikan, mengenai masa depan internet. Dia membalas:

Koneksi internet super cepat dan peningkatan perangkat keras akan memungkinkan web yang luas di seluruh dunia yang memberi kita informasi dalam 3D Bill Gates

Ini bisa memberi wawasan tentang masa depan ikon. Mungkin mereka bisa bergerak menjauh dari benda 2d datar dan menjadi bagian dari dunia di sekitar kita. Ikon berpotensi menjadi pegangan yang kita tarik, memutar yang kita putar dan objek yang kita tekan.

Ikon di masa depan akan menjadi lebih baik, lebih profesional dan menarik. Desainer sudah mencoba membuat desain yang menarik perhatian dan diharapkan tren ini akan terus berlanjut.


Ikon Lensa.PSD

Mendampingi artikel ini adalah .PSD untuk Anda unduh dan digunakan dalam proyek Anda, tweak atau hanya untuk melihat-lihat. Alasan untuk menyertakan desain ini adalah untuk memperkenalkan Anda kepada beberapa teknik yang digunakan di bagian ketiga desain ikon; rendering.

webdesigntuts+ icon psd

Langkah pertama yang harus dilakukan adalah menyusun semua ide Anda, melihat-lihat internet dan objek yang Anda lihat di sekitar Anda, mencoba dan mendapatkan inspirasi (ini selalu membantu). Yang kedua adalah membuat sketsa beberapa ide dan memastikan bahwa panggilan untuk bertindak atau pesan yang Anda coba gambarkan jelas, ringkas dan jelas. Bagian ketiga adalah render. Ini adalah bagian di mana Anda mulai menambahkan warna, bayangan dan pencahayaan. Menurut saya ini adalah bagian yang paling menarik karena ini adalah ketika ikon kita benar-benar mulai hidup kembali.

Silahkan lihat melalui PSD dan Anda harus dapat melihat bagaimana ikon dibangun.


Kesimpulan

Tidak ada keraguan tentang hal tersebut jika ikon telah diregenerasi secara keseluruhan dalam beberapa tahun terakhir, dan siapa yang menyangka bahwa para desainer akan menempatkan begitu banyak waktu dan upaya menjadi sesuatu yang bisa sekecil 16x16px!

Ini adalah ikon-ikon yang membantu kami menavigasi perangkat kami dengan lebih mudah dan pada akhirnya memperkaya hidup kami hari demi hari. Dapatkah Anda membayangkan betapa frustrasinya kehidupan jika kita kembali ke tahun 70-an dan harus menavigasi menggunakan perintah perintah? Ini akan menjadi mimpi buruk. Untungnya hal-hal tersebut telah berkembang sejak itu dan tugas kami sebagai desainer adalah mendorong batas apapun ketika terkait dengan ikon; kita harus merangkul teknologi yang kita miliki di sekitar kita hari ini sehingga kita dapat menghasilkan ikon seperti mereka yang belum pernah diproduksi sebelumnya. Jika Anda baru saja memulai dengan desain ikon atau Anda masih menjadi ikon perawan maka sekarang adalah saat yang tepat untuk mengetahui bahwa Anda sekarang dipersenjatai (dibekali) dengan pengetahuan dasar, dari artikel ini, yang akan menempatkan Anda di jalur yang benar untuk menciptakan karya ikon Anda sendiri.

Sampai jumpa di waktu berikutnya, selamat merancang peeps!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.