pix:mag 2012/01 július

2012/01 Július

PIX MAG - digitális webdesign magazin 2

FELHŐ vagy lufi?

Adobe Creative Cloud

</szoftver>

Írta: Tóth Zsuzsanna

PIX MAG - digitális webdesign magazin

2012/01 Július

3

FELHŐ vagy lufi?

Adobe Creative Cloud

2012/01 Július


</szoftver>

Nagyon vártam. Talán ez az oka, hogy kicsit csalódott vagyok.

Persze a legüdvösebb a dologban, hogy nem kell egy komplett vagyont kifizetni egy szoftvercsomagért, hanem végre alternatív módon a kis cégek számára is elérhetővé vált a bérléssel. Méghozzá jutányos áron - hiszen egy ezzel foglalkozó vállalkozásnak ki kell tudnia termelnie a bér-leti díját, azaz 59 EUR-t havonta, amely már tartalmazza az adókat, de egész éves hűséggel jár. Azt persze nem kezdem ecsetelni, hogy ez dol-lárban mennyibe kerül, és milyen versenyképes lehetek én egy amerikai designer céggel szemben. De itt a Creative Cloud, örüljünk!

Mi ez az egész?

Nézd meg a

YouTubeon!


2012/01 Július

5

Szerencsére, mint eddig minden szoftvernél, az Adobe most is biztosít egy 30 nap teszt-időszakot, amelyben kipróbálható a szol-gáltatás. A szoftverek teljes funkciójukban letölthetőek. Igen, ez volt az a pont, amikor először elkeredett a szemem, mert Cloud szolgáltatásként azt vártam, hogy online fut, és gyakorlatilag erőforrást vásárolok tőlük, illetve a futáshoz szükséges tárhelyet. De ugyanúgy a gépre kell tölteni a programokat egy menedzselő alkalmazás segítségével - a hozzá adott tárterület pedig a csomag részét képező Muse online játszótereként üzemel jelenleg. A Muse is a Creative Cloud csomag része, amit kódolás nélküli weboldal készí-tésként tolnak, az ilyesmit mindig megmo-solyogjuk. Drótváz készítéshez tényleg jó, de arra van az Adobenak speciális szoftvere - a Proto - szintén a csomagban.

Nagyon széles a letölthető alkalmazások listája - a számomra megszokott webes programokon kívül a Premier Pro és After Effects is meg-található - a már említett Muse mellett akár hangot is tudok vágni az Auditionnal. A tapi-zós iPadra Ideas, és Collage néven került skicc és moodboard szoftver is.Akadnak benne bőven hiányosságok - nekem a fizetős időszak hónapfordulóiban akadnak problémák, hiába egyenlítem ki, serial számot követel - ilyenkor az adott alkalmazást eltávo-lítva, és újra letöltve üzemel újabb 30 napig, és érzékeli, hogy minden oké. Mivel teljesen leszoktam az asztali gép használatról - Mac-book és iPad kombóban dolgozom, úgy érzem teljesen testreszabott megoldást kapok. Még-is van egy lufi érzés benne - akadozik még a rendszer működése, a felhőben való munka még fél lábbal a földön van.

Mi ez az egész?

Nézd meg a

YouTubeon!

Photoshop táblagépen


2012/01 Július

6

</munkakedv>

hogy menjen a munka!tipp designereknek

esignerként a feladatok gyakran összetorlódhatnak, a határidők a nyakunkban lihegnek, mi meg csak kapkodjuk a fejünket. Mihez is fogjunk hamarjában? Az idegőrlő stressz pedig egyáltalán nem tesz jót a kreatív munkának. Összegyűjtöt-

tem, nekem milyen praktikák váltak be, hogy összeszedettebben, gyorsabban haladjak a tervezési feladatokkal:

7

1 Előbb a kedvencet!Számomra mindig a leginspirálóbb feladat a legkönnyebben elvégezhető. Amíg valami mozgatja az agyamat, egyszerűen nem is tudok másra figyelni, így a munka szinte ma-gától megy. Minden más tevékenységem közepette is eszembe jutnak ötletek (mosoga-tás, vagy teregetés közben kiváltképp), amik előrelendítik a folyamatot. Persze a határidőkre figyelni kell!

2 Az időpont megválasztása2 gyerek és a háztartás mellett nem egyszerű mindenre időt szakítani, ezért napköz-ben már nem is erőlködöm azzal, hogy a gép elé üljek. Ilyenkor maximum néhány skic-cet vetek fel a bevásárlólista sarkára, vagy a gyerek kifestőkönyvébe. :)Mivel életritmusuk még véletlenül sincs összhangban, érdemi munkát csak éjjel tudok végezni. Igaz nem tudom, hanyadik évadot nyomják a Valóvillában, vagy a Rózsa biszt-róban, de ez szerencsére soha nem is érdekelt.

1. rész

D

Írta: Rózsahegyi Mayer Gabriella


2012/01 Július

7

hogy menjen a munka!tipp designereknek

3 Nemet mondaniÓriási a kísértés (főleg kezdőként), hogy bármilyen munkát elvállaljunk. Előbb-utóbb mindannyian rá kell, hogy jöjjünk: vannak ügyfelek, akik csak az időnket rabolják. Nem adnak kellő információt, visszajelzést és semmi nem felel meg a nem létező elképzelé-seiknek. Ilyenkor kell NEM-et mondani!

4 Olyan feladatot kaptál, aminek egyes részeihez nem értesz annyira? Szervezd ki a munkát! Nem szeretsz pl. logót tervezni? Bízz meg vele valaki mást, aki viszont imádja, te pedig hagyj ki neki helyet a layoutban, ahova majd beillesztheted. Ugyanígy bízha-tod másra a kódolást, vagy egyéb feladatot, amiben nem érzed magad elég magabiz-tosnak. Foglalkozz azzal, amiben a legjobb vagy!

Csinálja más!

5 Egyre több billentyűkombinációval keveredek szorosabb barátságba a grafikai progra-mokban. Valóban nem hülyeség, hogy kitalálták őket! Mostanában a Photoshop actionök a kedvenceim, amiket felvéve és alkalmazva kész moziélmény, ahogy szinte önműködővé válik a „gyári meló”.

Shortcut

6 Készíts! Ilyen egyszerű. Tényleg nagyon hasznos és időspóroló lehet, ha valódi terv alapján és nem csak a gridek között összevissza csapkodva kreatívkodsz.

Drótváz

7 Még a nénikémnek beköszönök a facebookon, még megnézem, lementem, elteszem ezeket a fontokat, ecseteket, tutorialokat, vektorokat, képeket...Nna ezt fejezd be! Órákat töltöttem el mindenféle okosság nézegetésével, könyvjelző-be cibálásával, amiket aztán rendre mind elfelejtettem még egyszer elővenni, megta-nulni. A munka (amiért fizetnek ugye) meg persze nem haladt. Erre jelölj ki egy lazítós estét, amikor töltődhetsz, fejlődhetsz, tanulhatsz!

Böngésző kikapcs

Írta: Rózsahegyi Mayer Gabriella

2012/01 Július


</apps>

Vannak akik azt hiszik, hogy már a lányomat is az Apple rajongásom okán neveztem el Almá-nak. Pedig akkor, mikor erről kellett dönteni, a másik tábort erősítettem egy kis Samsung Galaxy Minivel.

Megtérésem nem pálfordulás, tervezőként mindkét platformra dolgozom, de az Apple termékek elkezdtem szaporodni a házban, és ezt nemrégiben egy saját iPhone-al is megko-ronáztam.

Szerencsére maradt a kis csapatunkban olyan, akiben Android szív dobog, Szijártó József, aki életet lehell a munkáimba a mindennapok-ban. Két típusú felhasználó, két egymást kie-gészítő munka, két platform.

A márkaharc köztünk pusztán csipkelődés tár-gya, de a magaslabdát sosem hagyjuk ki :)

Apple VS Android


2012/01 Július

9

Apple VS AndroidMegkértem Józsit, hogy az általa használt 90 Android alkalmazásból szedje össze azokat, amelyeket a napi munkája során megkedvelt, büszke Motorola Razr tulajdonosként. Én is így teszek, bár közel sem futtatok ennyi IOS appot a hófehér 4G-n - és bőven akadnak átfedések.

A harc most sem dől el természetesen, to-vább robog a marketing gépezet!Akármelyik is szimpi neked, ezeket az appo-kat javasoljuk legalább egy próba erejéig!

Az alkalmazások többsége egyébként mindkét rendszeren elérhető, a lista a mi személyes ked-venceinket tartalmazza!

2012/01 Július


Inspired MagÉn bulvár és politika helyett designhíreket olvasok. Az Inspired Mag az egyik kedvenc oldalam, az appot azonban főként akkor használom, ha utazom, várok, vagy unatkozom - utóbbi mond-juk nem túl sűrű. Az app nem csak a saját új posztjaikról ad hírt, hanem egy Design News hírfo-lyam is található benne a legnépszerűbb design blogokkal.

FlipboardÖnmagában az iPhone alapértelmezett News appja is tökéletesen megfelel az újság, vagy könyv olvasáshoz, de ha magazinos életérzést is akarok a virtuális lapozás mellé, akkor bizony a Flipboard a megfelelő választás. Az UI valóban nagyon ergonómikus, a hagyományos olvasás élményt biztosítja. Rengeteg tartalmat biztosít, de természetesen teljesen személyre szabható - iPadot is használok, és imádom, hogy amit az egyik eszközön letettem, a másikon folytathatom. Én telefonon nem szeretek hosszabb anyagokat se írni, se olvasni, de itt ez kevésbé zavar.

Az AppStoreban minden van!


2012/01 Július

11

AldikoAz Aldiko egy igényes e-könyv olvasó app. Méltán érdemelte ki a legjobb címet, tableten és telefonon is egyaránt jó választás. Kezeli a legtöbb ismert e-könyv formátumot, többek közt bármilyen PDF dokumentumot vagy ePub formátumú könyvet is importálhatunk bele. Nem mellékes ezen kívül, hogy

magyar nyelvű lokalizációt is kapott. Két verzió létezik belőle: az ingyenes és a reklám-mentes prémium verzió.

Minimálisan Android 2.2 verzió szükséges a használa-tához. Találunk benne beépí-tett boltot is, ahol több szak-mai könyvet is vásárolhatunk (pl.: O’Reilly).

Magyar nyelvű könyveket egyelőre ne keressünk ben-ne.

WunderlistEgy igazán szép felülettel rendelkező feladatkezelő alkalmazás. Amiért szeretjük, az a multiplatform és az egyszerűség. Androidon kívül el-érhető az összes létező és nagyobb számban használt operációs rendszerre, sőt, még böngészőből is. Ha te is több platformon dolgozol egyszerre, akkor

ez számodra a legjobb választás, hogy mindig szinkronban tartsd a feladatokat.

Létrehozhatsz benne listákat, a listákhoz pedig feladatokat rendelhetsz - jegyzetekkel, határidővel. Ez a legtöbb igényt általában kiszolgál-ja. A listákat ezen kívül más Wunderlist felhasználóval is megoszthatod, hogy közösen kezeljétek a feladatokat. Az alkalmazás teljesen ingye-nes, és reklámmentes.

Irány a Google Play!

2012/01 Július


What the fontRégen hajlamos voltam bármit beszkennelni, ami tetszett. Ma már inkább lefényképezem. Jártamban-keltemben gyakran találkozom olyan feliratokkal, csomagolásokon, reklámokon, ame-lyek betűtípusait egy-egy munkában én is szíve-sen alkalmaznám. De ki az ördög tudja milyen font?

A webes betűkészlet azonosító, a What the font immáron iPhone alkalmazásként is elérhető. Csodát ne várjunk, hasonlóan pontos, mint bön-gészős társa, de hasonló készletek kereséséhez jól jöhet.

The Font GameKezdőként minden betűtípus egyforma. Egyik kicsit kövérebb, vagy cirádásabb, de alapvetően nem érteni mi is ez a tipográfia dolog. Nos, valóban kicsit betegnek tűnik elsőre, hogy valaki Angry Birds helyett fontkészleteket nézeget játék gyanánt, és még élvezi is. De a betűkészletekkel való jó kapcsolat kiépítésé-hez jó edzés egy ilyen felismerős, azonosítós játék mint a ‚The Font Game’. Egyetlen hátránya, hogy 2 dollárt kóstál, de ha igazán elvetemült tipográfus hajlamú vagy, 500 Ft körüli össze-get megér.


2012/01 Július

13

Evernote és SkitchAz Evernote talán a világ legjobb jegyzettömb alkalmazása. Mint általában, az Evernote esetében is az egyszerűsége a kulcs. Multiplatform, tehát a leg-több operációs rendszeren elérhető, így a „platformnomád” életmódhoz is megfelelő társ. Az már csak hab a tortán, hogy böngészőn keresztül is elér-heted a jegyzeteid.

Az Evernote készített egy kiegészítő alkalmazást, mely az Evernote esetében hiány-pótlónak bizonyult.

Ez a Skitch.

A Skitch egy egyszerű rajzoló alkalmazás. Lehetőséged van alapvető formák, nyi-lak és szövegek elhelyezésére. Ezt megteheted szimplán egy fotóra, egy térkép-részletre, vagy csak úgy önmagában is. Az elkészült műveket ezek után az Ever-note-ba mentheted el egy jegyzetként, sőt, el is küldheted ismerősödnek, vagy

megoszthatod bárkivel. Az Evernote és a Skitch alkalmazás is teljesen ingyenes.

Katt a képre,

és irány a YouTube!

2012/01 Július


PinterestA Facebook után a második, általam legtöbbet látogatott oldal a Pinterest. De míg a Facebookra dolgozni járok fel, a Pinteresten kikapcsolódok. Szabadjára engedem a szemem, a szellemi és vizuális táplálékfelvételem egyik fontos forrása. Mivel ez egy teljesen más közösség - a statisztikák szerint elsősorban a nők kedvence, itt is újabb szakmai, vagy baráti kapcsolatokra tehetsz szert!

Növelheted a weboldalad, blogod látogatottságát is - itt azonban a képen van a hangsúly, tehát ha van egy jó képed, és egy ahhoz tartozó bejegyzésed, a kép alá linkelve további olvasókhoz juthatsz! Mobilon sem szeretek elszakadni a csodálatos fotóktól, egy-egy PIn erejéig fel-fel né-zek rá, mik a friss tartalmak. Az alkalmazás kielégíti ezt az igényt, átlátható a felülete, szeretem használni!


2012/01 Július

15

Logo QuizEgy kis kikapcsolódás. Márkaérzékeny vagy? Akkor ez a te appod. A Logo Quiz nem másról szól, mint hogy fel kell ismerned a logókat, majd beírni a hozzá tartozó már-kaneveket. Ám ez nem mindig egyszerű, mivel a logók többségének csak egy részle-tét láthatod. Az alkalmazás két változatban érhető el. Az ingyenes változatban 152

logót, míg a fizetősben 250 logót ismerhetsz fel. Az alkalmazás bizonyos időközönként újabb logókkal bővül.


2012/01 Július

16

ÖLTÖZZ PIXELBE!

14,95 $ Megveszem

36 EUR Megveszem

Mi a PIX:MAG-nál imádjuk a pixeleket! Nem hiában dolgozunk a Pixelgyárban!

Bármilyen színben, bár-milyen felületen! Össze-gyűjtöttük azokat, amik mi is szívesen felven-nénk, vagy használnánk!

</pixeles>


2012/01 Július

17

Megveszem

Megveszem89 $

A legjobb fotók forrása a


2012/01 Július

18

</wordpress>

Kategóriánként eltérő stílusú bejegyzésA WordPressben az egyik legnagyobb ötletnek a bejegyzés-kategóriákkal való variálást tar-tom. Ha különböző témákban rendszeresen újabb és újabb tartalmat szeretnél megosztani, pl. van egy portfólió oldalad, ahol a referenciáid oldala és a blogod is rendszeresen frissül-nek,de mindkettőt más módon szeretnél megjeleníteni (például legyen más a bejegyzés címe, betűtípusa, vagy a képek mérete, elhelyezkedése), akkor jön jól az említett lehetőség.

Létezik jó pár plugin ennek megoldására, de akár bővítmény nélkül is megoldható, ha egy picit megváltoztatjuk, kiegészítjük a WordPress sablonunk kódjait. Aki még nem tett ilyet, nem kell megijedjen, csak az a fontos, hogy mielőtt belekezd, készítsen egy másolatot a sablonjáról a tárhelyére, hogyha bármilyen baleset történik kódturkászás közben, az eredeti állomány vissza-töltésével visszaállíthassuk a kiindulási helyzetet, így szabadon „garázdálkodhatunk”.

1.) Szóval első lépésként a tárhelyünkön az aktuális sablonunk mappájában meg kell keres-nünk a single.php file-t, amelyből rögtön két másolatot. Az egyiket nevezzük el single1.php-nak, a másikat pedig single2.php-nak.

2.) Majd a WordPress admin felületén a sablon szerkesztőjében nyissuk meg az eredeti single.php-t. Töröljünk ki mindent, amit ott találunk és másoljuk be a helyére az alábbi kódot:

<?php$post = $wp_query->post;if ( in_category(‚9’) ) {include(TEMPLATEPATH . ‚/single2.php’);} else {include(TEMPLATEPATH . ‚/single1.php’);}?>

A 9-es helyére a kívánt kategória azo-nosítóját helyettesítsd! Amely kód azt fogja eredményezni, hogy amennyiben egy adott bejegyzés a 9-es kategóriába tartozik, akkor a single2.php fájlban foglaltak fognak érvényesülni, minden más esetben viszont a single1.php-ben található utasítások valósulnak meg.

Sőt, ilyen alapon, ha továbbmegyünk, akár több különböző bejegyzés-nézetet is beállíthatunk, amennyiben fenti kódot még néhány sorral kiegészítjük:

Írta: Szigeti Annamária


2012/01 Július

19

Kategóriánként eltérő stílusú bejegyzés

<?php$post = $wp_query->post;if ( in_category(‚9’) ) {include(TEMPLATEPATH . ‚/single9.php’);elseif ( in_category(‚12’) ) {include(TEMPLATEPATH . ‚/single12.php’);elseif ( in_category(‚42’) ) {include(TEMPLATEPATH . ‚/single42.php’);} else {include(TEMPLATEPATH . ‚/single1.php’);}?>

4.) Mivel a megfelelő stíluslapokat a fejlécben kapcsoljuk be, ez számunkra azt jelenti, hogy készítenünk kell egy új header fájlt is (pl. header-9.php), amely az előző lépésben elkészített style-9.css fájlt hívja meg. Ebben az új header file-ban a megfelelő sort az alábbira kell cse-rélni:

<link rel=”stylesheet” href=”<?php bloginfo(‚template_directory’); ?>/style-9.css” type=”text/css” media=”screen” />

5.) Ha eljutottunk idáig és még mindig bírjuk idegekkel, akkor már csak egy utolsó lépést kell megtennünk: a megfelelő single1.php fájlban a <?php get_header(); ?> kódot az alábbival kell felülírnunk:<?php include (‚header-9.php’); ?>Ez a kód be fogja hívni nekünk azt a fejlécet, amelyben az új stíluslapunk linkjét elhelyeztük.

A fenti lépéseket aztán minden kategóriára, melyet az eredetitől eltérő stílusban akarunk megjelentetni, meg kell ismételjük.

Forrás: http://wpgarage.com/tips/displaying-single-post-pages-differently-in-specific-categories/

3.) Ha mindezzel megvagyunk, el kell készítenünk az egyes kategórianéze-tek saját stíluslapját, a fenti példát folytatva pl. a style-9.css fájlt (amely a 9-es kategóriára vonatkozik.)

Írta: Szigeti Annamária

2012/01 Július


TÁBLAGÉPET MINDENKINEK!

</mobil>


2012/01 Július

21

TÁBLAGÉPET MINDENKINEK!

Itt a NEXUS 7Nehéz úgy írni valamiről, hogy még sosem láttam. De láttam már tabletet, és gyanítom ez is olyan lesz. Sőt szinte még senki sem lát-ta, mert igazából csak júliustól lesz kapható, most csak előrerendelhető, ha a világ sze-rencsésebb felén születtem.

Írta: Tóth Zsuzsanna


2012/01 Július

22

</mobil>

Tulajdonképpen a napok óta tartó zsongás egy új olcsó táb-lagépnek szól, a Nexus 7-nek, amit a Google a tömegnek szán - 199 dollár, azaz nagyjá-ból 45 e Ft értékben. Van már ilyen, az Amazon Kindle Fire elnevezésű gépe kívánta ed-dig olcsó tabletként meghódí-tani a világot. Engem is meg-hódított volna, ha lehetne ide rendelni, de nem lehet, a vas-függöny ott van még mindig, csak virtuális.


2012/01 Július

23

Reménykedem benne, hogy a Google piacnak tekinti ezt a lábáztatót - pár hónapos csúszással minket is odaenged a fazékhoz. Mondjuk szállítással, vámmal, és áfával már nem lesz olcsó táblagép - az Amazon ebben gáláns volt sokáig, és átvállalta a Kindle ebook olvasók ilyesféle költségeit, aztán gondolom már kevésbé volt buli.

A vas egyébként ASUS, a lelket meg Android adja, zseléset - azaz a legújabb 4.1 Jelly Bean verzióval üzemel. A Google „állítólag” előállítási áron adja a kis kütyüt. Az alacsony ár, és az Android mellett azért ne nézzük a Googlet Mikulásnak - a fröccsöntésbe tett óriási kiadás a reklámfelületeken fog meg-térülni. Persze könnyű annak, aki eleve így indul, nem kell lepkehálóval összefogdosni a hirdetőket. Valamint az ingye-nes alkalmazások mellett a Google Play igazi felfutását várják az 1-2 dolláros, Androidon is fizetőképes közönségtől. Vár-juk!

Mire jó?


2012/01 Július

24

marketing

facebook.com/pinteresting

Kattints és csatlakozz!


2012/01 Július

25

ResponsiveWebdesign

Az milyen?

Annyi féle megjelenítő eszközön interne-tezünk, hogy eljött az idő, amikor nincs szten-derd fejlesztési méret, nincs optimális képer-nyőfelbontás, nincs átlagfelhasználó sem.Mindenféle böngészőre, méretre és szoftver-környezetre nem lehet felkészülni a még min-dig másolt XP-t, és IE6-ot futtató gépektől a legújabb csúcsmodell okostelefonokig.Mennyivel is egyszerűbb lenne a dolguk, ha valóban lennének szabványok méretben, kód-ban - de a gyártók diktálnak, a tartalomfejlesz-tők meg mennek utánuk - egyszeri tervezőnek nem maradt más, mint a gumidesign, azaz: Fogtok itt szórakozni velem, ezentúl rugalmas lesz a design az adott eszközhöz igazodva!

Dióhéjban ez a responsive webdesign, amely felismeri az adott eszköz paramé-tereit, és a megfelelő stíluslappal szolgálja ki, úgy hogy az alapvető funkciók minden kütyün elérhetőek.Szép, új világ - írta Huxley. Valami hasonló körvonalazódik, amikor ilyen megoldások kerülnek előtérbe, de persze tudjuk, hogy utópia. Az biztos, hogy a mobilos online tartalomfogyasztás, mint a rakéta, olyan se-bességgel növekszik. Még itthon is, néhány általam menedzselt weboldal akár 400% százalékos emelkedést mutat a tavaly ilyen-korhoz képest.Ideje rugalmasabbaknak lennünk!

</szaknyelv>


2012/01 Július

26

</fireworks>

Az OWT Facebook oldalán tettem fel a kérdést, melyik szalagos dobozt szeretnétek tudni, hogyan készül a gyakorlatban? Az itt látható típusra, azaz az A jelzésűre jött több kérés, így elő a Fireworks programmal, és lássatok neki a szalagos, bárányos boxnak!

MASLIS BARIS BOX :)A grafikához a Fireworks CS6 nevű programot fogom használni.A miértekre a konzerv válaszom az, hogy a Photoshop fo-tószerkesztő, a Fireworks meg webtervezésre van kitalál-va, és én évek óta ebben tervezem a web rám eső részét.

Az egyik nagy előnye, hogy az elkészülő grafika vektoros lesz, így könnyebb, gyorsabb mozgatni, mint egy sok MB-os .psd-t, és a végtermék is jobb minőségű, kisebb fájlmé-retű kép lesz. És mert szeretem...

Ha nincs Fireworksöd, innen tudod letölteni a 30 napos próbaverzióját, amelyben minden funk-ció teljes értékűen működik.


2012/01 Július

27

1. lépésKinyitom az Fireworks CS6 programot, és a File / New Documents menüponttal egy 800x600 pixeles alapot készítek, erre rajzolom meg a dobozt. Az alap színe fehér, vagyis a White van bepipálva.

2. lépésA tervezéshez hasznos, ha bekapcsolom a rácsot, megkönnyíti a méretezést - itt találod -View / Grid / Show Grid

Én az alapértelmezett 36x36 méretnél kisebbet 10x10-es kockákat szeretnék használni, ezért ugyanott az Edit Grid részben tudom ezt átállítani. Ugyanitt felette a Rulers, azaz vonalzó funk-ció is ezt szolgálja - ha már ott jársz kapcsold be azt is.


2012/01 Július

28

3. lépésEgy 300x400 px méretű téglalapot húzok - az eszköztáron lévő Rectagle Tool eszközzel -

</fireworks>

Alul tudom pontosan meghatározni a kívánt méretet - 300x400 px, illetve kitöltő színt - fehér #FFFFFF - állítok be, és egy körvonal színt is - világos szürkét - #CCCCCC, 1 px vastagságban.


2012/01 Július

29

4. lépésHa az alap box megvan, jöhet a masli.Kicsit belenagyítok (nagyító ikon az eszköztáron), úgy könnyebb a méretezés - 4 kiskocka, azaz 40px magas téglalapot húzok, ami az alapboxhoz képest mindkét oldalon 2-2 kis kockát kilóg, azaz 340 px.Van egy 40x340 px méretű csíkom, amit a már használt kitöltési módon zöldre festek - #85B200, a körvonalát pedig megszüntetem - ha a körvonal dobozkáját lenyitod, egy pirossal áthúzott képet keress (ugyanígy lehet a kitöltést is megszüntetni, ha csak körvonalra lenne szük-séged)

A maslitól ez még messze van, ezért a két végére rajzolok egy-egy szépen bevágott fület.Ehhez az eszköztáron lévő Pen Toolt használom - a Vector címke alatt találod.


2012/01 Július

30

A szalagvég megrajzolása 5 egyszerű lépésből megvan:

1. Nyomj egy pöttyöt valahová, egy kiskocka sarkába, majd a Shiftet közben nyomva - ebből kiindulva húzz 5 kiskocka hosszú vonalat2. Felfelé 6 kiskocka hosszú vonalat3. Majd jobbra is 5 kiskockányi vonalat4. Itt jön az apró trükk - a feléig kell most húzni a vonalat, és kettővel beljebb, átlósan5. Majd ugyanez visszafelé, ennek a vonalnak bele kell futnia a kezdőpontba.

</fireworks>

Ha összevissza megy a vonalad, akkor nem nyomod a Shiftet. Nyomd! Elsőre nem fog menni, nekem sem mindig megy, próbálkozz, míg nem kapsz egy ilyen alakzatot, ez lesz a masni vége. Színezni a már ismert módon tudod.

Hogy a szalagnak másik vége is legyen, egy sima CTRL+C, CTRL+V-vel meg tudod duplázni. A másolat rajta lesz az eredetin, csak le kell húzni.Majd rákattinva jelöld ki, hogy a kis kék keret megjelenjen rajta és egy jobb klikket neki! Így megjelenik a Transform opció, amiben a Flip Horizontal lesz a barátunk, ez megfordítja.


2012/01 Július

31

Ha ezzel megvagyunk, illesszük őket a helyükre - 2 árnyalattal sötétebbre színeztem őket, hogy látszódjon hová tettem - a doboz széléhez illesztettem őket, egy kockával feljebb van, mint az alap csík.

De így még nem az igazi. Küldjük őket hátra, ahová valók. Ehhez megint ki kell őket jelölni, de most a jobb klikkel az Arrange / Send to Back opciót kell választanunk.


2012/01 Július

32

</fireworks>

Már majdnem készen is van! Az első és hátsó szalagokat kössük össze, hogy szépen ráilleszked-jenek a dobozra. Ismét a Pen Tool eszközt használom, a már ismert módon, a Shift lenyomásá-val egy-egy háromszöget készítek - két kiskocka hosszú és egy magas méretben. Ha nem akarsz kétszer rajzolni, a duplázás és tükrözés itt is jó megoldás.


2012/01 Július

33

A szalag gyakorlatilag kész. A fél siker is siker már! De haladjunk tovább! Egy kis színátmenet-tel teszem szebbé ezt a libazöld színt. Az átmenetet ugyanott kell készíteni, ahol a színnel ki-öntést. Jelöld ki melyik elemet akarod színezni, és ott ahol a kiöntés van, a Gradient Fill ikont nyomd meg (1) -- utána a (2) kitöltés színét - itt már van egy alap átmenet - itt úgy tudod meg-változtatni a színeket, hogy a kis négyzetekre kattintasz (3)Az átmenet iránya, és aránya ezzel a csúszkával változtatható, akár el is forgatható (4)

Ezzel a módszerrel a szalag széleit is átszínezem, hogy valóban egy fényes szalag hatását keltse a grafika. A T, vagyis felirat eszközzel (1) pedig egy tetszőleges feliratot helyezek el - lent a beállítások részen ilyenkor ne csak a színek, hanem betűtípusok és méretek jelennek meg. A Segoe Print (2) betűcsalád 30 px méretű, fehér színű (3) feliratán most az áll: Friss posztok. Mert ez egy olyan doboznak készült, ami valamely weboldalon a legfrisebb tartalom kijelzésére hivatott. A Fireworks segítőkészen egy vonallal jelzi, hogy középen van-e a feliratod.


2012/01 Július

34

</fireworks>

5. lépésJöhet a doboz tartalma. A rács segítségével bele tervezek egy kép helyet is - fent és két oldalt is 2-2 kiskocka, azaz 20 px helyet hagyok eltartás gyanánt. A kép helyének kijelöléséhez ismét a Rectagle Tool eszközt használom. A méret végül 260x150 px lesz.

Egy ilyen dobozban nem csak egy képes cikkajánlót lehet elhelyezni, hanem akár hármat is - azt hogy mennyi van benne egy apró lapozóval tudjuk jelezni - a 3 váltakozó cikk optimális. A la-pozás lehet automatikus, vagy kézi is. A lapozó váltáskor az egyik kis körökcske mindig aktívan jelzi a cikkek helyzetét ebben a körforgásban.Ahol a Rectagle Tool, azaz a téglalap rejlett, ott található a kör is, azaz Ellipse Tool - a sarkában lévő lefelé mutató nyilacskát kell határozottan megnyomni.

Ezzel 3 darab kis kört helyezünk el a képnek szánt hely alatt - készíts el egyet, és másold (CTR-L+C, CTRL+V)Nem kell nagy legyen - 10x10 px-es elegendő, amelyik az aktívat jelzi, abba egy kisebb is kerül 6x6 px méretben. Színezni tetszés szerint lehet - én csak a körvonalukat színeztem most - #638400 - azaz libazöld színnel. A helyzetjelző kisebb kör pedig egy #4F5800 kitöltést kapott. Ha nem tudod hogyan kell körvonalat színezni, menj vissza az 1. lépésig.


2012/01 Július

35

Ha a rács és a szemmérték segítségével nem tudod őket úgy összeigazítgatni, hogy egyenlő tá-volságra legyenek, akkor jelöld ki mind a hármat - Shift nyomása közben kattingass rájuk, mind mindhárom kör nem lesz kék kiemeléssel körülvéve.Ezután a Window menüpont (fent) Align pontját válaszd ki, ekkor egy kis táblának kell valahol megjelennie, különféle igazgató jelekkel - a Distribute horizontal Center lesz az, ami egyenlő távolságra helyezi el őket egymástól - ha egérrel rámész, egy kis felbukkanó sorban jelzi me-lyiknek mi a neve.

Tipp:


2012/01 Július

36

</fireworks> Ismét jöhet a szövegezés. Egy címsort és egy un. leadet fogunk beszerkeszteni - ezek általában változó tartalmak - de az ilyen dobozokban adott karakterszámmal jelennek meg a cikkek kivo-nataiként. Érdemes arra is felkészülni, hogy két soros címek is jöhetnek - ez mondjuk szerkesztői és nem designeri döntés.Konkrét cikk helyett vakszöveggel dolgozunk - de a sztenderd Lorem Ipsumot már nagyon unom, ezért a sokkal viccesebb Cupcake Ipsum szöveggenerátorral készítek egy címsort, és egy rövid szöveget. A szöveget a rács segítségével pozicionálom, úgy hogy illeszkedjen a kép széleihez is. A címsor egy 16 px Candara, a folyó szöveg pedig egy 12 px Arial, sötétszürke #333333 - ez kevésbé ke-mény, mint a fekete szöveg szín, nem fárasztja a szemet olvasáskor.

Két apró simítás még… Egy markáns árnyék, hogy kiemelkedjen a síkból. Nem igazi árnyék, amolyan ál-árnyék ez. Az alapnak használt fehér dobozt duplázom meg egy CTRL+C/CTRL+V mozdulattal, körvonal helyett az egészet szürkére színezem, majd jobb klikk Arrange / Send toi Back-el hátraparancsolom az egész cucc mögé. Tetszőlegesen oda húzgálhatom, ahová csak szeretném.


2012/01 Július

37

Én behúzom a box alá, hogy egy kiskocka sornyit lógjon ki, majd lent ahol a mérete látszik, 300-ról 280-ra írom át a szélességét, így 10-10 pixel, vagyis egy-egy kiskoc-ka behúzás születik.

A kép helyének kihagyott dobozba pedig egy 260x150-es képet vágva elkészült a szalagos dobozunk. Ezeket a cuki bárányokat a Pinterestről tereltem be ide, némi fazonírozás után.

Kapcsold ki róla a Gridet (1. lépés-ben, ahol bekapcsoltad) - és nézd meg mit hoztál össze: egy bárányos, szalagos dobozt. Ugye nem is volt nehéz?


2012/01 Július

38

Mindennapi kreativitásunk add meg nekünk ma!

facebook.com/napikreativ

Kattints és csatlakozz!


2012/01 Július

39

gyors és egyszerűkonverziónövelőváltoztatás10

HatáridőA döntést elősegítve használj olyan ösztönző szövegezést, amely sürgeti a vásárlást! Kihagyhatatlan ajánlatok - ez lehet visszafelé pörgő számláló, vagy aznapi különleges akció, a lényeg, hogy a vevő ne akarjon lemaradni!

Vezesd színekkelA figyelem felkeltésére alkalmas a piros, narancs - szintén sürgető színek, de egy hosz-szabb rendelési folyamat esetén is szépen végig vezethető a felhasználó, ha csak nyomnia kell a piros gombot (tudod, ami tilos, és mindenki meg akarja nyomni)

EgyszerűsítsHa már a termékoldalon, vagy kosár oldalon tartózkodik a látogató, és egyetlen célra kellene összpontosítani, a megrendelésre, ne tereled el a figyelmét ugráló, pittyegő bannerekkel, vagy nem releváns oldalak linkjeivel, amelyeken keresztül akár el is ve-szítheted őt.

Mi van a gombon?Legyél egyértelmű! Mi az amire feliratkoznak, letöltenek, regisztrálnak, megrendelnek, mi történik kattintanak? Kattinsd ide! helyett Kattints és nézd meg! vagy Kattints és töltsd le!

Ne kérj sokat!Nem pénzt, adatot. Bármilyen jó is az ajánlatod, ha felesleges regisztrációs folyama-tokba kergeted a vásárlód, könnyen feladja. A számlázási, szállítási adatokat akkor is ráérsz elkérni, ha már a pénztárnál van.

Nyálcsorgatós képekNem csak a topmodellek fotói lehetnek ellenállhatatlanok. Egy ütvefúrót is lehet esz-tétikusan fényképezni, és akár több, kiváló minőségű fotót is feltenni róla. Tégy egy próbát - néhány terméket bízz igazi fotósra, és teszteld, jobbak-e a számaid, mint a pixeles, mütyür képek esetén. Az agyonvízjelezett képek szintén nem ösztönzők!

2012/01 Július


</konverzió>

Valódi képekHa olyan jellegű a terméked, amit a vásárlók nagy százaléka akarna kipróbálni rende-lés előtt, készíts werkfotókat, werkfilmet a használatáról, valódi tesztekben bemutatva a tudását.

Vásárlói véleményekErősítik a bizalmat, elősegítik a döntést - de valódi, lenyomozható, akár megkérdez-hető ügyfél kommenteket tegyél ki - a stock fotókon lévő álkliensek, és az átlátszó műörömködés visszacsaphat.

Elhagyott kosarakVidd a vásárló után! Ha regisztrált tagod, küldj neki emlékeztetőt, hogy mit felejtett a kosarában, és mellé egy speciális kedvezményt - lesz aki tényleg csak ottfelejtette!

Tesztelj!Készítsd el az ajánlatod több féle célcsoport számára, érd el őket különböző csatorná-kon - egészen eltérő tapasztalatokat hozhat ugyanarra a termékre épített kampány, amit továbbfejleszthetsz egy következőben! Itt próbálkozni kell, nincs titkos recept!


2012/01 Július

41