Felhasználói útmutató Mégse

Webes grafikák használata

A Photoshop webeszközeivel könnyedén összetevőkre oszthatja a weblapok tartalmát, illetve teljes weblapokat állíthat össze előre definiált vagy testre szabott formátumokban.

  • A weblapok és felületeik elemeinek elkészítéséhez használjon rétegeket és szeleteket. (Lásd: Rétegek és Weblapok szelése.)

  • Rétegszedők használatával kipróbálhat különféle lapkompozíciókat és exportálhatja a lapok egyes változatait. (Lásd: Rétegszedők.)

  • Létrehozhat egérmutatásra változó szöveget vagy gombgrafikát a Dreamweaver vagy a Flash alkalmazásba történő importáláshoz.

  • Az Animációs panellel webes animációkat hozhat létre, majd animált GIF-képként vagy QuickTime-fájlként mentheti azokat. Lásd Képkockák animálása.

  • Az Adobe Bridge programban készíthet webes fotógalériát, azaz adott képcsoportból pillanatok alatt interaktív webhelyet készíthet, ehhez számos különböző, professzionális megjelenésű sablont is felhasználhat.

A Photoshop és a Dreamweaver használatával történő webhelytervezést bemutató videót az Access Photoshop from Dreamweaver to enhance web image (A Photoshop megnyitása a Dreamweaverből a webes kép javításához) című cikkben tekintheti meg.

Egérmutatásra változó képek létrehozása

Az egérmutatásra változó elem a weblapokon látható olyan gomb vagy kép, amely megváltozik, ha az egérrel rámutatnak. Egérmutatásra változó kép létrehozásához legalább két kép szükséges: a normál állapotban látható elsődleges kép, illetve a megváltozott állapotban látható másodlagos kép.

A Photoshop számos hasznos eszközt kínál az egérmutatásra változó képek létrehozásához:

  • Az elsődleges és másodlagos képeket rétegek használatával hozhatja létre. Miután létrehozta egy réteg tartalmát, másolatot készíthet a rétegről, melynek szerkesztésével az eredetitől némileg eltérő tartalomhoz juthat, miközben a rétegek illeszkedését nem bontja meg. Egérmutatásra változó elemek effektjeinek létrehozásakor megváltoztathatja a rétegstílust, a láthatóságot vagy helyzetet, módosíthatja a színeket és a színárnyalatokat, illetve akár szűrőhatásokat is alkalmazhat. Lásd: Rétegek másolása.

  • Rétegstílusokat is alkalmazhat annak érdekében, hogy az elsődleges réteget felruházza bizonyos effektekkel, például színátfedésekkel, vetett árnyékkal, ragyogással vagy domborítással. Az egérmutatásra változó párok létrehozásához elegendő menteni a kép egy-egy változatát a rétegstílus bekapcsolt, illetve kikapcsolt állapotában. Lásd Rétegeffektek és stílusok.

  • A Stílusok panel előre definiált stílusainak segítségével gyorsan létrehozhat olyan egérmutatásra változó gombokat, amelyek a normál állapoton kívül rendelkeznek egy rámutatásra, illetve egy az egérgomb lenyomására megjelenő állapottal is. A Téglalap eszközzel egyszerű alakzatot rajzolhat, majd automatikusan gombbá alakíthatja egy stílus, például a normál bevésett stílus alkalmazásával. Ezután a réteg másolásával és egyéb előre definiált stílusok, például a bevésett rámutatási stílus alkalmazásával további gombállapotokat hozhat létre. Az egyes rétegeket csupán külön képekként kell menteni az egérmutatásra változó gombkészlet elkészítéséhez.

  • A Mentés webre és eszközökre párbeszédpanelen az egérmutatásra változó képek webkompatibilis formátumban, optimális fájlmérettel menthetők. 

Megjegyzés:

Az egérmutatásra változó képek mentésekor egy elnevezési szabály alkalmazásával különböztethető meg az elsődleges (egérmutatás nélküli) és a másodlagos (egérmutatásos) kép.

A Photoshop alkalmazásban létrehozott egérmutatásra változó gombkészletet a Dreamweaver segítségével weblapra helyezheti: ilyenkor az alkalmazás automatikusan létrehozza a rámutatási művelethez szükséges JavaScript-kódot.

Exportálás Zoomify formátumba

A weben közzétehet nagy felbontású képeket, melyek részleteit az érdeklődők pásztázással és nagyítással tekinthetik meg. A szokványos méretű kép ugyanannyi idő alatt töltődik le, mint egy vele egyező méretű JPEG-fájl. A Photoshop exportálja a webkiszolgálóra feltölthető JPEG-fájlokat és HTML-fájlt.

  1. Válassza a Fájl > Exportálás > Zoomify parancsot, és adja meg az exportálási beállításokat.

    Sablon

    A böngészőben megtekintett kép hátterének és navigációjának beállítása.

    A kimenet helye

    A fájl helye és neve.

    A kép mozaikszerű elrendezésének beállításai

    A kép minősége.

    A böngésző beállításai

    A böngészőben megjelenő alapkép szélessége és hosszúsága képpontokban.

  2. Töltse fel a HTML-fájlt és a képfájlokat a webkiszolgálóra.

Hexadecimális színértékek használata

A Photoshop alkalmazással megjeleníthetők, illetve későbbi használatra HTML-fájlba másolhatók a képek színeinek hexadecimális értékei.

Hexadecimális színértékek megjelenítése az Információs panelen

  1. Válassza az Ablak > Információ parancsot vagy kattintson az Információ panel fülre a panel megjelenítéséhez.
  2. Válassza a panel menüjének Panel beállításai parancsát. Az Első színérték vagy Második színérték területen válassza a Webszín lehetőséget a Mód menüből, és kattintson az OK gombra.
  3. Helyezze a mutatót a fölé a szín fölé, amelynek meg szeretné jeleníteni a hexadecimális értékeit.

Szín másolása hexadecimális értékként

A Photoshop a színeket hexadecimális értékekként, ezeket tartalmazó HTML COLOR attribútumokba ágyazva (color=#xxyyzz) és önmagukban is tudja másolni.

  1. Tegye az alábbiak egyikét:
    • Jelölje ki a Pipetta eszközt, és húzza a mutatót a másolandó szín fölé. Windows rendszerben kattintson a jobb gombbal, Mac OS esetén pedig a Control billentyű nyomva tartása mellett kattintson, és válassza a Szín HTML-kénti másolása vagy a Szín hexadecimális kódjának másolása parancsot.

    • Állítsa be az előtér színét a Szín panelen, a Színtár panelen vagy az Adobe Pipettával. A Szín panel menüjében kattintson a Szín HTML-kénti másolása vagy a Szín hexadecimális kódjának másolása parancsra.

    • A Mentés webre és eszközökre párbeszédpanelben kattintson a színtárra, vagy válassza a Matt > Egyéb elemet. Az Adobe Pipettában kattintson jobb gombbal a hexadecimális értékre, majd válassza a Másolás elemet.

  2. Nyissa meg a kívánt fájlt egy HTML-szerkesztőben, és válassza a Szerkesztés > Beillesztés elemet.

Kapjon segítséget gyorsabban és könnyebben!

Új felhasználó?