Share
Denna handledning visar hur du gör en semi-transparent Vista-inspirerad meny med hjälp av gradienter, skuggor och suddning för att skapa en fantastisk modern effekt.
Öppna en ny duk som är 600x335px. Börja med att visa linjaler (Visa> Linjaler) och skapa sedan två guider som liknar bilden nedan. Skapa en på 285px och den andra på 310px.
Skapa en rektangel (U) som fyller det nedre reglerade området och märka lagret "nedre fältet". Öppna menyn Effekter för lagret. Navigera till egenskapen Gradient Overlay och använd en gradient mellan # 000000 och # 0c0c0c vid 90 grader.
Skapa nu en annan rektangel i det övre reglerområdet och namnge lagret "övre streck". Öppna igen effekterna menyn och använd ett överföringsöverlägg mellan # 35393d och # 787b7d vid 90 grader. Välj de två rektanglarna som hittills skapats och ändra opacitet till 90%. När en bakgrund läggs till senare kommer det att ge en bra effekt, eftersom det gör att bakgrunden kan visas lite.
Nästa steg är att lägga till en höjdpunkt i menyn med hjälp av Linjeverktyget (U). Välj linjärverktyget och ändra vikten till 2px. Rita en rad över stapeln och ändra färgen till # 9fa2a4. Byt namn på det här lagret till "lägre markering". Dra nu en annan rad direkt ovanför föregående och ändra färgen till # 484b4d och ändra namnet till "övre höjdpunkt". Gruppera dessa lager med stapelager i en grupp som heter "bar". Detta steg kompletterar grunden för menyn.
Nu när menyraden är klar kan vi skapa en uppsättning delare för att gå mellan texten. Välj linjärverktyget igen och lämna vikten vid 2px. Rita en vertikal linje från mittlinjens markör som stoppar några pixlar före markeringen. Detta behöver inte vara exakt och kan enkelt justeras senare. Öppna effektmenyn och använd ett överdrag för övertoner vid 90 grader mellan # 676a6d och # 4d6672. Märk detta lager "övre delare".
Rita en annan vertikal linje från centrumlinjen ner och stoppa samma avstånd från kanten som ovan. Det här avsnittet har ingen gradient, så ändra färgen till # 43474b. Byt namn på det här skiktet till "lägre delare". Gruppera delarna i divideraren och namnge gruppen "divider."
Välj typverktyget (T) och ändra färgen till vit (#FFFFFF). Teckensnittet som jag valde att använda för menyn heter Segoe UI, eftersom det är teckensnittet som används i Vista-användargränssnittet. Men inte alla har denna typsnitt, så som en ersättare Arial kommer att göra. Ställ in storleken till 11pt och skriv dina länkar ut, placera dem jämnt. Gruppera dem tillsammans och namnge gruppen "länkar".
Kopiera nu dina delare och rymma dem mellan länkarna. Du borde sluta med något liknande det här.
Nu är menyfältet i grunden färdigt, så du kan lägga till en bakgrund av ditt val. Bakgrunden jag valde är ett fotografi av gräs. Något färgrikt eller sceniskt kommer att göra.
Kopiera din bakgrund till menyn och byt namn på lagret Bakgrund. Se till att det här lagret ligger bakom i paletten. Observera att insynen i menyn låter bakgrunden visa sig utan att överbrygga.
Detta steg kommer att skapa den oskarpa avrundade rektangeln som ligger bakom texten. Denna effekt är ganska vanlig i Vista och är en bra teknik. Det tar bakgrunden i bakgrunden och lägger den på texten, men visar fortfarande den vackra scenen bakom.
Först och främst duplicera bakgrunden. Detta lager är inte permanent, men vi kommer att klippa ett urval av det. Använd sedan det runda rektangelverktyget (U) med en form som börjar förbi duken på vänster kant. Detta innebär att formen bara har två rundade kanter.
Rasterisera skiktet och använd sedan Magic Wand Tool (W), välj rektangeln och ta bort färgen samtidigt som konturen hålls. Välj nu bakgrundsskopian och skära från det lagret. Ta bort bakgrundsskopielaget och lägg till ett annat nytt lager som heter "oskärpa".
Klistra in formen i skiktet "Blur" och använd sedan en Gaussisk suddighet på 5px (Filter> Blur> Gaussian Blur). Applicera sedan en Drop Shadow enligt nedan.
Lägg nu till din text inuti suddningen. Använd samma typsnitt som länkarna (Segoe UI) skriv ditt namn och tagline. Välj en del av texten och gör den fet och behåll normal, använd en dropskugga och en gradient. Detta ger en modern text som har en slående utseende.
Det här steget är valfritt, eftersom det kommer att ge den blå markerade glöden som blir vår svängareffekt. Rita en stor Ellipse (U) som fyller området mellan delarna. Ändra ellipsens färg till # 5c94c5 och använd en Gaussisk suddighet på 10px. Formen har nu blivit ett rasterlager, och du kan städa upp överflödigt oskärpa genom att använda Marquee Tool (M).
Den här menyn ger en fantastisk effekt när den kombineras med en ljus scenisk bakgrund. Det använder transparens med stor effekt såväl som moderna gradienter. Användningen av höjdpunkter är ett bra knep för att ge ett spännande modernt utseende till bilder. Den här menyn skulle vara ganska lätt att skära upp och bli en mycket funktionell webbbaserad meny med svängtillstånd.
Accentsconagua