Share
Interface van het aanrakingsscherm is overal tegenwoordig. Je kunt ze zien op televisie, in films, op internet en vooral op je mobiele apparaat. In deze tutorial zullen we uitleggen hoe je een touch-screen interface kunt maken voor een futuristisch ruimtevaartuig. Tijdens het proces zullen we het digitale illustratieproces laten zien, van schets tot vectortracering tot Photoshop-weergave. Laten we beginnen!
Laten we eerst beginnen met het maken van een snelle conceptschets van ons ruimtevaartuig. Pak een pen / potlood en papier en schets ongeveer uw idee. Neem een hoge resolutie scan of foto van de tekening. Voor degenen onder u die een tablet gebruiken, kunt u uw idee eenvoudig schetsen in Photoshop.
Nu gaan we beginnen met het vectoren van uw regels. Open je schetsjpeg in Illustrator. Begin met het gereedschap Pen (P) om een deel van uw tekening te traceren. Gebruik het converteertool (Shift + C) en klik en sleep de ankerpunten om eventuele curves te volgen.
Ga met het geselecteerde pad naar Object> Pad> Omtreklijn. Dit zet je pad om in een vorm. Met de tool voor directe selectie (A) kunt u nu de nieuwe ankerpunten verschuiven om uw lijnwerk op verschillende plaatsen uit te dunnen of te verdikken. Dit zou meer moeten zorgen voor een 'stripboekinktende' esthetiek.
Ga door met dit proces voor de rest van de tekening. Wees niet bang om extra details toe te voegen om het idee echt uit te werken.
Vervolgens gaan we onze illustratie vullen met enkele tinten. Schrap eerst je schets, want die hebben we niet meer nodig. Selecteer alle lijnen en ga naar het tabblad Pathfinder (Shift + Command / Ctrl + F9). Optie + klik op de tool Samenvoegen en klik op Uitbreiden. Selecteer met het groepsselectiegereedschap (Shift + A) het pad aan de buitenste perimeter en paden rondom een negatieve ruimte in uw illustratie. Kopieer je selectie.
Plak je selectie en je moet een silhouet van je tekening en een paar andere vormen hebben. Optie + klik op het gereedschap Minus voorzijde op het tabblad Pathfinder om eventuele negatieve vakken in uw illustratie te maken en klik vervolgens op Uitbreiden. (Zorg ervoor dat je snijvormen boven je grotere silhouet uitkomen. Vervolgens maken we de vulkleur lichtgrijs.
Plaats de schaduw in uw lijnen. Gebruik het pengereedschap om nog meer schaduwen en schaduwen toe te voegen aan uw illustratie met verschillende grijstinten.
Laten we nu al onze vectorelementen naar Photoshop verplaatsen. Open een nieuw bestand in Photoshop. Zet de achtergrond op zwart. Kopieer en plak al uw illustratorelementen in Photoshop, beginnend met een laag waarin uw lijnwerk en basiskleur gecombineerd zijn, en breng uw lijnwerk, schaduwen en alle andere vormen van arcering afzonderlijk aan. Het wordt aanbevolen dat je tijdens deze tutorial erg georganiseerd bent, omdat dingen een beetje rommelig kunnen worden. Het wordt gemakkelijk om uit het oog te verliezen waar alles zich bevindt, dus geef al je lagen een naam en plaats ze waar nodig in groepen!
Stel voor onze schaduwen de hoofdvulling in op 0% en een kleuroverlay, # 005064. Zet de mengmodus op vermenigvuldigen.
Voeg nu donkerblauw, # 180055, kleuroverlays toe aan uw contouren en eventuele andere arceringen. Hier kunnen we ook het masker beginnen te lakken met een zachte luchtpenseel. Voor degenen die geen tablet gebruiken, moet je spelen met de dekking en de stroominstellingen van de borstel om verschillende penseelkrachten te hebben.
Laten we beginnen om onze auto een metallic look te geven. We bieden een reeks verloopkaarten die met een clip worden gemaskeerd naar onze laag 'basiskleur + lijnen' (of u noemt uw laag die zowel de basiskleur als de contouren heeft gecombineerd). Ga naar je aanpassingslagen-pictogram en klik op Verloop toewijzen. Als u het masker van uw verloopkaart wilt knippen, drukt u gewoon op Alt + Command / Ctrl + G. Hieronder ziet u een reeks afbeeldingen met het aantal verloopkaarten en de hex-kleurcodes voor deze specifieke illustratie. Laagmaskering werd ook toegepast wanneer dat nodig was.
Dupliceer uw lijnwerklaag en geef deze een buitenste gloed, # fc67f7 en kleuroverlay, # dbf0fe en voeg wat maskering van lagen toe. Gebruik de onderstaande afbeelding als richtlijn voor de algemene instellingen.
Herhaal stap 12 maar deze keer zonder kleuroverlay.
Maak een nieuwe laag en voeg enkele hoogtepunten toe met een zachte witte borstel. Tabletgebruikers zouden de hoeveelheid druk die ze gebruiken moeten variëren en het redelijk licht houden. Gebruikers die geen tablet gebruiken, moeten onthouden dat ze de instellingen voor penseeldoorstroming en dekking voor verschillende sterktes moeten gebruiken.
Laten we onze illustratie een mooi reflecterend oppervlak geven. Verberg je achtergrondlaag en sla je afbeelding op als niet-geïnterlinieerde PNG. Open en plak de PNG in uw PSD. Terwijl de PNG-laag is geselecteerd, opent u het Uitvloeiingsfilter (Filters> Uitvloeien of Shift + Opdracht / Ctrl + X) en begint u de PNG te manipuleren, zoals hieronder weergegeven, langs het oppervlak van het schip. Speel met je penseelbreedtes voor verschillende sterktes. Als je klaar bent, druk je op OK en knip je het masker in je hoofdillustratie. Als je je airbrushing eerder hebt gemaskeerd, zorg er dan voor dat je de reflectielaag eronder plaatst, zodat we de airbrushing die is uitgevoerd niet visueel belemmeren. Volg de Layer Style-parameters die hieronder worden aangegeven en breng het laagmasker naar eigen inzicht aan.
Nu gaan we beginnen met het maken van de interface. Plaats alles wat je tot nu toe hebt gedaan in een groep als je dat nog niet hebt gedaan en noem het "verzenden". Maak nu een nieuwe groepsmap en noem deze "interface". Zoek de werklaag van uw lijn en dupliceer deze, Command / Ctrl + J en verplaats de kopie naar de map "interface". Herhaal stap 12 om het een beetje laagstyling en laagmaskering te geven.
Laten we onze illustratie een beetje meer integreren in de achtergrond. Om dit te doen, voegen we eenvoudig een laagmasker toe aan onze "scheeps" -groep en maskeren weg met een zachte zwarte borstel.
Want hier gaan we heen en weer tussen illustrator en Photoshop om onze futuristische interface te maken. Sla je afbeelding op als een jpeg en open deze in Illustrator. Verlaag de dekking tot ongeveer 40% of minder, zodat we duidelijk kunnen zien wat we aan het doen zijn. Laten we een raster maken dat ons ruimteschip overlapt. Met het pengereedschap (P) zullen we twee lijnen maken en vervolgens het menggereedschap (W) gebruiken om de lijnen daartussen te mengen. Zorg ervoor dat je twee eindstreepjes NIET zijn verbonden, anders werkt de blend niet. Dubbelklik op het pictogram van het gereedschap Blenden om het tabblad met opties te openen. Hier kunt u stappen of de afstand tussen lijnen opgeven.
Herhaal de vorige stap in de andere richting. Als dit is gebeurd, gaan we naar Object> Uitbreiden en drukken op OK in het dialoogvenster. Nu kunnen we de randen doornemen met een schaar.
We hebben dat in de laatste twee stappen gedaan en meer rasteroverlays gemaakt op andere delen van de illustratie.
Kopieer en plak ons raster in Photoshop als twee afzonderlijke assen. Voeg Layers Styling en maskering toe zoals aangegeven in de afbeelding hieronder.
ILLUSTRATOR: Laten we nu ons raster selecteren. Klik op de live verftool (K) en maak de vulkleur zwart. Klik op verschillende delen van het raster om vierkante vullingen te maken en ga vervolgens naar Object> Uitbreiden. Selecteer met de groepsselectie-tool alle zwarte vullingen om te kopiëren en in Photoshop te plakken.
PHOTOSHOP: Laten we wat laagstijl toevoegen aan onze vierkante vullingen. Eens gedaan, dupliceer ze (Command / Ctrl + J) en wijzig de Style-parameters zoals hieronder aangegeven. Masker het meeste weg om wat van de kleuren in het origineel terug te brengen. Dit zou het een beetje meer helderheid moeten geven.
ILLUSTRATOR: Gebruik het gereedschap Pen (P), Lijntool (/), Ellips en / of Rechthoek (M) om meer lijnen, cirkels en andere vormen te maken.
PHOTOSHOP: kopieer en plak je nieuwe formulieren en geef het een laaglaagstyling en maskering.
ILLUSTRATOR: Gebruik het gereedschap Rechthoek om een reeks uitgelijnde vierkanten te maken. Maak twee vormen direct verticaal op een afstand van elkaar. Selecteer beide vormen en druk op Command / Ctrl + C om te kopiëren en druk vervolgens een paar keer op Command / Ctrl + F om de kopieën direct boven het origineel te plakken. Met het tabblad Uitlijnen (Shift + F7) kunnen we de distributiehulpmiddelen gebruiken om de kopieën gelijkmatig te verspreiden. Volg de onderstaande stappen totdat u een patroon hebt bereikt. Aan het einde, verwijder hier en daar een aantal vierkanten en maak enkele van die contouren om ze een beetje stil te maken.
PHOTOSHOP: kopieer en plak je patroon in je illustratie en volg de onderstaande afbeelding met een beetje Layer-styling en maskering, waarbij je in feite herhaalt wat je in stap 23 hebt gedaan.
ILLUSTRATOR: Laten we een axonometrische kubus maken met het lijngereedschap (/). Breng eerst uw raster naar voren (Command / Ctrl + "of View> Show Grid) en schakel snapping naar het raster in (Shift + Command / Ctrl +"). Druk op Command / Ctrl + K om onze voorkeuren te openen en ga naar Gidsen en raster in het bovenste drop-menu om de parameters naar wens aan te passen. Probeer er plezier mee te hebben en maak een kubus die uiteen begint te vallen of samenkomt zoals hieronder wordt getoond. Maak er een paar andere andere vormen omheen als je dat wilt. Je kunt ook herhalen wat er in stap 22 is gedaan om sommige delen van de kubus in te vullen.
PHOTOSHOP: Breng je kubus in je afbeelding en voeg een aantal laagstijlen toe.
ILLUSTRATOR: Breng je raster opnieuw omhoog en gebruik het om een reeks rechthoeken en vierkanten te maken in elk arrangement en elke afmeting. Breng wat kleurvullingen aan zoals hieronder aangegeven. Gebruik vervolgens het gereedschap Transformeren (E) om de vormen onder een isometrische hoek te schuiven. Om dit te doen, klikt u op + Vasthouden op een ankerpunt in de Begrenzingsbox en houdt u Command / Ctrl + Drag ingedrukt met uw muis of tabletpen.
PHOTOSHOP: stel onze isometrische vlakken in op Screen voor de modus Master Blend. Nu voegen we een omtrek toe rond onze objecten. Command / Ctrl + klik op de laag. Maak een nieuwe laag en selecteer het selectiekader (M). Klik met de rechtermuisknop en selecteer Lijn om een omtrek rond onze objecten te maken. Volg de parameters van de laagstijl hieronder en maskeer ze indien nodig.
ILLUSTRATOR: herhaal stap 18 om een isometrische lijngrafiek te maken over de vlakken die zojuist zijn gemaakt.
PHOTOSHOP: Herhaal stap 23 en volg de hieronder aangegeven parameters.
PHOTOSHOP: Laten we onze lijnen een beetje styliseren met enkele gloeipunten in de grafiek. Gebruik het penseel op 100% hardheid en volg de onderstaande parameters. Maak vervolgens een nieuwe laag en zet de mengmodus op Scherm. Stel het penseel in op 0% hardheid en voeg wat airbrushing toe om het gloei-effect te verbeteren met enkele paarse, rode en gele tinten.
Met in het achterhoofd houden wat we sinds stap 18 gedaan hebben, zal deze tutorial een beetje beknopter zijn om je meer vrijheid en experimenteren te geven. Gebruik de afbeeldingen als richtlijn, maar experimenteer met de parameters van de laagstijlen, kleuren en vormen maken in de illustrator om de volgende effecten te creëren. Inmiddels zou je heel goed vertrouwd moeten zijn met het proces. Vergeet niet om er plezier mee te hebben!
In de afbeelding hieronder wordt het gebruikte lettertype "LCD" genoemd en het is een royaltyvrij lettertype dat te vinden is op dafont.com. Ook om de weergave van de digitale klok verder te verbeteren, hebben we een omtrek rond de tekst gemaakt om het effect te creëren.
Herhaal wat je hebt gedaan in stap 33.
Maak in Photoshop een nieuwe groep met de naam "interface bg" en plaats deze onder de scheepsgroep. We gaan nu een paar extra interface-elementen maken die op de achtergrond van onze illustratie verschijnen. Herhaal wat er in stap 25 is gedaan om meer kleine vormen en patronen te maken. Breng ze naar Photoshop en manipuleer ze met laagstijlen zoals we eerder hebben gedaan.
Herhaal wat er in stappen 29, 30 en 32 is gedaan om nog meer isometrische panelen met contouren en wat zachte airbrushing te maken.
Laten we de interface laten reflecteren op het metalen oppervlak van het schip. Verberg in Photoshop de groep "schip" en de achtergrond zodat alleen de elementen van de interface overblijven. Herhaal stap 15 om uw PNG-bestand vloeibaar te maken. Plaats deze vloeibare vorm in zijn eigen groep genaamd "reflectie" en plaats deze boven de scheepsgroep. Command / Ctrl + klik op de illustratie van het basisschip om een rand van een feesttent te openen. Met de reflectiegroepmap geselecteerd, maakt u een laagmasker. Dit creëert een soortgelijk effect als maskering van clips, maar we willen dat de reflectie boven alle scheepslagen ligt, zodat deze gemakkelijker te zien is. Plak op de reflectielaag zelf het masker en geef een mengmodus op het scherm.
Laten we reflecties toevoegen aan onze isometrische panelen met behulp van eerdere technieken. Deze keer is vloeibaar maken echter niet nodig.
Nu zullen we onze illustratie voorzien van een stukje tekst. Dit zou kunnen zeggen wat je maar wilt. Hier hebben we Japanse tekst gebruikt - "ケ ツ ァ ル コ ア ト ル" wat staat voor "Quetzalcoatl". Maak de tekst rood, ff0000 en voeg een aantal hoogtepunten en laagmasker toe.
We zijn er bijna! Het enige dat overblijft is het verbeteren van de atmosfeer. Voeg een nieuwe map met de naam "sfeer" toe in Photoshop en pas een aanpassingslaag voor verloopvullingen toe om een transparante regenbooggradiënt te maken en volg de hieronder aangegeven parameters. Ga naar Laag> Rasteren> Inhoud vullen. Zet de mengmodus op Overlay @ 65% en masker weg. Herhaal dit proces een paar keer door de afbeelding heen.
Maak een rode contour rond onze illustratie met een rood gloed- en laagmasker.
Ten slotte gaan we door met het aanpassen van de atmosfeer met wat airbrushen en subtiele verloopvullingen. Bekijk de referentie-PSD die wordt aangeboden, zodat u andere subtiele nuances kunt zien die zijn toegevoegd om de sfeer en diepte aan te passen.
Accentsconagua