[Tutorial] Slice Tool

[witmann 0]

Sorry, że tak późno i nie własny a tłumaczony, ale wypadło mi parę ważnych spraw, więc siłą rzeczy nie miałem na niego za dużo czasu.

 

Tutorial jest przetłumaczoną wersją tego: http://www.tutorialfx.com/forums/index.php?showtopic=2841

 

Wszystkie kroki wykonujcie przy włączonej siatce pomocniczej!

 

1. Otwieramy w Photoshopie nasz layout.

 

 

2. Na pierwszym miejscu wytniemy banner. Wybieramy narzędzie Slice (Shift + K) i poczynając od jakiegoś narożnika zaznaczamy cały banner (tak jakbyśmy to robili narzędziem selekcji). Mamy coś takiego:

 

 

3. Następnie wycinamy przyciski z menu poziomego. Wszystkie jednakowej szerokości. Warstwy z tekstem można usunąć, chyba, że korzystacie z niestandardowych czcionek lub efektów.

 

4. Następnie ciachamy ramki z tekstem. Po wszystkim uzyskamy coś takiego:

 

 

5. [Element dodany ode mnie] Klikając na każdym kawałku prawym klawiszem myszy możemy sutalić jego nazwę, która będzie potem użyta w nazwie pliku wynikowego. Jest to ważne, gdyż ułatwi późniejszą pracę z kodem.

 

6. Jak już wszystko jest ładnie pocięte przechodzimy do File->Save for Web. Tutaj klikając na poszczególne kawałki obrazka można edytować ich parametry osobno. W ten sposób można dopasować kompresję do swoich potrzeb (używajcie tego z rozwagą - na początku nic nie musicie zmieniać).

 

7. Po kliknięciu na Save otrzymamy plik index.html oraz folder 'img' z naszymi obrazkami. Jedyne co pozostało to edytować kod html. Wszystkie obrazki będą wstawione poprzez znacznik <img>, więc część trzeba będzie umieścić jako tło itp. Ale to już rzecz wykraczająca poza ten tutorial.

[rytro 0]

No nareszcie, wielkie thx, zaraz oblookam jak to dziala..;]

Btw. Jak wlaczyc "siatke pomocnicza"??

[witmann 0]

Btw. Jak wlaczyc "siatke pomocnicza"??

Ctrl + ", albo View->Show->Grid.

 

Właściwości siatki można zmienic w Edit->Preferences->Guides Grid and Slices. Optymalnie ustawić 'Gridline every' na 10 px i 'Subdivisions' na 1.

[neonek 115]

no dzieki za tego tuta w piatek oblukam go staranie bo nie mam teraz czasu ;d dzia

[stickman 0]

Nooooo doczekałem się - dobra robota, jutro cos poprobóje

[BeneQ 0]

Nooooo doczekałem się - dobra robota, jutro cos poprobóje

 

dokladnie

czas na praktyke

[party 0]

ehh rece opadaja... przeciez ze strona pocieta w taki sposob ciezko jest cokolwiek zrobic... :x

[Filip 0]

ehh rece opadaja... przeciez ze strona pocieta w taki sposob ciezko jest cokolwiek zrobic... :x

 

O czym Ty gadasz ? Jaki problem...Pozatym - to jest tylko przykłada każdy może ciąć według własnej modły , on tylko przedstawił sam sposób cięcia...

[party 0]

O czym Ty gadasz ? Jaki problem...Pozatym - to jest tylko przykłada każdy może ciąć według własnej modły , on tylko przedstawił sam sposób cięcia...

O tym, ze narzedzie slice kompletnie nie nadaje sie do ciecia designow (chyba, ze robimy strone, na ktorej nie bedziemy nigdy zmieniali tresci ;])

[theGamer 0]

A co proponujesz zamiast narzedzia Slice

[jano 0]

A co proponujesz zamiast narzedzia Slice

uzywania glowy + np. marquee tool ?

 

Slice Tool, jest dobry, ale raczej do prostych layout'ow, badz gdy ktos potrzebuje zrobic strone "na szybko".

 

 

Jeszcze pare slow d0 mlodych "webmasterow". Ciac nalezy z glowa i myslac o jak najbardziej optymalnym rozwiazaniu (choc nie zawsze sie da).

Nalezy znajdowac elementy powtarzalne, elementy ktore mozna zastapic kawalkiem kodu itd., a wszystko to, aby strona ladowala sie krocej.

[rytro 0]

part zamiast krytykowac powiedz w takim razie jak kroic a nie tylko sie madrzysz i nic z tego nie wynika.. -.-

[party 0]

part zamiast krytykowac powiedz w takim razie jak kroic a nie tylko sie madrzysz i nic z tego nie wynika.. -.-

heh, moj ulubiony tekst... "nie wymadrzaj sie tylko zrob sam"

 

uprzedził mnie @jano

uzywania glowy + np. marquee tool ?

 

to jest najlepszy sposob ciecia designu, poniewaz mozna napisac kod wg standardow w3c, a takze ulatwic sobie pozniejsza edycje strony. to jest takie moje skromne zdanie i mysle, ze kazdy kto zajmuje sie tym troche wiecej czasu przyzna mi racje.

[rytro 0]

A powiedz mi czy jak zrobie design w photoshopie to potem moze da sie go jakos pokroic w dreamweaverze? Tzn chodzi mi o to czy mozna jakos wykorzystac te 2 programy...

[Filip 0]

A powiedz mi czy jak zrobie design w photoshopie to potem moze da sie go jakos pokroic w dreamweaverze? Tzn chodzi mi o to czy mozna jakos wykorzystac te 2 programy...

 

Pokroić raczej nie Ale pokrojony design możesz już łatwo zakodować np. w HTMLu

[witmann 0]

Heh, widzę, że muszę się obronić

Ludzie chcieli szybkiego sposobu na krojenie layoutów, więc przedstawiłem im Slice Tool, który imho jest najszybszym sposobem. To co tu jest to podstawy mające na celu wyłącznie pokazanie "z czym to się je". Optymalizacja późniejszych wyników pod względem szybkości ładowania jest dla mnie oczywistością. Nie pisałem o tym, bo każdy na to wpadnie - prędzej, czy później.

 

Jest to tekst dla początkujących, więc nie wymagajcie od nich od razu sotoswania się do standardów W3C (chociaż nie ukrywam, że fajnie by było, jakby się stosowali). Mają opanowany html, więc tabelki są dla nich najwygodniejsze. Nikt od razu przecież na DIV'y nie przechodził.

[Endriu1921 0]

7. Po kliknięciu na Save otrzymamy plik index.html oraz folder 'img' z naszymi obrazkami

 

No własnie co do tego folderu to jak sie go tworzy ?

[witmann 0]

No własnie co do tego folderu to jak sie go tworzy ?

Sam się utworzy w miejscu, gdzie zapiszesz plik ze stroną.

[Endriu1921 0]

Włączyłem ImageReady i zapisałem i sie dopiero utworzył ten folder z obrazkami:E

[Roffus 0]

świetny tutorial! Wielkie dzięki!

[radziul 0]

Ja tne slice tool a przy zapisywaniu zaznaczam "images only". Potem wlaczam moje zabugowane NVU, TopStyle Lite i robie stronki zgodne z W3C. Kod generowany przez PS jest dla mnie smieszny

[KlaxoN 0]

Odświeżam ten temat, ponieważ znalazłem dobrą strone na temat cięcia layoutów w photoshopie łacznie z kodowaniem.

Myśle że poszukujacym informacji na forum przyda sie ten link: http://www.slicingguide.com/

[Gość hultaj]

Jeszcze pare slow d0 mlodych "webmasterow". Ciac nalezy z glowa i myslac o jak najbardziej optymalnym rozwiazaniu (choc nie zawsze sie da).

Nalezy znajdowac elementy powtarzalne, elementy ktore mozna zastapic kawalkiem kodu itd., a wszystko to, aby strona ladowala sie krocej.

Hmn.. ja chyba tak robiłem. Tzn. tło daje jako kolor jakiś tam, usuwam zbędne obrazki etc...

Fajny tutek. Dzięki niemu naumiałem się ciąć i - jak na razie - składać to do samego pustego HTML'a... Może z czasem będe miał strony zgodne z W3C.

[anem 0]

a ja wogule powiem że nie jestem zwolennikiem cięcia stron może jeszcze nie mam doświadczenia, bo nie uważam się za kogoś poziomu witmanna albo innych daleko mi do nich , ale ja robię to tak iż robię swój layout następnie odrazu pisze już index plus arkusz styli i okazuje się że połowa strony można napisać w stylu a zwykle kopiuje tylko banner z odzielnej warstwy i zapisuje ;]

 

czy to zły nawyk ?

[witmann 0]

Nie jest to zły nawyk Sam tak kiedyś robiłem. Potem jak poznałem narzędzie slice, to stwierdziłem, że mocno ułatwia mi pracę, bo tworzenie tabelek pod layout uważałem za najbardziej żmudną robotę przy budowie strony. Obecnie, kiedy powoli zaczynam budować strony na DIVach, to odchodzę od slice'a, bo do tego to on się raczej nie nadaje.

 

Aha, i nie przesadzaj z tym moim doświadczeniem