Testowanie, czy BG poprawnie powtórzy kafelki w Photoshopie?

9

Często pracuję nad tworzeniem tekstur tła w Photoshopie do wykorzystania w Internecie. Niestety zwykle muszę zgadywać lub po prostu korzystać z gratisów z innych stron internetowych.

Chciałbym zbudować własne tekstury w Photoshopie i sprawdzić, czy odpowiednio układają płytki przed wyeksportowaniem obrazu. Czy istnieje sposób, aby to zrobić szybko? Pamiętam metodę wykorzystującą offset, ale nie znam narzędzi.

Poniżej znajduje się kilka przykładowych kafelków tła, dzięki czemu możesz zobaczyć, o czym mówię:

płytka 1

kafelek2

— Wyspy Przeznaczenia
źródło

17

stwórz swój wizerunek. Załóżmy na przykład, że jest to kwadrat o wielkości 200 pikseli
przejdź do FILTRY> INNE> PRZESUNIĘCIE i wpisz liczby xiy, które są o połowę mniejsze niż obraz (w tym przypadku 100px)
spowoduje to przesunięcie obrazu o tyle pikseli i przeniesienie pikseli, które zostały przeniesione z obszaru roboczego na drugą stronę. Zobaczysz teraz szew spływający po środku obrazu, w którym wzór nie do końca się powtórzy.
popraw ten szew, aby uzyskać płynne połączenie za pomocą dowolnych narzędzi (narzędzie klonowania jest częstą opcją).
zapisz nowy obraz.

W przypadku bardziej skomplikowanych obrazów konieczne może być wykonanie końcowego przesunięcia, powiedzmy 1/4 wymiaru w pikselach, w celu poprawienia krawędzi, które mogły zostać pominięte za pierwszym razem, gdy spadły blisko krawędzi płótna.

— DA01
źródło

Dziękuję, to jest idealne! Dokładnie to, czego szukałem

— Destiny Islands,

5

DA01 odpowiada, jak to zrobić, ale Twoim pytaniem jest, jak to przetestować. Odpowiedź na to pytanie brzmi:

Wybierz warstwę wzoru
Edycja> Zdefiniuj wzór
Utwórz nową warstwę
Zaznacz wszystko
Edycja> Wypełnienie> Wzór> Wybierz wzór
Kliknij dobrze i sprawdź, czy dobrze wygląda

— Ryan
źródło

2

ugh. Całkowicie źle odczytałem pytanie! Dobra wskazówka. Inną opcją jest po prostu utworzenie testowego pliku HTML z powtarzalnym tłem. Następnie po prostu ponownie zapisuj plik i ponownie ładuj przeglądarkę.

— DA01

1

Tak, wiedziałem, jak to zrobić w HTML / CSS, ale nie wiedziałem, że Photoshop również może przetestować. Dzięki za radę!

— Destiny Islands

2

Tradycyjnie zapisuję obraz jako jpg lub png, a następnie używam podstawowego kodu HTML do przetestowania kafelkowania.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

Otwórz to w przeglądarce, a zobaczysz kafelki i po prostu ponownie zapisz „image.jpg” i odśwież stronę internetową, aby sprawdzić poprawki.

— Scott
źródło

1

Istnieje również inny sposób, aby to zrobić, ale limit polega na tym, że wszystkie inne wzory muszą być tego samego rozmiaru, co zobaczysz, dlaczego.

Kroki:

Zrób pole o wymiarach 200 na 200 pikseli.
Przekształć go w inteligentny obiekt.
Powiel i wyrównaj, aby były 3 pola w poziomie. Upewnij się, że nie zachodzą na siebie ani spacje pomiędzy nimi.
Zduplikuj trzy zaznaczone pola w 3 pionowych kolumnach.
Jeśli nie jest jeszcze włączony, włącz ruchome okna w Preferencjach.
Kliknij dwukrotnie i otwórz inteligentny obiekt.
Wyrównaj oba okna tak, aby można było zobaczyć oba pliki.
Wypełnij inteligentny obiekt dowolnym wzorem i zobacz go jednocześnie w akcji w innym oknie.

— Muhammad Umer
źródło

1

Istnieje świetne (bezpłatne oprogramowanie do użytku osobistego) narzędzie o nazwie AMP Tile Viewer, które pozwala bardzo szybko sprawdzić, czy obraz można kafelkować i jak będzie wyglądał kafelkowo. Używam go cały czas i działa po prostu świetnie. Nie musisz tworzyć wzorów w Photoshopie, których nigdy nie będziesz używać ani nie będziesz musiał później usuwać.

— TaranQ
źródło

1

Napisałem rozszerzenie Chrome o nazwie Widok kafelków, które pozwala kliknąć obraz prawym przyciskiem myszy i zobaczyć, jak się kafelki.

— tknomad
źródło

Jest też to internetowe narzędzie, które niedawno odkryłem

— Thomas Guyot-Sionnest

0

Sposób, w jaki to robię, to po prostu zapisać kafelek jako plik jpg i ustawić go jako kafelek na moim pulpicie. Całkiem szybko i łatwo.

— jill
źródło