Share
Leren hoe je interfaces ontwerpt, kan een blijvende reis zijn als je het alleen moet doen. Mijn naam is Tim Silva en dat ben ik geweest proberen om dit soort interfaces nu al meer dan 5 jaar te ontwerpen, en ik heb veel waardevolle informatie om met u te delen om het leerproces te versnellen en te vergemakkelijken. Dit is wat ik heb leren begrijpen over het ontwerpen van gedetailleerde, realistische en cool ogende interfaces: dat moet je zijn Super goed in veel gebieden van Photoshop te zijn goed bij interfaceontwerp. Dus samen met de daadwerkelijke stappen die nodig zijn om deze specifieke interface te maken, zal ik in deze reeks ook zoveel mogelijk verwijzingen naar andere handleidingen, hulpmiddelen en concepten aanbieden. Op die manier heb je toegang tot enkele tools waarmee je volledig originele interfaces kunt maken met behulp van dezelfde methoden die ik samen met je eigen creativiteit doceer. Laten we verder gaan met deel 2 van deze tweedelige serie.
Dit bericht is dag 6 van onze interface-ontwerpsessie. Sessiedag 5 van Creative Sessions op dag 7 "Laten we het bekijken en plannen. We zijn zo ver gekomen. Vervolgens beginnen we het schermgebied in te vullen. Blauw is het veiligst stoer kleur om te gebruiken. Als een ervaren interface-ontwerper ben ik er nog steeds helemaal verliefd op.
Verberg de twee binnenste schermgebieden. In deel 1 heb ik ze 'Inner' en 'Inner_Screen' genoemd.
Herhaal de methode die wordt geleerd in stap 37 van Deel 1, maak een witte reflectie van 2-3 pixels aan de onderkant van de basislaag. Ik heb meerdere lagen gebruikt om een resultaat te bereiken waar ik blij mee was. Gebruik het gereedschap Gummetje (E) met een penseelgrootte van 75 px en een hardheid van 0% om eventuele pixels op te ruimen die u tegen kunt komen.
Ga vanaf hier verder en maak 1-3 pixelzwarte streepjes op de boven- en zijkanten van de vorm. De linkerkant moet dikker en complexer zijn, terwijl de rechterkant dunner en meer simplistisch is vanwege de lichtbron. Geen van de volgende effecten is gemaakt met behulp van Laagstijlen. Alles is van 1-3 pixelstroken die ik handmatig heb verplaatst, aangepast en opgeschoond. Ik heb hier ongeveer 20 lagen kleine details gebruikt. Zoals ik in stap 49 van deel 1 heb uitgelegd, zijn dit soort details 'niet moeilijk te [creëren], ze nemen gewoon tijd.' Neem je tijd met de details en vergelijk deze resultaten zo goed als je kunt.
Vervolgens voegen we wat donkere schaduwen en hellingen toe. Voeg een slagschaduw toe buiten en links van de basis van de vorm. Plaats daarnaast wat donkere hellingen onderaan naar boven.
Zoals altijd komen de lichtere effecten na de donkerdere effecten. Gebruikmakend van dezelfde methoden als stap 3 (uit Deel 2), voeg enkele witte gradiënten toe aan het ontwerp. Herhaal de tweede, derde en vierde zin van stap 46 van deel 1 om hoogtepunten aan de linkerkant en de bovenkant van de vorm te maken.
Nu kunnen we naar het buitenste binnenste scherm gaan. Maak beide binnenste basislagen zichtbaar en vul de binnenste basislagen met een tijdelijk vlakke blauwe kleur van # 38a6de.
Herhaal stap 2 tot en met 4 nogmaals om vergelijkbare effecten te creëren op de buitenste binnenste basislaag. Let op het witte verloop helemaal onderaan (buiten de vorm), de donkere overgangen bovenaan en onderaan de basis en het poetsen in de hoeken. De effecten op deze basisvorm zullen het langst duren. Ik heb bijna 25 lagen gebruikt om de details hier te creëren. Het vereist veel vallen en opstaan om de hoeken er soepel uit te laten zien.
Hoewel hetzelfde effect alleen met de overvloeiopties kan worden bereikt, gebruik ik liever helemaal geen stijlen, zodat ik volledige controle over de pixels heb. Er is nooit een stap-voor-stap-proces dat ik volg voor dit soort details. Ik blijf gewoon toevoegen totdat ik tevreden ben met wat ik zie. Ga naar de pixel-pusher-modus!
Voeg vervolgens een innerlijke Glow Layer-stijl toe aan de blauwe basis. Maak een duplicaat van de Layer van het blauwe scherm. Klik met de rechtermuisknop op de gedupliceerde laag en kies Laagstijl wissen om de optie Inner Glow Blending te verwijderen. Ga naar Filter> Vervagen> Gaussiaans vervagen. Typ 10 en druk op OK. Hierdoor wordt een blauw gloei-effect buiten het scherm gecreëerd. Zorg ervoor dat je deze vage laag onder het origineel verplaatst, alleen om alles later schoon te houden. Herhaal deze stap verschillende keren met verschillende vervagingmaten en overvloeimodi. Streef naar een mooie, sterke, warme gloed.
Gebruik het gereedschap Gum (E) om terug te gaan en verwijder alle onderdelen die te sterk zijn. Zorg ervoor dat u de meeste blauwe gloed uit de rechts kant, omdat de glans van de lichtbron het blauwe lichteffect in dat gebied zou verzwakken.
Vervolgens voegen we een Innerlijke Glow Layer-stijl toe aan de blauwe basis. Maak een duplicaat van de Layer van het blauwe scherm. Klik met de rechtermuisknop op de gedupliceerde laag en kies "Laagstijl wissen" om de optie Inner Glow Blending te verwijderen. Ga naar Filter> Vervagen> Gaussiaans vervagen. Typ 10 en druk op OK. Hierdoor wordt een blauw gloei-effect buiten het scherm gecreëerd. Zorg ervoor dat je deze vage laag onder het origineel verplaatst, alleen om alles later schoon te houden.
De veiligste manier om diepte toe te voegen aan een scherm is om een subtiel donker verloop van onder naar boven toe te voegen. Gebruik het gereedschap Verloop (G) om mijn resultaat zo nauwkeurig mogelijk aan te passen. Merk op dat ik een lineair verloop gebruikte dat perfect verticaal was (omdat ik de shift-toets vasthield), niet een radiaal verloop zoals eerder. Experimenteer met de Zacht licht en bedekking Overvloeimodi. Ik ging ook terug en maakte de Innerlijke Glow voor de hoofdblauwe laag 200x sterker. Vaak ga ik terug en pas ik de Layer Style-instellingen aan. In feite bestaat het meeste reinigings- / revisingsproces uit echt kleine aanpassingen aan de instellingen.
Het scherm moet er nog steeds plat uitzien. In het verleden liet ik het hier achter en probeer het goed te maken met andere details. Gelukkig heeft de interfacecommunity genoeg leden die erom geven. Ik kwam een nieuwe benadering tegen die bewezen heeft zowel effectief als vruchtbaar te zijn. Lance Thackeray, die ik in deel 1 heb genoemd, maakte verschillende lichtbollen en schermen met deze basisuitstraling. Vul eerst een cirkel op een nieuwe laag in het midden van het scherm die ongeveer zo groot is. Je kunt het met elke kleur vullen, omdat je de laag van de laag sowieso op 0% instelt.
Stel de vulling van de laag in op 0%. Open de laagstijlen en voeg een innerlijke gloed toe met de volgende instellingen.
Dupliceer de laag en transformeer de laag horizontaal (Command + T) tot ongeveer 85% van de oorspronkelijke breedte. Open vervolgens de Inner Glow-opties en vul de volgende gegevens in.
Vervolgens moeten we een binnenring maken. Dit draagt bij aan de illusie van diepte omdat het een diepte toevoegt einde van het scherm dat iets donkerder is. Eerst moeten we een sterke, overdreven ring creëren. U kunt hiervoor het penseel of het elliptische selectiegereedschap gebruiken. Maak eerst een basisvorm en gebruik vervolgens het vervagingfilter opnieuw om de randen weg te vervagen. Als je een mijn hebt die overeenkomt met de ring, verlaag dan de dekking tot ongeveer 10%. Je wilt dat het er bijna niet is. Dat is wanneer het het meest effectief is. Ik heb het scherm ook een beetje donkerder gemaakt om de rijkdom van de kleuren en hellingen naar voren te brengen.
Nu komt een van mijn favoriete delen - de hoogtepunten. Gebruik de methode die ik heb geleerd voor de zijbelichtingen in stap 46 en maak een sterke markering bovenaan het blauwe scherm. Voeg ook een reflectie van 3-4 pixels aan de bovenkant toe door de beruchte stap 37 opnieuw te herhalen. Maak de bovenste rand nog sterker. Kleine hellingen binnen deze 4 verticale pixels kunnen zeer effectief zijn. Ik heb 8 lagen gebruikt om mijn resultaten te krijgen.
Ik voeg graag wat tecky-penselen toe aan mijn interfaces. Het brengt de look echt up-to-date. Zane Bien, ook bekend als z-design, heeft een enorme verzameling geavanceerde technische penselen samengesteld. Z-Design Tech-penseelsets: 1 | 2 | 3 | 4. Bekijk die eens en kies iets dat je leuk vindt. Ik koos er een uit de tweede set en plaatste mijn persoonlijke logo in het lege gebied in het midden voor een verbluffend resultaat.
Het zou eerlijk zijn om hier te stoppen omdat het in essentie is voltooid. Nu wil ik deze extra stap nemen en de kerninterface verbeteren die we tot nu toe hebben gecreëerd. Alles waaraan je hebt gewerkt, moet allemaal goed georganiseerd zijn in een map met de naam 'Interface'. Ik wil dat je deze map dupliceert en het duplicaat vlak (Command + E) maakt.
OPMERKING: u mag onder geen enkele omstandigheid uw oorspronkelijke map nooit verwijderen of afvlakken.
Tot op de dag van vandaag zie ik mensen klachten plaatsen als: "Oei, ik ben dat deel van het ontwerp kwijtgeraakt," of "Dat deel was afgevlakt, ik wou dat ik terug kon gaan en het kon veranderen." Bespaar jezelf van deze nachtmerrie en sla de originele map op. Ga een stap verder en maak een duplicaat bronbestand voordat u doorgaat naar het volgende gedeelte. Ik dupliceer mijn bronbestanden na elke 2 uur of zo van het werk. Ik voeg "_01", "_02", enz. Toe aan mijn bestandsnamen, zodat ik mijn kans op het verliezen van de meest recente updates verkleint. Ik heb belangrijke bronbestanden verloren van twee van mijn grootste projecten ooit. Eén vanwege een black-out die mijn open-sourcebestanden heeft beschadigd en een andere vanwege een volledige harde-schijfstoring. Riskeer het niet. Back-up van uw bestanden nu. ik meen het.
Hernoem je nieuw gedupliceerde en afgevlakte laag naar 'plat'. Plaats het in een nieuwe map met de naam "Interface_80%." Druk op Command + T om het te transformeren naar 80%, zowel verticaal als horizontaal. Druk op Enter als u klaar bent.
Dupliceer deze verkleinde laag en ga naar Filter> Verscherpen> Verscherpen. Dit maakt de interface veel scherper.
Pak het Eraser Tool (E) en ruim alle delen van de interface op die zijn te knapperig en die zelfs gepixeld lijken. Gebruik aangepaste wisserinstellingen om de onderdelen op te ruimen die u wilt opruimen. Neem de tijd bij deze stap, het kan gemakkelijk 15 minuten duren om in te zoomen en te wissen bij een close-upweergave.
Maak je geslepen en niet-gescherpte lagen in één. Voeg een slagschaduw en een binnengloed toe met de volgende instellingen.
Gebruik de tools Dodge en Burn (O) om helderheid en duisternis toe te voegen aan delen van uw interface waarvan u denkt dat ze wat moeten worden bijgewerkt. Nogmaals, zoals met Stap 18 [Deel 2], neem hier even de tijd voor. Ik heb er ongeveer 15 minuten over gedaan om hieraan te werken.
Laten we nu het scherm wat meer aandacht geven. Laad het basisscherm van het binnenste scherm en ga in het menu naar Selecteren> Selectie transformeren. Typ 80% voor zowel de hoogte als de breedte en sla deze nieuwe selectie op als "Inner_Screen_base_80%", zodat u deze later opnieuw kunt pakken als dat nodig is. Maak een nieuwe laag en vul de selectie "Inner_Screen_base_80%" met zwart. Zet de vulling van de laag op 0% en voeg een zwarte innerlijke gloed van 15 pixels toe. Dupliceer deze laag en verander de gloed van de nieuwe laag in Overlay. Experimenteer met verschillende instellingen om een schoon resultaat te bereiken. Maak de markering opnieuw als dat moet door de selectie te laden en handmatig te maken. De hoeken van dat hoogtepunt moeten helder en zichtbaar blijven.
Gebruik de lijnen die ik voor je heb opgegeven, vul een raster in op het scherm waardoor het er technischer en gecomputeriseerd uitziet. Dit is te zien op rekenmachines en andere handheld-apparaten, dus ik dacht dat het een leuk klein beetje zou zijn. Ik heb het gummetje (E) gebruikt om het midden van het raster waar het logo was op te ruimen, en ik verlaag ook de dekking van de laag tot ongeveer 10%. Gebruik indien nodig meerdere lagen met meerdere overvloeimodi.
Onze interface begint karakter te ontwikkelen. We hebben meer details nodig. Voeg een paar micro-bouten en moeren toe aan de verschillende oppervlakteschillen. U kunt hier een eenvoudige, transparante bout downloaden. Open het bestand in Photoshop, kopieer de inhoud ervan en plak het in uw andere document. Stel de boutlagen in bedekking en / of Zacht licht en verander de laag Opacities afhankelijk van het type achtergrond waarop ze zitten. Beginnend met net de linkerkant, dupliceer en plaats bouten in de interface. Als je eenmaal tevreden bent met de linkerkant, dupliceer en draai ze allemaal voor de rechterkant. Werp er ook een leuke titel of naam op met een geschikt lettertype.
Alles comprimeren tot dit punt in een gedupliceerde map. Verberg de oorspronkelijke map en blijf werken met deze nieuwe. Command-klik op het afgeplatte Layer-pictogram om de selectie te tonen. Onder aan het deelvenster Lagen vindt u een knop met het label 'Nieuwe vul- of aanpassingslaag maken'. Klik en houd dit vast totdat een nieuwe lijst met opties verschijnt. Verplaats uw muis naar "Levendigheid" en laat uw klik los. Een nieuw dialoogvenster verschijnt. Stel de levendigheid in op ongeveer 15 en de verzadiging op 10 voordat u het vak sluit. Je blauw zou nu nog rijker moeten lijken.
Doorloop opnieuw uw interface met de Dodge en Burn Tools (O) op aangepaste instellingen tot u tevreden bent met het contrast van uw afgewerkte interfaceontwerp.
Ik hoop dat je deze tutorial nuttig vindt. Het was geen gemakkelijke reeks concepten om les te geven, en ik hoop dat het je genoeg geeft om op zijn minst geïnspireerd te raken om meer te leren over hightech, realistisch interfaceontwerp. Er zijn er echt niet te veel, ook al neemt ons genre absoluut exponentieel toe.
Daarnaast wil ik graag mijn mening over het verschil tussen kunst en design verduidelijken. Kunst is communicatie in welke vorm dan ook, en het is zonder grenzen. Design heeft beperkingen en gaat over hoe gebruikers omgaan en iets ervaren.
Een interface-speler met knoppen die werkt als een echte skin is een ontwerp. Als een interface echter geen knoppen of interactieve agents heeft en deze alleen bestaat als een statische afbeelding zonder interactiviteit, is dit een psuedo-ontwerp. Wanneer die lijn vervaagt, is het waarschijnlijk eerder kunst.
Ik ben blij met de term 'fantasy interface-ontwerpen' omdat het dubbelzinnig genoeg is om alles met één naam te bedekken. Ik probeer al jaren de verschillen tussen design en kunst te begrijpen, en mijn huidige filosofie is heel sterk in mijn gedachten. Als je gedachten, kritieken of meningen hebt over mijn tutorials, technieken en ideeën, voel je vrij om ze hieronder met een opmerking te delen.
Accentsconagua