Polecane

Najnowsze


Jak zrobić ikonki. Projekt wyglądu bloga - czcionka awesome

Projektując wygląd bloga często potrzebujemy ikonek, obrazków, które zawierają symbole. Wykorzystujemy je np do utworzenia ikonek profili społecznościowych (profilki).


Projekt wyglądu bloga najczęściej tworzymy w programie graficznym np Gimp (program darmowy) czy też Photoshop (program płatny). Do stworzenia ikonek najprościej wykorzystać czcionkę, font awesome.

Skąd pobrać ikonki, profilki?

Pierwszym krokiem pracy jest pobranie pakietu z czcionkami. Wchodzimy na stronę  Font Awesome i klikamy przycisk Download (czyli Pobierz). Zapisujemy spakowaną paczkę na dysku. Następnie rozpakowujemy np klikając prawym przyciskiem myszy i wybierając opcję Wyodrębnij.

Jak zainstalować czcionkę Awesome (ikonki) w Photoshop, Gimp?

Zainstalujemy teraz czcionkę. Aby to zrobić wchodzimy w rozpakowany właśnie folder. Zawiera on kilka folderów m.in folder Fonts. Wchodzimy teraz właśnie w folder Fonts, gdzie znajduje się kilka plików. Nas interesują dwa pliki: FontAwesome.otf oraz fontawesome-webfont.ttf.

Aby zainstalować czcionkę klikamy na prawym przyciskiem myszy na wybranym pliku i wybieramy z menu podręcznego opcję Zainstaluj:


Instalacja czcionki Awesome w Photoshop systemie Windows 7

Tak samo postępujemy z drugim plikiem fontawesome-webfont.ttf.

Jak zrobić ikonki ?

Przechodzimy teraz do programu graficznego. Czcionki Awesome są teraz widoczne i gotowe do użycia:

Czcionka Awesome po zainstalowaniu widoczna i dostępna w programie Photoshop
Czcionka Awesome w programie Photoshop

Jak użyć czcionki awesome w programie graficznym np Photoshop?

Samo wybranie czcionki nic nam nie da. Jak zatem jej używać?


Musimy wejść na stronę z wykazem symboli, ikonek: Font Awesome Cheatsheet. Mamy tu pełny wykaz symboli. Wybraną ikonkę, symbol, czyli jej obrazek należy zaznaczyć i skopiować. Poniżej przykład, zaznaczona ikonka facebook:


Przechodzimy teraz do programu graficznego. Używamy narzędzia Tekst i wybieramy czcionkę FontAwesome. Następnie klikamy i wklejamy skopiowaną ikonkę. Ponieważ wklejona ikonka jest tak naprawdę czcionką, możemy dowolnie zmieniać jej rozmiar, kolor. Kopiując kolejne ikonki możemy stworzyć w prosty sposób pasek z ikonkami społecznościowymi np facebook, pinterest, instagram:

Już niedługo następna cześć posta o tym Jak wstawić  taki pasek z profilkami na blog blogspot.

8 komentarzy:

  1. Będziesz jeszcze dodawała posty?

    OdpowiedzUsuń
    Odpowiedzi
    1. Odnośnie profili? Tak; już teraz przygotowuję takiego posta

      Usuń
  2. Wspaniały blog;) A ile w nim cennych porad i wskazówek;) Właśnie to, z czym mam ciągle problemy... Super! Pozdrawiam Cię cieplutko i myślę, że nie będziesz miała nic przeciwko temu, że rozgoszczę się tu na stałe;)

    OdpowiedzUsuń
  3. Zrobiłam jak należy a pojawia mi się ikonka, znak zapytania, a nie ta wybrana przeze mnie. Używam PhotoFiltre...

    OdpowiedzUsuń
  4. Edit: Użyłam GIMPa i jest ok :) Dzięki!

    OdpowiedzUsuń
  5. Super:) ja mam problem z tak podstawową rzeczą jak tytuł bloga. W szablonie blogera większość jakichś fajnych czcionek nie ma polskich znaków. Jak zrobić tytuł jakąś ładną czcionką?

    OdpowiedzUsuń
    Odpowiedzi
    1. Są dwa sposoby. Pierwszy to skorzystać z Google Font. Drugi to stworzyć napis w programie graficznym i wstawić obrazek w nagłówek

      Usuń