Handledning: Hur man utformar ett chatroom IPhone-gränssnitt
I den här handledningen ska vi utforma ett iPhone-användargränssnitt för ett forum och en chatbaserad mobilapplikation.
Appen innehåller en handfull dagliga touch-gränssnittselement, till exempel knappar, inmatningsfält och beröringsbehållningar.
Vi kommer att täcka olika Photoshop-verktyg, lagerformat och naturligtvis ta itu med eventuella konstruktionsbegränsningar. samt gör designen pixel perfekt och vacker nog att vara värd en plats på en iPhone-skärm.
Designen sätts ihop med Photoshop CS5.5, men alla nya versioner av Photoshop kommer att fungera underbart.
Appskärmens krav
Vi ska bara skapa en skärm i den här handledningen. Skärmen kommer att bli huvudchattskärmen för en chattbaserad applikation, ungefär som ett offentligt chattrum men på din telefon. Kraven på denna skärm är:
- En rubrik - det här är chattrummet du befinner dig i.
- En back / close / topics-knapp - för att gå tillbaka till föregående skärm.
- Ett folkknapp - det visar vilka som befinner sig i chattrummet.
- En lista med meddelanden - meddelanden måste ha avatar och tidstämpel.
- Ett sätt att visa användarprofiler och rapportera meddelanden.
- Ett textfält för att skriva dina meddelanden.
- En skicka-knapp för att skicka dina meddelanden.
Planering, skissering och trådframställning
Som med alla användargränssnittsprojekt, planering, skissering och trådframställning är gränssnittet viktigt. Det reglerar ganska ofta några dumma idéer (även om de kanske inte verkar dumma i ditt huvud!) Innan du sätter digitala koncept och mockups tillsammans. Vad som kan verka som en lysande lösning för att lösa ett problem i ditt huvud skulle i slutändan inte fungera i verkligheten. Det är därför wireframing innan ett projekt påbörjas är ett så viktigt steg.
Ta en penna och din favoritkudde och börja skissa.
Som du kan se från ovanstående bild tillbringade jag bara några minuter ihop tre olika begrepp; vanligtvis tar denna process dagar eller ibland veckor, men eftersom vi bara designar en skärm och syftet med appen är enkelt, bör skissa dessa inte ta lång tid! De är mestadels mycket likartade, men varje har sina unika skillnader, vilket jag sammanfattar nedan.
Skiss A
Inspirerat av den ursprungliga Twitter-användargränssnittet för iPhone, tillåter det här användargränssnittet användarna att svepa på ett meddelande för att visa fler alternativ, som "Visa profil" och "Rapportera användare" - en rolig och platsbesparande sätt att tillåta mer innehåll på den här skärmen. Jag lekte med idén om att ha en inställningsknapp i navigeringsfältet på den här skärmen, men bestämde mig för att följa min normala regel om "Mindre är mer" - det är osannolikt att användaren kommer åt inställningarna varje gång de använder appen så att det inte behövs här.
Skiss B
Detta koncept är lite mer kompakt, med knapparna "Visa profil" och "Rapportera användare" som statiska ikoner till höger om meddelandena. Jag spelade med idén om att inte ha en "Skicka" -knapp här och istället använda sig av sändningsknappen på IOS-tangentbordet. Jag bestämde mig för det här eftersom de flesta appar (inklusive iOS-standardapps som meddelanden) har knappsändnings-knappen och den extra sändningsknappen bredvid textinmatningsfältet. Jag gillar att hålla mina gränssnitt konsekventa med andra i App Store.
Skiss C
Skiss C är den skiss jag har bestämt mig för att fortsätta med - istället för en back-knapp har vi en nära knapp. Jag tycker att det här är uppenbart att när du klickar stänger du inte längre en del av det samtalet (till skillnad från meddelandeprogram, där du går tillbaka och kan återvända för att fortfarande se alla tidigare meddelanden). Personalknappen visar en lista över användare som befinner sig i chattrummet, och jag har omprövat idén om att ha bilden för att visa fler funktioner (till exempel Twitter-appen) för att tillåta användaren att se användarens profil eller rapportera dem.
Med detta gjort är det dags att fortsätta att sätta något ihop i Photoshop!
Steg 1: Status och navigeringsfältet
Innan vi fortsätter med detta steg måste vi skapa vårt dokument. Standard iPhone-skärmstorlek (vid Retina-upplösning) är 640px bred och 960px hög med en upplösning på 326ppi. Jag tenderar alltid att börja med en vit bakgrund i mina mönster.
Det första steget är att sätta i standardstatusfältet iOS. Statusfältet är fältet överst på din iPhone som beskriver viktig information, t.ex. signal, bärare, tid och batterilivslängd. Det finns tre alternativ här: en svart bar, en svart bar med låg genomskinlighet eller silverbaren.
Om du vill göra din app design ser ut som den verkliga affären, kan du ta tag i statusfältet från Retina iPhone GUI PSD kit hittades här . Hämta bara och öppna PSD, och dra den stapel du vill ha över till ditt PSD-dokument. Placera den högst upp på din duk.
Navigationsfältet ligger på vår lista. Standardnavigationsfältet är 86px högt och spänner över hela bredden på din iPhone (640px). Återigen kan du dra det här elementet över från ovan nämnda PSD-kit, eller du kan skapa det här manuellt (mitt föredragna alternativ eftersom det inte finns några bifogade format). Välj rektangelformverktyget och placera en 640 x 86px rektangel på din duk.
Steg 2: Navigeringsknappar
Med hänvisning till våra trådramar har vi två knappar på vår navfält. Välj det runda rektangelformverktyget (kom ihåg att alltid använda formverktyg för former i UI-design, det gör det mycket lättare att skala vårt dokument för lägre upplösningar!). Jag har använt dimensionerna 100 x 50px med en hörnradio på 6px.
Placera denna form på både dina vänstra och högra sidor på navigeringsfältet och placera dem snyggt.
Steg 3: Stilval
Det är dags att börja välja vår designstil. Med den här appen kan du chatta och träffa nya människor och låta människor ha det roligt. Därför känner jag mig ett roligt, knäppt färgschema och typografi här är viktigt för att hjälpa till att få den punkten över.
Välj typverktyget och välj ett typsnitt som matchar bilden du har i ditt huvud. Jag valde bubbly Arial avrundad MT Bold . Skriv in ditt ämnesnamn (jag valde "UI-design") och justera det centralt på din navigeringsfält.
Fortsatt med det roliga temat som vi har valt för appen är det dags att välja några färger. Jag använder personligen Färgälskare för att inspirera mina färgval när jag designar. I det här fallet letade jag efter "kul" och inom några sekunder presenterades jag med många olika alternativ och inspirerande paletter att använda som bas för min design.
Jag slutade välja en kallad Lekrum . Det är viktigt att tänka på vilka färger du behöver när du väljer en palett; Jag tycker att jag väljer något ljus, något mörkt, och något ljus är alltid en bra utgångspunkt. Det är viktigt att ha god kontrast i din design.
Steg 4: Navigeringstavstyling
Vi ska nu flytta tillbaka till vår navigeringsfält och ge den färgen den förtjänar. Välj navigeringsfältet (jag hoppas att du har hållit dina lager organiserat!), Högerklicka och välj Blandningsalternativ. Det här är hemmet för de kraftfullaste Photoshop-verktygen när det gäller att skapa pixel-perfekta gränssnittsdesigner. Härifrån kan du lägga till skuggor, gradienter, mönster och stokes, med förmågan att kopiera och klistra in dessa stilar på andra lager.
Först och främst kommer vi att lägga till en gradient i vår bar, så klicka på Gradient Overlay. Jag har valt turkosfärgen som den jag vill använda för min navigeringsfält. Det är ljust och packar en kraftfull stans, och gör vår design lätt att komma ihåg. Applicera en 90 graders vinkelgradient som går från ljus (övre) till mörk (botten).
Klicka nu på Stroke-panelen. Ändra storleken på din stroke till 2 istället för standard 3. Ett tips är att alltid försöka undvika udda nummer i UI-design, särskilt på mobila enheter. Detta kommer bara att göra mer arbete för både designern och utvecklaren när det gäller att skalera arbetet (du kan inte ha en halv 3 pixlar som en halv pixel existerar inte!).
Ändra typ av stroke till gradient och se till att stroke kommer att visas på utsidan av din form. Välj en mörk turkosfärg för botten av din stroke och svart för toppen. Eftersom strejken ligger på utsidan av navigeringsfältet visas inte den svarta delen av stroke ovanpå statusfältet och därför kan alla användare se strecket längst ner.
Välj skärmen Innerskugga och applicera en vitskugga på 15% på din bar. Detta kommer att visas högst upp i din bar och ge den en härlig höjdpunkt, så att den blir mer 3D. Jag gav min skugga ett avstånd på 2px och en storlek på 3px.
Nu är det dags att verkligen göra vår navigeringsbar pop. Genom att använda mönster kan vi lägga till mycket djup i vår design. Jag använder ett vitt rutmönster på min navigeringsfält. Om du vill använda det här mönstret kan du ladda ner en samling av dem gratis på Premium Pixels .
Steg 5: Typografi skuggning
För att ge vår typografi lite djup, öppna panelen för blandningsalternativ och använd en dropskugga. Ändra vinkeln till -90 (se till att Använd Global Style inte är markerad här annars kommer alla skuggor i din design att ändras till -90) och använda samma färg som du använde längst ner i navigeringsstångens slag. Ge skuggan ett avstånd på 2px och släpp storleken till 0px. Detta ger en ren skuren droppskugga över din text vilket gör det intressantare.
Steg 6: Knappsatsning på navigeringsstången
Vi ska nu tillämpa några fantastiska stilar på våra knappar på navigeringsstavarna. Vi vill att dessa knappar ska binde ihop med vår navigeringsfält, men samtidigt måste de sticka ut tillräckligt bra för användaren att genast känna igen att de är knappar. För att göra detta ska vi använda fler lagerformat för att ge dem en 3D-ögonblickseffekt.
Öppna panelen för blandningsalternativ och klicka på gradientöverlagring. Ge din knapp en ljus (topp) till mörk (nederst) gradient med hjälp av färger från navigeringsfältet. Den ljusa färgen valdes från höjdpunkten i min navfält och den mörka färgen valdes från min navstångs bottenslag.
Välj strokepanelen och ändra storleken på din stroke till 2px, med en utvändig position. Byt fyllningstyp till gradient och vinkeln till 90 grader. Ändra gradientfärgerna från ljus (överst) till mörkt (botten), basera färgerna på färgerna som redan används för navigeringsfältet och knapparna. Omedelbart kan du se att denna stroke ger din knapp en 3D-look, som om den kommer ut ur navigeringsfältet istället för att sitta ovanpå den.
För att spruce upp knappen lite mer och göra den ännu mer visuellt tilltalande, kommer vi att lägga till en inre glöd på knappen. Klicka på den inre glödpanelen och ändra blandningsläget till skärmen. Släpp opaciteten till 20% och se till att ljudet är inställt på 0%. Ändra standardgult glöd till vit och se till att storleken fortfarande är inställd på 5px-standarden. Detta bör ge din knapp en fin inre glöd, vilket gör att knappen ser väldigt berörbar ut!
Vi ska nu lägga till en inre skugga för att göra vår knapp lite mer realistisk. Ändra opacitet till 15% och välj svart som din färg. Släpp avståndet till 2px och storleken till 4px. Ändra nu vinkeln till -90 grader (se till att Använd globalt ljus inte är valt). Detta ger en liten skugga på botten av din knapp och döljer lite av det inre glödet som vi just tillämpat. I det verkliga livet skulle detta område vara skuggat så det var viktigt att gömma den inre glöden här.
För att avsluta stilen på vår knapp ska vi lägga till en droppskugga. Välj drop shadow panel och ändra färgen till vit med en opacitet på 25%. Denna skugga kommer att fungera som en höjdpunkt under vår stroke, så ändra avståndet till 4px (2px för att täcka strokeområdet och 2px som kommer att ses under stroke).
Steg 7: Knappetiketter
En knapp utan etikett är meningslöst, så nu ska vi spendera lite tid för att avsluta våra knappar. Först och främst högerklickar du på din stylade knapp och väljer alternativet Kopiera lagstil. Högerklicka nu på din un-styled-knapp och välj alternativet Pasta Layer Style.
Vi ska fortsätta arbeta med vår högra knapp först. Den här knappen kommer att vara märkt "People" och vi vill använda en ikon med 2 + personer. För denna tutorials skull kommer jag att använda ikoner gjorda av kreativ studio Yummygum; du kan hitta det paket jag använde på IconSweets.com - Jag använder ikoner från det här paketet under hela handledningen.
Använd samma teckensnitt som du använde för navigeringsfältets titel, skriv dina knappar ut etiketten. Ändra storlek och placera den på din knapp och placera sedan din valfria ikon (eller skapa din egen) i ditt dokument. Placera dessa två lager lika över din knapp. Jag har fördelat mina lager ut så att det finns 15px vardera sidan av dem och knappen, och 10px mellan ikonen och texten. Klistra in lagstilen från din navfält ämne text på både din ikon och knapp etikett. Om du behöver ändra storlek på knapplängden använder du Direct Selection Tool för att välja 4 ankarpunkter till höger och dra sedan. Du kan hålla ned shift-knappen för att hålla denna modifiering rak.
Upprepa denna process med knappen på vänster sida i navigeringsfältet, den här gången med en korsikon och ordet "Stäng". För att lägga till lite mer styling till mina knappar sänkte jag opaciteten för de två bakgrundsformerna till 95%, vilket gör det möjligt för en liten bit av rutmönstret under den att lysa igenom.
Steg 8: Textfältfältet
Nu är det dags att ägna lite uppmärksamhet åt resten av vår skärm. Ta med rektangelformverktyget och använd samma mått på vår navigeringsfält (640 x 86px). Lägg på en form på din duk. Placera den längst ner på skärmen.
Steg 9: Bakgrunden
Vi ska nu arbeta med bakgrunden till vår design. Öppna panelen för blandningsalternativ för ditt bakgrundslager och välj ett mönster för att fylla på det. Jag använde ett mörkt mönster med vertikala linjer som går igenom det från Subtila mönster - Du kan ladda ner hela mönstret här som jag rekommenderar starkt.
Om du vill lägga till några av dina egna färger på det mönster du har valt kan du göra det genom att använda färgöverlagringsstilen. Jag applicerade en brun (från min färgpalett jag valde tidigare) vid 35%. Den här opaciteten är tillräckligt låg för att din textur / mönster ska visa igenom ändå tillräckligt hög för att tona färgen eller din bakgrund.
Nu har vi en mörk bakgrund, du ser punkten där vår navigeringsfält uppfyller vår bakgrundsbild inte ser så bra ut. Du kan enkelt fixa det här genom att använda en skuggstil till din navigeringsfält, vilket gör att det verkar som om det ligger ovanför din bakgrund.
Öppna öppningsalternativpanelen för navigeringsfältet och välj drop shadow panel. Se till att svart är valt och ändra opacitet till 25%. Öka både avståndet till 6px och storleken till 10px och klicka på OK. Du kan behöva experimentera med dessa alternativ, eftersom resultaten varierar beroende på vilken färg och typ av textur / mönster du har valt för din bakgrund.
Steg 10: Meddelanden
Nu när vi har bakgrunden och den översta navigeringsfältet klar, kommer vi att koncentrera oss på att få huvudinhämtningen i appen utlagd. Välj rektangelformverktyget och placera en rektangel på din duk. Bredden jag använde var 600px, vilket möjliggör 20px att visa på vardera sidan av formen. Jag använde en mycket ljusare version av gul / cremefärgen från färgpalet jag plockade tidigare.
Välj det rundade formverktyget och ändra dimensionerna till 80 x 80px och radien till 6px. Placera formen (som ska användas som vår avatarform) på din duk och placera den på rätt sätt. För att hålla min design konsekvent har jag tillåtit 20px att sitta mellan kanterna på min bakgrundsform och min avatarform.
Skriv ditt namn och ett meddelande med hjälp av textverktyget. Jag använde Arial Rounded MT Bold för mitt namn och normal Arial för mitt meddelande text-format din text så att den passar snyggt i ditt meddelandebakgrund.
Vi ska nu lägga till lite stil på vårt meddelande med bara färg; Jag bytte färg på mitt namn till en mörk turkos (mycket nära svart) och en utvasket turkos inspirerad av min navigeringsfält.
Sedan satte jag in en bild av mig själv genom att gå till Arkiv> Plats. En gång inmatade jag storleken på bilden och placerade den ovanför min svarta avatarbox som vi skapade tidigare. För att spara bildskärmen och också att ge dig möjlighet att flytta eller ändra storlek på din avatar senare, högerklicka på den och välj alternativet Skapa klippmask. Detta kommer att länka din avatarbild till din avatar svarta ruta och visar bara vad som ligger över den svarta rutan. Du hittar genom att använda Move Tool som du fortfarande kan flytta och ändra storlek på den här bilden.
Med hjälp av en annan IconSweets-ikon skapade jag en fin liten tidsstämpel. Jag var tvungen att minska min ikonstorlek - du kan göra det genom att gå till Redigera> Transformera> Frittransformera och ändra dimensionerna (antingen med pixlar eller procent). Jag använde 70% i både bredd och höjd för att hålla proportioner. Jag lade till lite text och voila. Var noga med att välja en färg som är lätt att läsa men inte ropar för uppmärksamhet.
Steg 11: Duplicera meddelanden
Duplicera dina meddelandeboxar under varandra och lämna ett 2px mellanrum mellan varje bakgrundslåda. Du kan göra detta genom att antingen klicka och dra dina lager över ikonen New Layer, eller alternativt du kan trycka Cmd + Shift + Down Arrow samtidigt som du kopierar och dämpar lagren nedåt.
Ändra allt innehåll i dina meddelandefält, som om det var en riktig konversation. Om du behöver ändra storlek på dina bakgrundslådor, använd Direct Selection Tool och ändra storlek på dem med hjälp av ankarpunkterna. Detta håller alla kanterna snygga och skarpa.
Steg 12: Meddelande styling
Med det gjort kan vi nu koncentrera oss på att föra våra meddelandeskrin till liv. Öppna panelen för blandningsalternativ och välj drop shadow panel. Ändra blandningsläget till normalt och välj vit som färg. Öka opacitet till 80% istället för standard 75% och ge skuggan ett avstånd på 2px. Detta kommer att gömma 2px-klyftan som vi lämnade mellan var och en av meddelandeboxens bakgrunder.
Kopiera och klistra in ovanstående lagstil på alla dina bakgrundsskikt i meddelandeboxen. Du borde sluta med något som ovan.
Steg 13: Lägga av runda hörn
För att göra vår design mer intressant, och att lägga till mer djup, lägger vi till avrundade hörn längst ner i våra meddelanden och får det att se ut som om det är papper staplat på mer papper.
Välj det runda rektangelverktyget och ge det en radie av 10px. Ändra bredden till 600px (eller vilken bredd du använde för bakgrunden i meddelandeboxen) och en höjd som inte överstiger höjden på bakgrunden på den nedre meddelandeboxen. Jag använde en ljus färg här så att den är lätt synlig.
Med hjälp av Direct Selection Tool väljer du innehållet i ditt vektorformslag (den avrundade rutan vi just ritat) och går till Redigera> Kopiera. Klicka på vektorgradsskiktet i bakgrunden på den nedre meddelandeboxen och gå till Redigera> Klistra in. Detta kommer att klistra in innehållet i formlagret på ditt andra formlager. Nu kan du radera den form som vi ritade i föregående steg. Du ska fortfarande se formen synlig.
Öppna blandningsalternativen i bakgrunden av den nedre meddelandeboxen och använd en droppskugga. Ändra färgen till svart, opaciteten till 25%, avståndet till 1px och storleken till 3px. Detta kommer att skapa en fin subtil droppskugga.
Duplicera det här skiktet och nudge det ner 5px. Sätt tillbaka skiktet så att det sitter under ditt original. Du borde sluta med något som liknar nedan. Som du kan se är det här ett enkelt sätt att skapa ett överlappande pappersutseende.
Upprepa steget igen så att du har tre papper istället för bara två. Du kanske vill ge din underdel av papper en något mer märkbar droppskugga.
Steg 14: Skärm i navigeringsfältet
Du märkte säkert att medan vi utformade våra meddelandeskrin, gömde vi de flesta droppskuggorna som vår navigeringsfält gjuter på vår bakgrund. För att ersätta detta kan du antingen placera dina meddelanden under navigeringsfältet (det enkla alternativet men orealistiskt) eller slutföra följande steg.
Välj det rektangulära markeringsverktyget och dra en mager linje överst på dina meddelanden som liknar ovanstående. Fyll den med svart på ett nytt lager.
Gå till Filter> Oskärpa> Gaussisk oskärpa och använd oskärpa. Detta kommer nu att fungera som en skugga - bara klippa ut några bitar av sudd som överlappar kanterna på meddelandeboxens bakgrund.
Steg 15: Profil- och rapportknappar
Med hänvisning till våra trådramar hade vi bestämt oss för att tillåta användare att dra ett meddelande till vänster för att avslöja fler knappar. I det här fallet tillåter dessa knappar användaren att se meddelandeprofilprofilen eller rapportera meddelandeposten.
Välj de lager som utgör ett av dina meddelanden (jag väljer Homer Simpsons-meddelandet) och använd skiftknappen och piltangenterna, skjut ditt meddelande 10px åt gången till vänster. Använd textverktyget genom att skriva dina etiketter och välj sedan några ikoner som motsvarar de här etiketterna. Jag valde en enskild person för profil och ett mål för rapport (som om du skjuter ner dem - jag tyckte det var ganska roligt!).
För att ge detta område mer djup, lade jag till en svart droppe skugga till både ikonerna och texten.
Steg 16: Textfältet
Textfältet är ett av de viktigaste elementen på den här skärmen. Användare måste kunna skriva in sina meddelanden med lätthet och ingen förvirring (det varför jag tog bort den dolda skicka-knappen i de första skisserade koncepten).
För att starta, leta reda på ditt bakgrundslag och kopiera lagstilarna. Klistra in dessa lagerformat i textfältet som vi skapade tidigare. Öppna blandningsalternativen för det här lagret och välj strokepanelen. Applicera en 2px stroke på utsidan av din form med solid svart som din färg. Eftersom stroke är på utsidan, och formen rör på tre kanter av din duk, kommer bara stroke ovanpå formen att visas.
Välj nu den inre skuggfliken och ändra blandningsläget till normalt, färgen till vit, opaciteten till 10% och avståndet till 2px. Kontrollera att vinkeln är inställd på den globala ljusstandarden (90 grader) och klicka på OK. Detta ger oss en fin höjdpunkt under vår svarta stroke. Med dessa två enkla 2px-linjer applicerade ser vår textfältbana redan väl separerade från resten av bakgrunden, trots att den har samma bakgrund!
Markera det rundade rektangelverktyget. Ge ditt verktyg en hög radie, jag använde 50px; Detta kommer att ge det mycket runda (cirkulära) ändar. Placera en form på din bar, jag använde 460x54px som mina dimensioner. Se till att vänster sida av din textfältform är 20px bort från vänster sida av din duk för att hålla konstruktionsavståndet konsistent.
Fyll formen med en mörk färg (jag använde en brun vald från en mörk pixel i bakgrunden) och öppna sedan panelen för lagerformat. Applicera en 2px vit droppskugga till ditt textfält med en opacitet på 10%.
Klicka på den inre skuggpanelen och använd en inre skugga till din textfältform. Detta kommer att ge det mycket mer djup och få det att se ut som om det skärs i stapelns bakgrund. Använd svart med blandningsläge för multiplicering och en opacitet på 25%. Jag använde 5px som mitt avstånd och 10px som min storlek, även om du kanske vill experimentera här.
Använd textverktyget och utrustat med Arial Rounded MT Bold, skriv "Skriv en kommentar ..." och placera den i din textfältlåda. Öppna blandningsalternativen för ditt nya textlager och använd en svart droppskugga med en opacitet på 75%, avståndet 2px och 3px.
Steg 17: Textfältknapp
Välj det runda rektangelformverktyget och använd samma radiusinställningar och höjd som vi tidigare använde, placera en form på textfältets bakgrund. Ändra storleken på knappen så att den sitter 10px från ditt textfält och 20px från höger kant av duken.
Högerklicka på ditt nya formformslag och välj blandningsalternativ. Markera lutningsöverläggningspanelen och använd en lutning från ljus (övre) till mörk (nederst). Jag använde den magnifika gula färgen som fanns i den färgpalett jag valde tidigare.
För att hålla vår design konsekvent kommer jag att applicera en stroke på vår knapp som gör att den ser ut som om den kommer ut ur bakgrunden, som vi gjorde med knapparna i navigeringsfältet. Den här gången använde jag solid svart istället för en gradientsträcka, eftersom bakgrunden är mycket mörkare och inte fylld med en gradient. Jag använde en 2px stroke på insidan av min form med 100% opacitet.
Välj textverktyget och skriv "Skicka" på din knapp. Öppna blandningsalternativen för ditt nya textlager och använd en brun dropshadow till din text med ett avstånd på 1px och en storlek på 3px.
Och med det är vi alla färdiga! Vi skulle gärna se dina resultat, så var snäll och posta dem i kommentarfältet nedan. Om du vill se designen i full upplösning kan du se det här .