Ramiz TAYFUR

Sans-serif

Aa

Serif

Aa

Font büyüklüğü

+ -

Satır yüksekliği

+ -
Gündüz
Gece
Gün Batımı

Font Awesome Photoshop’ta Kullanımı

Arayüz tasarımcılarının sıklıkla kullandığı bir araçtan bahsedeceğim sizlere. İnternet sitelerinin arayüzlerini tasarlarken malumunuz ikonlar olmazsa olmazımız. Onlar olmadan bir eksik kalıyor tüm tasarım. Bunu çoğu zaman ikonu internetten vektör olarak bul. Sonra bunu ai ile aç ps’e aktar sonra boyutlandır vs. uğraşıyorduk. Font Awesome ile bu durum biraz da olsun özel tasarımlar haricinde giderilmiş gibi görünüyor. Photoshop’ta bir font gibi ekleyebileceğiniz ikonlar sayesinde bu zahmetli uğraştan birazda olsa kurtulabiliyoruz.

1- Evet gelelim Font Awesome kurulumuna. Öncelikle buradan Font Awesome paketini indiriyoruz.

font-awesome-kurulumu-1

2- İndirdiğimiz zip dosyasını açtığımız zaman karşımıza dosyalar çıkıyor. Bu dosyaların içerisinde “Fonts” isimli klasöre tıklıyoruz.

font-awesome-kurulumu-2

3- Font klasörüne girdiğinizde yüklemeniz gereken 2 font dosyası mevcut. Görsel de belirttiğim bu fontlardan biri OTF diğeri TTF formatında olması gerekiyor. Her iki yazı tipinide yüklemelisiniz.

font-awesome-kurulumu-3

4- Belirtmiş olduğum yazı tiplerini yükleme işlemini de aşağıda ki görsel de belirttiğim gibi “Yükle” butonuna basarak gerçekleştirebilirsiniz. (Bilmeyenler için belirtiyorum)

font-awesome-kurulumu-4

5- Belirttiğim kurulum işlemlerini yaptıktan sonra Photoshop’u açıyoruz. Sonrasın da Ctrl + N / Cmd + N tuşlarına basarak yeni bir çalışma alanı oluşturuyoruz.

font-awesome-kurulumu-5

6- Yazı yazar gibi T kısayolu ile Horizontal Type Tool aracını seçiyoruz. Sonrasında Font Awesome Cheatsheet sayfasında tasarladığımız arayüze ekleyeceğimiz ikonu mouse imleci ile seçiyoruz.

font-awesome-kurulumu-6

7- Sonrasında seçmiş olduğumuz ikonumuzu CTRL + C / CMD + C yardımı ile kopyalayarak Photoshop’a geliyoruz. Burada Horizontal Type Tool aracı seçili ile CTRL + V / CMD + V yardımı ile ikonumuzu yapıştırıyoruz.

font-awesome-kurulumu-8

Evet ikonu yapıştırıp font bölümünden de Font Awesome (OT1) tercih ettikten sonra ikonumuz ortaya çıkıyor. Örnek teşkil etmesi adına bir de aşağıda örnek bir çalışma ve anlamayanlar için detaylı bir görsel hazırladım.

font-awesome-kurulumu-7

Evet. Yapılacak işlemler bu kadar. Siz de arayüz tasarımlarınızı daha profesyonel hale getirebilirsiniz. Ha bu arada ikonların isimlerini layerlar bölümünde belirtmeyi unutmayın. Tek taraflı düşünmemek geliştiricininde dilinden anlamak gerek. Photoshop serisine dair pek birşey uzun süredir paylaşamıyorum. İşin özü kişisel ya da diğer kategorilerede yazı yazamıyorum. Faydalanmanızı ve arayı fazla açmamayı umuyorum. Takıldığınız bir yer varsa yorum bölümünden sorabilirsiniz.

Bir yanıt yazın


Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.