Tipps fir mat Illustrator ze schaffen. Fir Webdesigner déi Photoshop léiwer maachen

Tipps fir mat Illustrator ze schaffen. Hei ass eng verréckt Iddi - designt Ären nächste Webprojet am Illustrator. Wann Dir e primäre Webdesigner sidd, sinn d'Chancen datt Dir net ganz gutt op dëse Virschlag reagéiert. Illustrator kann einfach net alles maachen wat Photoshop maache kann, richteg?

Net sécher op déi Manéier.

Obschonns Photoshop ass de facto Tool ginn Webdesign, Illustrator ass méi wéi fäeg fir Är Bedierfnesser ze treffen. Dank senge Layout-Tools ass et dacks e besseren a méi gëeegent Programm fir Webdesign.

Well déi meescht Webdesign Professionnelen net wëlle ronderëm Illustrator wanderen op der Sich no Beweiser, hunn ech eng Lëscht mat Web-relatéierten Features zesummegesat, déi Dir wësse musst fir mam Webdesign an Illustrator ze experimentéieren.

Probéiert e puer vun dësen an ech garantéieren datt Dir ufänkt Illustrator als Standardinstrument an Ärem Webdesign Workflow ze benotzen.

1. Éischt Saachen éischt: Set all Unitéiten op Pixel. Tipps fir mat Illustrator ze schaffen

Par défaut benotzt Illustrator Metrik Unitéiten fir Objekt- a Punktgréissten fir Text. Dëst sinn super Astellunge fir déi meescht Designsituatiounen, awer fir webdesign Dir wëllt wahrscheinlech Pixel iwwerall gesinn. Also ier Dir un soss eppes ufänkt ze schaffen, gitt sécher datt Är Eenheeten richteg ageriicht sinn.

Fir d'Eenheeten op Pixel ze setzen:

1. Open am Edit Menu
2. Wielt Moosseenheeten aus dem Astellungs-Submenu.
3. Setzt all Optiounen op "Pixel"

2. Schafen Dokumenter engem Web Dokument Profil benotzt.

 

Wann Dir un engem neien Design unzefänken wëllt, scrollt einfach duerch d'Neit Dokumentfenster a spréngt e puer wichteg Detailer - wéi zum Illustrator ze soen datt Dir plangt un engem Webdesign ze schaffen fir datt Dir keng CMYK Faarwen benotzt. a verschwonnene Kante vum Objet. Erënnert just un d'Internetprofilestellung an der Neit Dokumentfenster ze wielen an Dir wäert gutt sinn.

3. Aktivéiert Pixel Gitter Ausrichtung fir Objeten. Tipps fir mat Illustrator ze schaffen

Dës Fonktioun ass e Liewensspuerer wann Dir jeemools Probleemer mat verschwonne Formkanten am Photoshop hat.

Pixel Grid Alignment passt déi riicht horizontal a vertikal Segmenter vun engem Objet un fir perfekt an de Pixel Gitter ze passen, wärend kromme a schräg Segmenter glat behalen. D'Resultat ass knusprech, pixel-perfekt Formen - eppes wat Dir definitiv am Webdesign wëllt.

Den Top Button huet Pixel Raster Ausrichtung aktivéiert, wat ëmmer zu knusprech Kanten resultéiert.

Fir Objekt-Niveau Pixel Gitter Ausrichtung z'aktivéieren:

1. Wielt Objet
2. Öffnen d'Transform Panel (Fënster> Transforméieren).
3. Kuckt d'Këscht "Align to Pixel Grid" um Enn vum Panel (wann Dir et net gesitt, duebelklickt op de Panel fir d'Optiounen ze weisen)

Note. Pixel Gitter Ausrichtung ass als Standard aktivéiert fir all nei Objekter, déi mam Webdokumentprofil erstallt ginn. Wéi och ëmmer, wann Dir Objete vun aneren Illustrator-Dateien pecht, musst Dir d'Pixelausrichtung fir si manuell upassen. Tipps fir mat Illustrator ze schaffen

4. Schalt Pixel Virschau un.

D'Pixel-Preview Feature wäert den Illustrator sou behuelen wéi Photoshop wann Dir Äert Bild iwwer 100% skaléiert - anstatt perfekt Vektoren all Kéier ze kréien, gesitt Dir tatsächlech d'Pixel wéi wann Dir mat engem Rasterbild schafft.

D'Pixel Virschau auszeschalten wäert Iech fillen wéi wann Dir am Photoshop sidd.

Denkt drun wéi cool et ass - Dir hutt all d'Kraaft vu Vektorgrafiken op Äre Fanger, an Dir kënnt gesinn wéi d'Resultat um Pixelniveau ausgesäit.

Schéin, ass et net?

Aktivéiert oder deaktivéiert Pixel Virschau

1. Open View Menü
2. Wielt Pixel View.

5. Benotzt Artwork Fënsteren. Tipps fir mat Illustrator ze schaffen

Stellt Iech vir datt zwou Videokameraen op Äre Projet geriicht sinn.

Eng Kamera huet en normale Zoomniveau, weist 100% vun Ärer Aarbecht. Déi aner Kamera huet e 400% Zoomniveau a riicht op eng spezifesch Ikon op déi Dir geschafft hutt.

Wéi e Chirurg benotzt Dir d'Zoomkamera fir kleng Pixel-Niveau Ännerungen un der Ikon ze maachen, heiansdo kuckt op d'100% Zoom Kamera fir ze kucken wéi et tatsächlech ausgesäit a senger aktueller Gréisst.

Deckfenster si super wann Dir mat klengen Elementer wéi Ikonen schaffe musst - Dir musst net konstant zoomen an auszoomen fir ze kontrolléieren wéi alles ausgesäit.

Dëst sinn Artwork Fënsteren - si erlaben Iech Ären Design gläichzäiteg mat verschiddene Zoomniveauen, Faarfastellungen an aner Variatiounen ze gesinn. Dëst ass ganz nëtzlech fir Webdesign, besonnesch wann Dir mat Pixel-Niveau Detailer schafft.

Fir Artwork Fënsteren ze benotzen:

1. Öffnen de Fënstermenü, wielt dann Neit Fënster. Illustrator erstellt en neien Tab mat deemselwechten Dokument an der Sicht.
2. Gitt erëm an de Fënstermenü, wielt Arrangéieren > Alles op d'Fënster réckelen. Dëst erlaabt Iech ze änneren Gréisst a Plaz vun Fënsteren niefteneen wéi Dir passt.
3. Experimentéiert mat verschiddene Zoomniveauen a Fënsteren a fänkt un e puer Ännerungen ze maachen fir ze kucken wéi et funktionnéiert. Tipps fir mat Illustrator ze schaffen

6. Benotzen Symboler séier Knäppercher schafen, Symboler, a méi.

Wéi oft hutt Dir déi selwecht (oder bal déiselwecht) Knäppchen, Ikon oder Widget am Photoshop erstallt? Wann Dir am Webdesign sidd, maacht Dir et wahrscheinlech all Dag.

Illustrator kann Iech hëllefen Zäit ze spueren an dës repetitiv Aarbecht mat Symboler ze vermeiden.

Am Wesentlechen sinn d'Symboler en endlos Set vu prett-feieren Design Elementer, déi an d'Aarbecht bäigefüügt kënne ginn andeems Dir einfach zéien an erofsetzen, an dann wéi néideg geännert ginn. Dëst ass ideal fir Knäppercher, Ikonen an aner Standardobjekter déi net vun Null erstallt musse ginn.

Mä et gëtt en anere Grond firwat Symboler mächteg sinn, an et heescht instantiation.

Symboler sinn net nëmme praktesch, mä si maachen et och einfach eng update widderhuelen Design Elementer.

 

Wesentlech, wann Dir Ännerunge fir dat ursprénglecht Symbol maacht, ginn dës Ännerungen direkt an all Instanzen vum Symbol an Ärem Konschtwierk reflektéiert. Braucht Dir méi grouss Knäppercher op Ärer Websäit? änneren Just d'Symbol. Wëllt Dir datt Är Formfelder op all Säit anescht ausgesinn? änneren Just d'Symbol. Dir kritt d'Iddi.

Tipp: Wann Dir net wëllt datt dëst mat enger spezifescher Instanz vum als Symbol geschitt ass, klickt op d'Objet an Ärer Illustratioun a wielt Break Symbol Reference. Dëst wäert et aus automateschen Updates ausschléissen.

Hei ass e gudde Video deen erkläert wéi Symboler benotzt a manipuléiert ginn:

Benotzt Symboler am Adobe Illustrator aus Adobe TV .

Fir en existent Symbol ze benotzen:

1. Öffnen d'Symboler Panel aus dem Fënstermenü.
2. Zréck de gewielte Symbol op Är Aarbecht

Erstellt en neit Symbol:

1. Schafen engem Symbol Bild
2. Öffnen d'Symboler Panel aus dem Fënstermenü.
3. Drag eng Illustratioun op de Panel
4. Klickt OK an der Dialogbox fir ze bestätegen.

Fir e Symbol z'änneren:

1. Öffnen d'Symboler Panel aus dem Fënstermenü.
2. Duebelklick op e Symbol fir den Editmodus anzeginn.
3. Wann Dir fäerdeg sidd, duebelklickt iergendwou ausserhalb vum Symbolbild fir de Redaktiounsmodus ze verloossen.

7. Einfach erweidert Objete mat 9-Segment Skala. Tipps fir mat Illustrator ze schaffen

Dëst ass eng fortgeschratt Symbologie Feature déi Iech erlaabt ze definéieren wéi eng Deeler vun engem Objet während der Skaléierung gestreckt ginn an déi onverännert bleiwen.

Lénks: E Beispill vun engem ausgedehnte Knäppchen mat an ouni 9-Segment Zoom-Astellung. Richteg: D'9-Segment-Skaléierungsastellung beinhalt d'Bewegung vu 4 Guiden déi dem Illustrator soen wéi eng Deeler vum Objet geschützt sinn a wéi eng Deeler kënne skaléiert ginn.

 

E praktescht Beispill ass e Knäppche mat ofgerënnten Ecker - wann Dir et méi laang wëllt maachen, kënnt Dir en net nëmmen horizontal strecken, well dat de ganzen Objet verzerrt. Amplaz musst Dir d'Formpunkte manuell réckelen. Mat 9-Segment-Skaléierung funktionnéiert d'Stretch wéi Dir geduecht hutt. Tipps fir mat Illustrator ze schaffen

Fir wierklech ze verstoen wéi et funktionnéiert, lauschtert dëse super Video Tutorial vun Adobe TV fir séier op d'Geschwindegkeet ze kommen:

Benotzt 9-Segment Skala mat Symboler aus Adobe TV .

8. Ofgerënnt Ecker iwwerall!

Dir kënnt e ofgerënnt Rechteck am Photoshop erstellen, awer Illustrator erlaabt Iech en net-zerstéierende gerundéierten Eckeffekt op bal all Objet z'applizéieren. Wat ass net-zerstéierend Effekt? Dëst bedeit datt Dir et ausschalten, auszeschalten oder seng Astellungen änneren kann ouni den ënnerierdesche ursprénglechen Objet ze beaflossen.

Dir kënnt de gerundéierten Ecker Effekt op bal all Typ vun Objet uwenden an et ajustéieren wéi néideg. Tipps fir mat Illustrator ze schaffen

Fir de gerundeten Eckeffekt z'applizéieren:

1. Erstellt e Rechteck oder all aner Objet mat scharfen Ecker
2. Vum Effektmenü, wielt Stylize > Rounded Corners.
3. Gitt en Eckradius a klickt Preview fir ze kucken wéi et ausgesäit.
4. Klickt OK fir den Effekt z'applizéieren.

Fir de gerundéierten Eckeffekt z'änneren:

1. Wielt en Objet mat ofgerënnten Ecker
2. Öffnen d'Erscheinungspanel aus dem Fënstermenü.
3. Fannt de Rounded Corners Effekt an duebelklickt op fir seng Astellungen z'änneren, oder klickt op d'Aen Ikon fir se un oder auszeschalten.

9. Schafen eng séier Fëllung mat engem Raster Muster. Tipps fir mat Illustrator ze schaffen

Subtil Hannergrondmuster sinn e groussen Hit am Webdesign, awer vill Designer mengen datt se net einfach sinn am Illustrator z'applizéieren.

Ech muss zouginn, et ass net intuitiv, awer d'Léisung ass einfach.

Fir e Bitmap Muster ze kreéieren:

1. Setzt e Bild vum Muster op Ärem Stéck
2. Klickt op "Insert" op der ieweschter Band (wichteg - et funktionnéiert net ouni!)
3. Drag e Muster op d'Swatches Palette
4. Fëllt e Swatch op all Objet fir et mat engem Muster ze fëllen

10. Automatesch Placement vun Text ronderëm Biller an Objeten.

Photoshop ass bekannt fir seng ganz Basis Textbeaarbechtungsfäegkeeten. Wann Dir Text ëm e Bild wéckele wëllt, musst Dir zwee oder dräi verschidden Textframes erstellen an den Effekt simuléieren. Tipps fir mat Illustrator ze schaffen

Glécklech, Illustrator huet Iech ofgedeckt.

Fir Text ronderëm e Bild ze wéckelen:

1. Wielt d'Bild oder den Objet deen Dir wëllt den Text ronderëm wéckelen
2. Öffnen den Objektmenü, wielt Wrap Text > New.
3. Fir d'Wrap Distanz ze setzen, öffnen den Text Wrap Menu erëm a wielt Text Wrap Options.
4. Beweegt d'Bild iwwer den Text fir de Wrapeffekt ze gesinn

11. Schafen räich visuell Effekter mat Objet Optrëtt Astellunge. Tipps fir mat Illustrator ze schaffen

Am Illustrator funktionnéiert d'Erscheinungspanel vun engem Objet ähnlech wéi Schichteffekter am Photoshop - Dir kënnt verschidde Fëllungen a Strécke fir en Objet addéieren, da spillt mat hiren Transfermodi, Opazitéit an Effekter fir interessant Resultater ze kréien.

Dësen Text ass just en eenzege Vektorobjekt, stylesch mat der Ausgesinn an Effekter Panel.

D'Spillplaz ass zimmlech grouss - vu Schatten, Blur a Glanz bis Texturéierung, Verzerrung an 3D. Op dës Manéier kënnt Dir déi meescht vun den Effekter aus Photoshop nei kreéieren wärend Dir nach ëmmer mat Vektorgrafiken schafft.

D'Appearance Panel ass mächteg a lëschteg - ech encouragéieren Iech et direkt auszeprobéieren oder den Tutorial hei ënnen ze kucken fir ze verstoen wéi et funktionnéiert:

Meeschter um Erscheinungspanel aus Adobe TV .

Sidd Dir prett mat Illustrator ze experimentéieren?

Websäiten a User-Interfaces mat Photoshop erstellen ass elo d'Norm ginn an déi meescht Designer si frou mat dëser Léisung. Tipps fir mat Illustrator ze schaffen

Awer just well Photoshop sou verbreet ass, heescht net datt Illustrator näischt ze bidden huet - am Géigendeel. Mat Tools wéi Pixel Gitter Ausrichtung, Textverpackung, an Objekterscheinung mécht et e staarke Fall.

Kombinéiert mat mächteg Layout Tools a Vektorgrafiken, Bildschnëtt an Export, Illustrator ass definitiv eng offensichtlech Wiel fir Webdesigner déi séier Websäite wëllen entwéckelen.