Sisu
- 01. Muutke põhigraafika mustriks
- 02. Viige muster tahvlile
- 03. Loo mustri korduse jaoks uus tahvel
- 04. Salvestage muster veebikasutuseks
- 05. Integreerige muster oma saidile
- Meeldis see? Loe neid!
- Vajalikud teadmised: Basic HTML, Basic CSS, elementaarne vektorikujundus
- Vajab: Illustrator CS6 või Illustrator CC
- Projekti aeg: 15–20 minutit
- Tugifail
Kuna nutitelefonide ja tahvelarvutite arv, mis toetab suuremat ekraani eraldusvõimet, suureneb, hakkavad disainerid üha enam eemalduma bitmap-tekstuuridest vektoripõhiste mustrite kasuks. See võimaldab arendajatel säilitada oma saitidel kõige kvaliteetsemat graafikat ilma vajadust neid pidevalt värskendada.
Selles 15-minutises õpetuses näitan teile, kuidas muuta vektorgraafika Adobe Illustratori korduvaks mustriks, eksportida see veebi jaoks ja kasutada seda oma saitidel.
- Lugege kõiki meie Illustratori postitusi siit
01. Muutke põhigraafika mustriks
Avatud Muster.ai (pakutakse selle õpetuse tugifailides) Illustratoris. See on õpetuse alggraafika, kuid kui teil on oma kujundus, saate sama protsessi abil muuta selle korduvaks mustriks.
Kui olete 'Pattern.ai' avanud, valige Objekt> Muster> Tee.
See avab Mustrivalikud dialoogiboks. Kohandage, kuni saate endale meelepärase mustri. Kui olete lõpetanud, klõpsake nuppu Valmis nupp tahvli kohal.
02. Viige muster tahvlile
Nüüd, kui muster on paneelil Mustrid (kui teil pole paneeli Mudelid avatud, minge aadressile Aken> Näidised), klõpsake ja lohistage näidis tahvlile.
03. Loo mustri korduse jaoks uus tahvel
Suumige, kuni näete mustri sees ristkülikukujulist kasti. (Ära muretse: see pole viga - see näitab lihtsalt seda, kust kordus algab.)
Kui olete ristkülikukujulise kasti leidnud, minge paneelile Tööriistad ja valige Artboardi tööriist. Hoides all [Shift], joonistage järgmine joonelaud, nagu allpool näidatud. Kui olete lõpetanud, vabastage klahv [Tõst].
04. Salvestage muster veebikasutuseks
Valige uus tahvel, minnes aadressile Aken> Artboards Artboards paleti esiletoomiseks. Paletis peaks olema kaks tahvlit: valige teine.
Nüüd mine Fail> Salvesta veebi jaoks.
Ilmub veel üks dialoog. Parima kvaliteedi saavutamiseks minge rippmenüüsse Preset ja valige PNG-24. Tee kindlaks Läbipaistvus on tähistatud, nii et mustri taga võib olla kohandatud värv.
Klõpsake nuppu Salvesta. Kui teil palutakse asukohta sisestada, valige pildid projekti kaustas.
05. Integreerige muster oma saidile
Nüüd, kui muster on valmis, avage index.html ja esmane.css ( css kaust). Te ei peaks failis index.html muudatusi tegema, kui te ei soovi ülejäänud saiti otse mustri kohale ehitada. Aastal esmane.css faili, lisage järgmine kood:
keha {
taustapilt: url (’../ imgs / pattern.png’);
taust-kordus: kordus;
}
(Soovite lisada taust-kordus rida, kuna mõnikord on brauseritel mustrite laadimisel probleeme, nii et see hõlmab kõiki aluseid.)
Kui olete mõlemad failid salvestanud, vaadake tulemust valitud brauserites, et muster õigesti töötaks. Ja see on kõik: teie saidil on korduv kujundus. Nüüd saate seda tehnikat oma mustritega katsetada.
Meeldis see? Loe neid!
- Illustratori õpetused: hämmastavad ideed, mida täna proovida!
- Parim logode kujundamise ülim juhend
- Parimad tasuta veebifondid disaineritele
