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 były 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
- Utwórz folder (np. ikony) przeznaczony na obrazy ikon strony internetowej
- Uruchom program Inkscape i z menu Plik wybierz Właściwości dokumentu.
- 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.
- Z menu Widok wybierz: Wyświetl siatkę, Podgląd ikon... i listy Powiększenie wybierz Strona.
- 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.
- 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).
- 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.
- Zamknij program Inkscape.
- Skopiuj ikonę o rozmiarze 16 lub 32 do folderu z plikiem index.html lub innej strony internetowej i zmień jej nazwę na favicon.png.
- 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. - Jeśli posiadasz blog Bloggera zmień domyślną ikonę (dokonujemy tego w menu Układ).
- 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>.
- 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
Zadanie egzaminacyjne
https://egzamin-e14.blogspot.com/2019/10/arkusz-e14-05-1906.htmlZadania (opcjonalne)
- Dostosuj swoją ikonę do zastosowania w usługach Google. Obowiązuje
ta sama ikona, skalowana z pliku o rozmiarze 250px na 250px.
Uwaga: Przy eksporcie do formatu PNG pamiętaj o zastosowaniu tła. - 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ą.
- 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.
