Cięcie grafiki na potrzeby strony www


Cięcie za pomocą plasterków

Ten sposób wycinania wykorzystuje dedykowaną temu funkcję programu – plasterki. Pozwala ona na zaznaczenie danej części grafiki i wskazanie sposobu jej zapisu. Aby z niej skorzystać, należy kliknąć na ikonkę  Cięcie na plasterki (C).

Ciecie-na-plasterki-Photoshop

Następnie, za pomocą kursora trzeba narysować prostokąt, który oznaczy obszar do wycięcia. Domyślnie, po narysowaniu prostokąta przypisywane są do niego pewne informacje. Jedną z nich jest nazwa zapisywanej grafiki, która tworzona jest na podstawie nazwy pliku oraz numeru warstwy – na przykład „stronawww_01” dla nazwy pliku „stronawww.png”. Informacje te możemy zmienić klikając dwukrotnie na warstwę.

Ciecie-na-plasterki-Photoshop-Opcje-plasterka

Dotrzemy wtedy do szczegółowych informacji o plasterku. Oprócz zmiany nazwy możemy zmienić także wymiary, położenie oraz informacje przydatne do generowania HTML (nie będziemy tego robić). Format oraz jakość zapisywanej grafiki będziemy ustalać przy zapisie.

Oprócz plasterka użytkownika, po narysowaniu prostokąta, zostaną stworzone dodatkowe plasterki – pomiędzy nowym, a tymi już istniejącymi, albo pomiędzy nowym, a obszarem roboczym. Na pomarańczowo oznaczyłam stworzoną przeze mnie warstwę, a na niebiesko i zielono, te stworzone automatycznie.

Ciecie-na-plasterki-Photoshop-Plasterki-automatyczne

Jeśli tniemy dość prostą stronę, plasterki można stworzyć także na podstawie linii pomocniczych. Przycisk Plasterki z linii pomocnicznych jest widoczny po wybraniu narzędzia cięcia na plasterki.

Ciecie-na-plasterki-Plasterki-z-linii-pomocniczych

Jeśli jesteśmy już gotowi do zapisania plików, należy kliknąć Plik→Zapisz dla Internetu… (Alt+Shift+Ctrl+S), otwiera się wtedy okno zapisu.

Zapisz-dla-internetu-i-urzadzen-plasterki

Jeśli chcemy zmienić lub sprawdzić format oraz jakość zapisywanego pliku, powinniśmy zaznaczyć interesującą nas warstwę i zwrócić uwagę na jej ustawienia w panelu bocznym. Można także zmieniać je masowo, zaznaczając kilka różnych plasterków z wciśniętym klawiszem SHIFT. Podczas zapisywania mamy dostępnych kilka opcji:

  • Wszystkie plasterki – zapisze wszystkie stworzone plasterki – te, które stworzył użytkownik oraz te, które powstały automatycznie pomiędzy nimi;
  • Wszystkie plasterki użytkownika – zapisze tylko te plasterki, które stworzyliśmy podczas cięcia
  • Zaznaczone plasterki – zapisze jedynie plasterki zaznaczone w oknie zapisu

Taki sposób cięcia grafiki na potrzeby stron internetowych jest szybki, szczególnie ze względu na sposób ich zapisywania – wszystkie na raz na koniec pracy, otwieramy tylko jedno okno, zamiast osobnych na każdy plik. Metoda ta sprawdza się dobrze przy prostych grafikach, niestety takich na stronach internetowych jest jak na lekarstwo. W związku z tym, niezbyt ją sobie chwalę i wykorzystuję raczej sporadycznie (a teraz kiedy odkryłam opcję Generowania zasobów obrazów wcale, ale o tym później).

Polecam tą opcję do wycinania:

  • zwykłych grafik składających się z jednej warstwy oraz zgrupowanych;
  • przyciętych maską przycinającą, maską warstwy albo wektorową, o ile są one w kształcie prostokąta;

Nie polecam do:

  • grafik zawierających półprzezroczystość, nachodzących na inne i warstw z cieniem; Zapisywanie takich plików jest co prawda możliwe, ale wymaga ukrycia wszystkich warstw pod nimi lub nad nimi, co przy skomplikowanych projektach jest czasochłonne i utrudnia pracę, szczególnie jeśli warstwy pod spodem także będą później wycinane;

Oprócz tego, wycinanie plasterków wymaga dużej dokładności, musimy bardzo uważać, aby nie przyciąć któregoś z elementów. Skrócenie grafiki nawet o jeden piksel może być widoczne i popsuć wygląd projektu po zakodowaniu. Z powodu masowego zapisu błędy te często trudno wychwycić.

 

Artykuł pochodzi ze strony:

http://grafmag.pl/artykuly/tniemy-grafike-strony-internetowej-do-wykorzystania-w-html/

 

Więcej sposobów cięcia na plasterki:

https://helpx.adobe.com/pl/photoshop/using/slicing-web-pages.html