Kuidas luua Rolloverid Photoshop CS3-s

Rollovers lisab ettevõtte veebilehtede kujundusele veidi interaktiivsust, muutes veebilehe osa väljanägemist, kui külastaja näitab seadet selle peale või klõpsab. Kui loote veebisaidi graafika oma või kliendi saidile, võimaldab Adobe Photoshop CS3 seadistada pildid, mis toetavad ümbermineku funktsioone ja salvestavad need eraldi failidena. Kui olete need graafikud loonud, saate oma funktsionaalsust toetava koodi käsitlemiseks kasutada oma lemmik saidi disaini rakendust.

1.

Vajutage "Crtl-N", et avada dialoogiboks Uus. Looge RGB-režiimi Adobe Photoshopi dokument 72 punkti tolli kohta, mille taustasisaldus on läbipaistev. Suurendage oma faili, et see vastaks selles sisalduvate ümberminekute mõõtmetele.

2.

Loo ümbermineku pildi põhioleku välimus. Kasutage kujutise ja kuju kihte, gradiente, tüüpi ja muid Photoshopi tööriistu.

3.

Avage "Window" menüü ja valige "Layer Comps", mis näitab paneeli Layer Comps. Avage paneeli ülemises paremas nurgas lendamise menüü ja valige "New Layer Comp". Nimetage oma comp pärast seda, kui ta esindab ümbermineku olekut. Aktiveerige nähtavuse, asukoha ja välimuse märkeruudud "Rakenda kihtidele", nii et teie kiht comp kajastab kõigi kolme atribuudi olekut.

4.

Lisage kihtide stiilid, täiendavad kihid või muud ressursid, et ehitada välja hiirekursori või muu ümbermineku olek. Samuti saate välja lülitada olemasolevate kihtide või kihtide stiili nähtavuse paneelil Kihid, et luua oma asendusriik. Kui saavutate soovitud tulemuse, lisage kihtkomplekti paneelile teine ​​olek, aktiveerides valikute „Rakenda kihtidele”. Jätkake välimuse loomist ja lisage komposse, kuni ehitate nii palju ümbermineku olekuid kui teie veebisaidi disain nõuab.

5.

Klikkige esimesel teie loodud ümberminekul märgistamata ikoonil „Rakenda kiht“. Photoshop muudab teie koostise olekut, et kuvada selle ümbermineku jaoks loodud kihi ja efekti nähtavuste kombinatsioon. Avage "File" menüü ja valige "Save for Web and Devices", et avada sama nime dialoogiboks.

6.

Valige või kohandage eelseadistatud fail, valides algse ümbermineku oleku failivorminguks GIF, JPEG või PNG. Iga failitüüp sobib erinevat tüüpi teemadele. GIF on tavaliselt graafikale rohkem kui fotodel, sest see toetab kitsast värvide valikut. JPEG võib toota väga väikseid faile, kuid kõrge tihendustasemega saadakse pildi moonutamine. PNG tekitab kadudeta kompressiooni ilma vähendatud värvita. Kasutage akna „Salvesta veebi ja seadmeteni“ pildi eelvaate ülaosas 2-üles ja 4-üles vahekaarte, et võrrelda oma originaaltekste erinevate failivormingute või kvaliteeditaseme valikute välimusega. Klõpsake eelvaates, mis esindab kombinatsiooni valikutest, mida soovite väljundfailis kasutada.

7.

Klõpsake nuppu "Salvesta", et avada dialoogiboks "Save Optimized As". Määrake failinimi, et kombineerida ümbermineku nupu põhitunnus kvalifitseerimisseadmega, mis tähistab ümbermineku olekut. Näiteks kui teie ümberminek kehtib galerii nupule ja teie ümbermineku olek tähendab "kliki", nimetage oma fail "Galerii-kliki" ja lisage sellele faililaiend. Kuna Adobe Photoshop ei saa HTML-koodi ümberminekuks salvestada, valige rippmenüüst Format (Ainult pildid), et programm salvestaks ainult teie ümbermineku pildi. Valige asukoht, kuhu fail salvestada, ja klõpsake selle loomiseks nuppu "Salvesta".

8.

Klõpsa teie loodud teise ümbermineku oleku märgistamata ikoonil „Rakenda kiht“. Faili loomiseks naasta dialoogiboksi „Salvesta veebi ja seadmete jaoks” juurde. Korrake seda protsessi iga täiendava ümberehitatud oleku puhul, mille olete ehitanud.

Nõuanded

  • Nutikafiltrid peavad kehtima kõigi üksikute pildifailide kihtide puhul.
  • Kui avate menüü File (Fail), leidke alammenüü "Scripts" (Scripts) ja valige menüü "Layer Comps to Files" (Kihi failide failid), saate eksportida kõik oma failid JPEG-failidena ühes etapis, kuid mitte GIF- või PNG-failidena. See funktsioon toetab ka PSD-, TIFF-, PDF-, BMP- ja Targa-faile, kuid neid failitüüpe ei saa kasutada online-graafika jaoks.
  • Kui salvestate selle Photoshop PSD-vormingus, saate salvestada oma failiga kihtkompassi.

Hoiatus

  • Adobe Photoshop CS3 ei sisalda enam iseseisvat programmi ImageReady, mis on varustatud Photoshopi eelmiste versioonidega. ImageReady'is saate luua ja nimetada ümberlülitusi viilude abil ja eksportida ümberminekuid ühes etapis.
 

Jäta Oma Kommentaar