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 maken van achtergrondpatronen die op het web (en tijdens de ontwerpfase) kunnen worden gebruikt met onze tweede editie. We zullen kijken naar hoe je de altijd populaire "ruis" -patronen kunt creëren die zoveel websites de laatste tijd gebruiken. Zorg ervoor dat je het eerste bericht in de serie bekijkt als je het hebt gemist!
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.
Vandaag is dag twee in onze serie - maar het is het waard om 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 "ruisstructuur" 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:
Klaar? Laten we dit doen!
De eerste stap in de tutorial van vandaag is waarschijnlijk het meest cruciaal, omdat we de basiselementen instellen. Er zijn veel verschillende manieren om deze ruispatronen te maken? maar ik ga je een van de beste (en meest flexibele!) methoden laten zien om je frustratie en hoofdpijn te besparen.
Begin met het openen van een nieuw document. De grootte maakt niet veel uit (we gebruiken 200px bij 200px in de demo), maar het is het beste om het boven 75px te houden om ervoor te zorgen dat je ruispatroon geloofwaardig willekeurig is. Kleinere documenten kunnen beginnen te lijken op "herhalende tegels": documenten die aanzienlijk groter zijn, vergroten uw bestandsgrootte zonder veel toegevoegde waarde.
Laten we een eenvoudige rechthoekige vorm toevoegen en deze "Basiskleur" noemen (organisatie maakt het leven later gemakkelijker!). Je kunt elke gewenste kleur gebruiken (we gebruikten #EBEBEB), maar zorg ervoor dat de rechthoek de hele ruimte beslaat.
Laten we nu een nieuwe laag openen en hem de "Noise Layer" noemen. Het is gewoon een lege laag op dit moment?
Gebruik het gereedschap "Rechthoekige selectiekader" (M) om een selectie te tekenen voor het hele document terwijl dit op de ruislaag is geselecteerd. Selecteer vervolgens "Opvullen?" In het contextmenu (Klik met de rechtermuisknop wanneer u de selectie selecteert - of het is ook onder het paneel Bewerken) en laten we het vullen met de kleur Wit.
Tip: Vervolgens willen we de "Ruislaag" naar een slim object converteren. U kunt dit doen door met de rechtermuisknop op de laag te klikken en 'Converteren naar slim object' te selecteren of 'Converteren voor slimme filters' in het menu Filters te selecteren.
Waarom maak het een slim object? Omdat dit ons in staat stelt om later de mogelijkheid te behouden om de intensiteit van de ruisstructuur te bewerken! Er kunnen in de toekomst stappen zijn waarbij we de textuur moeten afvlakken, maar het is altijd het beste om de bewerkingen zo lang als mogelijk te bewerken.
Oké, met het slimme object in de hand willen we de ruisstructuur toevoegen.
Stel ten slotte de overvloeimodus op de ruislaag in op "vermenigvuldigen", zodat alleen de donkere ruispixels zichtbaar zijn. Nu kunt u de kleur op de basislaag wijzigen voor verschillende ruisige kleuren.
Whallah! We hebben nu de basiselementen voor ons basisruispatroon vastgesteld?
? en dat zou het einde zijn van deze eenvoudige tutorial als we lui waren?
In de volgende stappen laten we je echter zien hoe je je lawaaierige patroon kunt omkeren, veranderen en geloofwaardige diepte en levendigheid toevoegen om het echt te onderscheiden van het pack!
Voordat je verder gaat: Ga door en groepeer je lagen samen (de basislaag en de ruislaag) met Ctrl + G om een laagmap te maken. Dupliceer het eenmaal en verberg het origineel zodat we er altijd een kopie van hebben. Voor elke nieuwe stap gaan we een nieuwe duplicaatgroep maken. Dit is gewoon een goede gewoonte om te hebben, omdat het ervoor zorgt dat je altijd een back-up van ons basispatroon hebt.
Oké, laten we dit ruispatroon nu veranderen in iets duisters en verrukkingen. Ik ga je laten zien hoe je een omgekeerd ruispatroon kunt creëren dat er een subtiele sprankeling aan lijkt te geven.
Begin met een kopie van de oorspronkelijke ruisgroep (zie het einde van stap 01). Het eerste wat we willen doen is de achtergrondkleur zwart maken, dus ga je gang en doe dat op je basislaag.
Omdat ons ruispatroon bestaat uit alleen "donkere" pixels, moeten we het in wezen omdraaien. Helaas kunnen we dit niet als een "slim" effect doen, dus we moeten het ruispatroon afvlakken. Zorg ervoor dat je het intensiteitsniveau hebt ingesteld op wat je wilt, en vervolgens de laag "Raster". U kunt dit doen door rechts te klikken op de laag en Rasterize te selecteren in het contextmenu of uit de Laag> Rasteren> Laag rasteren menu.
Nu we ons ruispatroon grotendeels hebben afgeplat, willen we het omdraaien. Doe dit vanuit de "Afbeelding> Aanpassingen> Omkeren"paneel.
Wat is er mis? Je kunt het ruispatroon niet meer zien?
We moeten enkele kleine wijzigingen aanbrengen om ons omgekeerde ruispatroon te zien. Zet eerst de overvloeimodus op de ruislaag op "Scherm".
Pas vervolgens de "niveaus" van uw ruispatroon aan (Ctrl + Alt + L? Of Afbeelding> Aanpassingen> Niveaus).
Alternatieve methode: U kunt ook gewoon een aanpassingslaag voor de niveaus toevoegen (Laag> Nieuwe aanpassingslaag> Niveaus). U kunt dit op deze manier verkiezen als u later de intensiteit wilt wijzigen.
Presto! Nu hebben we een sprankelend, omgekeerd ruispatroon. Vanzelfsprekend kun je dit naar hartenlust aanpassen - maak het donkerder en ingetogener - of helderder en intenser. Je kunt zelfs de basislaagkleur wijzigen in een donkerblauwe of rode kleur om andere effecten te krijgen. Gek worden!
Onthouden - u bewaart deze als "Patronen" in Photoshop door "Bewerken> Patroon definiërenDoe dit en later kun je deze patronen steeds opnieuw gebruiken. Je kunt zelfs je patronen opslaan als bibliotheken en ze delen met vrienden en collega's..
Vervolgens laten we je zien hoe je diepte en levendigheid aan je ruispatronen kunt toevoegen?
Laten we nu wat kleur en levendigheid toevoegen aan ons ruispatroon. Het is de moeite waard om te vermelden dat we in de volgende stappen enkele algemene technieken zullen gebruiken? je hoeft ze niet naar de letter te volgen - houd ze allemaal in de gaten voor wanneer je je eigen patronen gaat maken.
Begin met het toevoegen van wat kleur aan uw basislaag.
Maak nu een kopie van je Noise Layer en stel beide overvloeimodi in op Color Burn. De dubbele laag helpt ons de onderste laag donkerder te maken. Het geeft ons ook de mogelijkheid om de dekking op een fijnere schaal later te verplaatsen.
Maak nog een kopie, maar deze keer gaan we het rasteriseren en omkeren (zie stap 2, Black Noise, voor details als je het hebt gemist).
Zet de mengmodus op onze nieuwe laag op Scherm. We willen ook een nieuwe aanpassingslaag toevoegen (Lagen> Nieuwe aanpassingslaag> Niveaus) zodat we de intensiteit van de lichtruis kunnen regelen.
Laten we nu een subtiele offset maken door de lichte laag weg te duwen van de donkere laag (1 px omhoog en 1 px links) met behulp van het gereedschap Verplaatsen (V) en je toetsenbord.
Voeg vervolgens een laagmasker toe over je Light Noise-laag zodat we ermee kunnen spelen.
Met een ruw gestructureerde borstel (ingesteld op ongeveer 130 pixels en de kleur Zwart) willen we in essentie een beetje van onze lichtruis maskeren door weg te schilderen van het Laagmasker. Eén penseelstreek zou de slag moeten slaan, maar gebruik je eigen oordeel. Het idee hier is om een ruw, willekeurig patroon te maken.
Zet de laagdekking van de laag op ongeveer 45%. Je kunt minder of meer doen volgens je eigen voorkeuren? we proberen gewoon de intensiteit van het contrast een klein beetje terug te laten vallen.
Nu hebben we een mooi patroon met een beetje diepte. Als je de diepte echter niet graaft, kun je hier gemakkelijk aan sleutelen door de lichtruislaag horizontaal te draaien om de offset te verwijderen en een eenvoudig "sprankelend" effect te creëren.
Alacadabra! Niet slecht he? Dit is wat de uiteindelijke textuur zou zijn:
Bonus Tip: Als je subtiele "naden" opmerkt wanneer je je nieuwe patroon gaat gebruiken, probeer je originele patroon met 5 of 10 px helemaal langs de randen bij te snijden. Je zult vaak naden krijgen als Photoshop besluit om donkere ruispixels rond de randen van je ruislaag samen te klonteren. Als je de randen wegsnijdt, krijg je een schoon, naadloos patroon..
De volgende twee stappen gaan snel. Inmiddels hebben we de belangrijkste principes vastgelegd die we nodig hebben om zowat elk ruispatroon te maken dat je je maar kunt voorstellen - dus laten we je gewoon zien hoe deze textuur eruit kan zien als je begint te spelen met de kleur en intensiteit van de contrast. Laten we naar de groene versie kijken?
Begin met een kopie van de Blue Noise-laaggroep. Ga je gang en verander je Base Layer-kleur in groen.
Je merkt iets grappigs wanneer kleuren worden verschoven? het contrast dat uit de ruis komt, heeft de neiging over te schakelen van subtiel naar dramatisch met verschillende kleuren. Dit betekent in feite dat we de dekking van de ruislagen willen aanpassen aan de verschuivingsintensiteit. Er is hiervoor geen hard-set regel - speel gewoon rond met de dekking-instellingen totdat je de look hebt waar je voor gaat.
Eindelijk, hier is het voltooide ruispatroon:
Ik zal het nog een keer noemen om veilig te zijn - als je naden op je patroon opmerkt wanneer je het in een grotere vorm of op je website gaat gebruiken, wat je dan moet doen is ongeveer 10px rondom je vorm bijsnijden om de "rand" -pixels te verwijderen die donkerder kunnen zijn wanneer Photoshop ze toevoegt tijdens de allereerste stap "Filter> Ruis toevoegen".
Oké, dus ik heb nog een laatste trucje voor deze tutorial. Tot nu toe hebben we alleen de basislaag aangepast toen we een nieuwe kleur wilden. Dit gaat allemaal goed en goed wanneer we een basisruispatroon willen? maar wat als we iets willen met een beetje extra leven eraan?
Nou, deze laatste stap als voor jullie die precies dat willen - een tweevoudige, getinte ruislaag die er een beetje een 'vonkje' aan geeft.
Ga je gang en start het op door onze achtergrondkleur te veranderen. Pas de dekking van je ruisniveau naar wens aan (ik heb er helemaal niets aan gedaan voor deze specifieke demo).
Hier gooien we de curve-bal naar binnen - voeg een nieuwe aanpassingslaag toe (Lagen> Nieuwe aanpassingslaag> Tint / verzadiging) en maak er een knipmasker over de laag "lichte ruis". Ga nu gewoon sleutelen aan de instellingen totdat je een mooie gouden kleur krijgt van de lichtruislaag.
Het uiteindelijke effect is hier:
Het is subtiel, maar de lichte "gloed" die uit die bovenste ruislaag komt, voegt een fantastisch leven toe aan alle projecten waarin je het gebruikt. Geniet ervan en maak je eigen variaties!
Alright! Dus ik hoop dat je iets hebt gekregen van deze tweede sessie. Inmiddels zou je een goed begrip moeten hebben van ruispatronen en hoe je ze kunt gebruiken in je eigen projecten. U kunt alle bestanden die we hier hebben aangemaakt, opslaan als. GIF-, .PNG- of .JPG-bestanden en deze ook meteen op internet gebruiken? maar we zijn eigenlijk pas net begonnen.
In het volgende niveau van deze serie laten we je zien hoe je geavanceerde textiele patronen, vormgebaseerde patronen, transparante patronen en zelfs meer in de toekomst kunt creëren.
Abonneer of kijk terug op de site om alle updates van deze serie te bekijken wanneer ze zich voordoen!
Accentsconagua