Miniaturki w galerii


Generowanie ładnych miniaturek do galerii z użyciem html i css

  1. Wybieramy pierwszy obrazek który ma posłużyć jako przykład do stworzenia ogólnego wzrozu
    Na przykład jedno z moich zdjęć urlopowych
  2. Przy urzyciu opcji Image->Image size (Alt + Ctrl + I) oraz narzędzia przycinamy do rozmiaru jaki mają mieć mniej nasze miniaturki czyli np 150x100, gotowy obrazek zapisujemy jako np min.jpg
  3. Tworzymy nową warstwe o tle takim jaka ma nasza galeria - my tutaj dajmy np czarny ;) a następnie na nią maskę
  4. Przy pomocy np pędzla rysujemy na masce kształty które mają stanowić ramkę miniaturki
  5. Gdy skończymy ukrywamy warstwę z obrazkiem

    Tak by zamiast niego pojawiło się kratkowane tło przeźroczystości (to ważne by właśnie ono a nie inne tło się pojawiło
  6. Zadanie związane z grafiką zakończone ;) Zostaje nam tylko zapisać.
    Wybieramy "Save for web..." (Alt + Shift + Crtl + S)
  7. Zapisujemy w formacie PNG24 oraz z przeźroczystością

    jako na przykład tlo.png
  8. I mamy już ramkę a także miniaturkę.
Przechodzimy teraz do zabawy z html
  1. Tworzymy DIVa w którym zamknie się cała nasza galeria. Dajemy mu ID na przykład gallery
    <div id="gallery"></div>
  2. Do tego diva wklejamy teraz linki do obrazka, jako miniaturkę używamy wygenerowanego przez nas tła
    <a href="img.jpg"><img src="tlo.png"></a>
  3. A następnie do tagu IMG dodajemy styl w którym miniaturka konkretnego obrazka jest użyta jako background
    <a href="img.jpg"><img src="tlo.png" style="background-image: url(min.jpg)"></a>
  4. Gotowy html wygląda tak: DEMO
  5. Zmiana wyglądu ramki teraz sprowadza się do zmiany obrazka. Gdy nasza galeria jest rozbudowana można w dowolnym programie do edycji tekstu użyć narzędzia (znajdź/zamień) i podmienić nazwę pliku lub też nadpisać obrazek nowym bezpośrednio na naszym serwerze :) DEMO 2