Share
In deze tutorial maak je een semi-realistisch, sci-fi-pictogram dat kan worden gebruikt als een batterij- of dock-pictogram. Laten we beginnen!
Maak een 256 x 256-document met 72 DPI. Dit is een heel gebruikelijke afbeeldingsgrootte voor een dock-pictogram. De achtergrondkleur kan worden ingesteld op wit of transparant.
Laten we het canvas instellen door een witte achtergrondlaag te maken als je dat nog niet hebt gedaan. Je zult dit later nuttig vinden wanneer je achtergrondcontrast moet zien door de achtergrondlaag Cmd / Ctrl + I om te keren. Geef je linialen weer en sleep een nieuwe gids naar het midden.
Gebruik het hulpmiddel Ellipse (U) om een ovaal bovenaan het midden van het canvas te tekenen met deze kleur # e1e1e1. U kunt het centreren door het hele document Cmd / Ctrl + A te selecteren en het verplaatsgereedschap (V) te gebruiken en op het pictogram op de bovenste balk te klikken zoals weergegeven in het diagram. Noem deze "Circle Top". Dupliceer deze laag veertien keer door Alt + Omlaag ingedrukt te houden met het verplaatsgereedschap (V). Samenvoegen van de veertien gedupliceerde lagen kan het 'cirkellichaam' noemen. Zet deze laag onder "Circle Top."
Pas de volgende stijl toe op "Circle Top" om het een metalen look te geven. Innerlijke Gloed heeft de neiging om het Frensel-effect te geven, terwijl Gradient Overlay het een dimensie geeft.
Pas de volgende stijl toe op 'Circle Body'.
Je zou iets moeten hebben dat er zo uitziet.
Maak een nieuwe laag boven 'Circle Top' en noem het 'Edge'. Cmd / Ctrl-klik op de "Circle Top" -miniatuur voor de selectie. Vul het met wit met behulp van de Paint Bucket Tool (G). Verschuif de selectie met 1 px omhoog en druk op Delete. Gebruik de gumtol (E) met een diameter van ongeveer 60px en een hardheid van 0% en klik eenmaal aan de linker- en rechterkant van de cirkel. Maak hierboven een nieuwe laag en gebruik dezelfde methode om de selectie van "Circle Top" te krijgen. Noem deze laag "Glans". Gebruik een witte zachte borstel met een diameter van 60px en klik eenmaal in het midden onderaan de cirkel. Breng de dekking terug naar 80%. Dit geeft het een krokant en glanzend uiterlijk.
Maak een nieuwe laag en noem deze "Reflectie". Gebruik het gereedschap Rechthoekig selectiekader (M) en teken een rechthoek aan de zijkant van het "cirkellichaam" en vul (G) het met wit. Ik heb de achtergrondkleur omgekeerd zodat je hem duidelijker kunt zien. Verkrijg de selectie van "Circle Body" en keer het om Cmd / Ctrl + Shift + I. Druk nu op delete en zet de dekking op 10%. Dit lijkt nauwelijks op een verschil, maar deze hele stap heeft een grote impact op het ontwerp.
Maak een nieuwe laag en noem deze "Bulb." Verkrijg de selectie van "Circle Top" en vul (G) het met # 80fa96. U kunt elke gewenste kleur gebruiken, maar voor deze zelfstudie gaan we iets gelig groen. Voer de vrije transformatie in Cmd / Ctrl + T en houd Shift + Alt ingedrukt en sleep een van de hoeken naar binnen totdat je tot de conclusie komt dat het de grootte is van de bol die je wilt.
Breng nu de volgende stijl aan voor een gloei-effect.
Je kunt alle lagen waar we aan werkten nu groeperen, behalve de achtergrond, en er een naam aan geven. Ik heb de mijne 'hoofd' genoemd. Maak een nieuwe groepsoproep 'Top body'. Maak een nieuwe laag binnen deze groep en noem deze "Top". Gebruik het gereedschap Pen (P) en teken wat u op het diagram ziet. Vergeet niet om het perspectief in gedachten te houden bij het tekenen van 3D-pictogrammen. Vul nu (G) de vorm met # d7d7d7 met de rechtermuisknop> Vul pad.
Als u klaar bent, past u de volgende stijl toe.
Het is tijd dat het glans en reflectie toevoegt. Dit is een goed moment om gebruik te maken van een zwarte achtergrond. Selecteer je achtergrondlaag en keer het om Cmd / Ctrl + I. We beginnen met de randen. Maak een nieuwe laag en noem deze "Left Edge". Verkrijg de selectie van de "Top" -laag en vul (G) het met wit. Schuif de selectie omhoog en naar rechts op 1px en druk op Delete. Verkrijg de Eraser Tool (E) met een diameter van 70px, 0% hardheid en klik eenmaal een beetje uit de linkerhoek. Bekijk het schema om te zien wat ik bedoel.
Teken met dezelfde techniek een 1 px-rand rechtsonder op een nieuwe laag met de naam "Rechterrand". Wis beide uiteinden van de lijn met het Eraser Tool (E).
We gebruiken het gereedschap Pen (P) om de reflectie te tekenen. Volg het diagram en vul dan (G) het met wit en zet de dekking op 20%.
Met het realisme in het achterhoofd, voegen we een weerspiegeling van zichzelf toe. Verkrijg de selectie van "Circle Body" en vul (G) het met zwart. Schuif het naar beneden net onder het lichaam. Zet de dekking op 20%. Ik weet dat we het origineel moeten gebruiken in plaats van een zwart beeld te gebruiken. Maar soms is het goed om de regels te overtreden om te krijgen wat je wilt.
Maak een groep met de naam "Body Face" en een nieuwe laag binnen met de naam "Face". Gebruik het pengereedschap (P) en trek het volgende eruit. Vergeet niet om de punten uit te lijnen met de bovenste metalen plaat en de curve zo symmetrisch mogelijk te houden. Als u een rechte lijn wilt tekenen, drukt u op Shift wanneer u een nieuw punt maakt.
Pas de volgende laagstijl toe.
Het is tijd om reflectie en glans aan dit gebied toe te voegen, zoals we deden voor de anderen. Gebruik de selectiemethode die ik je eerder heb geleerd en maak een 1px witte rand rechts van 'Face'. Gebruik een zachte wisser (E) van ongeveer 100 px en borstel de twee uiteinden van de lijn. Zet Dekking op 70%. Maak een nieuwe laag en noem deze "Donker". Verkrijg de selectie van "Face" en gebruik een zwart lineair verloop (G) en sleep het van boven naar beneden zoals getoond. Wist vervolgens (E) de onderkant met 0% hardheid en ongeveer 100 px. Ga gewoon rond de rand bij het poetsen, en houd de rand ver van de selectie, zodat het er zo uitziet. Stel vervolgens de dekking in op 10%.
Maak een nieuwe laag met de naam "Brush Shine". Verkrijg de selectie van "Face" en Brush (B) de boven- en onderkant met wit, zodat het gebied er ongeveer zo uitziet. Stel vervolgens Dekking in op 20%.
Maak daarna een nieuwe laag met de naam 'Dark Reflection'. Gebruik het gereedschap Pen (P) en teken de weergegeven vorm en vul (G) het met zwart. Verwijder het gebied buiten de selectie van "Face" zoals ik eerder heb geleerd. Zet de dekking op 4%. Herhaal het proces, maak een witte "Reflectie" -laag met een laagdekking van 10% bovenaan. Je zou iets als hieronder moeten hebben.
Op naar het volgende gedeelte, maak een nieuwe groep met de naam "Binnen" en vervolgens een nieuwe laag met de naam "Frame". U kunt een gereedschap Met veelhoekige lasso (L) of gereedschap Pen (P) gebruiken om het kader van de binnenkant te tekenen. Gebruik # 777777 als de kleur. Probeer overal een consistente breedte te behouden.
Pas de stijl op deze laag toe.
Maak nu een nieuwe laag met de naam "Dark Edge" en maak een 1px zwarte rand aan de linkerkant van "Frame". Zet Dekking op 20%. Maak vervolgens een nieuwe laag met de naam "Hoek". We geven dit pictogram een inzet zodat het er niet zo plat uitziet. Ook hier kunt u Polygonal Lasso Tool (L) of Pen Tool (P) gebruiken om dit te tekenen. Gebruik # 5c5c5c als de kleur.
Pas de volgende laagstijl toe op "Hoek".
Laten we er schaduw aan toevoegen. Maak een nieuwe laag met de naam "Darkness". Gebruik een zwart lineair verloopgereedschap (G) met transparantie om te schilderen in de selectie van "Hoek". Stel vervolgens de dekking in op 10%.
Maak nu een nieuwe laag met de naam 'Innerlijk Lichaam'. Teken een rechthoekgebied voor de binnenkant met # 161616. Een snelle tip is om hulplijnen te gebruiken als strategisch punt om objecten te tekenen, en gebruik selectie van andere lagen om ongewenste gebieden te verwijderen. Ik heb de achtergrondkleur omgekeerd zodat je duidelijk kunt zien.
Pas deze laagstijl toe en we zijn er halverwege! Donkere binnenste schaduw en verloopoverlay helpen om een sterke diepte te geven.
Het is tijd om enige verlichting aan de rechterkant van het pictogram voor te bereiden zonder het hele stuk opnieuw te hoeven doen. Maak een nieuwe groep met de naam 'Voor wijzigingen aan de rechterkant'. Maak een nieuwe laag naar binnen en noem het wat je wilt, ik noemde het "Darken For Right Side." Maak gebruik van voorgaande lagen en vul (G) het met zwart en zet dan Opacity op 20%.
Dit zijn die voor elke laag samen met de dekking.
Zo ziet het eruit na het instellen van dekking.
We moeten een kopie van deze laag dupliceren en deze voor de rechterkant gebruiken. Verberg eerst de achtergrondlaag en de "Hoofd" -groep door op het oogpictogram ernaast te klikken. Maak een nieuwe laag en voeg zichtbaar Cmd / Ctrl + Shift + E samen. Voer vrije transformatie Cmd / Ctrl + T in en draai het horizontaal aan de rechterkant Referentiepunt Locatie met rechterklik> Horizontaal spiegelen en het middelste draaipunt naar rechts slepen. Verberg de groep "Voor wijzigingen aan de rechterkant" en maak de vorige groepen en lagen zichtbaar.
Maak een nieuwe groep met de naam "Right" en plaats de gedupliceerde laag erin. We hebben wat verlichting om toe te voegen. Omkeer Cmd / Ctrl + I de achtergrond en maak een nieuwe laag met de naam "Vloerschaduw". Teken de schaduw zoals zo.
Open de snelmaskermodus (Q) en gebruik het gereedschap Lineaire kleurovergang (G) om zoiets in te vullen. Probeer het verloop uit te lijnen met de schaduw. Sluit vervolgens de Snelle maskermodus (Q) en pas een 3px Gaussiaans vervagen toe onder Filter> Vervagen> Gaussiaans vervagen.
Verwijder de gebieden die het pictogram raken en zet Dekking op 30%. Voeg een vectormasker toe door op het pictogram rechts onder aan het lagenpaneel te klikken. Het lijkt op een rechthoek met een cirkel erin. Gebruik ergens rond een middelgrijs lineair verloopgereedschap (G) om de andere zijde van de schaduw in te vullen, zodat deze vervaagt.
Maak een nieuwe laag met de naam "Side" en teken een zwarte rechthoek zoals getoond met ofwel Rectangular Marquee Tool (M) of Rectangle Tool (U). Pas een 5px Gaussiaans vervagen toe, variërend als je wilt. Zet Dekking op 30% en verwijder de gebieden die de rechterzijde van het pictogram niet raken.
Maak een nieuwe laag met de naam 'Edge Stroke'. Teken een witte lijn langs de binnenrand van het metaal ("Corner") met behulp van het 1px-lijngereedschap (U). Gebruik vervolgens een zacht gum (E) met een diameter van ongeveer 40px om beide uiteinden van de lijn te wissen. Maak nu een nieuwe laag met de naam "Edge Blur." Gebruik een Rechthoekig selectiekadergereedschap (M) of Lijngereedschap (U) en teken een 1px witte lijn in het midden van het scherm met behulp van een gids, indien nodig. Voeg vervolgens Gaussiaans vervagen van 1 px toe en zet de dekking op 20%.
Maak een nieuwe groep met de naam 'Ringen', een andere groep binnen met de naam 'Glas' en een laag binnen met de naam 'Glas'. Eerst moeten we wat schetsen maken om een idee te krijgen hoe onze 3D-ronde buis eruit zal zien. Hier zal ik je laten zien hoe ik de omtrek van de vorm bereik met behulp van cirkels, en dan een Pen Tool (P) om de linkerhelft van de buis te traceren.
Vul de vorm met wit en snij de ongewenste helft van de vorm af. Dupliceer het en draai het naar rechts en voeg het samen met de andere kant.
Stel Fill in op 3% en pas deze stijlen toe.
Het is tijd om reflectie en glans toe te voegen, en dit is meestal het moeilijke gedeelte, dus raad ik aan om rond te kijken naar bril en tube en te zien hoe de reflectie en dekking werken. Maak eerst een nieuwe laag met de naam "Top Half Shine". Verkrijg de selectie van "Glas" en vul deze met wit. Verschuif de selectie ongeveer 10 px of halverwege de tube. Voeg een vectormasker toe en borstel (B) de randen van de glans zodat het er ongeveer zo uitziet. Gebruik een diameter van ongeveer 25px. Zet Dekking op 30%. Tip, met Vector Mask kunt u experimenteren zonder uw afbeelding te vernietigen.
Maak een nieuwe laag met de naam "Upper Top Shine". We herhalen het proces, maar met een dunnere glans. Veeg voor dit E (E) de randen zodat het goed inpast en Zet de dekking op 30%.
Maak een nieuwe laag met de naam "Dikke lijn". gebruik een pengereedschap en teken een korte curve die lijkt op de kromming van de buis. Zet je penseel op 3px in diameter, 100% hardheid en wit. Bereken het pad met behulp van het gereedschap Pen (P) Klik met de rechtermuisknop> Lijn volgen, kies Penseel en controleer Druk simuleren en klik vervolgens op OK. Zet Dekking op 30%. Je kunt verplaatsingstool (V) gebruiken om je lijn te verplaatsen als je hem eerder niet nauwkeurig hebt getekend.
Maak een nieuwe laag met de naam "Thin Line." Gebruik opnieuw dezelfde techniek, maar deze keer met een 1px Brush (B) en zonder Simulate Pressure. Verwijder vervolgens de twee uiteinden van de lijn met Wissen (E) of Masker en zet Dekking op 90%. Breng een 4px witte buitenste gloed aan met een dekking van 40% voor de laagstijl.
We zijn halverwege de reflectie. Maak een nieuwe laag met de naam "Side Shine". Gebruik het gereedschap Pen (P) om een vorm van de curve te tekenen, volgens de vorm van de buis. Klik vervolgens met de rechtermuisknop op> Pad vullen met wit. Voeg vectormasker toe en begin met poetsen (B) met een zachte borstel langs de zijkanten van de glans, zodat deze naar beneden en naar rechts vervaagt. Zet Dekking op 40%. Verkrijg de selectie van "Glas" en omkeren Selectie Cmd / Ctrl + Shift + I en druk vervolgens op verwijderen.
Nu maken we de randen / randen van de tube zodat deze er niet zo vlak uitziet. Maak een nieuwe laag en maak een 2px witte rand aan de linkerkant van "Glas". Doe hetzelfde voor de rechterkant en voeg de twee lagen samen. Zet Dekking op 40%. Pas afschuining en reliëf van grootte 0px en 100% dekking toe voor Hooglicht en schaduw.
We moeten nog een belangrijk detail voorbereiden op de buis. Maak een nieuwe laag met de naam "Groene reflectie". Gebruik de selectie van "Glas" en vul (G) de onderste helft van het gebied met # 3bf75f. Voeg vervolgens Vectormasker en Penseel (B) de boven- en zijkanten van het gebied toe, zodat het iets vervaagt. Zet de mengmodus op Lineair ontwijken (toevoegen) en dekking op 25%. Dit voegt realsim toe, omdat de gloeiende groene ringen eronder een reflectie op de ring erboven zullen creëren.
Nu is het tijd om deze afbeeldingen voor te bereiden voor duplicatie. We hebben één glas met de groene reflectie nodig, dus maak een nieuwe laag in deze groep en klik dan Alt-klik op het oogpictogram van de groep. Zichtbaar samenvoegen Cmd / Ctrl + Shift + E. Alt-klik nogmaals op het oog en verberg de groene reflectie en herhaal het duplicatieproces. Doe hetzelfde nu ook zonder het "Glas". Dus nu zou je 3 soorten duplicaten moeten hebben, glas met groene reflectie, glas zonder groene reflectie, alleen de reflectie, maar niet de groene.
Maak een nieuwe laag met de naam "Eén ring", selecteer "Glas" en vul deze (G) met # 3cf760. Zet het neer met 80 px met Shift + omlaag. Je kunt dit in een nieuwe groep plaatsen en het noemen wat je maar wilt. Ik heb mijn "1" genoemd omdat deze niveau 1 zal zijn. Pas deze stijlen toe op de gloed en dimensie.
Weet je nog de reflectielaag die we eerder hebben gemaakt? Dupliceer het en plaats het recht boven de groene ring. Later dupliceer je degene met groene reflectie en plaats je deze in het midden. Dupliceer het witte glas en je zou dit moeten hebben.
Doe hetzelfde voor elk niveau, plaats ze in groepen of voeg ze samen als je wilt.
Maak een nieuwe laag met de naam "Schaduw" onderaan de groep "Ringen". Gebruik de selectie van "Glas" om te vullen (G) met zwart. Zet het (V) ongeveer 15px neer. Selecteer de helft van de schaduw en lijn deze uit zodat deze de zijkant van de buis raakt. Klik in de vrije transformatie Cmd / Ctrl + T-modus met de rechtermuisknop op> Schuintrekken. U kunt de selectie beter isoleren door deze uit de plaats en terug te duwen, nadat u deze hebt geselecteerd met Rechthoekig selectiekader (M). Doe hetzelfde voor de andere helft. Dupliceer het voor drie tubes en zet vervolgens Dekking op 20%. Gebruik Polygonal Lasso Tool (L) om de gebieden te verwijderen die het pictogram niet aanraken.
We zijn bijna klaar. We voegen enkele definitieve details toe. Maak eerst de achtergrondlaag zichtbaar en de laag "Vloerschaduw" in de groep "Rechts". Maak vervolgens een nieuwe laag en voeg zichtbare Cmd / Ctrl + Shift + E samen. Verander de lagen die je net hebt verborgen. Maak een nieuwe laag helemaal bovenaan en noem het "Ruis", selecteer de samengevoegde laag en vul met (G) het met 50% grijs. Pas 10% Gaussiaanse, monochromatische ruis toe onder Filter> Ruis> Ruis toevoegen. Zet de overvloeimodus op Overlay en Dekking op 10%. U kunt nu de samengevoegde laag verwijderen. Je zou niet veel verschil merken, maar het helpt om die imperfecte look te creëren.
Maak een nieuwe laag net boven de achtergrondlaag en noem deze "Schaduw". Gebruik de veelhoekige lasso-tool (L) om zoiets te tekenen, waarbij de basis van het pictogram ongeveer wordt geschetst. Pas een 6 px Gaussiaans vervagen toe en zet de dekking op 60%. Eindelijk bent u klaar!
Nu u klaar bent met uw pictogram, exporteert u eenvoudig de pictogrammen elk met een ander niveau door de benodigde ringen te verbergen en zichtbaar te maken.
Accentsconagua