Entries

Cara menampilkan icon Font Awesome pada Photoshop




Saturday, February 21, 2015
Kali ini saya akan menunjukkan bagaimana cara menggunakan / menampilkan icon yang ada pada Font Awesome pada Photoshop. Font Awesome adalah sebuah situs yang menyediakan kumpulan-kumpulan icon secara gratis yang diimplementasikan pada desain web. Cara pemasangannya atau penggunaanya ialah melalui file .CSS yang didownload melalui situsnya. Namun saat kita memanfaatkan Photoshop untuk mendesain website maka kita tidak dapat menggunakan file .CSS tadi melainkan dengan cara yang berikut ini :

Pertama kunjungi situs Font Awesome disitu akan terlihat langsung tombol download, langsung saja klik tombol download tersebut. Setelah didownload (file dalam bentuk zip), ekstrak file zip tersebut maka akan menghasilkan beberapa folder yaitu : CSS, Fonts, Less,SCSS.

Buka folder Fonts lalu instalkan font dari font awesome nya yang bernama fontawesome-webfont.ttf pada sistem operasi anda, cukup double klik saja file tersebut installer akan secara otomatis memasang font tersebut di PC anda. Jika sudah silahkan buka Aplikasi Photoshop anda, aktifkan Text Tool (T) lalu lihat di daftar font anda maka disana akan terdapat font jenis Font awsome.
Selanjutnya adalah buka halaman ini http://fortawesome.github.io/Font-Awesome/cheatsheet/ disana terdapat icon-icon yang disediakan font awesome. Double klik icon yang ingin anda pakai (icon akan terpilih) lalu copy (klik kanan copy / ctrl + c).


***
Simpan halaman ini / ctrl + s agar bisa kamu gunakan nantintinya tanpa perlu menggunakan internet / ketika sedang tidak ada koneksi internet Atau jika kamu mengalami masalah saat akan menggunakan icon melalui halaman offline kamu bisa simpan halaman tersebut dengan format pdf, silahkan cari google dengan kata kunci "save web to pdf online".

lalu kembali ke dokumen Photoshop anda dengan kondisi text tool aktif dengan font jenis font awesome lalu pastekan (ctrl + v) didokumen anda
Tara......End....
See you :D

Edit Foto

edit foto
 

Behind the Web

Copyright © 2010 • IndoPhotoshop • All rights reserved