Cunsiglii per travaglià cù Illustrator. Eccu una idea pazza - cuncepisce u vostru prossimu prughjettu web in Illustrator. Sè vo site un web designer primariu, hè probabile chì ùn risponde micca bè à stu suggerimentu. Illustrator ùn pò micca fà tuttu ciò chì Photoshop pò fà, nò?

Micca certamente in questu modu.

Ancu sì Photoshop hè diventatu u strumentu de facto web design, Illustrator hè più cà capaci di risponde à i vostri bisogni. Grazie à i so strumenti di layout, hè spessu un prugramma megliu è più adattatu per u web design.

Siccomu a maiò parte di i prufessiunali di u web design ùn volenu micca vaghjime in Illustrator in cerca di evidenza, aghju compilatu una lista di funzioni web chì avete bisognu di sapè per cumincià à sperimentà u web design in Illustrator.

Pruvate uni pochi di questi è vi guarantisci chì cumincià à aduprà Illustrator cum'è strumentu standard in u vostru flussu di travagliu di cuncepimentu web.

1. Prima cosa prima: stabilisce tutte e unità à Pixel. Cunsiglii per travaglià cù Illustrator

Per automaticamente, Illustrator usa metrica unità per dimensioni d'ughjettu è punti per u testu. Quessi sò grandi paràmetri per a maiò parte di situazioni di disignu, ma per cuncepimentu web Probabilmente vulete vede pixel in ogni locu. Allora prima di principià à travaglià nantu à qualcosa altru, assicuratevi chì e vostre unità sò stallate currettamente.

unità di valore sò Pixels. Cunsiglii per travaglià cù Illustrator

Per stabilisce l'unità in pixel:

  1. Aprite in u menù Edit
  2. Selezziunate l'unità di misura da u sottumenu di paràmetri.
  3. Pone tutte l'opzioni à "pixels"

2. Crea documenti cù un prufilu di documentu web.

 

Quandu vulete principià à travaglià nantu à un novu disignu, scorri facilmente per a finestra di u Novu Documentu è saltate alcuni dettagli impurtanti, cum'è dicendu à Illustrator chì pensa à travaglià in un web design per ùn aduprà culori CMYK. e bordi sfocati di l'ughjettu. Ricurdatevi solu di selezziunà u paràmetru di u prufilu Internet in a finestra di New Document è sarete bè.

3. Habilita l'allineamentu di a griglia di pixel per l'uggetti. Cunsiglii per travaglià cù Illustrator

Questa funzione hè un salvatore di vita se avete mai avutu prublemi cù i bordi di forma sfocata in Photoshop.

L'Allineamentu di a Griglia di Pixel aghjustà i segmenti orizzontali è verticali dritti di un ughjettu per adattà perfettamente a griglia di pixel, mantenendu i segmenti curvi è inclinati lisci. U risultatu hè formi croccanti, pixel perfetti, qualcosa chì vulete definitivamente in u web design.

Cunsiglii per travaglià cù Illustrator

U buttone superiore hà attivatu l'allineamentu di a griglia di pixel, chì sempre risulta in bordi croccanti.

Per attivà l'allineamentu di griglia di pixel à livellu di l'ughjettu:

  1. Selezziunà l'ughjettu
  2. Aprite u pannellu Transform (Finestra> Transform).
  3. Verificate a casella di spunta "Align to Pixel Grid" in u fondu di u pannellu (se ùn u vede micca, fate un doppiu clic nantu à u pannellu per vede l'opzioni)

Nota. L'allineamentu di a griglia di pixel hè attivatu per difettu per tutti l'uggetti novi creati cù u prufilu di documentu web. Tuttavia, se incollate l'uggetti da altri fugliali Illustrator, avete bisognu di aghjustà manualmente l'allineamentu di pixel per elli. Cunsiglii per travaglià cù Illustrator

4. Turn on pixel preview.

A funzione Pixel-Preview farà chì Illustrator si cumporti cum'è Photoshop quandu scala a vostra maghjina sopra u 100% - invece di ottene vettori perfetti ogni volta, vi vede veramente i pixel cum'è s'ellu travagliassi cù una maghjina raster.

Attivazione di l'anteprima di pixel vi farà sentu cum'è sì in Photoshop.

Pensate à quantu hè cool - avete tuttu u putere di gràfiche vettoriali à u vostru ditte, è pudete vede ciò chì u risultatu pare à u nivellu di pixel.

Neat, ùn hè micca?

Attivà o disattivà l'anteprima di pixel

  1. Apri menu di vista
  2. Selezziunà Pixel View.

5. Aduprà Windows Artwork. Cunsiglii per travaglià cù Illustrator

Imagine chì duie videocamere sò puntate à u vostru prughjettu.

Una camera hà un livellu di zoom normale, chì mostra u 100% di u vostru travagliu. L'altra camera hà un livellu di zoom di 400% è hè diretta à una icona specifica chì avete travagliatu.

Cum'è un chirurgu, aduprate a camera di zoom per fà minuscule cambiamenti à u nivellu di pixel à l'icona, guardendu in ocasioni à a camera di zoom 100% per vede ciò chì veramente pare à a so dimensione attuale.

Cunsiglii per travaglià cù Illustrator 12

I finestri di copertina sò fantastichi quandu avete bisognu di travaglià cù elementi chjuchi cum'è l'icone - ùn avete micca bisognu di zoom in constantemente per verificà cumu si vede tuttu.

Quessi sò Windows Artwork - vi permettenu di vede u vostru disignu simultaneamente cù diversi livelli di zoom, paràmetri di culore è altre variazioni. Questu hè assai utile per u web design, soprattuttu quandu travagliate cù dettagli à livellu di pixel.

Per aduprà Windows Artwork:

  1. Aprite u menu Finestra, dopu selezziunate New Window. Illustrator creà una nova tabulazione cù u listessu documentu in vista.
  2. Andate à u menù Finestra di novu, sceglite Arrange> Move All to Window. Questu permetterà di cambià dimensione è piazzamentu di i finestri unu à fiancu à l'altru cum'è vo vede bè.
  3. Pruvate cù diversi livelli di zoom in Windows è cuminciate à fà alcuni cambiamenti per vede cumu funziona. Cunsiglii per travaglià cù Illustrator

6. Aduprà simbuli per creà rapidamente buttoni, icone è più.

Quante volte avete creatu u listessu (o quasi u listessu) buttone, icona o widget in Photoshop? Sè vo site in u web design, probabilmente fate ogni ghjornu.

Illustrator pò aiutà à risparmià tempu è evità stu travagliu ripetitivu cù simboli.

In essenza, i simboli sò un inseme infinitu di ready-made elementi di disignu, chì pò esse aghjuntu à u travagliu solu trascinendu è dropping, è dopu mudificatu quantu necessariu. Questu hè ideale per i buttoni, icone è altri oggetti standard chì ùn anu micca bisognu di creà da zero.

Ma ci hè un altru mutivu perchè i simboli sò putenti, è hè chjamatu instantiation.

I simboli ùn sò micca solu convenienti, ma facenu ancu fàciule per aghjurnà elementi di design ripetitivi.

I simboli ùn sò micca solu convenienti, ma facenu ancu fàciule per aghjurnà elementi di design ripetitivi.

 

Essenzialmente, ogni volta chì fate cambiamenti à u simbulu originale, questi cambiamenti sò immediatamente riflessi in tutti i casi di u simbulu truvatu in a vostra opera d'arte. Avete bisognu di buttoni più grande in u vostru situ web? Basta à cambià u simbulu. Vulete chì i vostri campi di furmulariu parenu diffirenti in ogni pagina? Basta à cambià u simbulu. Avete l'idea.

Cunsigliu: Se ùn vulete micca chì questu succede à una istanza specifica di u simbulu cum'è, fate un clic right in l'ughjettu in a vostra illustrazione è selezziunate Break Symbol Reference. Questu l'escluderà da l'aghjurnamenti automatichi.

Eccu un bonu video chì spiega cumu utilizà è manipulà i simboli:

Utilizà i simboli in Adobe Illustrator из Adobe TV .

Per utilizà un simbulu esistente:

  1. Aprite u pannellu Simbuli da u menù Finestra.
  2. Trascinate u simbulu sceltu nantu à u vostru travagliu

Crea un novu simbulu:

  1. Crea una figura di simbulu
  2. Aprite u pannellu Simbuli da u menù Finestra.
  3. Trascinate una illustrazione nantu à u pannellu
  4. Cliccate OK in a finestra di dialogu per cunfirmà.

Per edità un simbulu:

  1. Aprite u pannellu Simbuli da u menù Finestra.
  2. Cliccate doppiu un simbulu per entre in u modu di edizione.
  3. Quandu hè finitu, fate un doppiu clic in ogni locu fora di l'imaghjini di u simbulu per esce da u modu di edizione.

7. Sviluppà facilmente l'uggetti cù a scala di 9 segmenti. Cunsiglii per travaglià cù Illustrator

Questa hè una funzione di simbulugia avanzata chì permette di definisce quali parti di un ughjettu sò allungati durante a scala è chì restanu invariati.

Left: Un esempiu di un buttone allungatu cù è senza u paràmetru di zoom di 9 segmenti. Destra: L'impostazione di scala di 9 segmenti implica u muvimentu di 4 guide chì dicenu à Illustrator quali parti di l'ughjettu sò prutetti è quali parti ponu esse scalati.

 

Un esempiu praticu hè un buttone cù anguli arrotondati - se vulete fà più longu, ùn pudete micca allungà in l'orizzontale perchè chì distorterà l'ughjettu sanu. Invece, avete da spustà manualmente i punti di forma. Cù a scala di 9 segmenti, u stretchu funziona cum'è vo vulete. Cunsiglii per travaglià cù Illustrator

Per capisce veramente cumu funziona, ascolta stu fantasticu tutoriale video da Adobe TV per aghjurnà rapidamente:

Utilizà a scala di 9 segmenti cù simboli из Adobe TV .

8. Anguli arrotondati in ogni locu !

Pudete creà un rettangulu arrotondatu in Photoshop, ma Illustrator vi permette di applicà un effettu di angulu arrotondatu non distruttivu à quasi ogni ughjettu. Chì ghjè l'effettu non distruttivu? Questu significa chì pudete accende, spegne o cambià i so paràmetri senza affettà l'ughjettu originale sottu.

Cunsiglii per travaglià cù Illustrator 23

Pudete applicà l'effettu di i cantoni arrotondati à quasi ogni tipu d'ughjettu è aghjustate cum'è necessariu. Cunsiglii per travaglià cù Illustrator

Per applicà l'effettu di u cantonu arrotondatu:

  1. Crea un rectangulu o qualsiasi altru ughjettu cù anguli sharp
  2. Da u menu Effetti, sceglite Stylize> Angoli arrotondati.
  3. Inserite un raghju di u cantonu è cliccate Preview per vede ciò chì pare.
  4. Cliccate OK per applicà l'effettu.

Per cambià l'effettu di l'angulu arrotondatu:

  1. Selezziunate un oggettu cù anguli arrotondati
  2. Aprite u pannellu Apparenza da u menù Finestra.
  3. Truvate l'effettu Rounded Corners è fate un doppiu clicu per cambià i so paràmetri, o cliccate l'icona di l'ochju per accende o disattivà.

9. Crià un riempimentu rapidu cù un mudellu raster. Cunsiglii per travaglià cù Illustrator

I mudelli di fondo sottili sò un grande successu in u web design, ma parechji diseggiani pensanu chì ùn sò micca faciuli d'applicà in Illustrator.

Devu ammette, ùn hè micca intuitive, ma a suluzione hè simplice.

Crià un riempimentu rapidu cù un mudellu di bitmap

Per creà un mudellu di bitmap:

  1. Pone una stampa di u mudellu nantu à u vostru pezzu
  2. Cliccate "Inserisci" nantu à a cinta superiore (impurtante - ùn funziona micca senza ellu!)
  3. Trascinate un mudellu à a paleta Swatches
  4. Applicà un swatch à qualsiasi ughjettu per riempillu cù un mudellu

10. Piazzamentu automaticu di testu intornu à l'imagine è l'uggetti.

Photoshop hè cunnisciutu per e so capacità di edizione di testu assai basi. Se vulete chjappà u testu intornu à una maghjina, avete bisognu di creà dui o trè frames di testu diffirenti è simulà l'effettu. Cunsiglii per travaglià cù Illustrator

Per furtuna, Illustrator hà cupertu.

Per imbulighjà u testu intornu à una maghjina:

  1. Selezziunate l'imaghjini o l'ughjettu chì vulete chjappà u testu intornu
  2. Aprite u menù di l'Oggettu, sceglite Wrap Text> New.
  3. Per stabilisce a distanza di avvolgimentu, apre u menù Wrap di testu è selezziunate Opzioni di Wrap di testu.
  4. Move l'imaghjini nantu à u testu per vede l'effettu di imballaggio

11. Crea effetti visuali ricchi cù paràmetri di l'apparenza di l'ughjettu. Cunsiglii per travaglià cù Illustrator

In Illustrator, u pannellu di l'Apparizione di l'ughjettu funziona assai cum'è l'effetti di strati in Photoshop - pudete aghjunghje parechje riempie è tracce à un ughjettu, poi ghjucà cù i so modi di trasferimentu, l'opacità è l'effetti per ottene risultati interessanti.

Stu testu hè solu un ughjettu vettore unicu, stilatu cù u pannellu di l'Apparizione è Effetti.

U campu di ghjocu hè abbastanza grande - da ombre, sfocatura è luminosità à texturing, distorsione è 3D. In questu modu, pudete ricreà a maiò parte di l'effetti da Photoshop mentre travaglia ancu cù gràfiche vettoriali.

U pannellu di l'Apparizione hè putente è divertente - vi incuraghjemu à pruvà subitu o fighjate u tutoriale sottu per capisce cumu funziona:

Maestria di u Panel di l'Apparizione из Adobe TV .

Sò pronti per cumincià à sperimentà cù Illustrator?

A creazione di siti web è interfacce d'utilizatori cù Photoshop hè diventata a norma è a maiò parte di i diseggiani sò felici di sta suluzione. Cunsiglii per travaglià cù Illustrator

Ma solu perchè Photoshop hè diventatu cusì diffusatu ùn significa micca chì Illustrator ùn hà nunda da offre, à u cuntrariu. Cù arnesi cum'è l'allineamentu di a griglia di pixel, l'imballaggio di testu è l'apparenza di l'ughjettu, face un casu forte.

Cumminatu cù putenti strumenti di layout è grafica vettoriale, slicing d'imagine è esportazione, Illustrator hè sicuramente una scelta ovvia per i web designers chì volenu sviluppà rapidamente siti web.