Följande artikel hjälper dig: Rita en 3D LCD-skärm med Photoshop
Förhandsvisning
Steg 1: Konfigurera Canvas
Öppna Photoshop. Skapa ett nytt dokument (Ctrl/Cmd + N eller Arkiv > Nytt). Vi kommer att använda en kvadratisk 256x256px duk.
Steg 2: Rita panelens basform
Skapa ett nytt lager (Ctrl/Cmd + Shift + N eller Lager > Nytt lager). Namnge detta lager som “panelbas” så att vi håller vårt arbete organiserat. Rita en vinklad rektangulär form med pennverktyget (P).
Du kan också använda det rektangulära markeringsverktyget (M) och sedan använda Free Transformera (Ctrl/Cmd + T) för att ändra dess perspektiv och vinkel – detta är upp till dig. Som du kan se ovan (om du använde pennverktyget) kommer Photoshop som standard att rita en grå ram runt din form så att du kan se kanterna. Även om det inte påverkar formen och bara är ett visuellt hjälpmedel, kan det vara distraherande och kan göra det svårt att se exakt hur din form ser ut.
Du kan slå på och av denna kant genom att trycka på Ctrl/Cmd + H (genväg för Visa > Extra).
Steg 3: Ge basformen en lagerstil
Dubbelklicka sedan på det här lagret för att visa dialogfönstret Lagerstil. Vi ska ge den här formen tre lagereffekter: en övertoning, en färgöverlagring och en linje.
Gradient Overlay
Låt gradienten gå från grått (#d3d1d1) till benvitt (#fefcfc).
Färgöverlägg
Denna färgöverlägg med låg opacitet kommer att göra vår form lite mörkare. Använd svart (#000000) för färgen och sänk opaciteten till 8 %.
Stroke
Ge objektet en linje som har en färggradient som går från grått (#9a9a9a) till ljusgrått (#d5d4d4). Lagerstilen kommer att lägga till önskade effekter till den platta formen som visas nedan.
Steg 4: Lägg till en glasreflektion till panelen
Skapa ett nytt lager (döp det till “panelglans”).
Skapa en vit form i detta lager som den som visas nedan. Du kan använda pennverktyget (P) för detta. Ställ in opaciteten för lagret till 67 %.
Detta kommer att låta lite av gradientbakgrunden synas igenom.
Steg 5: Rita linjer längst upp och längst ner på panelen
Välj linjeverktyget (U) från verktygspanelen. Skapa en 1px vit linje i panelens övre kant.
Du kan använda Ctrl/Cmd + H för att dölja den grå kanten som Photoshop lägger runt våra former så att du kan se resultatet bättre. Byt namn på det här formskiktet till “top-edge-shine”. På samma sätt ritar du en 1px vit linje längst ner på panelen (du kan namnge det här formskiktet som “bottom-edge-shine”). Ställ in opaciteten för lagret till 20 %. Effekten är subtil, men spelar en viktig roll för att skapa visuella tilltalande.
Steg 6: Ge panelen dess djup
Gör ett nytt lager (som kan kallas “paneltjocklek”). På detta nya lager skapar du en svart form på höger sida av panelen.
Steg 7: Style panelens vänstra sida
Ge den vänstra sidan av panelen (“paneltjocklek”) ett färgöverlägg och ett övertoningsöverlägg.
Gradient Overlay
Den linjära gradienten ska gå från grå (#d3d3d3) till ljusgrå (#ebe8e8). Se till att du ställer in din vinkel korrekt.
Färgöverlägg
Ställ in färgen på överlägget till svart (#000000) och minska opaciteten till 20 %.
Steg 8: Lägg till detaljer på panelens vänstra sida
Skapa nu ett nytt lager (namn det “shine-basic”) och under detta lager, skapa en vit linje längs vänsterkanten på panelens vänstra sida. Minska opaciteten till 40 % efter att du har skapat linjen. Duplicera detta lager genom att trycka på Ctrl/Cmd + J och ställ in opaciteten för det duplicerade lagret till 100 %.
Lägg till en lagermask till detta dubblerade lager genom att klicka på ikonen längst ned på lagerpanelen. Välj övertoningsverktyget (G). Se till att din gradient går från vit till svart och att alternativet Reflected Gradient är aktiverat (gör detta i alternativfältet i Gradient Tool).
Dra övertoningsverktyget till lagermasken, börja från ungefär mitten och gå mot panelens övre kant.
Steg 9: Organisera “panel”-lagergruppen
Skapa en ny grupp (namnge denna lagergrupp som “panel”) och dra varje lager in i den utom bakgrundslagret. Klicka på triangeln till vänster om lagergruppen för att komprimera den.
Steg 10: Skapa skärmbasformen
Skapa ett nytt lager (du kan kalla det “skärmhuvud”) precis ovanför den nyligen gjorda “panel”-lagergruppen. Rita en rektangulär form ovanpå panelen med antingen pennverktyget eller rektangelverktyget (U), med hjälp av Free Transformera för att justera perspektivet.
Steg 11: Lägg till en gradientöverlagring till skärmbasformen
Ge formlagret en övertoning som går från ljusblått (#3b6c9e) till mörkare blått (#0ad2d9).
Steg 12: Skapa en bottenskärmsglöd
Skapa nu ett nytt lager (“bottom-screen-glow”) och gör en elliptisk vit form längst ner på panelen med Ellipse Tool (U). Använd Filter > Blur > Gaussian Blur för att mjuka upp den elliptiska vita formen. Vi kommer att behöva ta bort den del av glöden som rinner ut från skärmen.
Välj Polygonal Lasso Tool och gör sedan ett val längst ner på skärmen, men utelämna ungefär en pixel på skärmen så att det kommer att skapa en snygg realistisk effekt. Växla glödskiktets blandningsläge till överlagring och minska dess opacitet till cirka 56 %.
Steg 13: Skapa den inre skuggan
Skapa ett nytt lager (döp det till “inside-edge-shadow”) och spåra på skärmens övre och vänstra kant med hjälp av linjeverktyget (U).
Ge formen en mörkblå färgöverlagring. Duplicera lagret “inside-edge-shadow” (namnge det duplicerade lagret som “inside-edge-shine”). Använd flyttverktyget (V) för att flytta detta lager cirka 1 px ovanför den inre skuggan.
Ge den en 1px färgöverlagring (#ffffff) för att skapa en fin infälld effekt för den inre skuggan.
Steg 14: Skapa skärmstrukturen
Skapa ett nytt lager. Gör ett val med hjälp av Elliptical Marquee Tool mot den nedre halvan av monitorn.
Använd övertoningsverktyget (G) för att tillämpa en vit till genomskinlig linjär övertoning från toppen till mitten av markeringen. Duplicera lagret (Ctrl/Cmd + J). Välj Redigera > Free Transformera (Ctrl/Cmd + T) och rotera det duplicerade lagret med ungefär -30o.
Återigen, duplicera lagret som vi just roterade. Använda sig av Free Transformera igen för att rotera det duplicerade lagret med cirka 45o. Använd också Move Tool (V) för att arrangera dessa 3 lager så att de ser ut som ett fjäderfan.
Slå samman de senaste 3 lagren genom att välja dem i lagerpanelen, högerklicka på ett av dem och sedan välja . Namnge detta sammanslagna lager som “vågor” för organisation. Klicka nu på lagret “huvudskärm” i lagerpanelen för att välja det.
Använd Magic Wand Tool (W) för att välja runt skärmens basform. Invertera markeringen (Välj > Invertera). Tryck på nedåtpilen en gång för att flytta markeringen lite, växla tillbaka till “vågor”-lagret och tryck på Delete-tangenten för att ta bort överflödiga områden.
Sedan är det bara att minska “vågornas”-lagrets Opacitet till ca 15-20%, så att det inte blir så framträdande. Högerklicka på lagret “vågor” och välj sedan . För att avsluta den här designens blomstring, växla blandningsläget till Overlay.
Steg 15: Lägg till en symbol på skärmen
Låt oss lägga till ytterligare en detalj på skärmen. Skapa eller importera din favoritform/logotyp i ett nytt lager ovanför “vågor”-lagret. Jag har använt Windows-logotypen och har döpt dess lager till “fönster”. Du kan söka runt Photoshops förinställda anpassade former — gå till Redigera > Förinställningshanterare och välj sedan i rullgardinsmenyn Förinställningstyp — för att hitta en lämplig symbol för din LCD-skärm. Minska opaciteten för symbolens lager till cirka 81 % och ge den sedan ett övertoningsöverlägg som går från en babyblå färg (#cfedfc) till en benvit färg (#f1f9fd). Duplicera lagret och utför Redigera > Transformera > Vänd vertikalt.
Använd flyttverktyget (V) för att flytta dubbletten till den nedre högra delen av originalsymbolen. Vrid den lite (ca 15-20o) med hjälp av Free Transformera (Ctrl/Cmd + T). Justera den igen med hjälp av Move Tool (V) tills den ser ut som en reflekterad version av den.
Lägg till en lagermask till detta dubblerade lager och applicera sedan en svart-till-vit linjär gradient på masken från botten till toppen så att den bleknar bort när du går längre ner på skärmen.
Steg 16: Skapa ett sidofält på skärmen
I Windows Vista och 7 finns det de här sakerna som kallas widgets som du kan placera (som standard) till höger om skrivbordsbakgrunden. Det området betecknas med en halvtransparent vertikal rektangel.
För att lägga till lite mer detaljer till vår bildskärm kommer vi att skapa den halvtransparenta rektangeln. Skapa först ett nytt lager (kalla det “sidofält”) och gör en vit form på den högra sidan av skärmen (du kan använda pennverktyget, rektangelverktyget eller vilket verktyg du föredrar för detta). Minska opaciteten för denna vita rektangel till cirka 10 %.
Vi kommer att ge denna sidofält en 1px-kant till vänster (precis som i Windows Vista/7). Skapa ett nytt lager (du kan namnge det här lagret “sidebar-stroke”) och gör en vit linje till vänster om sidofältet. Minska sedan opaciteten för lagret till cirka 10 %.
Steg 17: Skapa en skärmglans
Vi spenderar verkligen mycket tid på skärmen och ger den många detaljer. Detta beror på att detta område är den mest framträdande delen av vårt arbete och även för att de små detaljerna gör stor skillnad. Den här gången ska vi ge skärmen en glans uppe till vänster.
Skapa ett nytt lager (kalla detta nya lager “skärmglans”). Använd Polygonal Lasso Tool (L) för att skapa ett urval som utelämnar cirka 1px av varje sida. Applicera en vit-till-transparent linjär övertoning på markeringen med övertoningsverktyget (G), och låt övertoningen gå från vänster till höger.
Ställ in blandningsläget på överlägg och opacitet till 60 %. Duplicera lagret “skärmglans” och ändra blandningsläget till Normal och Opacitet till cirka 62%. Skapa en ny lagergrupp (Layer > New > Group) som kallas “skärm” och dra alla lager ovanför “panel”-lagergruppen som är associerad med monitorns skärm till den här nya gruppen.
Du kan kollapsa den här gruppen efteråt för att hålla vårt arbete mer hanterbart.
Steg 18: Skapa knapparna
Skapa ett nytt lager över lagergruppen “skärm”. Gör en liten svart ellips i det nya lagret som representerar LCD-skärmens mittkontroll.
Ge den här knappen en Stroke och Gradient Overlay.
Stroke
Placera strecket inuti och ha en grå färg (#9c9b9b).
Gradient Overlay
Låt den linjära gradienten gå från en grå färg (#959494) till en ljusare grå färg (#e8e7e7).
Duplicera det här lagret två gånger och placera de två nya knapparna på vardera sidan av den första knappen med hjälp av flyttverktyget (V). Slå samman dessa tre lager (Ctrl/Cmd + E) och namnge det sammanslagna lagret som “knappar”.
Steg 19: Ge knapparna en glans
Skapa nu ett nytt lager som heter “buttongloss”. Gör små vita cirklar i detta lager, precis ovanför de tre knapparna. Minska sedan lagrets Opacitet till cirka 40 %. Skapa en ny grupp (som heter “Knappar”) och dra alla lager som är associerade med knapparna till denna grupp.
Steg 20: Skapa stamformen
Låt oss nu gå till den nedre delen av vår LCD-skärm, börja med skaftet/halsen på den. I lagerpanelen klickar du på bakgrundslagret och trycker sedan på Ctrl/Cmd + Shift + N för att skapa ett nytt lager precis ovanför det (du kan kalla detta nya lager som “stam”). Med Pen Tool (P) gör du en svart form som representerar stammen.
Steg 21: Tona ut stammen
Därefter kommer vi att få det att se ut som om stammen bleknar ut när vi går mot botten av duken för att hålla vårt arbetes belysning konsekvent. Gör detta genom att applicera ett övertoningsöverlägg på dess lager så att det är mörkare grått (#6e6d6d) överst och ett benvitt (#f3f2f2) längst ner.
Steg 22: Ge stammen en glans
Skapa ett nytt lager (du kan namnge detta “stamglans”) och gör en diagonal vit form över stammen med hjälp av pennverktyget (P).
Ställ sedan in opaciteten för detta lager till cirka 20-25%.
Steg 23: Ge stammen dess djup
I likhet med panelen måste vi också ge vår stam lite djup och tjocklek. Gör ett nytt lager (“stamtjocklek”) och skapa en form på höger sida av stjälken (visas i rött).
Ge denna form en grå (#999898) färgöverlägg.
Steg 24: Skapa en stamskugga
Vi kommer att få det att se ut som att panelen kastar en subtil skugga på stammen (igen, vi tänker på detaljerna). Skapa ett nytt lager (”stam-shadow”) och gör en svart form i området där stammen och panelen möts.
Lägg till en lagermask till det här lagret genom att klicka på ikonen längst ned på lagerpanelen. Använd övertoningsverktyget (U) för att dra en svart-till-vit övertoning på lagermasken som går från toppen till botten. Detta bör få det att se ut som om skuggan bleknar när den går mot botten av duken.
Minska opaciteten för skuggans lager till cirka 16 %. Skapa en ny lagergrupp som heter “stam” och flytta alla lager som är associerade med stammen in i den.
Steg 25: Skapa basformen
Därefter kommer vi att skapa basen för LCD-skärmen.
Klicka på bakgrundslagret och använd Ctrl/Cmd + Shift + N för att skapa ett nytt lager ovanför det (det ska vara under stammen). Rita en svart ellips. Ge basformen en Drop Shadow, en Inre Shadow och en Gradient Overlay.
Drop Shadow
Använd en ljusgrå färg (#d8d8d8) för skuggans färg.
Inre skugga
Använd en benvit färg (#fdfbfb) för den inre skuggans färg.
Gradient Overlay
Gradienten ska gå från en grå färg (#d0cece) till en benvit färg (#f0eded).
Steg 26: Ge basen en glans
Skapa ett nytt lager och gör vita former mot framsidan av basformen med hjälp av Polygonal Lasso Tool (L). Minska opaciteten för detta lager till 50 %.
Steg 27: Rita det inre spåret på basen
Skapa ett nytt lager och gör en elliptisk form inuti basformen (du kan förmodligen duplicera basformen och krympa ner den med Free Omvandla).
Ge lagret en Color Overlay, en Drop Shadow och en Inner Shadow.
Färgöverlägg
Färgen ska vara en mellanton grå (#c0bebe).
Drop Shadow
Skuggans färg ska vara vit (#ffffff).
Inre skugga
Den inre skuggfärgen ska vara svart (#000000). Ovanstående stilar kommer att få det att se ut så här:
Steg 28: Ge basen lite djup
Duplicera basformen igen. Se till att dubbletten placeras under originalet.
Flytta ner det lite. Ge lagret en skugga och en övertoning.
Drop Shadow
Skuggans färg ska vara svart (#000000).
Gradient Overlay
Gradienten kommer att ha 4 stopp. Från vänster till höger är de #aeaeae, #dbd8d8, #e5e2e2 och #d3cece. Du kommer nu att ha något sånt här:
Steg 29: Skapa en glans på basen
I ett nytt lager (döp det till “base-shine” och placera det precis ovanför “base-grave”-lagret), gör en tunn vit form med hjälp av Polygonal Lasso Tool (L).
Steg 30: Kasta en skugga bakom panelen
För att hålla vår belysning konsekvent behöver vi en skugga bakom panelen. Skapa ett nytt lager för skuggan precis ovanför bakgrunden. Välj ett rektangulärt område (du kan använda Polygonal Lasso-verktyget) som matchar panelens orientering.
Applicera en svart-till-transparent övertoning med övertoningsverktyget (G) i det valda området. När du är klar använder du Filter > Blur > Gaussian Blur med en radie mellan 1-1,5 px för att mjuka upp kanterna på skuggans form. Efteråt är det bara att minska lagrets Opacitet till cirka 15 %.
Steg 31: Kasta en skugga under basen
Därefter kommer vi att arbeta med basens skugga. Skapa ett nytt lager för det och gör en svart ellips med Elliptical Marquee Tool, precis under basen. Återigen, precis som skuggan bakom panelen, välj Filter > Oskärpa > Gaussisk oskärpa med en radie på cirka 1 px.
Minska lagrets opacitet till cirka 30 %. Skapa ett lager precis ovanför “base-shine” -lagret som vi skapade tidigare. Gör en svart form som täcker en del av baksidan av basen på vår LCD-skärm.
Använd sedan Gaussian Blur-filtret med radien på 1,3 px för att mjuka upp kanterna. När filtret har applicerats, sänk opaciteten för lagret till cirka 5 %.
Steg 32: Ljusreflektion längst ner på stammen
Skapa ett nytt lager precis ovanför “stam-shadow” -lagret som vi skapade tidigare.
På det här nya lagret använder du Polygonal Lasso Tool för att rita en form för ljusreflektionen, placerad längst ner på stammen. Minska lagrets Opacitet till ca 20% efteråt.
Steg 33: Förbättra belysningen runt knapparna
Ändå ser belysningen lite inkonsekvent ut.
Ah, knapparna är placerade över en blek bakgrund. Öppna “panel”-lagergruppen, skapa ett nytt lager ovanpå “bottom-edge-shine”-lagret och gör en tunn vit linje på skärmen som går över skärmen. Gör ett nytt lager igen.
Skapa en vit halvellips med Elliptical Marquee Tool som finns precis bakom våra tre knappar. Använd Filter > Blur > Gaussian Blur med en radie inställd på 4-5px för att mjuka upp belysningen; det här är det sista du måste göra.
Sammanfattning av handledning
En underbar sak med det vi har skapat är att vi kan ändra lagerstilarna för att få olika färger på skärmen.
Till exempel, här är några som jag skapade bara genom att ändra lagerstilen för vårt “huvudskärm”-lager. Jag hoppas att du har lärt dig massor av tekniker när det gäller att rita ikoner från början med Photoshop. Lämna dina tankar och frågor i kommentarerna.s
Ladda ner källfiler
Table of Contents
