In deze zelfstudie maken we een kleine strook met berichten in Photoshop die u in de rechterbovenhoek van een ontwerp kunt plaatsen. Deze kleine stroken zien er erg trendy uit en Web2.0-y, vooral in webontwerpen! Het is een vrij eenvoudig effect om te doen, en in deze tutorial voegen we wat schaduw en licht toe om het te laten knallen!
Om deze tutorial zoals altijd te beginnen, beginnen we met een mooi radiaal verloop. Ik ben verslaafd aan radiale gradiënten, dus dat zou jij ook moeten zijn! Ik gebruik een combinatie van mooie blues. Dit zijn de exacte kleurcodes:
Kleur 1 - # 0e324f
Kleur 2 - # 062033
Het werkt goed als je de markering van het verloop in de rechterbovenhoek plaatst waar we onze kleine strookje berichten plaatsen. Dit heeft te maken met hoe we licht en schaduw later zullen toevoegen.
Nu is deze stap niet echt nodig, maar ik ga een gigantische letter M toevoegen zodat mijn strook met berichten iets te over kan hebben. Wanneer de berichtenstrip op deze manier met de achtergrond samenwerkt, ziet het er nog cooler uit.
Dus ik maak in ieder geval een gigantische M in het wit en zet deze op Overlay en vervaag het uit tot 40% zodat het een beetje van de radiale gradiënt heeft en in het licht en de schaduw past.
Licht en schaduw zijn je vrienden, ze laten je ontwerpen er leuker uitzien. In de echte wereld en in printontwerp, krijg je licht en schaduw van het licht (zonlicht, elektrisch licht, wat dan ook), maar op het scherm is alles een beetje uniform. Dus het is leuk als je een beetje schaduw en licht toevoegt om alles op te fleuren. Merk op dat dit bij de afdruk niet zo goed werkt.
Teken in een nieuwe laag een lange rechthoek met een lichtgrijs. Maak het echt lang want als je het later draait, heb je de uiteinden nodig om lang genoeg te zijn. Voeg ook wat tekst toe. Ik heb 'Made with Love!' Geschreven in een leuk uitziend lettertype - Gill Sans Ultra Bold. Ik heb een aanleg voor dikke lettertypen omdat ze er vriendelijk en hard uitzien.
Nu ga ik een hartvorm pakken uit de reeks vormen van Photoshop. U kunt deze verkrijgen door op uw Custom Shape Tool (U) in het Tool-menu te klikken. Ga vervolgens naar de bovenkant van uw scherm en druk op de kleine pijl omlaag naast Vorm, zoals weergegeven. Als je nog niet veel vormen hebt, klik je op de pijl die naar rechts wijst en voeg je ze toe.
Dus met die hartvorm heb ik in een nieuwe laag een leuk, klein rood hart getekend. Die combinatie van rood, wit en blauw ziet er geweldig uit.
De truc met kleurencombinaties zoals deze is tweeledig. Eerst wil je een hoofdkleur (in dit geval blauw) en dan de andere kleuren gebruiken om die hoofdkleur te markeren. Dus hier hebben we veel blauw, een gemiddelde hoeveelheid lichtgrijs en een klein beetje rood dat echt naar buiten springt.
Het tweede ding om te onthouden is dat sommige kleurencombinaties botsen als niemand anders. Alsof je dat rood in het blauw legt, is het oogschokkend. Dus hier heb ik het lichtgrijs als tussenkleur gebruikt.
Om het rood echt te laten knallen, heb ik de hartlaag geselecteerd, een nieuwe laag erboven gemaakt en vervolgens een nog lichtere rode kleur gebruikt, ik heb een klein verloop getekend in de rechterbovenhoek. Op deze manier heeft ons hart een radiale gradiënt en gebruiken we opnieuw licht en schaduw!
Ik heb ook een vaag vage schaduw toegevoegd aan de tekst 'Made with Love' met de combinatiemodus Slagschaduw. U kunt dit doen door met de rechtermuisknop op die laag te klikken en Mengopties te selecteren. Kruis dan Slagschaduw aan. Stel de afstand in op 0 en verander de kleur in een lichtgrijs zodat deze niet te vol is. Voeg geen gewone schaduw toe omdat we willen dat deze letters deel uitmaken van de strip en er niet over zweven.
Nu wil ik randen aan de strip toevoegen, dus ik houd Ctrl vast en klik op de striplaag om alles te selecteren, maak vervolgens een nieuwe laag en plak in een donkerdere grijze kleur. Daarna ga ik naar Selecteren> Wijzigen> Inkrimpen en inkrimpen met 2 pixels.
Vervolgens druk ik op delete om het midden van dat donkergrijze te verwijderen, alleen de randen achterlatend. (Merk op dat je een paar keer op de rechterpijl moet drukken en vervolgens op delete moet drukken en dan een paar keer op de linkerpijl moet drukken en opnieuw op delete moet drukken om de linker- en rechterrand te krijgen.)
Ok, dus nu hebben we onze berichtenstrook, het heeft randen, een bericht en een leuk rood hart dat eruit springt.
Het volgende dat u moet doen, is alle lagen van de berichtenstrook selecteren en deze samenvoegen tot één enkele laag. We doen dit omdat we op het punt staan te roteren.
Als u roteert zonder de tekst en de randen samen te voegen, kunt u een aantal vreemde effecten krijgen. Photoshop heeft de neiging om dingen te vervagen en op te lichten wanneer je draait, dus het is het beste om de effecten te minimaliseren door het hier allemaal samen te voegen. Dit betekent natuurlijk dat je ervoor moet zorgen dat je message strip helemaal klaar is voordat je gaat fuseren!
Samenvoegen heeft ook het extra voordeel dat we Dodge en Burn later kunnen gebruiken om te schaduwen en op te lichten. Je zult zien wat ik bedoel, binnenkort ...
Dus druk nu op Ctrl + T om te transformeren, houd Shift ingedrukt en verander de strook in een 45-hoek.
Verplaats de berichtenstrook nu naar de rechterbovenhoek. Het ziet er al geweldig uit, maar nu moeten we een beetje schaduw toevoegen en zo.
Dus maak er een nieuwe laag bovenop en selecteer een lichtgrijze kleur. Houd Ctrl ingedrukt en klik op de berichtenstriplaag om alle pixels te selecteren. Teken vervolgens een verloop van lichtgrijs naar transparant en teken deze vanaf de bovenkant naar beneden. Teken vervolgens een tweede vanaf de onderkant omhoog.
Je zou iets moeten krijgen dat lijkt op de afbeelding hierboven - een beetje grijs dat van boven komt en een beetje meer dat van de bodem komt.
Verander nu de overvloeimodus voor deze nieuwe laag naar Vermenigvuldigen. Omdat we een mooi vaag grijs hebben gebruikt, geeft het een goede hoeveelheid schaduw. Als u een donkerder grijs hebt gebruikt, moet u de dekking mogelijkerwijs vervagen.
Ga nu terug naar de berichtenstriplaag zelf. Ga naar het gereedschap Branden (O) en kies een grote zachte borstel om mee te werken.
Voeg langzaam een beetje verbranding toe aan de onderkant en de bovenkant van de strip. Boven in de instellingen voor de Burn-tool wilt u misschien ervoor zorgen dat de belichting redelijk laag staat (ik gebruikte 20%). Dit laat je een subtieler effect doen zonder dat het overbelicht raakt.
Als je klaar bent met het toevoegen van het branden aan de boven- en onderkant, kun je, als je wilt, Alt ingedrukt houden en het midden voorzichtig een beetje borstelen. Als u Alt ingedrukt houdt wanneer het brandhulpprogramma is geselecteerd, schakelt deze over op ontwijken.
Branden en ontwijken zijn als tegenstellingen van elkaar. Branden wordt donker en Dodge wordt lichter. Het zijn best bruikbare tools, hoewel je ze subtiel wilt gebruiken, anders kun je een zooitje maken.
Dus nu onze berichtenstrook er goed uitziet, laten we er een schaduw achter zetten.
Maak een laag onder de berichtenstrook.
Houd nu Ctrl ingedrukt en klik op de strook met berichtstrips om de pixels te selecteren en vul hem in de onderstaande laag met een middelgrijs.
Schakel het selectievakje uit en druk een paar keer op de pijl-omlaag en de linkerpijl een paar keer zodat uw nieuwe laag zich onder en rechts van de berichtenstrook bevindt (zoals weergegeven)
Dit wordt onze schaduwlaag.
Zet je schaduwlaag op Vermenigvuldigen en ga dan naar Filter> Vervagen> Gaussiaans vervagen en gebruik een instelling van ongeveer 3-4 px. Je krijgt een leuke schaduwpartij.
Nu willen we dat onze berichtenstrip eruitziet alsof hij in het midden uitpuilt. Dit betekent dat de schaduw aan de boven- en onderkant minder wordt omdat de strook dichter bij de achtergrond staat. Slaat dat ergens op?
Kortom, als iets ver weg is van de achtergrond, is de schaduw groter en als de schaduw kleiner is, is deze kleiner ...
Kies in elk geval het wisgereedschap (E) en veeg met een grote zachte borstel zachtjes een beetje schaduw aan de boven- en onderkant weg, zodat het aan beide zijden vaag wordt..
En daar heb je het eindproduct: een mooie berichtenstrook!