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 heb ik het genoegen om een serie screencasts te starten die ik al een tijdje wil doen: Hoe maak ik webpatronen die werken in zowel Photoshop als op het web. We gaan dit als een serie doen, te beginnen met de meest elementaire patronen en doorgaan met enkele van de meest geavanceerde achtergrondpatronen die we kunnen vinden, inclusief complexe texturen.
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.
Laten we duidelijk zijn: de ideeën achter het maken van achtergrondpatronen zijn allemaal vrij eenvoudig - de meeste patronen nemen slechts een paar stappen en kunnen resulteren in opmerkelijk effectieve texturen. In feite zijn de slechtste patronen voor het web meestal degenen die "te hard proberen" door te proberen te veel binnen in elke tegel te passen.
Waarom is dat slecht? Omdat achtergrondpatronen (in de meeste gevallen) subtiel en niet-schurend moeten zijn. Harde texturen leiden de aandacht van een gebruiker weg van de echte ster op een webontwerp: de inhoud.
Dus waarom zou je texturen gebruiken?? Omdat, op de juiste manier, achtergrondpatronen een site een gevoel van karakter en persoonlijkheid geven dat vlakke kleuren kan wegblazen. Patronen en texturen geven diepte en scheiding van de inhoud, helpen de hiërarchie te ontwikkelen en kunnen websites (die van nature plat zijn) een gevoel van tactiel voelen geven. Ze kunnen ervoor zorgen dat een site gepolijst, verfijnd en professioneel aanvoelt. Dit helpt om de inhoud te benadrukken en het gedenkwaardig te maken.
Terwijl de ideeën achter het maken van patronen eenvoudig zijn? om ze echt perfect te laten werken, kan vaak lastig zijn. Wees gerust, deze tutorialserie laat je alle trucs zien die je ooit nodig zult hebben om je eigen aangepaste variaties te maken voor gebruik in je eigen projecten. We zullen zelfs onderweg wat gratis geschenken uitdelen!
Vandaag is het nog maar de eerste dag in onze serie - dus we beginnen met een aantal eenvoudig-eenvoudige patronen om ons brein in beweging te krijgen. We beginnen met een eenvoudig raster, gaan over naar een gearceerd patroon, laten zien hoe een diagonaal patroon met schalen wordt gemaakt, en dan worden we een beetje funky door u te tonen hoe u een subtiele kleur en textuur toevoegt.
Klaar? Laten we dit doen!
Het videogedeelte van deze zelfstudie helpt bij het gladstrijken van alle stappen die u niet helemaal uitvoert in de geschreven versie (hieronder). En soms is het ook gewoon leuk om te zien hoe iemand anders werkt, dus geniet ervan!
Omdat sommige van deze patronen moeilijk te zien zijn op een screencast met een webresolutie, lever ik ook een stapsgewijze zelfstudie. Je kunt de video of de geschreven versie (of allebei!) Bekijken, het is vrijwel aan jou wat je het beste leert. Laten we erin duiken?
Het basispatroon van het raster is ongeveer net zo eenvoudig als het wordt, dus het is een fantastisch startpunt. Laten we beginnen met het openen van een document van 7px bij 7px.
Waarom deze maat? Omdat we een rasterpatroon gaan maken met een 1px-lijn in het midden? en we willen een gelijke hoeveelheid ruimte aan elke kant van het raster hebben. Dit is niet verplicht voor dit specifieke patroon (zolang het raster een perfect vierkant is, zal het nog steeds naadloos worden herhaald), maar het is een gewoonte die we willen hebben als we later doorgaan naar de meer geavanceerde patronen..
De stappen zijn eenvoudig:
Dit zijn de screenshots:
Als je je patroon precies hebt zoals je het wilt, willen we het opslaan als een patroon. Om dat te doen, selecteert u in het bovenste menu in Photoshop "Bewerken> Patroon definiëren". Dit slaat uw document automatisch op als een patroon dat kan worden gebruikt in de"Laagstijlen> Patroonoverlay" bibliotheek.
Nu we de basis hebben gedaan, kun je hier veel aan sleutelen. We gebruikten een 7px-document, maar als je een strakker raster wilde, kon je naar 5px of 3px gaan. Als u een breder open rooster wilt, kunt u een groter documentformaat gebruiken. De lijnbreedte, spatiëring en kleuren zijn aan u.
Tip: Kleur die er misschien subtiel uitziet (laag contrast) op het patroondocument ziet er misschien veel te intens uit als u ze gebruikt als een echt patroon in een ander groter document. De truc hier is om:
Voor dit tweede patroon gaan we in feite gewoon onze lijnen 45 graden draaien. Onthoud dat afstand echter cruciaal is - dus we zullen een beetje kritisch denken moeten gebruiken om het patroon te laten herhalen:
Open deze keer een nieuw document met 8px by 8px. Waarom 8px en niet 7px zoals we eerder deden? Omdat we willen dat onze lijnen exact elke hoek bereiken en als we gebruiken en als we 7px gebruiken, werken de lijnen niet helemaal.
Dit zijn de screenshots:
Besteed speciale aandacht aan die laatste screenshot, omdat deze laat zien hoe je het hele gevoel van het raster echt kunt veranderen door het uit te lijnen of uit te dunnen. Een strak arceringpatroon kan een geweldige textuur net zo goed maken als een groot sappig patroon. Speel met de tussenruimte en lijnbreedte totdat u tevreden bent met de resultaten.
Dit volgende patroon is vrij eenvoudig, omdat het in wezen alleen de patronen van het gearceerde patroon gebruikt (met slechts één regel in plaats van twee!). Eenvoudige diagonale lijnpatronen zijn een geweldige manier om subtiele textuur achter tekst toe te voegen (zoals koppen) omdat het een teken toevoegt zonder de tekst onleesbaar te maken.
Voor de diagonale lijn, ga je gang en begin met een dubbel gearceerd document - maar verwijder dit keer een van de lijnen voordat je je patroon opslaat (Bewerken> Patroon definiëren). De documentgrootte zal in dit geval cruciaal zijn, omdat deze direct correleert met hoe strak de lijnen zullen zijn.
De screenshots:
De tweede afbeelding laat zien hoe u, door de afstand van het document en het lijngewicht en de richting aan te passen, een heel groot bereik aan patronen kunt krijgen. Niet te lastig he?
Tip: Voor de puristen die er zijn, kun je een veel schonere, scherpere lijn krijgen door je lijn te doorlopen - pixel voor pixel - en alle "bevedering" te verwijderen die we in Photoshop's weergave zagen. Dit gebeurt voornamelijk omdat Photoshop een anti-alias-regel tekent, waarbij we idealiter een gepixeleerde regel willen. De pixels zijn echter zo klein dat het in de meeste gevallen niet uitmaakt hoe dan ook. Hier is slechts een screenshot van de superscherpe versie voor het geval je het wilt zien.
Oké, dus we hebben de basisbeginselen! Laten we nu nog wat meer persoonlijkheid toevoegen met behulp van twee andere snelle technieken: kleur en textuur toevoegen.
Het kleurengedeelte is waarschijnlijk vrij eenvoudig als je het nog niet hebt uitgedacht. Voeg gewoon kleur toe aan je achtergrond en lijnen totdat je het gewenste effect hebt. Mijn tips: Houd het contrast laag - er is niets onaangenaamers dan een overdreven levendig patroon.
Het textuurgedeelte is een klein beetje moeilijker. Textuur is altijd een notoir moeilijk ding geweest om te beheersen op het web. Waarom? Omdat in de meeste gevallen de textuur wordt herhaald? en de meeste mensen kunnen het op anderhalve kilometer afstand vinden. Zelfs texturen met een hoge resolutie herhalen en laten de tegelscheidingen zien, tenzij u afbeeldingen gebruikt die enorm zijn (zoals 1920 x 1080)? wat niet altijd een praktische oplossing is.
De truc met textuurpatronen?
In de volgende delen van deze zelfstudiereeks gaan we onderzoeken hoe we geavanceerde texturen kunnen maken? maar om vandaag de dag rond te maken, laten we eens kijken naar een heel eenvoudig patroon met een beetje grunge erop. De treden:
En de screenshots:
En last but not least, laten we nog een laatste blik werpen op de vier texturen die we zojuist hebben gemaakt:
Bonustip 01: Wanneer u uw patroon opslaat (Bewerken> Patroon definiëren), vergeet dan niet om de achtergrondlaag te verbergen als u een transparant patroon wilt maken. Soms wil je de achtergrondkleur daadwerkelijk opslaan, maar soms kan het ook handig zijn om een patroon over een andere kleur te leggen zonder terug te moeten gaan naar het originele bestand en wijzigingen aan te brengen. Vanzelfsprekend is het gebruik van wit of zwart als de patroonkleur de beste keuze om de bruikbaarheid van deze transparante patronen te vergroten.
Bonustip 02: We hebben deze manier besproken om van deze patronen patronen te maken die door Photoshop (of Fireworks) kunnen worden gebruikt, maar hoe kunnen we deze gebruiken op internet? Eenvoudig eigenlijk - gewoon dezelfde als. GIF, .PNG of .JPG-bestanden (ik raad PNG aan voor transparante patronen). Voeg ze vervolgens toe aan uw webmap en gebruik ze als achtergrondafbeeldingen via CSS! Vergeet niet de "herhaal" -waarde in te stellen als u wilt dat ze zichzelf over de hele pagina betegelen.
Alright! Dus ik hoop dat je iets uit deze eerste sessie hebt gekregen. Inmiddels zou je een goed begrip moeten hebben van de theoretische concepten achter hoe patronen werken - en een technisch begrip van hoe je ze kunt maken en gebruiken in Photoshop. 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 "lawaaierige" achtergrondpatronen kunt creëren die je doen zweren dat je ze zou kunnen aanraken. We zullen ook in de toekomst raken aan het creëren van geavanceerde textuurpatronen, op spa gebaseerde patronen, transparante patronen en meer.
Abonneer of kijk terug op de site om alle updates van deze serie te bekijken wanneer ze zich voordoen!
Accentsconagua