Z artykułu dowiesz się, jak wykorzystać Google Fonts lokalnie, skąd pobrać ikonę w odpowiednim formacie i jak można wykorzystać edytor grafiki wektorowej Inkscape aby uzyskać poniższe loga.
Przygotuj się do zabawy
Czcionki
W pierwszym logo wykorzystałem dwie czcionki Cuprum i Black Ops One, takie zestawienie osobiście mi się spodobało. W drugim logo sparowałem czcionki Pontano Sans i Bevan stosując rady dotyczące parowania czcionek zawarte w artykule designinstruct.com.
Pobierz czcionki z Google Fonts i zainstaluj lokalnie na swoim komputerze. Po rozpakowaniu archiwum przenieś pliki z rozszerzeniem .ttf do odpowiedniego katalogu.
Windows: C:\Windows\Fonts
Linux: ~/.fonts
Mac OS X: ~/Library/Fonts
Możesz również pobrać wszystkie czcionki na swój komputer jednym kliknięciem. Archiwum z paczką znajdziesz na githubie Google Fonts.
Ikona
Jako sygnet wykorzystałem Spider Web Icon z serwisu iconfinder.com; Pobierz wersję z rozszerzeniem svg – format grafiki wektorowej. Jeżeli nie wiesz czym jest sygnet, jak wybrać ikonę oraz sprawdzić jej licencję to zapraszam do artykułu jak stworzyć logo w kilka minut.
Inkscape
Inkscape jest darmowym edytorem grafiki wektorowej do tworzenia symboli, znaków towarowych oraz logotypów. Pracuje z systemami Windows, Linux i Mac OS X. Pobierz Inkscape ze strony domowej projektu i zainstaluj.
Ogromną zaletą programu są wbudowane polskie poradniki dostępne z menu Pomoc, zachęcam do zapoznania się. W artykule nie będziemy wykorzystywać nawet malutkiej części możliwości programu. Chcę Ci jedynie dać pomysł i pokazać, jak nawet bez większej znajomości programu można utworzyć schludne i zapadające w pamięć logo.
Dwa typy grafiki komputerowej
Wyróżniamy dwa typy grafiki komputerowej – grafika rastrowa oraz wektorowa.
Grafika rastrowa wykorzystuje siatkę pionowo-poziomą pokolorowanych pikseli.
Grafika wektorowa wykorzystuje obiekty geometryczne takie jak elipsy, krzywe i okręgi inaczej zwane prymitywami.
Jedyne co na tym etapie musisz wiedzieć, to że w przeciwieństwie do grafiki rastrowej, grafikę wektorową możemy dowolnie skalować (zmieniać rozmiar) bez uszczerbku na jakości obrazu. Dzieje się tak, ponieważ w grafice wektorowej całość opiera się na równaniach matematycznych zapisanych zapisanych w pliku, po każdej modyfikacji komputer oblicza grafikę i wyświetla idealnie przeskalowany obraz bez utraty jakości.
Nie chcę tutaj skupiać się na wszystkich różnicach, wadach i zaletach jednego i drugiego rozwiązania, nie jest to celem artykułu dlatego po bardziej kompletny opis odsyłam Ciebie tutaj i tutaj.
Inkscape na celowniku
Po otworzeniu Inkscape kliknij przycisk F8, włączy się narzędzie do tworzenia i modyfikowania obiektów tekstowych. Utwórz dwa obiekty, pierwszy z napisem Studio drugi z napisem Leopard.
Teraz zaznacz Studio i wybierz z menu Tekst → Tekst i czcionka. Po prawej stronie dla napisu Studio ustaw czcionkę Cuprum. Nie zapomnij wcisnąć przycisku „Zapisz” . Teraz zaznacz Leopard i wybierz czcionkę Black Ops One. Całość będzie się przedstawiać tak jak na zrzucie poniżej.
Naciśnij F1, włączy się narzędzie do zaznaczania i przesuwania obiektów. Kliknij na którymś obiekcie i przesuń aby były do siebie w odpowiedniej odległości i wysokości.
Teraz możemy przejść do pobranej ikony. Wybierz z menu Plik → Importuj i wskaż lokalizację zapisanego pliku svg. Jak widzisz na zrzucie poniżej, obrazek zaimportował się prawidłowo jednak trzeba poprawić jego rozmiary.
Wciśnij jednocześnie klawisz CTRL i Shift a następnie kliknij na strzałkę w prawym dolnym rogu (widocznym na zrzucie powyżej) i przesuń kursor . Jest to sposób na skalowanie obiektów z zachowaniem odpowiednich proporcji. Następnie użyj narzędzia do zaznaczania i przesuwania obiektów aby umieścić ikonę z lewej strony napisu. Tak jak to możesz zobaczyć na poniższym zrzucie.
Na sam koniec wystarczy poprawić kolory, zaznacz kawałek ikony a następnie wybierz menu Obiekt → Wypełnienie i kontur. Z prawej strony będziesz mógł wybrać kolor, użyłem do tego narzędzia „Koło” i ustawiłem 3b3b3bff bez przeźroczystości. Następnie identyczną operację wykonaj dla napisu Studio.
Teraz przeprowadź identyczną operację po lewej stronie ikony i dla napisu Leopard. Czyli wybierz narzędzie do zaznaczania i przekształcania obiektów (F1), zaznacz odpowiedni obszar ikony i zmień jej kolor. Tak samo dla napisu Leopard.
To już prawie koniec. Jedyne co teraz przydałoby się zrobić, to dopasować stronę do zawartości. Możesz zrobić to wybierając narzędzie do tworzenia prostokątów i kwadratów (F4). Utwórz prostokąt zasłaniający chwilowo wszystko co zrobiłeś, zmień krycie (Opacity) prostokąta na 70% (aby widzieć co przykrywamy i jak dokładnie) i popraw jego wymiary tak jak możesz to zobaczyć poniżej.
Teraz wybierz menu Plik → Właściwości dokumentu, rozwiń dopasuj stronę do zawartości po czym kliknij „Dopasuj stronę do rysunku lub zaznaczenia”. Następnie usuń prostokątny obiekt wciskając przycisk Del.
A o to ostateczny efekt.
Teraz możesz zapisać obraz do formatu svg a następnie wyeksportować do png wybierając z menu Plik → Export PNG Image. Popraw nazwę pliku i wciśnij przycisk eksportuj.
Gdyby jednak okazało się, że obrazek nie jest odpowiedniej wielkości, otwórz uprzednio zapisany plik svg, użyj narzędzia do zaznaczania i przekształcania obiektów, następnie zaznacz wszystkie obiekty i trzymając klawisze CTRL i Shift zmień rozmiar, identycznie jak robiłeś to wcześniej z samą ikoną. Jeżeli masz zaznaczone wszystkie obiekty, to nie musisz dopasowywać rozmiaru strony, możesz od razu wyeksportować zawartość do pliku png.
Jak widzisz, utworzenie prostego logo wcale nie jest czynnością trudną. Wystarczy odrobina pomysłu i program do grafiki wektorowej.
Zapraszam do podzielenia się swoimi spostrzeżeniami w komentarzu.
Opublikowano 14 grudnia 2015 w kategorii blog, poradnik.
