Share
In de volgende tutorial leer je hoe je een gestileerde navigatiebalk kunt maken. U leert hoe u het Vormgeving-paneel gebruikt om een navigatiebalk te stylen en hoe u de Slice-tool gebruikt om de afbeeldingen te knippen en te exporteren zodat ze als onderdeel van een website kunnen worden gebruikt. Laten we beginnen!
Druk op Command + N om een nieuw document te maken. Voer 1025 in het vak Breedte in en 53 in het vak Hoogte en klik vervolgens op de knop Geavanceerd. Selecteer RGB, Scherm (72ppi) en zorg ervoor dat het vakje "Align New Objects to Pixel Grid" is uitgeschakeld voordat je op OK klikt. Schakel de Grid in (View> Show Grid) en de Snap to Grid (View> Snap to Grid).
Vervolgens heb je om de 5px een raster nodig. Ga naar Bewerken> Voorkeuren> Gidsen & raster, voer 5 in het vak Raster in elk vak in en 1 in het vak Onderverdelingen. U kunt ook het infopaneel (Venster> Info) openen voor een livevoorbeeld met de grootte en positie van uw vormen. Vergeet niet om de maateenheid te vervangen door pixels in Bewerken> Voorkeuren> Eenheid> Algemeen. Al deze opties zullen uw werksnelheid aanzienlijk verhogen.
Kies het gereedschap Rechthoek (M), maak een 1025 bij 50 px vorm, vul het met de hieronder getoonde lineaire verloop en ga naar Effect> Stileer> Afgeronde hoeken. Voer een straal van 3 px in, klik op OK en ga naar Object> Uiterlijk uitbreiden.
Voor de volgende stap heb je om de 1px een raster nodig. Ga dus naar Bewerken> Voorkeuren> Gidsen & raster en voer 1 in het vak Raster elke in. Focus op de linkerkant van de vorm die in de vorige stap is gemaakt. Kies het gereedschap Pen (P), teken een verticaal pad van 50px en plaats het zoals in de volgende afbeelding. Voeg een 1pt, zwarte lijn toe voor dit pad om het gemakkelijker te maken.
Herschrijf het verticale pad dat in de vorige stap is gemaakt en sleep het 128 px naar rechts. U kunt dit handmatig doen of door naar Object> Transformeren> Verplaatsopties te gaan. Voer eenvoudig 128 in het vak Horizontaal in en druk op Enter.
Selecteer dat verticale pad opnieuw en ga naar Effect> Vervormen en transformeren> Transformeren. Voer de gegevens in die in de volgende afbeelding worden weergegeven, klik op OK en ga naar Object> Uiterlijk uitvouwen.
Selecteer de groep verticale paden die in de vorige stap zijn gemaakt, samen met de afgeronde rechthoek die in de tweede stap is gemaakt, open het deelvenster Pathfinder en klik op de knop Splitsen. Ga naar het deelvenster Lagen, selecteer de resulterende groep en demonteer deze (Shift + Control + G). Blijf scherpstellen op het deelvenster Lagen en geef uw vormen een naam van "1" tot "8" (begin met de linker vorm).
Schakel het magnetisch uitlijnen (klik op raster) uit (View> Snap to Grid) en ga naar Bewerken> Voorkeuren> Algemeen en zorg dat de toetsenbordvergroting op 1px staat. Selecteer vorm "1" en maak twee kopieën vooraan (Control + C> Control + F> Control + F). Selecteer de bovenste kopie en verplaats deze 1 px naar links met de linkerpijl van je toetsenbord. Selecteer beide exemplaren opnieuw en klik op de knop Minus voorzijde in het deelvenster Pathfinder. Breng de resulterende vorm naar voren (Shift + Control + Rechter vierkante haak), vul deze met zwart en verander de overvloeimodus in Overlay.
Selecteer vorm "1" en maak twee nieuwe kopieën vooraan (Control + C> Control + F> Control + F). Stel scherp op het deelvenster Lagen, selecteer de onderste kopie en verplaats deze 1px naar rechts met de rechterpijl van je toetsenbord. Selecteer beide exemplaren opnieuw en klik op de knop Minus voorzijde in het deelvenster Pathfinder. Breng de resulterende vorm naar voren (Shift + Control + Rechter vierkante haak), vul deze met wit en verander de overvloeimodus in Overlay.
Selecteer de twee vormen opnieuw die in de laatste twee stappen zijn gemaakt en groepeer ze (Control + G). Maak een kopie van deze groep (Control + C> Control + F), selecteer deze en klik op de knop Unite in het deelvenster Pathfinder. Vul de resulterende vorm met de lineaire gradiënt weergegeven in de tweede afbeelding.
Open het paneel Transparantie. Selecteer de vorm en de groep opnieuw die u in de vorige stap hebt gemaakt, open het uitvouwmenu van het deelvenster Transparantie en klik op Dekkingsmasker maken. Op het einde zou je gemaskerde groep eruit moeten zien in de tweede afbeelding.
Selecteer de gemaskeerde groep opnieuw die in de vorige stap is gemaakt en ga naar Object> Transformeren> Verplaatsen. Typ 128 in het vak Horizontaal en klik op de knop Kopiëren. Uiteraard zal dit een kopie van je groep 128px aan de rechterkant toevoegen. Selecteer deze kopie en herhaal de opdracht Verplaatsen. Blijf deze techniek herhalen tot je zeven gemaskerde groepen hebt.
Schakel de magnetisch uitlijnen in (Weergave> magnetisch uitlijnen). Kies het gereedschap Rechthoek (M), maak een vierkant van vier, 3px en plaats ze zoals getoond in de volgende afbeelding. Vul ze ook met zwart en wit, zoals hieronder wordt weergegeven. Selecteer alle vier vormen en sleep ze eenvoudigweg naar het deelvenster Stalen om ze in een patroon te veranderen. Zodra u uw patroon hebt, kunt u de vier vierkanten verwijderen uit het deelvenster Lagen.
Schakel het raster uit (Weergave> raster tonen) en het magnetisch raster (aanzicht> magnetisch raster). Keer terug naar vorm "1". Selecteer het, focus op het paneel Uiterlijk en voeg een tweede vulling toe met de knop Nieuwe vulling toevoegen. Selecteer het, stel de kleur in op R = 28 G = 117 B = 188 en verander de overvloeimodus in Color Burn.
Selecteer vorm "1" opnieuw, focus op het deelvenster Vormgeving en voeg een derde vulling toe. Selecteer het, verminder de dekking tot 15%, verander de mengmodus in Zacht licht en voeg het patroon in de twaalfde stap toe.
Selecteer vorm "1" opnieuw, richt u op het deelvenster Uiterlijk, zorg dat er geen vulling of streek is geselecteerd en ga naar Effect> Stileren> Slagschaduw. Voer de gegevens in die in het bovenste venster worden getoond, klik op OK en ga opnieuw naar Effect> Stileren> Slagschaduw. Voer de gegevens in die in het middelste venster worden weergegeven, klik op OK en ga nogmaals naar Effect> Stileren> Slagschaduw. Voer de gegevens in die in het onderste venster worden getoond en klik op OK.
Nu moet u de eigenschappen die voor vorm "1" zijn gebruikt kopiëren en op de rest van de vormen plakken. Hier is hoe je het gemakkelijk kunt doen. Ga naar het deelvenster Lagen, focus op de rechterkant en je zult zien dat elke vorm wordt geleverd met een kleine grijze cirkel. Het wordt een doelpictogram genoemd. Houd Alt ingedrukt, klik op het doelpictogram dat staat voor vorm "1" en sleep naar de cirkel die staat voor vorm "2". Gebruik deze techniek om dezelfde eigenschappen toe te voegen voor de andere zes vormen.
Selecteer vorm "2", focus op het deelvenster Uiterlijk en voeg een vierde vulling toe. Selecteer het, maak het wit, verminder de dekking tot 50% en verander de mengmodus in Zacht licht. Dit is de hover-modus voor uw navigatiebalk.
Pak het tekstgereedschap (T) en uw tekst zoals weergegeven in de volgende afbeelding. Gebruik het Calibri-lettertype met een grootte van 15pt, zet de stijl vetgedrukt en de kleur op R = 0 G = 86 B = 140. Zorg ervoor dat al je tekst is geselecteerd en ga naar Effect> Stileren> Slagschaduw. Voer de onderstaande gegevens in en klik op OK.
Laten we dit menu nu opdelen. Stel scherp op de gemaskeerde linker groep en selecteer het segmentgereedschap (Shift + K). Teken eerst een plak van 6 bij 53px langs vorm "1" zoals in de volgende afbeelding wordt getoond. Ga verder met het segmentgereedschap (Shift + K) en teken een tweede 6 bij 53px-plak langs vorm "2", zoals hieronder weergegeven.
Nu je je eerste plakjes hebt, ga je naar Bestanden> Opslaan voor web en apparaten (Alt + Control + Shift + S). Selecteer het Slice Select Tool (K) en dubbelklik links, 6 bij 53px slice. Voer nav in het naamvak in en druk op OK.
Stel scherp op de tweede 6 bij 53px slice. Dubbelklik erop, voer "nav.hoover" in het gedeelte Naam in en druk op OK. Selecteer PNG-24 in het vervolgkeuzemenu Voorinstelling en klik op Opslaan. Kies een locatie voor de afbeeldingen die u wilt opslaan en klik op Opslaan. Ga naar die locatie en je zult een nieuwe map vinden met een heleboel nieuwe afbeeldingen. Sleep "nav.png" en "nav.hoover.png" buiten de map en verwijder vervolgens de map.
Keer terug naar je Ai-bestand, selecteer het gereedschap Segment (Shift + K) en teken een plak van 2 bij 53 px langs die gemaskeerde groep links. Ga naar het deelvenster Lagen en schakel de zichtbaarheid voor alle vormen uit, behalve de linker gemaskeerde groep.
Ga opnieuw naar Bestanden> Opslaan voor web en apparaten (Alt + Control + Shift + S). Pak het gereedschap Slice Select (K) en dubbelklik op het nieuwe segment dat in de vorige stap is gemaakt. Noem het "verdeler" en klik op OK. Zorg ervoor dat PNG-24 nog steeds is geselecteerd in het vooraf ingestelde vervolgkeuzemenu en klik op Opslaan. Kies opnieuw een locatie voor de afbeeldingen die u wilt opslaan en klik op OK. Ga naar die locatie, open de nieuwe map, sleep "divider.png" buiten de map en verwijder vervolgens je map. Uiteindelijk zou je drie simpele afbeeldingen moeten hebben: "nav", "nav.hoover" en "divider.png".
Ten slotte kunt u eenvoudig de kleuren wijzigen die voor uw navigatiebalk worden gebruikt. Vervang gewoon de kleur die wordt gebruikt voor de tekst en de tweede opvulling met enkele van de kleuren die in de volgende afbeeldingen worden getoond.
Nu is je werk af, zo moet het eruit zien.
Accentsconagua