Web-aiheiden luominen Adobe Illustratorissa

Adobe Illustratorin verkkosivuston tai blogimallin perustan luominen antaa sinulle nopean tavan prototyyppiä sivumallit ja sivuston ulkoasu yrityksellesi tai asiakkaillesi. Koska piirustustyökalujen terävä ja terävä tuotos tuottaa pieniä tiedostokokoja, voit jakaa useita tiedostoja ohjelmoijien kanssa yksinkertaisten sähköpostiliitteiden avulla ja tallentaa mallejasi ilman, että tarvitset paljon levytilaa. Työskentelytiedostojen asettaminen menee pitkälle kohti hyviä tuloksia.

1.

Napsauta avattavaa "File" -valikkoa ja valitse uusi Adobe Illustrator -asiakirja. Nimeä asiakirjasi ja aseta avattavaksi New Document Profile -valikko "Web". Koko-valikossa on automaattisesti kolme vakiosivustosivun kokoasetusta: "640 x 480", "800 600" ja "1024 768". Jos haluat luoda mukautetun koon, varmista, että olet asettanut yksiköt-valikon "pikseleiksi", ja anna leveys ja korkeus kenttiin näiden mittausten osalta.

2.

Napsauta Lisäasetukset -kohdan vieressä olevaa kolmiota paljastaaksesi sen asetukset. Varmista, että asiakirja käyttää RGB-väritilaa ja rasterivaikutuksia ruudulla 72 pikseliä kohden. Tärkeintä on aktivoida Lisäasetukset-osion alareunassa oleva valintaruutu, jotta objektit kohdistuvat Adobe Illustratorin pikseliverkkoon. Tämä asetus varmistaa, että kun käytät Illustratorin piirustustyökaluja, niiden todellinen pystysuora ja vaakasuuntainen ulostulo muodostavat ruudukon, joka vastaa 72 ppi: n näytön tarkkuutta, jota käytetään Web-grafiikassa ja suunnittelussa, välttäen pehmeät reunat, jotka näkyvät, jos esineet putosivat pikselirajojen väliin .

3.

Luo tiedosto napsauttamalla OK-painiketta. Huomaa, että Adobe Illustrator lisää automaattisesti viljelyalueen, joka määrittää Web-sivun koon, ja näyttää rajausmerkit sen kulmissa.

4.

Napsauta avattavaa "ikkuna" -valikkoa ja valitse "Väri" paljastaaksesi saman nimisen paneelin. Jos haluat käyttää vain Web-turvallisia värejä, napsauta paneelin oikeassa yläkulmassa olevaa "Flyout" -valikkoa ja aseta sen värinäyttö "Web Safe RGB: ksi".

5.

Napsauta avattavaa "Window" -valikkoa ja valitse "Layers". Napsauta "Flyout" -valikkoa paneelin oikeassa yläkulmassa ja valitse "New Layer" avataksesi Layer Options -valintaikkuna. Työn yksinkertaistamiseksi saatat haluta määrittää saman kerroksen värin kaikille tasoille, jotka sisältävät tiettyjä verkkosivuston käyttöliittymän elementtejä. Nimeä jokainen luomasi kerros, jotta voit tunnistaa, mitä resursseja se sisältää kerrallaan Tasot-paneeliin. Käytä nimettyjä alikerroksia sijoittamaan alikomponentteja kerrokseen. Voit esimerkiksi luoda alikerroksen nimeltä "Koti" kerroksessa nimeltä "Päävalikko". Saatat helpommin luoda elementtejä ensin ja nimetä - tai jopa järjestää - niitä myöhemmin, mutta voit luoda tarvittavat kerrokset ennen työn aloittamista. Luo yksi kerros nimeltä "Tarrat", johon voit luoda tekstikohtia, jotka tunnistavat kunkin käyttöliittymän elementin tarkoituksen.

6.

Napsauta avattavaa "Näytä" -valikkoa, valitse sen "Viivaimet" -alivalikko ja valitse "Näytä viivoittajat" paljastaaksesi horisontaaliset ja pystysuorat viivaimet, jotka on kalibroitu vastaamaan dokumentin pikselipohjaista mittausjärjestelmää. Viivainohjaimet sijaitsevat tietyillä kerroksilla, joten napsauta sitä kerrosta, jolle haluat määrittää oppaasi, jotta varmistat, että ne päättyvät oikeaan paikkaan.

7.

Vedä viivaimen ohjaimet vastaavasta vaakasuorasta tai pystysuorasta viivaimesta taululle, joka vastaa käyttöliittymän elementtien sijaintia ja mittoja. Jos haluat sijoittaa oppaita tarkkoihin paikkoihin, napsauta avattavaa "Näytä" -valikkoa, valitse sen "Oppaat" -alivalikko ja sammuta "Lukitusoppaat". Kun olet valinnut oppaan valintatyökalulla, voit sijoittaa sen käyttämällä ohjaus- tai muokkauspaneelin mittauskenttiä.

8.

Käytä Väri-paneelia, jos haluat sekoittaa varjon, jota haluat käyttää yksittäiseen esineeseen tai objektiryhmään. Napsauta Väri-paneelin oikeassa yläkulmassa olevaa "Flyout" -valikkoa ja valitse "Luo uusi Swatch", kun haluat luoda napsautettavan värimallin valitussa värissä. Oletusarvon mukaan Adobe Illustrator käyttää värisi RGB-värikaavaa Swatchin nimeksi. Ohita oletusarvo, jos haluat määrittää merkitykselliset Swatch-nimet, kuten "Main menu home" tai "Sidebar box".

9.

Valitse ensimmäinen kerros, johon haluat lisätä Web-sivun elementtejä. Piirrä ruudut valikkokohtia varten suorakulmio-työkalulla. Voit avata suorakulmion valintaikkunan napsauttamalla taulukkosi ja kirjoittamalla kohteen tarkan leveyden ja korkeuden. Laatikot voivat edustaa todellisia liitäntäelementtejä tai paikkamerkkejä, jotka osoittavat mitat, joissa liitäntäelementti tulee näkyviin.

10.

Valitse "Tyyppi" -työkalu ja paina "Ctrl-T" avataksesi Merkki-paneeli. Aseta kirjasintasi Web-turvalliseen fonttiin, paikkamerkkiin tai kirjasintyyppiin, joka näkyy Web-sivuillasi sellaisen korvaavan järjestelmän kautta, kuten Cufon tai Typekit.

11.

Vaihda Tarrat-kerrokseen ja tunnista liitäntäelementit yksittäisillä tarroilla. Käytä näiden tyyppisten elementtien vastakkaista väriä, jotta ne eivät sulautuisi design-elementteihisi.

12.

Tallenna tiedosto kuvailevalla asiakirjan nimellä, joka tunnistaa sivuston, asiakkaan ja ulkoasun tarkoituksen. Lähetä tiedosto ohjelmoijallesi kehittämistä varten.

vinkkejä

  • Jos aloitat vahingossa työt Adobe Illustrator -tiedostossa, jossa et ole aktivoinut pikseliruudukon kohdistusominaisuutta, voit valita objektit ja avata Transform-paneelin, jotta kohdistustoiminto sovellettaisiin olemassa oleviin kohteisiin.
  • Kohdistusominaisuuden ottaminen käyttöön ei kohdista automaattisesti liittämiäsi tai asettamiasi objekteja asiakirjaan. Illustrator käsittelee kohdistusta pikseliverkkoon objektitason ominaisuutena, joten sinun täytyy mukauttaa ei-kohdistetut kohteet sen jälkeen, kun olet lisännyt ne tiedostoon.
  • Vaikka teet pikseliruudun näkyväksi, et näe sitä, ellei lähennä 600 prosenttia tai yli todellisen koon.
  • Avaa Colour Guide (Värikäsikirja) -paneeli, jotta voit tarkastella nykyisen mallin ympärille rakennettuja väriryhmiä Illustratorin värialgoritmeilla. Väriohjaus käyttää väriteoriaa asettamaan nykyisen sävyn kanssa harmonisoitavat mallit.

Varoitus

  • Tarkista kuvasi Pixel Preview -tilassa varmistaaksesi, että vektorikuvasi muuntaa oikein pikselipohjaiseen tulostukseen, jolloin ohjelmoijasi saa optimaalisen lähtökohdan työhönsä HTML-, CSS- ja muiden verkkosivustotiedostojen luomisessa.
 

Jätä Kommentti