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 testreszabott formátumokban.

  • Rétegek és szeletek alkalmazásával készítheti el a weblapokat és az azokhoz tartozó felület elemeit. (Lásd: Rétegek és Weblapok szeletelé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 előgördülő szöveget vagy gombgrafikát a Dreamweaver vagy a Flash alkalmazásba történő importálás érdekében.

  • 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.

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 megtekintheti a Photoshop és a Dreamweaver használatával történő webhelytervezést bemutató videót.

Előgörgetéses képek létrehozása

Az előgörgetés a weblapokon látható olyan gomb vagy kép, amely megváltozik, ha az egérrel rámutatnak. Előgörgetés 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 előgörgetéses 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. Az előgörgetési hatások létrehozásakor megváltoztathatja az adott réteg stílusát, láthatóságát vagy helyzetét, 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 hatásokkal, például színátfedésekkel, vetett árnyékkal, ragyogással vagy domborítással. Az előgörgetéses 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étegeffektusok és stílusok.

  • A Stílusok panel előre definiált stílusainak segítségével gyorsan létrehozhat olyan előgörgetéses 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 előgörgetéses gombkészlet elkészítéséhez.

  • A Mentés webre és eszközökre párbeszédpanelen mentse az előgördítési képeket webkompatibilis formátumban és optimális fájlméretben. Lásd: Képek optimalizálása.

Megjegyzés:

Az előgörgetéses képek mentésekor egy elnevezési szabály alkalmazásával különböztethető meg az elsődleges (nem előgördített állapotú) és a másodlagos (előregördített állapotú) kép.

A Photoshop alkalmazásban létrehozott előgörgetéses 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 nagyfelbontá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 színválasztó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 Maszk > 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.

Ez a munka a Creative Commons Nevezd meg!-Ne add el!-Így add tovább! 3.0 Unported licenc alatt lett közzétéve.  A Twitter™ és Facebook közzétételeket a Creative Commons jogi feltételei nem szabályozzák.

Jogi közlemények   |   Online adatvédelmi nyilatkozat