Cięcie Laya w PSie.pdf

Laya cięcie gięcie na stronie Webmark

http://webmark.shost.pl/?p=69

Webmark

Index

BestProjekt

CSS

Design

Szablony

Takie tam…

Tutoriale

Wordpress

Laya cięcie gięcie

Index » Kategoria: Tutoriale » Tagi: Adobe Image Ready , szablon , tutorial .

No i w końcu przyszedł czas na cięcie utworzonego wcześniej projektu. Otwieramy zatem plik psd w

programie Adobe Image Ready, maksymalizujemy obszar roboczy i wyłączamy warstwy z tekstem lub

elementami, które zostaną utworzone później lub inną techniką (chociaŜby formularz wyszukiwarki).

1 z 13

20090222 22:53

Laya cięcie gięcie na stronie Webmark

http://webmark.shost.pl/?p=69

Zaznaczonym na rysunku narzędziem slice (odcięcie [K]), wykorzystując prowadnice "tniemy" projekt na

części/warstwy, z których zostanie zbudowana strona. Powiększamy lekko obszar roboczy (CTRL + +) i

wspomnianym narzędziem zaznaczamy poszczególne obszary projektu. Jak ciąć? Ustawiasz "noŜyk" w

rogu fragmentu i przeciągasz przy włączonym LPM do odpowidniego miejsca

Po zaznaczeniu wszystkich prostokątów z paska narzędzi wybieramy narzędzie "Zaznaczanie odcięcia" i

przytrzymując klawisz "Shift" po kolei zaznaczamy (klikając na nie) kolejne, pocięte części. Na uŜytek

tutoriala, aby zachować przejrzystość kodu, stopka została przycięta w całości.

Projekt został pocięty na 5 części, które na potrzeby tutoriala zaznaczyłem róŜnymi kolorami.

2 z 13

20090222 22:53

Laya cięcie gięcie na stronie Webmark

http://webmark.shost.pl/?p=69

Niektórzy zauwaŜyli zapewne, Ŝe projekt został podzielony w zasadzie na dwie pionowe kolumny, w

których zawierają się pozostałe części i zakończony na całej szerokości stopką, która będzie "clearowana"

ale o tym nieco później. Po zaznaczeniu wszystkich części projektu z menu wybieramy Plik > Zapisz

zoptymalizowany jako… [Ctrl+Shift+Alt+S] i po ustawieniu opcji podobnych jak na zrzucie ekranu

zapisujemy plik np. na pulpicie.

Dlaczego takie opcje? OtóŜ zaleŜy nam tylko na pociętych fragmentach projektu kod napiszemy sami w

… notatniku. Na początek warto zmienić nazwę folderu, w którym zostały zapisane w/w fragmenty jak

równieŜ ich własne nazwy na bardziej zrozumiałe, które kojarzyłyby się jednoznacznie z danym

fragmentem strony.

I właściwie to prawie wszystko. Pozostało jeszcze ustalenie tła strony i zoptymalizowania tła

poszczególnych fragmentów strony ale o tym równieŜ nieco później.

3 z 13

20090222 22:53

Laya cięcie gięcie na stronie Webmark

http://webmark.shost.pl/?p=69

Czas przejść do napisania strony. Warto sobie przygotować szablon, strukturę podstawową dokumentu,

który moŜna będzie wykorzystywać wielokrotnie i zaoszczędzić sobie pisania ciągle takiego samego

kodu. Stwórz plik tekstowy o nazwie "index" wklej do niego poniŜszy kod i zapisz jako "index.html"

właśnie napisałeś stronę internetową.

< !DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd" >

<head>

<title> Tytuł strony </title>

10.

11.

12.

13.

14.

15.

</head>

16.

17.

18.

<!–zawartość strony–>

19.

20.

</body>

21.

</html>

Jaki widać wybrałem kodowanie strony iso88592 chociaŜ standardem kodowania jest juŜ właściwie

utf8. Absolutnie odradzam jednak kodowanie strony jako windows1250. Czas zatem utworzyć strukturę

strony czyli jej "body" a następnie wypełnić ją treścią.

No to lecimy z warstwami. Obie kolumny mają łącznie 760px szerokości rozmiar taki został ustalony

juŜ podczas projektowania strony. Lewa kolumna z topem ma szerokość 510px zaś kolumna prawa (na

menu i formularz wyszukiwarki) ma szerokość 210px. Rozmiar obrazka a zarazem danej warstwy, która

zostanie nim bądź tłem wypełniona moŜna sprawdzić w jego właściwościach lub po zaznaczeniu danego

fragmentu w AIR.

Wszystkie warstwy strony zostaną umieszczone w wycentrowanej warstwie nadrzędnej "kontenerze",

4 z 13

20090222 22:53

Laya cięcie gięcie na stronie Webmark

http://webmark.shost.pl/?p=69

którą nazwałem "podstawa". Schematycznie wyglądałoby to tak:

1 .podstawa

2 .lewa

3 . top

4 . content

5 .menu

6 .stopka

7 .koniec podstawy

Poszczególnym warstwom nadam odpowiedni identyfikator, którego nazwa nie moŜe powtarzać się w

dokumencie i wszystko ujmę w kod html. Zwróćcie szczególną uwagę na zamykanie poszczególnych

warstw. Jeden otwarty i niezamknięty "div" potrafi zdemolować pracowicie przygotowywaną stronę.

< !DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd" >

<head>

<title> Tytuł strony </title>

10.

11.

12.

13.

14.

15.

</head>

16.

17.

18.

19.

20.

21.

22.

</div>

23.

24.

25.

26.

</div>

27.

28.

29.

</div>

30.

</body>

31.

</html>

I właściwie to tyle co moŜna napisać w htmlu struktura strony została napisana do jej źródła

powrócimy aby wypełnić ją treścią. Resztą zajmą się Kaskadowe Arkusze Stylów (CSS). Na początek

5 z 13

20090222 22:53

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: