Kuidas luua veebi teemasid Adobe Illustratoris

Veebisaidi või blogi kujundamise aluse loomine Adobe Illustratoris annab teile kiire viisi prototüüpida lehekülje malle ja saidi välimust oma ettevõttele või klientidele. Kuna vektori joonistustööriistade terav ja terav väljund annab väikeseid failisuurusi, saate lihtsaid e-posti manuseid kasutades jagada oma programmeerijatega mitmeid faile ja salvestada oma disainilahendusi ilma, et oleks vaja palju kettaruumi. Kuidas te oma tööfaile seadistate, läheb suurepäraste tulemuste suunas kaugele.

1.

Klõpsake rippmenüüd "Fail" ja valige uus Adobe Illustratori dokumendi loomiseks "Uus". Nimetage oma dokument ja määrake rippmenüü New Document Profile (Uus dokumentide profiil) "Web" (Veeb). Menüü Size (Suurus) pakub automaatselt kolme standardse veebilehe suuruse valikut: "640 480", "800 600" ja "1024 768". Kohandatud suuruse loomiseks veenduge, et olete seadistuste menüü määranud "Piksliteks" ja sisestage nende mõõtmete väljade laius ja kõrgus.

2.

Klõpsake suvandil Advanced (Täpsemalt) asuvat kolmnurka, et näidata selle seadistusvõimalusi. Veenduge, et teie dokumendis kasutatakse RGB värvi režiimi ja ekraani eraldusvõime rasteriefekte 72 pikslit tolli kohta. Kõige tähtsam on see, et aktiveerige ruut Advanced settings (Täpsemad sätted), et teie objektid läheksid Adobe Illustrator'i piksliruudule. See säte tagab, et Illustratori joonistusvahendite kasutamisel on nende tõeliselt vertikaalne ja horisontaalne väljund võrguga, mis vastab 72 ppi ekraaniresolutsioonile, mida kasutatakse veebi graafikas ja disainis, vältides pehmeid servi, mis ilmuvad, kui teie objektid langevad pikslite piiride vahele .

3.

Faili loomiseks klõpsake nuppu "OK". Pange tähele, et Adobe Illustrator lisab automaatselt kärpimisala, mis määrab teie veebilehe suuruse ja kuvab kärpimärgid oma nurkades.

4.

Klõpsake rippmenüüd "Aken" ja valige "Värv", et paljastada sama nime sisaldav paneel. Kui soovite kasutada ainult veebi ohutuid värve, klõpsake paneeli ülemises paremas nurgas "Flyout" menüüs ja määrake selle värviekraan "Web Safe RGB".

5.

Klõpsake rippmenüüd "Aken" ja valige "Kihid". Klõpsake paneeli ülemises paremas nurgas "Flyout" menüüd ja valige "New Layer", et avada dialoogi Layer Options. Oma töö lihtsustamiseks võite soovida määrata sama kihi värvi kõigile kihtidele, mis sisaldavad teatud tüüpi veebisaidi liidese elemente. Nimetage iga loodav kiht, et saaksite kindlaks määrata, millised ressursid sisaldavad seda kihi paneelil. Kasutage allutatud elemente alamelementide asetamiseks kihti. Näiteks saate luua alamkihi nimega "Kodu" kihis nimega "Põhimenüü". Te võite kergemini luua elemente kõigepealt ja nimetada - või isegi korraldada - neid hiljem, kuid saate oma tööde alustamiseks luua vajalikud kihid. Looge üks kiht nimega "Sildid", mille abil saate luua tekstiühikuid, mis tuvastavad iga teie liidese elemendi eesmärgi.

6.

Klõpsake rippmenüüd „Vaade”, valige alammenüü „Rulers” ja valige „Show Rulers”, et paljastada horisontaal- ja vertikaalsed joonlauad, mis on kalibreeritud vastavalt teie dokumendi pikslipõhisele mõõtesüsteemile. Rullijuhikud asuvad kindlatel kihtidel, nii et klõpsa kihile, millele soovid oma juhendid määrata, et veenduda, et nad lõpetavad õige asukoha.

7.

Lohistage joonlaua juhikuid vastavast horisontaalsest või vertikaalsest joonlauale oma plaadile, mis vastab teie liidese elementide asukohtadele ja mõõtmetele. Juhiste täpsesse asendisse paigutamiseks klõpsake rippmenüüd „Vaade“, valige alammenüü „Juhendid” ja lülitage välja „Lukustusjuhised”. Kui olete valinud tööriista juhendi, saate selle paigutada juhtpaneeli või paneeli mõõtmisväljade abil.

8.

Kasutage värvipaneeli, et segada üksiku objekti või objektide komplekti jaoks kasutatavat tooni. Klõpsake värvipaneeli paremas ülanurgas menüüst "Flyout" ja valige valitud värvi klõpsatava värvitooni loomiseks "Loo uus värv". Vaikimisi kasutab Adobe Illustrator teie värvi RGB värvivalemit oma värvi nime jaoks. Alistage vaikeväärtus, et määrata tähendusrikkaid nimemärke, näiteks "Peamenüü kodu" või "Külgriba kast".

9.

Valige esimene kiht, millele soovite veebilehe elemente lisada. Kasutage menüüelementide kastide joonistamiseks tööriista Ristkülik. Saate klõpsata oma artboard'il, et avada ruudukujuline dialoog ja sisestada oma objekti täpne laius ja kõrgus. Teie kastid võivad kujutada tegelikke liidese elemente või kohahoidjaid, mis näitavad mõõtmeid, milles liidese element kuvatakse.

10.

Valige tööriist "Tüüp" ja vajutage "Ctrl-T", et avada märkide paneel. Seadke oma kirjatüüp veebiturvaliseks fontiks, kohahoidjaks või kirjatüübiks, mis ilmub teie veebilehtedele tüübi asendussüsteemi, näiteks Cufoni või Typekiti kaudu.

11.

Lülitage oma sildikihile ja tuvastage oma liidese elemendid individuaalsete sildistuste abil. Kasutage nende tüübielementide jaoks kontrastset värvi, nii et need ei sobi kokku teie disainielementidega.

12.

Salvestage fail kirjeldava dokumendi nimega, mis identifitseerib veebisaidi, kliendi ja paigutuse eesmärgi. Saada fail oma programmeerijale edasiseks arendamiseks.

Nõuanded

  • Kui alustate kogemata tööd Adobe Illustrator failis, milles te ei ole pikslivõrgu joondamise funktsiooni aktiveerinud, saate valida oma objektid ja avada paneeli Transform, et rakendada joondusfunktsiooni olemasolevatele objektidele.
  • Joondamise funktsiooni sisselülitamine ei joosta automaatselt kleepitud või paigutatud objekte oma dokumenti. Illustrator kohtleb pikslivõrguga joondamist objektitaseme funktsioonina, nii et peate pärast failile lisamist mittesobivad objektid vastama.
  • Isegi kui te näete piksli ruudust nähtavat, ei näe te seda, kui te ei suuda suurendada või ületada 600 protsenti tegelikust suurusest.
  • Avage Colour Guide (Värvijuhend) paneel, et vaadata Illustratori värvialgoritmide abil värvilisi perekondi, mis on ehitatud teie praeguse värvitooni ümber. Värvijuhend kasutab värvi teooriat, et luua oma praeguse varjundiga harmoneeruvad swatch-rühmad.

Hoiatus

  • Vaadake oma disainilahendused Pixel Preview režiimis üle, et tagada, et teie vektoriteosed tõlgendavad korrektselt pikslipõhisele väljundile, andes oma programmeerijale optimaalse lähtepunkti HTML, CSS ja teiste veebilehtede failide loomisel.
 

Jäta Oma Kommentaar