Cięcie grafiki dla www - Slice Tool (Odcięcie)
autor: balu
Slice Tool (K)
[Odcięcie] to narzędzie Photoshopa, które służy do cięcia grafiki na poszczególne jej elementy. Jest to przydatne narzędzie zwłaszcza dla twórców stron www. Ja również z niego korzystam. Najpierw projektuję główną stronę, dodaje logo, menu, boxy, stopkę, itp. Następnie wszystko to tnę i zapisuje do odpowiednich formatów graficznych. Poniżej prezentuje fragment designu obecnego photoshop.pl wraz z opisem poszczególnych etapów.
• domyślnie wybrane narzędzie na pasku Tools
K klawisz skrótu (Shift+K - wybór kolejnego narzędzia w grupie)
Najpierw projektuję wszystko, a następnie przechodze do cięcia grafiki. Wybieram narzędzie Slice Tool, ustawiam się dowolnym rogu jednego z elementów projektu, przytrzymuje klawisz myszki i przeciągam kursor do przeciwległego rogu. Jeśli chcesz aby slice idealnie przylegał do krawędzi bądź kontrolować jego rozmiar to złap za jego bok i przeciągnij myszką (patrz rysunek).przytrzymując lewy przycisk myszki zaznaczam dane obiekty. Na obrazku widać wyraźnie 4 zaznaczone elementy:
1. logo,
2. tło belki z menu,
3. tło pod menu,
4. oraz fragment paska narzędzi Photoshop.
Po prawej stronie obrazka widać tzw. Auto Slices czyli dodatkowe odcięcia. Aby je ukryć (patrz lewa strona obrazka) mając wybrane narzędzie Slice Select Tool, na górnej belce z opcjami klikamy przycisk Hide Auto Slices.
Slice Select Tool
[Zaznaczanie Odcięcia] (można uzyskać to narzędzie korzystając ze Slice Tool i wciskając ctrl) to narzędzie do zaznaczania ciętej grafiki oraz do edycji pociętego elementu.
Zaznaczamy poszczególne elementy, klikając w nie tzw. dwuklikiem. Spowoduje to otwarcie okienka z ustawieniami danego Slice.
Wypełniamy pola według własnego uznania. Ja korzystam tylko z pola Name bo nie używam automatycznego generowania stron (patrz poniżej) w Photoshopie.
Okno Zapisu Grafiki
Kiedy mamy już pociętą naszą grafikę, możemy ją zapisać. Udajemy się do File / Save for Web&Devices:
Pojawi się nam okno zapisu grafiku, w którym narzędziem Slice Select Tool (patrz lewa strona okna) klikamy kolejno w elementy, które wcześniej pocieliśmy i ustawiamy dla każdego format graficzny oraz jakość grafiki (patrz prawa strona).
Klikamy w Save. Pojawi nam się następne okienko w którym możemy wybrać 3 opcje typu zapisu:
1. HTML and Images - dobre dla leniwych. Generuje plik HTML i wstawia do niego pociętą grafikę czyli mamy łatwo i szybko stronę www.
2. Images only - zapisuje tylko obrazki. Opcja dla tych, którzy korzystają z gotowych CMSów, lub chcą samemu napisać kod i decydować gdzie wstawić obrazki.
3. HTML Only - tylko HTML
Wybieramy jeszcze tylko miejsce docelowe zapisu naszej grafiki i gotowe.
Przepis na xhtml z div'ami.
U dołu okna zapisu grafiki, pod opcjami typu zapisu są ustawienia - Settings. Wybieramy Other.. -> otworzy się nam okienko. Z drugiej listy wybieramy:
· HTML i zaznaczamy Output XHTML,
· oraz Slices i zaznaczamy Generate CSS.
A-n-i-t-a