Przejdź do głównej zawartości

Ikonografia stosowana

czyli identyfikacja wizualna w mediach społecznościowych, blogach, stronach i aplikacjach internetowych

Post powstał w wyniku przeprowadzonych w ZSE w Kielcach WARSZTATÓW EDUKACYJNYCH, które są częścią projektu KONKURS MULTIMEDIALNY.  

Zamiast wstępu

Najważniejsze adresy z wykładu

Identyfikacje, ikony i logotypy

Przykłady

Testy poprawności:

16 x 16
32 x 32
64 x 64
128 x 128
W odcieniach
szarości

 

 

 

 

 

W projekcie użyto fontu (repliki czcionki):  Antykwa Półtawskiego

Ćwiczenia

  1. Utwórz folder (np. ikony) przeznaczony na obrazy ikon strony internetowej 
  2. Uruchom program Inkscape i z menu Plik wybierz Właściwości dokumentu.
  3.  W oknie Właściwości dokumentu, na karcie Strona z listy Wielkość strony wybierz Icon 16x16 (jeśli ikona ma posiadać tło wybierz przycisk Tło i w oknie Kolor tła ustaw odpowiednią wartość). Pozamykaj okna.
  4. Z menu Widok wybierz: Wyświetl siatkę, Podgląd ikon... i listy Powiększenie wybierz Strona.
  5. Zaprojektuj ikonę zawierającą twoje inicjały i zapisz ją w folderze ikony pod nazwą ikona16.svg (domyślny format wektorowy SVG Inkscapa) pamiętając, że:
    - Przyciąganie do siatki możesz przełączać za pomocą przycisku Przyciągaj do siatek.
    - Do precyzyjnego pozycjonowania elementów użyj z menu Obiekty opcji Wyrównaj i rozmieść.
    - Przy projekcie staraj się nie używać konturu (jeśli już to minimum 2px).
    - Ikona powinna być czytelna i estetyczna w każdej skali, w trybie szarości i czarno-białym.
  6. Z menu Plik wybierz Eksportuj jako bitmapę... i w otwartym oknie wybierz przycisk Strona, określ lokalizację p nazwę pliku i naciśnij przycisk Eksportuj (grafika zostanie wyeksportowana do formatu PNG z tłem określonym we Właściwościach dokumentu).
  7. W oknie eksportu zmień Rozmiar bitmapy ustalając szerokość na 32 (wysokość zmieni się automatycznie), zmień nazwę pliku (np. dodając 32) i naciśnij przycisk Eksportuj. Powtórz czynności dla rozmiaru 64, 128.
  8. Zamknij program Inkscape.
  9. Skopiuj  ikonę o rozmiarze 16 lub 32 do folderu z plikiem index.html lub innej strony internetowej i zmień jej nazwę na favicon.png.
  10. Otwórz źródło strony internetowej w edytorze (np. Notepad++)
    w elemencie <head> wpisz kod:
    <link href="favicon.png" rel="icon" type="image/png" />
    w elemencie <body> wpisz kod:
    <img src="ikony/ikona.svg" alt="ikona" />
    <img src="ikony/ikona16.png" alt="ikona16" />
    sprawdź wygląd strony w różnych przeglądarkach, dopisz kod dla pozostałych rozmiarów.
  11. Jeśli posiadasz blog Bloggera zmień domyślną ikonę (dokonujemy tego w menu Układ).
  12. Jeśli posiadasz blog  WordPressa umieść plik favicon.png w głównym katalogu a następnie w menu Wygląd wybierz Edytor. Z menu szablony wybierz Nagłówek (header.php). W elemencie <head> wpisz lub skopiuj kod elementu <link>.
  13. Umieść pliki ikon na serwerze.

Ikony sieciach społecznościowych

Zdjęcie profilowe 180 x 180
100 x100
Znajomi
40 x 40
Post
32 x 32
Czat
Komentarz
24
Profil
18
Menu

 

 

 

 

 

 

Zdjęcie profilowe w sieci Facebook będzie występowało w różnej skali

Zadania

  1. Dostosuj swoją ikonę do zastosowania w usługach Google. Obowiązuje ta sama ikona, skalowana z pliku o rozmiarze 250px na 250px, w G+ kadrowana w kole a w YouTube w kwadracie.
    Uwaga: Przy eksporcie do formatu PNG pamiętaj o zastosowaniu tła.
  2. Ikona fanpage lub profilu (zdjęcie profilowe), sieci Facebook,  generowana jest z pliku o  rozmiarze 180px na 180px (w grafikach z przezroczystym tłem aplikacja doda kolor biały tła). Dostosuj swoją ikonę do zastosowania w tej sieci i wyeksportuj ją.
  3. Utwórz stronę internetową zwierającą galerię utworzonych ikon. Określ font/czcionkę której użyłeś oraz kolory. Opublikuj ją i dodaj do niej link w swoim portfolio.

Popularne posty z tego bloga

Tekst i ścieżki

Tekst i ścieżka mogą być komplementarnymi elementami, które współpracują ze sobą. Niektóre opcje menu Tekst są bardzo interesujące.
Umieść na ścieżce / Usuń ze ścieżki Inkscape obsługuje element SVG <textPath>. Pozwala to na umieszczenie tekstu na ścieżce, tak aby podążał za jej kształtem. Zarówno tekst, jak i ścieżka pozostają w pełni edytowalne (w tym kernery i litery w tekście).

Wybierz ścieżkę i tekst i użyj opcji Tekst -> Umieść na ścieżce. Kiedy przesuwasz ścieżkę, dołączony tekst porusza się wraz z nią; Można jednak przenieść tekst z dala od jego ścieżki lub przekształcić go bez utraty łącza. Polecenie Tekst -> Usuń z ścieżki przekształca tekst-na-ścieżkę w zwykły obiekt tekstowy.
Przepływ do ramki / Unflow from Frame Przepływ do ramy Alt + W polecenie z  menu Tekst może przejmować dowolny wybrany tekst i umieszcza go w wybranym kształcie. Zawijanie słów jest automatycznie wykonywane w taki sposób, aby tekst pasował do kształtu tak dokładnie, jak to możliwe. Po tym …

Banerologia w praktyce

czyli identyfikacja wizualna w mediach społecznościowych, blogach, stronach i aplikacjach internetowych (cz. 2)Ikonografia stosowana była tematem poprzedniego wpisu dotyczącego szeroko pojętej identyfikacji wizualnej. Kolejna lekcja z tej serii, i mam nadzieję nie ostatnia, porusza zagadnienia banerów internetowych (zdjęcia w tle, profilowe, na okładkę, kanału itd...).

Facebook Zapoznaj się wytycznymi na stronie:  link
Zdjęcie w tle
Wybierz Właściwości dokumentu z menu Plik.Ustaw  Wielkość strony w części Rozmiar niestandardowy na 851 x 315 pikseli oraz inne właściwości np. Tło.Wykorzystując prowadnice zaznacz niewidoczne części obrazu. Pamiętaj, że po otwarciu strony profilu jest ona przesunięta i zdjęcie w tle jest widoczne w połowieWykorzystując poznane techniki zaprojektuj obraz.Zapisz otrzymany obraz w pliku zdjecie_na_okladke.svg a następnie wyeksportuj go w formacie PNG lub JPG. Zdjęcie profilowe
Otwórz lub zaimportuj zdjęcie.Wykadruj je do rozmiaru co najmniej 180 x 180 pikseli…

Edytor Inkscape

Wymagany przez CKE w standardzie wyposażenia pracowni egzaminacyjnej w kwalifikacji E.14. (alternatywa do Corel Draw lub Adobe Illustrator) Licencja: GPL Systemy: Windows XP-10
Strona programu: www.inkscape.org
Instalacja
Pobierz pliki instalacyjne ze strony programu (menu Download) zgodnie z rodzajem i wersją systemu.
Kliknij odpowiedni link i naciśnij OK. Otwórz po zakończeniu pobierania folder Pobrane i zainstaluj program. W przypadku wersji portable otwórz plik i wybierz funkcję Wyodrębnij wszystkie pliki . Wybierz przyciskiem Przeglądaj folder np. dysk USB, dodaj nazwę folderu np. Inkscape i naciśnij Dalej. Po rozpakowaniu archiwum otwórz folder i uruchom program InkscapePortable.exe.
Zawartość poradnikówPodstawy: Przesuwanie obszaru roboczego, Przybliżanie/Oddalanie, Narzędzia Inkscape'a, Tworzenie dokumentów i zarządzanie nimi, Tworzenie kształtów, Przesuwanie, skalowanie, obracanie, Przekształcanie za pomocą klawiszy, Zaznaczanie wielu obiektów, Grupowanie, Wypełnieni…