Share
Een van de beste manieren om te leren hoe je geweldige interfaces kunt maken om te oefenen door elektronische apparaten te maken in Photoshop. Tegenwoordig heeft zo ongeveer iedereen een soort MP3-apparaat om muziek af te spelen. In deze tutorial zullen we laten zien hoe je een slanke, stijlvolle en eenvoudige MP3-interface in Photoshop kunt creëren om audiobestanden voor je Flash-projecten af te spelen.
De eerste stap is om een achtergrond te creëren waarin we een donkere radiale gradiënt kunnen toepassen. Verf de laag in elke kleur en voeg een laagstijl toe met het hieronder getoonde verloop.
Met het gereedschap Afgeronde rechthoek (stel een straal van 20 pixels in) maakt u het hoofdelement van het apparaat met behulp van een vormlaag (door op de eerste optie in het bovenste menu te klikken).
Dubbelklik op de vector van deze laag, de kleureneditor wordt geopend. We zullen een lichtgrijze kleur # E1E0E0 selecteren waarmee we wat glans aan het oppervlak kunnen toevoegen. Telkens wanneer u witte objecten wilt maken, moet u een beetje grijze kleur toevoegen, zodat u ze kunt verlichten of wat glans toevoegen om deze bronnen vrij zichtbaar te maken.
Nu gaan we een afschuining rond het apparaat maken. Om dit te doen, zullen we enkele referentiehandleidingen moeten maken met behulp van de linialen van Photoshop. Klik op de convergentiehoek van beide linialen. Door de muis te slepen, kunt u de stippellijnen visualiseren die precies bepalen waar de cursor zich bevindt. Dit zal ons toelaten om een equidistante afschuining rond de omtrek van het apparaat te creëren.
Nu we een nieuwe vormlaag voor de afschuining hebben, moeten we de dekking van deze laag naar nul brengen, omdat we alleen een afschuining van 2 pixels op het oppervlak willen zien.
Breng een slag van 1 pixel aan in de binnenste positie met een donkerdere kleur dan de voorkant van het apparaat. In deze stap maken we een lijn die de gezamenlijke opening tussen het lichaam en de voorkant van de speler weergeeft.
Breng een innerlijke gloed aan met een lijn van 2 pixels met behulp van de onderstaande waarden.
Voeg een zachte verloop toe om het idee van convexiteit aan de voorzijde van het apparaat te geven.
Nu zorgen we voor de rand van de speler. Voeg hiervoor een regel toe die als een extrusie zal werken om de illusie van een 3D-object te geven. Voeg een grijze streep van 2 pixels toe aan de buitenkant.
Gebruikmakend van de Bevel & Emboss-stijl voegen we licht toe aan het bovenste gedeelte van deze lijn. Nu lijkt het object een extrusie naar achteren te hebben die licht van boven ontvangt en donkerder wordt aan de basis.
Voeg een zachte, kleine binnenschaduw toe aan deze laag om nog meer de voorkant van de speler te markeren.
Door de afkantingslaag van de voorzijde te dupliceren en te bewerken, genereren we meer afschuiningen die de verschillende bedieningsknoppen van het apparaat vertegenwoordigen.
Bewerk nu de vormlaag om de belangrijkste afspeel- / pauzeknop van onze speler te maken. Laten we de eerste afschuining dupliceren en de randen naar binnen halen om een rond object te maken. Breid het dan 10% uit, want we hebben alleen de horizontale afschuiningen nodig.
Breng een zacht masker met 3 pixels aan op de vorm die we in stap 13 hebben gemaakt, zoals hieronder wordt weergegeven.
Als u wilt dat het masker het object en de bijbehorende laagstijl verbergt, klikt u op de optie "Laagmasker verbergt effecten" in het venster met stijlen. Als we deze optie niet kiezen, verbergt het masker het object alleen maar toont het het effect buiten het masker en we willen dat verborgen houden.
Ditzelfde masker zal ook nuttig zijn voor de andere afschuiningen; we kunnen het van de laag nemen die we eerder gemaskeerd hebben. Door met de rechtermuisknop op het maskerpictogram in de laag te klikken, kiezen we voor "Laagmasker aftrekken van selectie". Hiermee wordt een identieke selectie naar de vorige gemaakt.
Met deze selectie herhalen we de conversiestap van de maskerselectie.
We hebben al de scheidingsschuine kanten van onze belangrijkste knopenset. Nu moeten we een vormlaag maken voor het display van de speler: een zwart acrylscherm waarop de naam van het nummer en de tijd worden getoond.
Eerst gebruiken we de slagschaduw om een onderste afschuining te maken waar het licht dat van boven komt, raakt. Gebruik de waarden op de afbeelding om de stijl te configureren om deze scherp en duidelijk en niet donker en wazig te maken.
Nu moeten we een radiaal verloop maken. Neem zowel zwarte als witte kleuren zo dicht mogelijk bij het midden van elkaar zodat er niet zoveel zachtheid tussen beide kleuren is. Locatie van zwart 49%, locatie van wit 50%.
Ontgrendel de optie Uitlijnen met laag. Als we dit niet doen, is het verloop alleen van het midden van het object naar de randen en we willen dat dit verloop veel groter en breder is.
Na het produceren van je glanzende effect, maak je deze stijl af met een paar schuine randen die lijken op degene die we hebben gemaakt voor de knopstap. Gebruik een zwarte pixelbeweging van 1 pixel met de lijn op de lijn aan de binnenkant. Gebruik een innerlijke gloed van 2 px met de overvloeimodus ingesteld op scherm.
We zijn nu klaar met de voorkant van onze MP3-speler. Nu moeten we enkele pictogrammen toevoegen aan de knoppen en tekst in het display.
Laten we nu de tekst-scroller op ons scherm simuleren. Met behulp van een korrelig lettertype moeten we de naam van de interpreter en de naam van het nummer die wordt afgespeeld toevoegen. U kunt dit gratis lettertype gebruiken. Vergeet niet om de aliasing in het Character-venster in het bovenste menu van de teksttool te verwijderen om de tekst er scherp uit te laten zien.
Met een ander bitmaplettertype maken we de chronometer die de verstreken tijd aangeeft. Dit lettertype is ook gratis en je kunt het hier downloaden.
Gebruik nu een lettertype met de gebruikelijke pictogrammen en symbolen van een audio- of videospeler. Je kunt deze gebruiken. Zodra het is geïnstalleerd, gebruikt u het om de verschillende knoppen van de speler te maken, in dit geval de Play / Pause-bediening (u moet twee toestanden voor de knop maken wanneer u deze speler ontwikkelt, omdat de knop Afspelen de knop Pauze wordt wanneer het wordt ingedrukt en omgekeerd).
Voor dit symbool gebruiken we dezelfde kleur als degene die we hebben gekozen voor het vooroppervlak van het object. Met de kleurselectietool kunnen we de tekst schilderen.
Nu kunnen we verschillende stijlen toevoegen die ervoor zorgen dat dit symbool op bas-reliëf lijkt. Gebruik de overeenkomstige waarden hieronder voor de binnenschaduw.
Verlicht de onderste afschuining met deze waarden.
Gebruik een zachte en kleine breedte verloop naar het oppervlak van de depressie, dus het is niet zo saai.
Laten we de volumeregeling maken. Teken een kleine knopknop met een gepolijste metalen afwerking. Begin met een laag met ronde vormen.
Gebruik een slagschaduw om de illusie van een grote extrusie te creëren.
Met een verloop in de hoekmodus en verschillende grijze en witte strepen kunnen we de cirkelvormige glans van dit soort knoppen simuleren. Zorg ervoor dat de oorspronkelijke grijze kleur aan de linkerkant gelijk is aan de uiteindelijke grijze kleur aan de rechterkant.
Voeg ten slotte een streek toe met een verloopvulling. Hiermee wordt de afschuining aan de buitenrand toegevoegd. Volg de waarden op de afbeelding zorgvuldig.
We hebben nu onze volumebesturingsknop voltooid, maar we willen ook een knop voor dempen toevoegen. U kunt dit doen met behulp van laagstijlen.
Schilder de schaduw van de speler in een nieuwe laag met behulp van een 2-pixels verzachte ronde selectie (zie bovenste waardemenu van de tool).
Verberg de selectie met Ctrl + H en gebruik een borstel met 100 pixels met 10% verfstroom, schilder de schaduw zachtjes. Hierdoor wordt het intenser in het midden van het object.
Laten we nu een kleine gloed toevoegen aan de schermrand van de speler. Verf eerst een intens helder gebied in het midden van een rechthoekige selectie die 1 pixel hoog is. En dan, met hetzelfde penseel, maar zonder enige selectie, klik je verschillende keren om de intensiteit van het midden te verhogen.
Maak een rollover-effect op de hoofdknop om het voorvlak te laten knappen wanneer de muis overgaat. We beginnen met het creëren van een cirkelvorm achter het Pauze-pictogram.
Dit depressie-effect kan worden uitgevoerd met: slagschaduw om de randen van het object donkerder en zachter te maken, en een verloop om te simuleren dat deze verdieping een bovenste gebied heeft dat in tinten is, terwijl de knop werd ingedrukt.
We verbergen deze rollover ook met een masker zoals we deden met de schuine kanten van de belangrijkste knopenset. Denk aan de mogelijkheid om laageffecten tegelijk te verbergen.
Bij het herhalen van de vorige stappen maskeren we de rollover.
We voegen twee lichteffecten toe om de rollover te verbeteren. Door te schilderen met 2 kleuren (# 00CCFF voor de rand van het effect en wit voor het midden) creëren we een verlichte rand die we zullen maskeren. Dupliceer de laag en reflecteer deze verticaal zodat het lijkt alsof het boven en onder oplicht wanneer de muis overgaat. Deze laag moet worden ingesteld op "Scherm" om de gloeiingen beter te integreren.
Laten we tot slot een dunne draad toevoegen die de speler meer realisme zal geven. Teken hiervoor een gebogen vormlaag met het pengereedschap.
Breng het naar 0% dekking en voeg een streek toe met dezelfde grijze tint van het oppervlak van de speler.
Scheid de lijn van de vormlaag die we hebben gemaakt, omdat we wat schaduw aan deze draad moeten toevoegen. Klik met de rechtermuisknop op het fx-pictogram naast de laag en kies Laag maken.
Deze actie scheidt de streek in een nieuwe laag zonder de eerder getekende vorm te vernietigen. Gebruik een binnenschaduw om het idee van een cilindrisch reliëf op deze lijn te geven.
Onze MP3-speler is nu klaar om te worden geëxporteerd als een transparante PNG en gecodeerd in Flash voor gebruik op websites. U kunt de uiteindelijke afbeelding hieronder bekijken of een grotere versie hier bekijken.
Accentsconagua