Cięcie layoutu w ImageReady (także Photoshop)

admin
Administrator
Administrator
Posty: 24
Rejestracja: 15 lip 2013, 21:50

Cięcie layoutu w ImageReady (także Photoshop)

Post autor: admin » 15 lip 2013, 22:56

W tym tutorialu opisuję jak najprościej pociąć layout za pomocą programu ImageReady dołączonego do Adobe Photoshop.

Krok 1.
Uruchamiamy program. Teraz przechodzimy przez Plik, File --> Otwórz, Open. Z nowo otwartego okienka wybieramy swój projekt layoutu.

Krok 2.
Wybieramy narzędzie Odcięcie (K) (ang. Slice tool).

Obrazek

Teraz tym narzędziem zaznaczamy tak jak chcemy żeby zostało pocięte. Mój layout pociąłem tak:

Obrazek

Krok 3.
Następnie przechodzimy Plik, File --> Zapisz zoptymalizowany jako... Save Optimized As... (CTRL + SHIFT + ALT + S)

Obrazek

Otwiera się nowe okno. Wskazujemy gdzie ma się zapisać nasz projekt. Dolne pola wypełniamy tak:

Nazwa pliku: wiadomo
Zapisz jako typ: HTML i obrazki (*.html)
Ustawienia: Background Image
Odcięcia: Wszystkie odcięcia

Obrazek

Jeśli ktoś ma nowszą wersję programu niż ja (używam Adobe Photoshop 7.0.1 CE PL) to w polu:

Ustawienia, settings: XHTML

Krok 4.
Mamy już prawie wszystko gotowe. Otwieramy stworzony przez program plik .html w dowolnym edytorze tekstu. Pokazuje się nam wygenerowany przez program kod HTML layoutu:
<HTML>
<HEAD>
<TITLE>LAYOUT</TITLE>
<META HTTP-EQUIV="Content Type" CONTENT="text/html;charser=iso-8859-2">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (layout.jpg) -->
<TABLE WIDTH=778 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=10><IMG SRC="Obrazki/index_01.jpg" WIDTH=778 HEIGHT=146 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
Usuwamy z niego:

<!-- ImageReady Slices (layout.jpg) -->
<!-- End ImageReady Slices -->


Teraz zamieniamy:
<TD COLSPAN=2><IMG SRC="Obrazki/index_01.jpg" WIDTH=788 HEIGHT=146 ALT=""></TD>
na
<TD COLSPAN=2 BACKGROUND=Obrazki/index_01.jpg WIDTH=778 HEIGHT=146></TD>
I tak postępujemy dalej z całym kodem. Ma to na celu zamianę obrazków na tło w celu późniejszej możliwości umieszczenia tekstu.

Awatar użytkownika
Gemma28
Posty: 3
Rejestracja: 17 paź 2017, 23:53
Kontakt:

Re: Cięcie layoutu w ImageReady (także Photoshop)

Post autor: Gemma28 » 17 paź 2017, 23:55

Bardzo fajny poradnik dla osób w miarę początkujących :)

ODPOWIEDZ