Di tutorial singkat ini, saya akan berbagi tips menggunakan font awesome di potoshop, tutorial ini saya tulis karena dulu saya bingung cara menggunakan font awesome. Pada tutorial kali ini saya akan menjelaskan bagaimana cara menggunakan Icon dari Font Awesome di Photoshop khususnya bagi para web designer yang sering menggunakan icon pada pekerjaannya, icon memang sangat membantu bagi para pengunjung web, tanpa membaca keterangan pengunjung dapat dengan mudah mengerti apa maksud dari icon tersebut, jadi itu adalah salah satu alasan mengapa icon sering di gunakan, tidak hanya pada website. Sering kita jumpai pada simtem operasi kita misalnya.
Tapi kenapa pakai Font Awesome? kenapa gak pake yang lain? Karena Font Awesome itu gratis, mudah, simple dan selera. Langkah awal sebelum menggunakan font awesome di potoshop anda harus download dulu font awesome di
http://fortawesome.github.io/Font-Awesome/ . Lalu Extract font-awesome-4.3.0.zip dan install FontAwesome.otf yang ada di folder Fonts, setelah di extract akan ada file kurang lebih sebagai berikut :
Detail Tutorial
- Tingkat Kesulitan: Pemula
- Software yang Digunakan: Adobe Photoshop
- Teknik yang Dipelajari: Penggunaan Type Tool
- Lama Pengerjaan: 10 menit
Tutorial
Langkah 1 : Membuat Dokumen Baru
Buka Photoshop dan buat Dokumen baru, ukurannya terserah kamu, pada tutorial ini saya menggunakan ukuran 500x150 px:
Langkah 2
pada tutorial ini saya akan menampilkan social icon dari Font Awesome, buka Font Awesome CheatSheet di http://fortawesome.github.io/Font-Awesome/cheatsheet/ dan copy salah satu sosial icon yang akan kamu pakai, untuk contoh saya meng-copy icon twitter yang square (fa-twitter-square), di Photoshop kamu aktifkan “Type Tool” atau tekan “T” pada keyboard dan pilih FontAwesome, untuk ukurannya selera ya. setelah itu klik pada kanvas dan tekan “Ctrl+V” atau “Edit -> Paste” :
Langkah 3
Copy beberapa icon lainnya biar twitter-nya ngak sendirian :D, kamu juga bias memberikan background lingkaran, mengganti warna dll :
Langkah 4
Terakhir kita ratakan ke tengah semua :
>Buat yang pengen download file PSD dari tutorial ini silahkan tekan tombol download di bawah.
No comments:
Post a Comment