Share
In deze Snelle tip leert u hoe u een schaalbare webknop kunt maken met het Uiterlijkvenster en 9 Slice Scaling van Adobe Illustrator. Deze techniek is vooral handig voor webontwerpers die dezelfde stijinknop met verschillende lengtes tekst moeten gebruiken. Laten we beginnen!
Deze zelfstudie laat u zien hoe u een schaalbare vectorknop maakt met behulp van 9-Slice schalen in Adobe Illustrator CS5. In het onderstaande voorbeeld ziet u hoe de knop schalen met en zonder 9-Slice schalen, u zult merken dat de normale schaal alles binnen de knopafbeelding verplaatst. Met 9-Slice kunt u opgeven hoe de afbeelding wordt geschaald om herbruikbare webelementen te maken.
Maak een nieuw RGB-document van elke grootte. Optie + klik op het tekengebied met het gereedschap Rechthoek (M) en voer de knopdimensies in. Omdat de knop horizontaal schaalbaar is, is de breedte niet belangrijk. Ik heb mijn rechthoek ingesteld op 200 px bij 60 px.
Open het Appearance-paneel en selecteer Fx> Stileer> Ronde hoeken, stel de hoekradius in op 8 px, klik op OK.
Voeg een verloopvulling toe aan de knop met de volgende kleuren. Als u uw eigen wilt kiezen, volg dan de onderstaande gids voor een indicatie van de positie en schaduw van de kleuren. Je zult zien dat kleur 2 en 3 heel dichtbij zijn, dit is de sleutel tot het superglanzende uiterlijk van het verloop.
Als je knop een lijn heeft, verwijder deze dan. Voeg nog een vulling toe aan het Uiterlijkpaneel en plaats deze onder de verlooplaag. Ga met de Uiterlijkinstellingen naar Fx> Pad> Offsetpad en stel de offset in op 1px.
Vul de tweede opvullaag met een verloop in de volgende kleuren. Nogmaals, je kunt de kleuren naar eigen keuze maken, maar onthoud dat je de lichtschakeringen dicht bij de bovenkant en de donkere aan de onderkant houdt.
Voeg een Slagschaduw toe onder de twee vullingen in het Vormgevingspaneel door naar Fx> Stileren> Slagschaduw te gaan en de dekking in te stellen op 60%, de X-verschuiving op 0px en de Y-verschuiving op 2px. Maak de Blur 3px
Zoom in op de knop, zodat u de lijnen kunt zien die u in deze stap moet maken. Onderdeel een deel van de rechterkant van de knop en teken twee 1 px lijnen naast elkaar. Maak de eerste dezelfde kleur als de bovenkant van de verloopcontour en de tweede regel dezelfde kleur als de onderkant van de omtrekverloop. Ik heb de kleurnummers geschreven in de volgende afbeelding ter referentie.
Dit deel is voor Adobe Illustrator CS5 - Selecteer de knop en de lijnen en sleep deze naar het symbolenpalet. Klik op 9-segmentschaling inschakelen (hiermee worden de horizontale schaalverhoudingen ingeschakeld) en Align to Pixel Grid (dit zorgt ervoor dat de knop niet wazig maakt op websites). Deze twee instellingen maken de knop perfect voor gebruik op het web.
Wanneer u het symbool maakt, ziet u een scherm zoals de onderstaande afbeelding. Verplaats de stippellijnen om de gebieden te markeren die niet moeten worden geschaald. Ik heb de stippellijnen naast het gebied geplaatst waar ik een symbool wil plaatsen. Dit zorgt ervoor dat het niet verandert als ik de lengte van de knop wijzig. Dubbelklik op het gebied met het tekengebied om terug te gaan naar de hoofdafbeelding.
Schaal de knoppen om de gebieden te testen die u hebt gemarkeerd. Als u wijzigingen wilt aanbrengen, dubbelklikt u op het symbool om terug te gaan naar de instellingen.
Voeg wat tekst en symbolen toe aan de knoppen en kies er een om het uiterlijk toe te passen. U kunt het uiterlijk vervolgens toepassen op de rest van de items wanneer u klaar bent met de instellingen. Begin met een verloopvulling. Dit is een eenvoudig donker tot licht verloop. Ik heb de kleuren opgeschreven die ik in de onderstaande afbeelding heb gebruikt.
Voeg een witte vulling toe onder de verlooplaag in het deelvenster Vormgeving en stel deze in op 2px verticaal verplaatsen. Klik OK.
Voeg een Outer Glow toe door naar Fx> Stylize> Outer Glow te gaan. Stel het in op een heldere toon van de kleuren op de knop en de vervaging op 1px. Dit voegt een subtiel wazig effect toe aan het laageffect en laat de knop eruitzien alsof hij licht gloeit.
Voeg een lijn toe bovenaan de Uiterlijkinstellingen in een donkere, onverzadigde toon van de knopkleur. Stel de lijn in op 0,5 px.
Test de stijl op verschillende symbolen en knoppen, sla de twee stijlen op in het palet Grafische stijlen. door het object met de stijl te selecteren en op de knop Stijl toevoegen onder aan de grafische stijlen te klikken.
Daar heb je het. Een schaalbare webknop die gemakkelijk te gebruiken en opnieuw te gebruiken is. Als u de afgeronde hoeken wilt wijzigen, kunt u terugklikken naar het symbool en het uiterlijk wijzigen door de afgeronde hoeken naar onzichtbaar te schakelen. Als u een nieuwe knop wilt maken, sleept u het knopsymbool uit het symbolenpalet. op het tekengebied en klik op Control om naar de opties te navigeren om de koppeling met het symbool te verbreken. Van daar verandert de knop de andere symbolen niet en kunt u deze als een nieuwe stijl bewerken. Ik hoop dat je deze tut leuk vond.
Accentsconagua