Sådan eksporteres SVG-mønstre
Det plejede at være, at du bare kunne whack ud et flisebillede billede som et gif eller jpg på 72dpi og fliser det med CSS. Det er en almindelig praksis blandt webdesignere, og har været i årevis; Det er en hurtig og nem måde at tilføje et mønster eller en tekstur på dit arbejde. Derefter slyngede de irriterende bøffer på Apple frigivelse af nethinden og før vi vidste det a pixel var ikke en pixel længere. Pludselig blev disse elskede mønstre historie.
SVGs (Scaleable Vector Graphics) bliver hurtigt standard for skarp grafik på nettet. De løser problemet med at skulle oprette separate billedfiler for at rumme nethindenheder. De er virkelig sjove og lette at skabe, og de åbner en verden af muligheder ...
Trin 1: Opret et mønster
Der er snesevis af forskellige applikationer, der giver dig mulighed for at designe et SVG-mønster. Min favorit er Illustrator, så det er hvad jeg vil bruge.
Åbn Adobe Illustrator og opret et nyt dokument, der er 300px med 300px. Gå derefter til Objekt> Mønster> Gør og dit lærred vil ændre sig. Du vil bemærke, at der vil være en blå firkant i midten af dit tavle. Mønsterindstillingspanelet vil også være åbent.
Vi skal foretage en lille justering, før vi begynder. Gå over til panelet Mønsterindstillinger, og fjern markeringen for den indstilling, der hedder Flyt flise med kunst. (Denne funktion er irriterende, fordi du ikke kan flytte eller placere dit kunstværk inden for mønsterfeltet. Det vil flytte med det, hvis du ikke fjerner markeringen fra denne mulighed.)
Derefter er himlen grænsen for, hvilken type mønster du kan oprette. Som standard er mønsterfeltet sat til 100px x 100px. Du kan ringe i enhver størrelse, du ønsker. Jeg forlod min på standard.
Træk derefter en firkant ved 50px med 50px. Juster det med tårnets øverste og højre kant.
Klik derefter og hold musen over Pen Tool . Underværktøjer vises, hvor du kan vælge Add Anchor Point Tool . Herfra skal du tilføje et ankerpunkt til midten af pladsens venstre og højre side.
Brug direkte markeringsværktøjet ved at vælge ankerpunkterne (hold skift for at vælge begge.) Vælg derefter Objekt> Transformér> Flyt fra øverste menu .
Flyt de to punkter 20px til højre for at danne en slags pil.
Derefter kopieres formen ved at trække den til en ny position, mens du holder Alt- tasten nede. (Eller kopier og indsæt, hvis du foretrækker det.)
Vælg den nye form og træk den i nederste venstre hjørne af mønsterfeltet.
Med den form, der stadig er valgt, tag et hjørne og drej det 180 grader. (Hold skift nøglen nede for at snappe til præcis 180 grader.)
Fra øverste menu skal du vælge Objekt> Transformér> Flyt og flyt den nye form -20px.
Endelig skal du klikke på knappen Gem en kopi øverst i vinduet, navne mønsteret og gemme det for at fuldføre dit mønster. Gem en kopi er vigtig, hvis du vil redigere den senere. Dette holder dig fra at skulle genskabe det hele igen.
Trin 2: Eksporter mønsteret
Du bemærker, at når du forlader mønstertilstanden, vælges mønsteret automatisk som din udfyldning. Alt du skal gøre er at tegne en form på tavlen, og den bliver fyldt med mønsteret. (Hvis du af en eller anden grund har ændret påfyldningen på formen, kan du finde dit mønster i farveprøvepanelet, anvende det som enhver anden udfyldning.)
Derefter skal du ændre din form, så den dækker hele 300px med 300px tavle.
Vælg Filer> Gem som. Gem din fil som en .svg.
Derefter vises en dialogboks, hvor du kan vælge mellem forskellige SVG-formater og muligheder. Sørg for at klikke på flere muligheder i nederste venstre hjørne for at se alle tilgængelige muligheder for din SVG-fil.
Det typiske format er SVG 1.1, fordi det er det mest anvendte og mest understøttede SVG-format. I denne boks styrer du også om du bevarer evnen til at redigere SVG i Illustrator eller hvis du aktiverer tekst på en sti, som kan være praktisk. Du har mulighed for at bruge SVG som en faktisk fil, eller du kan kopiere koden og indsætte den direkte i dit HTML-dokument. Når du er færdig, skal du klikke på OK.
Trin 3: Rediger SVG-mønsteret
Åbn .svg-filen i et tekstredigeringsprogram. Jeg bruger Sublime tekst, men du kan bruge Notesblok, Dreamweaver, eller hvad som helst du kode HTML in.
Åbn den samme fil i en browser, så du kan forhåndsvise eventuelle ændringer, du foretager til koden.
Der er et par forskellige områder at fokusere på. For det første skal vi redigere grænserne for SVG-filen, så den vil udfylde browseren.
Du vil se:
Du bør ikke bemærke en ændring endnu. Det skal stadig være en firkant. Hvorfor? Fordi visningsboksen er indstillet til 300 x 300, som er firkantede dimensioner. For at udfylde bredden og højden af browseren skal du ændre koden på linje 4 fra viewBox = "0 0 300 300" for at seBox = "0 0 100% 100%" .
Når vi opdaterer browseren, fylder mønsteret vores browser fra ende til slut. Problemet er, hvad hvis du vil ændre størrelsen af mønsteret? Går du tilbage til Illustrator og gentager alt igen? Nej. Det er skøn at have Illustrator generere din SVG-kode. Du kan simpelthen redigere koden. Tænk ikke på det som en ren grafikfil. Tænk på det som en kodefil, som du kan manipulere og bøje til din vilje.
For at redigere størrelsen på mønsteret skal du kigge efter
Hvis du kigger på koden, kan du se, at mønsteret består af polygoner. Den første polygon har en udfyldning af "none" (som producerer hvid) og resten har hex værdier.
For at ændre farverne i vores mønster er alt, hvad vi skal gøre, ændret på fyldningsværdierne.
Hvis du er den slags person, der kan lide at kopiere og indsætte, her er vores endelige SVG-kode:
Det er helt gyldigt, men det er lidt rodet (takk Illustrator). Så jeg vil anbefale at optimere det, før du bruger det. Der er mange muligheder for optimering, men Peter Collingridge s er en af de bedste, det giver os denne endelige kode:
Konklusion
At have mulighed for at eksportere dine Illustrator-farveprøver og -mønstre som SVG'er giver mulighed for mange muligheder. Du kan ikke kun oprette et SVG-mønster, du kan redigere filen på få minutter, kontrollere farver, størrelser og hvordan selve filen gengives i browseren.