Miniaturkę możemy spotkać prawie wszędzie, gdyż dość dobrze nadaje się do prezentowania materiałów graficznych w sieci. Jej podstawową zaletą jest szybkość ładowania, to nie ulega wątpliwości. Dodatkowo, dzięki swym niewielkim rozmiarom użytkownik jest w stanie objąć wzrokiem dość pokaźną grupę miniaturek.
Jestem pewien także tego, że nieraz udało Ci się zaobserwować największy mankament miniaturek – czasami w żaden sposób nie można odcyfrować, co się dzieje na obrazku. Nadal nie wiesz, czy warto go obejrzeć… W takim razie po co miniaturka – równie dobrze mógłby ją zastąpić tekstowy odnośnik, prawda?
Skoro już uświadomiliśmy sobie problem, wyznaczmy teraz cel, do którego będziemy dążyć.
Potrzebujemy obiektu zastępującego miniaturkę, który będzie wyróżniał daną grafikę i starał się zachęcić do obejrzenia oryginału, przy jednoczesnym zachowaniu czytelności. Jeśli wziąć pod uwagę całość obrazka – jest to niemożliwe, ale kto powiedział, że trzeba nam całości? Nie lepiej wyciąć interesujący fragment?
Kadrowanie wyjściem ultymatywnym?
W przeciwieństwie do tworzenia miniaturek, kadrowanie daje zazwyczaj niezmiernie lepsze efekty wizualne. Z drugiej strony, póki nie nauczymy naszych komputerów rozpoznawania piękna, to będziemy sami musieli włożyć odrobinę naszej pracy (oraz inwencji) w wycinanki.
Pamiętaj, że ukazanie części grafiki wzbudza w oglądających ciekawość, dzięki czemu nie będą się nudzić na Twojej stronie i wysoce prawdopodobne, że jeszcze kiedyś wrócą. Istnieje pewna szansa, że dobrze uchwycony fragment będzie nie tylko intrygujący dla innych, ale stanie się nawet źródłem inspiracji dla innych.
Z powyższego akapitu płynie dość ważne pytanie – co wybrać? Z poczynionych przeze mnie doświadczeń wynikły dwa sposoby. Możemy wybrać łatwo zapadający w pamięć szczegół. Ważne przy tym, aby był reprezentatywny tylko dla jednego obrazka. Jeśli naprawdę utkwi w czyjejś pamięci, to właśnie odnieśliśmy sukces.
Inną metodą jest wybieranie najbardziej reprezentatywnej części obrazka. Problem w tym, że owszem, siła przebicia samego kadru będzie większa niż w poprzednim wypadku, jednak z drugiej strony, zabraknie nam niespodzianek w oryginale. Po pewnym czasie oglądający będzie mógł się przyzwyczaić do tego i przestanie zaglądać do oryginałów.
Może się okazać, że pewne fragmenty są zbyt duże, aby je skadrować. Wtedy należy się zastanowić, czy można bezpieczenie uciąć część tego fragmentu, czy też da się go zeskalować do pożądanych rozmiarów.
Narzędzia i wykonanie
Do tej pracy doskonale nadaje się zarówno GIMP, jak i Photoshop. Okazuje się, że moje sugestie to kombinowanie jak koń pod górę. Czujni czytelnicy (dzięki!) wskazali programy IrfanView, Picasę i JPEGCrops jako znacznie szybsze rozwiązanie przy większej ilości zdjęć. Nie testowałem żadnego z tych trzech programów, ale, jak widać, wybór jest znacznie większy.
Nie staraj się jakoś niezwykle precyzyjnie podchodzić do samego wyboru kadru – ja zazwyczaj przez chwilę zastanawiam się, jaki obiekt na obrazku rzuca się w oczy, następnie kilkakrotnie zaznaczam obszar 100x100px dookoła niego i wybieram opcję przycięcia obrazu, który zapisuję następnie jako JPEG z jakością 85 (domyślną). Dzięki temu moje wycinanki mają średnie rozmiary rzędu 3KB. Nawet przyjmując połączenie telefoniczne, dziesięć miniaturek ładuje się w jakieś 5-7s, co nie jest złym wynikiem.
Dość ważnym elementem jest wybranie stałego rozmiaru naszego kadru – dzięki temu wszystkie obrazki będą ładnie poukładane w rzędach i kolumnach na naszej stronie, niezależnie od tego, w jaki sposób zapiszemy je w kodzie HTML.
W razie, gdy obiekt, który chcesz zaznaczyć nie mieści się w domyślnych rozmiarach, można zeskalować obraz do 50% (co nadal daje w miarę dobre efekty wizualne), a następnie wykadrować i obciąć niepotrzebne części.
HTML
Gdy już zrobisz swoje miniatury i udostępnisz sieci, możesz wstawić je do swojego dokumentu. Jak? Rozwiązań jest naprawdę wiele. Można skorzystać z najprostszego kontenera <div />
, lub bardziej skomplikowanej listy nieuporządkowanej.
Na tym blogu używam jeszcze innego rozwiązania. Korzystam z listy definicji <dl />
, gdzie każdy <dt />
odpowiada danemu obrazkowi, a pod taką grupą wstawiam wspólny <dd />
, czyli opis powyższych obiektów. Wygląda to tak:
<dl>
<dt><img ... /></dt>
<dt><img ... /></dt>
[...]
<dd>Obrazki przedstawiają x, y oraz z.</dd>
</dl>
W połączeniu z lekką stylizacją w CSS, może to wyglądać tak, jak na moim blogu.
Czy w takim razie odrobinka pracy popłaca? Odpowiedź pozostawiam Tobie.
pomysł ciekawy 🙂
pewien drobiazg: tylko po co uruchamiać do wycięcia miniaturki photoshopa czy nawet gimpa?
wystarczy w zupełności IrfanView czy Picassa
daromar
One mi przyszły jako pierwsze na myśl. A że operowanie w nich również jest bardzo wygodne, to i podałem tutaj. 🙂
no tak przyzwyczajenia 🙂
ja używam właśnie picassy i Irfana no i ciut Corela ale Photopainta jakoś nie lubię a draw w sumie nie do tego
Mnie jakoś nie przypadają do gustu kadrowane miniaturki. Rzeczywiście, zwykłe zmniejszenie obrazka czasem czyni go nieczytelnym, ale wykadrowanie na detal na ogół sprawia, że w ogóle nie mam pojęcia, co ujrzę po kliknięciu. W czysto artystycznych galeriach taki element zagadkowości bywa ciekawy, ale gdyby ludzie kadrowali miniaturki np. na Flickrze, toby mnie na pewno irytowało.
Wszystko ładnie pięknie, tylko jak się przygotowuje galerię z więcej niż kilkunastoma zdjęciami to można się w PS/Gimpie zaklikać na śmierć 😉
O wiele szybciej można to zrobić korzystając freeware’owych JPEGCrops’a i IrfanView: Kadrowanie/Wycinanie w tym pierwszym, skalowanie w tym drugim, oczywiście wszystko masowo, bez zbędnej zabawy.
Miniaturki nawet do wielkich galerii można zrobić dosłownie w kilka minut.
Polecam, sam tak robię 🙂
vmario
Jeśli fotografia przedstawia jeden obiekt, to jest on w miarę widzialny i dobrze wygląda skalowany.
Ale oglądając te małe ikonki, na przykład na tej stronie to zdarza się, że nie jestem w stanie odgadnąć, co się dzieje na zdjęciu.
Jest ok, dopóki obrazek nie schodzi poza rozmiary około 150×200px (chociaż większe są lepsze i chwalę bardzo wyszukiwarkę na Flickrze), przy mniejszych samo skalowanie jest mordercze dla oka.
Najwięcej na skalowaniu tracą screenshoty i wszystkie te obrazki, na których znajduje się tekst dodany przez twórcę lub inne małe i ważne szczegóły. I masz rację, Flickr, jako typowo zdjęciowy serwis, ma tutaj prostszą drogę. 🙂
satanowski
Znakomicie, dziękuję za uzupełnienie moich informacji. Sądziłem, że ilość pracy w tych programach będzie porównywalna. 🙂
do wszystkich
Dopisałem stosowną adnotację do wpisu, uwzględniając podane przez Was programy.
A proszę bardzo 🙂 Cieszę się, że mogłem pomóc 🙂
Jeszcze dodam, że jpegCrops ma tę fajną zaletę (która akurat w przypadku miniaturek nie ma większego znaczenia), że operacja kadrowania wykonana w tym programie jest przeprowadzana bezstratnie.
czasami wkurza mnie ten textile 🙂 wykreślił mi najważniejsze zdanie,
panie Michale, pan przeedytuje mój poprzedni komentarz i usunie ten 🙂
satanowski
Proszę bardzo,zmodyfikowałem poprzedni komentarz. A tego nie będę usuwał, nie mam takich nawyków. 😉
😀
Michał Moroz: a jeszcze nie używałeś IrfanView czy Picassy? to błąd 🙂 i to wielki
te programy mają ciut inne przeznaczenie i sie calkiem niezle uzupelniaja
Irfan jest do przeglądania zdjęć i drobnych korekt w stylu zapisz w innym formacie, przytnij, zmien rozmiar no i do zmian duzych ilosci zdjec wg jakiegos schematu
Picassa jest bardzo wygodna znowu przy zarządzaniu zdjęciami np. zrobionymi aparatem fotograficznym, ma moduł importu zdjec z aparatu i kilka funkcji przydatnych przy zdjęciach typu wyprostuj wykadruj usuń efekt czerwonych oczu nasycenie gamma jasnosc i podobne
daromar
Z trzech, które wpisałem do posta używałem tylko IrfanView w trybie przeglądarki. Ale skoro twierdzisz, że Irfan i Picasa się całkiem nieźle uzupełniają, to przyjrzę im się, kiedy będzie mi się nieco nudziło. I naprawię mój błąd. 😉
te dwa programy mają ciut inne podejscie
Irfan jest dla tych bardziej świadomych a Picassa trochę drażni taką idiotoodpornością w stylu program wie lepiej co dla ciebie dobre 🙂
Ciekawe, czy by się dało cały proces zautomatyzować. Wpierw by użytkownik wybierał co na zdjęciu ma być obiektem centralnym, a potem przekazać to do converta z pakietu ImageMagick i po wszystkim. Zapewne takie coś do szybkiego wybierania można by napisać w perlu i jakiejś biblioteczce do tego w GTK.
to będzie w temacie wpisu 🙂
na gazeta.pl robią coś w tym stylu, przycinają na wysokość, tylko czasami im nieciekawie to wychodzi jak na tej stronie o Kubicy