PhotoShop -> CSS (PAMOKA)

VERTIMAS DARYTAS IŠ 'TUTORIALIZED' SVETAINĖS ANGLŲ K.:

1) Atsidaryk savo failą su PhotoShop.

http://www.duclaux.net/blog/wp-content/uploads/2006/02/open.jpg

2) Paredaguok dokumentą su Image Ready.

http://www.duclaux.net/blog/wp-content/uploads/2006/02/editImageready.jpg

3) Iškarpyk dokumentą, naudojant “Slice Tool", kas leis tau apipavidalinti visas skirtingas savo tinklalapio dalis (pavyzdžiui, antraštę, meniu ir t.t.).

http://www.duclaux.net/blog/wp-content/uploads/2006/02/slice.jpg

4) Dabar tavo dokumentą turėtų sudaryti mėlyni sunumeruoti stačiakampiai ir linijos.

http://www.duclaux.net/blog/wp-content/uploads/2006/02/sliced.jpg

5) Dabar tau reikia nurodyti Image Ready išvesties parametrus.

http://www.duclaux.net/blog/wp-content/uploads/2006/02/ouputsettings.jpg

6) Dabar pasirink CSS iškėlimą (viduje File -> Outputsettings meniu).

http://www.duclaux.net/blog/wp-content/uploads/2006/02/outputsettingscss.jpg

7) Dabar turi nurodyti savo išvesties nustatymus ir nuspausti OK. (tai patvirtins tavo nustatymus, tačiau dar nesukurs failo).

8) Tai paskutinis žingsnis, tau tereikia išsisaugoti rezultatą, naudojant “Save optimized” (viduje File meniu).

http://www.duclaux.net/blog/wp-content/uploads/2006/02/SAVEOPTIMIZED.jpg

Darbas baigtas, Image Ready katik sukūrė "images" katalogą, kurį sudaro sukarpyti paveiksliukai ir html byla su CSS kodu. Jei nori peržiūrėti/nusikopijuoti/redaguoti CSS kodą, tau tereikia bylą atsidaryti su savo tinklo naršykle ir peržiūrėti "Source" kodą.

http://www.duclaux.net/blog/wp-content/uploads/2006/02/viewsource.jpg

Štai CSS kodas, sugeneruotas PhotoShop/Image Ready:

http://www.duclaux.net/blog/wp-content/uploads/2006/02/code-source.jpg

Viskas dabar galutinai atlikta. Tu turi CSS ir XHTML bylą. Žinoma, tu gali norėti paredaguoti kodą rankomis ar patobulinti tam tikras jo dalis.