Как создать эффект «зигзагообразный, неровный» в Photoshop?

Я хотел бы создать эффект зигзагообразной линии внизу (или сверху, или любого края) прямоугольника. Я также хочу использовать это изображение на веб-странице, поэтому я думаю, что я должен сделать это так, чтобы я мог повторить его с помощью CSS.

Я не знаю, использовал ли я правильный термин или нет, поэтому, пожалуйста, поправьте меня. Этот эффект называется зигзагом? Как я могу создать его в Photoshop (не Illustrator)?

Я бы, скорее всего, сделал это так:

1. Создание квадрата.

Посмотри Rectangle tool с Shape layersвключенным.

Сделайте квадрат, удерживая Shiftкнопку, чтобы убедиться, что это идеальный квадрат.

(В этом случае размер не имеет значения (хах ..). Я собираюсь сделать немного больше, чем размер пилы, который я хочу, но вы можете сделать точный размер сразу. Помогает с обрезкой, если вы можете привязать к краям Квадрат. В стадии 4. Обрежьте это, Обрежьте это действительно хорошо. )

2. Поворот на 45 градусов

США Free transform ctrl+t

Поверните квадрат на 45 градусов, удерживая Shiftкнопку, чтобы включить привязку на 45 градусов.

3. Сделайте прямоугольник и поместите квадрат.

Все еще с Rectangle tool, сделайте большой прямоугольник наверху.

После этого вы можете расположить квадрат Move tool, перемещая его вверх или вниз, и решить, каким будет его размер, показывая меньше или больше его.

4. Обрежьте это, Обрежьте это действительно хорошо.

Возьмите Crop tool и выберите область обрезки.

Вы можете увеличить выбор пилообразного и дополнительного наполнения Crop tool и обрезать.

Теперь, технически, вы могли бы просто сделать действительно большой квадрат и обрезать его, но дополнительный прямоугольник должен был облегчить просмотр того, как будет выглядеть его размер.

5. Конечный результат.

И так оно и будет повторяться.

6. Дополнительные примечания.

Если вы хотите поместить Layer stylesкак Bevel & embossили Inner shadowили что-то подобное, вы можете объединить две фигуры в один слой, прежде чем сделать это.

Вы можете сделать это, выбрав оба слоя, удерживая ctrlи затем используя горячие клавиши, ctrl+eчтобы объединить их в один растровый слой.

Используйте инструмент «Перо» в Photoshop и создайте форму, похожую на вертикальную ставку. Сохранить файл как GIF / PNG / JPG. Ваши предпочтения. (У меня PNG.) Настройте свой CSS-файл, чтобы повторить ваше изображение.

Вы можете начать с прямоугольника на новом слое, а затем использовать инструмент многоугольной лассо, чтобы вырезать один «треугольник» вашего зигзага. Затем используйте прямоугольный инструмент выделения, чтобы вырезать этот раздел и повторите его в Photoshop или непосредственно на веб-странице.

Фотошоп, возможно, не лучший инструмент здесь. Проверьте SnagIt для недорогого дополнительного инструмента, который имеет действительно отличные инструменты создания краев.