Vinkkejä Illustratorin kanssa työskentelyyn. Web-suunnittelijoille, jotka pitävät Photoshopista

Vinkkejä Illustratorin kanssa työskentelyyn. Tässä on hullu idea – suunnittele seuraava verkkoprojektisi Illustratorissa. Jos olet ensisijainen web-suunnittelija, et todennäköisesti reagoi kovin hyvin tähän ehdotukseen. Illustrator ei vain voi tehdä kaikkea mitä Photoshop voi tehdä, eikö niin?

Ei varmasti sillä tavalla.

Vaikka Photoshopista on tullut todellinen työkalu web-suunnittelu, Illustrator on enemmän kuin kykenevä vastaamaan tarpeisiisi. Asettelutyökalujensa ansiosta se on usein parempi ja sopivampi ohjelma web-suunnitteluun.

Koska useimmat verkkosuunnittelun ammattilaiset eivät halua vaeltaa Illustratorissa todisteita etsimään, olen koonnut luettelon verkkoon liittyvistä ominaisuuksista, jotka sinun on tiedettävä, jotta voit aloittaa web-suunnittelun kokeilun Illustratorissa.

Kokeile muutamaa näistä ja takaan, että alat käyttää Illustratoria vakiotyökaluna web-suunnittelun työnkulussa.

1. Ensinnäkin: aseta kaikki yksiköt pikseleiksi. Vinkkejä Illustratorin kanssa työskentelyyn

Oletusarvoisesti Illustrator käyttää metriikkaa yksiköt esineen ja pisteiden koolle tekstiä varten. Nämä ovat hienoja asetuksia useimpiin suunnittelutilanteisiin, mutta Web-suunnittelu haluat luultavasti nähdä pikseleitä kaikkialla. Joten ennen kuin alat työskennellä minkään muun parissa, varmista, että yksikkösi on asetettu oikein.

Voit asettaa yksiköt pikseleiksi seuraavasti:

1. Avaa Muokkaa-valikosta
2. Valitse mittayksiköt asetusten alivalikosta.
3. Aseta kaikki valinnat "pikseliksi"

2. Luo asiakirjoja verkkodokumenttiprofiilin avulla.

 

Kun haluat aloittaa uuden suunnittelun työskentelyn, selaa helposti Uusi asiakirja -ikkunaa ja ohita joitain tärkeitä yksityiskohtia, kuten kertomalla Illustratorille, että aiot työstää verkkosuunnittelua, jotta et käytä CMYK-värejä. ja kohteen epäselvät reunat. Muista vain valita Internet-profiiliasetus Uusi asiakirja -ikkunassa, niin kaikki on kunnossa.

3. Ota käyttöön objektien pikseliruudukon kohdistus. Vinkkejä Illustratorin kanssa työskentelyyn

Tämä ominaisuus on hengenpelastaja, jos sinulla on koskaan ollut ongelmia muodon epäselvien reunojen kanssa Photoshopissa.

Pikseliruudukon kohdistus säätää kohteen suorat vaaka- ja pystysegmentit sopimaan täydellisesti pikseliruudukkoon pitäen samalla kaarevat ja vinot segmentit sileinä. Tuloksena on terävät, pikselin täydelliset muodot – jotain, jota haluat ehdottomasti verkkosuunnittelussa.

Yläpainikkeessa on käytössä pikseliruudukon kohdistus, mikä johtaa aina teräviin reunoihin.

Objektitason pikseliruudukon kohdistuksen ottaminen käyttöön:

1. Valitse objekti
2. Avaa Muunna-paneeli (Ikkuna > Muunna).
3. Valitse "Align to Pixel Grid" -valintaruutu paneelin alareunassa (jos et näe sitä, näytä asetukset kaksoisnapsauttamalla paneelia)

Huomautus. Pikseliruudukon kohdistus on oletusarvoisesti käytössä kaikille uusille web-dokumenttiprofiilin avulla luoduille objekteille. Jos kuitenkin liität objekteja muista Illustrator-tiedostoista, sinun on säädettävä niiden pikselien kohdistus manuaalisesti. Vinkkejä Illustratorin kanssa työskentelyyn

4. Ota pikselien esikatselu käyttöön.

Pixel-Preview-ominaisuus saa Illustratorin käyttäytymään aivan kuten Photoshop, kun kuva skaalautuu yli 100 %:n skaalaukseen – sen sijaan, että saisit joka kerta täydellisiä vektoreita, näet itse asiassa pikselit ikään kuin työskentelet rasterikuvan kanssa.

Kun otat pikselien esikatselun käyttöön, tunnet olevasi Photoshopissa.

Ajattele kuinka siistiä se on - sinulla on kaikki vektorigrafiikkavoimat sormiesi ulottuvilla ja voit nähdä, miltä tulos näyttää pikselitasolla.

Siistiä, eikö?

Ota pikselien esikatselu käyttöön tai poista se käytöstä

1. Avaa näkymävalikko
2. Valitse Pixel View.

5. Käytä kuvitusikkunoita. Vinkkejä Illustratorin kanssa työskentelyyn

Kuvittele, että kaksi videokameraa on suunnattu projektiisi.

Yhdessä kamerassa on normaali zoomaustaso, joka näyttää 100 % työstäsi. Toisessa kamerassa on 400 %:n zoomaustaso ja se on suunnattu tiettyyn kuvakkeeseen, jonka parissa olit työstämässä.

Kuten kirurgi, käytät zoom-kameraa tehdäksesi pieniä pikselitason muutoksia kuvakkeeseen ja katsot toisinaan 100 % zoom-kameraa nähdäksesi, miltä se näyttää todellisessa koossa.

Kansiikkunat ovat hienoja, kun haluat työskennellä pienten elementtien, kuten kuvakkeiden, kanssa – sinun ei tarvitse jatkuvasti lähentää ja loitontaa tarkistaaksesi, miltä kaikki näyttää.

Nämä ovat kuvitusikkunoita – niiden avulla voit tarkastella suunnitteluasi samanaikaisesti eri zoomaustasoilla, väriasetuksella ja muilla muunnelmilla. Tämä on erittäin hyödyllistä web-suunnittelussa, varsinkin kun työskentelet pikselitason yksityiskohtien kanssa.

Taide-ikkunoiden käyttäminen:

1. Avaa Ikkuna-valikko ja valitse sitten Uusi ikkuna. Illustrator luo uuden välilehden, jossa on sama asiakirja näkyvissä.
2. Siirry uudelleen Ikkuna-valikkoon ja valitse Järjestä > Siirrä kaikki ikkunaan. Tämä antaa sinun muuttaa ikkunoiden koko ja sijoitus vierekkäin parhaaksi katsomallasi tavalla.
3. Kokeile eri zoomaustasoja ikkunoissa ja ala tehdä muutoksia nähdäksesi, miten se toimii. Vinkkejä Illustratorin kanssa työskentelyyn

6. Käytä symboleja luodaksesi nopeasti painikkeita, kuvakkeita ja muuta.

Kuinka monta kertaa olet luonut saman (tai melkein saman) painikkeen, kuvakkeen tai widgetin Photoshopissa? Jos pidät web-suunnittelusta, teet sitä todennäköisesti joka päivä.

Illustrator voi auttaa sinua säästämään aikaa ja välttämään tämän toistuvan symbolien käytön.

Pohjimmiltaan symbolit ovat loputon joukko valmiita suunnittelun elementtejä, joka voidaan lisätä työhön yksinkertaisesti vetämällä ja pudottamalla ja muokata sitten tarpeen mukaan. Tämä sopii ihanteellisesti painikkeille, kuvakkeille ja muille vakioobjekteille, joita ei tarvitse luoda tyhjästä.

Mutta on toinenkin syy, miksi symbolit ovat tehokkaita, ja sitä kutsutaan instantiaatioksi.

Symbolit eivät ole vain käteviä, vaan niiden avulla on myös helppo päivittää toistuvia suunnitteluelementtejä.

 

Pohjimmiltaan aina kun teet muutoksia alkuperäiseen symboliin, muutokset näkyvät välittömästi kaikissa taideteoksessa esiintyvissä symboleissa. Tarvitsetko suurempia painikkeita verkkosivustollesi? Vaihda vain symboli. Haluatko, että lomakekentät näyttävät erilaisilta jokaisella sivulla? Vaihda vain symboli. Ymmärrät idean.

Vihje: Jos et halua tämän tapahtuvan tietylle as-symbolin esiintymälle, napsauta hiiren kakkospainikkeella kuvassasi olevaa objektia ja valitse Katkaise symboliviittaus. Tämä sulkee sen pois automaattisista päivityksistä.

Tässä on hyvä video, jossa selitetään symbolien käyttöä ja käsittelyä:

Symbolien käyttäminen Adobe Illustratorissa ja Adobe TV .

Olemassa olevan symbolin käyttäminen:

1. Avaa Symbolit-paneeli Ikkuna-valikosta.
2. Vedä valittu symboli työhösi

Luo uusi symboli:

1. Luo symbolikuva
2. Avaa Symbolit-paneeli Ikkuna-valikosta.
3. Vedä kuva paneeliin
4. Vahvista napsauttamalla valintaikkunassa OK.

Voit muokata symbolia seuraavasti:

1. Avaa Symbolit-paneeli Ikkuna-valikosta.
2. Siirry muokkaustilaan kaksoisnapsauttamalla symbolia.
3. Kun olet valmis, kaksoisnapsauta mitä tahansa symbolikuvan ulkopuolella poistuaksesi muokkaustilasta.

7. Laajenna objekteja helposti 9-segmenttisellä skaalalla. Vinkkejä Illustratorin kanssa työskentelyyn

Tämä on edistynyt symboliominaisuus, jonka avulla voit määrittää, mitkä kohteen osat venyvät skaalauksen aikana ja mitkä pysyvät muuttumattomina.

Vasemmalla: Esimerkki venytetystä painikkeesta 9-segmentin zoomausasetuksen kanssa ja ilman. Oikealla: 9-segmenttinen skaalausasetus sisältää neljän ohjaimen siirtämisen, jotka kertovat Illustratorille, mitkä kohteen osat on suojattu ja mitkä osat voidaan skaalata.

 

Käytännön esimerkki on painike pyöristetyillä kulmilla - jos haluat tehdä siitä pidemmän, et voi vain venyttää sitä vaakasuunnassa, koska se vääristää koko objektia. Sen sijaan sinun on siirrettävä muotopisteitä manuaalisesti. 9-segmenttisellä skaalalla venytys toimii toivotulla tavalla. Vinkkejä Illustratorin kanssa työskentelyyn

Ymmärtääksesi, miten se todella toimii, kuuntele tämä upea video-opastus Adobe TV:stä, jotta pääset nopeasti vauhtiin:

9-segmentin skaalaus symbolien kanssa ja Adobe TV .

8. Pyöristetyt kulmat kaikkialla!

Voit luoda pyöristetyn suorakulmion Photoshopissa, mutta Illustratorin avulla voit käyttää tuhoamatonta pyöristetyn kulman tehostetta lähes mihin tahansa kohteeseen. Mikä on tuhoamaton vaikutus? Tämä tarkoittaa, että voit ottaa sen käyttöön, poistaa sen käytöstä tai muuttaa sen asetuksia vaikuttamatta taustalla olevaan alkuperäiseen objektiin.

Voit soveltaa pyöristetyt kulmat -tehostetta lähes mihin tahansa esineeseen ja säätää sitä tarpeen mukaan. Vinkkejä Illustratorin kanssa työskentelyyn

Pyöristetyn kulman tehosteen käyttäminen:

1. Luo suorakulmio tai jokin muu esine, jolla on terävät kulmat
2. Valitse Tehosteet-valikosta Tyyli > Pyöristetyt kulmat.
3. Anna kulman säde ja napsauta Esikatselu nähdäksesi miltä se näyttää.
4. Ota tehoste käyttöön napsauttamalla OK.

Pyöristetyn kulman tehosteen muuttaminen:

1. Valitse kohde, jossa on pyöristetyt kulmat
2. Avaa Ulkoasu-paneeli Ikkuna-valikosta.
3. Etsi Pyöristetyt kulmat -tehoste ja kaksoisnapsauta sitä muuttaaksesi sen asetuksia tai napsauta silmäkuvaketta kytkeäksesi sen päälle tai pois.

9. Pikatäytön luominen rasterikuviolla. Vinkkejä Illustratorin kanssa työskentelyyn

Hienovaraiset taustakuviot ovat suuri hitti web-suunnittelussa, mutta monet suunnittelijat ajattelevat, että niitä ei ole helppo käyttää Illustratorissa.

Minun on myönnettävä, että se ei ole intuitiivinen, mutta ratkaisu on yksinkertainen.

Voit luoda bittikarttakuvion seuraavasti:

1. Aseta kuva kuviosta kappaleeseesi
2. Napsauta "Lisää" ylänauhassa (tärkeää - se ei toimi ilman sitä!)
3. Vedä kuvio Swatches-palettiin
4. Lisää värimalli mihin tahansa objektiin täyttääksesi sen kuviolla

10. Tekstin automaattinen sijoittaminen kuvien ja esineiden ympärille.

Photoshop tunnetaan hyvin perustavanlaatuisista tekstinmuokkausominaisuuksistaan. Jos haluat kääriä tekstiä kuvan ympärille, sinun on luotava kaksi tai kolme erilaista tekstikehystä ja simuloitava vaikutus. Vinkkejä Illustratorin kanssa työskentelyyn

Onneksi Illustrator auttaa sinua.

Tekstin rivittäminen kuvan ympärille:

1. Valitse kuva tai objekti, jonka ympärille haluat rivittää tekstin
2. Avaa Objekti-valikko ja valitse Rivitä teksti > Uusi.
3. Aseta rivitysetäisyys avaamalla Tekstin rivitys -valikko uudelleen ja valitsemalla Tekstin rivitysasetukset.
4. Siirrä kuva tekstin päälle nähdäksesi rivitystehosteen

11. Luo monipuolisia visuaalisia tehosteita objektin ulkoasuasetuksilla. Vinkkejä Illustratorin kanssa työskentelyyn

Illustratorissa objektin Ulkoasu-paneeli toimii samalla tavalla kuin Photoshopin tasotehosteet – voit lisätä objektiin useita täyttöjä ja viivoja ja pelata niiden siirtotiloilla, peittävyydellä ja tehosteilla saadaksesi mielenkiintoisia tuloksia.

Tämä teksti on vain yksi vektoriobjekti, joka on muotoiltu Ulkoasu ja tehosteet -paneelin avulla.

Leikkipaikka on melko suuri - varjoista, sumennus- ja hehkusta teksturointiin, vääristymiin ja 3D:hen. Tällä tavalla voit luoda uudelleen suurimman osan Photoshopin tehosteista samalla kun työskentelet vektorigrafiikan kanssa.

Ulkoasupaneeli on tehokas ja hauska – kehotan sinua kokeilemaan sitä heti tai katsomaan alla olevaa opetusohjelmaa ymmärtääksesi, miten se toimii:

Ulkoasupaneelin hallitseminen ja Adobe TV .

Oletko valmis aloittamaan Illustratorin kokeilun?

Web-sivustojen ja käyttöliittymien luomisesta Photoshopilla on tullut normi, ja useimmat suunnittelijat ovat tyytyväisiä tähän ratkaisuun. Vinkkejä Illustratorin kanssa työskentelyyn

Mutta se, että Photoshop on levinnyt niin laajalle, ei tarkoita, ettei Illustratorilla olisi mitään tarjottavaa – päinvastoin. Työkaluilla, kuten pikseliruudukon kohdistus, tekstin rivitys ja objektin ulkoasu, se on vahva asia.

Yhdistettynä voimakkaisiin asettelutyökalut ja vektorigrafiikkaa, kuvien leikkaamista ja vientiä, Illustrator on ehdottomasti ilmeinen valinta web-suunnittelijoille, jotka haluavat kehittää verkkosivustoja nopeasti.