Kā izveidot Rollovers Photoshop CS3

Rollovers pievieno biznesa tīmekļa vietņu dizainam interaktivitātes pieskārienu, mainot tīmekļa lapas daļas izskatu, kad apmeklētāja norādīšanas ierīce slīd uz tās vai noklikšķina uz tās. Izveidojot tīmekļa vietnes grafiku savai vai klienta vietnei, Adobe Photoshop CS3 ļauj iestatīt attēlus, kas atbalsta apgāšanās funkcijas un saglabā tos kā atsevišķus failus. Kad būsiet izveidojis šīs grafikas, varat izmantot savu iecienītāko vietnes dizaina lietojumprogrammu, lai izstrādātu kodu, kas atbalsta to funkcionalitāti.

1.

Nospiediet "Crtl-N", lai atvērtu jauno dialoglodziņu. Izveidojiet RGB režīma Adobe Photoshop dokumentu ar 72 punktiem collā, tā fona saturs ir pārredzams. Izmēriet savu failu, lai tas atbilstu to rollovers izmēriem, kurus vēlaties izveidot tajā.

2.

Izveidojiet apgāšanās attēla pamata stāvokļa izskatu. Izmantojiet attēlu un formu slāņus, gradientus, tipa un citus Photoshop rīkus.

3.

Atveriet "Window" izvēlni un izvēlieties "Layer Comps", lai atklātu Layer Comps paneli. Atveriet lidojuma izvēlni paneļa labajā augšējā stūrī un izvēlieties "New Layer Comp". Nosauciet savu kompāniju pēc tam, kad ir redzams apgāšanās stāvoklis. Aktivizējiet izvēles rūtiņas "Lietot slāņiem", lai redzētu redzamību, pozīciju un izskatu, lai jūsu slānis comp atspoguļotu visu šo trīs atribūtu stāvokli.

4.

Pievienojiet slāņa stilus, papildu slāņus vai citus resursus, lai izveidotu peles pārlūkprogrammas vai cita apgāšanās stāvokļa izskatu. Varat arī izslēgt esošo slāņu vai slāņu stilu redzamību slāņu panelī, lai izveidotu alternatīvo stāvokli. Kad sasniegsiet vēlamo rezultātu, pievienojiet vēl vienu valsti Layer Comp panelim, aktivizējot opcijas "Apply to Layers". Turpināt veidot izskatu un pievienot kompasus, līdz būsiet izveidojuši tik daudz apgāšanās stāvokļu, cik nepieciešams jūsu mājas lapas dizainam.

5.

Noklikšķiniet uz ikonas, kas nav iezīmēta, "Apply Layer Comp", lai izveidotu pirmo izveidoto apgāšanās. Photoshop maina jūsu kompozīcijas stāvokli, lai parādītu slāņa un efekta redzamības kombināciju, kuru izveidojāt šai apgāšanās reizei. Atveriet izvēlni "Fails" un izvēlieties "Saglabāt tīmeklim un ierīcēm", lai atvērtu tā paša nosaukuma dialoglodziņu.

6.

Atlasiet vai pielāgojiet faila sākotnējo iestatījumu, izvēloties GIF, JPEG vai PNG kā sākotnējā apgāšanās stāvokļa faila formātu. Katrs faila tips ir piemērots dažāda veida priekšmetiem. GIF parasti izmanto grafiku vairāk nekā fotogrāfijas, jo tā atbalsta šaurās krāsas. JPEG var radīt ļoti mazus failus, bet augsts saspiešanas līmenis rada attēla izkropļojumus. PNG rada zaudējumus bez saspiešanas bez samazinātas krāsas. Izmantojiet 2-Up un 4-Up cilnes attēla priekšskatījuma augšpusē logā "Save for Web and Devices", lai salīdzinātu sākotnējos darbus ar dažādu failu formāta vai kvalitātes līmeņa opciju izskatu. Noklikšķiniet uz priekšskatījuma, kas atspoguļo iespēju kombināciju, kuru vēlaties izmantot izejas failā.

7.

Noklikšķiniet uz pogas "Saglabāt", lai atvērtu dialoglodziņu "Saglabāt optimizēto kā". Iestatiet faila nosaukumu, lai apvienotu apgāšanās pogas pamata identifikatoru ar kvalifikāciju, kas apzīmē apgāšanās stāvokli. Piemēram, ja jūsu apgāšanās attiecas uz galerijas pogu un jūsu apgāšanās stāvoklis ir "klikšķis", nosauciet savu failu "Galerija - noklikšķiniet" un pievienojiet tam faila paplašinājumu. Tā kā Adobe Photoshop nevar saglabāt HTML kodu, lai iestatītu apgāšanās, iestatiet nolaižamo izvēlni Format (Tikai) tikai uz "Images" (tikai attēli), lai programma saglabātu tikai jūsu apgāšanās attēlu. Izvēlieties vietu, kur saglabāt failu, un noklikšķiniet uz pogas "Saglabāt", lai to izveidotu.

8.

Lai izveidotu otro apgāšanās stāvokli, noklikšķiniet uz ikonas, kas nav marķēta "Apply Layer Comp". Atveriet dialoglodziņu "Saglabāt tīmekļa un ierīču saglabāšanai", lai izveidotu failu. Atkārtojiet šo procesu katram papildus izveidojušajam apgāšanās stāvoklim.

Padomi

  • Viedajiem filtriem jāattiecas uz visiem slāņu kompasiem atsevišķā attēla failā.
  • Atverot izvēlni Fails, atrodiet tās apakšizvēlni "Skripti" un izvēlieties izvēlni "Slāņu kopas failiem", jūs varat eksportēt visus savus failus kā JPEG failus vienā solī, bet ne kā GIF vai PNG failus. Šī funkcija atbalsta arī PSD, TIFF, PDF, BMP un Targa failus, taču šos failu tipus nevar izmantot tiešsaistes grafikai.
  • Ja jūs to saglabājat Photoshop PSD formātā, varat saglabāt failu ar failu.

Brīdinājums

  • Adobe Photoshop CS3 vairs neietver atsevišķu ImageReady programmu, kas tiek piegādāta ar iepriekšējām Photoshop versijām. ImageReady programmā jūs varat izveidot un nosaukt rollovers, izmantojot šķēles, un eksportēt rollovers vienā solī.
 

Atstājiet Savu Komentāru