Share
Volg deze zelfstudie en leer hoe u een set glanzende labels en een rollover-status maakt. We zullen meerdere verschijningen en aangepaste kunstborstels gebruiken om het glanzende uiterlijk te verkrijgen en als we klaar zijn, zullen we de opties Opslaan voor web analyseren. We praten over instellingen en vergelijken verschillende bestandsindelingen om de beste afbeelding voor uw webpagina te krijgen. Er wachten je veel kleurvariaties dus laten we beginnen!
Open eerst een nieuw webdocument. Neem het Rechthoek-gereedschap (M), klik ergens op uw tekengebied om het Rechthoek-venster te openen en voer de getoonde afmetingen in. Ga met deze rechthoek naar Object-menu> Pad> Ankerpunten toevoegen. Als een resultaat krijg je een extra punt in het midden van elke kant. Selecteer nu met het gereedschap Direct selecteren (A) alleen het onderste punt, ga naar Object-menu> Transformeren> Verplaats, onder Verticaal type minus 55 px en druk op OK.
Gebruik ook het gereedschap Direct selecteren (A) en houd de Shift-toets ingedrukt terwijl u de twee aangegeven punten selecteert. Ga vervolgens naar Bestand> Scripts> Ronde elke hoek. Voer het script uit en selecteer een 10 Radius. Als je dit script nog niet hebt geïnstalleerd, kun je dit hier downloaden.
Selecteer nu het punt vanaf de tip en voer het script opnieuw uit. Selecteer deze keer een 15 Radius.
Vul de etiketvorm met de getoonde lineaire gradiënt en verander de hoek naar minus 90 graden. Nadat u dit vulkenmerk hebt geselecteerd in het Vormgevingspaneel, drukt u onderaan op het pictogram Geselecteerd artikel en u vult een tweede vulling. Vervang het blauwe verloop door een patroon genaamd Mezzotint Dot dat u kunt vinden in het menu Swatch Libraries onder Patterns> Basic Graphics> Basic Graphics_Textures. Zet het patroon op het scherm en verminder de dekking tot 70%.
Selecteer vervolgens een blauwe streek en ga vervolgens naar Effect menu> Pad> Offset pad en pas een minus 7 px offset toe. Controleer in het vak Lijn de optie onderbroken lijn en selecteer een 5-punts streepje.
Voeg nog een streek toe door op het pictogram Pictogram duplicaat onder in het Vormgevingspaneel te klikken en de kleur van blauw in wit te wijzigen. Het streepje en de offsetwaarden blijven hetzelfde. Ga naar Effect-menu> Vervormen & transformeren> Transformeren en in de sectie Verplaatsen onder Horizontaal selecteren minus 1 px. Wijzig de overvloeimodus in Zacht licht, maar alleen voor deze witte lijn.
Laten we nu een nieuwe tekenpenseel maken. Neem de Ellipse Tool (L), klik ergens op uw tekengebied om het Ellipse-venster te openen en voer de getoonde afmetingen in. Gebruik het gereedschap Direct selecteren (A) om alleen de punten links en rechts van deze ovaal te selecteren en klik op de optie Converteer geselecteerde ankerpunten naar hoek. Selecteer de resulterende vorm en ga naar het menu Object> Pad> Offsetpad en pas een minus van 0,7 px toe om een kleinere vorm in het midden te krijgen.
Beide vormen zijn gevuld met wit. Verklein de dekking voor de grotere vorm naar 0% en selecteer ze vervolgens allebei en ga naar Object-menu> Blend> Mengopties. Selecteer daar 25 Gespecificeerde stappen en druk op OK en ga terug naar Object-menu> Blend> Maken. Sleep de resulterende overvloeigroep naar het deelvenster Penselen en kies Nieuw kunstpenseel.
Kopieer en plak vooraan de labelvorm, verwijder de verloopvulling en geef het een slag. We moeten deze vorm afknippen en daarom de Schaartool (C) nemen en op de aangegeven punten klikken. Houd alleen de drie paden (zwart, rood en paars) en verwijder de andere segmenten. Strijk over deze paden met de Art-penseel die in de vorige stap is opgeslagen en stel vervolgens de lijndikte in zoals aangegeven. Wijzig de overvloeimodus in Overlay voor alle drie.
Laten we nu de schaduw toevoegen. Dupliceer de verloopvulling en verander de kleur naar zwart. Ga met dit kenmerk naar Effect menu> Warp en pas het Inflate effect toe om de top breder te maken (afbeelding 1). Ga vervolgens naar Effect-menu> Vervaging> Gaussiaans vervagen en pas een straal van 6 px toe (afbeelding 2) en ga vervolgens naar Effect-menu> Vervormen & transformeren> Transformeren. Kies ervoor om deze zwarte vulling minus 5 px verticaal te verplaatsen en druk vervolgens op OK (3) en stel de overvloeimodus in op Zacht licht (4).
Dit zijn de instellingen voor de Inflate en Transform-effecten:
Bij deze stap maskeren we de bovenkant van het label. Neem het gereedschap Rechthoek (M) en teken een rechthoek over het label zoals in de afbeelding. Selecteer nu beide vormen (rechthoek + label) en ga naar het menu Object> Knipmasker> Maken.
Neem vervolgens het Ellips-gereedschap (L) en teken twee ellipsen met de weergegeven afmetingen. Zorg dat ze gecentreerd zijn en plaats ze vervolgens bovenaan het label. De linker en rechter ankerpunten van de ellipsen moeten worden uitgelijnd met de rechthoek die eerder is gebruikt om te maskeren. Beide ellipsen zijn gevuld met zwart, alleen de grotere heeft de dekking ingesteld op 0%. Selecteer ze en ga vervolgens naar Object-menu> Overvloeien> Mengopties en selecteer 30 Opgegeven stappen. Ga daarna terug naar het menu Object> Overvloeien en kies Maken. De resulterende menggroep hoort achter het label te staan.
We moeten een ander masker maken. Teken met het gereedschap Rechthoek (M) een rechthoek als de zwarte van onderen en verzend deze achter het label maar vóór de menggroep. Voordat u doorgaat, lijnt u deze uit aan de bovenkant met de andere eerder gebruikte rechthoek. Selecteer nu de menggroep en deze rechthoek en ga naar het menu Object> Knipmasker> Maken.
Neem de Pen-tool (P) of het lijnsegment-gereedschap (\) en teken een recht pad precies op de bovenrand van het label, zoals hieronder. Strijk het met de Art-brush die in stap 5 is opgeslagen en stel het gewicht in op 0,25 pt. Verklein de dekking tot 80%.
Trek nog een recht pad over het label en teken dit af met een Art-penseel met de naam Droog penseel 5 dat u kunt vinden in het menu Penseelbibliotheken onder Artistiek> Kunstzinnig penseel. Stel het slaggewicht in op 1,5 pt en selecteer vervolgens Vormgeving uitvouwen en Groep opheffen in het menu Object. Vul de resulterende vorm met de getoonde lineaire helling en stel de hoek in op 90 graden.
Kopieer en plak voor de vorm van het label en verwijder voordat je verder gaat alle bestaande verschijningen. Selecteer de vorm verkregen in de vorige stap en ook de kopie van het label, die vooraan moet zijn en ga naar het menu Object> Knipmasker> Maken (afbeelding 1). Om de glanzende look te krijgen, wijzigt u de overvloeimodus in Scherm en vermindert u de dekking tot 70% voor de vorm die u in de vorige stap hebt verkregen (afbeelding 2). Als u denkt dat de randen te scherp zijn, kunt u een Gaussiaanse vervaging van 1 px toepassen (afbeelding 3).
Teken een driehoekje en ga vervolgens naar Bestand> Scripts> Ronde elke hoek. Voer het script uit en selecteer een 5 Radius.
Plaats de driehoek onderaan het label en selecteer blauw als vulkleur (afbeelding 1). Ga naar Effect menu> Stileer en pas het Inner Glow effect toe (2) en pas dan het Slagschaduweffect (3) toe met behulp van de getoonde instellingen.
Het laatste ding om te doen is de tekst. Neem het gereedschap Tekst (T) en schrijf wat tekst en gebruik het lettertype Devinne Swash dat je hier kunt vinden. Selecteer Uitvouwen in het menu Object om de tekst in vormen te veranderen en de zwarte vulling te behouden. Ga naar Effect-menu> Stileer en pas het effect Slagschaduw toe met de getoonde instellingen. Wijzig de overvloeimodus in Overlay.
Op dit moment is het label klaar en gaan we verder met de rollover-status.
Maak een kopie van het label en we zullen slechts een paar dingen veranderen. Sommige vormen zijn verborgen in de volgende afbeeldingen en we zullen er op het juiste moment over praten. Laten we ons richten op de etiketvorm en eerst de verloopvulling wijzigen. Wijzig ook de blauwtint die werd gebruikt voor de eerste streek.
Nu zullen we de schaduw aanpassen. Dubbelklik op Gaussiaans vervagen in het deelvenster Vormgeving om het venster Gaussiaans vervagen te openen en de straal van 6 tot 4 px te verkleinen. Dubbelklik vervolgens op het effect Infleren toegepast om het venster Verdraaiingsopties te openen en verander de waarde Bocht van 5 naar min 5%.
Selecteer de verloopvulling in het Vormgeving-paneel en druk onderaan op het pictogram Geselecteerd artikel dupliceren. Als gevolg hiervan krijg je hierboven een andere vulling. Blijf hetzelfde verloop volgen en ga naar Effect menu> Pad> Offset pad en pas een minus 6,5 px offset toe. Ga vervolgens naar Effect-menu> Stileer en pas het effect Inner Glow toe met behulp van de getoonde instellingen.
Laten we een nieuwe tekenpenseel maken dat lijkt op het teken dat is opgeslagen in stap 5. Gebruik het ellipstool (L) om een vlakke ellips van 100 x 3 px te tekenen en transformeer vervolgens de linker- en rechterpunten van vloeiende tot hoekpunten met de geselecteerde geselecteerde ankerpunten converteren hoek optie. Ga naar Object menu> Pad> Offset pad en pas een minus 1,2 px offset toe om de kleinere vorm in het midden te verkrijgen. Verlaag de dekking voor de grotere ellips naar 0% en selecteer ze vervolgens allebei en ga naar Object-menu> Blend> Mengopties. Kies 25 specifieke stappen en ga terug naar het menu Object> Overvloeien> Maken. Sleep de resulterende gemengde groep naar het deelvenster Penselen en selecteer Nieuw kunstpenseel.
Strijk nu over de drie paden met de nieuwe penseel Art. Stel het gewicht in op 0.25 pt en de mengmodus op zacht licht voor alle drie.
In dit geval willen we dat de glanzende vorm minder zichtbaar is, dus verminder de dekking van 70 tot 25%.
Wijzig de tint blauw die wordt gebruikt om de driehoek te vullen en dubbelklik vervolgens op het effect Slagschaduw toegepast in het deelvenster Vormgeving. Verlaag in het venster de dekking van 80 tot 50%. Het effect Inner Glow blijft hetzelfde.
Vervang voor de tekst de zwarte vulling door blauw en wijzig vervolgens de overvloeimodus van Overlay terug naar Normaal en verminder de dekking naar 80%.
Dit is de laatste rollover-status van het label:
Nu alles gereed is, gaan we verder met het opslaan van deze bestanden voor internet. Neem het gereedschap Rechthoek (M) en teken een rechthoek rond het label en ga vervolgens naar het menu Object> Bijsnijdengebied> Maken. U krijgt hetzelfde resultaat als u het gereedschap Snijgebied of het tekengebiedtool gebruikt (Shift + O).
Ga naar Bestand menu> Opslaan voor web en apparaten. Dit venster biedt vier manieren om het originele label te vergelijken met het label dat we gaan optimaliseren: origineel, geoptimaliseerd, 2-up en 4-up. Ik denk dat het beste de 4-up-weergave is omdat je met verschillende instellingen kunt spelen, vier versies van het label kunt testen en vervolgens de beste kunt kiezen op basis van de bestandsgrootte en de downloadtijd. Linksboven zijn de gereedschappen, rechtsboven kunt u een andere downloadsnelheid selecteren en in de rechterbenedenhoek heeft u de mogelijkheid om een voorbeeld van de afbeelding in de standaardbrowser te bekijken.
Laten we nu een paar instellingen wijzigen en vergelijken. Uit de zeven bestandsindelingen die beschikbaar zijn om te bewaren, zullen we alleen JPEG, PNG-8 en PNG-24 proberen. Het GIF-formaat is het meest geschikt voor afbeeldingen met platte kleurvlakken in plaats van voor gebieden met verloopvullingen en details zoals deze labels. Ik heb het geprobeerd en ze zagen er niet al te goed uit.
Het eerste formaat is JPEG. Hoewel hoe slechter de kwaliteit, hoe kleiner de bestandsgrootte, hoeft u de kwaliteit niet te veel te verlagen. Voor 60% kwaliteit is de bestandsgrootte 7,77K maar het label begint er niet zo goed uit te zien en voor maximale (100% kwaliteit) is de bestandsgrootte 26,11K (!!). 70% is prima. Als u de optie Geoptimaliseerd aanvinkt, is de bestandsgroottevermindering zeer gering, daarom zullen we deze keer overslaan. Schakel Progressive in als u wilt dat de afbeelding in passes wordt geladen.
Als u precies weet welke de achtergrondkleur zal zijn, kunt u een matte kleur kiezen. De achtergrond wordt gevuld met de geselecteerde kleur, in dit geval roze en de afbeelding werkt als een transparante GIF, maar gebruikt nog steeds de miljoenen kleuren die JPEG's in ons voordeel kunnen weergeven. De bestandsgrootte is echter iets groter.
Alleen voor nieuwsgierigheid probeerde ik het PNG-8-formaat en je kunt hieronder de verschillende instellingen zien. Als u Selectief kiest, kiest Illustrator kleuren die het oog kan zien, maar bevat meer kleurveilige tinten. De alternatieven zijn: Perceptueel (kleuren de ogen zien het beste) en Adaptief (kleuren die daadwerkelijk in de afbeelding staan). Laten we het over Dither hebben. Dit verdeelt pixels van verschillende kleuren naast elkaar om het oog te laten geloven dat het meer kleuren ziet die er daadwerkelijk in de afbeelding zijn. Het nadeel is dat het de bestandsgrootte verhoogt zoals je hieronder kunt zien, 0% dither versus 100% dither. Interlaced is het equivalent van Progressive uit het JPEG-formaat. Hoe dan ook, geen enkele afbeelding ziet er goed uit dus gaan we verder met de volgende indeling.
U krijgt een betere afbeelding als u een matte kleur selecteert, voor het geval u exact weet welke de achtergrondkleur van de webpagina zal zijn. Selecteer ook Geen transparantienadder.
Veruit het beste resultaat wordt verkregen met het PNG-24-formaat, hoewel de bestandsgrootte vrij groot is. Vanwege de schaduw rondom het label moet u de optie Transparantie controleren.
Op dit punt kunt u een voorbeeld van het label in een browser bekijken door op het pictogram te klikken dat wordt weergegeven in stap 24. U krijgt ook een HTML-code die u aan uw webpagina kunt toevoegen.
Als u een bepaald formaat hebt gekozen, drukt u op de knop Opslaan, selecteert u Alleen afbeeldingen en een doelmap en drukt u nogmaals op Opslaan.
Herhaal dit proces voor de rollover-status van het label. In de onderstaande afbeelding ziet u de drie versies die ik heb gekozen.
Dit is de map met de afbeeldingen die is opgeslagen en op dit punt kunt u ze gebruiken zoals u wilt.
Als een bonus hier zijn verschillende kleurvariaties van het label. Het enige dat u hoeft te doen, is een aantal dingen wijzigen, zoals: de verloopvulling voor de labelvorm, de gestreepte lijnkleur, het verloop voor de glanzende vorm en de vulkleur voor de driehoek. Dat is het!
Dit is het groene label:
Dit is het paarse label:
de oranje versie ...
rood…
en geel:
Accentsconagua