Share
Betegelde achtergronden zijn geweldig voor zowel website-achtergronden als voor allerlei soorten Photoshop-werk. Ze zijn vooral handig bij het werken met texturen waarbij u een grotere algemene achtergrond nodig heeft dan de kleine afbeelding waarmee u moet werken. In deze korte tutorial neem ik je mee door een texture te nemen en er een achtergrondafbeelding van te maken die klaar is voor naadloze herhaling. Het is een nuttige kleine techniek die voor altijd bestaat. We hebben deze techniek nodig voor de andere tutorial van vandaag - hoe een eenvoudige lay-out kan worden gemengd 'n' gepaard met patronen, foto's en achtergronden.
Dit bericht is dag 9 van onze webdesignsessie. Sessie Dag 8 van Creative Sessions
In deze tutorial willen we een betegelde achtergrond van een grastextuur maken. Er is een fantastische foto van gras op Flickr met 100kr
die we kunnen gebruiken. Als we de afbeelding echter gewoon in de huidige staat weergeven, is het resultaat niet erg goed. Zoals je hierboven kunt zien, is het heel duidelijk waar de afbeelding wordt herhaald en de donkere vlekken er behoorlijk raar uitzien. Dus om van die foto een betegelde achtergrond te maken, moeten we eerst eventuele onregelmatigheden verwijderen en vervolgens de randen in elkaar laten overvloeien.
Dus de eerste stap is om de hoofdafbeelding te pakken en vervolgens door te snijden naar een sectie die niet de echt donkere hoekpatches heeft. Iets als de doos hierboven weergegeven.
Dit is ons segment. Ik heb het eigenlijk een beetje ingekrompen, zodat de textuur niet zo zwaar is. Hoewel het meestal gelijkmatig gekleurd is, kunnen we de randen lichter maken. Hoe meer we het beeld des te beter kunnen krijgen, aangezien kleine verschillen behoorlijk in het oog springen als de achtergrond wordt betegeld.
Dus pak gewoon de Dodge Tool (O) en met een grote zachte borstel zachtjes over de linker- en rechterrand strijken om ze een schaduw te geven. Ga echter niet overboord als het gras er vervaagd uitziet.
Zoals je hierboven kunt zien, ziet het gras er veel gelijkmatiger gekleurd uit. Maar er is een klein blad in de linkerbovenhoek, dat zal een dode weggevertje zijn als hetzelfde blad steeds opnieuw verschijnt, dus we moeten het kwijtraken. Om dit te doen, pak de Patch Tool (J) en teken een vorm rond het blad en sleep met je muis om een gebied in de buurt te krijgen om het te patchen. (Merk op dat het hulpmiddel voor de patch moet worden ingesteld op Bron en niet op Bestemming, anders gebruikt u het iets anders)
Dus onze achtergrond ziet er nu vrij aardig en uniform uit. We hoeven alleen maar de randen in elkaar te laten bloeden. Dus dupliceer de graslaag. Verplaats vervolgens de eerste laag naar links en de tweede laag naar rechts. Blijf dit doen totdat je beide lagen kunt zien met een witte opening ertussen. Breng ze nu samen, zodat de meest rechtse rand van de eerste laag de meest linkse rand van de tweede laag raakt.
Hier zie je de twee lagen elkaar bijna raken. Breng ze bij elkaar zodat er geen wit tussen zit en voeg de twee lagen samen.
Nu gebruiken we opnieuw de patch-tool om een ruwe vorm te tekenen rond de rand waar de twee lagen elkaar raken en gebruik dan je muis om een nabijgelegen gebied te slepen om het op te lappen.
De patch-tool maakt dit soort bewerkingen werkelijk makkelijk, vooral met een achtergrond die zo lawaaierig is als dit gras. Zoals je kunt zien, tenzij je heel goed kijkt, is het niet duidelijk waar de overvloeilijn is. Als je wilde kon je in detail gaan en individuele grassprieten klonen - maar dit is prima voor onze doeleinden.
Nu herhalen we hetzelfde proces verticaal. Dus dupliceer de laag en beweeg één laag naar beneden en één omhoog totdat de bodem en bovenrand samenkomen. Voeg de laag samen en gebruik de patch tool om van de rand af te komen.
En nu zijn we klaar voor betegeling!
De reden dat dit werkt, is dat we die randen effectief hebben verwijderd, de nieuwe randen van het document komen al overeen, omdat we de lagen gelijk links en rechts hebben verplaatst, zodat de rechterrand van dit document daadwerkelijk is is de volgende pixel langs de linkerrand.
Dus druk op CTRL-A om alles te selecteren en naar te gaan Bewerken> Patroon definiëren.
Nu geven we het patroon een naam
Nu op elke laag als je overvloeiopties selecteert en het vakje Patroonoverlay aanvinkt, kun je kiezen uit je set aangepaste patronen zoals getoond, inclusief het gras dat we net hebben gemaakt. In de bovenstaande afbeelding kunt u zien hoe ik het patroon toepast op de achtergrond van een website.
Natuurlijk moet u de patroonafbeelding ook opslaan als een PSD of JPG zelf, omdat u deze mogelijk nodig hebt als een standalone afbeelding. Als u het bijvoorbeeld zou gebruiken als achtergrondafbeelding in een HTML-document, heeft u de enkele JPG-afbeelding nodig, geen Photoshop-patroon..
Dit is ons betegelde gras. Zoals je kunt zien is er een beetje een donkere patch die het weggeeft, maar omdat ik dit als achtergrond voor een website ga gebruiken, is het geen probleem, omdat er dingen over de top zullen zijn. Niettemin zou je gemakkelijk terug kunnen gaan en die plek kunnen repareren om het meer naadloos te maken.
Dank aan de commentatoren die erop wezen dat er eigenlijk een eenvoudiger manier is om de achtergrond te compenseren met een filter! Ga naar Filter> Overig> Offset en selecteer een pixelhoeveelheid om de afbeelding zowel horizontaal als verticaal te verplaatsen. Bedankt voor de tip jongens! Ik leer elke dag iets nieuws :-)
Dit bericht is dag 9 van onze webdesignsessie. Sessie Dag 8 van Creative Sessions
Accentsconagua