[Tut][Ps] Cięcie Layoutu Oraz Jego Zapis.

[dudsonowa]

 

Dla niektórych być może tutorial banalny, ale ostatnio wiele osób się mnie pyta jak w PS'ie pociąć szablon i zapisać tak, żeby był przystosowany do wrzucenia na stronę www.

 

Zacznijmy od początku.

Podstawą jest używanie czcionek rozpoznawalnych we wielu komputerach. Czyli tzw. czcionek systemowych Tahoma, Arial, Verdana itp. Tworzenie layoutu nie jest trudne samo w sobie, ale pochłania wiele czasu, zwłaszcza kiedy tworzony jest na zamówienie klienta. Musimy liczyć się ze zdaniem zamawiającego, więc nie zawsze możemy "poszaleć".

Od czego zaczynamy?

 

Posłużę się jednym z moich projektów (tworzony, niedawno dla MPC, niestety nie został zaakceptowany, więc posłuży mi jako przykład ):

 

 

1.

Narzędzie Slice Tool (Cięcie na Plasterki):

Narzędzie bardzo proste w obsłudze, cofnijcie się do Painta i przypomnijcie jak tworzyło się prostokąty. Pamiętacie? To działa tak samo, tyle, że tnie szablon.

 

 

2.

Jak pociąć szablon?

Ważne jest aby zorientować się, jakie ramki zachodzą w interakcję (np. zmieniają kolory po najechaniu myszką) i które będą odnośnikami, czyli pospolicie mówiąc linkami. Te ramki muszą pozostać dokładnie wycięte. Zaś te obiekty które, są stałe jak np. tytuł strony, nagłówek czy stopka nie wymagają większej uwagi.

Pamiętajcie aby szablon ciąć tak, aby wykonać jak najmniej cięć

. To jak zabawa w chirurga, im mniej cięć tym mniej blizn. To bardzo ważne.

Gdy się pomylisz:

wystarczy kliknąć PPM na plasterku, który chcemy usunąć i kliknąć funkcję

Usuń plasterek

.

Elementy zaznaczone na zielono to z pewnością elementy stałe:

 

 

3.

Tniemy ramki.

Przypominam: jak najmniej cięć!

 

 

4.

Tniemy obiekty ruchome.

Sekcja nie zaznaczona na zielono pozostaje nie pocięta. Dlaczego?

Ponieważ jest to obszar dla administratora/zleceniodawcy strony. On decyduje co ma się tam znaleźć.

 

 

Tak wygląda cała filozofia cięcia szablonu, oczywiście cięcie ramek oraz linków w tym przypadku może być niedokładne. Wszystko zawsze zależy od layoutu, każde cięcie jest inne, bo i szablony są inne. Teorie w każdym razie macie powyżej. Czas na zapis.

 

5.

Zapis.

Dużym i częstym błędem jest normalny zapis wykonywany po pocięciu. Zapisanie pociętego layoutu w sposób ogólnie znany (czyt.

Zapisz, Zapisz jako

) jest bezcelowy, ponieważ po takim zapisie layout do niczego się nie przyda. Dlatego używamy opcji

Zapisz dla Internetu i urządzeń

(ang.

Save for Web and Devices

).

 

 

Zobaczycie taką tablicę:

 

 

UWAGA:

W tym momencie klikamy

CTRL + A

(

Zaznacz wszystko

). Jeśli tego nie zrobimy szablon będzie niekompletny!

Klikamy OK i pojawia się kolejna tablica:

 

 

Wpisujemy nazwę pliku (

nie używamy SPACJI

). A następnie zaznaczamy opcję

HTML i obrazy

, tak aby program zapisał nam cały szablon. Jeśli po zapisie powstanie katalog Images jak widać na obrazku (to wcześniej pocięty i zakodowany w Wordzie szablon), to znaczy, że cała operacja powiodła się!

 

Miłej zabawy ze Slice Tool'em!

dudsonowa.

[Kronk]

No , No. Nice.

Można wiedzieć w jakim celu robiłaś ten layout ?

[Schittset]

@Kronk metin2.mpcforum.pl ;p

 

Nice ;]

Ale layouty umiem ciąć ;p

 

dal bym +, ale nie mogę ;/

[Yuriy]

Bardzo się przyda ja nie wiedziałem akurat po co to bo nie używałem nigdy ;]

[dudsonowa]

@Kronk Schittset dokładnie Ci odpowiedział. Layout nie przeszedł autoryzacji u adminów, więc jakoś trzeba było wykorzystać te 3h roboty, a tak przynajmniej może kogoś nauczyłam ciąć layouty. .

@Yuriy no to już wiesz do czego służy Slice Tool .

[Ventis]

Dzięki przyda się +

[MrOMGWTF]

Powiem jedno:

 

NIGDY nie zapisuj szablonu w ps'ie jako html i obrazy.

Bo ps zapisuje to w tabelach a taką stronkę to sobie w dupe możesz wsadzić ()

 

Czyli zapisujesz jako same obrazy a potem kodujesz albo dajesz komuś do zakodowania

[dudsonowa]

Tak, ale jeśli nie masz kodera to du.pa.

Ja sama koduję w prymitywnym programie imieniem Word, dlatego od razu wolę zapisać jako HTML.

Kwestia umiejętności i znajomości HTML'a.

[GraciiiiPowrót]

Uwielbiam twoje tutki. Wszystko wytłumaczone elegancko. ss są. Łap "+".

[Gość Mounthains]

Tutorial jest świetny. Z pewności się przyda wszystkim osobom zakładające własne strony. Mogę podpiąć

[SeetroX]

Świetny Tut , bardzo mi pomógł wszystko ładnie wytłumaczone , pięknie

[Groszex]

Wie ktoś czemu po wycięciu wszystkiego nie moge zapisać "dla internetu i urządzeń" ? Pole z tą funkcją jest szare i nie da się w nie kliknąć, ponieważ jest zablokowane.

 

@edit

Już naprawiłem ten błąd. Pomogło wywalenie spolszczenia, które blokowało tą funkcje...

[Aquul]

Widać , że się namęczyłaś nad tym poradnikiem masz + i wielkie dzięki bo się przydało

[Black Is Back]

Dudsonowa jesteś po prostu super. Korzystam z twoich tutków i próbuje coś zrobić ale nadal nie umiem. Kiedyś się nauczę. +

[Sugre]

Tniesz razem z zawartością (napisy itp.)

Gratuluję kreatywności

Ile taka strona będzie się ładowała (złożona z samych obrazków)? 5 min?

Nie ucz innych rzeczy których sama nie potrafisz...

[dudsonowa]

Tniesz razem z zawartością (napisy itp.)

Gratuluję kreatywności

Ile taka strona będzie się ładowała (złożona z samych obrazków)? 5 min?

Nie ucz innych rzeczy których sama nie potrafisz...

 

 

Chodzi o podstawy i obycie z narzędziem Slice Tool, a nie profesjonalne kodowanie i cięcie. O samą fizykę i proces chodzi nic więcej.

[phestor]

Witam i proszę o pomoc,

mam gotowy projekt w Photoshopie i chcę go zapisać jednakże po zapisaniu i otworzeniu w przeglądarce obraz jest po lewej stronie, a nie jak powinno być na środku.

Co robię nie tak?

Dziękuję z góry za pomoc

[dudsonowa]

Witam i proszę o pomoc,

mam gotowy projekt w Photoshopie i chcę go zapisać jednakże po zapisaniu i otworzeniu w przeglądarce obraz jest po lewej stronie, a nie jak powinno być na środku.

Co robię nie tak?

Dziękuję z góry za pomoc

 

Jak to po lewej zamiast po prawej?

[phestor]

Normalnie, zapisuję projekt tak jak to wskazano u góry i po otwarciu go w przeglądarce zamiast być po środku w przeglądarce jest z lewej strony. Nie wiem czy trzeba coś przed zapisem ustawić w Photoshopie czy podczas zapisywania.

[NoFace]

Daj screen to może ci duds pomoże

[phestor]

Nie mogę wysłać pliku bo nie mam uprawnień jak je zdobyć?

[Taiz0]

Nigdy nie mogłem tego zrozumieć, może mi się nie chciało szukać. No, ale przełamałem się i wreszcie to załapałem. Tutek bardzo dobrze wytłumaczony.

[Gość Emillo]

 

Jak już ktoś powiedział layout wykonany w taki sposób można sobie najwyżej w dupę wsadzić. Tylko mieszasz ludziom w głowach >.<

[Moutaint]

Ty później odtwarzasz to w wordzie i cykasz prawy i hiber coś tam?

Można tak to zrobić ale do małych stron typu informacja albo coś takiego.

 

Ogólnie video byś mogła nagrać jak zrobić taką stronkę razem z kodowaniem w wordzie.Na pewno

kilku osobom by się przydał.

[HeXo]

Nie róbcie tym sposobem ;> Bo to jest nie dopuszczalne . Są takie wielkie łaty że aż głowa boli ... 10 minut i po stronie . Rozjazdy strony itp .

( PS : Zrobię tut jak zrobić layout )