jak zapisac grafike

Elementarz

Formaty plików graficznych

Projektując lub tworząc grafikę, prędzej czy później dojdziemy do momentu, kiedy trzeba będzie zapisać nasze dzieło i wysłać je gdzieś dalej. Tymczasem programy umożliwiają zapisanie grafiki w przeróżnych formatach i nie wiadomo do końca, który będzie odpowiedni. Dzisiaj szybki przegląd najważniejszych formatów graficznych i ich skrócona charakterystyka.

Grafika wektorowa czy rastrowa?

Dobrze zacząć od podstaw, czyli czym różni się grafika wektorowa od rastrowej, bo to będzie mieć duży związek z wyborem formatu? Bardzo często słyszy się o tym, że na przykład logo powinno być wektorowe. Po co? Już pokazuję.

czym rozni sie wektor od rastrow

Bez zbędnych technikaliów. Grafika wektorowa jest w pełni skalowalna bez utraty jakości. Sposób jej tworzenia i zapisu, po prostu sprawia, że niezależnie od formatu będzie prezentować się tak, jak w oryginale. Grafika rastrowa natomiast powstaje w konkretnej rozdzielczości i poprzez zmiany jej formatu będziemy zauważać stratę jakości. I o ile zmniejszając grafikę rastrową jeszcze jako tako będzie wyglądać (choć wiele zależy od tego, co na niej jest), tak powiększanie będzie wyglądać fatalnie.

Plik wektorowy ponadto, pozwala na dużo prostszą edycję, zarówno kształtu, koloru i proporcji pojedynczych elementów. W przypadku grafiki rastrowej, taką możliwość mamy wyłącznie w przypadku odpowiednio przygotowanych formatów otwartych (tzn. plików źródłowych programów graficznych np. Photoshop).

czym sie rozni wektor od bitmay
Tak wygląda edycja kształtu w formacie wektorowym. Pracuje się na tak zwanych krzywych.

To dlaczego wszystko nie jest wektorowe?

Przede wszystkim przez standardy. Spośród powszechnych internetowych formatów graficznych, praktycznie wszystkie są formatami grafiki rastrowej. Wyjątek stanowi .svg, który powoli zyskuje na popularności.

W dodatku cała automatyzacja obrazu opiera się na konwersji tego co widzimy na bitmapy – aparaty fotograficzne, skanery. Grafika wektorowa opiera się na obiektach – krzywych, punktach, figurach geometrycznych. Można za ich pomocą stworzyć bardzo skomplikowane, wręcz malarskie efekty, jednak droga do ich stworzenia jest czasochłonna.

Dlatego przyjęło się, że grafiki wektorowej używa się głównie do tworzenia znaków, logo, ikon, krojów pism, rysunków technicznych, niektórych ilustracji i elementów graficznych często wykorzystywanych w druku. Natomiast w bardziej artystycznych wypocinach, fotografii oraz grafikach zapisywanych na potrzeby Internetu (grafiki do wpisów, stron, na Facebooka), prym wiedzie grafika rastrowa.

Płaski czy otwarty?

W tekście kilka razy pojawią się określenia plik płaski albo plik otwarty. Jak wspomniałam, pliki otwarte to te, które są formatami edycyjnymi (.psd .ai .cdr czy odpowiednio zapisany .pdf). To taki plik, który można otworzyć tylko w programie graficznym i coś tam sobie pozmieniać. Plik płaski to natomiast każdy format, który nie pozwala na edycję poszczególnych elementów, bo został w czasie eksportu z programu sprasowany ze wszystkimi elementami (.jpg .png .gif).

uniwersalne formaty graficzne

Formaty plików graficznych

.jpg .jpeg .jpe / Joint Photographic Experts Group – najpopularniejszy format plików grafiki rastrowej, który zna właściwie każdy z nas. W tym formacie często zapisywane są zdjęcia i wiele grafik, które oglądacie w Internecie. Zapisując plik w formacie .jpg zawsze stracimy odrobinę na jakości – nie zawsze jest to jednak zauważalne. Mimo to, waga plików .jpg potrafi być dość duża, dlatego warto używać dodatkowych kompresorów jeśli używamy na stronie wielu zdjęć o dużym rozmiarze (np. TinyJPG).

Plik tego formatu najlepiej sprawdza się w cyfrowej wersji, ale można go również wykorzystywać do druku.

.png / Portable Network Graphics – format .png, w odróżnieniu od .jpg pozwala na bezstratny zapis obrazu. A w dodatku pozwala na zapisywanie plików z przezroczystym tłem. Ta cecha sprawia, że jest szalenie wygodnym formatem do stosowania w stronach internetowych. I zdecydowanie pokonuje w tej kwestii format .gif.

Jeżeli potrzebujecie więc grafiki, którą wklejacie np. na zdjęcia – znak wodny, logo, emotikony, to warto mieć ją właśnie pod ręką w formacie .png.

via GIPHY

.gif / Graphic Interchange Format – to format, który świetnie sprawdza się w Internecie. Nie nadaje się jednak za bardzo do zapisywania zdjęć i grafik, gdzie występuje dużo płynnych przejść kolorów (gradientów). Pliki w tym formacie można za to zapisywać z przezroczystym tłem oraz… jako animacje! Każdy z Was spotkał się już zapewne z animowanymi obrazkami w sieci – to w większości przypadków właśnie gify.

Gify sprawdzą się więc świetnie do obiektów takich jak ikony, jednokolorowe znaki, a także są świetnym rozwiązaniem do budowania newsletterów, w których trzeba umieścić drobne elementy graficzne.

.svg / Scalable Vector Graphics – to format wykorzystywany coraz częściej na stronach internetowych, umożliwiający zapis plików wektorowych. To świetny sposób na zapisywanie znaków i ikon, pozwalający w pełni kontrolować poszczególne elementy za pomocą kodu. Skalowalność przypisana wektorom daje szerokie pole do popisu w przypadku stron RWD (zmieniających swój wygląd w zależności od wielkości okna przeglądarki). Są też dobrym materiałem do animacji.

.tiff / Tagged Image File – to standardowy format wykorzystywany przy przygotowywaniu plików do druku. Nie dość, że możemy wysłać taki plik do drukarni, to jeszcze zapisać go, z zapamiętaniem warstw. Więc w zależności od tego jak go zapiszemy, będzie to plik spłaszczony lub otwarty. Jeżeli będziecie drukować coś w dużych formatach (billboardy, duże płachty reklamowe), to prawdopodobnie będziecie przygotowywać je właśnie w .tiffie.

.pdf / Portable Document Format – może nie kojarzy się wielu osobom jako format graficzny – prędzej spotykamy dokumenty, e-booki i instrukcje zapisywane w .pdfie. Jednak .pdf jest jednym z najbardziej uniwersalnych formatów, z którymi pracuje grafik. Oczywiście nie każdy plik .pdf jest taki sam, wiele bowiem zależy od tego jak zapiszemy naszą grafikę. Pliki .pdf świetnie sprawdzają się w druku, a programy graficzne (Photoshop, Illustrator, InDesign) oferują szereg gotowych ustawień związanych z rozmiarem, kompresją i wagą plików.

W plikach .pdf można również zapamiętać dane wektorowe, więc odpowiednio zapisane, zastąpią takie formaty jak .eps lub .ai. Ten format sprawdzi się również świetnie w Internecie. Pozwala na dodanie elementów interaktywnych, takich jak linki do stron lub pola formularzy, co czyni go wygodnym formatem do tworzenia publikacji czy kursów.

Należy jednak pamiętać, że to kwestia sposobu zapisania pliku.

.eps / Encapsulated PostScript File – to jeden z popularnych formatów do zapisu danych wektorowych. Większość programów do grafiki wektorowej nie powinna mieć problemu z zapisem, czy otwarciem takiego pliku.

jak wygląda plik psd
A to przykładowy plik .psd otwarty w Photoshopie. Jak widzicie po prawej stronie, dostępne są osobne warstwy z poszczególnymi elementami grafiki

.psd / Photoshop Document – to plik otwarty programu Adobe Photoshop. Pliki .psd mogą zawierać poszczególne elementy graficzne (teksty, rysunki, tła) na oddzielnych warstwach, co ułatwia ich edycję oraz umożliwia na przykład programistom, cięcie takiej grafiki do stron www. To dużo cięższe pliki (ze względu na możliwość edycji), jednak zupełnie nieskompresowane (poszczególne warstwy nie tracą jakości). Obok plików .psd są również pliki .psb / Photoshop Big – to również format Photoshopa jednak zapisywany w przypadku obrazów powyżej 300 000 px.

.ai / Adobe Illustrator – to plik otwarty programu Adobe Illustrator. Z założenia zawiera w sobie pliki wektorowe, niemniej jednak nie jest to warunkiem (można do Illustratora wklejać również bitmapy). Taki plik udostępniam jako jeden z formatów wektorowych, kiedy przekazuję projekty logo klientowi.

Jeżeli tworzycie coś w Illustratorze, ale nie jesteście pewni, czy osoba, która potrzebuje wektorowego pliku, również ma ten sam program, możecie zapisać swój projekt w formatach .eps lub .pdf z zachowaniem warstw oraz właściwości obiektów wektorowych.

.cdr / Corel Draw – już zdecydowanie rzadziej spotykany, format pliku programu Corel Draw. To corelowski odpowiednik Illustratora, więc zapisywane są w nim zazwyczaj elementy identyfikacji wizualnej lub pliki do druku. Ze względu na coraz mniejszą popularność programu, zaleca się zapisywanie grafik również w bardziej uniwersalnych formatach (jak wspomniany .eps czy .pdf).

Od 9 lat zajmuję się projektowaniem (na co dzień IA) i nie wyobrażam sobie żeby zajmować się czymś innym (choć projektowanie w moim wypadku to bardzo, bardzo szerokie pojęcie). W wolniejszej chwili jem, gram w gry i czytam nie tylko sci-fi i komiksy ;)

  • Przejrzyście wszystko opisane 🙂

    • Dzięki 🙂 Staram się zawsze opisywać wszystko na tyle jasno, by nie docierać wyłącznie do osób siedzących już mocno w branży 🙂

  • Świetnie napisany post 🙂 dzięki za informacje 😉

    • Cieszę się, dzięki :)!

  • Zebza! Dziękuję! <3

    • Nie ma za co ;)!

  • Dobre,fajne zestawienie. Bardzo przydatne dla wielu blogerów, którzy nie mają za dużo do czynienia z grafiką 🙂