Consells per treballar amb Illustrator. Per a dissenyadors web que prefereixen Photoshop

Consells per treballar amb Illustrator. Aquí teniu una idea boja: dissenyeu el vostre proper projecte web a Illustrator. Si sou un dissenyador web principal, és probable que no respongueu gaire bé a aquest suggeriment. Illustrator no pot fer tot el que Photoshop pot fer, oi?

Segurament no d'aquesta manera.

Encara Photoshop s'ha convertit en l'eina de facto disseny web, Illustrator és més que capaç de satisfer les vostres necessitats. Gràcies a les seves eines de maquetació, sovint és un programa millor i més adequat per al disseny web.

Com que la majoria dels professionals del disseny web no volen passejar per Illustrator a la recerca de proves, he compilat una llista de funcions relacionades amb la web que cal conèixer per començar a experimentar amb el disseny web a Illustrator.

Proveu-ne alguns i us garanteixo que començareu a utilitzar Illustrator com a eina estàndard en el vostre flux de treball de disseny web.

1. Primer de tot: configureu totes les unitats en Píxels. Consells per treballar amb Illustrator

Per defecte, Illustrator utilitza mètriques unitats per a mides d'objectes i punts per al text. Aquests són paràmetres fantàstics per a la majoria de situacions de disseny, però per disseny web probablement voldreu veure píxels a tot arreu. Per tant, abans de començar a treballar en qualsevol altra cosa, assegureu-vos que les vostres unitats estiguin configurades correctament.

Per configurar les unitats en píxels:

1. Obre al menú Edita
2. Seleccioneu les unitats de mesura al submenú de configuració.
3. Estableix totes les opcions a "píxels"

2. Creeu documents mitjançant un perfil de document web.

 

Quan vulgueu començar a treballar en un disseny nou, desplaceu-vos fàcilment per la finestra Nou document i ometeu alguns detalls importants, com ara dir-li a Illustrator que teniu previst treballar en un disseny web perquè no utilitzeu colors CMYK. i vores borroses de l'objecte. Només recordeu que heu de seleccionar la configuració del perfil d'Internet a la finestra Nou document i anirà bé.

3. Activa l'alineació de la quadrícula de píxels per als objectes. Consells per treballar amb Illustrator

Aquesta funció és un estalvi de vida si mai heu tingut problemes amb les vores de les formes borroses a Photoshop.

L'alineació de la quadrícula de píxels ajustarà els segments rectes horitzontals i verticals d'un objecte per adaptar-se perfectament a la quadrícula de píxels, alhora que manté els segments corbats i inclinats suaus. El resultat són formes nítides i perfectes amb píxels, una cosa que definitivament voleu en disseny web.

El botó superior té activada l'alineació de la quadrícula de píxels, que sempre dóna lloc a vores nítides.

Per activar l'alineació de la quadrícula de píxels a nivell d'objecte:

1. Seleccioneu l'objecte
2. Obriu el tauler Transformació (Finestra > Transformació).
3. Marqueu la casella de selecció "Alinea a la quadrícula de píxels" a la part inferior del tauler (si no la veieu, feu doble clic al tauler per mostrar les opcions)

Nota. L'alineació de la quadrícula de píxels està activada de manera predeterminada per a tots els objectes nous creats amb el perfil del document web. Tanmateix, si enganxeu objectes d'altres fitxers d'Illustrator, haureu d'ajustar-los manualment l'alineació de píxels. Consells per treballar amb Illustrator

4. Activa la previsualització de píxels.

La funció de vista prèvia de píxels farà que Illustrator es comporti igual que Photoshop quan escala la imatge per sobre del 100%; en lloc d'aconseguir vectors perfectes cada vegada, veureu realment els píxels com si estiguéssiu treballant amb una imatge ràster.

Activar la vista prèvia de píxels et farà sentir com si estiguessis a Photoshop.

Penseu en el fantàstic que és: teniu tot el poder dels gràfics vectorials al vostre abast i podeu veure com és el resultat a nivell de píxels.

Endreçat, no?

Activa o desactiva la previsualització de píxels

1. Obre el menú de visualització
2. Seleccioneu Pixel View.

5. Utilitzeu finestres d'il·lustració. Consells per treballar amb Illustrator

Imagineu que dues càmeres de vídeo apunten al vostre projecte.

Una càmera té un nivell de zoom normal, que mostra el 100% del vostre treball. L'altra càmera té un nivell de zoom del 400% i està dirigida a una icona específica en la qual estàveu treballant.

Com un cirurgià, utilitzeu la càmera de zoom per fer petits canvis a nivell de píxels a la icona, de tant en tant mirant la càmera de zoom 100% per veure com es veu realment a la seva mida real.

Les finestres de coberta són excel·lents quan necessiteu treballar amb elements petits com ara icones; no cal que us apropeu i allunyeu constantment per comprovar com es veu tot.

Aquestes són finestres d'art: us permeten veure el vostre disseny simultàniament amb diferents nivells de zoom, paràmetres de color i altres variacions. Això és molt útil per al disseny web, sobretot quan treballeu amb detalls a nivell de píxels.

Per utilitzar les finestres d'Artwork:

1. Obriu el menú Finestra i, a continuació, seleccioneu Finestra nova. Illustrator crearà una pestanya nova amb el mateix document a la vista.
2. Torneu al menú Finestra, seleccioneu Organitza > Mou-ho tot a la finestra. Això us permetrà canviar mida i col·locació de les finestres al costat de l'altre com creguis convenient.
3. Experimenteu amb diferents nivells de zoom a les finestres i comenceu a fer alguns canvis per veure com funciona. Consells per treballar amb Illustrator

6. Utilitzeu símbols per crear ràpidament botons, icones i molt més.

Quantes vegades has creat el mateix (o gairebé el mateix) botó, icona o giny a Photoshop? Si us agrada el disseny web, probablement ho feu cada dia.

Illustrator us pot ajudar a estalviar temps i evitar aquest treball repetitiu amb símbols.

En essència, els símbols són un conjunt infinit de productes ja fets elements de disseny, que es pot afegir a l'obra simplement arrossegant i deixant anar, i després modificar-lo segons sigui necessari. Això és ideal per a botons, icones i altres objectes estàndard que no s'han de crear des de zero.

Però hi ha una altra raó per la qual els símbols són poderosos, i s'anomena instanciació.

Els símbols no només són convenients, sinó que també faciliten l'actualització dels elements de disseny repetits.

 

Bàsicament, sempre que feu canvis al símbol original, aquests canvis es reflecteixen immediatament en totes les instàncies del símbol que es troba a la vostra obra d'art. Necessites botons més grans al teu lloc web? Només canvia el símbol. Voleu que els camps del formulari tinguin un aspecte diferent a cada pàgina? Només canvia el símbol. Entens la idea.

Consell: si no voleu que això passi a una instància específica del símbol com, feu clic amb el botó dret a l'objecte de la il·lustració i seleccioneu Trenca la referència del símbol. Això l'exclourà de les actualitzacions automàtiques.

Aquí teniu un bon vídeo que explica com utilitzar i manipular símbols:

Ús de símbols a Adobe Illustrator d' Adobe TV .

Per utilitzar un símbol existent:

1. Obriu el tauler Símbols des del menú Finestra.
2. Arrossegueu el símbol seleccionat a la vostra obra

Crea un símbol nou:

1. Crea una imatge símbol
2. Obriu el tauler Símbols des del menú Finestra.
3. Arrossegueu una il·lustració al tauler
4. Feu clic a D'acord al quadre de diàleg per confirmar.

Per editar un símbol:

1. Obriu el tauler Símbols des del menú Finestra.
2. Feu doble clic en un símbol per entrar al mode d'edició.
3. Quan hàgiu acabat, feu doble clic en qualsevol lloc fora de la imatge del símbol per sortir del mode d'edició.

7. Amplieu objectes fàcilment amb l'escala de 9 segments. Consells per treballar amb Illustrator

Aquesta és una característica de simbologia avançada que us permet definir quines parts d'un objecte s'estiren durant l'escala i quines romanen sense canvis.

Esquerra: un exemple de botó estirat amb i sense la configuració de zoom de 9 segments. Dreta: la configuració d'escala de 9 segments implica moure 4 guies que indiquen a Illustrator quines parts de l'objecte estan protegides i quines parts es poden escalar.

 

Un exemple pràctic és un botó amb cantonades arrodonides: si voleu fer-lo més llarg, no podeu estirar-lo horitzontalment perquè això distorsionarà tot l'objecte. En canvi, haureu de moure manualment els punts de forma. Amb l'escala de 9 segments, l'estirament funciona com voleu. Consells per treballar amb Illustrator

Per entendre realment com funciona, escolteu aquest gran tutorial en vídeo d'Adobe TV per posar-vos al dia ràpidament:

Ús de l'escala de 9 segments amb símbols d' Adobe TV .

8. Cantons arrodonits per tot arreu!

Podeu crear un rectangle arrodonit a Photoshop, però Illustrator us permet aplicar un efecte de cantonada arrodonida no destructiu a gairebé qualsevol objecte. Què és un efecte no destructiu? Això vol dir que podeu activar-lo, desactivar-lo o canviar-ne la configuració sense afectar l'objecte original subjacent.

Podeu aplicar l'efecte de cantonades arrodonides a gairebé qualsevol tipus d'objecte i ajustar-lo segons sigui necessari. Consells per treballar amb Illustrator

Per aplicar l'efecte de cantonada arrodonida:

1. Creeu un rectangle o qualsevol altre objecte amb cantonades afilades
2. Al menú Efectes, trieu Estilitzar > Cantons arrodonides.
3. Introduïu un radi de cantonada i feu clic a Vista prèvia per veure com és.
4. Feu clic a D'acord per aplicar l'efecte.

Per canviar l'efecte de cantonada arrodonida:

1. Seleccioneu un objecte amb cantonades arrodonides
2. Obriu el panell Aparença des del menú Finestra.
3. Cerqueu l'efecte Cantonades arrodonides i feu-hi doble clic per canviar-ne la configuració, o feu clic a la icona de l'ull per activar-lo o desactivar-lo.

9. Creació d'un emplenament ràpid amb un patró ràster. Consells per treballar amb Illustrator

Els patrons de fons subtils són un gran èxit en el disseny web, però molts dissenyadors pensen que no són fàcils d'aplicar a Illustrator.

He de reconèixer que no és intuïtiu, però la solució és senzilla.

Per crear un patró de mapa de bits:

1. Col·loca una imatge del patró a la teva peça
2. Feu clic a "Insereix" a la cinta superior (important: no funcionarà sense ell!)
3. Arrossegueu un patró a la paleta de mostres
4. Apliqueu una mostra a qualsevol objecte per omplir-lo amb un patró

10. Col·locació automàtica de text al voltant d'imatges i objectes.

Photoshop és conegut per les seves capacitats d'edició de text molt bàsiques. Si voleu embolicar el text al voltant d'una imatge, heu de crear dos o tres marcs de text diferents i simular l'efecte. Consells per treballar amb Illustrator

Per sort, Illustrator t'ha cobert.

Per embolicar el text al voltant d'una imatge:

1. Seleccioneu la imatge o l'objecte al qual voleu embolicar el text
2. Obriu el menú Objecte, trieu Ajustar text > Nou.
3. Per establir la distància d'ajustament, obriu el menú Ajust de text de nou i seleccioneu Opcions d'ajustament de text.
4. Moveu la imatge sobre el text per veure l'efecte d'embolcall

11. Creeu efectes visuals rics amb la configuració d'aparença dels objectes. Consells per treballar amb Illustrator

A Illustrator, el tauler Aparença d'un objecte funciona de manera molt semblant als efectes de capa a Photoshop: podeu afegir diversos farcits i traços a un objecte i, a continuació, jugar amb els seus modes de transferència, opacitat i efectes per obtenir resultats interessants.

Aquest text és només un únic objecte vectorial, dissenyat amb el tauler Aparença i efectes.

El pati és bastant gran: des d'ombres, borroses i brillantors fins a textura, distorsió i 3D. D'aquesta manera, podeu recrear la majoria dels efectes de Photoshop mentre continueu treballant amb gràfics vectorials.

El tauler d'aparença és potent i divertit; us animo a que el proveu de seguida o mireu el tutorial següent per entendre com funciona:

Dominar el panell d'aparença d' Adobe TV .

Esteu preparat per començar a experimentar amb Illustrator?

La creació de llocs web i interfícies d'usuari amb Photoshop s'ha convertit en la norma i la majoria dels dissenyadors estan contents amb aquesta solució. Consells per treballar amb Illustrator

Però només perquè Photoshop s'hagi estès tant no vol dir que Illustrator no tingui res a oferir, ben al contrari. Amb eines com l'alineació de la quadrícula de píxels, l'ajustament del text i l'aparença de l'objecte, fa un cas fort.

Combinat amb potent eines de maquetació i gràfics vectorials, tall i exportació d'imatges, Illustrator és sens dubte una opció òbvia per als dissenyadors web que volen desenvolupar llocs web ràpidament.