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, posta, wydarzenia, kanału itd...).

Facebook

Zapoznaj się wytycznymi na stronie:

• zdjęcie profilowe i zdjęcie w tle

Zdjęcie w tle

1. Wybierz Właściwości dokumentu z menu Plik.
2. Ustaw  Wielkość strony w części Rozmiar niestandardowy na 851 x 315 pikseli oraz inne właściwości np. Tło.
3. 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łowie
4. Wykorzystując poznane techniki zaprojektuj obraz.
5. Zapisz otrzymany obraz w pliku zdjecie_na_okladke.svg a następnie wyeksportuj go w formacie PNG.

 Zdjęcie profilowe

1. Otwórz lub zaimportuj zdjęcie.
2. Wykadruj je do rozmiaru co najmniej 180 x 180 pikseli  (narysuj przezroczysty kwadrat kadru, zaznacz zdjęcie i figurę a następnie wybierz z menu Obiekt > Przytnij > Ustaw).
3. Wykorzystując poznane techniki wykonaj korektę obrazu lub jeśli chronisz swoją prywatność zniekształcenie
4. Zapisz otrzymany obraz a następnie zdjecie_profilowe.svg wyeksportuj zaznaczenie w formacie PNG.

Zdjęcie wydarzenia, posta, grupy

Zalecane wymiary zdjęcia grupy (z obszarami kadrowań)

Zapoznaj się z wytycznymi i stwórz obraz:

• wydarzenia, 
• posta (pn. 500 x 500).
• grupy (wytyczne)

Github

•  Zapoznaj się z wytycznymi i stwórz obraz profilu.

YouTube

Zapoznaj się wytycznymi na stronie:  link 
Wykonaj  Grafikę kanału przekształcając pliki z poprzednich ćwiczeń.

Zadanie egzaminacyjne

https://egzamin-e14.blogspot.com/2019/10/arkusz-e14-05-1906.html

Zadania (opcjonalne)

1. Utwórz inne grafiki identyfikacji wizualnej stosowane w mediach społecznościowych, blogach, stronach i aplikacjach internetowych.
   
2. Zastosuj wykonane grafiki w mediach społecznościowych i/lub utwórz stronę zawierającą zaprojektowane prace.
   

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 były częścią projektu KONKURS MULTIMEDIALNY.  

Zamiast wstępu

Najważniejsze adresy z wykładu

Identyfikacje, ikony i logotypy

W3C, HTML5, SVG, Inkscape

Przykłady

blogspot.com youtube.com facebook.com

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

Zadanie egzaminacyjne

https://egzamin-e14.blogspot.com/2019/10/arkusz-e14-05-1906.html

Zadania (opcjonalne)

1. 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.
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.