Tippek az Illustratorral való munkához. A Photoshopot kedvelő webdesignereknek

Tippek az Illustratorral való munkához. Íme egy őrült ötlet – tervezze meg következő webes projektjét az Illustratorban. Ha Ön elsődleges webtervező, valószínűleg nem fog túl jól reagálni erre a javaslatra. Az Illustrator egyszerűen nem tud mindent megtenni, amit a Photoshop, igaz?

Nem biztos, hogy ilyen módon.

Bár A Photoshop de facto eszközzé vált webdesign, az Illustrator több mint képes megfelelni az Ön igényeinek. Elrendezési eszközeinek köszönhetően gyakran jobb és alkalmasabb program webdesignhoz.

Mivel a legtöbb webdizájn szakember nem szeretne bizonyítékokat keresni az Illustratorban, összeállítottam egy listát azokról a webes szolgáltatásokról, amelyeket ismernie kell ahhoz, hogy az Illustrator webdesignjával kísérletezzen.

Próbáljon ki néhányat ezek közül, és garantálom, hogy az Illustratort standard eszközként fogja használni a webdesign munkafolyamatában.

1. Először is: állítsa az összes mértékegységet pixelre. Tippek az Illustratorral való munkához

Alapértelmezés szerint az Illustrator metrikát használ egységek az objektum- és pontméretekhez szöveghez. Ezek nagyszerű beállítások a legtöbb tervezési helyzethez, de a web design valószínűleg mindenhol pixeleket szeretne látni. Tehát mielőtt bármi máson elkezdene dolgozni, győződjön meg arról, hogy az egységei megfelelően vannak beállítva.

A mértékegységek pixelre állítása:

1. Megnyitás a Szerkesztés menüben
2. Válassza ki a mértékegységeket a beállítások almenüből.
3. Állítson minden beállítást "pixel"-re

2. Hozzon létre dokumentumokat webes dokumentumprofil segítségével.

 

Ha új dizájnon szeretne dolgozni, egyszerűen görgessen végig az Új dokumentum ablakban, és hagyjon ki néhány fontos részletet – például elmondja az Illustratornak, hogy webdizájnon szeretne dolgozni, hogy ne használjon CMYK színeket. és a tárgy elmosódott élei. Ne felejtse el kiválasztani az Internetprofil beállítást az Új dokumentum ablakban, és minden rendben lesz.

3. Engedélyezze a pixelrács-igazítást az objektumokhoz. Tippek az Illustratorral való munkához

Ez a funkció életmentő, ha valaha is gondja volt az elmosódott alakzatokkal a Photoshopban.

A Pixel Grid Alignment funkció beállítja az objektum egyenes vízszintes és függőleges szegmenseit, hogy tökéletesen illeszkedjenek a pixelrácshoz, miközben az ívelt és ferde szegmenseket simán tartja. Az eredmény éles, pixel-tökéletes formák – valami olyasmi, amit mindenképpen szeretne a webdizájnban.

A felső gombon engedélyezve van a pixelrács igazítása, ami mindig éles éleket eredményez.

Az objektumszintű pixelrács-igazítás engedélyezéséhez:

1. Válassza ki az objektumot
2. Nyissa meg az Átalakítás panelt (Ablak > Átalakítás).
3. Jelölje be az „Igazítás a pixelrácshoz” jelölőnégyzetet a panel alján (ha nem látja, kattintson duplán a panelre a lehetőségek megjelenítéséhez)

Jegyzet. A pixelrács-igazítás alapértelmezés szerint engedélyezve van a webes dokumentumprofillal létrehozott összes új objektumnál. Ha azonban más Illustrator-fájlokból illeszt be objektumokat, manuálisan kell beállítania a pixeligazítást. Tippek az Illustratorral való munkához

4. Kapcsolja be a pixel előnézetet.

A Pixel-Preview funkcióval az Illustrator a Photoshophoz hasonlóan viselkedik, amikor 100% fölé méretezi a képet – ahelyett, hogy minden alkalommal tökéletes vektorokat kapna, a pixeleket valójában úgy látja, mintha raszteres képpel dolgozna.

A pixel előnézet bekapcsolásával úgy érzi, mintha a Photoshopban lenne.

Gondoljon bele, milyen klassz – a vektorgrafika minden ereje a keze ügyében van, és láthatja, hogyan néz ki az eredmény pixelszinten.

Ügyes, nem?

A pixel előnézet engedélyezése vagy letiltása

1. Nézet menü megnyitása
2. Válassza a Pixel View lehetőséget.

5. Használjon grafikai ablakokat. Tippek az Illustratorral való munkához

Képzeld el, hogy két videokamera a projektedre irányul.

Az egyik kamera normál zoomszinttel rendelkezik, amely a munkája 100%-át mutatja. A másik kamera 400%-os zoomszinttel rendelkezik, és egy adott ikonra irányul, amelyen éppen dolgozott.

Akár egy sebész, a zoom kamerával apró pixelszintű változtatásokat hajt végre az ikonon, időnként rápillantva a 100%-os zoom kamerára, hogy lássa, hogyan is néz ki valójában a valós méretében.

A fedőablakok nagyszerűek, ha apró elemekkel, például ikonokkal kell dolgoznia – nem kell folyamatosan nagyítani és kicsinyíteni, hogy megnézze, hogyan néz ki minden.

Ezek grafikai ablakok – lehetővé teszik a terv egyidejű megtekintését különböző nagyítási szintekkel, színbeállításokkal és más változatokkal. Ez nagyon hasznos a webdesignban, különösen akkor, ha pixel szintű részletekkel dolgozik.

Az Artwork ablakok használata:

1. Nyissa meg az Ablak menüt, majd válassza az Új ablak lehetőséget. Az Illustrator új lapot hoz létre ugyanazzal a dokumentummal.
2. Lépjen újra az Ablak menübe, és válassza az Elrendezés > Az összes áthelyezése ablakba parancsot. Ez lehetővé teszi a változást ablakok mérete és elhelyezése egymás mellett, ahogy jónak látod.
3. Kísérletezzen a különböző nagyítási szintekkel az ablakokban, és kezdjen el néhány változtatást végrehajtani, hogy megtudja, hogyan működik. Tippek az Illustratorral való munkához

6. Használjon szimbólumokat gombok, ikonok és egyebek gyors létrehozásához.

Hányszor hozta létre ugyanazt (vagy majdnem ugyanazt) a gombot, ikont vagy widgetet a Photoshopban? Ha foglalkozik webdizájnnal, valószínűleg minden nap csinálja.

Az Illustrator segítségével időt takaríthat meg, és elkerülheti a szimbólumokkal végzett ismétlődő munkát.

Lényegében a szimbólumok kész végtelen halmaza design elemek, amely egyszerűen húzással hozzáadható a műhöz, majd szükség szerint módosítható. Ideális gombokhoz, ikonokhoz és egyéb szabványos objektumokhoz, amelyeket nem kell a semmiből létrehozni.

De van egy másik ok is, amiért a szimbólumok erősek, és ezt példányosításnak hívják.

A szimbólumok nemcsak kényelmesek, hanem megkönnyítik az ismétlődő tervezési elemek frissítését is.

 

Lényegében minden alkalommal, amikor módosítja az eredeti szimbólumot, ezek a változtatások azonnal megjelennek a műalkotásban található szimbólum minden példányán. Nagyobb gombokra van szüksége a weboldalán? Csak változtassa meg a szimbólumot. Szeretné, hogy az űrlapmezők minden oldalon másképp nézzenek ki? Csak változtassa meg a szimbólumot. Érted az ötletet.

Tipp: Ha nem szeretné, hogy ez megtörténjen a mint szimbólum egy adott példányával, kattintson jobb gombbal az objektumra az illusztráción, és válassza a Szimbólumhivatkozás megszakítása lehetőséget. Ezzel kizárja az automatikus frissítésekből.

Íme egy jó videó, amely elmagyarázza a szimbólumok használatát és kezelését:

Szimbólumok használata az Adobe Illustratorban A Adobe TV .

Meglévő szimbólum használatához:

1. Nyissa meg a Szimbólumok panelt az Ablak menüből.
2. Húzza a kiválasztott szimbólumot a munkájára

Hozzon létre egy új szimbólumot:

1. Hozzon létre egy szimbólumképet
2. Nyissa meg a Szimbólumok panelt az Ablak menüből.
3. Húzzon egy illusztrációt a panelre
4. A megerősítéshez kattintson az OK gombra a párbeszédpanelen.

Szimbólum szerkesztése:

1. Nyissa meg a Szimbólumok panelt az Ablak menüből.
2. Kattintson duplán egy szimbólumra a szerkesztés módba lépéshez.
3. Ha végzett, kattintson duplán bárhová a szimbólum képén kívül a szerkesztési módból való kilépéshez.

7. Könnyen bővítheti az objektumokat a 9 szegmenses méretezéssel. Tippek az Illustratorral való munkához

Ez egy fejlett szimbolikus funkció, amely lehetővé teszi annak meghatározását, hogy az objektum mely részei nyúljanak meg a méretezés során, és melyek maradjanak változatlanok.

Balra: Példa egy kifeszített gombra 9 szegmenses zoom beállítással és anélkül. Jobbra: A 9 szegmenses méretezési beállítás 4 segédvonal mozgatását jelenti, amelyek megmondják az Illustratornak, hogy az objektum mely részei védettek, és mely részek méretezhetők.

 

Gyakorlati példa egy lekerekített sarkú gomb – ha hosszabbra akarja tenni, akkor nem nyújthatja csak vízszintesen, mert az eltorzítja az egész tárgyat. Ehelyett kézzel kell mozgatnia az alakpontokat. A 9 szegmenses skálázással a nyújtás a kívánt módon működik. Tippek az Illustratorral való munkához

Ahhoz, hogy valóban megértse, hogyan működik, hallgassa meg ezt a nagyszerű oktatóvideót az Adobe TV-től, hogy gyorsan felgyorsuljon:

9 szegmenses skálázás használata szimbólumokkal A Adobe TV .

8. Lekerekített sarkok mindenhol!

Lekerekített téglalapot hozhat létre a Photoshopban, de az Illustrator lehetővé teszi, hogy szinte bármilyen objektumra roncsolásmentes lekerekített sarokeffektust alkalmazzon. Mi a roncsolásmentes hatás? Ez azt jelenti, hogy be- és kikapcsolhatja, vagy módosíthatja a beállításait anélkül, hogy ez befolyásolná a mögöttes eredeti objektumot.

A lekerekített sarkok hatását szinte bármilyen típusú objektumra alkalmazhatja, és szükség szerint módosíthatja. Tippek az Illustratorral való munkához

A lekerekített sarok hatás alkalmazása:

1. Hozzon létre egy téglalapot vagy bármilyen más tárgyat éles sarkokkal
2. Az Effektusok menüben válassza a Stilizálás > Lekerekített sarkok menüpontot.
3. Adja meg a sarok sugarát, és kattintson az Előnézet gombra, hogy megtekinthesse, hogyan néz ki.
4. Kattintson az OK gombra az effektus alkalmazásához.

A lekerekített sarok hatás módosítása:

1. Válasszon ki egy lekerekített sarkú objektumot
2. Nyissa meg a Megjelenés panelt az Ablak menüből.
3. Keresse meg a Rounded Corners effektust, és kattintson rá duplán a beállítások módosításához, vagy kattintson a szem ikonra a be- vagy kikapcsolásához.

9. Gyors kitöltés készítése raszteres mintával. Tippek az Illustratorral való munkához

A finom háttérminták nagy sikert aratnak a webdizájnban, de sok tervező úgy gondolja, hogy ezeket nem könnyű alkalmazni az Illustratorban.

Be kell vallanom, nem intuitív, de a megoldás egyszerű.

Bittérképes minta létrehozása:

1. Helyezzen egy képet a mintáról a darabjára
2. Kattintson a "Beszúrás" gombra a felső szalagon (fontos - nélküle nem működik!)
3. Húzzon egy mintát a Színtár palettára
4. Alkalmazzon színmintát bármely objektumra, hogy kitöltse egy mintával

10. Szöveg automatikus elhelyezése képek és objektumok körül.

A Photoshop alapvető szövegszerkesztési képességeiről ismert. Ha egy kép köré szöveget szeretne körbefűzni, két vagy három különböző szövegkeretet kell létrehoznia, és szimulálnia kell a hatást. Tippek az Illustratorral való munkához

Szerencsére az Illustrator gondoskodik önről.

Szöveg körbefűzése egy kép körül:

1. Jelölje ki azt a képet vagy objektumot, amelyre a szöveget körbe szeretné vonni
2. Nyissa meg az Objektum menüt, válassza a Szöveg tördelése > Új parancsot.
3. A tördelési távolság beállításához nyissa meg újra a Szöveg tördelése menüt, és válassza a Szövegtördelési beállítások lehetőséget.
4. Mozgassa a képet a szöveg fölé a burkoló hatás megtekintéséhez

11. Hozzon létre gazdag vizuális effektusokat az objektumok megjelenési beállításaival. Tippek az Illustratorral való munkához

Az Illustratorban az objektumok Megjelenése panelje ugyanúgy működik, mint a Photoshop rétegeffektusai – több kitöltést és körvonalat is hozzáadhat egy objektumhoz, majd eljátszhatja az átviteli módokat, az átlátszatlanságot és az effektusokat, hogy érdekes eredményeket érjen el.

Ez a szöveg csak egyetlen vektorobjektum, a Megjelenés és effektusok panelen van stílusozva.

A játszótér meglehetősen nagy – a vetett árnyékoktól, az elmosódástól és a ragyogástól a textúrákig, a torzításokig és a 3D-ig. Így a legtöbb effektust újra létrehozhatja a Photoshopból, miközben továbbra is vektorgrafikával dolgozik.

A Megjelenés panel erőteljes és szórakoztató – javaslom, hogy azonnal próbálja ki, vagy nézze meg az alábbi oktatóanyagot, hogy megértse, hogyan működik:

A megjelenés panel elsajátítása A Adobe TV .

Készen állsz az Illustratorral való kísérletezésre?

A Photoshop segítségével weboldalak és felhasználói felületek készítése mára megszokottá vált, és a legtöbb tervező elégedett ezzel a megoldással. Tippek az Illustratorral való munkához

De attól, hogy a Photoshop ilyen széles körben elterjedt, még nem jelenti azt, hogy az Illustratornak nincs mit kínálnia – éppen ellenkezőleg. Az olyan eszközökkel, mint a pixelrács-igazítás, a szöveg tördelése és az objektummegjelenítés, ez határozottan használható.

Erőssel kombinálva elrendezési eszközök és vektorgrafika, képszeletelés és exportálás, az Illustrator minden bizonnyal kézenfekvő választás azoknak a webdesignereknek, akik gyorsan szeretnének weboldalakat fejleszteni.