Sziasztok!

Photoshopban készített webdesign-ból vagdosok épp, hogy elhelyezzek képeket egy honlapon, és a slice-ok készítésénél egy nagyon monoton feladatot kell egyelőre manuálisan elvégeznem, és felmerült bennem, hogy Ti simán lehet, hogy tudtok jó módszert arra, hogy hogyan lehet ezt az egészet automatizálni, pl. makróval.
A psd-fájl szerencsére nagyon jól strukturált, a különböző rétegek szépen csoportosítva is vannak, így könnyű eligazodni benne, jó munkát csinált a dizájner srác.

Vegyünk egy példát: pl. van egy layer group, amin belül különböző színű, de azonos méretű elemeket tartalmazó layerek vannak. Mindegyik színű layerből szeretnék egy transzparens png-t készíteni.
Mondjuk így néz ki egy csoport:
-- csoport-blabla-1
|-- blabla-layer-1 (visible)
|-- blabla-layer-2 (hidden)
|-- blabla-layer-3 (hidden)
|-- blabla-layer-4 (hidden)
-- csoport-blabla-2
|-- .........

(itt pl. a csoport-blabla-1 nevű csoporton belül van 4 layer, az első látható is, többi rejtve; a 4 layer pedig mondjuk 4 különböző színű, de hasonlóan kinéző elem)

Jelenleg így csinálom:
1.) a layerek méretének megfelelően készítek a rétegek köré egy nagy slice-ot (slice tool-lal körbejelölöm), amibe mindegyik belefér (amúgy ugyanakkora méretűek egy csoporton belül).
2.) ezután megjelenítem azt a layert, amelyik színűt épp szeretném lementeni, aztán ebből "Save for web and devices..."-zal készítek egy transzparens png-t, úgy, hogy mondjuk beállítom az arányt 15%-ra (lásd Percent jobb oldalt), hogy az eredeti mérethez képest ennyire csökkentse a "végtermék" méretét. (Itt csak a selected slice-t mentem le mindig, aminél az aktív alapból ki van jelölve szerencsére, ezért ezt nem kell mindig kiválasztani.)
Az elnevezés mondjuk a következő lesz:
"slice-blabla-layer-1.png"
3.) az előző layert most elrejtem, és megjelenítem a következő színűt. Így ismétlődik a 2. lépés (arány beállítása, Save), annyi különbséggel, hogy most már "slice-blabla-layer-2.png"-t adok meg a kép nevének. És így tovább, egészen addig, amíg végigérek a layercsoporton belüli elemek számáig.

Ez nagyon macerás, mert mondjuk van olyan layercsoport, amin belül 14 különböző színű elem van, mindre azonos lépéssorozatot kell megcsinálni, de a végére kicsit uncsi ez a mechanikus szarakodás.
Lehet ezt valahogy "makrósítani", hogy csak egy gombnyomásra végigmenjen mondjuk egy egész layer groupon? A névnél az az érdekes, hogy lehet mindig az épp slice-on belül látható layer nevével egyező (a layer is úgy van számozva, hogy 1, 2, 3, stb.).

Nem tudom, sikerült-e érthetően leírnom... Kérdezzetek vissza, ha totál érthetetlen volt az egész, megpróbálom másként illusztrálni.
De mondjuk gondoljatok olyasmire, hogy van egy csoport, amiben különböző színű, de hasonló kinézetű gombok találhatók, mindet külön képként (transzparens png-ként) szeretnéd megkapni, egy gombnyomásra. (Nálam most más példa van, de ezt így egyszerűbb elképzelni.)

Előre is nagyon köszönöm a segítséget!

Sk8erPeter

Actions panelt kapcsold be. Létrehozhatsz automatizált feladatokat.
Ráállsz a rétegre, az actionoknál újat csinálsz, elkezd rögzíteni. Megcsinálod, majd stop, és elmenti. Sajnos korlátozottak a képességei, mentésnél ha átnevezel, azt sem tudja dinamikusan megoldani, meg egy halom nyűge van. De van...

Hold on, trying to give a fuck... Nope, not Happening • Powered by Fedora Linux • "Az élet olyan sz@r, szerencsére a felén már túl vagyok" Al Bundy

"Sajnos korlátozottak a képességei"
Igen, sajnos ezt érzékelem.
Már felvettem egy actiont, úgy, hogy megcsináltam azokat a lépéseket, amiket említettem, de sajnos csak egy lépést könnyített meg, mert pl. azt sem tudtam beállítani, hogy mindig a Selected slice legyen az, amit csak elkészít (gondolom csak akkor válik aktívvá a legutóbbi slice, amikor megnyitom a "Save for Web and Devices..." ablakot), tehát alapból az All slices az érvényes, így minden más slice-ot törölnöm kell, ha tényleg azt akarom, hogy csak egy slice képét készítse el; plusz nem tud "végigmenni" a csoport elemein, a layereket továbbra is manuálisan kell eltüntetnem-megjelenítgetnem, majd utána lenyomom a hotkey-kombót a saját actionömre.
De annak azért örülök, hogy legalább nem kell immár kézzel (Ctrl+Alt+Shift+S-sel) megnyitni a "Save for Web and Devices..." opciót, majd szintén manuálisan beállítgatni az arányt, Save, majd elnevezés...
Viszont sajnos ugye ez mindig azonos néven fogja elnevezni a slice-ból készített képet, így még az újabb action végrehajtása előtt át kell dobálnom másik könyvtárba a mentett képet, vagy legalább átnevezni...ez is "kézzel" történik, tehát lassú (még ha TC-ben jó gyorsan is tudok billentyűzettel ilyesmiket végrehajtani).
Ettől függetlenül legalább ez az action is megkönnyíti valamelyest a dolgot, de azt hittem, van mód arra is, hogy a teljes folyamatot sikerüljön automatizálni. Tehát hogy a group layereit ne kelljen kézzel eltüntetni, ill. megjeleníteni, plusz ne legyen szükség kézi áthelyezgetésre+átnevezgetésre.

[ Szerkesztve ]

Sk8erPeter

Ha úgyis mindet elmented, akkor miért nem külön slice-ként kezeled? Így nem kell Action, meg az elnevezés problémája is letudva.

[ Szerkesztve ]

Mindenki tudja, hogy bizonyos dolgokat nem lehet megvalósítani, mígnem jön valaki, aki erről nem tud, és megvalósítja. (Albert Einstein)

Őőő, bocsi, de ezt most nem értem. Mármint hogy miért lenne jó külön slice-ként kezelni. Egyes elemeket úgy szeretnék kivágni, hogy szándékosan tökéletesen egyező méretű és pozicionálású slice-okban legyenek. Pl. van egy layer group, azon belül különböző színű (és esetleg formájú), DE azonos funkciójú és célpozíciójú elemek találhatók, mert én mondjuk a honlapon majd JavaScripttel szeretném ezeket cserélgetni (pl. azonos elemből egy másik színűre), és pont jó, ha mondjuk egy <img> tagnek csak az src attribútumát módosítom JS-sel, így megadva a másik képet, hogy épp az jelenjen meg az oldalon.
Hogy egy hülye példát említsek: van mondjuk egy piros labda egy adott pozícióban, adott méretben, de én mondjuk egy nyíl lenyomásának hatására szeretnék ennek a piros labdának a helyére egy sárga labdát tenni JavaScripttel a honlapon. Ezt meg is tudom tenni, mert mondjuk ki van vágva a sárga labda is, megvan külön transzparens png-ként.
A kivágás során tehát mondjuk van egy labda layer group, és ezen belül külön layer a piros labda, a sárga labda, stb., mindegyik ugyanabban a pozícióban. Ehhez tehát elég egy slice, aztán csak megjelenítem azt a réteget, amit ki szeretnék vágni. Csak a megjelenítést/eltüntetést kell változtatnom, egyébként minden egyezik (amikor a "Save for Web and Devices..."-ra megyek).
Most ez szándékosan egyszerű példa, de ilyesmire kell gondolni.

Az action meg nekem nyilván arra kellett, hogy ne kelljen külön-külön kattintgatni a Save for Web and Devices linkre, beállítani mondjuk az arányt, stb., hanem az csak egy gombnyomás legyen.

Most a komment megírásának végére leesett, hogy gondolom Te arra gondolsz, hogy minden slice-t külön el tudnék kézzel nevezni, és külön-külön minden layerhez létrehoznék egy-egy slice-t, és akkor kijelölve mindet, lenyomom az actiont elindító hotkey-t. De ez mitől egyszerűbb, mint az, amit eddig csináltam? Akkor annyiból változik, hogy minden layerhez külön slice van, külön meg kell adnom a nevét, stb.
Vagy máshogy értetted?

[ Szerkesztve ]

Sk8erPeter

Miért nem kérdezel meg pár sitebuildert, hogy ők hogy szokták csinálni? Lehet, hogy van rá célszoftver, és nem Ps-ben küszködnek.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

Hát kösz, ha lenne körülöttem ezzel kapcsolatban érdemi segítség, nem tettem volna fel a kérdést...

Sk8erPeter

Nem azért kérdeztem, mert unatkozom... (Komplett honlapokat készítek, bár mostanában "csak" a Design-ra van kereslet elsősorban, és a PS kiválóan alkalmas a feladatra)

Amúgy (ha már itt tartunk) felhívtam a Support-ot, azt mondták, hogy ellenőrizzem az Adobe updater-t, mert frissítés formájában ezt a hibát már orvosolták. Megnéztem, látszólag nem volt gond, engedélyezve volt, de ennek ellenére letiltottam, majd újra engedélyeztem és egyből lekapott közel 150MB frissítést, ami után megszűnt a hibajelenség.

Sk8erPeter
Action-t felejtsd már el, senki nem használja ilyen feladathoz.
Adott egy adott típusú/megjelenésű gomb, aminek le kell gyártani 3 állapotát: normál/amikor az egérkurzor fölé kerül/amikor kattintanak rajta, a megadott eseménykor a JS kódod meg cserélgeti őket.

Megalkotod az első adott kinézetű/megjelenésű gombot, duplikálod (és megváltoztatod a színét), duplikálod és ennek a színét is változtatod. Létrehozol 3 slice-ot (megadhatod a nevét és pontos méretét, ami megfelel a gomb nevének és mérteinek stb) aztán szépen a slice-hoz pontosan igazítod a gombokat. Ha a slice-ok nevét értelmesen adod meg (pl button1_normal/button1_onover/button1_onclick) akkor a safe for web-nél ilyen névvel elmenti a 3 gombot.

Nem tudom milyen jellegű oldal készül, de nem jellemző, hogy túl sok egyéni megjelenésű gombot kellene legyártani(ha meg igen, akkor is mindegy), mert 1 gomb, 3 állapotát, 3 slice-ban kell megoldani. Bonyolultabb leírni, mint megcsinálni...

Mindenki tudja, hogy bizonyos dolgokat nem lehet megvalósítani, mígnem jön valaki, aki erről nem tud, és megvalósítja. (Albert Einstein)

Na jó, akkor konkretizálom: egy olyan fura feladatot kell készítenem, hogy rajzfilmfigura-szerű emberalakokat kell összerakosgatnom testrészenként, hogy a testrészek váltogathatók legyenek a honlapon JavaScripttel, egy-egy nyíl hatására.
Mondjuk van egy kopasz emberke, annak a fejére meg mondjuk rápakolok különböző formájú és színű hajakat (a hajak transzparens png-k). Kézzel megcsinálgattam már jópárat, tök faszán is működik, úgy néz ki, ahogy kell. Igazából hasonlóan, mint amikor Photoshopban eltüntetem, ill. megjelenítem az adott layereket, csak itt JavaScriptben image source-okat váltogatok.
Van pl. 14 hajforma, és azon belül 8 hozzá tartozó hajszín. Egy hajforma egy layer group. Ezen belül van a 8 hajszínt reprezentáló layer. Ezek mind meg is vannak, készen kaptam őket, csak ki kell vagdosni őket szépen.
Most akkor mind a 8 hajszínre kézzel készítgessek külön slice-okat? Mindet külön-külön nevezzem el? És mindezt 14-szer? (Az 8*12=112 slice-készítés, elnevezgetés.) Akkor ott vagyok, ahol a part szakad...
Nagyjából ugyanannyi idő, mint eltüntetni, illetve megjeleníteni a layereket, majd rányomni az általam létrehozott actionre. Ráadásul ezek a hajak ugye azonos pozícióban vannak, így ha egy, a hierarchiában följebb lévő layert megjelenítek, akkor az alatta lévő layerek nem láthatók, tehát magyarul alkothatok én végtelen mennyiségű slice-ot is, akkor is csak az fog megjelenni a végleges képben, amelyik layer épp visible az adott slice-on belül. Persze azt is lehetne, hogy minden hajat megjelenítek, mind köré ugyanakkora slice-t rajzolok, majd egymás mellé pakolgatom őket valahogy. De akkor meg ott az áthelyezgetés problémája... Plusz ezek előre elkészített hajak, nem tudom csak olyan egyszerűen átszínezgetni őket.

És ez csak egy testrész, maga a haj... Pl. ugyanígy van szemforma, és ahhoz tartozó szemszínek is, na meg a többi...

Nem tudom, így már érthetőbben le tudtam-e írni, mi a problémám, és világos-e, hogy miért nem jutok előrébb elsőre megnézve az általad javasolt módszerrel sem. De ha elkerülte valami a figyelmem ezek ellenére is, akkor szólj.

Amúgy köszi, hogy foglalkoztok a dologgal.

[ Szerkesztve ]

Sk8erPeter

De biztos vagy benne, hogy ezt Photoshoppal szokták csinálni? Én ezért javasoltam, hogy olyannal konzultálj, aki hasonló dolgokat művel. Mert bár DVD menüt is lehet csinálni Photoshop+Notepad++ segítségével, kézzeli kódolással, meg lehet csinálni Encore-ral, ami leveszi az összes programozási terhet az ember válláról

Nem hiszem, hogy ezt a rengeteg avatar építő oldalt (ugye valami hasonlóról van szó?) mind a te módszereddel csinálnák. Soha nem érnének a végére, lévén mennyi bigyót lehet változtatni benne. A Ps jó arra, hogy a grafika részét kivitelezzük. De nem biztos, hogy a képek és szeletek mentését is már abban kell megcsinálni.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

Ezt írhattad volna korábban is, erre van beépített eljárás és csak 1 darab slice kell hozzá.

1. Hozz létre 1 slice-t, amin belül ott van az összes menteni kívánt shape-ed

2. File/Scripts/Export Layers to Files és beállítod a formátumot és itt jól látszik, hogy nem kell látszani a layer-nek ahhoz, hogy kimentse.

3. Hákúná Mátátá, milyen gyönyörű szó...Kész.

Mindenki tudja, hogy bizonyos dolgokat nem lehet megvalósítani, mígnem jön valaki, aki erről nem tud, és megvalósítja. (Albert Einstein)

Hali!

Ez elsőre elég faszányosnak tűnik, de most elküldtem a benti gépen, hogy csinálja meg, úgy, hogy egyetlen slice-t hoztam létre, és még azt is bepipáltam (próbaként), hogy csak a visible layereket mentse le ilyen módon, és már egy 20 perce dolgozik rajta... Nem értem, min tököl ennyit. Mondjuk az itteni gép egy 1 GB RAM-mal és 1,8 GHz-es egymagos procival rendelkező fostalicska, amin ráadásul régi rendszer is van, de azért ennyire nem katasztrófa. Mondjuk tény, hogy van kismillió layer ebben az egy darab psd-ben, de akkor sem értem, miért tart neki ennyi ideig végigszaladni a fájlon, amikor elvileg most csak a visible layereket kéne kimentenie, ráadásul csak egyetlen egyet jelenítettem most meg!
Még egy ezzel kapcsolatban: azt meg lehet csinálni itt is, mint a "Save for Web and Devices..." menüpontnál, hogy beállítsam az arányt, hogy az eredetihez képest mekkora méretre csökkentse? Én nem találtam itt ilyet... Lehet, hogy van más módszer a dolog megkerülésére.

Ha igen, akkor nagyon fasza, ha nem, akkor viszont megint nem tartok előrébb. Legfeljebb annyiban, hogy végül is az átméretezésre még akár rá lehetne küldeni egy könyvtáron belül a Photoshopban egy actiont vagy makrót vagy szkriptet, vagy mit tudom én, minek nevezzem már.

===

(#10460) BonFire nyilván nem vagyok biztos benne, hogy Photoshopban szokták csinálni, ezért kérdezősködöm. Bár igazából körülöttem lévők mind Photoshopban vagdosnak dizájnt weblaphoz is, de mondjuk nem ilyen szinten sokat kell kivágniuk, mint most nekem. Franc tudja, az is lehet, hogy Adobe Fireworks-öt használnak ilyenre, én még soha nem használtam utóbbit.

[ Szerkesztve ]

Sk8erPeter

OK, közben befejezte, ki is mentette azt az egyetlen layert, amit visible-re állítottam. Óriási méretben, csak hát nekem ebből a kisebb, 15%-ra csökkentett méret kéne. De továbbra sem értem, miért vizsgált meg egyenként minden layert, amikor senki sem kérte rá. Látszott is a folyamat során, ahogy egy layer fölé megy, megvizsgálja, mintha kitörölné egyenként, aztán a legvégén mindet visszaállítaná.
Azt is tehetném, hogy ne vizsgálja meg mindet, hogy mindig kitörlöm a többi csoportot, ami épp nem kell, aztán visszavonom, amikor végeztem... megint melós (bár ez lenne a legnagyobb gond).
Na, szóval a kicsinyítésre mit tudnátok mondani? Vagy hogy tudnám egyből beállítani a célméretet ebben az esetben?

[ Szerkesztve ]

Sk8erPeter

Már félve kérdezem meg: ugye képernyőfelbontásban dolgoztál? (72 dpi) Ha igen, valami miatt felskálázta mondjuk nyomtatási méretre. Ezt még ki kéne tapasztalni.

A Save For Web and Devices valójában arra való, hogy optimalizáltan tudjuk menteni a képeinket, de nem minden körülmények között. Ha neked az automatizált mentési folyamat a fontosabb, cserébe le kell mondani az optimalizáltságról. Bár tapasztalatból lehet tudni, hány százalékos jpeg a még elfogadható, a GIF ugye adott, PNG-be meg 24 bitest mentünk, max a Transparency van kipipálva vagy sem. Ha amúgy is PNG-be mented a szeleteket, azon sokat amúgy sem tudsz optimalizálni.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

"ugye képernyőfelbontásban dolgoztál? (72 dpi) "
Nem, megmondom őszintén, ez nem jutott eszembe, most nézem, 300 dpi volt a felbontás alapból, ezt nem is állítottam át... Lehet szidni, igazából inkább kódolással szoktam foglalkozni, nem Photoshoppal "játszom", így rengeteg dolog elég új számomra.
Ez egyébként elsősorban méretbeli különbségeket okoz, nem? Mert most nem az volt a bajom (ettől függetlenül most átállítottam a resolutiont 72 dpi-re), hogy maga a foglalt terület nagy, hanem a kép mérete. A kivágott kép mérete meg épp 100%-ban arányos volt az eredeti képmérettel, 2285*2678-cal (most ez nem szabványos honlapméret nyilván, mert csak egy kis részéről van szó jó nagyban), ami ugye igencsak nagy egy honlaphoz.

"Ha amúgy is PNG-be mented a szeleteket, azon sokat amúgy sem tudsz optimalizálni."
Ez az eset áll fenn. Igazából azért használtam a Save for Web and Devices menüpontot, mert itt egyből be is tudom állítani a kívánt képméretet.
De nekem végül is az is jó, ha megcsinálom az automatizálás segítségével a képeket, aztán utólag szintén automatizálva ráküldök egy képméret-csökkentést, gondolom ilyet is lehet Photoshoppal.

[ Szerkesztve ]

Sk8erPeter

De akkor már megjegyezted, hogy ha képernyőre dolgozunk, akkor mindig 72 dpi a felbontás. A 300 dpi csak nyomdai munkálatoknál szükséges. Igazából ha képernyőre dolgozunk, oda túlzás 300 dpi-ben menteni.

A képfelbontás (dpi) és a kép dimenzionális méretei (cm, mm) fordítottan arányosak egymással! Ha nem skálázod át, csak a felbontást változtatod, egy 800×600-as 72 dpi kép ~28×21 cm, 300 dpi-ben ez csak 6,77×5,08 cm. Ha átskálázod, akkor a cm marad, viszont a pixelek száma növekszik borzasztóan. És amint látható, csak különmunkát adsz a gépednek, mert 20 percig fut rajta az action, amikor másodpercek alatt is elvégezhetné.

Most a kíváncsiságból csináltam egy tesztet, mennyi idő alatt ment el egy három állapotú gombot. >>>VIDEÓ<<< Amint látható, csak néhány másodperc. Persze ez függ a rétegek számától és a grafika bonyolultságától is. 300 dpi alá azért kell bőven memória és gyors proci is.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

Néhány dolgon fogtam a fejem:

Modern Webes trendek:
Képet tessék már elfelejteni egész sok helyen teljesen ki tudja váltani a CSS3, vagy legalább spriteba tenni. De nem csinálunk 3 képet a gomb állapotairól (nem tudom, h csak példa volt e vagy tényleg komoly)

pl BONBON

Igen lehet optimalizálni a png-t, amit a photoshop kiad azt visszafejtve egész érdekes dolgokat látni. Az egész képet menti egy "maskal" tehát ahol átlátszó ott is van képi információ csak a végén ki van maskolva. (smashingen volt egy nagyon jó cikk)

Optimalizáló eszközök: smushit, punypng

Ne menjünk el a tény mellett sem, hogy webes munkákra NEM a Photoshop az alkalmas eszköz hanem FireWorks. Igaz láttam már webes komplett tervet illustratorban tehát mindenki úgy bünteti magát ahogy szeretné...

https://www.behance.net/marosi-peter-k

Nyugodtan szörnyülködhetsz, ugyanis amikor utoljára kíváncsi voltam rá, hogy épül fel egy weboldal, akkor még ezzel a módszerrel csinálták. (Nem tegnap volt.) Nem én, a sitebuilderek. Én nem vagyok az. Csupán szemléltettem egy folyamatot, amire a kérdést a Photoshop topicban tették fel és nem a Fireworks topicban. Ezt Photoshoppal kellett megoldani.

Másrészt annyira ne nézz már dilettánsnak, hogy nem tudom, mi az a maszk, ha már egyszer (többször) cikket is írtam róla, meg még az alfacsatornáról is. Alapfokú képszerkesztői ismeret, ami csak azokat nyűgözi le, akik nem tudják, mi fán terem, és mindenhatónak képzelik. Jó az a maszk, csak nem szabad túlmisztifikálni és olyan tulajdonságokat tulajdonítani neki, amelyek nincsenek.

Egyébként kíváncsian várom, hogy kifejtsd, hogy lehet optimalizálni "mask" segítségével a PNG-t. Meg azt is, amelyiknek nincs alfacsatornája. Naná, hogy az átlátszó terület is képi információ, hiszen az a negyedik színcsatorna a képen! És pontosan 8 bites az is. És a négy db 8 bites csatornából áll össze a 24 bites PNG! (4×8≠24) Na, ezt dolgozd fel!

Végül, de nem utolsósorban: nem vagyunk programozók. Mi nem fejtjük vissza a képeket, nem érdekel, mit tartalmaznak a videó fejléc-információi. Mi összerakjuk a képet, nem pedig ízekre szedjük.

"Igaz láttam már webes komplett tervet illustratorban tehát mindenki úgy bünteti magát ahogy szeretné..."

Vagy éppen csak azzal dolgozik, amije van. MS Worddel is lehet működő weboldalt csinálni. Sőt, állítólag Jegyzettömbben is. Nem lesz ugyan trendi, de működni fog.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

Előrevetítve minden vagyok csak programozó nem (dolgozom web és print területen mellette 3d és egy kis Ae)

Most felvételiztettem társcégnek és a legjobban bosszant a mai "photoshoppot használok így mindent tudok" sztorival az, hogy egy felől ebből él (vagy szeretne megélni) másfelől meg a lehető legkevesebb időt sem szánja rá, hogy utána nézzen a dolgoknak "amiből él".

Konkrét cikk: http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

Amire gondoltam, hogy konkrétan az alpha csatorna mellett megvannak az adott terület R G B csatorna adatai is, teljesen feleslegesen.

Optimalizációra a konkrét két belinkelt példán egyszerűbbet nem igazán tudok, feltöltöd a képed és egy optimalizált verziót kapsz vissza. (-30% -60% sem ritka a kiinduló Psből kapott fájlhoz képest)

No offence de amit általában a userek "elvárnak" a photoshoptól azt a fireworks magában képes rá. Vagy amit szeretne megoldani azt már 4-5 évvel ezelőtt sokkal logikusabban kitalálták.

No mind1 elvileg még td tr kombóval is lehet weboldalt csinálni...

[ Szerkesztve ]

https://www.behance.net/marosi-peter-k

A dolog ott vérzik el, hogy ezen a fórumon legtöbben nem a Photoshopból élnek. Többek között én sem. Ahhoz képest szerénytelenség nélkül mondhatom, értünk hozzá, de természetesen a magunk dilettáns módján, hiszen amatőrök vagyunk, ezért megengedhetjük magunknak, hogy tévedjünk, vagy legyen a tudásunkban néhány fehér folt. Akiknek meg ez a kenyerük, azok biztos lehetsz benne, hogy ismerik a trükköket.

Emellett meg fogsz lepődni, de nem most látom először ezt a cikket.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

Ha már idézünk, tegyük azt pontosan. Én ezt írtam:

"Ha amúgy is PNG-be mented a szeleteket, azon sokat amúgy sem tudsz optimalizálni."

Kiemeltem a kulcsszót. Ezen kívül ismét felhívom a figyelmed arra, hogy a feladatot Photosoppal kellett megoldani. Abban pedig valóban nincs sok lehetőség a PNG optimalizálására. Amit a fenti cikk ír, az tulajdonképpen csalás. Csökkentjük a színek számát, mintha GIF-fel dolgoznánk. Így csökkenhet a mérete.

De lényegtelen. A képek figurákat alkotnak, különféle szerszámokkal, afféle öltöztetős baba oldal. Most ezt kép nélkül, kizárólag CSS-sel megcsinálni szvsz eléggé nehéz lenne. Itt most nem egy gradientről, vagy egy csíkos háttérről volt szó, hanem kimondott grafikai elemekről.

Te csak elterelted a szót. De részemről befejeztem. Nem érzem magam túl jól.

[ Szerkesztve ]

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

"a legjobban bosszant a mai "photoshoppot használok így mindent tudok" sztorival az, hogy egy felől ebből él (vagy szeretne megélni) másfelől meg a lehető legkevesebb időt sem szánja rá, hogy utána nézzen a dolgoknak "amiből él"."
Remélem itt nem rám célozgatsz. Egyrészt "semmit" nem tudok a Photoshopról (minimális a tudásom benne), ezért kérek segítséget, másrészt soha nem a Photoshoppal való dizájnvagdosás volt a munkám, hanem a kódolás, a honlap elkészítése (amihez értek, bármily hihetetlen is) - és utóbbinál a dizájnt és a sitebuildet vegyük ki a dologból, mert az megint más feladat. Sajnos most olyan munkát kaptam, ahol MINDENT egyedül kell megcsinálnom, csak a dizájnt kapom külső forrásból, készen, de jó nagy méretben (ami jó, mert megvan a lehetőségem, hogy jó minőségben szedjem ki a képrészleteket), nem kivágva az egyes lényegi elemeket.
Nem kevés melóval jár, épp ezért vagyok kíváncsi lehetséges módszerekre, hogy hogyan tudnám elkerülni a kb. 150 layer egyenkénti, kézzel történő kivágását slice-ok segítségével. Nehezen tudom elképzelni, hogy ne lenne automatizálható az a munkafolyamat, hogy készítek egyetlen slice-t, és beállítok egy layer groupot, hogy azt vagdalja ki.
Mások fikázása és lenézése, munkájának lebecsülése helyett mondjuk ajánlhattál volna érdemi megoldást pl. akár FireWorks-ben, sokkal előrébb lennénk, és senki nem érezné úgy, hogy meg kéne védenie magát, ami önmagában is elég furcsa, mert eddig teljesen barátságos hangnemben beszéltünk a probléma lehetséges megoldásáról.

Említetted a FireWorks-t, már próbálgattam is, eddig elég jónak és gyorsnak tűnik, de azt még mindig nem tudom, pl. ezzel hogyan tudnám megcsinálni az említetteket. Annyiból kapásból jobb, hogy ki van téve a felület, ahol beállíthatom, hogy mondjuk PNG-24-re optimalizálja.

"...a magyar webesek többsége változatlanul photoshopban vagy flashben fog egész oldalakat kitevő "kreálmányokat" alkotni és boldogan fogja az életét élni mindenfajta optimalizálás (pl.: pagespeedtest vagy YSlow) nélkül."
Nem értem, hogy jön ide az ilyen jellegű optimalizálás (pl. YSlow), ez már kissé keverése a témáknak. Feltételezem, részben arra gondolsz, hogy pl. mekkora méretű képeket kell letölteni egy adott oldal megtekintésekor - minél nagyobbakat, annál rosszabb a helyzet. Ez nyilván tiszta sor a legtöbb webfejlesztő számára. A "webesek" kategória alatt meg nem tudom, kit értesz, ez elég tág és lazán értelmezhető megfogalmazás. Ez a "magyar webesek" meg megint túlzás, nyilván nem csak nálunk fordulnak elő igénytelen vagy kevesebb tudással rendelkező sitebuilderek, webdizájnerek, stb.

"No offence de amit általában a userek "elvárnak" a photoshoptól azt a fireworks magában képes rá."
Én nagyon szívesen és köszönettel várom a megoldást.

"No mind1 elvileg még td tr kombóval is lehet weboldalt csinálni..."
Már megint kevered a szezont a fazonnal. Hogy jön ez ide?! Ki mondta, hogy itt bárki is táblázatos felépítésű weboldalt szeretne készíteni? Ha eddig nem lett volna egyértelmű, épp azt próbáljuk kitalálni, hogyan lehet a legegyszerűbben és leggyorsabban egy adott layer grouphoz tartozó layereket akár egy gombnyomással kivágni, transzparens png formájában, megadott célmérettel (pl. arányosan csökkentse az eredetihez képest). Vagy felőlem lehet gif is, tök mindegy, csak legyen jó minőségű.
Nem értem, már megint miért hozod ki ezt is arra, hogy itt bárki is igénytelen módon akarna elkészíteni egy honlapot. Nem azért van egy nyomorult fórum, hogy megvitassuk az adott kérdéskörhöz tartozó lehetőségeket, illetve korlátokat? De, és nem azért, hogy megragadjuk a lehetőséget arra, hogy fikázzunk másokat, szidjuk mások munkáját (főleg miközben azokról semmit nem tudunk). Most erre írhatod, hogy "nem inge nem veszi magára", de az odamondós stílusoddal csak egy teljesen értelmetlen irányba vitted el a beszélgetést.
Inkább megoldásokat próbáljunk találni, köszi.

"Képet tessék már elfelejteni egész sok helyen teljesen ki tudja váltani a CSS3, vagy legalább spriteba tenni."
Ha már ennyire mindent jobban tudsz, arra még nem gondoltál, hogy a potenciális felhasználóknak sajnos igen releváns hányada használ még mindig olyan böngészőt, ami NEM támogatja a CSS3-at? Ezen miért nem fogtad a fejed?
Egyébként épp az általad linkelt BonBon honlapon lévő gombok is elcsúsznak még IE9-ben is, pedig az viszonylag modern. Nagyon nem mindegy. Persze lehet leszarni is az ilyen júzereket, és kitenni böhöm nagyban, hogy "használjá' krómot, azt' kész", de igényesebb cég nem kezeli ilyen egyszerűen a helyzetet.

Sk8erPeter

Igen, de mondjuk itt ha van 14 hajforma, azon belül meg 8 hajszín, akkor az tényleg 112 layer, és ez még mindig csak a haj. Szóval mondjuk 3 formát nálam is gyorsan elkészít, de azért 112-t már nem. Persze úgy fogom csinálni, hogy először alaposan tesztelem mondjuk összesen 4 layerre, aztán mehet a folyamat, és akár felőlem órákig is elszöszmötölhet. Aztán a végén meg automatizáltan megpróbálom átméreteztetni a képet, de lehet, hogy ez nem jó megoldás... Csak igazából most még mindig nem tudom, hogy mi lenne az optimális megoldás. De lehet, hogy ilyesmit tényleg csak FireWorks-ben érdemes.
Egyébként akkor úgy érdemes, hogy megváltoztatom a felbontást, de NEM skáláztatom át, igaz? Majd ezek után méreteztetem át optimalizálásnál a megfelelő arányra. (És igen, a 72 dpi bevésve. )

[ Szerkesztve ]

Sk8erPeter

Akkor megvan, hogy miért nagy felbontásúak a képek. Készen kapod, és aki készítette, eleve nagyban csinálta, hogy mindenféle felhasználáshoz megfelelő legyen. Ajánlott rögtön a megnyitás előtt átméretezni a fájlt, úgyis képernyőre kerül. Ctlr+Alt+I. Alapbeállításon át kell skálázza a képet. Csak annyit kell tenni, hogy alul a 300 dpi helyére 72-t írsz, alul pedig a Resample Image box ki legyen pipálva. Így, ha átírod a dpi-t a pixelek száma fog csökkenni, kisebb lesz a felbontás, és vélhetőleg a szkript is jóval gyorsabban fog lefutni.

De azért 150 réteg tényleg nem 3, és a sebesség függ a processzor teljesítményétől, a magok számától, hogy hány bites a rendszer, mennyi és milyen gyors memória van benne. Hál istennek, a folyamat automatizált, ezért nyugodtan rá lehet bízni, míg elmégy kávézni, vagy egyebet csinálsz közben.

A Tutorial.hu tényleg a legjobb oldal webtervezésben, kódolásban és grafikában. Nagyon sok anyag van összegyűjtve, csak ajánlani tudom én is.

[ Szerkesztve ]

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

"Akkor megvan, hogy miért nagy felbontásúak a képek."
Csak az a baj, hogy eddig sem ezzel volt problémám... Sem a felbontás, sem a foglalt terület nem zavart eddig, hanem csak és kizárólag arra szerettem volna megoldást, hogy a lehető leggyorsabban ki tudjam vagdalni ezeket a layereket... Azt meg nyilván tudom, hogy procitól, memóriától, 32/64 bittől és egyebektől függ a sebesség, de most nem ez a kérdés.
Azért azon nagyon csodálkozom, hogy ilyen jellegű, az enyémhez hasonló igény nem szokott felmerülni (sok layer exportálása úgy, hogy azonos slice-on belül azonos helyre vannak alapból pozicionálva).
A FireWorks kulcsszóra rákeresve itt PH!-n nem sok értelmes találatot kaptam, magyarul nincs is külön topicja.
De ha közben valaki mégis tud megoldást a problémára, nagyon szívesen fogadom!

(#10476) ViZion: megpróbálok még valahol érdeklődni, bár továbbra sem látom be, miért lenne olyan extrém az igényem... Hogy egész röviden vázoljam neked is a parát, és ne kelljen visszaolvasnod: annyi lenne a feladat, hogy vannak különböző layerek, hierarchikusan egymás felett, amik egy adott slice-on belül látszanának, amikor meg vannak jelenítve, és én mindegyik layert szeretném megkapni transzparens png-ben anélkül, hogy egyenként kattyogtatnám végig őket, hogy optimalizálja webre. Szerintem nem egy olyan elrugaszkodott igény.

[ Szerkesztve ]

Sk8erPeter

De – amint a videón is szemléltettem –, nem kell bekapcsolva lenni a layereknek. Elég csak egynek. Majd a bemutatott szkript önállóan ki-be kapcsolgatja és kimenti őket. Csak kicsit tovább tart majd. Ha 3 réteget megcsinál ~10 s alatt, akkor 150-et 8 perc 16 másodperc alatt csinál meg. Kábé.

Aztán lehet menni a következő rétegcsoportra.

Amúgy tényleg érdemes a Tutorial.hu-n körbenézni.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

Ez is nagyon jó oldal.

Fotóim https://fb.com/toth.szabolcs.art || IG: http://instagram.com/_tothszabolcs_ || Weblapom http://szabolcs-toth.com

"Alapvetően nincs az a mai webes projekt amihez létjogosult lenne 150 layer export szerintem ezt te is beláthatod...
...és ezért nem értelek, főleg ha programozó vagy."
Egyáltalán elolvastad, hogy mi volt az eredeti kérdésem? Ha igen, akkor kérlek gondolkodj már el azon, hogy ha rajzfilmfigura-szerű emberfigurákat kell összeállítanom testrészenként (JavaScripttel váltogatva a testrészeket), akkor mégis hogy a jó büdös francban kéne ezt meg tennem, ha nem képekkel? Talán CSS3-mmal, vagy mégis mivel készíted el? A kioktató hangnemed ismételt alkalmazása előtt talán meg kellene nézni, hogy miről is van szó egyáltalán, és nem feltételezni másokról, hogy hülyeségeket beszélnek.

Egyébként nem az volt a lényeg, hogy 150 layerről van szó, vagy pedig 10-ről, hanem arról, hogy nehéz elképzelni, hogy másnak ne merült volna fel igénye arra, hogy az említett módon gombnyomásra tudjon generálni azonos layer groupban és pozícióban lévő képeket slice-okból (a layereknek meg lehet, hogy más színe és formája van, de az ember meg akarja kímélni magát az egyenkénti kattintgatásoktól).

"A modern weboldalak max 4-6 képet használnak css backgroundba (de ezt is cél tovább redukálni)"
Ki beszélt CSS backgroundokról??

"Ezért írtam, hogy ilyen szintű kép alapú felhasználás kb ugyanolyan elavult mint a td tr-es táblázatos felépítés."
Mielőtt ilyen elhamarkodott kijelentéseket teszel, gondolj arra, hogy van olyan, amit soha a büdös életben nem fogsz tudni megoldani mással, mint rajzból generált képpel. Mint pl. az én esetemben. Megnézném, mi mással oldanád meg.

"CSS3 legnagyobb előnye"
Már megint miért beszélünk webes technológiákról, amikor továbbra sem témázott rajtad kívül senki azon, hogy melyik webes technológiát érdemes alkalmazni? A graceful degradationről meg annyit, hogy ha valahova lekerekített sarkú dobozt szeretnél tenni, de mondjuk a felhasználók 40%-ánál (példaarány) nem úgy jelenik meg, ahogy kellene, akkor már régen rossz. Épp ezért kell még manapság is gondolni a régebbi böngészőt használókra. De ne tereljük el a témát kérlek, ez egy másik topic vitája. (Igazából nem vitatkozunk, csak elbeszélünk egymás mellett...)

"FireWorks akkor megfelelő neked ha natívan akkor került kidolgozásra a weboldal. .psdből nem fogod tudni átemelni (jobban mondva én ilyenről még nem hallottam)"
Ezt végképp nem értem. Most akkor használtad a FireWorks-öt, vagy sem?
A psd-fájlomat megnyitottam FireWorks-ben, és hibamentesen megjelent, még a slice-okat is megjelenítette, amiket még Photoshopban kreáltam.

Ha a Photoshop ennyire nem alkalmas szerinted webdizájn elkészítésére, akkor mégis miért használja egymástól függetlenül a dizájnerek döntő többsége? Nem biztos, hogy azért, mert mindenki gyökér vagy elmaradott, lehet, hogy mert ezt találják erre alkalmas eszköznek. Meg amennyit használtam, az alapján nem épp az jött le, hogy képtelenség belőle normális, webre optimalizált képeket generálni, amik méretre is stimmelnek. Én csupán a feladatomhoz tartozó automatizálás lehetőségét hiányoltam. És még így is lehet, hogy lenne erre megoldás.

[ Szerkesztve ]

Sk8erPeter

Jaja, értem én, hogy hogyan működik a dolog, és működőképesnek is tűnik. Most úgy csináltam, hogy az Image Size-nál beállítottam a 72 dpi-t, meg a kívánt végleges képméretet, így át is méretezi (ezt külön fájlba elmentem, bár az eredeti megvan még kb. 5-féle backup formájában), és tulajdonképpen ezzel a Save for Web and Devices-nak azt a lépését kihagyhatom, hogy beállítom a képarányt, vagyis hogy az eredetihez képest mekkora méretet szeretnék. Annak érdekében, hogy ne az ÖSSZES layeren szaladgáljon végig, hanem csak mondjuk a hajakon, mert épp csak azt szeretném kimenteni (így kevesebb ideig tart), a többi layert egyszerűen kidobom (ezt nem mentem el így, a legvégén majd visszaállítom az elmentett állapotra, ahol még nem dobtam ki), létrehozom a slice-t, és elindítom az Export Layers to Files-t, ahogy Fire/SOUL/CD írta, és meg is vannak a transzparens png-im. Egy haj kb. 13,5 KB-ot foglal, szerintem ez nem túl nagy méret, úgyis dinamikusan tölti be a többi hajat, majd akkor, amikor kell, így nem lesz túl sok a letöltendő kép.

Szóval eddig Fire/SOUL/CD tanácsa nagyon hasznosnak bizonyult, köszönet neki!
És nektek is köszi a segítségeket!

Ez a megoldás eddig úgy tűnik, bejönni látszik, szóval lehet, hogy mégsem csak FireWorks-szel lehet csak megoldani ezt a kérdést. Egyelőre Peter M-től egyébként sem kaptuk meg a KONKRÉT választ, hogy hogy is kellene...

===

(#10481) ViZion: OK, köszi!
Amúgy mindig is furcsálltam, hogy ez az általános szokás, hogy a webes dizájnt elkészítik a dizájnerek Photoshopban, majd átküldik a kész psd-t a webfejlesztőknek (vagy ha van külön sitebuilder, annak), és ezzel az ő részüket letudták, tehát hogy miért nem annak kell foglalkoznia a Photoshoppal, aki már azért ért is hozzá.

===

(#10472) Speeedfire: jaja, muszájból...

[ Szerkesztve ]

Sk8erPeter

sziasztok!
azt szeretném először is megkérdezni, hogy itt szabad aktiválással kapcsolatos dolgokat kérdezni?
köszönöm

legális aktiválás igen, warez nem.

"Mindig is első szerettem volna lenni!" - II. János Pál pápa

Az ilyen úgy megy, hogy előbb összebarátkozunk a fórumtársakkal (hosszú folyamat), majd ha eléggé kitartóak vagyunk, akkor privátban már lehet ilyeneket kérdezni.

Ez nem úgy van, hogy beesek ide és az első kérdésem rögtön az, hogy segítsen valaki Ps-t krekkelni…

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

No, lehet, hogy csak kitörölte vmi optimalizáló progi a Flexnet service-t. Krekket minek keresne fórumban, mikor tele vele a net???

Hold on, trying to give a fuck... Nope, not Happening • Powered by Fedora Linux • "Az élet olyan sz@r, szerencsére a felén már túl vagyok" Al Bundy

Azér' akinek nincs benne gyakorlata, és csak egy norvég nyelvű nfo fájl áll a rendelkezésére, továbbá a vírusirtója alapból kiirt mindenféle keygent, annak szoppantani kell egy jó darabig vele, míg rá nem jön a nyitjára.

(Most ismerkedem a Linux-szal unalmamban, hát mit ne mondjak… L vagyok tévedve, mint Ábel a rengetegben. Még szerencse, hogy a szomszéd /szintén zenész/ kollégám nagy L-kocka és megmutogatott egy pár trükköt, mert magamtól egy hét alatt sem jöttem volna rá.)

Szóval kezdőnek lenni minden téren nehéz.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

PDF/X-1a formátumba érdemes leadni, és nem lesznek átlátszósági problémák.
A papírtól is függ a szín.

"Mindig is első szerettem volna lenni!" - II. János Pál pápa

Mert RGB-ben dolgozunk, és bár a nyomtató RGB fogadására és konvertálására lett fölkészítve, azért CMYK színekkel dolgozik fizikailag. A képernyőn lévő cucc mindig sokkal kontrasztosabb és szaturáltabb. Érdemes alulszaturálni, és plusz fényerőt adni rá, viszont ehhez tapasztalat kell, és legalább egy minőségi fotónyomtató, amivel ki tudjuk kísérletezni a mértékét.

Sokszor láttam már olyat, hogy reklamáltak a vevők, hogy a digitális gép által készített, és egyébként színhelyes RGB képek kinyomtatva sötétek és túlszínezettek voltak.

A Prohardveren nem olvasok privátot! Csak topikban vagy a publikus e-mailemen adok tanácsot.

Sziasztok!

Lenne egy gyors kérdésem.Mikor mozgatok egy képet,akkor nem mindenhova lehet elhelyezni a képen,hanem megad bizonyos helyeket,mintha meg lenne adva hogy hova lehet csak.Ez ellen lehet tenni valamit,hogy akárhova helyezhessek egy képet,vagy nem?

(Picit érthetetlen lett,remélem valahogy sikerül megértenie valakinek,jobban nem tudtam elmagyarázni. )

A PS nagyon jól konvertálja az RGB-CMYK-t.

Ha jó a nyomtató, minimális a különbség a monitor és a nyomat között.

No, a PDF teljesen jó, vagy Distillerrel, vagy ID-ből, de még a Photoshopos is megteszi. Vágójel, kifutó legyen... Amit nem akarsz, h látszódjon, azt töröld. A digit gép ripeléskor lehet máshogy nézi a réteget, és a profilja miatt kinyomja. Volt a minap ilyen nálunk is, állítani kellett a gépen, kész. Ja, profil nélkül CMYK-t ments. A sötétebb szín oka a nyomtató beállítás, illetve a monitor kalibrálatlansága, ami alapból némileg sötétebbet ad. 2% C monitoron nem is látszik a nyomaton meg foltos... Az ilyen kvázi-fehér részeken érdemes levels-el világosítani kicsit, így a pár % színek eltűnnek, és fehér lesz a fehér nyomtatásban is.

zetecR: a nagyon jól azért sok mindentől függ, pl. hogy milyen a cél CMYK profil. Attól, hogy tudja konvertálni, még nyomatban nem biztos, hogy jól is jelenik meg, sőt.

[ Szerkesztve ]

Hold on, trying to give a fuck... Nope, not Happening • Powered by Fedora Linux • "Az élet olyan sz@r, szerencsére a felén már túl vagyok" Al Bundy