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 kunnen worden gebruikt op het web (en tijdens de ontwerpfase) met onze derde editie: Koolstofvezeltexturen. We zullen kijken naar hoe je slanke, professionele koolstofvezelpatronen kunt maken door te beginnen met een duidelijke vanillebenadering 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 het eerste bericht in de serie bekijkt als je het hebt gemist!
Vandaag is dag drie in onze serie - maar het is de moeite 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 "koolstofvezeltextuur" 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 basisstructuur van koolstofvezel is eigenlijk best makkelijk te maken. Er zijn heel veel tutorials voor dit basispatroon op het web, dus we zullen hier geen nieuwe grond breken. Wat belangrijk is in deze eerste stap, is dat je de basisprincipes oppikt die we in de meer gevorderde stadia zullen gebruiken. De belangrijkste trucs zijn:
Laten we beginnen met onze basisversie door een 4x4-document te maken:
Grijp vervolgens een selectie van 2x4 px van de achtergrond (getoond) en maak er een nieuwe laag van (Ctrl + J):
Laten we op de nieuwe 2x4px-laag een basisverloop toevoegen vanuit het deelvenster Laagstijlen (dubbelklik op de laag of klik er met de rechtermuisknop op en selecteer Laagstijlen). Het verloop dat we toevoegen, loopt van onder naar boven en gebruikt de kleuren Zwart (# 000000) aan de onderkant tot donkergrijs (# 4f4f4f) bovenop:
Deze gradiënt wordt de basis van onze koolstofvezel? U kunt dus altijd teruggaan naar deze stap om de uitkomst van het eindproduct te wijzigen.
Laten we vervolgens een selectie van 1x4 pixels van de verlooplaag maken met het gereedschap Rechthoekig selectiekader en een nieuwe laag maken door het af te snijden (klik met de rechtermuisknop> Laag via knippen).
Zet nu de dekking van deze tweede laag op 92%.
Waarom? We proberen zeer subtiele variaties in de grijstonen te creëren, zodat de koolstofvezel een geloofwaardige lichtbron lijkt te hebben. Het is duidelijk dat er geen echte lichtbron is en we kunnen er geen creëren zonder een massief beeld (dat het punt van een webpatroon verslaat), maar kleine veranderingen in de schakering zullen het oog misleiden door te denken dat er diepte is.
Voeg de twee 1x4 px-lagen samen (boven) samen en neem vervolgens met behulp van het merkmiddel marque een selectie van 2x2 van de bovenkant van de nieuwe laag:
Als u vervolgens ons patrooneffect wilt maken, wisselt u de volgorde van de twee 2x2 px-tegels van boven naar beneden en vice versa:
Ons patroon is nu voltooid! Eenvoudig opslaan in uw bibliotheek met patronen met behulp van de Bewerken> Patroon definiëren tool. Geef het een naam naar keuze, en deze verschijnt nu telkens wanneer u de Laagstijlen> Patroonoverlay bibliotheek.
Alright! Dus we hebben één zeer eenvoudige koolstofvezel compleet? laten we verdergaan naar de volgende stap, waar we enkele wijzigingen in dit idee zullen aanbrengen.
De basiskoolstofvezel kan vrij gemakkelijk worden gemanipuleerd. In dit volgende korte voorbeeld zullen we exact hetzelfde proces en dezelfde principes gebruiken om een iets grotere vezeltextuur te creëren.
Notitie: Ik ga met opzet enkele van de repetitieve screenshots overslaan die we in de laatste stap hebben besproken, dus ik zal alleen nieuwe technieken benadrukken.
Begin deze keer met een document van 8px bij 8px.
In het eerste koolstofvezelpatroon dat we hebben gemaakt, hebben we een snelkoppeling gemaakt door een enkel verloop te maken voor de hele linkerkant van het document. Dit werkte omdat het document slechts 4 x 4 was en echt niet meer detail kon verwerken dan we overgingen.
In deze tweede versie zullen we wat zorgvuldiger worden met onze vorm. Begin met uw document door een 4x4-rechthoek toe te voegen:
Voeg nog een 4x4 rechthoek toe voor de onderste ruimte (ik heb het ingekleurd zodat je het beter kunt zien):
Nu moeten we een subtiel verloop toevoegen aan het onderste vierkant. Weet je nog dat het gebied linksonder donker is? bijna zwart, gebruik dus een heel donker verloop:
Herhaal de verloopstap voor de bovenste laag 4x4, maar deze keer is het een licht verloop:
Dupliceer beide 4x4 lagen en voer de "fliperoo" trick uit waarbij we de positie van elk vierkant naar de tegenovergestelde hoeken van het document ruilen.
Nu hebben we ons basispatroon in koolstofvezel, maar laten we één niveau van aanpassing toevoegen door een niveauregellaag toe te voegen. Doe dit vanuit het menu Lagen bovenaan; U bent op zoek naar de knop "Laag> Nieuwe aanpassingslaag> Niveaus".
De niveauregellaag stelt ons in staat om te sleutelen aan de helderheid en het contrast van ons vezelpatroon. Als je klaar bent, definieer je het patroon (Bewerken> Patroon definiëren) en je bent klaar om te gaan. Dit is hoe je patroon eruit zal zien:
Notitie: Zorg er bij het gebruik van de tool Define Pattern voor dat u niet op de aanpassingslaag bent geselecteerd? om de een of andere reden laat Photoshop je niet "Patroon definiëren" gebruiken wanneer je op lagen zoals deze zit (deze worden grijs weergegeven totdat je een andere laag selecteert).
Nu hebben we een tweede koolstofvezelpatroon voltooid! U kunt ditzelfde basisproces steeds opnieuw gebruiken om uw eigen variaties te maken. Probeer verschillende documentformaten, voeg kleur toe, pas het contrast van uw verlopen aan en andere dingen die u kunt bedenken om unieke effecten te creëren.
Ok, dus je hebt de basis eraf? dat is geweldig! In deze volgende stap gaan we een diagonaal koolstofvezelpatroon maken met dezelfde basisprincipes die we in de eerste twee stappen hebben gebruikt - maar we gebruiken een radicale kleine draai aan de rasterlay-out van ons patroon om een uniek effect.
Begin met een 30px bij 30px document. Als u deze stap hebt voltooid, kunt u het proces herhalen met een ander documentformaat, maar dit moet een goed startpunt zijn.
We gaan als een vuistregel in cellen van "5px" werken? dus laten we ons patroon beginnen door een rechthoek te maken met 5 px lang en 15 px lang.
Voeg vervolgens een verloop toe over onze eerste vorm:
Voeg nu een 5px bij 5px vierkante vorm toe met de kleur van # 191919 direct naast onze rechthoekige vorm.
Tip: Gebruik het "Concentreerpunt" (onder het gereedschapsplaatvenster) om randen aan te passen of aan te scherpen. Je vormen moeten exact eindigen op gedefinieerde pixels, geen wazige "halve pixels" vertonen.
Wat we hier hebben is ons basispatroon dat we een paar keer zullen herhalen? dus laten we deze twee vormen omzetten in een enkel "slim object", zodat we altijd naar hen terug kunnen gaan om het verloop te bewerken.
Notitie: U kunt altijd teruggaan en uw slimme objecten bewerken door met de rechtermuisknop op de laag te klikken en "Inhoud bewerken" te selecteren. Hiermee wordt elke instantie van het slimme object bewerkt? die bewerkingen snel en gemakkelijk maakt als er 10 of meer duplicaten rondzweven.
Vervolgens moeten we het slimme object dupliceren en het naar beneden duwen met 5px en naar links met 5px.
Herhaal hetzelfde proces "Dupliceren en vervolgens verschuiven" totdat u uw document hebt afgedekt. Raadpleeg het screenshot als je verdwaalt, maar er moet altijd een 5px maateenheid zijn tussen alle belangrijke delen.
Laten we nu een achtergrondkleurenlaag toevoegen. Ik heb hiervoor een eenvoudige rechthoek gebruikt - zet de kleur op # 1e1e1e:
Eindelijk, om nog maar te zwijgen, voegen we nog een van die vertrouwde levelaanpassingslagen toe, zodat we tijdens de vlucht kunnen sleutelen aan de duisternis en het contrast.
Whallah! U kunt nu het hulpmiddel Patroon definiëren opnieuw gebruiken en het patroon gebruiken waar u maar wilt, zoals dit:
Voor deze laatste stap gaan we dezelfde basisprincipes opnieuw gebruiken? maar deze keer draaien we dingen 45 graden om een ander uniek diagonaal koolstofvezeleffect te creëren.
Dit laatste patroon is eigenlijk het gemakkelijkst te beheersen, dus dit zou een cakewalk moeten zijn als je het zover hebt gehaald!
Begin met een 8x8-document en voeg een achtergrondkleur toe. Ik gebruikte Black (# 000000), je kunt gebruiken wat je maar wilt? houd gewoon de exacte kleur in gedachten voor de volgende stap:
Voeg nu een rechthoek toe, gemeten op 4px breed en 8px lang:
Alles moet nu bekend zijn - een subtiel verloop toevoegen - de eindkleur moet overeenkomen met onze achtergrondkleur (mijn verloop hier is # 555555 tot # 000000). Let op de hoek - we stellen deze in op 135 (of -45, afhankelijk van hoe je het wilt), zodat deze mooi overeenkomt wanneer we de laag roteren:
Bingo! Hebben we ons uiteindelijke patroon? pas de documentgrootte en verloopkleuren aan om uw eigen variaties te krijgen:
? en hier is het:
Alright! Dus nu zou je een voldoende basiscompetentie moeten hebben om je eigen aangepaste variaties van deze koolstofvezelpatronen te maken - speel rond met de vormen, 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 textuurpatronen, meer 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