Slice tool, avagy a képek darabolása


Rengeteg féle képpen lehet gombokat készíteni, de legtöbbször kell a Slice Tool. Ez fejtörést okoz a kezdőknél: miként lehet a dokumentumot feldarabolni. A leírás ezt mutatja be.

1.) Az első művelet aktiválni az eszközt, amit a K billentyű leütésével tehetünk meg, vagy a palettán:

2.) Majd kijelöljük a vágási területet:

3.) A kijelölt területekre (slice-okra) ha a jobb egérgombbal kattintunk, meg lehet adni egy nevet, így akár minden egyes kijelölt területet más-más nevekkel láthatunk el. Ennek azért van haszna, mert később, a mentés során a képek már ezen a néven kerülnek az “images” könyvtárba, és nem kell a fájlok elnevezésével bajlódni.
A slice-k nevénél ténylegesen csak a nevet adjuk meg, a kiterjesztést nem kell odaírni, az attól függően fog változni, hogy a file/save for web …. menüpont alatt milyen formátumot választunk.

4.) A részek külön, illetve egyszerre is menthetőek attól függően, hogy a “file-save for web …” menüpontban hány darab részecskét jelölünk ki. Ha több részet akarunk kijelölni, azt a SHIFT billentyű lenyomvatartásával érhetjük el.

kiegészítette: Harder

Kapcsolódó bejegyzések:
  • Sarat még nem láttam, hogyan készítenek, ezért kidolgoztam egy hatásos effektsorozatot az elkészítésére.1.) Első lépésben elkészítem az új dokumentum …

  • Ebben a kis tutorialban megtanulhatjuk azt, hogy kell elkészíteni a 2006-os Labdarugó Világbajnokság hátterét.1.) Nyissunk egy 400*400 képet és töltsük k …

  • A mini bannerek használata egy elterjedt lehetőség a társoldalság jelzésére. Általában 88x31px a méretük, de a szép háttér készítéséhez nagyobb vászonra van szü …

  • Készíteni egy éjjelikamerás képet? Minek, amikor elkészítheted Photoshoppal is. A teendõd a következõ:1.) Fogod a képet, majd szürkévé varázsolod (CTRL+ …

  • Az interneten hóditanak a SIGek, az úgynevezett aláírások. A következő leírásban megtanulhatjuk, hogyan is lehet egyszerűen elkészíteni egyet.1.) Készítsün …

A cikket beküldte: Tupacko (http://webpillango.org)

36 hozzászólás

  1. spy says:

    Azt szeretném megtudni, hogyan helyezhetek el gif formátumú animációkat a photosoppal készített honlapon. (képként van elmentve a honlap látványterve) előre is köszi Spy

  2. Harder says:

    Úgy lehet, hogy a animált gif-t külön képként be kell szúrni a html-be, tehát nem lehet azt megcsinálni, hogy belemented a képbe (“képként van elmentve”).
    Ha mutatsz egy URL-t, akkor egyszerűbb lenne tanácsot adni.

  3. Peti says:

    Sziasztok

    Olyan kérdésem lenne, hogy van egy olyan rajzom amit felnagyítottam arra a méretre amibe nekem kellene de a nyomtatóm csak a/4 ben tud nyomtatni és az istenér nem tudom pontosan eldarabolni a/4 méretre!
    Ez egy tengeralattjáró modell rajza és muszály lenne hogy pontos legyen.
    Légyszi segítsetek….

  4. Harder says:

    Egészen pontosan milyen segítségre vársz, hogy tudunk segíteni ebben?

  5. Peti says:

    Ez a kép 130cm széles és 28cm magas és ezt a képet kellene pontosan eldarabolni a/4 méretre az illesztések végett. Ez az amit nem tudok megoldani….. lehet csak a szememet böki ki olyan egyszerü

  6. Peti says:

    Esetleg van erre valami progi amivel ez megoldható?
    Előre is köszi

  7. Tupacko says:

    Valaszd mi a fix meretu darabolast, majd add meg az a4-es meretet es vagd darabokra es mentsd el kulon a reszeket.

  8. santos says:

    sziasztok! Megszeretném kérdezni, hogy mért nem látszik a design a weblapomon. www.acmilan4ever.atw.hu .Légyszi segítsetek

  9. Harder says:

    A megadott útvonalon nem találja a fájlokat. Ennek vagy az az oka, hogy nem töltötted fel a képeket, vagy nem oda tetted fel őket ahova a hivatkozások mutatnak. Így a megoldás, hogy feltöltöd a képeket a megfelelő helyre, vagy átírod a forrást a html-ekben.

  10. bazilosz says:

    Sziasztok!
    Kérem, aki tud segítsen! A következőt szeretném megoldani Photoshop-al, de még nem jöttem rá hogyan kellene: Adott egy kép, amit el kellene takarni és naponként egyre többet megmutatni belőle (amolyan “adventi kalendárium”-szerű) egyre több részletre lehetne kattintani, ezek külön html oldalakra vinnének, de csak arra, amely nap van! Tehát előre ne lehessen csalni, hogy mi van a letakart a többi rész alatt… Addig eljutottam, hogy felszeleteltem, de tovább már tanácstalan vagyok. Sokféleképpen próbáltam, de nem az igazi… Ti hogyan folytatnátok?
    Előre is köszi a segítséget!

  11. Bazilosz says:

    Lehet, hogy nem is képes ilyenre a Photoshop??? Nem tudom!

  12. BonFire says:

    Szerintem, ez nem kimondottan a Photoshop kategóriába tartozik, habár a Slice Tool nagyon is hasznos kis segédszerszám weblapkészítéskor. Böngészd át a programozásokkal PHP-MySQL-lel, a kódokkal, valamint a Weblapkészítéssel és a CSS-XHTML-lel foglalkozó írásokat. Lehet, hogy ott már szóba került, és a gyűjtőoldalak alján lapozd át a régebbi írásokat is. Ha a Photoshoppal ezt nem lehet megcsinálni (azért nem kimondottan weboldal készítésére lett kitalálva), ezen az oldalon sokféle téma van. Úgyhogy keresgélj, mazsolázz, hátha szerencséd lesz!

  13. tóth tamás says:

    iasztok!Én még zsír új vagyok ezen a honlapon.Teljesen kezdő vagyok a photoshopban és szeretnék segítcséget kérni.arra lennék kiváncsi ,hogy én ha lefotozok egy járdát és a járda helyett szeretnék egy térkővel borított területet de ugy,hogy a helyszin megmaradjon akkor annak,hogy kezdjek neki vagy mejik tutoriál vezet rá engem erre.tehátszeretném a térkövet megtervezni ha lehetséges.Köszönöm.liftfish

  14. BonFire says:

    Ha, jól értettem, itt arról lenne szó, hogy csak a “padló” felületét, szeretnéd kicserélni, az utcák és a házak pedig maradjanak ugyanúgy. Több lehetsége módszer van, de kezdőknek nem biztos, hogy elsőre sikerül. Azért megpróbálom egyszerűen leírni.

    Először is, keress a weben egy olyan képet, ami a térkő képéről készült. Kereshetsz kimondottan kő textúrákat is. Ha ez megvan, a két képet össze kell dolgozni. A dolog hosszadalmas, nézz körül az oldalon az alakok kivágása között, vagy a maszkolásokra keress rá.

    Ha már sikerül a két képet egyberakni, még mindig egyeztetni kell a perspektívákat. Pl, ha a textúra függőleges, a táj pedig perspektivikus. Ehhez a textúra képét torzítani kell, amit az Edit/Free Transformmal tehtsz meg. Ha tényleg úgy van, ahogy mondod, és teljesen kezdő vagy, akkor egy kicsit nagy fába vágtad a fejszét, de a lényeg az, hogy ezeket az alapvető eszközhasználatokat tanuld meg, mert enélkül nem lesz sikerélményed.

    Jó munkát hozzá!

  15. tóth tamás says:

    Köszönöm ,hogy visszaírtál BONFIRE.Idöközben rájöttem ,hogy nem gyenge progi és elég lessz kitanulni a nekem megfelelő szinten.Én térkövezéssel tetőzéssel és kertépítéssel foglalkozom,és szeretném a megrendelőim számára megmutatni,hogy igy fog kinézni a terület amelyet szeretnének letérkövezni.annyi lenne még a kérdés,hogyha kivágok egy térkőröl képet és beillesztem a területre ,nyilván a méretarányok nagyban eltérőek lessznek.Ezt össze lehet e úgy méretezni,hogy valósághű legyen .Tehát mintha eredetileg ugy fotoztam volna le.

  16. BonFire says:

    A méretarányokat szintén össze lehet hozni, sok türelemmel. Én pl már csináltam magamról fotót, egy szobában, majd a padjót, falakat lecseréltem. Tehát meg lehet csinálni. Egyedül azzal lehet gond, ha a padlózat felülete dimbes-dombos, vagyis dimenziói vannak. Aztán meg arra kell figyelmet fordítani, hogy a fényképek, amikkel dolgozol, a lehető legnagyobb felbontásúak legyenek, mivel kicsinyíteni lehet, de több részletet hozzáadni mindőségveszteség nélkül, már nem nagyon.

    Azt hiszem, akik építkezéssel vagy ilyesmivel foglalkoznak, a látványterveket inkább valamilyen 3D-s progival készítik. Ott ugye megvannak az alapok, ráhúzza a textúrát, hozzáadja a fényforrásokat, és attól kezdve a program önállóan dolgozik. De mindenesetre jó, ha megtanulod a PS-t alapozásnak, mert a 3D programok valami horrorszerűen bonyolultak.
    Itt le vannak írva az eszközök, és ami nélkülözhetetlen.
    http://www.tutorial.hu/alapveto-tudnivalok/

    Ha, pedig sürgős a dolog, keresned kell egy Photoshoppos havert.

    Sok sikert!

  17. Pocok says:

    Sziasztok!!
    Lenne egy kérdésem: az miért lehet hogy nekem nem működik a save for web parancs? nem tudom elmenteni így a képeket a slice tool után!
    légyszi segítsetek!

  18. BonFire says:

    Ha a Save for Web inaktív, akkor 32 bites képpel dolgozol! Leírtam már kétmillió helyen, hogy amennyiben egyes menüpontok szürkék, vagyis inaktívak, az azért van, mert nem jó szín-üzemmódban dolgozunk. Egyáltalán minek kell azt átállítani? Magától nem állítódik át, mégis minden második embernek ezzel van problémája. Fölösleges, sok effekt nem működik, a monitor meg amúgy sem tudja megjeleníteni. Legyen elég az a 8 bit csatornánként, az már 24 bites kép. A mai nagy divatos fényképezőgép márkák még ennyire sem képesek. Jó na némelyikből kijön egy 10-12 bites kép!

    Tehát Image>Mode>RGB Color>8 bit/channel.

  19. Pocok says:

    Hello BonFire!

    megnéztem, és a kép alapból 8 bites csatornaként van/volt beállítva és így sem lehet használni a save for web parancsot, tehát továbbra is inaktív!! lenne még ötleted hogy miért?
    előre is köszi!

  20. Tupacko says:

    Bármennyire is fura, de ha túl nagy egy kép, akkor sem lehet menteni save for web menüpontból. Igaz, ilyen esetben szól a program, hogy ekkora méretű képet nem ajánl webes felületen publikálni. Egyáltalán megnyitja a Save for web ablakot vagy csak meteni nem enged?

  21. BonFire says:

    Azt nem tudtam, hogy a méret számít, de eleve abból indultam ki, hogy weboldalnyi méretű a kép, akkor pedig működnie kell. Eredeti a program?

  22. Pocok says:

    Hát az a helyzet, hogy alapból inaktív a save for web… szóval már azt sem engedi…… a program eredeti és az a helyzet, hogy már egyszer sikerült megcsinálni….. de valamiért nem engedi….
    az lehet hogy amiatt nem engedi, hogy felraktam egy magyarosítást??

  23. BonFire says:

    Tehát, ha jól értem, van egy eredeti angol, és egy eredeti magyar verzió. Néhány esetben összeférhetetlenséget jeleznek a programok, legalábbis másoktól már hallottam olyasmit, hogy telepítéskor a “Csak egy Adobe termék telepíthető a számítógépre” figyelmeztetést küldte. Olyat tudok elképzelni, hogy az angolra rátelepítetted a magyart. Tehát az angol nem volt uninstallálva rendesen. Ilyenkor még a regisztrációkat is ki kell pucolni a gépből valamilyen cleanerrel, és utána feltelepíteni a másikat. Nagyon is el tudom képzelni, hogy a kettő összeakadt, de éppen csak annyira, hogy a program 1-2 funkcióját bénítsa meg. Javaslatom uninstall, aztán a regisztrációk törlése, és egy új telepítés. Egyébként ha már megszoktad az angolt, akkor nincs szükséged a magyarra, ha meg még most tanulod, akkor édesmindegy, milyen nyelvű. Szerintem használd az angolt!

  24. Pocok says:

    Köszönöm szépen sikerült megoldani a problémát!
    az a helyzet, hogy egy angol nyelvűt raktam fel, és találtam a neten egy magyarosítást, szóval nem külön magyar nyelvűt, hanem csak egy magyarosítást….
    de most letöröltem mindent, és újra raktam, és így angol, de legalább meg tudom csinálni amit szeretnék!!!
    NAGYON KÖSZÖNÖM A SEGÍTSÉGET MÉGEGYSZER!!!!

  25. BonFire says:

    Ezért kell vigyázni az ilyen talált dolgokkal. Jó, tudom én, hogy előre úgysem lehet tudni, hogy lesz-e gubanc, viszont ha elkezdjük használni, és valami nem jól működik, akkor mindenesetre érdemes elgondolkodni rajta. Örülök, hogy sikerült megoldani.

    A magyarosítást meg ne sajnáld! Nekem egyszer kellett muszájból más gépén magyar PS-sel dolgozni, és majdnem beletört a bicskám egy pofonegyszerű feladatba. Semmit nem találtam, eltévedtem a menükben, csak úgy égett a képemről a bőr. Mondhatom, elég kínos volt :)

  26. codee47 says:

    Sziasztok!

    Talán az első “slice tool” -al kapcsolatos hsz az enyém lesz :) Szóval, hogyan tudok csak egy “slice tool” -al megjelölt részt elmenteni?
    (egy bizonyos részt több féle kinézettel kell mentenem)
    Persze tudok alternatív megoldást a dologra de érdekel erre képes e ez a funkció.

    Üdv, codee47

  27. BonFire says:

    Ha eljutottál a 4. lépésig, azaz a Save for Web &Devices menüpontig, az ottani panelon a mutatóeszközzel ki lehet választani egyes szeleteket, amit írva vagyon. Amelyik éppen aktív, annak a keret színe megváltozik. Ennek beállítod a kívánt paramétereit és mented. Kábé ennyi.

  28. Tupacko says:

    Ha csak az adott részt szeretnéd menteni, vagyis nem akarod, hogy az összes slice mentésre kerüljön, akkor válaszd ki a mentési ablaknál (amikor a file nevét választod) a legalsó legördülő listából (Slices felirata van), hogy Selected Slices.

  29. codee47 says:

    Köszi Tupacko, ez a megoldás a kérdésemre. Sajna elkerülte a figyelmemet pedig már egy ideje használom!

  30. Tupacko says:

    Szívesen :)

  31. bonym says:

    Van egy psd amit a grafikusunk készít , felslice-olom nagy munkával.
    Ezután szó a grafikus, hogy változtatott ezt-azt a psd szineibenben, vágjam újra.
    Kérdés: hogyan tudom az első slice-hálót rátenni az új psd-re, hogy ne kelljen újra vágni?

  32. Tupacko says:

    Allj forditva a dologhoz. Nyitsd meg a regi es az uj PSDt is. A regibol torold ki az osszes reteget majd az ujban jelold ki az osszes reteget es huzd at a regi PSDbe. Furan hangzik, de ha athuzol egy reteget egy PSDbol egy masik megnyitott PSDbe, akkor a Photoshop “atmasolja”. Igazitsd be oket, hogy pont kozepen legyenek, es ha csak a szinekhez volt hozzanyulva, akkor biztosan jol lesz a mostani felvagas is.

    Tipp: keszits biztonsagi masolatot mindket PSDrol!

  33. Harder says:

    Jó kérdés, én is kíváncsi lennék a válaszra. :) Átmenetileg azt tudom tanácsolni amit mi is csinálunk: ha egyszer leadtam buildelni egy cuccot, akkor később a módosítások előtt megkérdezem a sitebuildert, hogy slice-okat mentett-e bele és azokat tartsuk-e, mert ha igen, küldje vissza a psd-t és abban csinálom a módosításokat.
    Ha azt mondja, nem kell, módosítsak a nálam lévő psd-be, akkor sincs gond, biztosra mentem hogy nem okozok többletmunkát a kollegámnak.

    Tudom nem megoldás az eredeti kérdésre, de mi így szoktuk ezt problémát kivédeni és szerintem csak egészen minimális odafigyelést igényel a grafikus részéről.

  34. andatti says:

    hello!

    Szeretném egy ismerősöm honlapját megcsinálni, (vartio) a .psd-t elfogadta, már “csak” fel kéne darabolni, majd css-ben, html-el leprogramozni. De nekem már a darabolás sem megy, mert itt a mutatott képeken is szabályos 4szög alakú darabolások vannak, a tervezett honlap meg tele van íves elemekkel…
    ha varázslóval jelölöm ki, akkor a szélei rondák lesznek és akkor sem sikerül csak az adott részt elmentenem…
    abba már bele sem kezdek, hogy még ha sikerül is valahogy a darabolás akkor hogy lehet az így kapott képeket igazítani. Mert a háttérkép pl. ugye mindenütt kéne, h legyen, a gombok meg igazítva, stb. …

  35. Harder says:

    Az elvet innen szerintem meg lehet érteni: Honlapgrafika készítése Photoshop és Dreamweaver segítségével | tutorial.hu viszont a módszer – táblázatos felépítés – ma már igencsak elavultnak számít, inkább ne használd. A kulcsszó a css és xhtml alapú oldal építése, de ha ennyire nem vagy képben (kérdésekből ez jön le), akkor kezd el tanulni, mert így nem fogod tudni összerakni azt a lapot mostanában.

    Itt a lapon is van számtalan leírás ezzel kapcsolatban, de lehet hogy még jobb lenne ha vennél valami könyvet (pl. webszerkesztés stílusan címre keress rá) és az 1. oldaltól indulnál.

  36. andatti says:

    Köszi Harder!
    Ebből annyi az igazság, hogy html úgy ahgy megy, dinamikus honlapba már csináltam önálló oldalakat (html-css, java sript kódokat illesztettem be, amiket átvettem), Pesten levizsgáztam webdesign-ból, (Photoshop-ot használtunk)… MInden mást most tanulok. Van dreamweaver-em, de angol és még nem mélyedtem el benne, az ajánlott könyv talán meg is van, de még nem olvastam…
    Mégegyszer köszi a gyors választ. Próbálok gyorsan fejlődni… ;) bár ezt a munkát már inkább kiadnám, hisz szerda estére kész kéne legyen. Igaz 1 napos határidővel már többen is jelentkeztek…

Szólj hozzá
a Slice tool, avagy a képek darabolása c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>