Jak stworzyć efekt „zygzakowaty, postrzępiony” w Photoshopie?

13

Chciałbym stworzyć efekt zygzakowatej linii u dołu (lub u góry lub na dowolnej krawędzi) prostokąta. Chcę również użyć tego obrazu na stronie internetowej, dlatego myślę, że powinienem to zrobić, aby móc go powtórzyć za pomocą CSS.

wprowadź opis zdjęcia tutaj

Nie wiem, czy użyłem poprawnego terminu, czy nie, więc popraw mnie. Czy ten efekt nazywa się zygzakiem? Jak mogę go utworzyć w Photoshopie (nie w programie Illustrator)?

Saeed Neamati
źródło
1
Lepiej zrobić to w programie Illustrator za pomocą efektu „Zig Zag” i wkleić jako inteligentny obiekt.
Salman von Abbas

Odpowiedzi:

17

Najprawdopodobniej zrobiłbym to w ten sposób:

1. Wykonanie kwadratu.

Weź Rectangle tool Narzędzie Prostokątz Shape layerswłączoną.

Opcje narzędzia prostokąta

Zrób kwadrat, przytrzymując Shiftprzycisk, aby upewnić się, że jest to idealny kwadrat.

(W tym przypadku rozmiar nie ma znaczenia (hah ..). Zrobię trochę większy niż rozmiar piłokształtny, którego chcę, ale możesz od razu uzyskać dokładny rozmiar. Pomaga w przycinaniu, jeśli możesz przyciągnąć do krawędzi kwadrat. Na etapie 4. Przytnij, Przytnij naprawdę dobrze. )

img 1

2. Obracanie kwadratu o 45 stopni

USA Free transform ctrl+t

Obróć kwadrat o 45 stopni, przytrzymując Shiftprzycisk, aby umożliwić przyciąganie pod kątem 45 stopni.

img 2

3. Wykonaj prostokąt i ustaw kwadrat.

Nadal Rectangle toolutwórz duży prostokąt u góry.

Następnie możesz ustawić kwadrat Move toolNarzędzie do przesuwania, przesuwając go w górę lub w dół i zdecydować, jaki będzie rozmiar, pokazując mniej lub więcej.

img 3

4. Przytnij, Przytnij to naprawdę dobrze.

Weź Crop tool Narzędzie kadrowaniai wybierz obszar kadrowania.

Możesz powiększyć wybrany piłokształtny oraz dodatkowe wypełnienie Crop tool Narzędzie kadrowaniai przyciąć.

Teraz, technicznie rzecz biorąc, możesz po prostu zrobić naprawdę duży kwadrat i przyciąć to, ale dodatkowy prostokąt miał ułatwić sprawdzenie, jak będzie wyglądał jego rozmiar.

img 4

5. Wynik końcowy.

img 5

I tak to się powtórzy.

img 6

6. Dodatkowe uwagi.

Jeśli chcesz umieścić Layer stylesjak Bevel & embosslub Inner shadowczy coś takiego, można scalić tam dwa kształty w jednej warstwie przed tym zakresie.

Możesz to zrobić, wybierając obie warstwy, przytrzymując, ctrla następnie używając klawiszy skrótu, ctrl+eaby scalić je w jedną warstwę rastrową.

Joonas
źródło
Chciałbym móc cię zagłosować 10 razy. Dzięki @Lollero.
Saeed Neamati,
1

Użyj narzędzia pióra w Photoshopie i utwórz kształt podobny do pionowego palika. Zapisz plik jako GIF / PNG / JPG. Twoje preferencje. (Mój to PNG.) Dostosuj plik CSS, aby powtórzyć obraz.

DrAwkward
źródło
@ACMExp, czy naprawdę mam prawo coraz bardziej zastanawiać się nad odpowiedzią? pionowy kołek i efekt zygzaka? Jak to może działać?
Saeed Neamati,
Pionowy kołek wygląda podobnie do tego. oneinhundred.com/upfiles/upimg3/…
DrAwkward
Więc chyba nie jest pionowy. Pionowe oznacza prostopadłe do ziemi. Czy się mylę?
Saeed Neamati,
0

Możesz zacząć od prostokąta na nowej warstwie, a następnie użyć narzędzia Lasso wielokątne, aby wyciąć jeden „trójkąt” zygzaka. Następnie użyj prostokątnego narzędzia markizy, aby wyciąć tę sekcję i powtórz ją w Photoshopie lub bezpośrednio na stronie internetowej.

MikeJerome
źródło
wyniki byłyby niespójne
Muhammad Umer
0

Photoshop może nie być najlepszym narzędziem tutaj. Sprawdź SnagIt, aby znaleźć niedrogie dodatkowe narzędzie, które ma naprawdę świetne narzędzia do tworzenia krawędzi.

Alex Feinman
źródło
3
Nie mogę powiedzieć, że nie można tego zrobić w edytorze Snagit. Ale mimo to, niech bóg Photoshopa cię powali ... albo przynajmniej trochę cię szturchnie. Powiedzieć, że Photoshop może nie być najlepszy program do wykonywania grafiki internetowej .. to jest to po prostu dziwne ... dziwne .. iw miarę tani idzie pixlr.com/editor
Joonas
Pixlr również nie ma obramowań jednym kliknięciem. Ma to znaczenie, gdy robisz tak dużo granicznych zrzutów ekranu, jak ja. Ale hej, jeśli chcesz po prostu zrobić kilka dodatkowych kroków, idź do niego ...
Alex Feinman
W przypadku zrzutów ekranu snagit jest niesamowity, nie ma co do tego wątpliwości .. Ale to nie dotyczy zrzutów ekranu.
Joonas
3
Zdecydowanie powinieneś napisać o tym, jak można to osiągnąć. Ludzie szukają różnych opcji. Dam ci plus, jeśli to dobrze.
Joonas
1
Cóż, miałem na myśli w twojej odpowiedzi i bardziej szczegółowo. Nie sądzę, że tak, ale czy wiesz, czy ma opcję przezroczystego bg w narzędziach krawędzi?
Joonas,