Grafika w Internecie

Table of contents

1. Grafika w Internecie
2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
3. Przedmowa
   1. Jak korzystać z tej książki
   2. Układ książki
   3. Konwencje typograficzne
   4. Korzystanie z zawartych w książce przykładów
   5. Podziękowania
4. 1. Dobra zabawa
   1. Co było dobre dla dziadka...
   2. Narysuj mnie!
   3. $$$$$$$$$$$$
      1. Tanie obrazki
      2. Programowanie za grosze
   4. Grafika: wspaniały smak, zero nadwagi
   5. Przestań! To boli!
   6. Galeria Żałosnej Grafiki Internetowej
      1. 10. Strona w budowie
      2. 9. Projektowanie stron WWW a grafika internetowa — ogon macha psem
      3. 8. Chomik w kolorowym kółku
      4. 7. Okienek nigdy dość
      5. 6. Przeglądarkowe Wojny
      6. 5. Nawigacja-niespodzianka
      7. 4. Animowane GIF-y
      8. 3. Ekran powitalny
      9. 2. Tylko nie BLINK!
      10. 1. „Pusty” GIF
   7. Czas na cudowną różnorodność
5. 2. Obrazy
   1. Niezbędne podstawy grafiki rastrowej i modelu RGB
      1. Model RGB przestrzeni barw
      2. Grafika rastrowa — przykład tekstowy
   2. JPEG
      1. Kompresja stratna
      2. JPEG i kolory wyświetlane
      3. Kolory w sieci WWW
   3. GIF — format bezstratny
      1. Animacje GIF i throbbery
      2. Kompresja GIF
   4. PNG
      1. PNG i przezroczystość
      2. Przezroczystość i antyaliasing
   5. Opisywanie, zagnieżdżanie i optymalizacja obrazów
      1. Obrazki na stronie
      2. Optymalizacja GIF
      3. Optymalizacja JPEG
      4. Optymalizacja PNG
   6. Publikacja obrazów w sieci WWW a prawa autorskie. Hotlinking
      1. Kopiowanie — tak, tworzenie odnośników — nie
   7. Przechowywanie obrazów
      1. Umieszczanie obrazów w serwisach zrzeszających społeczności internetowe
      2. Umieszczanie obrazów w sieci — inne rozwiązania
      3. Bez niespodzianek
6. 3. Z aparatu do internetu
   1. Warsztat pracy fotografa
   2. Praca na plikach w formacie RAW
      1. UFRaw
      2. Adobe Camera Raw
   3. Edytowanie zdjęć: praca ze światłem
   4. Dopasuj kolor w grupie, czyli optymalizacja grupowa
      1. Dopasowywanie klasycznych kolorów za pomocą funkcji Dopasuj kolor
      2. Ręczne dopasowywanie kolorów — co można uzyskać, korzystając z korekcji poziomów i korekcji krzywych?
      3. Dopasowywanie kolorów jako nakładanie warstw
   5. Czerń i biel zamiast kolorów
   6. Tworzenie atrakcyjnego materiału ilustracyjnego
      1. Jeśli chcesz mnie wyostrzyć, musisz mnie rozmazać
      2. Rozmycie gaussowskie i „nastrój”
   7. Wycinanki i wyodrębnienia
   8. Przegląd aplikacji służących do edycji obrazów
      1. Adobe Photoshop CS3 PL
      2. Photoshop Elements
         1. Dopasowywanie kolorów
         2. Konwersja zdjęć kolorowych do czarno-białych
         3. Poprawianie nastroju zdjęcia za pomocą Rozmycia gaussowskiego
         4. Wycinanki i usuwanie tła
      3. Paint Shop Pro Photo XI PL
         1. Dopasowywanie kolorów
         2. Konwersja zdjęć kolorowych do czarno-białych
         3. Efekt rozmycia gaussowskiego
         4. Tworzenie zaznaczeń i wycinanie obiektów ze zdjęć
      4. Paint.NET
         1. Dopasowywanie kolorów
         2. Konwersja zdjęć kolorowych do czarno-białych
         3. Efekt rozmycia gaussowskiego
         4. Tworzenie zaznaczeń i wycinanie obiektów ze zdjęć
      5. GIMP
         1. Dopasowywanie kolorów
         2. Konwersja zdjęć kolorowych do czarno-białych
         3. Efekt rozmycia gaussowskiego
         4. Zaznaczanie i wycinanie fragmentów obrazu
   9. Internetowe edytory obrazów: Splashup i Picnik
      1. Splashup
      2. Edytowanie zdjęć aplikacją Picnik: mniej niekiedy oznacza więcej
   10. Organizacja i obróbka zbiorów zdjęć
       1. Aperture firmy Apple
       2. Lightroom firmy Adobe
   11. Obróbka zdjęć: jeszcze raz o procesie przenoszenia fotografii z aparatu do internetu
7. 4. Internet w obrazkach
   1. Sztuka tworzenia miniatur o odpowiedniej wielkości
      1. Zmienianie wymiarów obrazu, ponowne próbkowanie, skalowanie
      2. iDopasowywanie
      3. Urządzenia przenośne a rozmiary obrazów
      4. Seam Carving
   2. Sztuka kreatywnego tworzenia miniatur
      1. Jak dodać cień
      2. Miniatury powycinane w różne kształty
   3. Powiększające się miniatury
   4. Umieszczanie zdjęć na stronach: okraszanie tekstu obrazami
      1. Podstawy umieszczania grafik na stronach WWW
      2. Umiejscawianie obrazów w rzędach
   5. Sztuka układania zdjęć na stronach
      1. Wzornik w kształcie drabinki
      2. Podarte zdjęcia
      3. Pęknięty obraz
      4. Nakładanie efektów na wiele zdjęć
   6. Galerie i pokazy slajdów wygenerowane programowo
      1. Tworzenie prezentacji obrazów za pomocą edytorów i menedżerów obrazów
      2. Wyspecjalizowane aplikacje przeznaczone do tworzenia galerii obrazów
   7. Aplikacje do tworzenia galerii, działające po stronie serwera
   8. Odrobina kodu
8. 5. Grafika użytkowa
   1. Skrzynka z narzędziami do obróbki grafiki: kształty, warstwy, gradienty i rozmycie
      1. Warstwy
      2. Rozmycie gaussowskie
      3. Prostokąty o zaokrąglonych rogach i inne kształty
      4. Gradient
      5. Style warstw
      6. Maski
      7. Przekształcenia
   2. Lśniące przyciski: żelowe, mokre albo szklane
      1. Tworzenie trójwymiarowego przycisku w aplikacji GIMP: błyszczący przycisk
      2. Tworzenie trójwymiarowego przycisku w aplikacji GIMP, podejście drugie: przycisk wklęsły
      3. Tworzenie trójwymiarowego przycisku w aplikacji GIMP, podejście trzecie: mokry przycisk
   3. Nie tylko przyciski: plakietki i ikony
      1. Nieco bardziej skomplikowany błyszczący kształt
      2. Lekko połyskliwa zamiast błyszczącej
   4. Refleksje na temat refleksów i kilka dodatkowych słów na temat cieni
      1. Odbicie jako obraz widziany w lustrze
      2. Odbicie jako cień rzucany przez obiekty
      3. Odbicie, które naprawdę jest odbiciem
      4. Odbicia zrzutów ekranu i obrazków
   5. Analiza istniejących projektów
   6. W jednej chwili — zrzuty ekranu
9. 6. Wektorowo — początki i języki znaczników
   1. WebCGM
   2. Formaty trójwymiarowe
   3. Język VML
      1. Podstawy VML
      2. Krótko o zaawansowanych możliwościach VML
   4. Witaj, SVG!
      1. Pierwsza aplikacja
      2. Specyfikacje SVG — Full, Tiny i Basic
      3. Obsługa w przeglądarkach
      4. Kształty SVG
      5. Identyfikatory URI oraz ponowne wykorzystanie dzięki znacznikom defs i use
      6. Układ współrzędnych, grupowanie obiektów i ich obracanie
      7. Style, jednostki i kolory
10. 7. Obóz szkoleniowy neofitów SVG
    1. Różne specyfikacje SVG — Full, Basic i Tiny
    2. Obsługa standardu w przeglądarkach — nieprzystępność czy integracja?
       1. Umieszczanie grafiki SVG na stronie WWW za pomocą znacznika object
       2. Osadzony kod SVG (Inline SVG)
    3. Struktura przestrzeni SVG
    4. Elementy technologii SVG
       1. Prostokąty, rysowanie, atrybuty
       2. Linie, wzory pędzli i opisy kodu
       3. Tekst
       4. Okręgi, elipsy i wypełnienia gradientowe
       5. Łamane i wielokąty
       6. Obraz
       7. Grupy i SVG w roli kontenerów
    5. Ścieżki, wzory i markery
       1. Podstawowe polecenia ścieżek
       2. Ścieżka łuku elipsy
       3. Krzywe Béziera drugiego stopnia
       4. Krzywe Béziera trzeciego stopnia
       5. Ścieżki, markery i groty strzałek
       6. Ścieżki w roli wzorów
    6. Ponowne spotkanie z oknem roboczym i atrybutem viewBox
       1. Atrybut viewBox
       2. Atrybut preserveAspectRatio
    7. Transformacje
    8. Narzędzia technologii SVG
       1. Inkscape
       2. Sketsa
       3. Konwertery SVG i inne narzędzia
    9. Tajniki statycznej grafiki SVG
       1. Szukanie plików SVG i dostosowywanie ich do swoich potrzeb
       2. Dostosowywanie obrazu
       3. Osadzanie nut w kodzie
       4. Aspekty osadzania SVG na stronach WWW
11. 8. CSS — wyższy poziom wtajemniczenia
    1. Magia selektorów
       1. Użycie selektora uniwersalnego do globalnego usuwania światła strony
       2. Tworzenie inicjałów za pomocą pseudoelementów
       3. Szczegółowość i wielokrotnie złożone nazwy klas
    2. Wskazówki i porady dotyczące CSS
       1. Panele boczne tej samej długości
    3. Plastyczny znacznik div
       1. Listy poziome
       2. Sprytne ustalanie jednostek czcionki
       3. Kilka arkuszy stylów i przełączanie się między nimi
       4. Programowanie pliku CSS
    4. Narzędzia i programy do obsługi plików CSS
       1. Podglądanie zawartości pliku CSS w przeglądarce Firefox z dodatkiem Web Developer Toolkit
       2. Edytory CSS
       3. Zgodność kocu CSS z obowiązującą specyfikacją
       4. CSS — zabawki i narzędzia
12. 9. Projektowanie stron WWW dla laików
    1. Zasady projektowania stron WWW
       1. Jasna nawigacja — strona urzędu ochrony środowiska w Missouri
       2. Czytelność strony — strona CSS Zen Garden
       3. Przejrzysty układ strony
       4. Strona o ściśle określonym przeznaczeniu — I Love Typography
       5. Minimalizowanie chaosu — użyteczność, dostępność, zgodność ze standardami i jasny przekaz
    2. Strony WWW są jak ogry, a ogry mają warstwy
       1. Cień Wielkiej Góry
       2. Mnogie tła, mnogie warstwy
    3. Projektowanie elastyczne
    4. Kolory — jak sprawić, by strona była wesoła, jak sprawić, by była smutna
       1. Kolory w Sieci. Straszne? A może nie?
       2. Kolory a dostępność
       3. Kolory, schematy, tematy i nastroje
    5. Typografia na stronie WWW
       1. Wybieranie czcionki
       2. Zwiększanie czytelności — kolory kontrastowe, długość wiersza i jego wysokość
    6. Narzędzia projektanta
       1. Edytory
       2. Narzędzia do tworzenia materiałów WWW
       3. Inne narzędzia i usługi
    7. Dodatkowa lektura
13. 10. Grafika dynamiczna
    1. Szybkie wprowadzenie do modelu obiektów dokumentu DOM
       1. Wejście DOM
       2. Praca z ustawieniami CSS
    2. Wyróżnianie kolorem
    3. Zmienianie klasy i przezroczystości
    4. Programowanie obrazów
    5. Akordeon — kompresja przestrzeni
14. 11. Tworzenie na kanwie
    1. Obsługa obiektu canvas i Microsoft Silverlight w różnych przeglądarkach
    2. Podstawy pracy z obiektem canvas
       1. Rysowanie czas zacząć
       2. Podstawowe kształty
       3. Ścieżki
       4. Krzywe
    3. Zachowywanie stanu rzeczy
    4. Warstwy i przycinanie ścieżek
       1. Przycinanie ścieżek
       2. Metoda globalCompositeOperation i kilka słów na temat łączenia kodu HTML i tekstu
    5. Możliwości obiektu canvas
       1. Gradienty
       2. Transformacje
       3. Obrazy
15. 12. Dynamiczne zastosowania znacznika canvas i języka SVG
    1. Osadzanie animacji w kodzie
       1. Znacznik animateColor
       2. Znacznik animateMotion
       3. Znacznik animateTransform
       4. Znaczniki set i animate
    2. Obsługa SVG za pomocą skryptu
    3. Skrypty osadzone
       1. Skrypty zewnętrzne
    4. Animowany zegar — „Witaj, świecie!” animowanego i interaktywnego kodu SVG
       1. Kropki, kropeczki
       2. Animacje SVG
    5. Oprogramowanie kanwy — powiększenie
       1. Przechwytywanie zdarzeń w znaczniku canvas
       2. Tworzenie zaznaczenia i animacji poklatkowej
       3. Końcówka — powiększanie
16. 13. Magia obrazów — różne narzędzia obróbki grafiki
    1. Prezentowanie zdjęć — pokaz slajdów w trzech krokach
    2. Obróbka obrazów za pomocą PHP/GD
       1. Dodawanie obramowania
       2. Małe oszustwo przy dodawaniu cienia
       3. Przechylenie!
       4. Mashup — zdjęcia, PHP i SVG
    3. Kto potrzebuje interfejsu? — Magia ImageMagick
       1. Wiersz poleceń pakietu ImageMagick
       2. Polecenia pakietu ImageMagick
       3. Komendy jednowierszowe
       4. Komendy wielowierszowe
    4. Programowanie z ImageMagick i IMagick
17. 14. Nieco geografii
    1. Korzystanie z map w serwisie Google
       1. Mapy Google w praktyce
       2. Zabawa ze znacznikami
       3. Trasy na mapach serwisu Mapy Google
    2. Mapy udostępniane przez serwis Yahoo! Maps
       1. Praca z Yahoo!
       2. Co wskazuje X
       3. Trasy na mapach udostępnianych przez serwis Yahoo! Maps
    3. Geografia w internecie
       1. Znajdowanie długości i szerokości geograficznej różnych obiektów
       2. Fotograficzny pamiętnik wyprawy naniesiony na mapę Yahoo!
       3. Zaznaczanie na mapie wydarzeń
18. 15. Cud, miód i orzeszki — łączenie danych z grafiką
    1. Wykresy — w dowolny sposób, byle nie statycznie
       1. Wykres liniowy w postaci osadzonego kodu SVG
       2. Osadzanie kodu SVG w sposób przyjazny dla przeglądarki IE oraz stron HTML
       3. Alternatywa dla canvas rodem z Google
       4. A tam, lepiej dać obrazek. Będzie trwalszy
       5. Wykresy słupkowe, kołowe i diagramy
    2. Katalogowanie zdjęć
    3. Wykończenie za pomocą różowej poświaty
    4. Ostatnie spojrzenie na dane i możliwości ich wizualizacji
    5. Identyfikator URI data:
       1. Sparklines
    6. Na końcu tęczy
19. A. O autorce
20. Indeks
21. Kolofon
22. SPECIAL OFFER: Upgrade this ebook with O’Reilly
23. Copyright