Share
Heeft u zich ooit afgevraagd hoe u perfecte, naadloze achtergrondpatronen kunt maken die werken op Photoshop en op internet? Zoek niet verder want vandaag gaan we het voor u opsplitsen - stap voor stap. Je zult binnen de kortste keren je eigen achtergrondpatronen creëren!
Heya iedereen! Vandaag zetten we onze tutorialseries voort over het creëren van achtergrondpatronen die op het web (en tijdens de ontwerpfase) kunnen worden gebruikt met onze vierde editie: Texturen van synthetische stoffen. We zullen kijken hoe we geloofwaardige, tegelbare fabric-patronen kunnen creëren door te beginnen met een eenvoudige vanille-aanpak en vervolgens dezelfde principes te volgen om geavanceerde versies te maken.
Ons doel is eenvoudig: Iemand leren hoe achtergrondpatronen moeten worden gemaakt die voor het web zijn bedoeld (maar die ook gemakkelijk tijdens het ontwerpproces kunnen worden gebruikt). We gaan 'programmale agnostisch' zijn, wat betekent dat de meeste tips zowel in Photoshop als in Fireworks werken.
Zorg ervoor dat je de rest van de serie bekijkt, inclusief Carbon Fiber, Noisy Backgrounds en de post Intro to Patterns!
Vandaag is dag vier in onze serie - maar het is de moeite waard te vermelden dat al deze tutorials "standalone" zijn - wat betekent dat je in Deel 4 moet kunnen kiezen, zelfs als je de eerste paar delen hebt gemist.
Het patroon dat we vandaag gaan behandelen, is hoe je een effectieve "synthetische weefseltextuur" kunt maken die als een patroon in Photoshop kan worden gebruikt, evenals een tegelachtergrond op je webpagina's. We gaan dit in 4 stappen doen:
Sinds enkele maanden zijn subtiele, lawaaierige structuren super populair bij webontwerpers (bekijk onze tutorial over hoe ze hier te maken). Maar de laatste weken merk ik steeds meer "geavanceerde" ruisstructuren op? wat wil zeggen dat mensen voorbij gaan aan de simpele benadering van 'ruispatroon toevoegen' en funkier effecten uitproberen. Er zijn twee belangrijke dingen die ik graag wil vermelden:
1: De texturen die we vandaag gaan behandelen, zijn allemaal 100% gemaakt in Photoshop. We bespreken hoe we fotografische structuren maken in onze volgende tutorial.
2. Deze texturen moeten subtiel zijn en spaarzaam worden gebruikt. Niets schreeuwt 1995 als een fugly achtergrondstructuur met behulp van heavy handed Photoshop-filters.
Alright? Je bent gewaarschuwd. Laten we dit doen!
Deze introductietextuur is ongelooflijk eenvoudig te maken, maar kan worden gebruikt voor een aantal zeer professioneel ogende resultaten wanneer deze op de juiste manier worden gebruikt.
Bekijk bijvoorbeeld de textuur achter het voettekst van het WordPress-thema 'qop':
Niet slecht toch? We beginnen met een leeg canvas. Stel de grootte in op 400 x 400 voor nu. De grootte kan later worden gewijzigd, maar je wilt niet dat deze te klein is, omdat we wat ruimte rond de randen nodig hebben om te werken met.
Maak een nieuwe laag en vul hem in Zwart kleur.
Ga je gang en noem het de zwarte laag alleen omwille van de organisatie.
Nu willen we een snelfilter toepassen om de basis te leggen voor onze ruwe lijntextuur. Breng in de zwarte laag het volgende filter aan: Filters> Schets> Waterpaper.
U kunt de instellingen aanpassen totdat u uw eigen gewenste effect hebt, maar de demotextuur gebruikt de volgende instellingen:
Stel de overvloeimodus van de zwarte laag in op Scherm zodat alleen de witte lijnen zichtbaar zijn. Op dit punt kunt u ook een achtergrondrechthoek toevoegen om een kleur voor uw textuur in te stellen. Merk op dat je de kleur op elk moment in dit proces kunt wijzigen.
We kunnen nu echt niets anders zien dan wit? dus laten we een eenvoudig gekleurde rechthoek toevoegen en deze onze achtergrondkleur noemen. Ik heb de kleur gebruikt # 242d34, maar voel je vrij om alles te gebruiken wat je maar wilt.
Ahh, veel beter! Nu kunnen we onze textuur zien. Het is echter een beetje plat. Laten we dus een beetje diepte toevoegen aan onze textuur - we doen dit door een nieuwe laag te maken en deze opnieuw in te vullen met Zwart (opnieuw). Noem deze laag "Wit" (je zult zien waarom in de volgende stappen).
Nu gaan we het toevoegen Filters> Schets> Waterpaper effect, maar deze keer willen we nog veel meer helderheid en contrast toevoegen aan de instellingen:
Omkeer nu de kleuren voor diezelfde laag (Afbeelding> Aanpassingen> Omkeren) en stel de overvloeimodus in op Vermenigvuldigen. Zet de dekking van de laag op ongeveer 90% zodat het effect niet te schurend is.
Whallah! Niet te sjofel toch?
De volgende stap is om de randen van dit patroon bij te snijden omdat Photoshop de neiging heeft om een beetje zwaarhandig rond de randen te krijgen. Snijd in ongeveer 50 px van elke rand met behulp van de Gewas gereedschap.
Waarom hebben we dit bijgesneden? Omdat Photoshop de neiging heeft om een beetje zwaarhandig te worden rond de randen van het Water Paper-filter, wat betekent dat als we een patroon proberen te maken, we duidelijke "naden" krijgen. Uitsnijden vanaf de rand helpt ons om deze zichtbare naden te verwijderen wanneer we dit als een patroon of op het web gaan gebruiken.
De laatste stap is simpel: stel gewoon de achtergrondkleur in op de gewenste kleur, pas de dekking van elke filterlaag aan tot je het gewenste niveau van textuur krijgt en maak er dan een patroon van (Bewerken> Patroon definiëren). Helemaal klaar!
En het uiteindelijke product zou er als volgt uit moeten zien als het als een patroon wordt gebruikt:
Dit kan een beetje te dramatisch zijn in termen van contrast om te gebruiken (meestal kies ik de intensiteit voor zelfstudies om de effecten duidelijk te maken), dus voel je vrij om te spelen met de dekking van de textuurlagen om het "precies goed" te maken voor uw eigen ontwerp.
Om dit effect aan te passen: De belangrijkste dingen die u misschien wilt tweaken zijn de "vezellengte" van het waterfilter en de achtergrondkleur. Bovendien kan het ook leuk zijn om te rotzooien met de schaal van het uiteindelijke patroon. Zodra je hebt ingeknipt, probeer dan de hele afbeelding te vergroten of verkleinen om de dichtheid van de textuur aan te passen (en gebruik de verscherpingstool om te tweaken hoe scherp deze is).
Deze volgende textuur is waarschijnlijk de eenvoudigste van alle vier vandaag. Drie eenvoudige stappen voltooien het effect:
Maak eerst een nieuw document (400 x 400) en teken een gekleurde rechthoek op het document. We zullen dit later gebruiken om de kleur van het uiteindelijke patroon aan te passen.
Maak vervolgens een nieuwe laag, vul deze in met Black en voeg het filter toe: Filter> Textuur> Texturizer. Gebruik de volgende instellingen:
Stel de overvloeimodus in die laag in op Scherm.
Maak vervolgens een nieuwe laag, vul deze deze keer met Wit in. Voeg exact hetzelfde filter toe: Filter> Textuur> Texturizer. Gebruik de volgende instellingen:
Stel nu de overvloeimodus van die laag in op Kleur branden, zodat u door kunt tot de achtergrondkleur.
Laten we tot slot de achtergrondkleur aanpassen aan iets subtielers. Let op: als u de achtergrondkleur aanpast, wilt u misschien ook de dekking en overvloeimodi van de bovenste twee lagen aanpassen totdat het effect is zoals u het wenst.
Het laatste patroon zoals getoond in de demo:
U kunt het patroon vanaf hier maken (Bewerken> Patroon definiëren), of u kunt rond spelen met de achtergrondkleur, de dekking van filterlagen en het bijsnijden totdat u een patroon hebt dat naadloos is en bij uw ontwerp past.
Deze volgende textuur is een beetje geavanceerder, dus let speciaal op als je dit effect wilt recreëren.
Begin met een nieuw document (400 x 400) en begin met het tekenen van een blauwe rechthoek (# 2b4891) als achtergrond. Je kunt eigenlijk elke kleur kiezen, maar we zijn gewend om blauwe denim te zien, dus daar blijven we voorlopig mee hangen.
Maak vervolgens een nieuwe laag en Vullen het met 50% grijs (u kunt de sneltoets gebruiken Shift + Backspace / Verwijderen). Geef het nu de naam Horizontale laag.
Stel vervolgens de Voorgrond en Achtergrond kleur naar standaard zwart-wit door op te drukken D. We moeten de basis toevoegen voor ons denimpatroon. Pas op onze grijze laag het filter toe: Filter> Schets> Halftoonpatroon.
Gebruik de volgende instellingen:
Dit zou een basislijnpatroon moeten opleveren? maar denim is "fuzzy", dus we willen dit een beetje verpesten met een ander filter: Filter> Pixelgrootte> Mezzotint. Zet het type op Fijne puntjes.
Maak nu een duplicaatkopie van deze laag (Cntrl + J) en noem het "Verticale laag".
Gebruik de gratis transformatie tool (Cntrl + T) om het 45 graden te roteren EN ver genoeg uit te schuiven zodat het elke hoek van ons document ontmoet. Ik heb het toevallig met 145% verhoogd voor het geval je de mijne precies wilt matchen.
Maakt u zich geen zorgen dat het schalen van het patroon zo groot is dat er rasteronvolkomenheden ontstaan. We willen die eigenlijk. In feite, ga je gang en voeg extra vervaging toe (Filter> Gaussiaans vervagen ingesteld op 0,3) voor zowel deze laag als de eerste niet-getransformeerde laag.
Stel ten slotte de overvloeimodus op de diagonale laag in op Meerdere met 70% dekking -- en stel de overvloeimodus op de horizontale streeplaag in op Zacht licht met 60% dekking.
Dat maakt het denim-effect compleet! Je kunt sleutelen aan de achtergrondkleuren en er vervolgens een patroon van maken (Bewerken> Patroon definiëren).
Notitie: Als je duidelijke naden in je patroon opmerkt, zul je wat moeten spelen met het bijsnijden. De truc hier is om er zeker van te zijn dat er geen onnatuurlijk heldere of donkere lijnen in de buurt van een van de randen zijn. Probeer een paar verschillende uitsneden tot het patroon naadloos is.
Als je de demo letterlijk hebt opgevolgd, kun je eenvoudig de hoogte van je document naar 400 px verkleinen 396px. Dit zal de naden op afstand verwijderen (onder):
Whallah! Hoe werkt dit? Als je het ons nog herinnert in onze eerste patroonzelfstudie, is het algemene idee hier dat de laatste paar pixels aan de rechterkant en de onderkant van ons patroon altijd links en bovenaan het document moeten linken. Als je in dat geval die 4px afsnijdt, wordt de onderkant beter op de voorgrond geplaatst. Omdat rechts en links al overeenkomen, kunnen we gaan!
Alright! We zijn aangekomen bij de definitieve textuur van de dag. Inmiddels hebben we een aantal behoorlijk lastige technieken gebruikt, dus deze laatste stap zal eigenlijk vrij eenvoudig lijken.
Maak een 200 x 240 document. Ga door en sleep de drie onbewerkte lagen in die we voor ons denimpatroon gebruikten (de twee structuurlagen + de achtergrondkleur).
Groepeer deze lagen samen (Ctrl + G) en stel een 50px breed masker in over de hele groepsmap. Als u nog niet eerder een dergelijk groepsmasker hebt gemaakt, is dat eenvoudig: gebruik gewoon het Rechthoekig selectiekader selectietool om een 50px brede selectie te tekenen die het document van boven naar beneden vult (bekijk de info paneel om uw meting te controleren). Klik vervolgens op de knop "Vectormasker toevoegen" onderaan het lagenpaneel:
Waarom 50px? Omdat we met een document van 200px breed 4 strepen van 50px willen passen.
Dupliceer vervolgens deze laaggroep, verplaats deze naar de rechterkant van de eerste groep en vervolgens (optioneel) horizontaal omdraaien om een tegenoverliggend diagonaal patroon te maken.
Om wat contrast in de strepen toe te voegen, verander eenvoudig de achtergrondkleur (subtiele veranderingen zijn hier het beste) naar iets dat een beetje helderder of donkerder is dan de originele kleur).
Tenslotte, dupliceer BEIDE van onze streepgroepen en verplaats ze naar de lege ruimte op ons document.
We zijn nog niet helemaal klaar - om wat visuele interesse toe te voegen, laten we de groepsmaskers voor deze laatste twee strepen ontkoppelen, verplaats dan de 3 denimlagen naar binnen over ongeveer 100 px om een iets andere richting te creëren. Het eindresultaat is niet dramatisch anders, maar mensen die op zoek zijn naar naden in je patroon, worden bij deze laatste stap weggegooid.
Proficiat! kiezen Bewerken> Patroon definiëren, en begin dit te gebruiken in uw eigen projecten. Als laatste gedachte kun je hier natuurlijk nog veel meer mee doen door je eigen aanpassingen toe te voegen. In het onderstaande voorbeeld veranderen de kleuren in een bruine tint en is het "breien" van het patroon verkleind door de afbeeldingsgrootte te verkleinen. Bekijk ons laatste voorbeeld:
Alright! Dus nu zou je een voldoende basiscompetentie moeten hebben om je eigen aangepaste variaties van deze synthetische vezelpatronen te maken - speel rond met de niveaus, kleuren, documentformaten en meer om je eigen persoonlijke draai eraan te geven. Je kunt zelfs de schaduw omkeren om subtiele, lichtgekleurde patronen te maken.
In de volgende delen van deze serie laten we u zien hoe u een aantal geavanceerde op foto's gebaseerde textuurpatronen, meer vormgebaseerde patronen, transparante patronen en zelfs meer in de toekomst kunt maken.
Abonneer of kijk terug op de site om alle updates van deze serie te bekijken wanneer ze zich voordoen!
Accentsconagua