Webdesign: FireWorks

« előzmény

Bjmatt az alábbiakban idézett hozzászólásával végképp eloszlatta arra vonatkozó kételyeimet, hogy a következő weblap tervemnél kipróbáljam-e a FireWorks-öt. Ezzel három részes spontán minisorozatunk végére értünk, melynek végkövetkeztetéseit így tudnám összefoglalni:

  • Webdizájnra (is) mindenki azt a programot használja, amit megszokott és megszeretett, de érdemes nyitottnak lenni az új lehetőségek iránt.
  • Photoshop, Illustrator, InDesign: egyik sem erre lett kitalálva, és sajnos ez érződik is rajtuk.
  • FireWorks: erre lett kitalálva – ki fogom próbálni.
  • Tökéletes megoldás nincs.

Bjmatt hozám hasonlóan Photoshop-ot használt weblapok tervezéséhez, mígnem (éppen a témaindító Propono-s bejegyzés hatására) megismerkedett a FireWorks-szel. Hozzászólásában ezt írta:

Próbálom az én szemszögemből leírni, hogy mire lenne szükségem. A dolog nyitja természetesen a lustaság, ami egyenlő az idővel, ami pedig mint tudjuk egyenértékű a pénzzel. Például a postán is érezhetjük, hogy ha csomót állunk sorba számlákkal, akkor nagyon sok pénzt ott tudunk hagyni.

Komolyra fordítva, akkor jönnek elő a lényeges felfogásbeli különbségek, ha az ember egy összetettebb oldalt, neadjisten alkalmazást kell hogy tervezzen.

Az összetettséget úgy értem, hogy az oldal sok kis almodulból állhat, sokféle szövegstílus, objektumstílus van benne és ezeknek végig kell menni következetesen már a terveken is, úgy hogy később ezeket könnyen felül tudd bírálni és megváltoztatni, úgy hogy ne kelljen az összes variációt egyenként újraszerkeszteni. Ezért vannak stílusok az indesign-ban is, meg illustratorban, meg a css-ben például. Sőt, vannak olyan kis blokkok, amik sok kis elemből állnak és nem jó ezeket mindig másolgatni (sok-sok layer), egyenként módosítgatni, hanem jobb ezekből egy szimbólumot egyszer definiálni, majd ezt újrafelhasználni.

Szerintem már most látjátok, hogy a photoshop ebből szinte semmit nem támogat, legalábbis nem úgy ahogy itt kellene. Mert például vannak layer-stílusok, de ha egyszer létrehoztad, nem tudod újradefiniálni, ha változtatnod kell, újra végig kell menned mindenen és az rengeteg idő és szívás. Karakterstílusai egyáltalán nincsenek, sem szimbólumok. Smart object-ek vannak ugyan, de nem szerkeszthetők helyben, és sokszor hibáznak szövegekkel leginkább.

A FireWorks pedig pont ezekre van kitalálva. Tudsz szimbólumokat, karakterstílusokat, objektumstílusokat definiálni, amelyeket később újradefiniálhatsz, és minden egyes példány automatikusan követi a változásokat. Már magában ez életmentő szerintem.

De ezen felül tud oldalakat kezelni, tehát bizonyos layerek, vagy layercsoportok állandóak lehetnek bizonyos oldalakon, de lehetnek olyanok is, amik csak adott oldalakon szerepelnek. Ez azért jó, mert nem kell minden ilyen elemet lemásolnod, hanem ugyanarra a layerre hivatkozik, tehát ha egyszer megrajzoltad, az végig ugyanaz lesz, és ugyanúgy módosíthatod mint a stílusokat, egy helyen kell csak.

Ami még nagyon hasznos, hogy gyorsan lehet vele egyszerű kis végigklikkelhető demokat készíteni slice-okkal, ez főleg a tervezési fázisban lehet istenes nagyon.

Ami nincsen sajnos azok a spot swatchok, de végülis objektumstílusokkal meg lehet oldani ezt is, kényelmesebb egy stílust újradefiniálni, mint kézzel átszínezni mindent.

Ami lehet keveseket érint, de nekem most nagyon jó, hogy tud Flex komponenseket is exportálni: paneleket, gombokat, menüket tervezhetek vele és használhatom őket Flex-ben. Teljesen rákattantam a Flex-re, kb utoljára a CSS felfedezésekor éreztem hasonlót. :)

Szóval összegezve: az a nagyon jó a FireWorks-ben hogy a webre találták ki, és nagyjából követi is a web újrahasznosítható, moduláris felfogását. Gyorsan lehet vele demokat készíteni és ezeket ki is lehet dolgozni tisztességgel, plusz sok időt megtakaríthatok vele.

Elsőre fura volt a PS/Illu után, de szerintem meg lehet szokni.


, ,

Feliratkozás

Email értesítés az új bejegyzésekről:

200×200 km könyv

2013 tavaszától kezdődően több mint 8 éven át futottam és közben fotóztam. Ez volt a 200×200 km projektem első fele, melyből könyvet készítettem, amit letölthetsz PDF formátumban… További részletek →

18 hozzászólás a(z) “Webdesign: FireWorks” bejegyzéshez

  1. hal avatar

    Máté, még egy kérdés: a Photoshop-ot nem is használod, vagy az is kell azért néha? És ha kell, akkor FireWorks-ben place vagy copy-paste?

    Ja és még egy: tudsz benne vektoros alakzatokat is készíteni? És ezek raszteresen látszanak, mint a Photoshopban?

  2. bjmatt avatar

    Egyelőre úgy látom, hogy nem lesz szükségem photoshop-ra, vagy illustratorra. Attól féltem, hogy csak nagyon egyszerű grafikákra lesz jó, de nagyjából lassan mindent megtalálok és nagyon örülök neki. Szóval már most figyelmeztetlek, hogy ne húzd fel magad nagyon, de nem ugyanott lesznek a hasonló funkciók mint a másik kettőben. Tudod, Adobe szeret minket és a változatosságot is. :)

    Vektoros alakzatokat tudsz készíteni, egyszerű alakzatok (téglalap, ellipszis, spirál, vonal, stb), toll, sok boolean művelet, mint az illu pathfinder palettáján (bár ezek csak destruktív módban működnek, nem tudod visszacsinálni, bár ez megint ízlés kérdése, én illuban is így szerettem). Viszont nézd át alaposan, mert itt is kicsit más a logika, vannak olyan illu eszközök (pld blend tool), amit itt a Commands menük egyikében találsz meg, stb. Vagy pld nem pontosan úgy működik az egalizálás, mint a többiben, ahol a két betű közé állsz a kurzorral és alt+jobb/bal nyíl, hanem itt ki kell jelölnöd a betűt és ctrl+alt+jobb/bal, szóval ilyen apróságok.

    Én se régóta nyaggatom, szóval lehet még előkerülnek nagy hiányosságok, de nekem tökre tetszik és úgy gondolom, hogy a sok pozitívumért cserébe megtanulom egy kicsit más logikával előállítani ugyanazokat a grafikákat. Ez végülis talán nem baj, mert annyira rá vagyunk kényszerítve az adobe logikára, hogy mással már nem is tudunk megmozdulni.

    És köszönöm a kiemelést, megtisztelő! :)

  3. bjmatt avatar

    Most nézem, pld ligatúrákkal gondok vannak:

    http://www.adobe.com/devnet/fireworks/articles/adobe_text_engine.html

    Szóval úgy tűnik azért nem mindenre gyógyír.

  4. drzen avatar
    drzen

    A ki fogom próbálni mondat ugye azt jelenti, hogy még nem próbáltad? Ha nem próbáltad akkor a “fireworks erre lett kitalálva” pillanatnyilag nem a legmegfelelőbb kijelentés. :)

    Photoshopnál a leginkább nehéznek hitt munkafolyamat a layerek csoportos kezelése, megváltoztatása lehet. Ha ugye csoportba rendezünk bizonyos tulajdonságokkal rendelkező objektumokat, ezeknek az egyenkénti megváltoztatása nehézkes, már amennyiben egyenként változtatjuk változtatjuk meg őket. Az esetek nagy részében erre semmi szükség nincs, hiszen egy kijelölt csoport minden elemén megtörténik a változás.

    Próbálok egy példát mondani erre. Van egy rakás layerem még csak külön nevet sem adok nekik, színnel sem jelölöm, szóval legyen nagy a káosz. Kiválasztok egyet és mivel eszemben nincs keresgetni “v” (auto select kikapcsolva, layer opció kiválasztva), így a ctrl billentyűt lenyomva, majd katt (automatikusan odaugrik) a keresett objektumon. Ha ehhez szeretnék továbbiakat csatolni akkor a shiftet is lenyomva tartom a ctrl mellett, ezzel annyi layert jelölve ki amennyit a feladat megkíván. Most ha akarom akkor ctrl+g (group), vagy merge bár ez utóbbi roppant felelőtlen is lehet. Mindez nem került több időmbe mint pár másodperc és még csak group sem kell ahhoz, hogy akár egy előzően másolt (copy layer style) stílust bármennyi rétegre alkalmazzak. Text esetén jöhet jól a Grop, hiszen azt nehéz eltalálni kiválasztással. Itt természetesen szintén megváltoztathatom a szövegdobozaim egyes betűtípusait, színét, stb.

  5. hal avatar

    [re=15556]bjmatt[/re]: „Adobe szeret minket és a változatosságot is” – ettől kicsit elment a kedvem. :( De miért is gondoltam, hogy nem így van? Köszi!

    [re=15559]drzen[/re]: Lehet, hogy megdöbbentő, de egy csomó általam nem használt programról tudom, hogy mire találták ki. :)

    Amit leírtál példaként, még mindig igencsak macerás ahhoz képest, hogy egyetlen helyen megváltoztatom a definiált stílusom, és az minden előfordulási helyén azonnal frissül.

  6. drzen avatar
    drzen

    A kevert szarvasgombóc dióöntettel nem azért finom mert mások azt állítják.
    Ha valamit nem próbáltál, akkor arról nem tudsz érdemben véleményt mondani. Ne érts féltre, én lennék a legboldogabb ha találnál egy olyan programot amit örömmel használsz.

    Előbb próbáld ki, dolgozz vele, és ha akkor meggyőzött, akkor elfogadom, hogy számodra a FW erre lett kitalálva.

  7. hal avatar

    Én nem azt írtam, hogy számomra erre lett kitalálva, hanem hogy erre készült. A Lightroom-ról is tudtam, hogy fotók rendszerezésére és adjusztálására készült még mielőtt kipróbáltam volna. Teljesen igazad lenne, ha én véleményt formáltam volna a FireWorks-ről anélkül hogy kipróbáltam volna. De én csak leírtam egy tényt, mely szerint a FireWorks webdizájnra készült, és átadtam a szót bjmatt-nak, aki már ki is próbálta.

  8. bjmatt avatar

    [re=15559]drzen[/re]: sajna nem működik a layerek csoportos kezelése. Én nagyon rendmániás vagyok, de az nem elég sajnos.

    De mutatom itt is azt a példát, amit a propono-n is linkeltem:

    Ha csak az emailcímeken akarok változtatni, akkor végig kell mennem minden egyes layercsoporton, kibontogatni a sok egymásba ágyazott alcsoportokat, aztán shifttel kijelölnöm csak az email-es layert. Vagy ahogy te mondod, végigkattogni az egész layouton auto-selecttel. Én ennek nem szeretnék nekiállni. :)

    A két felfogás közti nagy különbség az, hogy az egyik különválasztja a megjelenést és a tartalmat, a másik nem. Ezért is mondom, hogy aki dolgozott már css-sel, vagy bármilyen MVC (modell-view-controller) alapú programnyelvvel/alkalmazással, annak a kijelölgető módszer a halála.

    De nézhetjük más szemszögből is: mi alapján csoportosítanád a fenti példámban az emailcímet? Mivel itt egy keresőoldal találati listájáról van szó, és ezeken belül elképzelhető, hogy mozgatnom kell bizonyos találatokat, vagy törölnöm őket, olyankor nem működik az, hogy az emaileket egy csoportba rakom, mert nem oda tartoznak, hanem 1 darab találathoz, vele együtt kell mozogjanak.

    Még a végén tényleg úgy fog tűnni, hogy győzködök mindenkit a FW használatára. :)

  9. drzen avatar
    drzen

    hal: Rendben.

    bjmatt : Pontosan úgy csinálnám ahogy te. Ha meg kell változtatnom egy csoport mail címét, akkor a type tool és a javítani kívánt címet átírom. Nem kell keresgetni sehol. Oda kattintasz a munkaterületen és átírod.

    A hatékonyság érdekel csak. Hiába fogok nyerni értékes perceket a csoportkezeléssel ha azt el fogom veszíteni máshol. Nézegetem már. Meglátjuk. :)

  10. bjmatt avatar

    [re=15565]drzen[/re]: Szerintem nem ugyanarról beszélünk, lehet rossz példákat hoztam. :) Szeretnéd megváltoztatni az összes link színét az oldalon. Nem 1 javítani kívánt címed van, hanem 37. Ennyit meg már nem jó móka kijelölgetni, meg kézzel átírni. Egy csoportba pedig nem tudod rakni őket, mert logikailag nem tartoznak össze, ha pedig azokat az elemeket kell mozgatnod, ahova logikailag tartozik, akkor egyenként kell utánaállítani mind a 37-et. Azért is írtam már a legelején, hogy ez leginkább a munka összetettségétől függ.

  11. drzen avatar
    drzen

    Félreértettem. Ebben az esetben igen, sajnos nem jó móka. De a feladattól függ így igaz. Ha nekem az lenne a munkám mint amit láttam tőled és belinkeltél, a következőképpen csináltam volna. Háromnál több különböző keresési találatot nem készítenék példának. Pontosabban… tudod mit, feleslegesen feszegetem, ebben igazad van.

  12. bjmatt avatar

    Azért én örülök nagyon hogy egyáltalán előjött ez a téma. Bennem még úgy élt a FireWorks, hogy jó-jó, de nagyon foghíjjas, aztán jött a nagy homlokracsapás.

  13. drzen avatar
    drzen

    Hát ahogy eddig néztem, egyenlőre nekem úgy tűnik elég feladatspecifikus, “mindenre” még mindig PS.

  14. bjmatt avatar

    (Tegnapi hozzászólásomat elvitte a cica, úgyhogy beírom megint:)

    Igen, azért az nagyon érződik rajta, hogy “hagytak” a többi szoftvernek is teret. Például az, hogy magában nem kezel egyáltalán ligatúrákat (csak illu/ps-ből beillesztett elemeken veszi át őket) az tökéletesen mutatja, hogy kiadvány/logo/nem webes folyószövegen kívül bármi más tervezésére alkalmatlan.

    De talán érthető is valahol, mert egyrészt a fireworks harmadannyiba kerül mint a nagytesók, másrészt meg ez tényleg “csak” arra való, hogy meglevő arculati elemekből és pár alapvető (szerintem nem is kevés) grafikai eszközzel megoldhass mindent, ami a weben előfordulhat.

    Érdekességképpen megnéztem a Flashben is a ligatúrakezelést és úgy tűnik ott sincsen. Ami viszont már tényleg vicces, hogy ActionScript-ben be lehet kapcsolni, tehát AS3-mal generált szövegben VANNAK ligatúrák, míg a grafikus felületen beírt szövegben NINCSENEK. Azért nagy francok ezek az Adobe-nál. Ha szöveget akarsz bizerálni, akkor AI/PS/ID, nincs mese, nincs trükközés.

    (Esetleg ha szegény, ugyanakkor kitartó grafikus vagy és csak egy Flash-t tudsz megvenni, viszont értesz egy kicsit az ActionScripthez, akkor leprogramozhatod, pár sor csak :)

  15. bjmatt avatar

    “A hatékonyság érdekel csak. Hiába fogok nyerni értékes perceket a csoportkezeléssel ha azt el fogom veszíteni máshol. Nézegetem már. Meglátjuk. :)”

    No neked lett igazad. Sajnos most 4-5 fireworks-ös projekt után kihajítottam az ablakon. Nagyon kéne nekem egy ilyen szoftver, hiányozni fog pár feature belőle, de ekkora bughalmazzal nem tudok dolgozni. Tényleg jó hogy időt nyerek a stílusokkal és a szimbólumokkal, de az hogy hatszor kilép fél óra alatt, az sok, megelégeltem. :) Plusz sokszor hibázik a szimbólumok kezelésénél is, 9-slice-scale objektumok esetén random tologatja a szövegek magasságát és pozícióját a szimbólumon belül, pld gombokra használhatatlan így.

    Nagyon sajnálom, úgy néz ki még várat magára az igazi webdesign-ra kitalált szoftver. :(

  16. hal avatar

    Majd szólj, ha rátaláltál! :)

  17. bjmatt avatar

    Az új CS5-ös nem lett nagy durranás, de nem fagy. Kap egy újabb esélyt. :)

  18. hal avatar

    A Bridge nálam már többször elszállt. Valahogy egyáltalán nem érzem, hogy precíz munkát végeznének az Adobe-nál.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés /  Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés /  Módosítás )

Kapcsolódás: %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

%d blogger ezt szereti: