Share
I läsarens förslag nyligen hittade jag en förfrågan om hur man producerar hylla gränssnittet på den otroligt coola webbplatsen för Dragon Interactive, en kreativ byrå i Los Angeles. Så här är en metod för att producera hyllaffekten.
Redaktörens anmärkning: Dragon Interactive bad oss om att notera att denna handledning inte faktiskt skrivs eller stöds av Dragon själva.
Använd pennverktyget (P) genom att skapa en sökväg som visas nedan. Oroa dig inte för bakgrundsfärgen. Jag valde den här färgen så att du kan se vägen. Gå sedan till din Path Palette och klicka på knappen Create New Path. Detta kommer att skapa ett nytt banlag och spara din befintliga sökväg till lagret under den. Jag heter min "Separator".
Obs! Om du förlorar valet av din väg när som helst, gå till fliken banor och välj separatorlagret. Detta är viktigt för de kommande stegen.
Skapa ett nytt lager, välj borstverktyget (B) och välj en 1px hårdborste. Byt din förgrundsfärg till en svart och välj sedan Penverktyget igen. Högerklicka nu på banan och välj Stroke Path. I rutan som dyker upp, se till att borsteverktyget är valt och att simulera trycket är avstängt. Ring detta lager "svart separator". Tryck på Enter om sökvägen blockerar din syn på den svarta linjen. Och oroa dig inte, som jag nämnde tidigare kan du ommarkera den här sökvägen i Paths Palette.
Duplicera skiktet "svartavskiljare", kontrollera att Verktygsverktyget (V) väljs och tryck sedan på vänster pilknapp en gång. Detta kommer att knyja den linjen en pixel till vänster, slå nu Ctrl + I för att invertera färgerna. Namn det här skiktet "vitavskiljare" och placera dem i en skiktuppsättning som heter "separator". Observera att knappen Skapa en ny grupp ligger bredvid knappen Skapa ett nytt lager. För nu håller läget för detta lager inställt på Normal Även om vi ändrar det senare i handledningen.
Välj Paint Bucket Tool (G) och använd de inställningar som visas på skärmdumpen nedan. Skapa sedan ett lager under separatorsatsen och fyll i separatorens vänstra sida med # 3d3d3d.
Skapa ett lager ovanför och gör detsamma för höger sida, förutom denna gång använd # 111111. Nudge den "mörkgrå" fyllningen, en pixel till vänster (med piltangenterna!) Och "ljusgrå" fyllningen, en till höger. Du bör vara medveten om att om du är i 100% zoomvy, kommer du att flytta 1px när du trycker på vänster / höger piltangent, men om du zoomas ut längre så flyttas ett annat antal pixlar. Om du till exempel tittar på 66%, trycker du piltangenten en gång på 2px, vid 50% syns det kommer att flyttas 3px och så vidare. Så se till att du är 100% :-)
Därefter borstar du med penselverktyget eller pennaverktyget längs kanvasens sidor för att fylla den där transparenta pixeln med rätt färg. Släpp dessa två i en uppsättning som heter "bakgrund".
Vi har vår grundläggande uppsättning redo. Nu är det dags att lägga till höjdpunkterna och skuggorna. Skapa en gradient med färgen # 707070 som visas nedan och sedan gradientfyll ett nytt lager med den gradienten. Se till att gradientens storlek är ungefär densamma som min. Om du har problem med gradienter kan du antingen expandera dem vertikalt genom att slå Ctrl + T och dra dem vertikalt eller du kan använda filtret> Blur> Motion Blur filter (jag föredrar den fria transformationen).
Dessutom skapar du på ett nytt lager en liknande smal gradient fylld med vit. Ställ in det på Överlagring och släpp upp opaciteten till 40%. Jag lägger dessa två lager i en uppsättning som heter "höjdpunkter".
Skuggorna skapades på ett liknande sätt. Först en "stor skugga" -gradient med svart med skiktet och inställt på Soft Light och 80% Opacity skapades en utsträckt gradient. Därefter tillsattes en "liten skugga", igen med svart men den här gången var skiktet inställt på Overlay och opaciteten sjönk ner till 40. Dessa två lager sattes i en uppsättning som heter "skuggor".
Höjdpunkterna och skuggorna är alldeles fördefinierade på den mörkgråa tiden för att fixa det.
Sätt "skuggorna" och "höjdpunkterna" in i en ny uppsättning. Jag ringde min S / H. Se till att höjdpunkterna är inställda under skuggorna. Lägg till en lagermask i S / H-uppsättningen.
Nu Ctrl-klicka på ditt "mörkt grå" lager. Den här gången går det med hjälp av en svag borste med låg opacitet över det maskerade området inom valet. Med varje slag beror skuggorna och höjdpunkterna bort. Reglera opaciteten hos din svarta borste för att få större kontroll över transparensen.
Ju mer ogenomskinlig borsten är desto klarare blir skuggorna och höjdpunkterna. Om du fortfarande känner att du behöver ännu mer kontroll, kan du lägga till masker till lagren själva. Om du till exempel lägger till en mask i "markera stor" -lagret får du bara redigera opaciteten för det laget. Använd detta till din fördel.
Nu kommer den svåra delen. Beroende på din smak och skicklighet måste du nu borsta in ytterligare skuggor och höjdpunkter. Jag föreslår att du lägger hela penselarbetet i ett separat set som heter "Borsta" längst upp i dokumentet. Använd svarta borstar med låg opacitet för att lägga till skuggor. Tålamod är nyckeln här. Det finns inget fast sätt att göra det. Jag använde en stor (180px), mjuk svart borste som satte sig till 10% opacitet och tappade längs kanterna.
Duplicera "bakgrundsskiktet" och tryck Ctrl + E. Detta kommer att rasterisera det i ett enda lager. Använd Dodge och Burn-verktygen för att lägga till ytterligare höjdpunkter och skuggor om det behövs. Highlight-funktionen fungerar bäst här, med låg exponering (cirka 15-20%).
Hittills har vi använt separatorn för att hjälpa oss i vår process med skuggorna / höjdpunkterna etc. så att vi har en klar uppdelning mellan ljus och mörkt område. Nu ska vi slutföra denna design. Ställ in "separatorn" som är inställd på Överlagring. Wow, ett streck visas! Om du inte är nöjd med det, duplicera både "vita separator" och "svarta separator" -lagren och dra dem en pixel åt höger. Det skapar ett mindre framträdande utseende.
Effekten är inte för svår att uppnå. När jag först analyserade webbsidan förstod jag att formen kunde skapas med banverktyget och resten var bara en massa skuggor och höjdpunkter som kunde skapas tack vare en kombination av borstning och gradienter. Ju mer arbete du lägger i dessa skuggor desto bättre blir resultatet.
Men vänta, det ser inte ut som Dragon Interactive webbsida!
Nej det gör det inte. Denna handledning skrevs för att visa dig hur denna 3D-effekt skapas. Dragon Interactive-webbplatsen har mycket mer än det här gränssnittselementet, och du kan lära dig mycket genom att studera hur de har placerade, färgade och stora objekt. I allmänhet är det inte en dålig idé att analysera någon design som du stöter på och tänka på varför designern har gjort vad de har gjort, liksom hur de gjorde det.
Accentsconagua