Skapa en meddelandestrip i Photoshop

I den här handledningen kommer vi att skapa ett litet meddelandefält i Photoshop som du kan placera i det övre högra hörnet av en design. Dessa små band ser väldigt trendiga ut och Web2.0-y, speciellt i webbdesign! Det är en ganska lätt effekt att göra, och i denna handledning lägger vi till lite skugga och ljus för att göra det pop!

Steg 1:

För att börja med denna handledning som alltid börjar vi med en fin radiell gradient. Jag är beroende av radiella gradienter, så du borde vara också! Jag använder en kombination av snygg blues. Här är de exakta färgkoderna:

Färg 1 - # 0e324f

Färg 2 - # 062033

Det fungerar bra om du placerar höjdpunkten i gradienten längst upp till höger där vi placerar vår lilla meddelandestrimmel. Det här är att göra med hur vi lägger till ljus och skugga senare.

Steg 2:

Nu är detta steg inte riktigt nödvändigt, men jag ska lägga till ett jättebrev M så att mitt meddelandeband har något att gå över. När meddelandestripen samverkar med bakgrunden så ser den ännu kallare ut.

Så i alla fall gör jag en jätte M i vitt och ställer den på Overlay och bleknar den till 40% så att den har lite av den radiella lutningen och passar in med ljuset och skuggan.

Ljus och skugga är din vän, de kommer att göra dina mönster ser mycket trevligare ut. I den verkliga världen och i tryckdesign får du ljus och skugga från ljuset (solljus, elektriskt ljus, vad som helst), men på skärmen är allt slags uniform. Så det är trevligt när du lägger till lite skugga och ljus för att liva upp det hela. Observera att detta inte fungerar nästan lika bra på skrivbordet.

Steg 3:

Sedan i ett nytt lager rita en lång rektangel med en ljusgrå. Gör det riktigt länge, för när du roterar det senare behöver du ändarna vara lämpliga långa. Lägg även till lite text. Jag har skrivit "Made with Love!" i en snygg typ - Gill Sans Ultra Bold. Jag har en förutsättning för feta teckensnitt eftersom de ser vänliga och högljudda ut.

Steg 4:

Nu ska jag få tag i en hjärtform från Photoshops uppsättning former. Du kan få dessa genom att klicka på ditt anpassade formverktyg (U) i verktygsmenyn. Gå sedan upp till toppen av din skärm och tryck på den lilla nedpilen bredvid Form som visas. Om du inte har många former redan, klicka på den pilen som pekar åt höger och lägg till dem.

Steg 5:

Så med den här hjärtformen, i ett nytt lager har jag ritat ett fint litet rött hjärta. Den röda, vita och blå kombinationen ser bra ut.

Tricket med färgkombinationer som detta är dubbelt. Först vill du ha en huvudfärg (i detta fall blå) och använd sedan de andra färgerna för att markera den huvudfärgen. Så här har vi mycket blå, en medelstor mängd ljusgrå och en liten bit röd som verkligen springer ut.

Den andra sak att komma ihåg är att vissa färgkombinationer kolliderar som ingen verksamhet. Som om du sätter det rött på det blåa kommer det att bli ögonblåsa. Så här har jag använt det ljusgråa som en mellanfärg.

Steg 6:

Nu för att göra den röda verkligen popen har jag valt hjärtskiktet, skapat ett nytt lager ovanför det och sedan använt en jämn ljusare röd färg har jag dragit en liten gradient över i det övre högra hörnet. På så sätt har vårt hjärta en radiell gradient och igen använder vi ljus och skugga!

Jag har också lagt till en svag suddig skugga till "Made with Love" -texten med hjälp av Drop Shadow-blandningsläget. Du kan göra detta genom att högerklicka på det lagret och välja Blandningsalternativ. Markera sedan Drop Shadow. Ställ avståndet till 0 och ändra färgen till ljusgrå så att den inte är för full. Lägg inte till en vanlig skugga eftersom vi vill att dessa bokstäver ska vara en del av remsan och inte sväva över den.

Steg 7:

Nu vill jag lägga till gränser till remsan, så jag håller Ctrl och klickar på remskiktet för att markera allt och skapa sedan ett nytt lager och klistra in i en mörkgrå färg. Sedan går jag till Välj> Ändra> Kontrakt och avtala valet med 2 pixlar.

Därefter slår jag bort för att radera mitten av den mörkgråa, lämnar bara kanterna. (Observera att du måste slå högerpilen ett par gånger och sedan slå bort och sedan slå vänsterpil ett par gånger och slå radera igen för att få vänster och höger kanter.)

Steg 8:

Okej Så nu har vi vårt meddelanderemsa, det har kanter, ett meddelande och ett fint rött hjärta som dyker upp.

Nästa sak att göra är att välja alla skivor för meddelandestripen och slå dem ihop i ett enda lager. Vi gör detta för att vi ska rotera.

Om du roterar utan att sammanfoga texten och kanterna kan du få några udda effekter. Photoshop tenderar att bli suddig och jag gör saker när du roterar, så det är bäst att minimera effekterna genom att slå samman allt här tillsammans. Det betyder självklart att du måste se till att din meddelanderemsa är helt klar innan du slår samman!

Sammanslagning har också den extra fördelen som vi kan använda Dodge och Burn senare för att skugga och tända det. Du får se vad jag menar inom kort ...

Steg 9:

Så nu, tryck Ctrl + T för att transformera, håll ner Skift och vrid meddelandestickan till en 45-vinkel.

Steg 10:

Flytta nu meddelandestickan uppe till höger. Det ser redan bra ut, men nu måste vi lägga till lite skuggor och saker.

Så skapa ett nytt lager ovanpå och välj en ljusgrå färg. Håll ner Ctrl och klicka på meddelandebandskiktet för att välja alla dess pixlar. Dra sedan en lutning som går från ljusgrå till genomskinlighet och dra den från toppen som kommer ner. Dra sedan en andra från botten uppåt.

Du borde få något som ser ut som bilden ovan - lite grå kommer från toppen och lite mer från botten.

Steg 11:

Ändra nu blandningsmoden för det här nya lagret till Multiplicera. Eftersom vi använde en fin svag grå det ger en bra mängd skugga. Om du använde en mörkare grå, kan du behöva tona opaciteten tillbaka.

Steg 12:

Gå nu tillbaka till meddelandeståndskiktet själv. Byt till brännverktyget (O) och välj en stor mjuk borste att arbeta med.

Lägg långsamt lite bränn på botten och på toppen av remsan. Upp i inställningarna för bränningsverktyget kan du se till att exponeringen sätts relativt lågt (jag använde 20%). Detta gör att du kan göra en subtilare effekt utan att bli överexponerad.

När du är klar med att lägga bränna till toppen och botten kan du, om du vill, hålla ner Alt och försiktigt borsta mitten lite. Håller Alt när bränningsverktyget väljs och byter det till en dodge.

Bränn och Dodge är som motsatser till varandra. Burning mörknar och Dodge tänds. De är ganska användbara verktyg, men du vill använda dem subtilt, annars kan du göra lite av en röra.

Steg 13:

Så nu som vårt meddelandeband ser bra ut, låt oss lägga till en skugga bakom den.

Skapa ett lager under meddelandestickan.

Håll nu ned Ctrl och klicka på meddelandebandskiktet för att välja dess pixlar och i skiktet nedan fyller du det med en medelgrå.

Avmarkera sedan och tryck nedåtpilen ett par gånger och vänsterpil ett par gånger så att ditt nya lager ligger längst ner och till höger om meddelandestickan (som visat)

Detta kommer att bli vårt skugglager.

Steg 14:

Ställ in skuggskiktet Multiplicera och gå sedan till Filter> Blur> Gaussian Blur och använd en inställning på cirka 3-4px. Du får en fin skugga.

Steg 15:

Nu vill vi att vår meddelandestrimmel ser ut som att den ligger upp i mitten. Det betyder att skuggan blir mindre både på toppen och botten eftersom meddelandestickan ligger närmare bakgrunden. Ger det vettigt?

I grund och botten om något är långt ifrån bakgrunden, är dess skugga större, och om dess närmare är dess skugga mindre ...

Hur som helst, välj Erase Tool (E) och med en stor mjuk borste radera försiktigt lite av skuggan överst och nedåt så att den blir svag i båda ändarna.

Steg 16:

Och där har du den färdiga produkten: en fin meddelanderemsa!