Share
Lär dig professionella gränssnitt skapande steg, från design till detaljerad beskrivning av skapandet av varje element. Alla tekniker som beskrivs häri är inte svåra att förstå; Men de visar dig hur du lägger till ett professionellt utseende för dina gränssnittsdesignprojekt.
Använd rektangelverktyget (M) genom att göra rektangeln med storleken 1024 x 768 px. Ovanstående storlek kommer att passa en iPad-skärm.
Vid arbete med gränssnitt rekommenderas alla skapade element att vara av den naturliga skala som de kommer att användas på. Ovanstående skala ska göra det möjligt för oss att skapa extremt skarp grafik, vilket undviker behovet av att göra ytterligare element.
Nu ska vi skapa bakgrunden till ditt gränssnitt. Bakgrunden som skapades i det första steget i vårt projekt ska möjliggöra korrekt val av övriga elementfärger. Fyll bakgrunden med en grå till mörkgrå gradient som har placerat gradientcentret under bakgrunden.
Öppna panelpanelen Utseende, lägg sedan till en ny fyllning som applicerar en grå till mörkgrå gradient till den. Den mörka gråskytten av en sådan gradient ska ha opacitet 0%. Hitta sitt centrum ovanför bakgrunden.
Lägg till den nya fyllningen som en mörkgrå färg i Utseendepanelen
Markera den och gå till Effekt> Konstnärlig> Svamp ... Ange nu parametrarna för effekten som visas i bilden nedan.
Ställ in överlagringsblandningen till 80% opacitet för en sådan fyllning.
Låt oss nu tänka på arrangemanget för gränssnittselementen. Innan du gör det måste du undersöka de liknande befintliga gränssnitten och förstå dess funktionella funktioner. Vidare måste nämnda element vara belägna på ett sätt som är bekvämt för användarna.
Huvudelementen i en DJ-app är Vinyl Record-skivspelarna. Använda Ellipse Tool (L) skapa två omkretsar med samma storlek. För att lokalisera gränssnittselementen på ett symmetriskt sätt måste det skapas flera riktlinjer.
Några varianter av nycklar användes av mig innan jag gjorde mitt val som visas i figuren nedan.
När vi försöker skapa gränssnittet i naturlig skala får du möjlighet att lägga handen på skärmen för att kontrollera om de element som skapas är bekvämt placerade. Bortsett från det praktiska läget ska ditt gränssnitt ha ett bra utseende.
Symmetri anses vara din pålitliga partner för att uppnå de uppsatta målen. Välj tangenterna i den vänstra delen av gränssnittet och gå till Objekt> Transformera> Reflektera ..., välj sedan Vertikal-alternativet och tryck på Copy-knappen i dialogrutan.
Flytta nu omkretsen till höger om gränssnittet.
Använd rektangulärverktyget (M) för att markera indikatorernas reglage och andra tangenters positioner.
Nu kan du fortsätta med att skapa gränssnittselement.
Fyll omkretsen skapad i ovanstående steg med en svart färg.
Kopiera en sådan omkrets och klistra in den framför (Command + C; Command + F), fyll kopian med en grå färg och minska dess diameter med 3 px.
Skapa den nya omkretsen och fyll den med en vertikal linjär gradient bestående av två grå färgtoner. Och den grundläggande skivformen skapas.
Låt oss nu skapa inslag på sidoplatsen på skivspelaren. Använd Ellipse Tool (L) för att rita en ellips.
Dra den här ellipsen i borstpanelen och spara den nya borsten som en mönsterborste.
Skapa den ofyllda omkretsen med slaglängdssatsen i en slumpmässig färg.
Applicera borsten som skapats i föregående steg till omkretsen.
Ändra parametrarna i mönstret borste; För detta ändamål, klicka på bilden i Brushes panel två gånger. Ange de nya parametrarna i dialogrutan efter förändringarnas framsteg.
Om du lämnar omkretsen som vald, gå till Objekt> Expand Utseende. Nu ser inuti på skivspelaren en titt på separata element.
Fyll varje objekt med en radiell gradient som består av svarta och vita färger.
Centrumet för gradienterna måste flyttas nedanför, ur objekten som visas.
Låt oss skapa de slitna fläckarna runt inslag på skivspelaren. Kopiera alla sådana inslag och klistra in bakåt (Kommando + C; Kommando + B). Fyll dem med en grå färg (synligheten för de övre objekten måste inaktiveras).
Med objekten som är markerade, gå till Objekt> Blur> Gaussian Blur och ställ in radievärdet i dialogrutan.
Positionen för gradienterna inom sådana inslag står för ljusriktningen. I mitt fall riktas ljuset ner och mot höger. Låt oss skapa ljus och skugga på skivspelaren. Skapa den nya omkretsen, förutsatt att den helt täcker skivspelaren. Fyll den här omkretsen med den radiella vita till grågradienten.
Ställ in Multiplicera blandningsläge för omkretsen i panelen Transparent.
Skapa den nya omkretsen fylld med en svart färg.
Nu ska vi skapa omkretsen, som ska fyllas med en konisk gradient. För det här projektet bör de flesta objekt ha en liknande fyllning och därför rekommenderas att lära sig denna process i detalj. Skapa rektangeln som ska fyllas med en linjär gradient.
Rektangelstorleken och gradientfärgerna kan ställas in på någonting för tillfället. Det enda villkoret som ska uppfyllas: Första och slutliga glidarna i lutningen ska vara av samma färg. Skapa omkretsen och fyll den med en radial vit till grå gradient.
Om du lämnar omkretsen som vald, gå till Objekt> Expand ... och välj alternativet Gradient Mesh i dialogrutan.
Gå nu till Objekt> Clipping Mask> Release
Gå sedan till Objekt> Path> Clean Up ...
... och uppgradera gradientnätobjektet.
Välj rektangeln fylld med den linjära gradienten och gradientnätobjektet. Applicera nu Objekt> Kuvertförvrängning> Gör med toppobjekt.
Således skapas den koniska gradienten; låt oss se hur man kontrollerar det. För att välja redigeringsläge, tryck på Redigera innehålls-knappen på kontrollfältet.
Nu kan du justera den koniska gradienten, likaledes den linjära. Skapa linjär gradient liknande med samma som visas i figuren nedan.
Skapa omkretsen, välj objektet med konisk gradient tillsammans med nämnda omkrets och gå till Objekt> Klippmask> Gör, eller använd genväg Kommandot + 7
Använda ovanstående teknik, skapa ett annat objekt fyllt med en konisk gradient.
Du kan duplicera det befintliga objektet fyllt med konisk gradient, vilket gör de nya inställningarna för det genom att ändra linjär gradientreglageposition och färg. I mitt fall har jag lagt till två mörkblå och två mörka gula reglage.
Låt oss skapa ljudspår på plåtytan. Skapa två ofyllda omkretsar med stroke en mörkgrå färg.
Om du lämnar de omkretsar som valts, gå till Objekt> Blanda> Gör och sedan på Objekt> Blanda> Blandningsalternativ ... och slutligen ange numret på de angivna stegen.
Gå nu till Objekt> Blend> Expand. Välj och ta bort några spår.
Välj den grupp som består av ljudspår och ställ in det för överlay-blandningsläge på panelen Transparens.
Låt oss skapa glattarna på skivytan. Skapa två omkretsar fyllda med den radiala svarta till vita gradienten, sätt sedan in skärmbländningsläget i panelen Transparent.
Begränsa reflexbelysningen med hjälp av en Clipping Mask.
Med hjälp av Ellipse Tool (L) skapar du omkretsen fylld med en mörkgrå färg. Ställ in överlagringsblandningen för omkretsen.
Tonen arm ska ha den radiella strukturen. Låt oss först och främst lära oss processen med att skapa bilagor.
Fästdelen ska fästa omkretsen fylld med konisk gradient.
Låt oss nu skapa skarvar och skuggor på fästytan.
Skarvarna och skuggorna ska hämmas med hjälp av en klippmask.
Låt oss skapa tonarm. Rita en ellips och duplicera den 4 gånger genom att hålla Alt och Shift-tangenterna medan du använder den horisontella förskjutningen.
Använd saxverktyget (C) för att skära ellipserna numrerade som 1, 3 och 5 i deras övre och nedre punkter.
Ta bort den vänstra delen av ellipserna.
Använd pennverktyget (P) för att fortsätta med att rita de andra ellipshalvorna, vilket ger upphov till de cylindriska ytorna på tonen.
Håll Shift-tangenten under dess uppbyggnad.
Genom att tillämpa ovanstående teknik, skapa tonarmkärnan.
För att ordna det på rätt sätt fyller du ytorna med olika färger.
Fyll de cylindriska ytorna med en linjär gradient bestående av grå färgkontrastfärger.
Genom att applicera denna gradient måste vi uppnå metallets glans på ytan. Ändytorna ska fyllas med en mörkgrå färg.
Fyll kärnytan med linjära gradienter. Den vänstra delen av kärnan ska vara upplyst och därför bör den linjära gradienten ha en skjutreglage av mörkröd färg.
Rita den horisontella linjen med konturen en röd färg.
Om du lämnar raden som vald väljer du Effekt> Oskärpa> Gaussisk oskärpa ... och ställer in radievärdet i dialogrutan.
Använd panelpanelen Utseende för att skapa ytterligare två slag: röda och rosa. Tjockleken på sista stroke bör vara mindre än de föregående.
Genom att tillämpa ovanstående teknik, skapa linjen på kärnans högra del. Ställ in denna rad som en grå färg.
Låt oss skapa indikatorerna på tonarmens centrala del. Skapa omkretsen, som ska fyllas med en radiell gradient som består av en vit färg och två gröna färgtoner.
Indikatorens bakgrundsbelysning ska skapas med hjälp av två tvärgående ellipser fyllda med radiella, ellipsoidgröna till svarta gradienter.
Ställ in skärmbländningsläge för ellipserna på panelen Transparens.
Gruppera alla element i indikatorn och duplicera dem.
Placera tonarmen under fästelementen och rotera den med hjälp av Rotate Tool ®.
Låt oss skapa drop shadow från tonen arm. Kopiera och klistra in det bakåt (Kommando + C; Kommando + B), och använd sedan Rotate Tool (R) för att rotera det, som visas i bilden nedan:
Lämna gruppen vald och tryck på Unite-knappen i panelen Pathfinder.
Fyll skuggformen med en svart till grå gradient.
Ställ nu överbländningsläget för objektet.
Gå till Effect> Blur> Gaussian Blur ... och ställ in radievärdet i dialogrutan.
Nu är alla delar av skivspelaren färdiga; fortsätt med sin gruppering. Duplicera skivspelaren och klistra in kopian i den högra delen av gränssnittet.
Metallknapparna består av två omkretsar.
Formen fylld med konisk gradient ligger på toppen.
Placera knapparna i områden som visas i den första delen av denna handledning.
Låt oss skapa inslag under några knappar. Använd pennverktyget (P) för att rita linjen mellan de närliggande knapparnas centra. Välj strokebredden och ställ in Round Cap. Placera den här raden under knapparna.
Låt objektet vara valt och använd sedan Objekt> Expand. Kopiera formuläret och klistra in bakåt (Kommando + C; Kommando + B). Nu ska vi flytta kopian lite till vänster och neråt.
Kopiera den övre formen och klistra in den framför (Command + C; Command + F). Välj de övre och nedre blanketterna och tryck sedan på knappen Minus Front på panelen Pathfinder.
Fyll in formuläret med en linjär vit till grå gradient och använd Multiplicera blandningsläge.
Den ljusa bländningen inom formgränsen ska fyllas med en grå färg.
Skapa liknande inslag i områden som visas i figuren nedan:
Använd pennverktyget (P) genom att dra upp den raka linjen med Round Cap.
Gå till Objekt> Expand. Fyll objektet med horisontell linjär svart till mörkgrå gradient.
Skapa en ytterligare fyllning i Utseendepanelen och fyll den med vertikal linjär gradient som visas:
Använd Multiplicera blandningsläget till fyllningen.
Använd det rundade verktyget för att skapa formen på skjutreglaget. Fyll i detta formulär med en vertikal linjär gradient som står för simulering av ljusspelet på handtagens ytor.
Skapa rektangeln fylld med den linjära vita till svarta gradienten. Placera den under skjutreglaget och använd Multiply Blending-läget.
Nu har vi skuggformen för handtaget skapat.
Låt oss skapa den lysande delen av reglaget. Formen som visas i figuren nedan ska fyllas med en linjär gradient bestående av två svarta och en blå glidare. Applicera skärmblandningsläge till nämnda formulär.
Skapa de andra reglaget på gränssnittet genom att tillämpa ovanstående teknik.
Låt oss skapa skalan som ska ligga under de horisontella reglagen. Använd den rundade rektangelverktyget för att skapa två former, som visas i figuren nedan:
Välj båda blanketterna och gå till Objekt> Blanda> Gör sedan till Objekt> Blanda> Blandningsalternativ ... och slutligen ange numret på de angivna stegen.
Om du lämnar blandningsobjektet som valt, gå till Objekt> Blanda> Expandera.
Skapa det liknande objektet från en annan sida av reglaget genom att tillämpa tekniken ovan.
Välj båda elementen i skalan och gå till Objekt> Blanda> Gör sedan till Objekt> Blanda> Blandningsalternativ ... och slutligen ange numret för de angivna stegen.
För att skapa bländningen på skalelementets kant, skapa en rundad rektangulär fylld med en ljusgrå färg, som ska placeras under de första och sista elementen i skalan. Markera ovanstående objekt och använd ett blandningsverktyg till det.
En liknande skala bör skapas under den andra horisontella reglaget.
Laserindikatorhuvudet ska vara samma som knappen.
Placera den reducerade kopian av huvudet vid strålningens utgångspunkt.
Skapa skuggan från indikatorn med hjälp av ellipsen fylld med ellipsoid grå till vit gradient. Applicera nu Multiplicera blandningsläget till objektet.
Skapa omkretsen fylld med den radiella röda till svarta gradienten vid strålningens punkt. Applicera skärmbländningsläge till omkretsen.
Använd pennverktyget (P) för att skapa den rektangulära formen ovanför skivans laterala yta. Fyll i detta formulär med den linjära gradienten som består av två svarta och en röda reglaget. Applicera skärmbländningsläget till det skapade objektet.
Lossa laserstrålen med hjälp av Clipping Mask med omkretsformen och skivans storlek.
Laserstrålen på posten ska skapas med hjälp av blandningsobjektet. Den yttre formen av föremålet ska vara den förvrängda omkretsen och ha opacitet 0%.
Den inre formen ska vara omkretsen fylld med en röd färg till vilken skärmblandningsmodus och 50% opacitet tillämpas.
Laserstrålen ska riktas till skivbordscentralen.
Använd rektangelverktyget (M) för att skapa två rektanglar. Den första ska ha en svart färgfyllning, medan den andra ska fyllas med en radiell gradient som består av två blå färgtoner.
Rita en horisontell linje med hjälp av Pen Tool (P). Linjen ska ha tjockleken på 1px och vara skisserad med en blå färg.
Lämna raden som vald, gå till Effect> Stylize> Scribble ... och ställ in effektparametrarna som visas i bilden nedan.
Gå nu till Effect> Distort & Transform> Zig Zag ... och ställ in parametrarna nedan.
Låt oss skapa en mer sonisk våg, som ligger ovanför den första. Applicera skärmblandningsläget till det.
Begränsa synskolans synlighet med hjälp av en Clipping Mask.
Skapa en liknande indikator över höger skivspelare. Det är föredraget att parametrarna för effekterna som tillämpas på den andra indikatorn är något annorlunda.
Sonic wave har ett unikt utseende, speciellt om de olika spåren spelas upp.
Skapa rektangeln fylld med en svart färg. Gå till Effekt> Stylize> Round Corners ... och ställ in värdet av radieavrundningen i dialogrutan.
Gå nu till Effekt> Stylize> Outer Glow ... och sätt parametrarna för effekten.
Låt oss lägga till den nya fyllningen i Utseendepanelen och fylla den med en vertikal linjär gradient.
Välj det här fyllet i Utseendepanelen och gå till Effekt> Sti> Offset-sökväg och ställ in slutföringsvärdet i dialogrutan.
Lägg till den nya gradientfyllningen i Utseendepanelen och gå sedan till Effekt> Sti> Förskjutningsväg och ställ in förskjutningsvärdet i dialogrutan.
För att undvika att de procedurer som beskrivs i föregående steg kontinuerligt utförs, låt oss skapa den nya grafiska stilen.
Nu kan vi tillämpa den här stilen på elementen som har någon form.
Symbolerna som visas på knapparna ska skapas med hjälp av enkla former med hjälp av sådana verktyg som rektangelverktyget (M) och polygonverktyget. Dessa objekt ska fyllas med de linjära eller radiella gradienterna som består av grå färgfärgade tints.
För att skapa bländningen av symbolens kanter kopierar du och klistrar in den på baksidan. Fyll de nya blanketterna med vit och flytta dem lite lägre.
Inskriptionerna ska skapas med hjälp av Typverktyget (T). Efter att ha kommit in i kommandot Typ> Skapa kommando måste du fortsätta med samma procedurer som angivna för symbolerna.
I mitt fall användes en typsnitt för flytande kristall för indikering av spårningsavspelningsindikationen; den här kan hämtas här.
För att skapa bländningen på skärmen, skapa formuläret nedan med hjälp av Pen Tool. Fyll i detta formulär med den linjära gradienten som består av svarta och mörkgråa färger, och använd skärmblandningsläget till det.
För att ge det aktiva gränssnittets bakgrundsbelysning, skapa omkretsen fylld med en radiell blå till svart gradient. Applicera skärmbländningsläge till omkretsen.
Så är det ganska komplicerade projektet gjort. Det kan antas att vissa detaljer utelämnas och att det i så fall kan göra ditt projekt utförande mer komplicerat. Jag kommer vara väldigt glad att hjälpa dig att lösa eventuella problem. Gärna lämna en kommentar eller fråga.
Accentsconagua