Inhoudsopgave:

Maak bewerkbare patronen voor de achtergrondafbeelding van een website - Ajarnpa
Maak bewerkbare patronen voor de achtergrondafbeelding van een website - Ajarnpa

Video: Maak bewerkbare patronen voor de achtergrondafbeelding van een website - Ajarnpa

Video: Maak bewerkbare patronen voor de achtergrondafbeelding van een website - Ajarnpa
Video: Creating Template Files - Part 48 - Vectric For Absolute Beginners 2024, November
Anonim
Creëer betegelbare patronen voor website-achtergrondafbeelding
Creëer betegelbare patronen voor website-achtergrondafbeelding

Hier is een ongecompliceerde en eenvoudige (denk ik) methode om afbeeldingen te maken die kunnen worden betegeld zonder er te "rasterachtig" uit te zien. Deze tutorial maakt gebruik van Inkscape (www.inkscape.org), een open-source editor voor vectorafbeeldingen. Ik stel me voor dat deze methode ook kan worden toegepast op dure vector grafische programma's zoals Adobe Illustrator. Hé, het is jouw geld.

Stap 1: Stel het document in

Het document instellen
Het document instellen
Het document instellen
Het document instellen
Het document instellen
Het document instellen

Nadat u Inkscape hebt geopend, wilt u de documenteigenschappen instellen. ([Bestand -> Documenteigenschappen]) Wijzig eerst de breedte en hoogte van het document in een getal waarmee u gemakkelijker kunt werken. Voor deze zelfstudie heb ik een vierkante afbeelding gemaakt, maar elke verhouding is voldoende. Vervolgens wil je het raster instellen. In oudere versies van Inkscape was er maar één raster mogelijk. In nieuwere versies moet u een nieuw raster maken. Wijzig de rasterafstand zodat deze waarden gelijkmatig worden verdeeld in de waarden van de documentbreedte en -hoogte. Over het algemeen is het een goed idee om vanuit een grote afbeelding te werken en vervolgens indien nodig te verkleinen. Omdat dit vectorkunst is, maakt de grootte technisch niet uit, maar praktisch gezien zal het conceptueel gemakkelijker zijn met grotere aantallen. In deze tutorial heb ik een afbeelding van 500x500px gebruikt en mijn raster is met intervallen van 10px. Zorg er ten slotte voor dat de optie "Snapping inschakelen" is aangevinkt.

Stap 2: Rechthoekgereedschap

Rechthoekgereedschap
Rechthoekgereedschap

Gebruik het rechthoekgereedschap om een vierkant/rechthoek te tekenen die de volledige documentgrootte inneemt. Een grote rasterafstandswaarde (zie vorige stap) zorgt ervoor dat het rechthoekgereedschap gemakkelijk aan de documentranden vastklikt.

Stap 3: Het patroon klonen

Het patroon klonen
Het patroon klonen
Het patroon klonen
Het patroon klonen

Groep])", "boven":0.38721804511278196, "links":0.354, "hoogte":0.35902255639097747, "breedte":0.372}]">

Het patroon klonen
Het patroon klonen

Voeg de afbeelding toe die u in uw patroon wilt hebben. Als uw afbeelding een SVG-bestand is, kunt u deze meestal gewoon naar uw geopende document slepen en neerzetten. Maak een kloon van deze afbeelding. ([Bewerken -> Kloon -> Kloon maken] of u kunt op Alt+D drukken)Verplaats de originele afbeelding uit de weg zodat deze uw werkruimte niet verstoort. Verplaats de gekloonde afbeelding naar het vierkant en maak een paar kopieën van de kloon. De reden voor het gebruik van klonen in plaats van kopieën van de originele versie zal later duidelijk worden. Hier is een gemakkelijke manier om kopieën te maken in Inkspace: sleep het te kopiëren object en druk op de spatiebalk om een kopie op die plek neer te zetten (houd de muisknop ingedrukt). Over het algemeen heeft u waarschijnlijk niet meer dan 2 of 3 exemplaren nodig om het patroon te maken. Zoals je kunt zien, had ik 3 exemplaren van de afbeelding, maar uiteindelijk heb ik er een verwijderd. Als je denkt dat je genoeg hebt, groepeer je deze items bij elkaar.

Stap 4: Meer klonen

Meer klonen
Meer klonen
Meer klonen
Meer klonen

Schakel snappen opnieuw in als je het in de vorige stap hebt uitgeschakeld, zoals ik deed. In de schermafbeelding ziet u het raster niet, maar het is ingeschakeld. Selecteer de groep objecten die u zojuist hebt gemaakt en maak een kloon van die groep. Lijn de randen van de kloon uit met de paginarand en blijf kopieën van de kloon totdat je ten minste een raster van 3x3 klonen rond het origineel in het midden hebt.

Stap 5: deskundige verhuizers

Deskundige verhuizers
Deskundige verhuizers
Deskundige verhuizers
Deskundige verhuizers

Nu je je klonen hebt verspreid, is het tijd om je patroon glad te strijken. Op dit moment ziet het patroon er nogal blokkerig en te regelmatig uit, dus we willen de dingen een beetje spreiden. Om objecten die zich binnen een groep bevinden te verplaatsen, zou de meest eenvoudige methode zijn om eerst de objecten te degroeperen, het object in kwestie te verplaatsen, en hergroepeer de objecten. Dit verbreekt echter de koppelingen naar de klonen. In plaats daarvan willen we de groep intact houden terwijl we afzonderlijke objecten binnen de groep manipuleren. Houd hiervoor de Control-knop ingedrukt en klik op het object dat u wilt wijzigen. Control-klik selecteert afzonderlijke objecten binnen een groep. Als u nu de objecten verplaatst, zullen de omringende klonen ook de verandering weerspiegelen. Met deze methode kunt u de afbeeldingen nu verplaatsen totdat u tevreden bent met uw algehele patroon. U kunt de afbeeldingen ook verkleinen, roteren of verwijderen. Ik heb uiteindelijk een van de afbeeldingen verwijderd omdat ik er maar 2 nodig had om het patroon te vervullen.

Stap 6: Over het gebruik van gekloonde afbeeldingen

Ik heb in stap 3 vermeld dat je klonen moet gebruiken in plaats van kopieën van afbeeldingen bij het maken van het middelste vierkant ("het origineel"). De reden is dat als uw afbeelding zelf een groep objecten is, de controle-klikmethode voor het selecteren van gegroepeerde items de individuele objecten van de afbeelding zal selecteren. Klonen zelf kunnen niet worden bewerkt (behalve voor grootte en kleur) en dus zorgt de control-klikmethode ervoor dat het hele kloonobject wordt geselecteerd, ongeacht uit hoeveel objecten de originele afbeelding is samengesteld.

Stap 7: finishing touch

Afwerking
Afwerking
Afwerking
Afwerking

Als optionele stap selecteert u het achtergrondvierkant (Ctrl-klik) en stelt u de vulkleur in op geen (dwz transparant) of welke kleur u de achtergrond wilt hebben. ([Object -> Vullen en streek]) Ik heb ook de dekking van de groep als geheel verlaagd (selecteer door regelmatig te klikken) zodat het patroon op de achtergrond kan staan en niet opdringerig is. Eindelijk, de belangrijke stap van het exporteren. Open het exportvenster ([Bestand -> Bitmap exporteren]). Klik op de knop "Pagina". Hiermee worden alleen de delen van het document geëxporteerd die binnen de paginagrenzen vallen -- dat wil zeggen, binnen het vierkant van het "origineel". Wijzig desgewenst de geëxporteerde bitmapgrootte en klik vervolgens op "Exporteren".

Stap 8: Eindproduct

Eindproduct!
Eindproduct!
Eindproduct!
Eindproduct!

Je bent klaar! Zet het op je bureaublad, gebruik het voor je website, of print het uit en verkoop het als behang! Geniet ervan.

Aanbevolen: