Как сделать паттерн из картинки в фотошопе: Использование Pattern Maker в Photoshop

24 Мар

Содержание

Как сделать паттерн в Фотошопе


Паттерн, регулярный узор, бесшовный фон… Называйте, как хотите, но смысл один – заполнение фона (сайта, документа) повторяющимися элементами, между которыми нет видимой границы или перехода.

В этом уроке будет рассказано о том, как сделать узор в Фотошопе.

Здесь рассказывать особенно нечего, поэтому сразу приступаем к практике.

Создаем документ с размерами 512х512 пикселей.

Далее необходимо разыскать (нарисовать?) однотипные элементы для нашего паттерна. Тематика нашего сайта компьютерная, поэтому я подобрал такие:

Берем один из элементов и помещаем в рабочую область Фотошопа на наш документ.

Затем перемещаем элемент на границу холста и дублируем его (СTRL+J).

Теперь идем в меню «Фильтр – Другое – Сдвиг».

Смещаем объект на 512 пикселей вправо.

Для удобства выделим оба слоя с зажатой клавишей

CTRL и поместим их в группу (CTRL+G).

Помещаем новый объект на холст и перемещаем к верхней границе документа. Дублируем.

Снова идем в меню «Фильтр – Другое – Сдвиг» и перемещаем объект на 512 пикселей вниз.

Таким же способом помещаем и обрабатываем другие объекты.

Осталось лишь заполнить центральную область холста. Я мудрить не буду, а помещу один большой объект.

Паттерн готов. Если требуется его использование в качестве фона веб страницы, то просто сохраняем в формате JPEG или PNG.

Если же планируется заливать паттерном фон документа в Фотошопе, то нужно сделать еще пару шагов.

Шаг первый – уменьшаем размер изображения (если требуется) до 100х100 пикселей.


Затем идем в меню

«Редактирование – Определить узор».

Даем имя узору и нажимаем ОК.

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

Создаем новый документ с любыми размерами. Затем нажимаем сочетание клавиш SHIFT+F5. В настройках выбираем «Регулярный» и ищем в списке созданный паттерн.

Нажимаем ОК и любуемся…

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

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ

Как сделать паттерн | verovski

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

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

Чем паттерн отличается от текстуры

Что такое текстура, думаю объяснять не нужно. Википедия отвечает на этот вопрос так:

Текстура — изображение, состоящее из более или менее близких по восприятию элементов.

Беспроигрышный вариант создания текстуры — это сфотографировать её самому, или найти/купить изображение в Интернете. Подробнее этот вопрос я освещал в статье Как подобрать текстуру в Фотошопе.

Термины

«текстура» и «паттерн» между собой постоянно путаются. Паттерн называют текстурой, а текстуру паттерном. Но разобраться в разнице между ними очень просто. Паттерн тоже является в некоторой степени текстурой. Но в отличии от текстуры, паттерн может повторяться, и повторяясь он складывается в единые неделимые текстурные «обои».

Изображение текстуры всегда имеет определенный размер. Паттерн же чаще всего является небольшим кусочком графики, который дублируясь «натягивается» на изображение или объект любого размера.

Как это происходит?

Предположим у вас есть изображение текстуры и Объект, определенного размера, на который надо эту текстуру натянуть. Изображение текстуры меньше объекта, и единственный способ натянуть её на объект — увеличить в размере, потеряв в качестве.

Использовать текстуру как паттерн не получится, так как её швы не сходятся друг с другом. Придется такую текстуру либо увеличивать, либо вручную работать с масками и слоями, чтобы полностью натянуть на объект.

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

Как сделать паттерн?

Паттерн делается очень просто. Достаточно выделить инструментами выделения любой участок изображения и открыть Edit > Define Pattern.

После этого выделенный кусок будет преобразован в паттерн и появится в стилях слоя во вкладке Pattens. Так же его можно будет найти в менеджере настроек Presets Manager. 

Определить кусок графики как паттерн, не значит сделать настоящий повторяющийся паттерн.

Виды паттернов

Паттерн паттерну рознь. Паттерны бывают как простыми, так и сложными. Самый простой паттерн — это паттерн из находящихся на расстоянии друг от друга элементов. Сделать такой паттерн не трудно. Создайте новый фаил с размерами 10 на 10 пикселей. По левому краю нарисуйте полоску в 1 пиксель. Сделайте выделение и определите графику как паттерн 

Edit > Define Pattern

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

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

Но мы не будем посвящать эту простую статью созданию такой головоломки, она заслуживает отдельного рассмотрения. Вместо этого я покажу простой способ по созданию паттерна из обрывка текстуры.

Как сделать паттерн из текстуры

Для примера мы возьмем текстуру травы, которая представляет из себя обычную фотографию. Не паттерн. Её края друг с другом никак не соединяются, и если нам вздумается из такой текстуры сделать паттерн, мы отчетливо получим швы на соединении.

Вместо того чтобы делать такой кривой паттерн, я применю эффект Filter > Other > Offset суть которого заключается в том, что он сдвигает края внутрь рабочей области.

Теперь когда мы соединили края графики внутри, заретушируем швы их обычными инструментами ретуши вроде Clone Stamp или Spot Healing Brush. Но вместо того чтобы орудовать этими инструментами я поступлю ещё проще. Я сделаю выделение краев инструментом Lasso Tool. Криво и неровно, чтобы при заливке области смотрелись неправильно в хорошем смысле.

И выберу Edit > Fill с настройкой Content-Aware.

Если на ваш взгляд соединения скрыты успешно, выделяйте графику и применяйте

Edit > Define Patten. Паттерн из текстуры готов к использованию.

Понравился урок? Подписывайся на Вконтакт, Фэисбук или твиттер, чтобы следить за новыми статьям.

Автор:

Дмитрий Веровски

Как создать и применить бесшовный тропический узор в Фотошопе?

Летний зной в тропическом раю!  Что может быть лучше? В этом уроке мы создадим красивый бесшовный узор с ярким тропическим настроением. Для создания узора мы будем использовать базовые геометрические формы и произвольные фигуры. Из простых форм мы создадим интересные объекты, которым позднее добавим больше деталей при помощи текстурных кистей.  

Узоры и текстуры в повседневной жизни окружают нас повсюду. Они используются в веб-дизайне и печатных материалах. Они украшают нашу одежду и стены. Они также используются для создания обёрточной бумаги и для многих других целей.  

В этом уроке мы будем создавать узор с яркими тропическими элементами. Однако, благодаря полученным знаниям, в конце урока вы сможете создавать практически любые бесшовные узоры. Например, бесшовные цветочные узоры, узоры для подарочной бумаги или узоры для пищевой упаковки. Если вы хотите получить больше вдохновения, то посмотрите множество узоров на сайте  Envato Market. 

1. Создаём тропические элементы при помощи простых и произвольных фигур.

Шаг 1

Создайте новый файл размером 2000 x 2000 пикселей. Мы специально создаём файл большого размера, чтобы в будущем его можно было использовать для печати.

Шаг 2

Активируйте инструмент «Эллипс» (Ellipse Tool). При помощи данного инструмента создайте овал жёлтого цвета. Размер овала 550 x 660 пикселей.  Регулировать настройки овала можно на

Панели параметров. Чтобы активировать панель, выберите «Окно» — «Свойства» (Window > Properties).

Простому овалу нам необходимо придать форму ананаса. Для этого выберите инструмент «Выделение узла» (Direct Selection Tool) и слегка растяните направляющие, исходящие от нижней опорной точки. Таким образом, вы придадите нижней части овала более плоский и ровный вид

Шаг 3

Теперь мы начинаем работать над созданием верхней части ананаса.  С помощью инструмента «Эллипс» (Ellipse Tool) создайте новый овал размером 70 x 400 пикселей. Подберите для овала бирюзово-зеленоватый цвет. 

Далее на панели инструментов щёлкните правой кнопкой мыши по группе инструментов «Перо» (Pen Tool). Из появившегося меню выберете инструмент «Угол» (Convert Point Tool). Затем щёлкните левой кнопкой мыши по верхней и нижней опорной точке контура. Таким образом мы придадим овалу заострённую форму.

 

Шаг 4

Теперь давайте придадим овалу слегка изогнутый вид.  Сначала активируйте «Свободное Трансформирование Контура» (Free Transform Path). Для этого нажмите клавиши Control-T. Далее кликните правой кнопкой мыши внутри документа и из появившегося меню выберите опцию «Деформация» (Warp). На панели параметров, расположенной сверху, установите стиль деформации «Аркой«.  На панели параметров также активируйте иконку «Изменить ориентацию деформации» (Change the warp orientation) и установите значение изгиба на 30% (Bend value).

Выглядит замечательно! Чтобы применить трансформацию, нажмите «Enter«. 

Шаг 5

Активируйте Свободное Трансформирование Контура (Free Transform Path), нажав на клавиши Control-T. Далее поверните лист и разместите его рядом с ананасом. Подтвердите трансформацию и сделайте копию слоя с листом, нажав на клавиши Control-J. Снова активируйте Свободное Трансформирование Контура (Free Transform Path) и сделайте второй лист немного больше.  Разместите его над первым листом. Таким же способом создайте третий лист.

На панели слоёв выберите все три слоя с листами и дублируйте их (Control-J). Далее идём в меню Редактирование — Трансформирование — Отразить по горизонтали (Edit — Transform — Flip Horizontal). Разместите листья так, как показано на снимке ниже. Не забудьте добавить вертикальный лист в центре.  

Шаг 6

Теперь нам необходимо добавить нашему ананасу больше деталей. На Панели Слоёв выберите слой с жёлтым овалом, затем кликните правой кнопкой мыши и из появившегося меню выберите опцию «Растрировать слой» (Rasterize Layer).  Теперь мы не сможем изменить размер овала без потери качества.  Но зато теперь мы можем использовать кисти и инструмент «Ластик» (Eraser Tool).

Шаг 7

Теперь мы добавим нашему ананасу больше деталей.  Мы будем использовать Обтравочные маски (Clipping Masks), чтобы в будущем мы могли свободно редактировать каждое наше действие.  

На Панели Слоёв выберите слой с жёлтым овалом и кликните по иконке «Добавить векторную маску«, расположенной внизу панели.

Теперь установите инструмент «Перо» (Pen Tool) и создайте диагональную линию как показано на снимке ниже. Не забудьте удерживать клавишу Shift.  

Шаг 8

Теперь на Панели Слоёв выберите Обтравочную маску (Clipping Mask) и установите чёрный цвет на палитре цветов.

Установите инструмент Кисть (Brush Tool) и кликните правой кнопкой мыши, чтобы открыть список кистей. Выберите любую круглую текстурную кисть. Я использую Жёсткую Круглую Кисть 9 #1 из стандартного набора Кисти М.

Активируйте инструмент «Перо» (Pen Tool), кликните правой кнопкой мыши внутри рабочей области документа и в появившемся меню выберите опцию «Выполнить обводку» (Stroke Path).  В настройках установите инструмент «Кисть» (Brush Tool) и нажмите ОК.   Теперь наша векторная линия, сделанная инструментом «Перо» (Pen Tool), стала заметной. 

Таким образом на Обтравочной маски (Clipping Mask) мы создаём белые диагональные линии.

Шаг 9

С помощью инструмента «Перо» (Pen Tool) нарисуйте новую диагональную линию. Либо вы можете переместить уже существующую векторную линию. Для этого сначала активируйте Свободное Трансформирование Контура (Free Transform Path), нажав на клавиши Control-T, а затем выберите инструмент «Перемещения» (Move Tool). Далее немного передвиньте линию вниз.  Нажмите Enter и подтвердите трансформирование. После этого выберите инструмент «Перо» (Pen Tool) и кликните правой кнопкой мыши. Из появившегося списка выберите опцию «Выполнить обводку«. 

Продолжайте перемещать линию вниз и Выполнять обводку, таким образом заполняя диагональными линиями всю поверхность ананаса.

Шаг 10


Когда вы закончите, выделите наш векторный контур и перейдите в меню Редактирование — Трансформирование сегментов — Отразить по горизонтали (Edit — Transform Points — Flip Horizontal).

Теперь снова Выполните Обводку контура и добавьте диагональные линии с противоположной стороны.

 Шаг 11

Установите инструмент «Кисть» (Brush Tool) и при помощи той же самой кисти, которую мы использовали ранее, добавьте маленькие точки в каждую получившуюся клетку. Не забудьте рисовать кистью только на Обтравочной маски (Clipping Mask).

Основа нашего ананаса готова. Теперь сгруппируйте (Control-G) все слои с элементами ананаса в одну группу. 

Шаг 12

Теперь давайте создадим простой пальмовый лист для нашего тропического узора. Выберите инструмент «Эллипс» (Ellipse Tool) и создайте небольшой овал размером 80 x 700 пикселей.  С помощью инструмента «Угол» (Convert Point Tool) придайте нижней и верхней части овала слегка заострённую форму. 

Шаг 13

Теперь нажмите клавиши Alt-Control-T и активируйте Свободное Трансформирование Контура (Free Transform Path).  Кликните по точке вращения, расположенной в центре листа, и переместите точку в нижнюю часть формы.   Обратите внимание, что, как только вы переместили точку вращения, на Панели слоёв появилась точная копия нашего листа.  Это именно то, что нам было нужно. Сочетание клавиш Alt-Control-T позволяет одновременно трансформировать объект и создавать копию слоя.

Теперь мы можем немного повернуть копию листа вправо.   Нажмите Enter и подтвердите вращение. Продолжайте нажимать клавиши Shift-Control-Alt-T и создавать новые листья. Обратите внимание, что благодаря данной комбинации клавиш, вы не только создаёте новые копии листа, но и одновременно поворачивает их под ровным углом.

Шаг 14

На палитре слоёв выделите все слои с листьями и дублируйте их (Control-J). Далее перейдите в меню Редактирование — Трансформирование — Отразить по горизонтали (Edit — Transform — Flip Horizontal). После этого у вас должен получиться один большой лист. В нижней части листа вы можете добавить несколько дополнительных маленьких листочков. Теперь сгруппируйте (Control-G) все слои с листьями в одну группу.

Шаг 15

На данный момент мы уже создали несколько тропических элементов для нашего узора. Теперь давайте создадим ещё парочку элементов, используя более лёгкий метод..  Выберите инструмент «Произвольная фигура» (Custom Shape Tool) и на панели параметров, расположенной в верхней части экрана, откройте выпадающий список с фигурами.  Здесь вы можете найти множество листьев и цветов, идеально подходящих для создания нашего тропического узора. Выбирайте формы, которые вам больше нравятся, и экспериментируйте с цветами и размерами. 

2. Добавляем текстуры тропическим элементам

Шаг 1

Итак, давайте начнём с ананаса. На Панели слёв выберите слой с жёлтым овалом ананаса и верхней части панели активируйте иконку «Блокировать прозрачные точки» (Lock Transparent Pixels)  Это позволит нам рисовать кистью только на тех участках, которые заполнены пикселями. Далее вы увидите, как это работает.

Выберите сухую гранжевую кисть, например, Сухую Кисть 1#2 из стандартного набора Кисти М. Вы также можете попробовать использовать текстурные кисти с сайта Envato Market. Например, вот эти кисти Chalk Scattering Brushes. 

Выберите оранжевый цвет и начинайте раскрашивать нижнюю часть ананаса, делая её более тёмной. 

Шаг 2

Теперь повторите те же самые действия для макушки ананаса. Сначала объедините (Control-E) все слои с листьями в один слой. Далее на панели слоёв кликните по слою с листьями правой кнопкой мыши и из появившегося меню выберите опцию «Растрировать» (Rasterize).   

После этого Заблокируйте прозрачные пикселы (Lock transparent pixels) и начинайте рисовать кистью. Обратите внимание, что снизу листья немного темнее, а сверху — светлее.

Шаг 3

Таким же способом добавьте текстуру пальмовому листу. На панели слоёв выберите группу с элементами пальмового листа и перейдите в меню Слои — Объединить группу (Layer — Merge Group).  Прежде чем приступить к рисованию кистью, не забудьте растрировать слой и Заблокировать прозрачные пикселы на Панели Слоёв. Для рисования используйте сухую текстурную кисть.

Шаг 4

Теперь давайте раскрасим один из цветов другим способом. На этот раз мы не будем растрировать слой. На панели слоёв выберите слой со цветком. Далее, удерживая клавишу Alt кликните по иконке «Создать новый слой» (Create new layer).  

В появившемся диалоговом окне поставьте галочку напротив пункта «Использовать предыдущий слой для создания обтравочной маски» (Use Previous Layer to Create Clipping Mask). 

Теперь вы можете рисовать кистью на обтравочной маске, не боясь выйти за границы цветка.

Сгруппируйте (Control-G) все слои с цветком в одну группу.

Шаг 5

Используя методы, описанные выше, прорисуйте текстурной кистью все тропические элементы. 

3. Создаём бесшовную композицию с тропическими элементами

Шаг 1

На панели слоёв выберите фоновый слой и заполните его светло-голубым цветом. Теперь давайте приступим к созданию композиции из наших тропических элементов.  

Шаг 2

Дублируйте (Control-J) все слои с тропическими элементами. Далее, используя Вращение и Отображение по горизонтали (Редактирование — Трансформирование — Отобразить по горизонтали) (Edit — Transform — Flip Horizontal), равномерно распределите по холсту все тропические элементы.  Если вы хотите сделать композицию более разнообразной, то добавьте больше цветов, используя инструмент «Произвольная фигура» (Custom Shape Tool).

Шаг 3

Теперь давайте посмотрим, как можно сделать наш узор бесшовным. Если вы внимательно посмотрите на наш холст, то заметите, что многие тропические элементы выходят за левую границу нашего рабочего документа. На панели слоёв выберите все элементы, которые пересекают левую границу холста, и дублируйте (Control-J) их. Затем активируйте Свободное Трансформирование (Free Transform), нажав на клавиши Control-T.  

На панели параметров, расположенной в верхней части экрана, найдите Горизонтальные (Horizontal) и Вертикальные (Vertical) позиции, отмеченные как X и Y. Рядом с ними вы увидите цифры, которые обозначают точное месторасположение наших объектов. Кликните по иконке треугольника, которая означает «Использовать относительные координаты опорной точки» (Use relative positioning for reference point). Таким образом вы сбросите координаты до нуля. Напротив Горизонтальной позиции установите значение 2000 пикселей (это ширина нашего рабочего документа). Таким образом мы передвинем выбранные объекты на 2000 пикселей вправо.  Нажмите Enter и подтвердите трансформирование.

Шаг 4

Повторите те же самые действия для тех элементов, которые пересекают верхние границы холста. Вначала дублируйте элементы (Control-J), затем нажмите клавиши Control-T и в окошке, расположенном напротив Вертикальной позиции введите числовое значение 2000 (это высота нашего рабочего документа). Таким образом мы передвинем элементы вниз на 2000 пикселей.

Если вы хотите переместить элементы в обратном направлении, то используйте отрицательные числа со знаком минус (— 2000). Таким образом можно переместить элементы из нижней части холста в верхнюю часть или из правой стороны в левую сторону.

Шаг 5

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

Шаг 6

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

Шаг 7

Когда ваш узор будет полностью готов, вы можете сохранить его и позднее применить к любой произвольной фигуре

Чтобы сохранить узор, зайдите в меню Редактирование — Определить узор (Edit — Define Pattern). В появившемся диалоговом окне введите любое название узора.  

Шаг 8

Теперь, когда  вы активируете инструмент «Заливка» (Paint Bucket Tool), на панели параметров, расположенной сверху, вы можете поменять опцию «Основной цвет» на «Узор» (Pattern)) и в палитре узоров найти свой рисунок. Сохранять новые узоры можно также кликнув кликнув на маленькую иконку колёсика, расположенную в верхнем правом углу. Чтобы сохранить новый узор из выпадающего списка выберите опцию «Сохранить узоры» или воспользуйтесь функцией «Управление наборами» . 

Шаг 9

В фотошопе существует несколько раличных способов применения нашего узора.  Заливку узором можно выполнить с помощью инструмента «Заливка». Для этого сначала выделите определённую область инструментом «Прямоугольная область» или «Овальная область» (Rectangular or Elliptical Tool). Далее выберите инструмент «Заливка» ( (Paint Bucket Tool) и в настройках установите «Заливка узором» (Pattern Fill). 

Немного другим способом можно использовать инструмент «Произвольная фигура» (Custom Shape Tool). Чтобы заполнить фигуру узором, на панели параметров, расположенной в верхней части экрана, установите опцию «Заливка узором» (Pattern Fill).   В настройках инструмента также можно отрегулировать Масштаб узора (Scale). 

Шаг 10

Вы также можете создать Новый файл (New File) большого размера. Затем создать Новый слой (New Layer) и при помощи инструмента «Заливка» (Paint Bucket Tool) заполнить весь холст узором.

Ура! Наш бесшовный тропический узор готов!

Отличный результат! Мы закончили создание нашего причудливого узора с летними тропическими элементами. Я надеюсь, что данный урок подарил вам не только яркое солнечное настроение, но и новые знания, которые вы сможете применить в своих будущих работах.

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

Хорошего творчества!

Учебник по повторяющимся узорам в Photoshop

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

В этом уроке будут рассмотрены три основные части работы с повторяющимися узорами. Во-первых, мы разработаем одну плитку, которая в конечном итоге станет нашим повторяющимся узором. Далее мы узнаем, как сохранить плитку как фактический рисунок в Photoshop. Наконец, с нашим новым шаблоном, мы научимся выбирать шаблон и повторять его по всему слою! В следующем учебном пособии мы продолжим повторять шаблоны, добавив цвета и градиенты, используя режимы наложения для смешивания нескольких шаблонов, создавая шаблоны из пользовательских фигур и многое другое!

Я буду использовать Photoshop CS5 здесь, но эти шаги применимы к любой последней версии Photoshop.

Шаг 1: Создайте новый документ

Давайте начнем с создания единственной плитки для шаблона. Для этого нам нужен новый пустой документ, поэтому зайдите в меню « Файл» в строке меню в верхней части экрана и выберите « Новый» :

Перейдите в Файл> Создать.

Откроется диалоговое окно «Новый документ». Введите 100 пикселей для ширины и высоты . Размер документа будет определять размер элемента мозаичного изображения, что будет влиять на частоту повторения шаблона в документе (поскольку для меньшего элемента потребуется больше повторений, чтобы заполнить тот же объем пространства, что и для элемента большего размера). В этом случае мы будем создавать плитку размером 100 px x 100 px. Вы захотите поэкспериментировать с различными размерами при создании собственных шаблонов позже.

Я оставлю свое значение разрешения равным 72 пикселя / дюйм . Установите для параметра « Содержимое фона» значение « Прозрачный», чтобы наш новый документ имел прозрачный фон:

Введите ширину и высоту документа и убедитесь, что для параметра «Содержимое фона» установлено значение «Прозрачный».

Нажмите OK, когда вы закончите, чтобы закрыть из диалогового окна. Новый документ появится на вашем экране. Шаблон шахматной доски, заполняющий документ, — это способ Photoshop сказать нам, что фон прозрачный. Поскольку размер документа довольно мал — всего 100 × 100 пикселей, я увеличу его, удерживая нажатой клавишу «Ctrl» («Победа») / « Command» (Mac) и нажимая знак «плюс» ( + ) несколько раз. Здесь документ увеличен до 500%:

Новый пустой документ, увеличенный до 500%.

Шаг 2: Добавьте направляющие по центру документа

Нам нужно точно знать центр нашего документа, и мы можем найти его с помощью руководств Photoshop. Поднимитесь в меню View в верхней части экрана и выберите New Guide :

Перейдите в Вид> Новое руководство.

Откроется диалоговое окно «Новое руководство». Выберите Горизонтально для Ориентации, затем введите 50% для Позиции . Нажмите кнопку ОК, чтобы закрыть диалоговое окно, и вы увидите горизонтальную направляющую, проходящую через центр документа:

Выберите Горизонтально и введите 50% для Позиции.

Вернитесь в меню « Вид» и снова выберите « Новое руководство» . На этот раз в диалоговом окне «Новое руководство» выберите « Вертикаль» для « Ориентации» и снова введите 50% для « Позиции» :

Выберите Вертикаль и введите 50% для Позиции.

Нажмите OK, чтобы закрыть диалоговое окно, и теперь у вас должна появиться вертикальная и горизонтальная направляющая, проходящая через центр документа. Точка, где они встречаются, является точным центром. Цвет по умолчанию — голубой, поэтому их может быть немного сложно увидеть на скриншоте:

Вертикальная и горизонтальная направляющая проходит через центр документа.

Изменение цвета направляющей (необязательно)

Если вам сложно увидеть направляющие из-за их светлого цвета, вы можете изменить их цвет в настройках Photoshop. На ПК перейдите в меню « Правка», выберите « Настройки», затем выберите « Направляющие», «Сетка и фрагменты» . На Mac перейдите в меню Photoshop, выберите « Настройки», затем выберите « Направляющие, сетка и фрагменты» :

Выберите «Направляющие», «Сетка» и «Ломтики».

Откроется диалоговое окно «Параметры» в Photoshop с параметрами «Направляющие», «Сетка и фрагменты». Самый первый вариант в верхней части списка — это «Направляющий цвет» . Как я уже упоминал, по умолчанию он установлен на Cyan. Нажмите на слово Cyan и выберите другой цвет из списка. Вы увидите предварительный просмотр цвета в окне документа. Я изменю свой цвет на светло-красный :

Выбор Light Red в качестве нового цвета для направляющих.

Нажмите OK, когда закончите, чтобы закрыть диалоговое окно Preferences. Направляющие в окне документа теперь отображаются в новом цвете (обратите внимание, что Photoshop будет продолжать отображать направляющие в этом новом цвете, пока вы не вернетесь к настройкам и не измените цвет на Голубой или не выберите другой цвет):

Направляющие теперь отображаются в новом цвете, что облегчает их просмотр.

Шаг 3: нарисуйте фигуру в центре документа

Вы можете создавать очень сложные узоры в Photoshop, или они могут быть такими же простыми, как, скажем, повторяющаяся точка или круг. Давайте нарисуем круг в центре документа. Сначала выберите Elliptical Marquee Tool на панели инструментов. По умолчанию он прячется за инструментом «Прямоугольная область», поэтому щелкните «Инструмент« Прямоугольная область »и удерживайте кнопку мыши нажатой в течение секунды или двух, пока не появится всплывающее меню, а затем выберите инструмент« Эллиптическая область »из списка:

Нажмите и удерживайте Rectangular Marquee Tool, затем выберите Elliptical Marquee Tool.

Выбрав инструмент Elliptical Marquee Tool, переместите перекрестие прямо над точкой пересечения направляющих в центре документа. Удерживая нажатой клавишу «Shift» + «Alt» (победа) / « Shift» + «Option» (Mac), щелкните в центре документа, затем, удерживая нажатой кнопку мыши, перетащите выделение по кругу. Удерживая нажатой клавишу Shift при перетаскивании, вы выделите форму выделения в идеальный круг, а клавиша Alt (Победа) / Option (Mac) заставляет Photoshop нарисовать контур выделения из центра. Когда вы закончите, ваш контур выбора должен выглядеть примерно так (не беспокойтесь о точном размере, пока он близок):

Удерживая нажатой клавишу «Shift» + «Alt» (победа) / «Shift» + «Option» (Mac), перетащите круговую схему выделения из центра.

Шаг 4: заполните выделение черным

Перейдите в меню « Правка» в верхней части экрана и выберите « Заполнить» :

Перейдите в Edit> Fill.

Откроется диалоговое окно «Заливка», где мы можем выбрать цвет для заливки выделения. Установите опцию Использовать в верхней части диалогового окна на Черный :

Установите для параметра «Использовать» значение «Черный».

Нажмите кнопку ОК, чтобы закрыть диалоговое окно. Фотошоп заполняет круговое выделение черным. Нажмите Ctrl + D (Победа) / Command + D (Mac), чтобы быстро удалить контур выделения со всей фигуры (вы также можете перейти в меню « Выбор» в верхней части экрана и выбрать « Отменить выбор», но сочетание клавиш работает быстрее). ). Имейте в виду, что мой документ все еще увеличен до 500%, поэтому края круга выглядят блочными:

Выбор был залит черным.

Плагин шорткодов, действий и фильтров: ошибка в шорткоде (ads-basics-middle)

Шаг 5: продублируйте слой

Добавив только один кружок в центр плитки, мы можем сохранить плитку как шаблон, но давайте сделаем ее более интересной, прежде чем мы это сделаем. Сначала сделайте копию слоя, зайдя в меню « Слой» в верхней части экрана, выбрав « Новый», затем выбрав « Слой через Копирование» . Или, если вы предпочитаете сочетания клавиш, нажмите Ctrl + J (Win) / Command + J (Mac):

Перейдите в Слой> Новый> Слой через Копировать.

Ничего не произойдет в окне документа, но копия слоя, которую Photoshop называет «Слой 1 копия», появляется над оригиналом на панели «Слои»:

Панель «Слои» показывает копию слоя 1 над оригиналом.

Шаг 6: примени фильтр смещения

При разработке плиток, которые будут использоваться в качестве повторяющихся узоров, есть один фильтр, который вы будете использовать почти каждый раз, и это Смещение, к которому вы можете перейти, перейдя в меню « Фильтр» в верхней части экрана, выбрав « Другой», затем выбрав « Смещение» :

Перейдите в Filter> Other> Offset.

Откроется диалоговое окно «Смещение фильтра». Фильтр «Смещение» перемещает или смещает содержимое слоя на указанное количество пикселей по горизонтали, вертикали или по обоим параметрам. При создании простых повторяющихся шаблонов, подобных тому, который мы разрабатываем здесь, вы захотите ввести половину ширины вашего документа в поле ввода «Горизонтально» и половину высоты вашего документа в поле ввода «Вертикально». В нашем случае мы работаем с документом 100 px x 100 px, поэтому установите параметр « Горизонтально» на 50 пикселей, а « Вертикальный» — также на 50 пикселей. В нижней части диалогового окна в разделе « Неопределенные области » убедитесь, что выбран « Обтекание вокруг» :

Задайте для параметров «Горизонтально» и «Вертикально» половину размеров документа и установите флажок «Обтекание вокруг».

Нажмите кнопку ОК, чтобы закрыть диалоговое окно. В окне документа мы видим, что фильтр «Смещение» взял копию круга, который мы сделали на предыдущем шаге, и разделил его на четыре равные части, поместив их в углы документа. Кружок, остающийся в центре, является исходным кругом, который мы нарисовали на Слой 1:

Изображение после запуска смещения фильтра.

Шаг 7: Определите плитку как шаблон

Разработав плитку, давайте сохраним ее как фактический шаблон, процесс, который Photoshop называет «определением шаблона». Поднимитесь в меню « Правка» в верхней части экрана и выберите « Определить шаблон» :

Перейдите в Edit> Define Pattern.

Photoshop откроет диалоговое окно с просьбой назвать новый шаблон. Рекомендуется указывать размеры плитки в названии шаблона, если вы проектируете несколько одинаковых плиток разных размеров. В этом случае назовите плитку «Круги 100х100». Нажмите OK, когда вы закончите, чтобы закрыть из диалогового окна. Плитка теперь сохраняется как рисунок!

Назовите узор «Круги 100х100».

Шаг 8: Создайте новый документ

Мы разработали нашу плитку и определили ее как шаблон, что означает, что теперь мы можем использовать ее для заполнения всего слоя! Давайте создадим новый документ для работы. Как и в предыдущем шаге, перейдите в меню « Файл» и выберите « Новый» . Когда появится диалоговое окно «Новый документ», введите 1000 пикселей для ширины и высоты . Оставьте Разрешение равным 72 пикселя / дюйм, и на этот раз установите для параметра « Содержимое фона» значение « Белый», чтобы фон нового документа был полностью сплошным белым. Нажмите OK, когда вы закончите, чтобы закрыть из диалогового окна. Новый документ появится на вашем экране:

Создайте новый документ 1000 px x 1000 px с белым фоном.

Шаг 9: добавь новый слой

Мы могли бы просто заполнить фоновый слой документа нашим шаблоном, но это серьезно ограничило бы то, что мы можем с ним сделать. Как мы увидим в следующем уроке, когда мы рассмотрим добавление цветов и градиентов к шаблонам, гораздо лучший способ работы — это поместить повторяющийся узор на его собственный слой. Нажмите на значок « Новый слой» в нижней части панели «Слои»:

Нажмите на значок нового слоя.

Новый пустой слой с именем «Слой 1» появляется над фоновым слоем:

Новый слой появляется.

Шаг 10: заполни новый слой узором

Добавив наш новый слой, давайте заполним его нашим шаблоном! Поднимитесь в меню Edit и выберите Fill :

Перейдите в Edit> Fill.

Обычно команда Photoshop Fill используется для заливки слоя или выделения сплошным цветом, как мы делали это в шаге 4, когда использовали его для заполнения круглого выделения черным. Но мы также можем использовать команду «Заливка», чтобы заполнить что-то шаблоном, и мы сделаем это, предварительно установив для параметра « Использовать» в верхней части диалогового окна значение « Шаблон» :

Измените параметр «Использовать» на «Шаблон».

С выбранным шаблоном, прямо под ним появляется вторая опция, Custom Pattern, где мы выбираем шаблон, который хотим использовать. Нажмите на эскиз предварительного просмотра шаблона:

Нажмите непосредственно на миниатюру Custom Pattern.

Откроется окно выбора шаблонов, в котором отображаются небольшие эскизы всех шаблонов, из которых мы в настоящее время должны выбрать. Образец круга, который мы только что создали, будет последней миниатюрой в списке. Если в настройках Photoshop включены подсказки (они включены по умолчанию), имя шаблона будет отображаться при наведении курсора на эскиз. Дважды щелкните по нему, чтобы выбрать его и выйти из палитры шаблонов:

Выберите шаблон «Круги 100х100» в палитре шаблонов.

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

Слой 1 теперь заполнен повторяющимся узором круга.

Куда пойти дальше …

И это действительно все! Очевидно, что наш черно-белый кружок не принесет нам много наград, но важные вещи, которые следует извлечь из этого первого урока, — это шаги, которые мы использовали для его создания, разработка отдельной плитки, определение плитки как образца, а затем использование Photoshop. Заполните команду, чтобы заполнить весь слой с шаблоном. Далее мы начнем развиваться, узнав, как добавить цвета и градиенты в наши шаблоны ! Или посетите наш раздел Основы Photoshop, чтобы узнать больше об основах Photoshop!

Основные приемы работы в Photoshop для начинающих

Обновление: Александра Шпак

Я рассказал, как ориентироваться в программе Photoshop, о принципах работы, разобрал основные функции и инструменты. Оно подойдет тем, кто не знаком с программой совсем или хочет лучше в ней разобраться – копирайтерам, менеджерам, маркетологам, начинающим дизайнерам. Руководство поможет лучше доносить свои идеи в презентациях, делать иллюстрации для статей и постов в соцсетях, качественно обрабатывать фотографии.

Как читать. Если вы осваиваете Photoshop с нуля, прочитайте руководство целиком, по порядку. При этом прочитанное лучше сразу закреплять на практике — в программе. Если же вы хотите закрыть пробелы в знаниях, находите нужную информацию с помощью оглавления.

В чем преимущество. В этом руководстве, в отличие от видеоуроков, вы быстро найдете нужную информацию с помощью поиска по странице и оглавления. Преимущество, по сравнению с официальным гидом Adobe или профессиональными учебниками, в том, что:

  • собрана только самая важная информация,
  • текст написан простым языком,
  • контент понятно структурирован.

А еще это руководство будет обновляться по мере выхода новых версий Photoshop — следите за датой публикации материала выше, под заголовком.

Что такое Photoshop

Photoshop − это графический редактор для работы с растровыми изображениями. Они состоят из пикселей – квадратиков, которые вы видите при увеличении любой картинки.

Для чего нужен. Photoshop подходит для цветокоррекции и ретуши фотографий, создания коллажей и иллюстраций.

Для чего не подойдет. Для верстки многостраничной печатной продукции и сайтов эта программа не годится, так как перегружает систему. Полиграфию удобнее создавать в InDesign, а веб – в Figma или Sketch. Логотипы, иконки и все, что в дальнейшем нужно будет масштабировать, лучше рисовать в программах, предназначенных для работы с вектором. Созданные в них изображения сохраняют качество, так как не состоят из пикселей, а являются неделимыми фигурами (до сохранения в jpeg или растрирования).

Настройки перед началом работы

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

Интерфейс

При желании можно выбрать один из четырех цветов интерфейса (возле цифры 1 на изображении ниже (далее будем использовать просто цифру в скобках)). Для этого зайдите в настройки интерфейса, в меню «Редактирование». Там выберите светло-серый фон, если важна точность цветов на картинке. Если вы используете Mac, то зайдите в меню «Photoshop», далее в «Настройки», в выпадающем меню выберите пункт «Интерфейс». Слишком темное или светлое окружение будет искажать восприятие цветов. По сравнению с черным интерфейсом, изображения будут казаться светлее и насыщеннее, а по сравнению с белым – наоборот. К тому же, выбрав светло-серый, вы будете читать темный шрифт на светлом фоне – это привычнее, чем на выворотке.

По той же причине стоит выбрать средний серый цвет заливки окрестностей вокруг картинки (2). Серый не будет мешать правильному восприятию цветов.

Производительность

Определитесь, сколько места предоставить Photoshop. Сделать это можно в том же окне, в разделе «Производительность». Для нормальной работы достаточно 8 Гб. Но не отдавайте под него все место – оставьте 10-20 % для других программ.

Когда места для работы не хватает, временно ненужная информация сбрасывается на жесткий диск и подгружается при необходимости. Если она будет сбрасываться на системный диск (в большинстве случаев это диск «C»), то работоспособность программы может снижаться. Поэтому в разделе «Временные диски» убедитесь, что у вас выбран не диск «C». Если у вас есть SSD, то лучше поставить его – программа будет работать быстрее.

Отведите на работу Photoshop побольше места и выберите несистемный диск для сброса информации

Курсоры

Инструменты в Photoshop делятся на два вида: для рисования и все остальные. Перейдите во вкладку «Курсоры». Для первого вида выберите «Нормальный кончик кисти» (1). При этом будет отображаться кружок, определяющий границы мазка – это наиболее естественное представление о кисти.

Для второго вида поставьте галочку напротив пункта «Точный» (2). Вместо иконки инструмента будет отображаться точный курсор. Используя его, легче понять, какой вы участок выбираете.

Отображение инструментов

Некоторыми командами вы пользоваться не будете. В разделе «Меню», находящемся в пункте «Редактирование», их можно выключить, чтобы не отвлекали. Для этого уберите значок глазика с ненужных команд. Те же, которыми вы будете пользоваться чаще всего, например, «Сохранить» или «Открыть», пометьте цветом, чтобы их было легче находить. Если отключенная операция вдруг понадобится, вы можете выбрать внизу любого пункта «Показывать все пункты меню». Вернуть настройки по умолчанию можно в этом же окне.

Единицы измерения

В разделе «Единицы измерения и линейки» поставьте привычные вам миллиметры вместо дюймов.

Комбинации

В пункте «Редактирование» зайдите в раздел «Меню» и перейдите во вкладку «Клавиатурные сокращения». Напротив большинства команд стоят комбинации клавиш, которыми они вызываются. Их можно переназначить, кликнув на существующее назначение, или задать, если оно отсутствует. С помощью комбинаций горячих клавиш можно вызывать команды гораздо быстрее, чем методом поиска в меню. Поэтому выучите те, которыми пользуетесь наиболее часто – это существенно сэкономит время. Чтобы первое время было проще, распечатайте наиболее популярные комбинации горячих клавиш и подглядывайте в эту шпаргалку при необходимости.

Обзор программы

Основная проблема при работе с Photoshop − найти нужный инструмент или команду. Но если знать, что и где искать, работать будет гораздо быстрее и приятнее. Чтобы свободно ориентироваться в программе, разберем три основных органа управления.

Основное меню

Строка основного меню находится сверху и состоит из одиннадцати пунктов. В каждый из них входят команды, сгруппированные по определенным признакам.

Файл. В пункте «Файл» собраны все опции, отвечающие за взаимодействие программы с внешним миром: «Сохранить», «Открыть изображение», «Экспортировать», «Распечатать» и т.д.

Редактирование. Здесь сгруппированы команды, которым не нашлось места в других пунктах. Например, «Отменить», «Повторить», «Трансформирование слоя», а еще «Меню», «Настройки» и «Клавиатурные сокращения».

Изображение. Сюда собраны команды для коррекции изображений. Здесь можно изменить размер, яркость или подкорректировать цвета.

Слои. Так как основная работа в Photoshop связана именно со слоями, это самое большое ниспадающее меню. В нем собраны все команды, касающиеся слоев.

Текст. В этот пункт собраны команды для работы с текстом. Скорее всего, заглядывать сюда вы будете редко. Так как основные текстовые настройки находятся в окнах «Символ» и «Абзац».

Выделение. Если вы ищете команды, связанные с выделением участков изображения, то это здесь. В этом пункте можно отменить все выделения, инвертировать, деформировать, растушевать границы или сохранить.

Фильтры. Здесь находится набор фильтров, которые можно накладывать на изображения. Если существующих покажется мало, дополнительные фильтры можно найти в интернете.

3D. Photoshop умеет создавать несложные 3D-модели и обрабатывать созданные в других программах. Например, в 3ds Max. Функциональность простая: можно вращать модели, натягивать на них поверхности, освещать с разных сторон. Учтите, что работа в этом режиме перегружает память, отчего Photoshop может подвисать. Для 3D существуют более подходящие программы. Поэтому не будем в этой статье касаться данного пункта.

Просмотр. В пункте «Просмотр» находятся функции, которые меняют не саму картинку, а ее отображение на экране. Вам — сюда, если надо уменьшить или увеличить фотографию, поменять режимы экрана, включить или выключить отображение вспомогательных элементов, таких как направляющие, линейки, границы выделения.

Окно. В этом пункте сгруппированы команды для работы с окнами. Отсюда можно вызвать любое окно и менять отображение открытых в программе картинок: показывать их во вкладках или одновременно выводить на экран.

Окна

Где находятся и как добавлять. Собраны они в правой части экрана. Включаются в пункте «Окно», который находится в основном меню.

Какие окна нужны. Это зависит от задач. Для начала подойдет и набор по умолчанию, который по необходимости можно корректировать.

Как расставлять. Включив окно в основном меню, вы увидите его в отдельной вкладке. Его можно сворачивать, растягивать и сжимать.

Связывайте между собой. Для этого перетащите одно окно к другому за ярлык с названием до появления синей полоски. Теперь они будут сворачиваться и перетаскиваться вместе. Если нужно вставить третье окно между ними, перетащите его к их стыку. Чтобы окна открывались в одном окне и переключались с помощью вкладок, перетаскивайте не на стык, а накладывайте одно на другое

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

Как сохранить. Чтобы сохранить расположение окон, перейдите во вкладку «Рабочая среда» в пункте «Окно», выберите «Новая рабочая среда» и нажмите «Сохранить». Вместе с окнами там можно сохранить клавиатурные сокращения, вкладки в пунктах меню и состояние панели инструментов. По умолчанию предлагается несколько рабочих сред для разных целей. Например, для рисования или обработки фотографий.

К сохраненной среде можно вернуться, выбрав ее в том же вложенном меню и нажав «Сбросить».

Инструменты и опции

Панель инструментов находится слева (1). Сюда собраны все инструменты ручного редактирования. Выбрав один из инструментов, вы увидите его настройки на панели «Опции» (2), находящейся под основным меню. Большинство иконок на панели содержат вложенные инструменты со схожими функциями (3), например, вместе с «Кистью» находится «Микс-кисть» и «Карандаш». Чтобы их вызвать, кликните правой мышью по иконке.

Навигация

Открытие изображения

Чтобы открыть изображение, в пункте «Файл» нажмите «Открыть» и выберите картинку на компьютере или воспользуйтесь сокращением «Ctrl+O» (На Mac: «Cmd+O»). Во вложенном меню «Последние документы» находятся картинки, которые вы недавно открывали. Их количество можно увеличить в настройках, выбрав больший период запоминания.

Изменение масштаба

Масштаб изображения изменяется четырьмя основными способами:

  1. С помощью команд в пункте «Просмотр».
  2. Колесиком мыши при зажатой клавише Alt (кнопка Option на Mac).
  3. Комбинациями «Ctrl -» и «Ctrl +» (на Mac: «Cmd -» и «Cmd +».
  4. В окне «Навигатор».

Если нужно быстро вернуться к общему виду, нажмите «Ctrl + 0» (на Mac «Cmd + 0») − изображение займет всю рабочую область.

Также масштабировать можно с помощью «Увеличительного стекла», которое вызывается из панели инструментов либо с помощью модификатора «Ctrl + пробел» (на Mac: «Cmd + пробел»). Отличие модификаторов от клавиатурных сокращений заключается в том, что они не выполняют какую-либо команду, а временно меняют назначение курсора.

Перемещение по изображению

Быстро перемещаться по увеличенному изображению поможет инструмент «Рука». Для этого зажмите пробел и передвигайтесь с помощью мыши. Это самый удобный способ. Также для этого можно использовать окно «Навигатор» и полосы прокрутки, появляющиеся внизу и справа при приближении.

Отмена и возврат действий

Чтобы быстро отменить действие, нажмите «Ctrl + Z» (на Mac «Cmd + Z»), а при повторном нажатии комбинация вернет внесенное до этого изменение. Чтобы переключиться на несколько шагов назад, используйте сокращение «Alt + Ctrl + Z» (на Mac «Option + Cmd + Z») , вперед – «Shift + Ctrl + Z» (на Mac «Shift + Cmd + Z»). Вернуться сразу на много действий можно в окне «История».

Размеры и разрешение

Размер изображения

Чтобы редактировать размер и разрешение, в пункте «Изображение» выберите «Размер изображения» и задайте нужную ширину и высоту(1). Чтобы картинка менялась пропорционально при изменении одной из сторон, нажмите на иконку цепочки (2). А если хотите с размерами менять и разрешение (3), то снимите галочку с пункта «Ресамплинг» (4).

Рамка

С помощью инструмента «Рамка» можно добавлять фон, обрезать или наклонять картинку. Если нужно обрезать ее до конкретных размеров, введите их в специальные поля на панели «Опции» или выберите в контекстном меню, всплывающем по правому клику на изображение.

Если нужно растянуть фон с учетом содержимого, в «Опциях» нажмите на соответствующую иконку.

Создание изображений для соцсетей: размеры, вотермарки, инструменты, примеры

Слои

Работа в Photoshop похожа на создание аппликаций, только вместо слоев бумаги в нем используются виртуальные слои. Благодаря им вы можете удалять, редактировать, передвигать отдельные объекты или участки изображения, а также точечно на них воздействовать, не боясь задеть другие картинки на прочих слоях.

Действия со слоями

В программе «Слои» находятся на правой панели (1). Если нет, то включите их в пункте «Окно» в основном меню. Чтобы изменить или переместить слой, кликните по нему левой кнопкой.

Создать. Создавайте новый слой каждый раз, когда совершаете новое действие с фотографией. Для этого либо нажмите на иконку (2) внизу окна, либо выберите команду в пункте «Слои», либо воспользуйтесь комбинацией «Ctrl + Shift + N» (на Mac «Cmd + Shift + N»).

Назвать. Когда слоев несколько, в них легко ориентироваться. Когда же их накапливается много, можно запутаться, какой элемент на картинке к какому слою относится. Чтобы было удобно искать нужный слой, им можно давать названия. Для этого кликните два раза по существующему названию слоя.

Удалить. Удалить слой можно при помощи кнопки Delete в контекстном меню, которое вызывается кликом правой мыши по слою, либо перенеся его на значок корзины (3).

Переместить. Чтобы подвинуть слой в плоскости картинки, используйте инструмент «Перемещение».

Поменять порядок. Перетащите слой с помощью мыши.

Скопировать. Чтобы скопировать слой, воспользуйтесь быстрыми клавишами «Ctrl + J» (на Mac «Cmd + J») или перетащите его на иконку создания нового слоя (2). Если неудобно лезть в окно со слоями, выберите инструмент «Перемещение», зажмите Alt (на Mac — Option) и перетащите слой с картинки в сторону с помощью мыши.

Сделать прозрачным. Регулировать прозрачность слоя (9) можно с помощью двух полей: «Непрозрачность» и «Заливка». «Непрозрачность» регулирует слой вместе с наложенными на него эффектами. А «Заливка» − непосредственно сам слой. Например, уменьшая показатель в заливке, тень или обводка, наложенные на слой, будут оставаться без изменений.

Объединить. Слои удобно объединять, когда они относятся к одному объекту на картинке, и если изменять их по отдельности вы больше не собираетесь. Чтобы объединить, выделите нужные, правым кликом по слоям вызовите контекстное меню и нажмите «Объединить». А чтобы связать слои временно, нажмите «Связать».

Залить цветом. Выберите нужные цвета на панели инструментов, возьмите инструмент «Заливка» и нажмите «Alt + Backspace» (на Мас «Option + Backspace»), чтобы залить основным цветом, или «Ctrl + Backspace» (на Mac «Cmd + Backspace»), чтобы залить фоновым.

Деформировать. Нажмите «Ctrl + T» (на Мас «Cmd + T»), чтобы трансформировать слой. Правым щелчком мыши вызовите контекстное меню и выберите один из четырнадцати способов деформации. С помощью мыши изменяйте его размер, перемещайте и искажайте. Если хотите, чтобы слой сохранял пропорции при уменьшении или увеличении, зажмите Shift.

Наложить эффекты. Правым кликом мыши по слою вызовите меню и выберите «Параметры наложения». В этом окне можно задать обводку и тени, создать тиснение, наложить градиент или свечение. Чтобы включить эффект, поставьте галочку напротив его названия. Чтобы изменить его параметры − кликните по названию эффекта. Если рядом с названием есть значок плюсика, значит эффект можно дублировать: на один слой наложить несколько одинаковых эффектов с разными настройками. Например, это полезно, когда нужно сделать несколько теней для одного объекта, который освещается несколькими источниками света. Также эффекты можно включить и через меню, скрывающееся за иконкой fx (4) − оно полностью дублирует «Параметры наложения».

Изменить режим наложения. Photoshop позволяет выбирать, как будет накладываться верхний слой по отношению к нижнему. Для этого в окне со слоями существует поле «Режимы наложения» (8). Эти режимы делают изображение прозрачным, более контрастным или просвечивающими в определенных тонах.

Эта функция дает возможность добиваться наложения любых эффектов или фильтров на верхний слой, меняя нижний. А рисуя кистью в одном из параметров, можно создавать свет, тени и блики. Для наложения тени выберите режим «Умножение», «пипеткой» возьмите образец цвета предмета, на котором должна быть тень, уменьшите непрозрачность и жесткость кисти − она будет рисовать мазками похожими на тень. Чтобы наложить свет, рисуйте кистью в режиме «Экран». Для бликов используйте «Мягкий свет» и белую кисть.

Наложить маску. «Встаньте» на нужный слой и нажмите на иконку, похожую на японский флаг (5). Рядом со слоем появится его маска. Теперь черной кистью можно скрыть часть слоя в маске, а белой – вернуть обратно. Если вырезать область или стереть ее с помощью «Стерки», то это действие можно будет вернуть только отменой.

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

Закрепить. Закрепите слой, если хотите, чтобы ни одно действие с картинкой его не коснулось. Для этого «встаньте» на нужный слой и нажмите на иконку с замочком (7). Вы не сможете его двигать, перемещать, рисовать на нем или накладывать эффекты – для программы он будет неприкосновенен.

Виды слоев

Обычный растровый слой. Это просто элемент изображения, находящийся на отдельном слое. Его можно редактировать и проделывать с ним все, что описано выше.

Фоновый. Самый нижний закрепленный слой (с замочком). Его можно сделать обычным, сняв замочек по клику. Также любой слой можно сделать фоновым, переместив в самый низ и закрепив.

Текстовый. Текст, написанный на картинке, автоматически становится новым слоем. С ним можно проделывать все действия, что и с обычным, плюс те, которые описаны в разделе «Текст».

Корректирующий. Это прозрачный слой, не являющийся каким-либо эффектом. Он накладывается поверх обычного слоя, выполняя функцию цветного стекла, помещенного над картинкой. Чтобы его создать, нажмите на иконку, похожую на «Инь-ян» (6), и выберите слой с нужным видом коррекции. Он нужен для создания фильтров и цветокоррекции (подробнее об этом в следующем разделе).

Смарт-объект. Превратите растровый слой в смарт-объект (или наоборот) в контекстном меню слоя. После этого он как бы пакуется в папку. Чтобы воздействовать на слой, кликните по нему дважды. Он откроется отдельно в новой вкладке в Photoshop. После изменений в слое сохраните их с помощью сочетания клавиш «Ctrl + S» (на Мас «Cmd + S»), чтобы они вступили в силу на основном изображении. Это удобно, когда требуется более детальная работа с областью. Например, при создании мокапов.

Слой-заливка. Позволяет залить слой цветом, градиентом или узором. Слой-заливка является отдельным слоем, к которому можно отдельно применить режимы наложения.

Цветокоррекция

В этом разделе я расскажу, как настраивать яркость и контрастность фотографий, убирать лишние оттенки и корректировать цветовой баланс.

Все настройки цветокоррекции есть в пункте «Изображение». Но, по возможности, пользуйтесь корректирующими слоями. Они накладывают коррекцию отдельным слоем, который удобно скрывать и редактировать (как создавать корректирующие слои – в разделе «Слои»).

Кривая

Что такое кривая. Вызвав инструмент «Кривые», вы видите график. На оси X показывается яркость: от самого темного участка к самому светлому, слева направо. На оси Y показывается количество пикселей на картинке, соответствующих яркости по оси X.

Зависимость графика от изображения. Определив, какие участки на графике каким областям изображения соответствуют, вы поймете, в каком месте и куда двигать кривую. Сделать это можно по трем параметрам:

  1. По яркости. Чем ярче область на фотографии, тем ближе она к правому краю графика.
  2. По соотношению площади участка к высоте пиков на графике. Если на фото есть большой темный участок, скорее всего, он относится к пику слева.
  3. По ширине столбца. Ширина столбца говорит о количестве пикселей одной яркости. Пики графиков соответствуют однородным по яркости областям, равнины − областям с большим разбросом.

Соотнести график с фотографией поможет инструмент, скрывающийся за иконкой руки. Выбрав его и передвигая курсор по фотографии, вы будете видеть, как перемещается ползунок на кривой. Он и будет соответствовать той части фото, на которую наведен курсор. По клику на месте ползунка появится точка. С ее помощью можно изменять яркость соответствующего участка. Такие опорные точки можно ставить и по клику на саму кривую. Чтобы их убрать, просто перетащите точки за пределы графика, захватив мышью.

Как кривая меняет картинку. Есть четыре базовых правила, описывающих работу кривой:

  1. Если кривая проходит ниже − фотография затемняется (чем ниже, тем сильнее).
  1. Если выше − наоборот становиться светлее.
  1. Если кривую круто изогнуть в виде буквы S, то темные участки станут еще темнее, светлые − светлее. Чем круче кривая, тем больше контраст.
  1. Если S-образную кривую изогнуть в другую сторону, то фото станет менее контрастным. Чем больше степень изгиба, тем меньше контраст.

Чтобы воздействовать на картинку в областях с определенной яркостью, с помощью опорных точек зафиксируйте кривую на участке, который не нужно менять.

Полноконтрастность фотографии. Открывая график с кривой на некоторых изображениях, видно, что пиксели занимают не всю ось X: крайние правый и левый участки графика остаются пустыми. Это значит, что фотография не полноконтрастная: недостаточно насыщенная, блеклая. Чтобы это исправить, приведите ее к полноконтрастному виду. Для этого:

  1. Найдите самую черную точку на картинке. Зажмите Alt и двигайте левый ползунок вдоль оси X вправо, пока не появится самый темный участок. Затем возьмите пипетку для установки точки черного и кликните по этому участку.
  2. Также найдите самую белую точку, только теперь передвигая правый ползунок влево. Выберите пипетку для установки точки белого и кликните на самую светлую область.

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

Чтобы сравнить изменения, переключайтесь между было/стало с помощью иконки глазика внизу. А если изменения не понравились, то с помощью стрелочки, что слева от иконки с глазиком, сбросьте все изменения на кривой.

Цветовой тон и насыщенность

Выбрав «Цветовой тон/Насыщенность», в окне вы увидите три шкалы: «Цветовой тон», «Насыщенность» и «Яркость». Изменения, вызванные в цветах перемещением ползунков на любой из шкал, будут отображаться на самой нижней полоске (1). Полоса над ней показывает изначальные цвета для сравнения.

«Цветовой тон» (2) позволяет смещать цвета по цветовому кругу. С помощью него можно перекрасить любой одноцветный участок на снимке.

Ползунок насыщенности (3) изменяет фото от черно-белого до кислотно-цветного.

Регулировка яркости (4) позволяет затемнять и осветлять фотографию.

В поле вверху, где по умолчанию стоит «Все» (5), можно выбрать, какой конкретно цвет на фотографии будут менять три шкалы ниже. Оттенки этого цвета можно корректировать с помощью пипеток (6) и ползунков, появляющихся на полоске снизу.

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

Сочность

Чтобы увеличить насыщенность цветов, используйте инструмент «Сочность».

Цветовой баланс

В свойствах этого инструмента – три регулятора (1). При смещении ползунка к определенному цвету изменяются тона на фотографии. Переместили в сторону желтого − картинка желтеет. К красному − краснеет. Причем в поле (2), которое над ползунками, можно выбирать, в каких тонах изменять цвета: в тенях, светах или средних тонах. Но цвет на тона накладывается очень неточно, захватывая почти весь спектр. Поэтому для коррекции этот инструмент не подойдет. Он понадобится для стилизации и тонировки, например, чтобы наложить какой-нибудь оттенок на фото.

Тени и свет

Этого инструмента нет в корректирующих слоях. Чтобы его выбрать, зайдите в пункт «Изображение» и в выпадающем меню «Коррекция» выберите вкладку «Тени / Света». С помощью этого инструмента отдельно затемняйте и осветляйте темные (1) и светлые (2) области. В настройках каждой из них существует три шкалы: «Эффект» (3), «Тон» (4) и «Радиус» (5). «Тон» отвечает за затемнение и осветление. «Радиус» − за растушевку света или тени. «Эффект» − за прозрачность эффекта, вызванного двумя предыдущими настройками.

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

Выделение

Сделать коллаж, удалить или переместить объект, наложить эффект на часть картинки… − без выделений в Photoshop не обойтись. Поэтому инструментов и способов выделения в нем много. Рассмотрим основные восемь из них.

Области

Инструмент «Области» выделяет с помощью фигур: овалов, прямоугольников, линий. Им удобно быстро выделять объекты на однородном фоне, геометрически простую фигуру или когда с предметом можно захватить немного фона.

Лассо

Есть три вида лассо: «Обычное», «Прямолинейное» и «Магнитное». «Обычным» очерчивайте произвольный участок, будто в руках карандаш или кисть. «Прямолинейным» выделяйте линиями: с помощью него можно обвести геометрическую фигуру любой формы. «Магнитным» выделяйте по границе любого предмета: при обведении выделение будет липнуть к его контуру. Им удобно обводить сложные объекты на однородном фоне. Если фон сложный, «Магнитное лассо» может неправильно распознать границы предмета, соответственно, неправильно выделить.

Волшебная палочка

«Волшебная палочка» обводит области похожего цвета. Для этого инструмента важно, чтобы выделяемый объект сильно отличался от фона по цвету. Допустимое отклонение цвета настройте в опциях этого инструмента в поле «Допуск»: чем больше в нем цифра, тем более неоднородную область выделит программа.

Быстрое выделение

«Быстрое выделение» работает по тому же принципу, что и «Волшебная палочка». Отличие в том, что область выделения можно регулировать. Меняя назначение курсора, создавайте выделение или убирайте, если захватили лишнее и нужно скорректировать область. Меняя величину курсора, регулируете, насколько большая площадь будет выделяться вокруг него.

Выделение цвета

Инструмент «Цветовой диапазон» находится в пункте «Выделения» в меню. Он позволяет выделить участки на фотографии по цвету. Для этого с помощью курсора выберите нужный цвет. Пипеткой с плюсом дополнительно добавляйте оттенки, с минусом − удаляйте. Чтобы увеличить или уменьшить разброс допустимых цветов для выделения, переставляйте ползунок на шкале «Разброс». Также можно выделять цвета не на всей фотографии, а лишь в диапазоне. Для этого поставьте галочку напротив «Локализованные наборы цветов» и отрегулируйте площадь выделения на шкале «Диапазон». Таким способом можно выделять сложные объекты типа травы или деревьев, которые сильно отличаются по оттенкам и разбросаны по картинке.

Перо

«Перо» (P) − это не прямой инструмент выделения. С помощью пера создайте «Фигуру» или «Контур» (выбирается в опциях инструмента), а после – выделите.

«Перо» − лучший инструмент выделения по двум причинам. Первая: после построения области ее можно как угодно изменять с помощью опорных точек на контуре, которые добавляются кликом по нему. Вторая причина в том, что границы области, выделенной «Пером», плавные и не имеют рваных краев.

Есть три вида пера: «Обычное», «Свободное» и «Перо кривизны». «Обычное» обводит прямыми линиями. «Свободное» очерчивает область как карандаш. «Перо кривизны» скругляет все узлы, делая их плавными. Чтобы переключиться между ними, кликните правой кнопкой мыши по иконке «Пера» и выберите нужный вид.

Также у инструмента есть три функции: «Добавить опорную точку», «Удалить опорную точку» и «Угол». Находятся они также в выпадающем меню «Пера». Первые две добавляют и удаляют опорные точки. Третья делает из всех закругленных узлов углы: если с помощью четырех точек очертить пером круг, то «Углом» можно сделать из него квадрат.

Также на опорные точки можно воздействовать инструментом «Выделение узла». По клику на точку появляется что-то вроде усиков или рычажков. Они позволяют более гибко изменять фигуру.

Быстрая маска

«Быстрая маска» дает возможность тонко редактировать границы и прозрачность выделения с помощью кисти. Для ее наложения нажмите на значок в самом низу панели инструментов. С помощью «Быстрой маски» можно создавать выделение с нуля либо работать с уже выделенной областью. В этом режиме черная кисть добавляет участок к выделению, белая − удаляет. Для создания разной прозрачности выделений используйте разные оттенки серого: чем светлей − тем прозрачнее. Чем меньше прозрачность выделения, тем слабее будет проявляться эффект, наложенный на изображение. Это пригодится для цветокоррекции, например, когда некоторые участки нужно затемнить меньше, чем остальные.

Что делать с выделенными областями

Трансформировать. Нажмите «Трансформировать выделенную область» в пункте «Выделение» или в контекстном меню выделенной области. Кликните правой кнопкой мыши по выделению и выберите нужный режим. Например, с помощью «Искажения» можно сделать тень. Для этого выделите объект, который будет ее отбрасывать, «положите» выделение на поверхность и затемните.

Менять режимы наложения. В опциях большинства инструментов выделения можно выбрать один из четырех режимов наложения. Первый режим: создавая новое выделение, старое исчезает. Второй (Shift): выделения накладываются друг на друга. Третий (Alt или Option): выделение перекрывает предыдущее. Четвертый (Shift + Alt или Shift + Option): при наложении одного на другое, остается выделенной только область их пересечения.

Модифицировать. Можно растушевать границы, увеличить или уменьшить площадь выделения на заданные пиксели. Для этого перейдите в раздел «Модификация» в пункте меню «Выделение».

Выделить смежные пиксели. Добавьте к существующему выделению участки, окрашенные примерно в тот же цвет. Сделать это можно с помощью команды «Смежные пикселы» в пункте «Выделение».

Сделать инверсию. Кликните на выделение правой кнопкой мыши, затем в контекстном меню выберите «Инверсия выделенной области». Все, что было не выделено, выделится вместо изначальной области.

Переместить. Выделите область и нажмите «Ctrl + T» (на Mac «Cmd + T») или «Трансформировать выделенную область» в контекстном меню. Теперь участок можно двигать и изменять его размер.

Скопировать или вырезать. Выделите область и нажмите «Ctrl + C» (на Мас «Cmd + C») или «Ctrl + X» (на Мас «Cmd+ X»), чтобы скопировать или вырезать. А затем − «Ctrl + V» (на Мас «Cmd + V»), чтобы вставить участок на новый слой.

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

Обвести. В контекстном меню слоя выберите «Выполнить обводку», чтобы обвести выделение. В открывшемся окне можно выбрать цвет, расположение обводки, а также прозрачность и режим наложения.

Текст

Как написать

Вызовите инструмент «Текст» (T), кликните левой мышью по изображению или выделите участок и начните писать. Когда закончите редактировать, нажмите Enter, чтобы сохранить результат или ESC, чтобы отменить. Измените написанное, кликнув левой кнопкой мыши по тексту, или переместите (при этом в руках должен быть инструмент «Текст»).

Как настроить

Настройте типографику в окнах «Абзац», «Символ» и «Глифы». Если их нет на правой панели, вызовите в пункте «Окно».

Символы. В окне «Символ» выберите шрифт (1) и его начертание (2). Настройте размер шрифта (3), межбуквенное (4) и межстрочное расстояние (5). Выберите цвет (7). В декоративных целях шрифт можно растянуть по ширине или высоте (6) − этой функцией пользуйтесь с осторожностью, сохраняйте читаемость. В настройках ниже (8) можно изменить регистр, подчеркнуть или зачеркнуть текст.

Абзацы. В окне абзац регулируются настройки, связанные с абзацем: выравнивание (1), отступы (2) и переносы (3).

Глифы. В окне «Глифы» находятся спецсимволы, знаки пунктуации и смайлики.

Сохранение настроек. Если планируете тиражировать текст с одинаковыми настройками, сохраните их — не настраивайте каждый раз по новой. В окне «Стили абзацев» сохраните настройки, связанные с абзацами, нажав «Создать новый стиль абзаца». В «Стилях символов» − с помощью команды «Создать новый стиль символов». Чтобы применить сохраненный стиль к тексту, выделите текст и укажите нужный стиль в тех же окнах.

Действия с текстом

С текстовым слоем можно проделывать все то же, что и с обычным (подробнее в разделе «Слои») плюс еще несколько действий.

Деформировать. Выберите «Деформировать» в контекстном меню текстового слоя. В открывшемся окне выберите вид деформации (дугой, волной, надутый, закрученный) и настройки (степень деформации, создать искажение по горизонтали или вертикали).

Написать по контуру или вписать в фигуру. Создайте фигуру любой формы (подробнее в разделе «Фигуры»). Чтобы вписать текст в фигуру, выберите инструмент «Текст» и кликните по ее области. Чтобы писать по контуру фигуры, нажмите на ее границу.

Как выбрать и использовать шрифт: 10 советов

Цвета и градиенты

В этом разделе поговорим о том, где брать цвета, как выбрать оттенок, сохранять свои образцы, накладывать и настраивать градиент.

Основной и фоновый цвета

В Photoshop есть основной и фоновый цвет (1). Находятся они на панели инструментов. Основной цвет нужен для рисования, заливки, обводки, стирания слоя в режиме маски. Фоновый − для заполнения стираемых областей, восстановления слоя в режиме маски и обводки фигуры.

По умолчанию в качестве основного и фонового цветов используются черный и белый. Чтобы к ним вернуться, кликните по их иконке (7).

Как выбрать цвет

Скопировать с изображения. Выберите инструмент «Пипетка» (5) и кликните на тот цвет, который хотите выбрать. В опциях инструмента, в поле «Размер образца», изначально выбран пункт «Точка». Применив «Пипетку», вы скопируете цвет пикселя, на который попали курсором. Этот цвет может сильно отличаться от того, который вы видите. Поэтому поменяйте настройку в поле «Размер образца» на «Среднее 5 x 5». Пипетка будет копировать средний цвет области, состоящей из 25 пикселей.

В палитре. Два раза щелкните по иконке с основным или фоновым цветом для вызова палитры цветов. Чтобы добиться нужного оттенка, в открывшемся окне перемещайте курсор на поле (2) и отрегулируйте ползунок на шкале справа.

С помощью кода цвета. Если известно точное значение цвета, введите его в соответствующее поле (3).

Найти код нужного оттенка можно на сайте color.adobe.com. Найдите цвет по ключевым словам. Допустим, если вам нужен цвет, чтобы нарисовать огонь, введите fire в строку поиска. Найдя нужный, нажмите «Редактировать копию» и скопируйте число из поля HEX.

Из библиотеки цветов (4). Здесь цвета из цветового круга разложены на шкале. Кликните на ее участок и выберите нужный оттенок с помощью цветовых образцов слева.

Из образцов. Откройте окно «Образцы» (6) и выберите один из предложенных вариантов или последних используемых − они отображаются на самой верхней полоске. Сохраняйте сюда свои цвета или загружайте, скачанные с color.adobe.com.

Как наложить градиент

Градиент можно создать двумя способами. Первый: выберите инструмент «Градиент» (1), зажмите левую кнопку мыши и потяните ее в нужном направлении. После наложения эффекта на слой отредактировать его будет нельзя − только накладывать новый или отменять действие.

Второй способ: нажмите на нужный слой правой кнопкой мыши, выберите «Параметры наложения» и перейдите во вкладку «Наложение градиента» (2). Градиент, наложенный таким способом, будет отображаться как эффект в окне «Слои». Его можно скрыть, в любой момент отредактировать или наложить еще один поверх. Поэтому пользуйтесь этим вариантом.

В настройках выберите режим (3), стиль (6) (расположение цветов в градиенте относительно друг друга) и угол (7) наложения градиента. Отрегулируйте непрозрачность (4) и масштаб (8). Кстати, чем больше масштаб, тем больше рассеяна граница цветов. Кликните на поле «Градиент» (5) и в открывшемся окне настройте цвета, их соотношение и прозрачность.

Выберите один из готовых (9) или создайте свой с помощью шкалы (10). На ней нижние ползунки (11) отвечают за цвет и его долю в градиенте. Верхние (12) − за непрозрачность. Для добавления нового ползунка кликните на границу шкалы или перенесите ползунок за границу, чтобы удалить.

Кисти

Выберите нужный цвет (подробнее — в разделе «Цвета и градиенты»), инструмент «Кисть» (1), и можно рисовать. Читайте дальше, и узнаете, как менять форму кисти, ее размер, прозрачность, границы мазка и другие настройки.

Настройки

«Кисть» настраивается с помощью двух органов управления: в опциях инструмента (та панель, что ниже основного меню) и в окне «Настройки кисти».

Настройки. В окне «Настройки кисти» настраивайте форму (8) и размер (10) (размер удобнее регулировать клавишами «[»− уменьшить, «]» − увеличить), жесткость мазка (11) и интервалы между отпечатками кисти (13). Меняйте угол наклона мазка (12). Выбирайте эффекты (9): изменение формы отпечатков, их наклона и границ, наложение шума и текстур на мазок. При этом смотрите, как будет меняться кисть в окне, предназначенном для демонстрации мазка (14).

Опции. Половина настроек в «Опциях» дублируется из «Настроек кисти».

Набор кистей. За иконкой с формой кисти (2) скрываются уже знакомые нам настройки. Интересен в этом окне только большой набор кистей.

Режимы наложения. Такие же, как и у обычного слоя.

Непрозрачность (3). Делает мазок более или менее прозрачным.

Нажатие (4). То же, что и «Непрозрачность». Отличие будет заметно, если снизить показатель нажатия и провести кистью несколько раз в одном и том же месте. Этот участок с каждым мазком будет закрашиваться все сильнее. А при сниженной непрозрачности мазки не будут накладываться друг на друга.

Сглаживание (5). Показатель влияет на плавность линий. На минимуме линия получится такой, какой вы ее нарисуете. На максимуме все изгибы будут плавными.

Симметрия. Чтобы включить функцию симметрии, нужно нажать на значок бабочки на панели «Параметры». Там вы сможете выбрать один из доступных типов симметрии: вертикальная, горизонтальная, двухосевая, диагональная, волнистая, круговая, спиральная, параллельные линии, радиальная или мандала.

Создание своей кисти

Создайте свою форму кисти. Для этого откройте изображение, которое хотите сделать кистью, перейдите в пункт «Редактирование» и нажмите «Определить кисть»: вся картинка запомнится как кисть. Если нужно запомнить определенный участок, перед тем как нажать «Определить кисть», выделите его любым инструментом. После сохранения новая кисть появится в наборах.

Фигуры

Создание

Выберите любую фигуру и растяните ее как угодно мышкой. Чтобы создавать равносторонние фигуры и ровные линии, растягивайте с зажатой клавишей Shift: из овала получится круг, из прямоугольника – квадрат.

В наборе есть шесть фигур: «Прямоугольник», «Прямоугольник со скругленными углами», «Эллипс», «Линия», «Многоугольник» и «Произвольная фигура». Если с первыми четырьмя все понятно, разберем две последние.

Многоугольник будет создаваться с количеством сторон по умолчанию или последним выбранным. Чтобы выбрать число сторон, нажмите левой кнопкой мыши по картинке и впишите цифру в соответствующее поле.

Инструмент «Произвольная фигура» предлагает на выбор шаблоны: стрелочки, галочки, сердечки, формы диалога и т. д. Чтобы выбрать их, вызовите окно с набором, щелкнув правой кнопкой мыши по изображению.

Деформация

Деформируйте фигуру. Для этого создайте любую, возьмите инструмент «Перо» или «Выделение узла» и изменяйте с помощью опорных точек. Принципы такие же, как и с трансформацией выделений (подробнее в разделе «Выделение»). С помощью «Пера» можно не только изменять, но и создавать фигуру с нуля. Для этого в его опциях в поле, где написано «Контур», выберите «Фигура». Так можно создавать области любой формы.

Настройки фигур

Настраивается фигура в опциях инструмента и в окне «Свойства». Выберите, каким цветом (1) или градиентом ее залить, какого цвета (2), толщины (3), типа (4) (прямая или пунктирная) будет обводка. В полях «ширина» и «высота» задайте размеры в пикселях (5). Выберите, как фигуры будут накладываться друг на друга (6). Выровняйте фигуру относительно фотографии (7). Переместите слой с фигурой на нужное место относительно других слоев (8).

Удаление и перемещение элементов

С помощью инструментов коррекции удаляйте с изображения объекты, людей, тексты или водяные знаки. Я выделил пять, на мой взгляд, наиболее удобных инструментов коррекции: «Штамп», «Восстанавливающая кисть», «Заплатка», «Перемещение с учетом содержимого» и «Волшебный ластик».

Штамп

«Штамп» (S) позволяет скопировать участок изображения и добавить его в другую область. Выберите инструмент, зажмите Alt (на Мас — Option) и обведите, какой участок следует скопировать. Опции «Штампа» похожи на опции «Кисти»: размер курсора, форма, жесткость, прозрачность, нажатие.

Восстанавливающие кисти

Восстанавливающих кистей существует два вида: «Обычная» и «Точечная». «Обычная» восстанавливает с учетом выбранной области. «Точечная» восстанавливает закрашенную область с учетом ее фона.

Заплатка

С помощью «Заплатки» или любого инструмента для выделения обведите определенный участок, затем замените его другой областью картинки.

Перемещение с учетом содержимого

Выделите нужный объект, перенесите в другое место и нажмите Enter. Область, откуда был вырезан этот объект, автоматически заполнится с учетом фона. Как и предыдущий инструмент «Перемещение с учетом содержимого» работает с любыми выделениями.

Волшебный ластик

Если нужно вырезать какой-то объект на однородном фоне, воспользуйтесь инструментом «Волшебный ластик».

Подготовка и сохранение файлов

Как сохранить

Чтобы сохранить файл, откройте пункт «Файл» в меню. Существуют три команды для сохранения: «Сохранить», «Сохранить как» и «Экспортировать».

«Сохранить» (Ctrl + S или для Мас Cmd + S). Картинка автоматически сохраняется вместо своей изначальной версии.

«Сохранить как…» (Ctrl + Shift + S или для Мас Cmd + Shift + S). Открывается окно, в котором можно выбрать формат файла, название и путь.

«Экспортировать как…» (Alt + Ctrl + Shift + W или для Мас Option + Cmd + Shift + W). Эта команда позволяет перед сохранением поменять формат, качество картинки, размер, название и путь.

Что следует проверить перед сохранением

Перед сохранением проверьте шесть параметров: размер, разрешение, глубину цвета, цветовую модель, цветовой профиль и формат файла.

Размер и разрешение. Поменяйте разрешение в пункте «Изображение», разделе «Размер изображения». Если сохраняете картинку для соцсетей, поставьте разрешение 72 пикселя на дюйм − некоторые соцсети не пропускают изображения с большим расширением. Для сайта выберите значение 120–150 − изображение с большим разрешением будет слишком тяжелым. Для печати − не менее 300 пикселей/дюйм, а размеры выставьте в мм или см.

Глубина цвета. В окне «Режим» выберите глубину цвета. Сохраняйте в системе 8 бит/канал, когда картинка готова для печати или интернета и не требует дальнейших изменений. Больше бит на канал − это неоправданно большой размер и невозможность сохранить в jpeg. Сохраняйте в 16-канальной системе исходники, если планируете дальше с ними работать.

Цветовая модель. В окне «Режим» выберите и цветовую модель. Для печати − CMYK. Если картинку будут смотреть с мониторов − RGB.

Цветовой профиль. Эта настройка влияет на цветопередачу изображения. Чтобы настроить цветовой профиль, в пункте «Редактирование» перейдите во вкладку «Настройки цветов». Чтобы цвета отображались примерно одинаково и правильно на большинстве мониторов, в поле настройки выберите «Универсальные настройки для Европы 3».

Формат файла. Сохраняйте в jpeg готовую картинку для интернета. Она совсем немного потеряет в качестве, зато будет гораздо легче, чем в png. В psd сохраняйте, чтобы в дальнейшем файл можно было открыть в программе и доработать − это формат Photoshop. В tiff − когда собираетесь отдавать в типографию: он нужен для высококачественной печати.

Про то, что форзацы — это интересно, а паттерны — полезно / Создание бесшовного паттерна в Photoshop


В этой статье я собрала базовую информацию о том, что такое паттерн, зачем он нужен книголюбам, и как сделать паттерн в Photoshop.

 

Паттерн — это бесшовный узор с повторяющимися элементами. То есть, паттерн состоит из шаблона, который будет повторяться бесконечное число раз.

Паттерны создают и для одежды, и для сайтов, и для интерьеров. Потому что паттерн — это удобно. Его можно прерывать и обрезать, а он всё равно будет смотреться отлично на чём угодно. 

 

Паттерны бывают разных стилей. Особенно популярны паттерны: 

1.    Геометрические. В основе лежит геометрическая фигура. Необязательно одна.

2.    Абстрактные. Такой паттерн не сообщает конкретной формы, он передаёт настроение. 

3.    Минималистичные. База такого паттерна — воздух. 


4.    С героями. В таком паттерне есть персонажи. Хорош для детского направления.


Как я уже писала выше, паттерны подходят для оформления почти чего угодно. Книги не исключение. 

Книги в твёрдом переплёте имеют форзац и нахзац. Эти элементы нужны для скрепления крышки (обложки) с книжным блоком (с листами напечатанного текста). А ещё они нужны для эстетики. Обычно на форзацах и нахзацах изображают узоры, схемы, карты, фотоколлажи. Их могут делать одинаковыми, а могут — различными. Всё зависит от дизайнерской задумки.


Кстати, у форзацев и нахзацев есть своя диковатая история в прошлом.

Раньше форзацы при помощи литографии украшали крошечными узорами повторяющихся геометрических фигур. Такие форзацы походили на рубашки игральных карт.
Со второй половины XIX века форзацы стали цветочными. Из-за пробудившегося в человечестве интереса к природе и науке, книги украшали растительными узорами, цветами, бутонами, травами, добавляли к этому буйству птичек и бабочек. 

И только ближе к концу XIX века оформители задумались о взаимосвязи внешнего вида книги и её содержания. Первой эти два качества объединила американская художница Сара Вайман Уитман. С 1884 года она рисовала иллюстрации и обложки к более чем 200 книгам. Уитман говорила о том, что крайне важно продумать дизайн книги так, чтобы он не добавлял к ценнику книжки, а придавал ей эстетики. 

И только ближе к концу XIX века оформители задумались о взаимосвязи внешнего вида книги и её содержания. Первой эти два качества объединила американская художница Сара Вайман Уитман. С 1884 года она рисовала иллюстрации и обложки к более чем 200 книгам. Уитман говорила о том, что крайне важно продумать дизайн книги так, чтобы он не добавлял к ценнику книжки, а придавал ей эстетики.

Пора вернуться к оформлению современных книг. 

При разработке форзаца и нахзаца стоит помнить принципы: 

1.    Форзац выражает особенность произведения.

2.    Форзац помогает настроить читателя. 

3.    Если книга с иллюстрациями и в яркой обложке, то форзац и нахзац обычно оформляются проще. 

4.    Форзац и нахзац разрабатываются после того, как определены иллюстрации и титульный лист. 

 

И угадайте кто замечательно смотрится на форзаце? Правильно. Паттерн. При хорошем дизайнерском вкусе, из повторяющихся элементов можно собрать идеальное приглашение к чтению. Главное помнить, что хороший паттерн — это когда:

1.    Много гармонирующих элементов. 

2.    Рисунок однороден. Он не прерывается. 

3.    Нет пестроты и тяжести. 

4.    Пустое пространство — это часть общего ритма, а не просто «дырка». 

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

 

Теперь переходим к матчасти. Сейчас расскажу-покажу, как я создаю паттерны в Photoshop. Внимание, всё ниже следующее будет иметь смысл только для тех, кто немного разбирается в графическом редакторе PS. 

И ещё одно внимание. То, что я опишу ниже не единственный способ. Вы можете подыскать ещё кучу вариантов создания паттернов.

  1. Создаём файл. Обязательно квадратный. Не жадничаем, ставим высокий dpi. Запомните размеры вашего холста. Это важно. У меня он 3000 пикселей. Разрешение 600 пикселей на дюйм.
  2. Копируем слой. 
  3. Слой копию красим в какой-нибудь цвет. Я окрасила в болотненький. Такого цвета будет форзац моей книги. Делаем мы это для того, чтобы определить рабочую зону.  
  4. Заходим в «Изображение» → «Размер холста» и добавляем нашему холсту по 1000 пикселей со всех сторон. То есть ширина и высота холста были 3000, меняем на 4000.
  5. Получаем цветной квадрат (рабочую область) в белом квадрате. 
  6. Теперь начинаем «забивать» нашу рабочую область элементами. Я свои элементы отрисовала заранее. Просто затаскиваю pngфайлы на окрашенный квадрат. Вы можете рисовать свои элементы прямо на этом этапе. Главное не забывайте рисовать каждый отдельный элемент на новом слое.
  7. А вот теперь внимание. Когда вы рисуете что-то в границах окрашенного квадрата, то за эти рисунки переживать не стоит. Они идеально сольются в бесшовный паттерн. Но нам же нужен красивый паттерн, правда? Сложный. А значит придётся некоторые элементы выводить за пределы окрашенного квадрата. 
  8. Когда какой-либо элемент выглянул за границы окрашенного квадрата, вы обязаны скопировать его на противоположную сторону. В фотошопе это делается так: создаём дубликат слоя (дубликат того элемента, который вам нужно скопировать).
  9. Заходим в «Фильтр» → «Другое» → «Сдвиг», смотрим на красивое окошко. В этом окошке проверяем галочку «сделать прозрачным». «Сделать прозрачным» должно быть выделено. Иначе магии не будет. 
  10.  Ползунками «по горизонтали», «по вертикали» начинаем смещать копию. Вот сейчас вам пригодится информация об исходном размере вашего холста. Помните, мы создавали файл 3000 на 3000 пикселей? Отлично. Именно на 3000 пикселей мы будем сдвигать копируемые элементы. Логика тут простая: если вам нужно что-то сдвинуть с левой стороны на правую, то ставим «по горизонтали +3000», «по вертикали 0». Если двигаем с правой стороны на левую, то ставим «по горизонтали -3000», «по вертикали 0». 
  11.  А если двигаем копию снизу-вверх, то забиваем «по горизонтали 0», «по вертикали -3000». И «по горизонтали 0», «по вертикали +3000», если двигаем элемент сверху-вниз. 
  12.  Запомните принцип создания паттернов. Всё что выходит за пределы рабочей области, должно быть скопировано на противоположную сторону. 
  13.  Доводим шаблон паттерна до невозможной красоты. Я забивала квадрат ветками. Подсказка: если элементы не умещаются, или хочется добавить в них индивидуальности, можно воспользоваться «деформацией». Выбираем необходимый элемент (кликаем по его слою), затем идём в «Редактирование» → «Трансформирование» → «Деформация». И начинаем тянуть синие рамки, как душе угодно. 
  14.  Когда шаблон паттерна выглядит достаточно привлекательно, заходим в «Изображение» → «Размер холста» и возвращаем холсту изначальные 3000 пикселей по ширине и высоте. 
  15.  Фотошоп спросит, точно ли вы желаете подобного для своего творения? Жмите «Продолжить», мы ни о чём не жалеем. 
  16.  И вот шаблон паттерна готов. 
  17.  Сейчас будем делать из него узор. Заходим в «Редактирование» → «Определить узор». 
  18.  Даём любое имя узору. Жмём «Ок». 
  19.  И вот в фотошопе есть ваш собственный узор. Поздравляю! Теперь вы можете закрашивать им файлы любого размера. Создайте новый файл, затем нажмите на значок контраста слева внизу окна «слои». 
  20.  Выбирайте «узор». И наслаждайтесь. Можно менять масштаб паттерна и проверять, хорошо ли он смотрится в миниатюре. А нет ли на нём дыр?

 Ещё раз поздравляю, теперь вы умеете делать паттерны для своих книг.


Красивых и содержательных книг вам, коллеги.

Ещё разного и вкусного тут.

Создание бесшовной заливки Pattern для фонов

Если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством, связанным с 3D max или Photoshop, то вам периодически требуются качественные бесшовные текстуры и фоны. Найти нужную текстуру или фон в сети порой бывает очень не просто, поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.

Давайте самостоятельно создадим бесшовную текстуру (фон) в программе фотошоп. И так, главной особенностью бесшовной текстуры (фона) является отсутствие границ, т.е. взяв данную текстуру и соединяя ее с копией с любой стороны мы в итоге получим бесшовное изображение, без каких либо разделений и границ. В качестве примера посмотрите картинку ниже, где справа расположена текстурка камня, а слева несколько данных текстур соединены.

Подобное бесшовное изображение, будь то текстура или фон, можно достаточно легко сделать в программе Photoshop с помощью специального плагина. Сейчас мы все это в подробностях рассмотрим.

Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем “превращать” в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото. Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта и чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.

Возьмем, для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.

Данная картинка (фото) не является бесшовным и это легко проверить состыковав данное изображение с копией. По итогу мы видим, что стыки (швы) на общей картине видны.

Принцип создания бесшовного изображения заключается в отражении краев (стыков), что в результате дает идеальное соединение изображения, тем самым создавая вид единой поверхности, а не разных кусков изображения. Для легкого и быстрого “превращения” фото (изображений) в бесшовные текстуры существует специальный плагин для фотошопа, который автоматически выполняет указанные выше функции (отражение и подгонка швов изображения).

Данный плагин разработан для фотошопа, начиная с CS3 и заканчивая последней на сегодняшний день версией CC. Плагин является бесплатным и скачать его можно с нашего сайта:

Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:

Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным – это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент “Прямоугольная область” в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.

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

После того, как нужная область выделена, выбираете в верхнем меню “Изображение” – “Кадрировать” и ваша выделенная область будет вырезана и обращена в квадратное изображение.

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

В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив “Difine Pattern”, после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку “Tile” или “Mirror”. Если вы выберите способ “Tile”, то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ “Mirror”, то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.

Мы выбрали способ “Tile” и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:

Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали, но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.

Для этого правой кнопкой мыши кликаем по папке “tile pattern” и выбираем в появившемся меню “Преобразовать в смарт-объект”. После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).

Выделяем наш слой с бесшовным фоном, кликнув в панели слоев по нему левой кнопкой мыши и в нижнем меню, под панелькой слоев кликаем на значок коррекции и в появившемся меню выбираем “Цветовой тон/насыщенность”. После этого над нашим слоем с текстурой появится новый корректирующий слой и откроется окошко с настройками цветового тона и насыщенности. В данном окошке вы уже на свое усмотрение регулируете “ползунки” настроек цвета и тона, после чего применяете данные настройки.

Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем “Файл” – “Экспортировать” – “Сохранить для web” и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку “Сохранить”.

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

Отличный урок от Designshack в котором очень просто можно самому сделать в фотошопе бесшовную текстуру для заливки фона. Сначала мы создадим новую кисть с эффектом боке, потом в новом документе создадим сам узор, а потом воспользуемся замечательным фильтром, который, собственно и создает бесшовный паттерн. И уже напоследок вручную подчистим рисунок.

Шаг 1.
Создаем в фотошопе новый документ размером 800х800 пикс.

Заливаем его цветом #80ac4b.

Шаг 2.
В новом документе создадим кисть с эффектом боке. Для этого выбираем большую жесткую кисть черного цвета. Создаем новый слой и щелкаем ей в центре документа. Задаем стилем слоя небольшое внешнее свечение тоже черного цвета. Потом отключаем задний фон и идем в меню «Редактирование» (Edit) > «Определить кисть» (Define Brush) и сохраняем нашу кисть.

Возвращаемся в наш основной документ. Нажимаем F5 и в настройках кисти устанавливаем следующие параметры: «Динамика формы» (Shape dynamics) > «Колебание размера» (Size Jitter) — 18%, «Рассеиваие» (Scatter) > «Рассеивание» (Scatter) — 789%, «Другая динамика» (Other dynamics) > «Колебание непрозрачности» (Opacity Jitter) — 100%.

Шаг 3.
Теперь выбираем инструмент «Кисть» (Brush) и белым цветом, аккуратными штрихами добавляем круги на зеленый фон. Должно получиться приблизительно так.

Шаг 4.
Теперь главное действие. В меню выбираем «Фильтр» (Filter) > «Другие» (Other) > «Сдвиг» (Offset). Выбираем значения, как на рисунке ниже.

Шаг 5.
На этом шаге выбираем жесткую кисть цвета фона #80ac4b и вручную аккуратно закрашиваем недоделанные круги. Должны остаться только целые круги. Смотрим рисунок ниже.

Шаг 6.
Теперь опять выбираем созданную нами кисть, настраиваем ее как в Шаге 2 (Динамика формы, Колебание размера и Рассеивание) и короткими, аккуратными штрихами добавляем кругов в центр документа. Следим за тем, чтобы круги не попадали на края квадрата, а добавлялись только в центре.

Шаг 7.
Наш бесшовный паттерн готов. Теперь можно уменьшить его до приемлемых размеров и в меню «Редактирование» (Edit) > «Определить узор» (Define Pattern) можно добавить новый узор и использовать его для заливки фона.

Баннер, билборд или что-либо еще, фон используется везде. Фон — это не только обои, но еще и красочная основа для развития других дизайнов. Фон бывает в различных стилях и цветах, а также используется дизайнерами повсеместно. Существует несколько типов фоновых узоров, например, точечные, клетчатые, полосатые и т.д.

Сегодня существует множество сервисов и инструментов для графического дизайна, которые в значительной степени могут упрощать жизнь дизайнерам. Есть много онлайн генераторов цветовой палитры , шрифтов, иконок и прочих инструментов, полезных для дизайнеров работающих над различными проектами. Аналогично существуют и инструменты для создания фоновых узоров и текстур , которые могут пригодиться каждому дизайнеру. Эти веб-приложения довольно просты в использовании и подойдут даже новичкам. Итак, приготовьтесь к этому замечательному списку 15 сервисов для создания цельных фоновых узоров и текстур.

Stripe Generator
Stripe Generator представляет собой веб-инструмент для создания цельного полосатого узора . Инструмент предлагает множество функций для создания пользовательских полосатых узоров на плитки, используя различные размеры, цвета и ориентации. Сервис позволяет использовать до 5 цветов, а также настраивать фона, стиль фона, отступы и тени. Полосатые плитки легко редактируются, к тому же можно проверить обширную коллекцию дизайнов, созданную другими участниками.
BG Patterns
BG Patterns представляет собой современный инструмент для создания красочных узоров , используя различные встроенные фигуры или пользовательские . Инструмент предлагает для различных тем, такие как цветы, вечеринки, животные и геометрические фигуры. Вы можете выбрать множество цветов для фона и фигур. Он также подразумевает вращение и масштабирование пользовательских изображений, настройку перекрытия для использования нескольких фигур. BG Patterns позволяет использовать картинки с разрешением, выше чем 300 × 300 точек в формате PNG и SVG.

Noise Texture Generator
Noise Texture Generator позволяет создать простую текстуру фона с использованием различных цветов и оттенков. Сервис позволяет устанавливать размеры текстуры, а также непрозрачность и плотность. Есть предпросмотр плитки и возможность загрузить её мгновенно.

Repper Patterns
Repper Patterns является мощным инструментом создания узоров для работ по вебу, печати и графике. Сервис позволяет создавать узоры с пользовательских картинок , которые могут быть использованы для книжных обложек, кружек, газет, флаеров и для работ с веб-дизайном, таких как баннеры, логотипы, фоны для сайтов. Repper Patterns полезен для новичков, поскольку он предлагает 14 встроенных уникальных и красивых стилей.

Colour Lovers
Colour Lovers — современное приложение, которое позволяет создавать различные узоры , используя пользовательские палитры, изображения и встроенные стили. Сервис также предлагает Seamless Lite — инструмент на Flash для дизайна новых узоров, используя различные настройки для создания и редактирования, например, добавление фигур и текста, поворот и трансформирование фигур и многое другое.

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

Texture Generator
Texture Generator является инструментом для быстрой генерации текстур , используя различные цветовые оттенки и встроенные стили текстур. Инструмент позволяет использовать различные стили текстур, вроде земли, облаков, дерева и клеточек. В нем вы можете редактировать стили текстур, используя настройки, генерировать картинки в формате JPG и PNG.

Trianglify Generator
Бесплатныйгенератор low poly фонов . Есть возможность настройки цвета и градиентов . После настройки можно скачать изображение в векторном формате SVG или растровый вариант в формате PNG.

Trianglify Background Generator
Еще один low poly генератор фонов , но в отличие от предыдущего, этот имеет другую текстуру и более интересные вариации переходов цветов.

Background Image Generator
Отличный сервис для генерации фонов для сайта . Имеет множество вариантов текстур, которые раскрашиваются в нужный нам цвет.

Plaid Maker
Plaid Maker – современный сервис для генерирования клетчатых узоров в различном стиле. Вы можете выбрать комбинацию цветов для создания узора или просто отредактировать встроенный узор. Клетчатые узоры могут быть использованы в блоге , для фона веб-сайта, либо как фон приложения для или Android.

На беоне заметно распространены так называемые бесшовные дизайны.
В интернете можно найти множество бесшовных фонов, а вот как сделать бесшовный фон из собственной картинки?
Это я предложу Вам сделать первым уроком.

1. открываем изображение в фотошопе. Пусть оно называется слой 1
Я выбрала вот это:


2. Нажимаем J+ctrl (создаем дубликат слоя). называем его слой 2
3. Идем: фильтр-другие-сдвиг.
Ставим свои настройки.
Для каждого изображения настройки индивидуальны, для своего я выбрала такие:


4. Находясь на слое два идем: фильтр-размытие-размытие по Гауссу.
Я поставила такие настройки:


5. Далее берем ластик (большой, ок. 300 пикс). Стираем немного по бокам слоя 2
Примерно так:

— .
6. Создаем копию слоя 1(слой 3). Перетаскиваем его так, чтобы он находился над слоем 2. Идем: редактирование-свободное трансформирование. Немного уменьшаем слой 3:

— .
7. Ластиком немного подтираем края слоя 3, что они слились с фоном.
Можно дублировать слой и добавить немного размытия в движении.
Итог:

II способ.

Бесшовный фон можно сделать также при помощи фильтра: mehdi.
С ним все значительнее проще.
Если появятся желающие, дам ссылку на скачивание этого фильтра.
Для создание бесшовного фона я выбрала вот это изображение:


Открываем фильтр. Выглядит он так:


Я поставила такие настройки.
Итог:


На этом все.
Буду рада увидеть ваши работы.

скачать фильтр здесь.

Все это я покажу вам на примере фотографии джинсов.

Выбираем инструмент создания прямоугольной области выделения Rectangular Marquee Tool , зажимаем Shift и создаем квадратную область выделения как на рисунке:

Нажимаем Ctrl+C , чтобы скопировать часть изображения. Затем создайте новый документ File > New… При этом, если вы скопировали часть изображения, программа автоматически подставит размеры этого фрагмента для нового документа.

Вставьте скопированное изображение, нажав Ctrl+V .

Итак, это заготовка для создания паттерна. Если мы создадим его сейчас, то при заливке изображения большего размера, чем 331х331px, будут видны швы (места стыковки). Для тех, кто не понял, показываю на примере.

Обратите внимание на выделенные фрагменты. Такие швы возникают из-за того, что при заливке паттерны стыкуются друг с другом, начиная с левого верхнего угла, правый край к левому и низ к верху. А далеко не все края изображений совмещаются стык-в-стык. Решить это проблему поможет фильтр Filter > Other > Offset…

Как можно догадаться, первый параметр указывает на какое количество пикселей сместить изображение по горизонтали. Второй – по вертикале. Сместите изображение так, чтобы стыки получились ближе к центру изображения, здесь проще с ними работать. После этого, используя наборы инструментов из вкладки Healing или Stamp , уберите швы.

Я использовал инструмент Spot Healing Brush Tool . Просто выбрал его и провел два раза по швам: вверх и вниз. Вот, что получилось:

Теперь создадим Pattern . Для этого перейдите Edit > Devine Pattern… и укажите название паттерна.

Все! Теперь давайте проверим, что у нас получилось. Создайте новый документ любого размера. Выберите инструмент заливки Paint Bucket Tool , в настройках укажите, что заливать будем паттерном, а не цветом, и выберите ваш, только что созданный, паттерн.

Заливаем изображение и получаем

Как сделать заливку случайным узором в Photoshop — Medialoot

Шаблоны Photoshop

Шаблоны — один из самых важных ресурсов, которые может использовать дизайнер. Конечно, есть множество способов сделать их, как в Illustrator, так и в Photoshop. Хотя их создание в Photoshop занимает немного больше времени, чем в Illustrator, иногда по какой-либо причине (особые требования к программному обеспечению или просьба вашего клиента) у нас нет другого выбора, кроме как сделать их в Photoshop. К счастью, вместо более сложного процесса создания узора в Photoshop есть простой способ сделать их менее чем за 5 минут, используя некоторые параметры заливки Photoshop, которые могут помочь вам заполнить фон узором, случайно созданным из любого изображение, которое вы хотите.​

Шаг 1

Откройте изображение, которое вы хотите сделать шаблоном в Photoshop, в этом случае я буду использовать изображение .png с прозрачным фоном. Убедитесь, что ваше изображение имеет прозрачный фон, в противном случае очистите изображение, прежде чем продолжить.

Шаг 2

Чтобы дать нам больше места для тестирования нашего шаблона, перейдите в Изображение > Размер холста. Установите ширину и высоту от 150% до 200% и нажмите OK.

Шаг 3

Выберите инструмент Rectangular Marquee Tool (M) и нарисуйте выделение вокруг изображения.

Шаг 4

При активном выборе перейдите в «Правка» > «Определить шаблон». Дайте новому шаблону имя и нажмите OK.

Шаг 5

Нажмите Ctrl+D, чтобы снять выделение с изображения и скрыть текущий слой на панели слоев.

Шаг 6

Выберите «Слой» > «Создать» > «Слой». Назовите этот слой как Pattern 1 и нажмите OK.

Шаг 7

Выберите Правка > Заполнить. В разделе «Содержание» выберите «Шаблон».

Шаг 8

Щелкните миниатюру пользовательского шаблона и выберите недавно созданный шаблон.

Шаг 9

Установите флажок «Сценарий», выберите «Случайная заливка» и нажмите «ОК».

Шаг 10

В окне «Случайная заливка» примените следующие настройки и нажмите «ОК».

Шаг 11

Выберите «Слой» > «Создать» > «Слой». Назовите этот слой как Pattern 2 и нажмите OK.

Шаг 12

Снова выберите Правка > Заливка. В разделе «Содержание» выберите «Шаблон», убедитесь, что выбран ваш шаблон, опция «Сценарий» включена с опцией «Случайная заливка» и нажмите «ОК».

Шаг 13

В окне «Случайная заливка» примените следующие настройки и нажмите «ОК».

Шаг 14

Повторите эти 3 последних шага столько раз, сколько хотите, и изменяйте настройки по своему усмотрению.

Шаг 15

Когда вы закончите, просто чтобы придать узору приятный вид, выберите верхний слой и перейдите в Layer > Layer Style > Drop Shadow. Примените следующие настройки и нажмите OK.

Блог Джулианны Кост | Как создать бесшовный узор (плитку) в Photoshop

Чтобы создать бесшовный узор в Photoshop, откройте нужное изображение и выберите «Фильтр» > «Другое» > «Смещение».

Исходное изображение.

Увеличьте значения, чтобы вы могли легко видеть смещение, а для неопределенной области выберите «Обтекание».

Если вы видите, что значения тона резко меняются, выберите «Правка» > «Отменить» (чтобы отменить фильтр смещения) и внесите необходимые корректировки, чтобы выровнять освещение по всему изображению.

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

Это гораздо лучшая отправная точка, потому что освещение более равномерное по всему изображению.(Коррекция выполнена с помощью градуированного фильтра и корректирующей кисти в Camera Raw.)

После применения офсетного фильтра к равномерно освещенному изображению швы стали гораздо менее заметны.

Используйте инструменты «Восстанавливающая кисть» или «Штамп» для удаления любых заметных швов. Будьте осторожны рядом с границами изображения (если вы измените области границ, это может привести к тому, что плитка не будет бесшовной).
Чтобы убедиться, что узор будет бесшовным, снова запустите фильтр — на этот раз вы не должны видеть никаких швов.Если вы это сделаете, используйте Восстанавливающую кисть, чтобы удалить их, и снова запустите фильтр.

Когда файл станет бесшовным, выберите «Выбрать» > «Выбрать все», а затем «Правка» > «Определить шаблон». Дайте шаблону заметное имя и нажмите OK. Этот узор теперь будет доступен при использовании «Правка» > «Заливка», «Стили слоя», «Слои заливки узором», «Штамп узора», «Восстанавливающая кисть», «Инструменты формы» (как для «Заливки», так и для «Обводки») и при создании кистей (с использованием атрибута «Текстура»).
Примечание. Поскольку легче создать бесшовный узор, когда исходное изображение равномерно освещено, я обнаружил, что сканирование текстур (например, бумаги) дает очень хорошие результаты.Кроме того, старайтесь избегать в текстуре очевидных элементов, которые легко заметить при повторении узора.



Как применять наложения узоров с помощью стилей слоя Photoshop

Всегда хотел использовать эффект стиля слоя Pattern Overlay в Photoshop, но никогда не знал, с чего и как начать?

Начиная с того, для чего используется наложение узора и заканчивая тем, как добавить наложение узора в Photoshop, этот учебник охватывает все концепции, которые вам необходимо знать, чтобы начать работу.

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

Следите за новостями на нашем канале Envato Tuts+ YouTube:


Использование для наложения шаблона

Pattern Overlay используется, как следует из названия, для добавления узора к определенному слою.Использование Pattern Overlay в сочетании с другими эффектами может помочь вам создать стили с глубиной.


Диалоговое окно «Наложение шаблона стилей слоя»

Pattern Overlay не имеет большого количества опций, но это потому, что это скорее эффект «вкл / выкл», в отличие от некоторых других, которыми можно манипулировать, чтобы радикально изменить их внешний вид.


Режим наложения

Режим наложения позволяет вам установить режим наложения для вашего наложения узора .Значение по умолчанию — Обычный , которое просто отображает узор на вашем слое. Если вы не знакомы с тем, как работают все различные режимы наложения , я настоятельно рекомендую ознакомиться с учебным пособием Blending Is Fun Basix.

В следующем примере вы можете увидеть, как изменение режима наложения с Нормальный на Линейный затемненный превращает наш полосатый узор из сплошного белого и красного в прозрачный и темно-красный.


Непрозрачность

Ползунок Opacity управляет прозрачностью нашего узора.Меньшее число здесь делает ваш Pattern Overlay более прозрачным, а большее число — более непрозрачным.

В следующем примере вы можете видеть, что более низкая Непрозрачность делает наш узор слегка прозрачным, а черный цвет текста просвечивает.


Образец

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

Чтобы создать собственный узор, просто откройте изображение в Photoshop, нажмите Control-A , чтобы выделить весь холст, и нажмите Правка > Определить узор .Затем вы найдете его в списке шаблонов в диалоговом окне Pattern Overlay .

Небольшой значок рядом с образцом узора создаст новую предустановку с использованием текущего выбранного узора.

Кроме того, кнопка Snap to Origin позволит вам выровнять шаблон со слоем, к которому он применяется.

Вы также можете щелкнуть и перетащить в документе, когда диалоговое окно Наложение узора открыто, чтобы вручную разместить свой узор.

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


Шкала

Вы можете изменить размер рисунка, увеличивая или уменьшая ползунок Масштаб . Photoshop не очень хорошо справляется с передискретизацией шаблонов в диалоговом окне Стили слоя , поэтому обычно лучше использовать числа, такие как 10% , 25% , 50% и т. д.

Установка флажка Link with Layer привязывает шаблон к слою, поэтому, если вы переместите слой позже, шаблон будет следовать за ним.Если вы снимите этот флажок и переместите свой слой, узор не будет перемещаться.

В следующем примере уменьшение масштаба шаблона делает его более подробным, поскольку отображается большая часть шаблона. Эффект более заметен при использовании более подробных шаблонов.


Сохранение и загрузка настроек по умолчанию

Вы можете сохранить и загрузить настройки по умолчанию для каждого эффекта в диалоговом окне Layer Styles . Когда вы нажмете Make Default , Photoshop сохранит любые активные в данный момент настройки в качестве новых настроек по умолчанию для этого эффекта.

Когда вы нажмете Восстановить настройки по умолчанию , Photoshop загрузит последние сохраненные настройки. Это позволяет вам экспериментировать и просто перезагружать настройки по умолчанию, если вы хотите начать все сначала.

Расширение библиотеки стилей слоев

Хотите создать расширенную библиотеку стилей слоев Photoshop, но у вас нет времени на их создание самостоятельно? Что ж, если это так, то вам обязательно стоит отправиться на Envato Elements, где вы найдете отличный выбор, например:

.

Стили слоев в стиле ретро

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

Стили слоя Photoshop в стиле ретро от Envato Elements

Стили слоя ткани

Это еще один из моего списка фаворитов, так как он придает вашему тексту ощущение ручной работы, которое привлечет внимание и разум зрителя.

Стили слоя ткани для Photoshop от Envato Elements

Стили слоя 80-х

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

Стили слоев Photoshop 80-х от Envato Elements

Расширьте свои навыки Photoshop

Только начали использовать Adobe Photoshop и хотите узнать больше? Что ж, сегодня ваш счастливый день, так как я составил небольшой список руководств, которые должны продолжаться в течение следующих нескольких дней!

  • Adobe Photoshop CC (и более ранние версии) наполнен инструментами, панелями и эффектами, предназначенными для предоставления пользователям максимального контроля над их работой…

  • Стили слоев Photoshop — популярный способ добавления эффектов, таких как тени и штрихи, к слоям неразрушающим образом. При наличии необходимых знаний и…

  • Стили слоев Photoshop — популярный способ добавления эффектов, таких как тени и штрихи, к слоям неразрушающим образом. При наличии необходимых знаний и…

  • Узнайте, как создать эффект вышивки в Photoshop с помощью стежковых кистей и стилей слоя.Конечным результатом будет потрясающая текстура вышивки! Также найдите…

  • Этот очень простой и быстрый урок покажет вам, как использовать пару текстур и стилей слоя для создания блестящего, отражающего эффекта хромированного текста. Давайте…

  • Стили слоев Photoshop — популярный способ добавления эффектов, таких как тени и штрихи, к слоям неразрушающим образом. При наличии необходимых знаний и…

  • Узнайте, как легко создать текстовый эффект в стиле сериала «Очень странные дела», используя только стили слоя и несколько простых настроек.

  • Используйте текстуру, пару фильтров и несколько эффектов тени, чтобы создать очень простой и быстрый эффект стилизованного текста мелом

  • В этом уроке мы создадим текстовый эффект, вдохновленный диснеевскими фильмами «Холодное сердце». Основная идея состоит в том, чтобы показать вам, как создать текстуру льда…

  • В этом кратком уроке мы покажем вам, как создать эффект стеклянного текста, используя стили слоя в Photoshop. Давайте начнем!

Как обвести изображение в Photoshop — Брендан Уильямс Creative

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

Чтобы обвести изображение в Photoshop, дважды щелкните слой, чтобы открыть панель «Стили слоя». Выберите стиль «Обводка» и установите тип обводки «Снаружи». Отсюда просто измените цвет и ширину контура в соответствии с желаемым видом!

Видеоурок

Как обвести края изображения

Первый способ обвести изображение в Photoshop — обвести всю фотографию. Вместо фокусировки на определенном участке изображения этот эффект создаст рамку вокруг всего изображения.

Этот вариант является одним из самых простых способов, поскольку вам не нужно делать какие-либо выборки. Всего несколько кликов и регулировка хода сделают свое дело!

Вот как это сделать:

Дублируйте слой, вокруг которого вы хотите создать границу. Таким образом, у вас всегда будет резервный слой, если что-то пойдет не так. Используйте сочетание клавиш Command + J (Mac) или Control + J (ПК), чтобы дублировать слой.

Если у вас уже есть большая группа слоев, продублируйте и объедините их с помощью Command + Option + Shift + E (Mac) или Control + Alt + Shift + E (PC). Этот ярлык создаст новый объединенный слой, чтобы добавить в него контур.

Затем дважды щелкните дублированный слой, чтобы открыть панель стилей слоя.

Выберите «Ход».

Установите положение обводки на «внутри» и оставьте непрозрачность на уровне 100%.

Установите тип заливки «цвет» и выберите цвет, которым вы хотите обвести свою фотографию.

Когда все настроено, отрегулируйте размер штриха с помощью ползунка размера. Этот вариант полностью зависит от вас, и нет правильного или неправильного.

Результат

Всего за несколько кликов вы успешно обвели изображение в Photoshop с помощью параметра «Обводка». Этот инструмент — самый простой способ создать рамку вокруг изображения, поскольку он не создает дополнительных слоев.

Как обвести вырезанный рисунок

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

Этот метод требует некоторых базовых знаний инструментов выделения в Photoshop. Тем не менее, я поделюсь самым простым инструментом выделения для этой техники.

Вот как это сделать:

Возьмите инструмент выделения объектов, нажав W , или найдите его на панели инструментов.

Этот инструмент доступен только в Photoshop CC 2020 и более поздних версиях.Если вы используете более раннюю версию, вместо этого вы можете использовать инструмент быстрого выбора.

При активном инструменте выбора объекта установите режим на «прямоугольник» и отметьте «улучшить край» и «вычесть объект».

Чтобы сделать выделение, щелкните и растяните прямоугольное выделение вокруг объекта. Как только ваш объект помещается в эту рамку, отпустите, и Photoshop сделает ваш выбор вокруг объекта.

Если ваш объект находится на сплошном цветном фоне, вы можете вместо этого нажать «выбрать объект» , чтобы ускорить этот процесс.

При активном выделении вокруг объекта нажмите Command + J (Mac) или Control + J (ПК), чтобы дублировать выделение на новый слой.

Дважды щелкните новый слой, чтобы открыть панель стилей слоя.

Выберите «Ход».

Установите положение «снаружи» и оставьте непрозрачность на 100%.

Установите тип заливки на «цвет» и выберите цвет для границы выделения.

Наконец, установите размер обводки с помощью ползунка обводки.Это увеличит размер контура вокруг выреза.

Результат

Отделив объект от фона, вы можете использовать функцию обводки для относительно быстрого создания контура. Хотя в этом методе есть дополнительный шаг по созданию выделения, это все же простой способ добавить контур к изображению в Photoshop.

Как обвести изображение несколькими цветами

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

Вот как это сделать:

После того, как вы сделали начальную работу по созданию первого штриха, теперь вы готовы добавить второй цвет.

Чтобы добавить второй цвет к контуру, нажмите значок плюса рядом с параметром обводки на панели стилей слоя.

Появится второй вариант штриха, который вы можете начать редактировать. Оставьте все настройки прежними, но соответственно измените значения цвета и размера.

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

Если вы хотите добавить больше цветов, продолжайте эти шаги, пока не будете удовлетворены результатами!

Результат

Просто добавив вторую обводку, вы можете сделать гораздо более интересными ваши контурные изображения в Photoshop. Эту технику можно использовать для обрамления всей фотографии или вокруг вырезанного объекта.

Как добавить градиентный контур к изображению

Чтобы сделать еще один шаг вперед, вы можете добавить градиент к любому контуру изображения, который вы делаете.Все, что для этого нужно, — это быстро изменить параметр типа заливки на панели стилей слоя!

После того, как вы создали первоначальный контур, измените тип заливки с «цвет» на «градиент».

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

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

Чтобы создать градиент, щелкните образцы цвета в любом конце окна предварительного просмотра градиента.Появится палитра цветов, позволяющая изменить цвет.

Чтобы использовать предустановленный градиент, просмотрите готовые папки и выберите нужный вариант. В этом примере я возьму один из градиентов в папке «Апельсины».

Теперь, когда цвет градиента установлен, выберите угол градиента, вращая выравнивание угла. Этот параметр меняет начало и конец градиента.

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

Наконец, выберите тип градиента, который вы хотите использовать. Если вы не уверены, оставьте для этого параметра значение «Линейный».

Результат

Создание градиентного контура в Photoshop — это интересный способ добавить немного изюминки к параметру обводки. Хотя он может подойти не каждому изображению, с ним стоит поэкспериментировать!

Как обвести изображение текстурой

Последний способ обвести изображение в Photoshop — создать текстуру или узор для границы.Это еще один простой вариант, который вы можете использовать после того, как создали первоначальный контур вокруг фотографии.

Создав исходный контур, измените тип заливки с «цвет» на «узор».

Нажмите на поле шаблона, чтобы получить доступ к новым шаблонам.

Есть несколько вариантов по умолчанию, которые вы можете использовать или загрузить бесплатные шаблоны из Интернета.

Здесь вы можете узнать, как импортировать узоры в Photoshop.

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

Наконец, установите масштаб узора, чтобы он лучше всего соответствовал желаемому виду.

Результат

Добавление текстуры или узора к контуру изображения в Photoshop — еще один отличный способ добавить немного художественного чутья.

Заключение

Научиться обводить изображение в Photoshop легко, если вы используете панель стилей слоя и параметры обводки. Этот метод упрощает процесс и позволяет легко регулировать размер контура. Лучше всего то, что вы можете добавлять дополнительные эффекты на панели стилей слоя, такие как градиенты, узоры или несколько цветов обводки!

Хотите больше подобных руководств? Подпишитесь на нашу еженедельную рассылку, чтобы получать больше фотографий и советы по редактированию фотографий прямо на ваш почтовый ящик!

— Брендан 🙂

Как создавать узоры в Photoshop

Что угодно, от простых точек до богато украшенных тигров, узоры всегда добавляют декоративности. Мы подготовили пошаговое руководство по созданию бесшовных и полутоновых узоров в Photoshop.

Многие вещи выглядят намного лучше, если на них повторяющийся рисунок — подумайте о подарках на день рождения, красиво завернутых в праздничную подарочную упаковку, или о геометрических керамических плитках, которые сделают вашу кухню еще более уютной. Есть что-то успокаивающее в иллюстрации, которая повторяется бесконечное количество раз, поэтому мы так любим узоры.

Нижеследующее руководство представляет собой пошаговое руководство по созданию двух типов узоров в Adobe Photoshop — бесшовного узора и полутонового узора.

Как создать бесшовный рисунок

Когда бесшовный рисунок действительно хорош, трудно понять, где начинается и где заканчивается цифровая иллюстрация, даже после тщательного изучения. Этот вид узора, кажется, размывает границы своих плиток, позволяя ему волшебным образом повторяться в прекрасной гармонии. Чтобы добиться такого вида, вы должны сначала нарисовать все компоненты, которые вы хотите включить, в отдельный файл Photoshop. Затем вам нужно будет переставить их таким образом, чтобы они казались бесконечными.Как? Хитрость заключается в том, чтобы добавить элементы по углам и вокруг границы, чтобы скрыть и почти устранить квадратную форму плитки. Вот как это сделать правильно:

Начните с рисования всех элементов, которые вы хотите включить в шаблон, в отдельном файле.

1. Откройте новый файл Photoshop с высоким разрешением и квадратными размерами. Мы рекомендуем 2000 x 2000 пикселей и 300 точек на дюйм.

2. Поместите один из созданных вами элементов в центр файла.

3. Выберите Фильтр > Другое > Смещение.Затем сместите свой дизайн на половину размера файла, как

по горизонтали, так и по вертикали (это означает, что если размер вашего холста составляет 2000 x 2000 пикселей, вы должны сместить изображение на 1000 пикселей по горизонтали и еще на 1000 пикселей по вертикали). в результате ваше изображение появится во всех четырех углах размера холста, разделенного на четыре.

4. Добавьте еще один элемент и поместите его в центр холста. На этот раз перейдите в «Фильтр» > «Другое» > «Смещение». Но смещение всего на 1000 пикселей по горизонтали и 0 пикселей по вертикали.В результате одно изображение будет разделено на два.

5. Поместите третий элемент в центр. Затем еще раз перейдите в Фильтр > Другое > Смещение и сместите его наоборот — на этот раз на 1000 пикселей по вертикали и 0 пикселей по горизонтали.

6. При необходимости повторите шаги 4 и 5 с дополнительными изображениями. Но пока не используйте все свои элементы — оставьте некоторые для середины плитки.

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

Узоры состоят из квадратных плиток, которые многократно повторяются. Добавьте элементы вокруг границы, чтобы размыть квадратную форму плитки и сделать ваш узор бесшовным.

8. Теперь ваша плитка готова к реализации! Чтобы он стал узором, сначала удалите фоновый цвет, чтобы сделать его прозрачным.

9. Затем выберите «Правка» > «Определить шаблон».Вы можете назвать созданный узор, а затем нажать «ОК». в нижней части панели «Слои». Выберите шаблон, который вы только что создали. Вы также можете настроить его масштаб, то есть размер повторяющейся панели.

Ну вот! Вы создали бесшовный шаблон иллюстрации. Хотя вам, возможно, придется вернуться и настроить размеры, композицию и интервалы в зависимости от результата, чтобы в конечном итоге получить то, что вас устраивает.

Как создать полутоновый рисунок

Разработанный для печати в 19 веке и перенесенный в современную коммерческую полиграфию, полутоновый метод представляет собой разделение сложных изображений на сетку из мелких точек для облегчения процедуры печати. Мы настолько привыкли к полутоновому или растровому изображению, что цифровое воспроизведение этого эффекта исключительно из эстетических соображений может вызвать красивую ностальгическую атмосферу. Вы можете создать полутоновый узор с помощью традиционных точек, но это также можно сделать с помощью знаков плюс, крестов или любой другой формы по вашему вкусу.

Создать полутоновый узор в Photoshop очень просто, вот как это сделать за шесть простых шагов:

Полутоновые узоры могут быть созданы любой формы, от традиционных точек до знаков плюс или крестик.

1. Откройте новый файл Photoshop с высоким разрешением и квадратными размерами. Мы рекомендуем 400 x 400 пикселей и 300 точек на дюйм.

2. Разделите холст на четыре части, опустив две направляющие, одну в середине оси X и одну в середине оси Y.

3. На новом слое нарисуйте два круга или любую другую фигуру, которую вы задумали, на двух противоположных сторонах холста.Мы рекомендуем рисовать две фигуры вручную, чтобы сделать рисунок более свободным. Вы также можете поиграть с размерами фигур, чтобы сделать узор более плотным или разнесенным.

Нарисуйте две фигуры на противоположных сторонах холста.

4. Удалите цвет фона, чтобы он стал прозрачным.

5. Выберите слой, на котором вы создали две фигуры, и нажмите «Правка» > «Определить узор». Вы можете дать своему шаблону имя и нажать «ОК». И вуаля — все готово!

6. Чтобы применить узор, перейдите в меню «Слой» > «Новый слой-заливка» > «Узор» или щелкните значок «Создать новый слой-заливку или корректирующий слой» (черно-белый кружок) в нижней части панели «Слои» и выберите шаблон, который вы только что создали.

Текст и изображения Or Yogev

Как сделать повторяющийся узор в Photoshop

Для этого урока мы выбрали повторение шаблона Full Drop. Это не продвинутая техника, в основном для тех, кто не очень хорошо владеет Photoshop, но любит проявлять творческий подход и играть. Этот учебник по повторению рисунка ткани в основном подходит для фотографических и абстрактных изображений.

Повтор Full Drop в Photoshop

Full Drop Repeats также может называться Square Repeat.

Откройте файл с изображением в Photoshop. Всегда полезно проверить качество разрешения перед началом работы, рекомендуется не менее 150 dpi. Обрезайте/изменяйте изображение по желанию, пока вы не будете довольны изображением, которое будет повторяться бесшовно.

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

Исходное изображение без фиксации швов, выглядит несоответствующим.

Обратите внимание на размер изображения в пикселях (Image – Image Size)

А также ПОЛОВИНУ этой суммы. Самый простой способ сделать это — позволить компьютеру принять решение, уменьшить вдвое значение разрешения (в данном случае 150 dpi) и заново отметить новые размеры в пикселях. Нажмите «Отмена», так как вы не хотите менять разрешение, просто обратите на это внимание.

Теперь разрежьте (СМЕЩЕНИЕМ) изображение пополам как по длине, так и по ширине. Это даст края или швы, которые необходимо зафиксировать для бесшовного повторения.Идеально сделать этот шаг с плоским слоем. (Фильтр — Другое — Смещение) Теперь введите ПОЛОВИНЫ значения по горизонтали и вертикали, определенные на шаге 2, и убедитесь, что выбран параметр «Обтекание». Нажмите «ОК».

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

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

Теперь это формирует вашу повторяющуюся плитку, и это плитка / изображение, которое требуется при отправке изображения на принтер или загрузке его для печати на ткани в Интернете.

СОХРАНИТЬ! Сохраните файл как (Имя иллюстрации)_Повторить плитку
. Теперь вы должны проверить свой повтор и увидеть, что он дублируется по ширине и по длине вашей ткани. Самый простой способ сделать это — определить переработанную иллюстрацию как образец. Меню>Редактировать>Определить шаблон>Сохранить как предпочтительное имя.
Откройте новый пустой документ с настройкой, напоминающей рулон ткани i.е. 145 х 100 см в зависимости от повторяющихся размеров плитки.
Меню>Правка>Заливка>Выберите сохраненный шаблон из раскрывающегося списка>ОК

(ниже показан только размер 50 x 50 см)

Теперь вы можете использовать свой повторяющийся шаблон или повторяющуюся плитку для цифровой печати на ткани.

 

Сохранить

Сохранить

Как сделать узор в Photoshop: пошаговое руководство

Чтобы создать узор в Photoshop, вам понадобятся готовые значки или другие изображения, которые вы хотите преобразовать в узор.Вы также можете использовать бесплатные элементы PNG любого разрешения. Шаблон, который вы создаете в Photoshop, можно использовать в качестве фона для вашего веб-сайта, профиля в социальной сети, изображения Tinder или для любой другой цели, которую вы хотите.

Создание шаблона в Photoshop за 15 шагов

1. Создайте новый файл

.

Начните с сборки первой плитки узора. Для этого вам понадобится только что созданный документ. Выберите меню «Файл» в верхней части главной панели и выберите «Создать».Нам нужно создать файл любого размера с одинаковой высотой и шириной. Я ввел 300px для обоих размеров.

2. Загрузите иконки

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

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

3. Настройте первый слой

Выделите первый слой на панели слоев и выберите «Фильтр» > «Другое» > «Смещение».

4. Установите горизонтальные и вертикальные параметры

Установите параметры «Горизонтально» и «Вертикально» на половину длины холста файла.Поскольку мой файл имеет размер 300 на 300 пикселей, я ввел 150 пикселей для обоих параметров. Убедитесь, что вы установили флажок «Обтекание» в нижней части всплывающего меню. Нажмите «ОК». Ваш первый слой готов.

5. Настройте второй слой

Перейдите ко второму слою и еще раз выберите «Фильтр» > «Другое» > «Смещение». Теперь измените только «Горизонтальное» измерение на 0 пикселей и нажмите «ОК».

6.Настройка третьего уровня

Выделите другой слой, открыв Offset так, как это было описано на предыдущем шаге. Установите следующие параметры: по горизонтали на 150 пикселей и по вертикали на 0 пикселей. Нажмите ОК. Если вы хотите создать файл другого размера, вам нужно изменить размер слоя в Photoshop.

7. Объединить слои 90 218

Теперь, когда вы закончили первую плитку узора, вам нужно объединить слои.Для этого выделите все слои, кроме фонового, щелкните правой кнопкой мыши и нажмите «Объединить слои». Все выделенные слои будут объединены.

Вы также можете выполнить то же действие с помощью комбинации клавиш «Ctrl + E».

8. Выберите Выбрать все

Перейдите в меню «Выделение» > «Все» или используйте другую комбинацию горячих клавиш — «Ctrl + A».

9. Определите шаблон

Затем выберите «Правка» > «Определить шаблон».

10. Назовите шаблон

.

Дайте вашему шаблону имя и нажмите «ОК».

11. Примените шаблон

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

12. Создайте новый файл еще раз

Создайте новый файл любого размера. Желательно сделать его больше плитки узора, чтобы созданный узор был хорошо виден. Я установил размеры 960x640px.

13. Выберите наложение узора

.

Дважды щелкните фоновый слой на панели слоев и нажмите «ОК» во всплывающем окне.

14. Выберите стиль слоя

.

Перейдите в меню «Слой» > «Стиль слоя» > «Наложение узора».

15. Выберите свой шаблон

Выберите шаблон и нажмите «ОК».

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

Бесплатные инструменты

Для создания собственных узоров используйте эти профессиональные кисти Ps. С их помощью можно быстро создать цветочный фон или добавить к изображению нарисованные от руки сердечки или звездочки. Независимо от того, используете ли вы старую автономную версию Photoshop или являетесь подписчиком Creative Cloud, у вас не возникнет проблем с установкой и использованием этой коллекции кистей.

.

Добавить комментарий

Ваш адрес email не будет опубликован.