Címke: Adobe Fireworks

Webes prototípus tervezés

Kategóriák: Fejlesztések, Tippek

Amióta az eszemet tudom egy honlap kódolása előtt mindig készítettem papíron vagy grafikus módon egy drótvázat, és ebből következően a specifikációk mellé minden alkalommal csatolok wireframe terveket. Nem is gondoltam volna, hogy  “Magyarországon nincs igazán kultúrája, gyakran kifelejtik a munkafolyamatból (vagy nem veszik elég komolyan).”, ahogy azt Dunder Krisztián írta egyik cikkében.

Mivel csak webes felületek tervezésével foglalkozom, engem tökéletesen kiszolgál az Adobe Fireworks. Egyszerűen, gyorsan és kényelmesen tudok vele impresszív terveket készíteni, mint amilyen például a következő:

Tudásportál: Wireframe

A napokban mégis úgy döntöttem, hogy kipróbálok más prototípus tervező eszközöket. A választásom elsőként a Mozilla által vezetett Pencil Project-re esett. Pencil Project: LogoA program telepíthető Firefox kiterjesztésként és önálló asztali alkalmazásként is. Rövid használat után be kellett látnom, hogy nem egy rossz eszköz. Bár nagyon intuitív és hamar elsajátítható az UI használata, az egyes paraméterek finomhangolása számomra kényelmetlen. Sokkal többet kell kattintanom az éppen szükséges opciók eléréshez, mint a Fireworks-ben, így több időt is vett igénybe ugyanazon vázlat elkészítése, ami ráadásul kevésbé volt impresszív. Ezen kívül még hiányoltam belőle a layerek csoportosíthatóságát és összevonhatóságát, illetve egy panelt, ahol nyomon követhetem azt, hogy az egyes layerek mely szinten helyezkednek el. Viszont amellett, hogy kevésbé memóriaigényes, egyik nagy előnye, hogy a hivatkozásokkal kapcsolatot lehet teremteni az oldaltervek között.

Cacoo: LogoTovábbi ingyenes wireframe-tervezők után kutatva találtam rá a Cacoo online csoportmunkát is támogató webalkalmazásra, ami gyors, egyszerű, és első ránézésre szinte mindent tud, amit az előbb említett Pencil. Például érzésre sokkal kényelmesebben igazítja az egyes formákat a lap hálójára, továbbá az egyes elemek beállításai is kevesebb kattintással érhetőek el. Szerintem a Cacoo-t még sokat fogom használni a jövőben!

Cacoo: Teszt Wireframe

Hozzászólás: » 1 « • Írta: Péter (2010/08/29 12:43)

Ez egy szigorúan bizalmas bejegyzés

Kategóriák: Szórakozás, Tippek
Címkék: 

Top Secret: IconSzerintem már mindenki találkozott a mellékelt ábrán látható “top secret” lenyomattal, ami főleg az amerikai filmekből vált ismertté. Ma azt mutatom be lépésről-lépésre, hogyan tudsz Te is hasonló pecsétet készíteni az Adobe Fireworks segítségével.

Első lépésként indítsd el az alkalmazást, majd hozz létre egy új 308×128 pixel méretű vásznat (Canvas), és benne egy ugyanekkora téglalapot (Rectangle). A téglalap sarkait kerekítsd le, vagyis a Roundness értékét állítsd 24 pixelre, majd a kitöltését (Color Fill) átlátszóra. A körvonal (Stroke) színe legyen #CC0000, vastagsága 8 pixel és Hard Rounded,  valamint belülre igazított (Stroke Inside).

Top Secret's Fireworks Properties 1.

Top Secret Stamp 1.

Ha a fentiekkel készen vagy, akkor a Text eszköz segítségével írd meg a pecsét szövegét, és helyezd teljesen középre. Betűnek én az Impact készletet választottam 64 pixeles mérettel, mert ez a típus a Windows rendszerekben többnyire megtalálható. Természetesen Te választhatsz tetszőleges betűtípust is, de ebben az esetben Neked kell kikísérletezned az optimális betűméretet is. Ha készen vagy, akkor valami hasonlót kell látnod magad előtt, mint ami a következő képen szerepel:

Top Secret's Fireworks Properties 2.

Top Secret Stamp 2.

Ezek után már nincs más dolgod, mint létrehozni egy újabb teljesen fehér színű 308×128 pixeles téglalapot (Rectangle), kiválasztani hozzá a Metal című texturát (Texture), közvetlenül jobbra mellette található értéket 100-ra állítani, valamint a Transparent opció elé pipát tenni.

Top Secret's Fireworks Properties 3.

Top Secret Stamp 3.

Figyelem! Az így elkészült kép csak a fehér alapszínű “papírokon” mutat jól.

Hozzászólás: » 0 « • Írta: Péter (2010/08/07 15:24)