Twórz wzory kafelków dla strony internetowej Obraz tła: 8 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:34

Oto prosta i prosta (chyba) metoda tworzenia obrazów, które można kafelkować, nie wyglądając na zbyt „siatkowe”. Ten samouczek korzysta z Inkscape (www.inkscape.org), edytora grafiki wektorowej o otwartym kodzie źródłowym. Wyobrażam sobie, że tę metodę można zastosować również do drogich programów do grafiki wektorowej, takich jak Adobe Illustrator. Hej, to twoje pieniądze.

Krok 1: Skonfiguruj dokument

Po otwarciu Inkscape będziesz chciał ustawić właściwości dokumentu. ([Plik -> Właściwości dokumentu])Najpierw zmień szerokość i wysokość dokumentu na liczbę łatwiejszą do pracy. W tym samouczku stworzyłem kwadratowy obraz, ale każda proporcja wystarczy. Następnie będziesz chciał ustawić siatkę. W starszych wersjach Inkscape możliwa była tylko jedna siatka. W nowszych wersjach musisz utworzyć nową siatkę. Zmień odstępy siatki tak, aby te wartości dzieliły się równomiernie na wartości szerokości i wysokości dokumentu. Ogólnie rzecz biorąc, dobrym pomysłem jest praca z dużym obrazem, a następnie zmniejszenie w razie potrzeby. Ponieważ jest to grafika wektorowa, rozmiar technicznie nie ma znaczenia, ale praktycznie rzecz biorąc, z większymi liczbami będzie łatwiej koncepcyjnie. W tym samouczku użyłem obrazu o wymiarach 500 x 500 pikseli, a moja siatka jest w odstępach co 10 pikseli. Na koniec upewnij się, że zaznaczona jest opcja „Włącz przyciąganie”.

Krok 2: Narzędzie Prostokąt

Użyj narzędzia Prostokąt, aby narysować kwadrat/prostokąt, który zajmie cały rozmiar dokumentu. Duża wartość odstępów siatki (patrz poprzedni krok) sprawi, że narzędzie prostokąta będzie łatwo przyciągać do krawędzi dokumentu.

Krok 3: Klonowanie wzorca

Grupuj])", "top":0.38721804511278196, "left":0.354, "height":0.35902255639097747, "width":0.372}]">

Dodaj obraz, który chcesz mieć we wzorze. Jeśli twój obraz jest plikiem SVG, zwykle możesz po prostu przeciągnąć go i upuścić na otwarty dokument. Utwórz klon tego obrazu. ([Edycja -> Klon -> Utwórz klon] lub możesz nacisnąć Alt+D)Przenieś oryginalny obraz tak, aby nie przeszkadzał w twoim obszarze roboczym. Przenieś sklonowany obraz do kwadratu i utwórz kilka kopii klona. Powód używania klonów zamiast kopii oryginału stanie się później oczywisty. Oto prosty sposób tworzenia kopii w przestrzeni atramentu: przeciągnij obiekt do skopiowania i naciśnij spację, aby upuścić kopię w tym miejscu (przytrzymaj wciśnięty przycisk myszy). Ogólnie rzecz biorąc, prawdopodobnie nie potrzebujesz więcej niż 2 lub 3 kopii do stworzenia wzoru. Jak widać, miałem 3 kopie obrazu, ale później jeden usunąłem. Gdy uznasz, że masz dość, zgrupuj te elementy razem.

Krok 4: Więcej klonowania

Włącz ponownie przyciąganie, jeśli wyłączyłeś je w poprzednim kroku, tak jak ja. Na zrzucie ekranu nie widać siatki, ale jest ona włączona. Wybierz grupę obiektów, które właśnie utworzyłeś i utwórz klon tej grupy. Wyrównaj krawędzie klonu z krawędzią strony i upuszczaj kopie klon, aż pojawi się przynajmniej siatka klonów 3x3 wokół oryginału pośrodku.

Krok 5: Eksperci od przeprowadzek

Teraz, gdy masz już rozprzestrzenione klony, nadszedł czas, aby wygładzić swój wzór. W tej chwili wzór wygląda raczej blokowo i zbyt regularnie, więc chcemy trochę rozłożyć rzeczy. Aby przenieść obiekty znajdujące się w grupie, najprostszą metodą byłoby najpierw rozgrupować obiekty, przesunąć dany obiekt, a następnie ponownie zgrupuj obiekty. Spowoduje to jednak zerwanie łączy do klonów. Zamiast tego chcemy zachować grupę nienaruszoną podczas manipulowania pojedynczymi obiektami w grupie. Aby to zrobić, przytrzymaj przycisk Control i kliknij obiekt, który chcesz zmodyfikować. Kliknięcie z wciśniętym klawiszem Control zaznacza pojedyncze obiekty w grupie. Jeśli teraz przesuniesz obiekty, otaczające klony również odzwierciedlą zmianę. Korzystając z tej metody, możesz teraz przesuwać obrazy, aż będziesz zadowolony z ogólnego wzoru. Możesz także zmieniać rozmiar, obracać lub usuwać obrazy. Skończyło się na usunięciu jednego z obrazów, ponieważ potrzebowałem tylko 2, aby wypełnić wzór.

Krok 6: Informacje o używaniu sklonowanych obrazów

Wspomniałem w kroku 3, że podczas tworzenia środkowego kwadratu („oryginału”) należy używać klonów zamiast kopii obrazów. Powodem jest to, że jeśli obraz sam w sobie jest grupą obiektów, metoda zaznaczania zgrupowanych elementów z naciśniętym klawiszem Control wybierze poszczególne obiekty obrazu. Samych klonów nie można edytować (z wyjątkiem rozmiaru i koloru), dlatego metoda Ctrl-klik spowoduje zaznaczenie całego klonowanego obiektu, niezależnie od tego, z ilu obiektów składa się oryginalny obraz.

Krok 7: Wykończenie szlifów

Jako opcjonalny krok wybierz kwadrat tła (Ctrl-klik) i ustaw kolor wypełnienia na brak (tj. przezroczysty) lub inny kolor, który chcesz mieć jako tło. ([Object -> Fill and stroke]) Zmniejszyłem również krycie całej grupy (wybierz zwykłym kliknięciem), aby wzór mógł być w tle i nie był nachalny. Na koniec ważny etap eksportu. Otwórz okno eksportu ([Plik -> Eksportuj bitmapę]). Kliknij przycisk „Strona”. Spowoduje to wyeksportowanie tylko tych części dokumentu, które mieszczą się w granicach strony – to znaczy wewnątrz kwadratu „oryginału”. Zmień rozmiar eksportowanej mapy bitowej, jeśli chcesz, a następnie kliknij „Eksportuj”.

Krok 8: Produkt końcowy

Gotowe! Umieść go na pulpicie, użyj go na swojej stronie internetowej lub wydrukuj i sprzedaj jako tapetę!