Share
Offset-filtret är ett utmärkt verktyg för att skapa ett upprepande mönster för en webbplatsbakgrund. Tyvärr fungerar förskjutningsfiltret bara för en platt bild med ett lager och fungerar inte under alla situationer. I dagens handledning demonstrerar vi hur man skapar ett repeterande mönster med smarta objekt och knäpptekniken med piltangenterna.
Följande resurser användes under produktionen av denna handledning:
Innan vi börjar börjar vi med några grundläggande principer för mönsterdesign.
Allt som ligger i mitten kommer att upprepas lätt. Du behöver inte göra något med det (1).
Objekt placerade på kanten kommer att avskuras (2a). Du måste lägga till den på motsatta sidan (2b).
Objekt som placeras på hörnet kommer att avskuras (3a). Du måste lägga till det i andra hörn (3b).
Ladda ner blomrama och öppna den i Illustrator. Välj ett av objekten och tryck Cmd + C för att kopiera.
Skapa en ny fil. Vi ska skapa ett 256 x 240 px mönster.
Skapa ett nytt lager. Fyll det med vilken färg som helst, högerklicka och välj Konvertera till Smart Object. Detta smarta objekt blir vårt mönster.
Klicka på Bild> Kanfastryck. Aktivera Relativ och ställa in Bredd och Höjd till 200%. Detta ökar dukens storlek till 3 gånger större än vårt mönster blir.
Duplicera det smarta objektmönstret genom att trycka på Cmd + J och fyll sedan på duken med mönstret. Vid denna tidpunkt kommer du att ha 9 smarta objekt på din duk. Dessa 9 smarta objekt skapades från samma förälder, redigering av en av dem kommer att ändra den andra 8. Det betyder att vi kommer att kunna se de ändringar vi gör i vår mönsterförändring i realtid.
Dubbelklicka på ett av smarta objektets miniatyrlager för att redigera innehållet. Om du hittar den här dialogrutan klickar du bara på OK. Det smarta objektet öppnas som en ny fil i en ny flik. Det här är filen som vi kommer att lägga objekten för vårt mönster.
Klicka på Fönster> Ordna> Flyta allt i Windows för att se båda filerna samtidigt.
I mönstervilen klistra in (Cmd + V) vektorformen från Illustrator. Placera det mitt på bilden. Spara mönsterfil (Cmd + S) och automatiskt uppdateras den stora filen. Eftersom objektet är i mitten ser mönstret bra ut (principer # 1).
Återgå till Illustrator, kopiera en annan form. I Photoshop klistra in objektet och lägg det på vänstra kanten. Spara fil och du kan se i den stora filen saknas en del av objektet.
Duplikatlager (Cmd + J). Vi måste sätta detta på motsatt sida, höger (principerna # 2). Kom ihåg att mönsterbredd är 256 px. Nudge detta lager 256 px till höger. Varje gång du trycker på pilknappen, slår du objektet 1 px bort. Om du trycker på Shift + Arrow du knyter 10 px. Så tryck Shift + Right Arrow 25 gånger sedan högerpil 6 gånger. Tryck Cmd + S för att spara mönster och se hur mönstret ändras.
Ta en annan form från Illustrator. Den här gången lägger den på överkanten. Spara filen och du ser att den nedre delen av mönstret saknas.
Vi använder fortfarande Princip 2. Duplikatlager (Cmd + J). Nudge den 240 px ner, det vill säga tryck på pilknappen 24 gånger. Spara fil och se mönstret.
Ta en annan form från Illustrator. Sätt den i höger nedre hörnet. Spara fil och du ser att det saknas bit i vissa områden.
För objekt i hörnet måste vi sätta paret i alla andra hörn (Princip # 3). Duplikera skiktet och nudge det 240 px uppåt. Spara fil för att se resultatet.
Duplicera skiktet och stryk det 256 px kvar. Spara fil för att se resultatet.
Nu sista stycket. Duplicera skiktet och nudge det 240 px ner. Spara för att se resultatet.
Fyll tomt utrymme med mindre former från Illustrator utan att röra kanten. Spara för att se resultatet.
Ta bort bakgrundsskiktet för att göra det här mönstret transparent.
Klicka på Arkiv> Spara för webb och enheter. Välj Förinställd: PNG-24. Aktivera öppenhet.
Öppna PNG-filen som vi just skapat. Klicka på Redigera> Definiera mönster.
Skapa en ny fil.
Lägg till en radial gradient från vit till svart i bakgrunden.
Skapa ett nytt lager. Klicka på Redigera> Fyll. Välj Använd: Mönster och välj mönster som vi just skapat.
Lägg till justeringslagsfärg / mättnad. Aktivera Colorize och flytta reglaget för att lägga till lite färg.
Det är allt! Var gjort. Du kan se den slutliga bilden nedan. Jag hoppas att du haft denna handledning och lärde dig något nytt. Försök använda denna teknik med andra former eller linjer. Du kommer att förvåna dig själv med resultatet.
Accentsconagua