Slik eksporterer du SVG-mønstre
Det pleide å være at du bare kunne kaste ut et fliserbart bilde som et gif eller jpg på 72dpi og fliser det med CSS. Det er en vanlig praksis blant webdesignere, og har vært i mange år; Det er en rask og enkel måte å legge til et mønster eller en tekstur på arbeidet ditt. Så de irriterende bodene over på Apple utgitt netthinnen skjermer og før vi visste det a piksel var ikke en piksel noe lenger. Plutselig ble de kjære mønstrene historie.
SVGs (Scaleable Vector Graphics) blir raskt standarden for skarp grafikk på nettet. De løser problemet med å opprette separate bildefiler for å imøtekomme netthinnenheter. De er veldig morsomme og enkle å lage, og de åpner opp en verden av muligheter ...
Trinn 1: Opprett et mønster
Det finnes dusinvis av forskjellige applikasjoner som gjør det mulig å designe et SVG-mønster. Min favoritt er Illustrator, så det er det jeg skal bruke.
Åpne Adobe Illustrator og opprett et nytt dokument som er 300px ved 300px. Deretter går du til Objekt> Mønster> Lag og lerretet ditt vil endres. Du vil legge merke til at det vil være et blått firkant i midten av tavlen. Mønsteret Alternativer Panel vil også være åpent.
Vi må gjøre en liten justering før du begynner. Gå over til Mønsteralternativer-panelet og fjern merket for alternativet Flytt tegel med kunst. (Denne funksjonen er irriterende, fordi du ikke kan flytte eller plassere kunstverket ditt på mønsterfeltet. Det vil flytte med det hvis du ikke fjerner merket for dette alternativet.)
Deretter er himmelen grensen til hvilken type mønster du kan opprette. Som standard er mønsterfeltet satt til 100px x 100px. Du kan ringe inn i hvilken som helst størrelse du ønsker. Jeg forlot min på standard.
Deretter tegne en firkant, ved 50px med 50px. Juster den med torgets øverste og høyre kant.
Deretter klikker du og holder musen over pennverktøyet . Underverktøy vises, der du kan velge Add Anchor Point Tool . Herfra legger du til et ankerpunkt til sentrum av venstre og høyre side av torget.
Ved hjelp av Direct Selection Tool velger du ankerpunktene (hold skift for å velge begge.) Velg deretter Objekt> Transformere> Flytt fra toppmenyen .
Flytt de to punktene 20px til høyre for å danne en slags pil.
Deretter dupliserer du formen ved å dra den til en ny posisjon mens du holder nede alt- tasten. (Eller kopier og lim inn hvis du foretrekker det.)
Velg den nye figuren og dra den inn i nederste venstre hjørne av mønsterfeltet.
Med formen fortsatt valgt, ta et hjørne og roter det 180 grader. (Hold nede Skift- tasten for å snappe til nøyaktig 180 grader.)
Fra øverste meny velger du Objekt> Transformere> Flytt og flytt den nye formen -20px.
Til slutt klikker du på Lagre en kopi øverst i vinduet, navnet på mønsteret og lagrer det for å fullføre mønsteret. Lagre en kopi er viktig hvis du vil redigere den senere. Dette holder deg fra å måtte gjenskape det hele om igjen.
Trinn 2: Eksporter mønsteret
Du vil legge merke til at når du går ut av mønstermodusen, blir mønsteret automatisk valgt som fylling. Alt du trenger å gjøre er å tegne en form på tavla og det blir fylt med mønsteret. (Hvis du av en eller annen grunn har endret fyllingen på formen, kan du finne mønsteret ditt i fargepanelet, bruke det som en hvilken som helst annen utfylling.)
Deretter endre størrelsen på formen din slik at den dekker hele 300px ved 300px artboard.
Velg Fil> Lagre som. Lagre filen som en .svg.
Deretter vises en dialogboks der du kan velge mellom forskjellige SVG-formater og alternativer. Sørg for å klikke på flere alternativer nederst i venstre hjørne for å se alle tilgjengelige alternativer for SVG-filen.
Det typiske formatet er SVG 1.1 fordi det er det mest brukte og mest støttede SVG-formatet. I denne boksen kontrollerer du også hvorvidt du beholder evnen til å redigere SVG i Illustrator, eller hvis du aktiverer tekst på en bane som kan være nyttig. Du har muligheten til å bruke SVG som en faktisk fil, eller du kan kopiere koden og lime den direkte i HTML-dokumentet. Når du er ferdig, klikker du OK.
Trinn 3: Rediger SVG-mønsteret
Åpne .svg-filen i et tekstredigeringsprogram. Jeg bruker Sublime Text, men du kan bruke Notisblokk, Dreamweaver eller hva du koden HTML inn.
Åpne samme fil i en nettleser, slik at du kan forhåndsvise eventuelle endringer du gjør i koden.
Det er noen få forskjellige områder å fokusere på. Først må vi redigere grensen til SVG-filen, slik at den fyller nettleseren.
Du vil se:
Du bør ikke legge merke til en endring ennå. Det skal fortsatt være en firkant. Hvorfor? Fordi visningsboksen er satt til 300 x 300, som er firkantede dimensjoner. For å fylle bredden og høyden til nettleseren, endre koden på linje 4 fra viewBox = "0 0 300 300" for å seBox = "0 0 100% 100%" .
Når vi oppdaterer nettleseren, fyller mønsteret nettleseren fra slutt til slutt. Problemet er, hva om du vil endre størrelsen på mønsteret? Går du tilbake til Illustrator og gjør alt om igjen? Nei. Det er flott å ha Illustrator å generere SVG-koden din. Du kan ganske enkelt redigere koden. Ikke tenk på det som en ren grafikkfil. Tenk på det som en kodefil som du kan manipulere og bøye seg til din vilje.
For å redigere størrelsen på mønsteret, se etter
Hvis du ser på koden, ser du at mønsteret består av polygoner. Den første polygonen har en fylling av "none" (som produserer hvit) og resten har hex-verdier.
For å endre farger i vårt mønster er alt vi trenger å gjøre, å endre fyllingsverdiene.
Hvis du er den typen person som liker å kopiere og lime inn, er her vår siste SVG-kode:
Det er helt gyldig, men det er litt rotete (takk Illustrator). Så jeg anbefaler å optimalisere det før du bruker det. Det finnes mange optimaliseringsalternativer, men Peter Collingridge er er en av de beste, det gir oss denne siste koden:
Konklusjon
Å ha muligheten til å eksportere Illustrator-fargene og -mønstrene som SVG, åpner opp for mange muligheter. Ikke bare kan du lage et SVG-mønster, du kan redigere filen i løpet av få minutter, kontrollere farger, størrelser og hvordan selve filen blir gjengitt i nettleseren.