Folosind SVG și Illustrator pentru a crea text curbat

Adăugarea unei linii drepte de text într-o carte iBook este destul de simplă, dar ce dacă doriți să adăugați un anumit sens la cartea dvs. cu text care urmează o linie curbă? Atunci când un pic de cunoștințe SVG și Adobe Illustrator merge mult. Permițând Illustrator să genereze codul SVG, veți economisi timpul de calcul al curbei și al plasării textului pe cont propriu.

Pasul 1: Creați curba în Illustrator

Începeți prin lansarea Adobe Illustrator. Clic Fișier> Nou pentru a crea un fișier nou. Asigurați-vă că lățimea și înălțimea fișierului dvs. Illustrator are aceeași lățime și înălțime ca și portul de vizualizare din fișierul dvs. XHTML. În acest exemplu, vom utiliza dimensiunile de 612 pixeli la 792 de pixeli:

Faceți clic pe Instrumentul Pen în Paleta de instrumente. Faceți clic pe fereastra de bord pentru a crea un punct de ancorare și faceți clic pe o altă locație de pe ecran pentru a realiza un al doilea punct de ancorare.

Dați clic și țineți apăsat pe Instrumentul Pen pentru a dezvălui instrumentele suplimentare și selectați Convertiți punctul de ancorare. Faceți clic și trageți unul dintre punctele de ancorare pentru a face o curbă.

Apasă pe Tip Tool și treceți deasupra începutului liniei curbe până când cursorul arată o linie ondulată.

Faceți clic pe placa de artă și cursorul va fi poziționat pe linia curbei. Tip "Verificați linia mea minunată curbă!" (sau ceva la fel de cool).

Pasul 2: Setarea opțiunilor

Măriți dimensiunea textului dacă este necesar, apoi faceți clic pe Fișier> Salvare ca. Alegeți "SVG" din meniul Format și alegeți un nume și o locație pentru fișierul dvs. înainte de a da clic pe "Salvați". Unele dintre setările opțiunilor SVG nu se aplică situației noastre; să trecem peste setările pe care trebuie să le specificăm. Setați "Profiluri SVG" la "SVG 1.1". În caseta "Fonturi", setați "Tip" la "SVG" și "Subsetare" în "Niciunul (Utilizați fonturile sistemului)". Faceți clic pe butonul "Mai multe opțiuni" din colțul din stânga jos. În caseta "Opțiuni avansate" setați "Proprietăți CSS" la "Atribute de prezentare". Asigurați-vă că doar bifați casetele de lângă "Ieșire mai mică elemente "și" Utilizare " element pentru text pe cale ".

Faceți clic pe "OK" și închideți Illustrator.

Pasul 3: Pregătirea fișierului XHTML

Lansați editorul de text și creați un nou fișier XHTML. Adăugați în fișier următorul cod:

     SVG iBooks Exemplu

În afară de spațiile de nume tipice EPUB și XHTML, veți observa două spații de nume noi, una pentru "svg" și cealaltă pentru "xlink". Ambele aceste spații de nume sunt necesare pentru SVG. Portalul de vizualizare se potrivește cu dimensiunea fișierului nostru original Illustrator. Dacă ați selectat dimensiuni diferite pentru fișierul dvs. Illustrator, veți dori să modificați codul de vizualizare pentru a corespunde dimensiunilor Illustratorului.

Pasul 4: Adăugarea codului SVG

Adăugați în SVG următorul cod SVG corp etichetă.

Folosind spațiul de nume "svg:", definim câteva lucruri diferite, cum ar fi versiunea SVG pe care o folosim și modul de a manipula spațiul alb. Id-ul poate fi orice îți place.

Datele de cale

Vom copia cinci fragmente de informații din fișierul SVG Illustrator și le vom plasa în aceeași locație în interiorul fișierului XHTML. Deschideți fișierul SVG Illustrator în editorul de text. Copiați datele căii alfanumerice din interiorul ghilimelor de lângă d =.

Inserați datele căii în interiorul ghilimelor de lângă d = în fișierul XHTML. Datele din traseul SVG dețin cheia curbei, oferind instrucțiuni pentru unde să se mute, cum se creează curba și unde să se încheie linia.

startOffset

Înapoi în fișierul SVG, copiați procentajul de lângă startOffset = și lipiți-o înăuntru startOffset = citate în fișierul dvs. XHTML.

startOffset determină cât de departe trebuie să înceapă textul de la începutul liniei.

familie de fonturi

Navigați înapoi la fișierul SVG și copiați numele fontului în interiorul cotelor de lângă font-family =. Faceți clic pe fișierul XHTML și lipiți fontul din interiorul cotelor de lângă font-family =.

marimea fontului

Faceți clic pe fișierul SVG din nou și copiați numărul din interiorul cotelor de lângă font-size =. Faceți clic pe fișierul XHTML și inserați dimensiunea în interiorul cotelor de lângă font-size =.

Text

Încă o dată, navigați înapoi la fișierul SVG. Copiați linia de text care apare pe curbă și inserați-o între deschidere și închidere svg: tspan Etichete.

Pasul 5: Testarea

Să aruncăm o privire rapidă în Safari pentru a vedea cum arată. Deschideți fișierul XHTML din Safari pentru a vedea linia curbată.

Concluzie

Adăugarea textului curbat la iBook vă poate aduce textul la viață, adăugând emoții și un sentiment de realism la proiectul dvs..

Cod