Någonsin undrat hur några webbdesigners kommer med så stora bakgrundsstrukturer? Det är faktiskt väldigt lättare än du kanske tror. Det tar bara några minuter och ett enda Photoshop-filter som du förmodligen aldrig har använt.
Fascinerad? Läs vidare för att se stegvisa instruktioner för att skapa klibbiga texturer ur nästan vilken bild som helst.
Det enkla sättet eller det svåra sättet
Det finns två sätt att gå igång om att starta projektet. Du kan antingen ta en förbyggd konsistens eller skapa din egen från början. För denna handledning vill jag ge er dina pengar värda så vi tar den höga vägen och skapar vår starttextur från grunden.
Men om du har bråttom, ta bara en fri textur från någonstans och hoppa över de första stegen. Här är tre stora resurser för att komma igång (från vår artikel? 40 Amazing Resources for Design Freebies?).
Förlorad och Tagen
CG-texturer
Texture King
Om du vill ha något mer unikt, öppna Photoshop och följ med.
Steg 1: Ny kanfas
Kakel bakgrundsbilder kan vara ganska lätta att upptäcka när de är små så jag ska göra mina ganska stora. Vi sparar det som en JPG så att filstorleken borde vara tillräckligt liten för att ladda snabbt på de flesta anslutningar. Om du inte håller med den stora storleken, gör du bara mindre!
I Photoshop, skapa ett nytt dokument som är 800 pixlar med 800 pixlar vid 72 dpi och i RGB.
Fyll nu din duk med mellannivå till mörk fast färg. Du kan välja vad du vill, men jag gick med # 80ac4b.
Steg 2: Skapa en anpassad pensel
Jag har märkt att bokeh texturer verkar vara väldigt populära nyligen bestämde jag mig för att visa dig hur man bygger en. Det är ett bra exempel eftersom det kommer att göra en textur som är lite knepigare än flertalet.
För att börja, skapa ett nytt dokument, ta en hård rund borste och klicka en gång i mitten av duken för att göra en svart punkt. Jag har gett mig en liten svart yttre glöd för att lägga till bokeh-effekten lite. Gå nu till Redigera> Definiera borstförinställningen.
Namn din pensel, spara det och byta tillbaka till din andra duk.
Välj nu den penseln, gå till paletten och använd följande alternativ för att ge den en bra scatter-effekt.
Ste 3: Måla den
Nu när du har en fin borste att arbeta med, måla i någon bokeh. Får inte bli fördragen, kom ihåg att ju mer komplexa det är desto svårare är det att gå in och fixa när vi konverterar det till ett repeterande mönster.
Här är det mönster som jag kom fram till:
Steg 4: Offset
Det här är den del där Photoshop tar över och gör ett snyggt knep som sparar mycket tid. Kontrollera först att dina lager slås samman i ett platt dokument. Gå nu till menyn och välj Filter> Annat> Offset.
Ställ in din horisontella och vertikala förskjutning till halva pixeldimensionerna på din duk och välj alternativet omslag.
Voila! En sömlös bakgrundsstruktur. Ok kanske inte. Många av arbetet har dock gjorts för oss, och vi behöver bara en liten rengöring för att få det att fungera.
Steg 5: Rengör sömmarna
Om vi arbetade med en fotografisk konsistens skulle vi gå in och klona längs sömmarna för att se till att allt såg bra ut. Men här har vi en solig färgbakgrund, så vi kan faktiskt bara måla med en grön borste.
Gå in och måla helt över problematiska områden. Det är okej om du förstör en del bokeh i processen. Som du kan se i bilden nedan har jag utplattat en av mina cirklar en bit under reparationen av texturen. Vi fixar det här i nästa steg.
Steg 6: Lägga till lite mer Bokeh
Ta nu den bokeh-borsten du gjorde och stäng av eventuella spridningseffekter som du slår på tidigare. Lägg till i lite extra bokeh ett klick i taget där det finns märkbara luckor i mitten av bilden (håll dig borta från kanterna!). Använd några lager och varierande opacitet så att det ser bra ut och byt ut några cirklar som du förstörde med föregående steg genom att måla över toppen av dem.
När du är klar med det här steget ska du ha en vacker och perfekt plattformsfilm. Spara det nu som en JPG, behåll din filstorlek så låg som möjligt samtidigt som du behåller en skarp bild. Jag bestämde mig för att rädda mina ut på 500px med 500px så att jag lätt kunde upptäcka det repeterande mönstret och leta efter besvärliga områden.
Nästa testar vi det i en webbläsare för att vara säker på att den fungerar.
Steg 7: Kasta den på en webbsida
Det bästa sättet att testa texturen är bara att skapa en snabb webbsida. Skapa ett tomt HTML-dokument och utforma kroppen med följande CSS:
Nu förhandsgranska det i din webbläsare för att se hur du gjorde det. Oroa dig inte om det inte är perfekt, bara gå tillbaka och tweak alla områden som behöver lösas. Som du kan se i bilden nedan klipper vi ganska bra! Inte illa för bara några minuters arbete.
Organiska Texturer
Bara för att vara grundlig vill jag också visa dig hur det här fungerar med en textur som är lite mer typisk med de resurser du hittar online. Här är en som jag tog tag i från Flickr.
Först klippa av kanterna, de blir för lätta att upptäcka i ett upprepat mönster. Kör sedan offset-kommandot som vi gjorde tidigare.
Som du kan se i bilden ovan är denna textur så perfekt för den här tekniken att det är svårt att upptäcka sömmarna, även innan vi gör någon rengöring! Fortsätt gå längs sömmarna med antingen klonverktyget eller läkborsten för att se till att övergångarna är fina och gradvisa.
När du har gjort det, spara det och ladda upp det i webbläsaren som tidigare för att se om du har några fula områden.
Bilden ovan visar min slutprodukt. Går igenom det en gång med en mycket lättare textur att arbeta med, jag kunde skära min tid ner till ungefär två minuter!
Slutsats
Denna metod är så snabb och enkel att du verkligen inte har någon ursäkt för att inte ge det ett skott nästa gång du vill krydda din webbdesigns bakgrund. Att skapa din egen kaklade texturer istället för att få tag i en färdig tillverkad, hjälper dig att hålla din webbplats unik och ger dig mycket mer frihet i vilken typ av textur du vill ha.
Låt oss veta i kommentarerna nedan om du kunde komma med en anständig kakel med denna metod. Lämna en länk till din slutprodukt så vi kan kolla in det!