Share
Peper en zout, pen en papier, koekjes en melk, hoewel ze allemaal goed zijn, werken deze dingen samen om het beste in elkaar naar boven te brengen. Adobe Illustrator en Adobe Photoshop vormen hierop geen uitzondering. Vandaag laat ik je zien hoe je Illustrator kunt gebruiken om een afspeelknop te ontwerpen en hoe je je vectoren kunt verbeteren met behulp van Photoshop. Deze techniek is vooral handig voor mensen die pictogrammen en UI-ontwerpen willen maken. Laten we beginnen!
Begin met het maken van een nieuw document in illustrator (ik heb het 800 x 800 px gemaakt). Selecteer het "Afgeronde rechthoekgereedschap" (met de hoekradius van 100 px) en maak een vorm die op een afgeronde knop lijkt. Selecteer vervolgens het gereedschap "Rechthoek", maak een rechthoek en centreer deze in de afgeronde rechthoek. Dit is voor de afspeelknop.
Werk aan de tweede rechthoek (de rechthoek "spelen"). Ga naar Effect> Distort & Transform> Pucker & Bloat om de rechthoek gebogen te maken. Vul het vakje in het venster in (ik heb 6% gebruikt) en druk op OK, ga daarna naar Object> Uiterlijk uitvouwen.
Om het "play" -pictogram te maken, selecteert u de "Star Tool", opent u het Star Tool-dialoogvenster en voert u de volgende instellingen in.
Maak nu de pictogrammen "volgende" en "vorige". Kopieer eerst het afspeelpictogram op Option + Click + Drag (waar u maar wilt) en doe hetzelfde, maar sleep het nu naar rechts (u kunt de Shift-toets ingedrukt houden om het object in een rechte lijn te verplaatsen). Selecteer de twee driehoeken, klik op de knop "Toevoegen aan vormgebied" en klik vervolgens op "Uitbreiden", formaat wijzigen en verplaatsen.
Maak het pictogram "Vorige" door naar Object> Transformeren> Reflecteren> Verticaal te gaan en op "Kopiëren" te klikken. Verplaats hem op zijn plaats en je hebt net een aantal speler-knoppen gemaakt.
Voeg de kleuren toe aan de knoppen. De knop "Spelen" heeft een vulling van # 506670 op een slag # 2C515E. De knoppen "Volgende" en "Vorige" hebben een vulling van # 85D4D6 en een streek van # 27A0A0.
Om de onderste schaduw te maken, moet je de knop dupliceren en vervolgens met de "Afgeronde rechthoek-tool" (met dezelfde instellingen) dezelfde vorm maken, maar een beetje groter. Selecteer deze rechthoek en degene die u hebt gedupliceerd en klik op "Aftrekken van vormgebied" en "Uitbreiden". Maak het zwart en geef het 20% dekking en zet de overvloeimodus op Overlay.
Gebruik de onderste schaduw om de bovenste glans te creëren. Selecteer de onderste schaduw, ga naar Transformeren> Reflecteren. Klik na het maken van de instellingen op "Kopiëren". Plaats het op zijn plaats, herschik de ankerpunten zodat het dunner wordt en maak het wit (laat de dekking en de overvloeimodi over zoals ze zijn).
Gebruik dezelfde techniek op de afspeelknop.
Na het voltooien van de vorm van de speler exporteer je hem als een .PSD om wat details in photoshop toe te voegen.
Maak een nieuw bestand in Photoshop (ik heb 800 x 800 px gebruikt) en breng het bestand dat je uit Illustrator (mini-speler) hebt geëxporteerd, binnen. Selecteer de "big button" -laag, open het "Layer Styles" -venster, dubbelklik op de rechterkant van de laag en begin met het toevoegen van de volgende stijlen zoals ik deed. (u kunt de afbeeldingen volgen).
Verberg alle lagen behalve de "grote knop" laag, "onderste schaduw" laag en de "bovenste glans" laag. Selecteer de laag "onderste schaduw", ga naar Filter> Vervagen> Gaussiaans vervagen, geef het een straal van 4 px en klik vervolgens op OK. Doe hetzelfde met de "top shine" -laag.
Maak vervolgens een nieuwe laag, Command + klik op de duim van de "grote knop" laag, om een selectie van die vorm te maken, en knip vervolgens met de "Polygonal Lasso Tool" de bovenste helft van de selectie uit. Vul het op met een kleur (maakt niet uit welke kleur het is, we geven het 0% vulling) en voeg een laagstijl met een verloopoverlay toe.
Maak de "Play Button" zichtbaar (inclusief de onderste schaduw en de bovenste glans). Selecteer de laag "Afspeelknop" en voeg de stijlen met twee lagen toe (Gradient Overlay en Inner Glow). Selecteer de laag "onderste schaduw" en ga naar Filter> Vervagen> Gaussiaans vervagen, geef het een straal van 5 px en klik op OK. Herhaal deze actie in de laag "top shine".
Maak een nieuwe laag, maak een rechthoekige selectie en maak met de "Gradient Tool" (G) een verloop. Bedien + D om de selectie ongedaan te maken. Zet de overvloeimodus op "Overlay" en 20% op de dekking.
Maak een nieuwe laag onder de laag met afspeelknoppen en maak een selectie voor de schaduw van de knop. Vul het met zwart en ga naar Filter> Vervagen> Gaussiaans vervagen en geef het een straal van 1,5 px. Zet de overvloeimodus op "Color Burn" en 40% op de dekking.
Selecteer het "Eraser Tool" (E), stel de diameter in op 125 px en de hardheid op 25% en veeg horizontaal over het midden van de schaduwlaag.
Selecteer de "volgende en vorige" pictogrammenlaag en vul deze met deze kleur; # 0096A4. Open daarna het venster "Laagstijlen" en begin met het toevoegen van dezelfde stijlen als ik.
Doe hetzelfde met de laag "afspeelpictogram". Maar gebruik deze kleur nu als achtergrondkleur: # FFDB94
Gebruik de "Lijntool" om een geweldig glanseffect te creëren. Plaats de lijn onder de laag "Afspeelknop" en maak een horizontale lijn (1 px) aan de onderkant van de laag met de "grote knop". Maak de vormvulling 0% en voeg een "verloopoverlay" toe.
Maak een nieuwe laag achter de laag "Afspeelknop". Bediening + klik op de duim van de "grote knop" laag om een selectie van die vorm te maken, en doe dan een eenvoudig zwart verloop aan de linkerkant. Stel "Overlay" in als overvloeimodus en 60% dekking. dupliceer de laag, draai hem horizontaal om en beweeg hem naar rechts.
Gebruik de "Ellips-tool" om een ovaal aan de linkerkant van de "grote knop" te maken. Herschik het zodat het op de onderstaande afbeelding lijkt (moet worden geplaatst aan de linkerbovenzijde van de "grote knop"). Maak de vulling 0% en voeg een "Gradient Overlay" -stijl toe.
Dupliceer de laag en plaats deze op de rechteronderkant van de "grote knop" en voeg de tweede "Gradient Overlay" -stijl toe.
Maak een nieuwe laag boven de laag "Afspeelknop". Besturing + klik op de duim van de laag "Afspeelknop" om een selectie van die vorm te maken en ga vervolgens naar Selecteren> Wijzigen> Inkrimpen en inkrimpen met 3 px. Neem na dit alles de "Gradient Tool" en maak een kleine diagonale hellingshoek in de linkerbovenhoek. Zet de overvloeimodus voor lagen op "Overlay" en de dekking op 40%.
Maak een nieuwe laag boven degene die je zojuist hebt gemaakt. Maak een selectie aan de linkerkant van de "Play-knop" (zoals op de afbeelding). Vul het op met welke kleur je wilt, want we stellen de vulling in op 0%. Voeg de "Gradient Overlay" -stijl toe en het glanseffect is voltooid. Dupliceer deze laag, draai hem horizontaal om en verplaats hem naar de rechterkant.
Selecteer de helft van de "Afspeelknop" en op een nieuwe laag, gebruik de "Verloopgereedschap" (G), maak een verloop (met zwart als kleur). Stel daarna de overvloeimodus in op "Color Burn" en de dekking op 10%. Gebruik dezelfde techniek op het "afspeelpictogram" (het enige dat verandert is de plaatsing van de lagen - boven de laag "afspeelpictogram" - en de dekking van de laag - 20%).
Het maken van de "Play Button" -textuur is heel eenvoudig. Na het maken van een nieuwe laag boven de laag "Afspeelknop" Besturing (Commando op de Mac) + klik op de duim van de laag "Afspeelknop", vul deze met zwart, ga naar Filter> Ruis> Ruis toevoegen, voer de opgegeven instellingen in en druk op "OK".
Ga met de selectie nog steeds naar Filter> Blur> Motion Blur en gebruik de aangegeven instellingen. Maak de selectie ongedaan en stel de overvloeimodus in op Overlay en de dekking op 45%.
Voeg een klein detail toe aan het "afspeelpictogram". Op een nieuwe laag maak je, met de "Elliptical Marquee Tool" (M), cirkels van willekeurige grootte in het "afspeelpictogram". Maak ze zwart, maak de selectie ongedaan en ga naar Filter> Blur> Gaussian Blur, zet na het toevoegen van je instellingen de overvloeimodus op "Color Burn" en de dekking op 15% en je bent klaar.
Maak nog een laag en doe precies hetzelfde. Het enige dat je kunt veranderen, is de kleur van de willekeurige cirkels (ik heb de cirkels wit gemaakt).
Begin met het maken van de achtergrond. Selecteer de achtergrondlaag en vul deze met # 363D41 en voeg een "Gradient Overlay" -stijl toe. Gebruik het "Elliptical Marquee Tool" (M) om een ovaal op een nieuwe laag te maken en deze met wit te vullen. Ga daarna naar Filter> Vervagen> Gaussiaans vervagen, voer je instellingen in en druk op ok. Wijzig de overvloeimodus in "Overlay" en geef deze een dekking van 65%.
Begin met het creëren van de schaduw voor de minispeler. Maak een nieuwe laag, gebruik de "Elliptical Marquee Tool" (M) om een ovaal onder de speler te maken en vul deze met zwart. Ga naar Filter> Blur> Gaussian Blur en voer de nodige instellingen uit. Selecteer het "Eraser Tool" (E) en maak deze instellingen: Diameter - 150 px; Hardheid - 0%; Dekking - 10%, gebruik het dan om een klein deel van de schaduwzijden te wissen. Zet de overvloeimodus op "Color Burn" en zet de dekking op 60%.
Maak een volledige selectie van knoppen. Doe dat via Command + klik op de "grote knop" -laag en druk vervolgens op Command + Shift + klik op de "Play-knop". Maak met de actieve selectie een nieuwe laag en vul deze met zwart. Ga omhoog en ga naar Filter> Blur> Gaussian Blur en maak de instellingen zoals in de afbeelding. Gebruik de "Vrije transformatie" (Control + T) om de schaduw in de schaduw te vervormen. Gebruik het "Eraser Tool" (E) met de volgende instellingen: Diameter - 150 px; Hardheid - 0%; Dekking - 10%, om de schaduw aan de zijkanten te wissen. Pas de dekking aan tot 50%.
Het Mini Player-pictogram is nu gereed. Veel van deze technieken kunnen worden gerecreëerd om 100% vector te zijn, dit is gewoon een andere manier om dingen te doen die gebruikmaken van de mogelijkheden van Photoshop. Nogmaals, dit is een bijzonder nuttige zelfstudie voor mensen die elementen willen maken voor gebruik in web- en UI-ontwerpen, omdat ze Photoshop al vaak gebruiken.
Ik hoop dat je deze tutorial leuk vond en dat het nuttig was.
Accentsconagua