Hvernig á að flytja SVG mynstur
Það var áður að þú gætir bara dreymt út myndarlegt mynd sem gif eða jpg á 72dpi og flísar það með CSS. Það er algengt hjá vefhönnuðum og hefur verið í mörg ár; Það er fljótleg og auðveld leið til að bæta við mynstur eða áferð í vinnuna þína. Síðan lituðu þessar leiðinlegu bækur á Apple á sjónhimnu og áður en við vissum það a pixlar voru ekki pixlar lengur. Skyndilega varð þessi elskaða mynstur sögu.
SVGs (Scaleable Vector Graphics) eru fljótt að verða staðall fyrir skörpum myndum á vefnum. Þeir leysa vandann af því að þurfa að búa til sérsniðnar myndskrár til að mæta sjóntaugakerfi. Þeir eru mjög skemmtilegir og auðvelt að búa til og þeir opna heim möguleika ...
Skref 1: Búðu til mynstur
Það eru heilmikið af mismunandi forritum sem leyfa þér að hanna SVG mynstur. Uppáhaldið mitt er Illustrator, svo það er það sem ég ætla að nota.
Opnaðu Adobe Illustrator og búa til nýtt skjal sem er 300px með 300px. Þá skaltu fara í Object> Pattern> Make og striga þín mun breytast. Þú munt taka eftir því að það verður blátt ferningur í miðju listblaðinu þínu. Einnig mun Myndevalmyndarspjaldið vera opið.
Við verðum að gera smávægileg aðlögun áður en byrjað er að byrja. Farið yfir í Myndevalmyndarspjaldið og hakið úr valkostinum sem segir Flytja flísar með list. (Þessi eiginleiki er pirrandi, vegna þess að þú getur ekki hreyft eða staðið listaverkin þín á mynstursplássinu. Það mun hreyfist með því ef þú slekkur ekki á þessum valkosti.)
Næst er himinninn takmörk fyrir hvaða tegund mynstur þú getur búið til. Sjálfgefið er mynsturferminn settur á 100 px x 100 px. Þú getur hringt í hvaða stærð sem þú vilt. Ég fór frá mér á sjálfgefið.
Næst skaltu teikna torg, við 50px með 50px. Stilltu það með efstu og hægri brúnum á torginu.
Næst skaltu smella og halda músinni yfir Pen Tool . Undirverktakar birtast, þar sem þú getur valið Add Anchor Point Tool . Héðan skaltu bæta við akkerispunkta í miðju vinstri og hægri hliðar torgsins.
Notaðu Direct Selection Tólið , veldu akkerapunkta (haltu breytingunni til að velja bæði.) Þá skaltu velja Object> Transform> Move í toppvalmyndinni.
Færðu tvö stig 20px til hægri til að mynda eins konar ör.
Næst skaltu afrita formið með því að draga það í nýja stöðu meðan þú heldur inni Alt takkanum. (Eða afritaðu og líma ef þú vilt.)
Veldu nýja formið og dragðu það inn í neðra vinstra hornið á mynstorginu.
Með lögun enn valið, grípa horn og snúa það 180 gráður. (Haltu vaktarlyklinum inni til að smella nákvæmlega á 180 gráður.)
Frá efstu valmyndinni skaltu velja Object> Transform> Færa og færa nýja formið -20px.
Að lokum skaltu smella á Vista afrita hnappinn efst í glugganum, nefna mynstur og vista það til að ljúka mynstrinu þínu. Vistaðu afrit er mikilvægt ef þú vilt breyta því seinna. Þetta heldur þér frá því að þurfa að endurskapa það aftur.
Skref 2: Flytjið mynstur
Þú munt taka eftir því að þegar þú hættir mynsturhamnum er mynstrið sjálfkrafa valið sem fylling. Allt sem þú þarft að gera er að teikna á listplötunni og það verður fyllt með mynstri. (Ef eitthvað af einhverjum ástæðum hefur þú breytt fyllingunni á löguninni geturðu fundið mynsturið þitt í spjaldtölvunni, notið það eins og allir aðrir fyllingar.)
Næst skaltu breyta lögun þinni þannig að hún nær yfir allt 300px með 300px listpjaldi.
Veldu File> Save As. Vista skrána sem .svg.
Næst birtist gluggi þar sem þú getur valið úr mismunandi SVG formum og valkostum. Vertu viss um að smella á fleiri valkosti, neðst til vinstri horni, til að sjá allar tiltækar valkosti fyrir SVG skrána.
Dæmigerð sniðið er SVG 1.1 vegna þess að það er oftast notað og mest studd SVG sniði. Í þessari reitni stjórnarðu einnig hvort þú varðveitir getu til að breyta SVG í Illustrator eða ef þú virkjar texta á leið, sem getur verið gagnlegt. Þú hefur möguleika á að nota SVG sem raunveruleg skrá eða þú getur afritað kóðann og límt hana beint í HTML skjalið þitt. Þegar þú hefur lokið skaltu smella á Í lagi.
Skref 3: Breyta SVG mynstur
Opnaðu .svg skrána í textaritli. Ég er að nota Sublime Text, en þú getur notað Notepad, Dreamweaver eða hvað sem þú merkir HTML inn.
Opnaðu sömu skrá í vafra svo þú getir forskoðað allar breytingar sem þú gerir á kóðanum.
Það eru nokkrar mismunandi sviðir að einblína á. Í fyrsta lagi þurfum við að breyta mörkum SVG skráarinnar svo að hún fylgi vafranum.
Þú munt sjá:
Þú ættir ekki að taka eftir breytingum ennþá. Það ætti samt að vera torg. Af hverju? Vegna þess að skoðunarhólfið er stillt á 300 x 300, sem eru fermetra stærðir. Til að fylla breidd og hæð vafrans skaltu breyta númerinu á línu 4 úr viewBox = "0 0 300 300" til að skoðaBox = "0 0 100% 100%" .
Þegar við hressir vafrann fyllir mynstur okkar vafra frá lokum til enda. Vandamálið er, hvað ef þú vilt breyta stærð mynstursins? Ert þú að fara aftur til Illustrator og endurtaka allt aftur og aftur? Nei. Það er fegurð þess að hafa Illustrator mynda SVG kóðann þinn. Þú getur einfaldlega breytt kóðanum. Ekki hugsa um það sem eingöngu grafíkskrá. Hugsaðu um það sem kóða skrá sem þú getur handleika og beygja að vilja þínum.
Til að breyta stærð mynstur, leitaðu að
Ef þú lítur á kóðann munt þú sjá að mynstrið er byggt upp af marghyrningum. Fyrsti marghyrningur hefur fyllingu "none" (sem framleiðir hvítt) og restin hafa hex gildi.
Til að breyta litum mynstur okkar allt sem við þurfum að gera er að breyta fylla gildi.
Ef þú ert eins konar manneskja sem finnst gaman að afrita og líma, þá er síðasta SVG kóðinn okkar:
Það er fullkomlega gilt, en það er svolítið sóðalegt (takk Illustrator). Svo ég mæli með að fínstilla það áður en þú notar það. There ert a einhver fjöldi af hagræðingu valkostur í boði, en Peter Collingridge er er einn af þeim bestu, það gefur okkur þennan endanlega kóða:
Niðurstaða
Að hafa getu til að flytja Illustrator sýnishorn og mynstur sem SVGs opnar upp á mikið af möguleikum. Ekki aðeins er hægt að búa til SVG mynstur, þú getur breytt skránni eftir nokkrar mínútur, stjórnað litum, stærðum og hvernig skráin sjálf er gerð í vafranum.