Share
Ten eerste, rekwisieten voor Dan Wiersema (mijn vriend en Creative Director bij Guifx) omdat het de hersens waren achter deze tutorial. Concept en draadframe werden beide door hem ontwikkeld. Hij hielp me ook om de plooien glad te strijken in termen van het beoordelen van mijn werk van begin tot eind.
In deze zelfstudie maken we een interface voor het hoofdmenu voor een fictief iPhone-spel. We gaan door met het instellen van Photoshop om de grootte van het doelscherm nauwkeurig weer te geven, een draadframe voor het project in te stellen, een achtergrond te maken, een logo te maken, een rotstextuur voor de zijbalk en een houtstructuur voor de opgeslagen spellenbox en knoppen . We voegen ook het toevoegen van groen toe voor detail en goede maat. Dit wordt een lange, dus geduld is een deugd. Ook helpt koffie!
Bekijk de afbeelding die we gaan maken.
Ga naar pxcalc.com en volg de instructies. Als u dit doet, kunt u het ontwerp in zijn uiteindelijke grootte bekijken - De werkelijke grootte van het eigenlijke iPhone-scherm - op uw eigen computer.
Maak een nieuw document met een breedte van 480px bij 320px hoogte, met een resolutie van 164,83 pixels / inch. Stel de kleurmodus in op RGB 8bit.
Ik raad aan om een draadmodel voor uw project te maken zoals in de onderstaande afbeelding. De beste manier om dit te doen, is door met uw Zoom-tool rechts te klikken en de afdrukgrootte te kiezen. Als u stap 1 hebt gevolgd, bekijkt u nu uw document op de exacte grootte die de eindgebruiker op zijn / haar iPhone zal hebben. Dit helpt u te bepalen hoe groot de knoppen moeten zijn om voldoende op een apparaat met aanraakscherm te werken. Opmerking: probeer fysiek op het scherm te klikken en vergeet niet om dikke vingers in aanmerking te nemen.
Gebruik het gereedschap Rechthoek en sleep ruwe plaatshandleidingen naar de verschillende elementen. Houd de kleur van de vormen wit en voeg een zwarte 1px-binnenstreep toe. Het is ook een goed idee om het concept te bespotten met potlood en papier. Zelfs als je geen goede freehand-artiest bent (ik doe het niet, maar ik doe het nog steeds), helpen servetschetsen je om je blik op de prijs te houden!
Maak een nieuwe laag en noem deze "Achtergrond". Zet je voorgrondkleur op # 5e1114 en je achtergrond op # 140306. Selecteer het gereedschap Verloop en sleep met de onderstaande instellingen van boven naar beneden zoals de pijl aangeeft.
Breng de volgende laagstijlen aan op de laag "Achtergrond".
Reset je voorgrond- en achtergrondkleuren naar zwart en door op de D-toets op je toetsenbord te klikken. Maak een nieuwe laag en noem deze "bg_clouds." Ga nu naar Filter> Renderen> Wolken. Zet de overvloeimodus van deze laag op Overlay. Dep erop in willekeurige gebieden met het gummetje, stel met een zachte borstel in op een laagdekking van 30-50% om interessante hoogtepunten te creëren. Probeer mijn resultaat hieronder te matchen.
Download deze afbeelding van sxc.hu (bedankt Javier González). Noem de laag "kasteel", verklein hem en plaats hem ruwweg in het midden bovenaan het podium. Stel de overvloeimodus van de laag in op Vermenigvuldigen en de dekking op 60%. Gebruik het gereedschap Gum om scherpe randen te wissen. Hieronder is mijn resultaat na deze stap.
Oké, tot nu toe zo goed. Laten we beginnen met het maken van ons logo. Pak je Pen-tool en maak de omtrek van een drakenkop. Om dit te doen, kun je een willekeurige drakenafbeelding traceren of zelf een afbeelding maken. Deze zal echter eindigen met enkele heavy-duty laagstijleffecten, dus probeer de vorm redelijk eenvoudig te houden.
Er is een grote verscheidenheid aan vrije vormen en dingbats die je zou kunnen gebruiken als je geen tijd wilt spenderen aan het traceren of het bedenken van een drakenkop. Waar een wil is is een weg.
Dupliceer je vorm 2 keer (laag> dubbele laag ...), zodat je 3 drakenkoplagen hebt. Noem de onderste "dragon_1", de middelste "dragon_2" en de bovenste "dragon_3".
Tijd om onze draak te laten schijnen. Deze techniek is grotendeels gebaseerd op de tutorial van Elliot AKA TrueLovePrevails over het repliceren van de stijl van het Warcraft-logo, dus een enorme thanx gaat naar hem uit voor het ontwikkelen van deze fantastische techniek en voor het gebruik door mij. Klik hier om de originele tutorial te bezoeken.)
Pas de volgende laagstijlen respectievelijk toe op elke laag, te beginnen met de laag 'dragon_1'
Breng nu de volgende laagstijlen aan op 'dragon_2' en zet deze laag op laagdekking op 0%.
En weer naar "dragon_3" en vul de laagdekking van deze laag in op 0%.
Goed, draak ziet er goed uit - kijk! De volgende is de tekst.
Ga naar Fontcraft.com en download of koop Scurlock. Scurlock is gratis als een demofiguur, dus lees de gebruiksvoorwaarden en koop een licentie als u dit lettertype voor commerciële doeleinden wilt gebruiken.
Selecteer uw Type Tool en stel de grootte in op 60pt. Typ de tekst "Dragon". Klik met de rechtermuisknop op de laag en selecteer Converteren naar vorm. De reden hiervoor is dat we de onderstreping van de "o" willen verwijderen. Om dit te doen gebruiken we de Direct Selection Tool. Activeer het vectormasker door op de miniatuur te klikken en alle knooppunten van de onderstreping te selecteren en druk op delete op het toetsenbord. Als u ze niet allemaal in één keer kunt krijgen, houdt u Shift ingedrukt om aan de selectie toe te voegen.
Pak vervolgens het pad selectiegereedschap en klik op de "o." Ga naar Bewerken> Vrije transformatie en sleep het middelste knooppunt naar beneden, zodat de "o" eruit ziet als bij de rest van de tekst. Dupliceer de laag nu twee keer, net als bij de drakenkop. Benoem de lagen van de onderste en omhoog "dragontext_1," "dragontext_2," en dragontext_3 "respectievelijk.
Laten we de laag "kasteel" voorlopig verbergen, want het is van weinig belang voor de lay-out en veroorzaakt vooral een beetje afleiding tijdens het ontwerpen.
Klik met de rechtermuisknop op de laag "dragon_1" en selecteer "laagstijl kopiëren". Klik nu met de rechtermuisknop op de laag "dragontext_1" en selecteer Laagstijl plakken. Klik met de rechtermuisknop op de laag "dragon_2" en selecteer Laagstijl kopiëren. Klik nu met de rechtermuisknop op de "dragontext_2" -laag en selecteer Laagstijl plakken. Verander de dekking van de schaduwmodus onder schuine rand en emboss tot 43%.
Selecteer "dragontext_3" en zet de vuldekking op 0%. Pas vervolgens de stijlen toe die worden weergegeven in de onderstaande afbeelding. Herhaal, als u klaar bent, stap 9 en 10 voor de "Storm" -tekst (noem de lagen stormtext_ #) en plaats de tekst ongeveer zoals hieronder getoond.
Command-cick de vectormasker-thumbnail van de "dragontext_2" -laag om de selectie te laden. Je zult de marsmieren rond je tekst zien verschijnen. Zorg ervoor dat "dragontext_2" uw actieve laag is, want dit zorgt ervoor dat we de aanpassingslaag plaatsen die we net boven "dragontext_2" zullen maken.
Klik nu op de knop Nieuwe vul- of aanpassingslaag maken die zich onder uw lagenpalet bevindt. Selecteer in de lijst Kleurbalans en pas de onderstaande instellingen toe. Klik daarna op Command + D om de selectie ongedaan te maken. Doe nu hetzelfde voor de laag "swordtext_2".
Details spreken voor zich, dus laten we wat meer tekst invoegen voor extra effect. Type "Scroll of the Wicked" opnieuw met het Scurlock-lettertype, met een grootte van 18.5 pt. Stel voor de "Scroll" en "Wicked" tekst de tekst in op 14.5 pt. Gebruik "van de" tekst # C9C9C9 als de tekstkleur en pas de volgende laagstijlen toe.
Hopelijk ben je nog steeds bij mij. Laten we doorgaan naar de zijbalk.
Gebruik uw Pen-tool om een blokachtige vorm te creëren zoals in de onderstaande afbeelding. Wees creatief hier. Er is geen goed of fout bij het maken van dingen als deze, dus gooi gewoon een vorm samen zonder al te veel aandacht te besteden aan details. Dupliceer deze laag en noem de bovenste "sidebar_base". Noem de onderste "sidebar_perspective". Breng nu de volgende laagstijlen aan op de laag "sidebar_base".
Verschuif de "sidebar_perspective" -laag 6 px naar links, klik er met de rechtermuisknop op en selecteer Lagen Rasteriseren.
Stel het Burn-gereedschap in met de onderstaande instellingen en schilder de perspectiefrand - houd de lichtbron uit de conceptschets in gedachten - waar het licht het minst waarschijnlijk zal raken. Verfeer met de Dodge Tool de tegenoverliggende gebieden. Wanneer ik dit voor steentexturen doe, merk ik dat het effectiever is om te deppen dan te aaien, omdat dit de illusie van een ruw oppervlak creëert. Geef als laatste de laag een slagschaduw.
Download deze penseelset van Lee Richardson. Maak een nieuwe laag boven "sidebar_base" en noem deze "sidebar_texture_1." Klik nu met de rechtermuisknop op de laag "sidebar_base" om de vormselectie te laden. Zonder Command los te laten, druk je op Shift om aan de selectie toe te voegen en klik je op de laag "sidebar_perspective". Pak vervolgens je penseel en selecteer de tweede penseel van de set die je zojuist hebt gedownload. Met je voorgrondkleur ingesteld op zwart, klik je eenmaal in de selectie en klik je op Command + D op je toetsenbord. Zet de dekking van deze laag op 50%.
Zet je voorgrondkleur op # 160A02 en maak een nieuwe laag. Noem deze - je raadt het al - "sidebar_texture_2." Herhaal het proces vanaf stap 15, dit keer met de vierde penseel van de set. Het is kleiner, dus je hebt twee klikken nodig om het hele oppervlak te bedekken. Ga met deze laag geselecteerd naar Filter> Vervagen> Gaussiaans vervagen. Stel het in op een straal van 1,5 en klik vervolgens op OK. Je zou zoiets als de afbeelding hieronder moeten hebben.
Laten we wat onvolkomenheden aan het rotsoppervlak toevoegen. Maak een nieuwe laag en noem die "kraakt". Selecteer het penseel en varieer tussen een hoofdstraal van 2px tot 5px, hardheid 60% tot 80% en houd het penseel Dekking op 55%. Probeer je geen zorgen te maken om het te krijgen rechts. De laagstijl zal het meeste werk doen en de raarste vorm kan geweldig zijn. Als je tevreden bent met de scheuren, pas dan de volgende laagstijl toe en word nog gelukkiger.
Maak nog een andere laag, deze boven de laag "cracks" en noem het "edge_bumps". Selecteer het potloodgereedschap met een moederdiameter van 1 px en teken wat onvolkomenheden in zwarte kleur langs de onderstaande gemarkeerde lijn. zet de laagdekking op 76% en pas daarna de volgende laagstijl toe op de laag.
Maak een nieuwe laag boven de laag "edge_bumps". Command-klik op de laag "sidebar_perspective". Pak een van de standaard spattenborstels van Photoshop en dep hier en daar langs de rand, terwijl u de dekking Dekking nog steeds op 55% houdt. Kopieer de laagstijl van de laag "edge_bumps" en plak deze laag op deze laag. Zet de lagen Dekking op 55%.
Laten we verder gaan met het maken van het hout. Maak een vorm zoals hieronder voor ons grote houten opgeslagen spelbord. Zet de kleur van de vorm op # 463118. Roep de laag "saved_games_base" aan en pas de volgende stijlen toe.
Gebruik de Pen Tool om de vorm te repliceren die hieronder staat en plaats deze onder de laag "saved_games_base". De belangrijke randen zijn rood gemarkeerd. Noem het "saved_games_perspective" en stel de kleur van deze vorm in op # 14100D. Pas ook een slagschaduw toe, zoals afgebeeld.
Download de eerste textuur uit deze textuur die is ingesteld door cgtextures.com. Laat het op je podium vallen en verklein het of roteer het totdat je tevreden bent hoe het eruit ziet. Plaats het boven en over de laag "saved_games_base" en hernoem het "wood_texture_1". Klik met de rechtermuisknop op "saved_games_base" en Command + Shift-klik op "saved_games_perspective" om aan de selectie toe te voegen. Selecteer "wood_texture_1" en klik op de knop Maskerlaag toevoegen, die zich onder het lagenpalet bevindt. Stel deze overvloeimodus in op Zacht licht.
Dupliceer deze laag één keer, noem deze "wood_texture_2", zet de overvloeimodus op Overlay en Dekking op 15%.
Herhaal stappen 20-22 voor de knoppen. Probeer het verloop een beetje te variëren en gebruik gereflecteerd in plaats van radiaal. Om uw lagen bij te houden, wilt u misschien de knoplagen aan een groep toevoegen. Probeer de resultaten hieronder te matchen.
Laten we de zaken wat verlichten. selecteer de bovenste laag van het document en klik op de nieuwe vul- of aanpassingslaag maken, net zoals we in stap 11 voor de tekst hebben gedaan. Selecteer deze keer niveaus in de lijst en sleep het middelste knooppunt naar 1.39, iets naar links.
Command-klik op de laag "Stormtext_1", druk nu op Command-shift en klik op de lagen "dragontext_1" en "dragon_1". Selecteer de laagminiatuur op niveaus en ga naar Bewerken> Opvulling en vul de selectie met zwart. De tekst en dragonhead worden nu niet beïnvloed door de laag niveaus.
Vervolgens gaan we een aanpassingslaag voor helderheid / contrast toevoegen, met behulp van exact dezelfde methode die we hebben gebruikt voor niveaus, waaronder het zekerstellen van de "Dragon Storm" ALLEEN TEKST deze tijd wordt niet beïnvloed door deze laag door deze te maskeren. Stel de helderheid in op 25 en contrast op 35.
Maak met je Rectangle Tool, boven de laag "wood_texture_2", een vierkante vorm zoals in de onderstaande afbeeldingen. Noem deze laag "inset_rim", dupliceer nu deze laag en noem de bovenste "inset_base".
Pas de volgende stijlen respectievelijk toe, beginnend met "inset_rim" en met een vuldekking van 0%.
Gebruik voor "inset_base" dezelfde instellingen en een vuldekking van 60%.
Dupliceer beide "inset_rim" en "inset_base" twee keer en plaats zoals getoond onderaan de onderstaande afbeeldingen.
Download "Livingstone" van PrimaFont van dafont.com. Typ alle tekst die u hieronder ziet, met #ECDECB als de tekstkleur. Grootte is niet zo belangrijk, probeer gewoon ongeveer overeen te komen wat hieronder wordt getoond. Pas dan de volgende stijl toe op al deze tekstlagen.
Zet je voorgrondkleur op # 636363 en maak een nieuwe laag onder de knoppen. Gebruik je penseelgereedschapset tot 85% hardheid met een moederdiameter van 1 px, schilder a O vorm, zoals in de onderstaande afbeelding. Zie de marching ant-selectie. Dupliceer het en plaats de kopieën zoals getoond.
Voer de bovenstaande stap uit voor alle gebieden in de afbeelding hieronder met kettingen en pas de volgende stijl op alle lagen toe. Het worden veel lagen, dus gebruik groepen om ze bij te houden.
Laten we de laag "kasteel" opnieuw zichtbaar maken. Omdat we ons nu bezighouden met de detailleringsfase van dit project is het goed om een duidelijk beeld te krijgen van wat het eindresultaat zal zijn.
Gebruik nu opnieuw je pentool, met zwart ingesteld op je voorgrondkleur, en maak een vorm zoals die in het vak met opgeslagen spellen hieronder. Maak het voornamelijk vierkant, maar snij de hoeken om het een interessantere vorm te geven. Noem deze laag "tablet". Pas de volgende laagstijlen toe:
Gebruik het lettertype Livingstone opnieuw, typ de tekst die je ziet in de stenen steentablet hieronder opgeslagen en pas de volgende laagstijlen toe. Als u klaar bent, dupliceert u de hele tablet en plaatst u deze in het tweede vak, zoals wordt weergegeven in de onderstaande afbeelding.
Zet je voorgrondkleur op # 2E343A en maak met je Pen Tool een kleine ruitvorm (ongeveer 10px bij 10px). Dit wordt de basis van onze klinknagels. Noem de laag "rivet_inset" en dupliceer deze twee keer. Noem de middelste klinknagellaag "rivet_base" en de bovenste "rivet_style". Voeg respectievelijk de volgende stijlen toe, beginnend met "rivet_inset."
Breng nu de volgende laagstijlen aan op de laag "rivet_base".
Breng nu de volgende laagstijlen aan op de laag "Rivet_style".
Dupliceer nu de hele klinknagel drie keer en plaats er een in elke hoek van de opgeslagen speldoos, net zoals in de onderstaande afbeelding.
Maak 4 kleine cirkels (ongeveer 4 px x 4 px) aan de basis van de opgeslagen spellen, gebruik het ellipsgereedschap en # CCB55A als je voorgrondkleur. Dit zijn de pagina-indicatoren die vaak worden gevonden in iPhone-applicaties. Bij de eerste drie, pas deze stijlen toe.
Wijzig de kleur van de vierde cirkel in # FFA200 door te dubbelklikken op de miniatuur van de vormkleur. Pas dan de volgende stijl toe.
Tijd om de laatste en waarschijnlijk de moeilijkste stap te nemen. Dit kan in feite een hele andere zelfstudie zijn, maar ik zal proberen het eenvoudig te houden. Ik ga proberen dit zo goed mogelijk uit te leggen met behulp van afbeeldingen, maar het wordt een leren door ervaring te doen voor iedereen die deze techniek nog niet kent.
Optioneel kunt u ook een onscherp masker toevoegen aan het blad als u meer details wilt. Instellingen zouden in de lijn liggen van Bedrag 50%, Radius 0,5px en drempelwaarde van 0 niveaus.
Voeg groen toe, hier en daar om het er interessanter uit te laten zien. Je zou zelfs nog verder kunnen gaan dan ik en ook wat toevoegen aan de opgeslagen spellenbox. Bedankt voor het volgen van deze tutorial en ik hoop dat je een aantal nieuwe technieken hebt geleerd. Hieronder staat het eindresultaat.
Accentsconagua