Share
I den här handledningen skapar vi en strukturerad webbplatslayout genom att lägga upp flera bilder. Att skapa väldigt texturerat webbdesign är enklare än du kanske tror. Du kan lära dig att bygga bildintensiva mönster snabbt. För mellanliggande Photoshop-designers skapar denna design mindre än en timme, och du lär dig några professionella tips under vägen. Låt oss börja!
Du kan se den sista bilden förhandsgranskning nedan.
Ta en titt på den webbdesign vi skapar nedan.
Vår videoredigerare Gavin Steele har skapat den här videoprocessen för att komplimangera denna text + bildtutorial.
I den här handledningen använder vi några stockbilder för att skapa en mycket texturerad webblayout. Låt oss börja med att skapa ett nytt dokument med följande storlek: 1000 pixlar per 1000 pixlar.
Nu går du och laddar ner den sömlösa trätexturen från Grafplus.com. Här hittar du hämtningslänken: Hämta trä sömlös textur. Öppna "texture-small.jpg" i Photoshop och gå sedan till Redigera> Definiera mönster. Välj ett namn för ditt mönster och klicka på OK. Du kan nu stänga bilden med trästrukturen.
Välj "bakgrundsskiktet" och tryck på Kommando + J. Den här genvägen kommer att duplicera "bakgrundsskiktet". Välj det här nya skiktet och välj Layer> Layer Style> Mönsteröverlägg ... från det övre menyn. Använd det mönster du skapade för några sekunder sedan.
Använd rektangulärverktyget för att skapa vissa vertikala streck med olika färger /
Välj alla dessa former i lagpaletten genom att hålla ner kommandotangenten och med musklicket på varje lager). På så sätt väljer du alla former.
När du har alla former markerade trycker du på Kommando + E (den här genvägen sammanfogar alla lager i en enda). Ändra blandningsläge till Color Dodge och Opacity-värdet till mellan 40% och 50%.
Nu är det dags att lägga till en annan stor lagerbild. Besök grafplus en gång till och ladda ned följande bild: grunge konsistens. Placera den här bilden i ditt dokument längst upp. Gå till Arkiv> Plats, och välj den här fina grungestrukturen.
Se till att du har valt det här laget och applicerar sedan en enkel droppskugga. Layer> Layer styles> Drop Shadow.
Använd det rektangulära markeringsverktyget för att göra ett val enligt bilden.
Var noga med att du har lagret med den valda grungen texturen, och tryck sedan på Command + J (den här genvägen skapar ett nytt lager via klipp). Välj det nya lagret och rotera lagret 180 grader (Redigera> Transformera> Rotera 180. Placera det här nya lagret ovanpå layouten med Move-verktyget. Fortsätt och lägg till din logotyp nu också. text: "PSDtuts +."
Ändra blandningsläge för textlogotypen till färgbränning.
Använd samma teknik för att klippa några knappar och en sidfot. Här kan du se resultatet.
Om du vill skapa en distinkt knapp med en annan färg måste du välja lagret med knappen som du vill göra den unik och tryck sedan på Kommandot + U för att få fram inställningen Hue / Saturation. Markera kryssrutan Colorize och flytta reglaget till höger eller vänster tills du är nöjd med resultatet.
På höger sida skapar du en vit form med rektangelverktyget.
Använd Linjeverktyget för att skapa några tunna linjer och placera dem över den vita formen. Färgen som används för raderna är # d3d1d2.
Välj den vita formen och raderna i din lagerpalett och tryck sedan på Kommando + E för att slå samman alla lager. Välj Eraser Tool och med en liten rund borste radera några delar av lagret tills du har en realistisk bit papper.
Lägg nu till följande lagerstilar.
Använd det horisontella typverktyget för att lägga till lite text. Jag använde Myriad Pro typsnittet (du hittar teckensnittet i Windows 7 och Vista).
Lägg nu till en annan bild i mitten av layouten och lägg till två pilar på höger sida av bilden. Pilarna hittar du under Custom Shape Tool.
Tillsammans med PSD-filen hittar du två lagerbilder i Psd Plus-källfilerna för denna handledning. Om du inte är en Plus-medlem kan du naturligtvis söka efter motsvarande bilder på webben. Den första är ett löv, och den andra är en röd blomma. Öppna båda bilderna i Photoshop och ta bort bakgrunden. Båda bilderna är mycket höga kvalitet på cirka 4000 pixlar, och du kan ta bort bakgrunden med Magic Eraser Tool, eller använd din föredragna metod.
Placera bilden med bladet på höger sida av layouten under den vita pappersbiten.
Duplicera skiktet med bladet flera gånger och placera dessa flera blad i olika positioner som visas.
Det sista steget är att placera den röda blomman över de gröna bladen.
Här är slutresultatet. Ha kul att skapa egna högtexturerade Photoshop-sidlayouter.
Accentsconagua