Create et sett med glanset Etiketter og lagre dem for web
Dette innlegget er en del av en serie kalt Web og grensesnittdesign Med Vector.Quick Tips: Hvordan lage en Pixel Perfect Glass Button med Adobe Illustrator CS5SVG Files: fra Illustrator til Internett

Følg denne opplæringen og lære å lage et sett med blanke etiketter og også en velt tilstand. Vi vil bruke flere opptredener og tilpassede kunst børster for å oppnå den skinnende utseende, og når vi er ferdig vil vi analysere Lagre for Web alternativer. Vi vil snakke om innstillinger og sammenligne ulike filformater for å få det beste bildet for din nettside. Mange fargevarianter venter deg så la oss begynne!

Trinn 1

Først åpner en ny web-dokument. Ta rektangelverktøyet (M), klikk hvor som helst på artboard å åpne rektangulært vindu og skriv inn dimensjonene vist. Med dette rektangelet er valgt, gå til Object-menyen > Sti > Legg ankerpunkter. Som et resultat vil du få et ekstra punkt i midten av hver side. Nå velger å bruke Direct Selection Tool (A) bare den nederste punktet, gå til Object-menyen > Transform > Flytt under Vertikal typen minus 55 px og trykk OK.

Trinn 2

Også bruker Direct Selection Tool (A) og mens du holder Skift-tasten velger de to punktene som er angitt deretter gå til File menyen > Scripts > Round ethvert hjørne. Kjør skriptet og velge en 10 Radius. Hvis du ennå ikke har installert dette skriptet, gå hit og hente den.

Nå velger punktet fra spissen og kjør skriptet på nytt. Denne gangen velger en 15 Radius.

Trinn 3

Fyll etiketten-form med lineær gradient vist og endre vinkelen til minus 90 grader. Å ha denne fill attributtet valgt i Utseende Panel, trykker du på Duplicate Selected Element ikonet nederst og du fyller får en ny fyll. Bytt ut den blå gradient med et mønster som kalles Mezzotint Dot som du kan finne i Swatch Biblioteker menyen under Patterns > Grunnleggende Grafikk > Grunnleggende Graphics_Textures. . Sett mønsteret til skjerm og redusere Opacity til 70%

Trinn 4

Deretter velger en blå strek og deretter gå til effektmenyen > Sti > Offset Sti og påfør et minus 7 px Offset. I Strek-panelet sjekke muligheten stiplede linjen og velg en 5 pt dash.

Legg til et nytt slag ved å trykke på Duplicate Selected Element-ikonet nederst til Utseende Panel og endre farge fra blå til hvit. Dashbordet og avviksverdiene forblir den samme. Gå til effektmenyen > Forvrenge & Transform > Transform og i Move delen under Horisontal velge minus 1 px. Endre Blending mode til Soft Light, men bare for denne hvite slag.

Trinn 5

La oss nå lage en ny Art pensel. Ta Ellipse Tool (L), klikk hvor som helst på artboard å åpne Ellipse vinduet og skriv inn dimensjonene vist. Bruk Direct Selection Tool (A) for å velge bare poeng fra venstre og høyre for denne ellipse og klikk på Konverter valgte festepunkter til hjørne alternativet. Velg den resulterende formen deretter gå til Object-menyen > Sti > Offset Sti og påfør et minus 0,7 px Offset å få en mindre form i midten.

Begge former er fylt med hvitt. Reduser Opacity for større form til 0% deretter velge dem begge og gå til Object-menyen > Blend > Blend alternativer. Det velger 25 Spesifiserte Trappen og trykk OK deretter gå tilbake til Object-menyen > Blend > Lage. Dra den resulterende blanding gruppen inn i Børster Panel og velg New Art Brush.

Trinn 6

Kopier og lim foran etiketten-formen, fjern gradient fyll og bare gi den et slag. Vi trenger å kutte denne formen derfor ta Saks Tool (C), og klikk på de angitte punkter. Hold bare de tre baner (svart, rød og lilla) og slette de andre segmentene. Stroke disse baner med Art pensel lagret på forrige trinn og deretter sette Strek vekter som angitt. Endre Blending mode til Overlay for alle tre.

Trinn 7

Nå, la oss legge skyggen. Duplicate graderingsfyllet deretter endre fargen til svart. Med denne egenskapen er valgt, gå til effektmenyen > Warp og bruke Inflate effekt for å gjøre toppen bredere (bilde 1). Deretter går du til effektmenyen > Blur > Gaussian Blur og bruke en 6 px Radius (bilde 2) og deretter gå til effektmenyen > Forvrenge & Transform > Transform. Velger å flytte denne svarte fill minus 5 px vertikalt og trykk OK (3) og sett Blending mode til Soft Light (4)

Her er innstillingene for Inflate og Transform effekter.

trinn 8

på dette trinnet vil vi maskere toppen av etiketten. Ta rektangelverktøyet (M) og tegne et rektangel over etiketten som på bildet. Nå velger begge former (rektangel + etikett) og gå til Object-menyen > Klipping Mask > Lag.

Trinn 9

Deretter ta Ellipse Tool (L) og trekker to ellipser har dimensjoner som vist. Sørg for at de er sentrert deretter sette dem på toppen av etiketten. Venstre og høyre ankerpunkter i ellipser bør være på linje med rektangelet brukes til å maskere tidligere. Begge ellipser er fylt med svart bare at jo større man har opacity satt til 0%. Velg deretter gå til Object-menyen > Blend > Blend Valg og velger 30 Spesifiserte Trappen. Etterpå gå tilbake til Object-menyen > Bland og velg Lag. Den resulterende Blend gruppen bør være bak etiketten.

Vi må foreta en ny maske. Tegn med rektangel Tool (M) et rektangel som den sorte nedenfra og sende det bak etiketten, men foran Blend gruppen. Før du fortsetter, må du justere den på toppen med den andre rektangelet brukt tidligere. Nå velger Blend gruppen og dette rektangelet og gå til Object-menyen > Klipping Mask > Lage.

Trinn 10

Ta Pen Tool (P) eller Line Segment Tool (\\) og tegne en rett bane akkurat på den øverste kanten av etiketten som nedenfor. Stroke det med Art pensel lagret i trinn 5 og sette vekten til 0,25 pt. Reduser Opacity til 80%.

Step 11

Tegn en rett bane over etiketten og strøk det med en Art børste som heter Dry Brush fem som du kan finne i Brush Biblioteker menyen under Artistic > Artistic_Paintbrush. Sett Stroke vekten til 1,5 pt velg deretter Utvid Utseende og opp gruppe på Object-menyen. Fyll den resulterende form med lineær gradient vist og angi vinkelen til 90 grader.

Step 12

Kopier og lim inn foran etiketten-form og før du fortsetter slette alle eksisterende opptredener. Velg form oppnådd ved forrige trinn og også kopi av etiketten, som må være i front og gå til Object-menyen > Klipping Mask > Merke (bilde 1). For å oppnå den glossy utseende, endre Blending mode til Screen og redusere Opacity til 70% for formen oppnås ved forrige trinn (bilde 2). Hvis du tror at kantene er for skarp du kan bruke en 1 px Gaussian Blur (bilde 3)

Trinn 13

Tegn en liten trekant så gå til Fil-menyen >.; Scripts > Round ethvert hjørne. Kjør skriptet og velg en 5 Radius.

Sett trekanten nederst på etiketten og velg blå som fyllfarge (bilde 1). Gå til effektmenyen > Stilisere og anvende den indre glød effekt (2) deretter bruke Drop Shadow effekt (3) ved hjelp av innstillingene som vises.

Trinn 14

Den siste tingen å gjøre er teksten. Ta Type Tool (T) og skrive litt tekst og bruke en font som heter Devinne Swash som du kan finne her. Velg Utvid fra Object-menyen for å slå på tekst i figurer og holde den svarte fyll. Gå til effektmenyen > Stilisere og bruke Drop Shadow effekt ved hjelp av innstillingene som vises. Endre Blending mode til Overlay.

På dette punktet etiketten er klar, og vi vil fortsette med rullering staten.

Trinn 15

Lag en kopi av etiketten, og vi vil bare endre et par ting . Noen av figurene er skjult i følgende bilder, og vi vil snakke om dem til rett tid. La oss fokusere på etiketten-form og først endre graderingsfyllet. endrer også den blåfargen i bruk for første slag.

Trinn 16

Nå vil vi endre skyggen. Dobbelklikk på Gaussian Blur i Utseende Panel å åpne Gaussian Blur vinduet og redusere Radius 6-4 px. Deretter dobbeltklikker du på Inflate effekten brukes på åpne Warp Options vinduet og endre Bend verdi fra 5 til minus 5%.

Step 17

Velg gradient fylle ut Utseende Panel og trykk på Duplicate Selected Element ikonet nederst. Som et resultat vil du få et annet fyll ovenfor. Hold samme gradient og gå til effektmenyen > Sti > Offset Sti og påfør et minus 6,5 px Offset. Deretter går du til effektmenyen > Stilisere og anvende den indre glød effekt ved hjelp av innstillingene som vises.

Step 18

La oss lage en ny Art pensel lik den lagres ved trinn 5. Bruk Ellipse Tool (L) for å trekke en 100 x 3 px flat ellipse deretter forvandle venstre og høyre poeng fra glatt til hjørne poeng ved hjelp av Konverter valgte festepunkter til hjørne alternativet. Gå til Objekt meny > Sti > Offset Sti og påfør et minus 1,2 px Offset å få den mindre formen i sentrum. Reduser Opacity for større ellipse til 0% deretter velge dem begge og gå til Object-menyen > Blend > Blend alternativer. Velg 25 Spesifiserte trinn og deretter gå tilbake til Object-menyen > Blend > Lage. Dra den resulterende blanding gruppen inn i Børster Panel og velg New Art Brush.

Trinn 19

Nå, klapp de tre baner med den nye Art pensel. Sett vekten til 0,25 pt og Blending mode til Soft Light for alle tre.

Trinn 20

I dette tilfellet ønsker vi den blanke form til å være mindre synlig derfor redusere Opacity 70-25%.

Step 21

Endre blåfargen brukes til å fylle trekanten og dobbeltklikk på den skyggeeffekten i Utseende Panel. I vinduet redusere Opacity 80-50%. The Inner Glow effekten forblir den samme.

Step 22

For teksten, erstatte den svarte fyll med blå deretter endre Blending mode fra Overlay tilbake til normal og redusere Opacity til 80%.

Her er den endelige roll tilstand av etiketten:

Trinn 23

nå som alt er klart vi vil gå videre til å lagre dem for web. Ta rektangel Tool (M) og tegne et rektangel rundt etiketten og deretter gå til Object-menyen > Beskjær område > Lage. Du vil få samme resultat hvis du bruker beskjæringsområde Tool eller Artboard Tool (Shift + O)

Trinn 24

Gå til Fil-menyen >.; Lagre for Web & Enheter. Dette vinduet tilbyr fire måter å sammenligne den originale etiketten med den vi kommer til å optimalisere: Original, optimalisert, 2-Up og 4-Up. Jeg tror det beste er den 4-Up visning fordi du kan spille med forskjellige innstillinger, test fire versjoner av etiketten deretter velge den beste basert på filstørrelsen og nedlastingstiden. I øvre venstre er verktøy, fra øverst i høyre hjørne kan du velge en annen nedlastingshastighet og lavt i høyre hjørne har du muligheten til å forhåndsvise bildet i standard nettleser.

Step 25

Nå skal vi endre noen innstillinger og sammenligne. Fra de syv filformater tilgjengelig for lagring vil vi prøve bare JPEG, PNG-8 og PNG-24. GIF-formatet er mest egnet for bilder med flate områder med farge, snarere enn for de med gradert fyll og detaljer som disse etikettene. Jeg har prøvd, og de ser ikke så bra.

Det første formatet er JPEG. Selv om dårligere kvalitet jo mindre filstørrelsen, trenger du ikke å senke kvaliteten for mye. For 60% kvalitet filstørrelsen er 7.77K men etiketten begynner å ikke se så bra og for maksimal (100% kvalitet) filstørrelsen er 26.11K (!!). 70% er helt fint. Hvis du krysser av Optimalisert alternativet størrelsesreduksjon filen er svært liten derfor vil vi hoppe over det denne gangen. Sjekk Progressive hvis du vil at bildet skal lastes i går.

Hvis du vet nøyaktig som vil være bakgrunnsfargen, kan du velge en matt farge. Bakgrunnen vil bli fylt med den valgte fargen, i dette tilfellet rosa, og bildet vil opptre som en gjennomsiktig GIF, men fremdeles bruker de millioner av farger som JPEG kan vise i vår fordel. filstørrelsen vil være litt større skjønt.

Trinn 26

Bare for nysgjerrighet jeg prøvde PNG-8-format, og du kan se nedenfor de ulike innstillingene. Hvis du velger selektiv, Illustrator plukker farger øyet kan se, men inkluderer flere farge trygge nyanser. Alternativene er: Perseptuell (farger øynene se det beste) og Adaptive (farger som faktisk er i bildet). La oss snakke om spredning. Denne fordeler piksler av forskjellige farger ved siden av hverandre for å gjøre øyet å tro at det ser flere farger som det faktisk finnes i bildet. Ulempen er at det øker filstørrelsen som du kan se nedenfor, 0% dither vs. 100% spredning. Interlaced tilsvarer Progressive fra JPEG-format. Men ingen av bildene ser bra ut så vi vil gå videre til neste format.

Du vil få et bedre bilde hvis du velger en matt farge, i tilfelle du vet nøyaktig som vil være bakgrunnsfargen på nettet side. Velg også Ingen spredning.

Step 27

Den aller beste resultatet oppnås med PNG-24 format selv om filstørrelsen er ganske stor. På grunn av skyggen rundt etiketten må du kontrollere Transparency alternativet.

Trinn 28

På dette punktet kan du forhåndsvise etiketten i en nettleser ved å trykke på ikonet som vises i trinn 24. Du vil får også en HTML-kode som du kan legge til din nettside.

Trinn 29

Hvis du har bestemt deg for et bestemt format trykk på Lagre-knappen, velger du Bilder Only og en destinasjonsmappe og trykk deretter på lagre igjen.

Trinn 30

Gjenta denne prosessen for roll tilstand av etiketten. På bildet under kan du se de tre versjonene som jeg har valgt.

Trinn 31

Dette er mappen med bildene som er lagret og på dette punktet kan du bruke dem som du ønsker.

Konklusjon

Som en bonus her er flere fargevarianter av etiketten. Alt du trenger å gjøre er å endre et par ting som: gradient fill for etiketten-form, den stiplede slag farge, gradienten for den glansede-form og fyllfargen for trekanten. Det er alt!

Dette er den grønn etikett:

Her er den lilla etikett:

den oransje versjonen ...

rød ...

og gul :