Как нарисовать ленту в фотошопе
В этом простом уроке вы узнаете, как нарисовать ленту для веб-сайта, которая размещается в углу изображения.
Сложность урока: Легкий
В этом простом уроке вы узнаете, как создать специальную ленту для веб-сайта.
Необходимые материалы
Chunk Five Font
Скриншот PSD Tuts+
Шаг 1. Создаем новый документ и называем его "Лента". В данном уроке использован размер 600х600 пикселей.
Amount (Количество): 10%
Distribution (Распределение): Gaussian (По Гауссу)
Monochromatic (Монохромный): Активно
Уменьшаем opacity (непрозрачность) слоя "Фоновая текстура" до 15%.
Шаг 3. Теперь создадим прямоугольник , в котором будем рисовать ленту. Я использовал Rectangle Tool (Прямоугольник) (U) с фиксированным размером 300х200 пикселей.
Размещаем фигуру в центре полотна и называем слой "Обтравочная маска".
Шаг 4. Применяем стили слоя для "Обтравочной маски", чтобы добавить тень и обводку.
Шаг 5. Берем любое изображение (я использовал скриншот сайта PSD Tuts) и размещаем в центре рабочего полотна над слоем "Обтравочная маска", затем переходим Layer - Create Clipping Mask (Слой - Создать обтравочную маску).
Шаг 6. Теперь у нас готово изображение, на котором будет размещена лента. Инструментом Rectangle Tool (Прямоугольник) (U) рисуем основу для ленты. Поворачиваем ее на 35 градусов. Для этого используем Free Transform (Свободная трансофрмация). Данную функцию можно активировать комбинацией клавиш CTRL+T или через меню Edit - Free Transform (Редактирование - Свободная трансформация).
Убедитесь, что края ленты выходят за границы прямоугольника.
Цвет ленты на данный момент не имеет значения, так как позже мы применим градиентную заливку. Называем этот слой "Лента".
Шаг 7. Теперь мы создадим маску для слоя "Лента", которая скроет лишние области. Делаем следующее:
1. Удерживаем CTRL и кликаем по миниатюре слоя "Обтравочная маска". Это загрузит выделение прямоугольника.
2. Нам нужно, чтобы лента слегка выходила за границы прямоугольника, поэтому расширяем выделение на 4 пикселя командой Select - Modify - Expand (Выделение - Модификация - Расширить).
3. Далее выбираем слой "Лента" и создаем маску. Вы можете сделать это двумя способами:
а) Layer - Layer Mask - Reveal Selection (Слой - Слой-маска - Показать выделенные области)
б) Кликнуть на кнопку Add layer mask (Добавить слой-маску) внизу панели слоев
Шаг 8. Давайте добавим несколько стилей слоев для ленты, чтобы добавить тень, свет и текстурность.
Drop Shadow (Тень) (внешняя тень)
Inner Glow (Внутреннее свечение) (тестура)
Bevel and Emboss (Фаска и Тиснение) (свет на краях)
Gradient Overlay (Перекрытие градиентом) (цвет ленты)
Stroke (Обводка) (придаст краям ленты четкости)
Получаем вот такой результат:
Шаг 9. Теперь мы должны создать загнутые уголки на ленте. Помните, как мы расширяли выделение на 4 пикселя?
Используем эту кисть, чтобы нарисовать маленькие окружности на углах ленты. Так как слой находится под обтравочной маской, мы увидим только темную часть возле углов.
Чтобы лучше понять данный момент, посмотрите на изображение ниже. Вот так наш документ будет выглядеть, если мы уменьшим непрозрачность всех слоев, находящихся над "Уголками".
Шаг 10. Давайте добавим текст. Я использовал такие параметры:
Размещаем текст на ленте и поворачиваем на 35 градусов (используя трансформацию (CTRL+T), как в шаге 6). Теперь добавим стили слоев для текста.
У вас должно получиться примерно вот так:
Шаг 11. Сейчас мы добавим стежки на ленте. Берем Text Tool (Текст) (Т) и пишем пунктирную линию из дефисов. Затем меняем параметры текста:
Размещаем текст на ленте и поворачиваем на 35 градусов, как мы делали это в шагах 6 и 11. Затем добавляем стили слоя, чтобы придать стежкам реалистичности.
Дублируем текст и перемещаем в нижнюю часть ленты. Получаем вот такой результат:
Шаг 12. Последнее, что мы должны сделать, это применить маску для стежков, чтобы они не выходили за края ленты. Для этого дублируем маску слоя "Лента" и перемещаем ее на слой с стежками.
Повторяем эти действия для обоих слоев, чтобы получить примерно вот такой результат:
Финальное изображение
Это все! Теперь вы знаете, как создать простую ленту в Photoshop. Вы можете поэкспериментировать с другими параметрами и сменить цвет. Или создать закругленные края на ленте. Этого можно добиться с помощью Pen Tool (Перо) (Р) и слой-маски. Удачи!
В этом уроке Вы научитесь создавать простые веб-ленты в Adobe Photoshop.
Шаг 1
Также откройте панель Окно > Инфо (Window > Info). Это позволит Вам видеть размеры и позиции фигур.
Шаг 2
Шаг 3
Шаг 3.1
Шаг 3.2
Сфокусируйтесь на панели слоёв и выберите слой с фигурой, которую мы создавали в прошлом шаге. Выберите инструмент Стрелка (Direct Selection Tool) и отметьте четыре ключевые точки на фигуре, после чего удерживая нажатой клавишу Alt, перетяните копию вниз прямоугольника , как показано на втором рисунке. Измените режим наложения на Перекрытие (Overlay) и откройте окно Стили слоя (Layer Style). Активируйте Тень (Drop Shadow) и введите настройки указанные на скриншоте ниже.
Шаг 4
Дублируйте фигуру, созданную во втором шаге (CTRL + J). Переместите копию на передний план (SHIFT + CTRL + ]), уменьшите Заливку (Fill) до 0% и откройте окно Стили слоя (Layer Style). Активируйте Наложение градиента (Gradient Overlay) и введите настройки указанные на скриншоте. Обратите внимание, что белые цифры указывают на Положение (Location), а желтые - на Непрозрачность (Opacity).
Шаг 5
Шаг 5.1
Шаг 5.2
Отключите сетку (Ctrl+'). Возьмите инструмент Прямоугольник (Rectangle Tool), откройте панель Опции прямоугольника (Rectangle Options), выберите Фиксированный размер (Fixed Size), в поле ширины введите 60, а в поле высоты 1. Установите цвет на чёрный и кликните внутри документа. Поместите фигуру как показано на скриншоте ниже. Добавьте ещё один прямоугольник и поместите как показано на втором скриншоте. Убедитесь, что между ними отступ в 2px.
Шаг 5.3
Сфокусируйтесь на фигуре созданной в предыдущем шаге и используйте технику описанную в 4 шаге, чтобы добавить копию. Поместите копии как показано на первом скриншоте. Включите сетку (Ctrl+'). Возьмите инструмент Прямоугольник (Rectangle Tool), откройте Опции прямоугольника (Rectangle Options) и выберите Произвольный (Unconstrained). Создайте прямоугольник 60х50px и поместите как показано на втором скриншоте.
Возьмите инструмент Добавить опорную точку (Add Anchor Point Tool) и добавьте новую опорную точку как показано на третьем скриншоте. Переключитесь на инструмент Угол (Convert Point Tool) и просто кликните по новой опорной точке. Наконец, используя инструмент Стрелка (Direct Selection Tool) передвиньте эту опорную точку вправо на 30px. Перейдите в панель слоёв, откройте окно Стили слоя (Layer Style) и введите параметры указанные на следующих скриншотах.
Шаг 5.4
Дублируйте фигуру, созданную в предыдущем шаге (CTRL + J). Переместите копию на передний план (SHIFT + CTRL + ] ), уменьшите Заливку (Fill) до 0% и откройте окно Стили слоя (Layer Style). Активируйте Наложение градиента (Gradient Overlay) и введите параметры указанные на скриншоте.
Шаг 5.5
Шаг 5.6
Возьмите инструмент Прямоугольник (Rectangle Tool), создайте фигуру 20х10px и поместите как показано на первом скриншоте. Переключитесь на инструмент Удалить опорную точку (Delete Anchor Point Tool) и кликните по левой нижней опорной точке. Теперь фигура должна выглядеть как на втором скриншоте. Откройте Стили слоя (Layer Style) и введите параметры указанные на следующих скриншотах.
Шаг 5.7
Выделите пять фигур, которые мы создавали в последних 6 шагах и сгруппируйте их (Ctrl+G). Дублируйте группу и отразите её по горизантали (Редактирование > Трансформирование > Отразить по горизонтали (Edit > Transform > Flip Horizontal)). Перетащите группу на 215px вправо и убедитесь, что она расположена как на третьем скриншоте. Откройте окно Стили слоя (Layer Style), для фигур с эффектом Наложения градиента и Тенью, и измените угол как показано на следующих скриншотах.
Шаг 6
Шаг 6.1
Шаг 6.2
Шаг 7
Шаг 7.1
Шаг 7.2
На слое с фигурой, которую Вы создали в предыдущем шаге, с помощью инструмента Прямоугольник (Rectangle Tool) создайте ещё один прямоугольник 60х50px, как показано на первом скриншоте. Возьмите инструмент Добавить опорную точку (Add Anchor Point Tool) и добавьте новую опорную точку как показано на втором скриншоте. Переключитесь на инструмент Угол (Convert Point Tool) и просто кликните по новой опорной точке. Наконец, используя инструмент Стрелка (Direct Selection Tool) передвиньте эту опорную точку на 30px влево.
С помощью комбинации клавиш SHIFT + CTRL + [ переместите слой на задний план, уменьшите Заливку (Fill) до 0 и откройте окно Стили слоя (Layer Style), активируйте Тень (Drop Shadow) и введите параметры указанные на следующем скриншоте.
Шаг 7.3
Дублируйте слой, отредактированный в предыдущем шаге. Откройте окно Стили слоя (Layer Style), активируйте Тень (Drop Shadow) и введите параметры указанные на скриншоте.
В этом уроке шаг за шагом вы научитесь создавать качественные иконки для соцсетей или просто веб-иконки для своих нужд. В процессе работы будут использованы режимы наложения, инструмент Деформация (Warp tool), а так же вы научитесь создавать реалистичные тени.
Материалы для урока:
Шаг 1
Создайте новый документ размером 256 х256 пикселей.
Выберите инструмент Прямоугольник (Rectangle tool) и нарисуйте прямоугольник, цвет которого не имеет значения. Вы должны получить фигуру, примерно как на скриншоте.
Теперь активируйте инструмент Многоугольник (Рolygon tool). В верхней панели настроек инструмента поставьте 3 Стороны (Sides) и включите иконку Добавить к области фигуры (Add to Shape area).
Теперь создаем треугольник, как показано ниже.
Нажмите комбинацию клавиш CTRL+T, появится рамка трансформации вокруг треугольника. Подвиньте его к основанию первой фигуры и трансформируйте.
У вас должна получиться фигура как на скриншоте.
Шаг 2
Скачайте узор и установите его в фотошоп. Дважды щёлкните по слою с ленточкой для вызова окна стилей слоя. Выберите стиль Наложение узора (Pattern Overlay) и поставьте узор, который только что загрузили. Уменьшите Непрозрачность (Оpacity) до 54% и смените режим наложения на Линейный затемнитель (Linear Burn).
Теперь включите стиль Глянец (Satin). Поставьте режим наложения Замена Тёмным (Darken), цвет черный, Непрозрачность (Оpacity) 27%, Угол (Angle) около 90 - 95, Смещение (Distance) 47, Размер (Size) 58 и Контур (Сontour), как на картинке ниже.
У вас должен получиться примерно такой результат.
Шаг 3
В этом шаге будем создавать тень. Дублируйте слой с ленточкой, перетащив его на соответствующую иконку внизу палитры слоёв. Щёлкните правой кнопкой мыши по копии и очистите стили слоя. Теперь дважды щелкните по миниатюре слоя и выберите для копии черный цвет.
Идём в меню Фильтр – Размытие – Размытие по Гауссу (Filter-Blur-Gaussian blur).
Поставьте в настройках размытия радиус 7 пикселей и нажмите Ок.
Расположите слой с тенью ниже слоя с ленточкой в палитре слоёв. У вас должно получиться так:
Теперь стоя на слое с тенью идём в меню Редактирование – Трансформирование – Деформация (Edit-Transform-Warp). Появится рамка инструмента.
C помощью этой функции отредактируйте тень следующим образом:
Уменьшите Непрозрачность (Оpacity) тени до 60% и это будет выглядеть вот так:
Шаг 4
Загрузите файл с узором и установите его в фотошоп. Разблокируйте фоновый слой, сняв замочек и двойным кликом по слою откройте окно стилей слоя. Выберите и примените к фону загруженный в этом шаге узор.
Примечание переводчика: при необходимости залейте фоновый слой тёмно-серым цветом.
Шаг 5
Итак, создаем новый слой выше всех остальных слоев. С зажатой клавишей CTRL, щёлкните по ленточке, чтобы загрузить выделение.
Установите основной цвет на белый. Инструментом Градиент (Gradient tool) от белого к прозрачному проведите на только что созданном новом слое сверху вниз примерно на 1 см. У вас должен получиться примерно такой результат.
Уменьшите Непрозрачность (Оpacity) блика до 40%. Снова создайте новый слой и уменьшите его Непрозрачность (Оpacity) до 30%. Убедитесь что основной цвет теперь чёрный. Выберите Зеркальный градиент (Reflective) и в нижней части ленты, проведите ним для создания тени, как показано на скриншоте.
На данном этапе у вас должен быть такой результат.
Шаг 6
Давайте нарисуем строчки. Выберите инструмент Линия (Line tool) и проведите сверху вниз по краю ленточки. Цвет линии должен быть чёрным.
Теперь выберите инструмент Прямоугольное выделение (Rectangle Marquee tool)и сделайте выделение в верхней части, как показано на скриншоте ниже.
Щелкните правой кнопкой мыши на слое с линией и растрируйте слой. Теперь с помощью клавиши Delete можете удалить выделенный участок. Передвигайте выделение снова и удалите ещё несколько частей на линии.
Дублируйте слой с готовой строчкой, в стилях слоя для копии примените стиль Наложение цвета (Color Overlay). Цвет поставьте белый и уменьшите Непрозрачность слоя (Оpacity) до 50%.
Примечание переводчика: Автор не указывает, но слой копию с белой линией нужно немного сместить относительно чёрной линии, чтобы создать эффект вдавленности.
Сделайте такие же линии с противоположной стороны ленточки.
Теперь для нижней части ленты.
Шаг 7
Выберите инструмент Линия (Line tool) и нарисуйте линию чёрного цвета, как показано на скриншоте.
Теперь нарисуйте еще одну линию чуть выше, на этот раз сделайте её белым цветом.
Уменьшите Непрозрачность (Оpacity) слоя с белой линией до 50%. Теперь выделите обе линии, слейте в один слой, нажав правой кнопкой мыши и выбрав пункт Объединить слои (Мerge layers).
Добавьте маску слоя, используя кнопку внизу палитры слоёв. Сбросьте цвета по умолчанию (чёрный и белый). Стоя на маске, выберите инструмент Градиент (Gradient tool) от белого к чёрному, метод Зеркальный(Reflective) и проведите ним от центра документа, в сторону до конца документа. На обеих сторонах линий исчезнут края под маской.
Шаг 8
Создайте новый слой и поставьте цвет переднего плана белым. Выберите инструмент Градиент (Gradient tool) от белого к прозрачному, метод радиальный. Нарисуйте небольшой кружок как на скриншоте.
Теперь с помощью Свободной трансформации (Free Transform ) Ctrl+T сократите кружок как на скриншоте.
Создайте прямоугольное выделение и удалите часть кружка, оставив чётким нижний его край.
Уменьшите Непрозрачность (Оpacity) слоя с кружком до 50% и у вас должен получиться примерно такой результат.
Шаг 9
Создайте новый слой и инструментом Произвольная фигура (Custom Shape Tool) нарисуйте фигуру, которую вы бы хотели. Автор выбрал логотип ресурса DeviantArt. Откройте окно стилей слоя и включите стиль Внутренняя тень (Inner Shadow). Настройте режим наложения Умножение (Мultiply), цвет чёрный, Угол (Angle) 90, Смещение (Distance) 0, Стягивание (Сhoke) 0, Размер (Size) 4.
Теперь добавим надпись белого цвета с помощью инструмента Текст (Тext tool). Автор использовал шрифт Оswald, но вы можете использовать какой угодно.
Дублируйте текстовый слой и поместите копию под оригинальным слоем с текстом. Установите цвет текста на копии чёрным и сдвиньте её немного вниз с помощью стрелки на клавиатуре. Это создаст эффект тени для текста.
Заключительный шаг
Создадим эффект тени в верхней части ленточки. Создайте новый слой на самом верху палитры слоёв. Загрузите выделение ленточки, щёлкнув по миниатюре её слоя с зажатой клавишей Ctrl. Установите основной цвет чёрным, выберите инструмент Градиент (Gradient tool) от чёрного к прозрачному, метод линейный. Теперь проведите внутри выделения градиентом сверху вниз, примерно на пол сантиметра. Уменьшите Непрозрачность (Оpacity) слоя с тенью до 70%.
Режим «Оптимизация» позволяет добавлять узловые точки щелчком по сегменту линии и удалять их щелчком по ним самим.
Режим «Просмотр» позволяет предварительно просматривать сегменты контура во время перемещения указателя мыши между щелчками. (Чтобы получить доступ к этому параметру, нажмите всплывающее меню справа от значка «Произвольная фигура».)
Перед началом рисования с помощью инструмента «Перо» можно создать новый контур на панели контуров, чтобы автоматически сохранить рабочий контур как именованный контур.
Основы работы с инструментом «Перо»
Комплексный видеообзор о том, как использовать инструмент «Перо» в Photoshop. Подробнее
Автор: Энди Андерсон (Andy Anderson)
Дополнительные сведения о режимах, которые могут использоваться для рисования инструментами группы «Перо», см. в разделе Режимы рисования.
Рисование прямых отрезков линии инструментом «Перо»
Простейший контур, который можно нарисовать инструментом «Перо» — это прямая линия из двух опорных точек, созданных щелчком инструмента «Перо». Продолжая щелкать инструментом, можно создать контур, состоящий из прямых отрезков, соединенных угловыми точками.
Поместите инструмент «Перо» в то место, откуда должен начинаться прямой отрезок, затем щелкните, чтобы создать первую опорную точку (не перетаскивайте указатель).
Первый отрезок отобразится только тогда, когда вы щелкнете вторую опорную точку (для просмотра сегментов контура выберите параметр «Резиновая лента» в Photoshop). Кроме того, если отображаются управляющие линии, это означает, что вы случайно перетащили инструмент «Перо». В этом случае выберите «Редактирование» > «Отмена» и щелкните еще раз.
Щелкните еще раз в том месте, где должен находиться конец отрезка (щелкните, удерживая клавишу «Shift», чтобы ограничить наклон сегмента углом, кратным 45°).
Последняя добавленная опорная точка будет выглядеть как закрашенный квадрат, что означает ее выделение. При добавлении новых опорных точек выделение предыдущих точек отменяется, поэтому соответствующие значки будут пустыми.
Чтобы замкнуть контур, поместите инструмент «Перо» на первую (пустую) опорную точку. При правильном размещении рядом с указателем инструмента «Перо» появится кружок. Чтобы закрыть контур, щелкните или перетащите указатель.
- Чтобы оставить контур открытым, щелкните, удерживая клавишу «Ctrl» (Windows) или «Command» (Mac OS), в любом месте на достаточном расстоянии от любых объектов.
Чтобы оставить контур открытым, также можно выбрать другой инструмент.
Рисование кривых инструментом «Перо»
Кривая создается путем добавления опорной точки в том месте, где изменяется направление кривой, с последующим перетаскиванием управляющих линий, формирующих кривую. Форма кривой определяется длиной и наклоном управляющих линий.
Чем меньше кривая содержит опорных точек, тем проще ее редактировать и тем быстрее она будет отображаться и выводиться на печать. При использовании слишком большого числа точек на кривой могут возникать ненужные выпуклости. Опорные точки следует размещать с большими промежутками, а форму кривых рекомендуется изменять корректировкой длины и углов наклона управляющих линий.
Появится первая опорная точка, и указатель инструмента «Перо» изменится на стрелку (в Photoshop указатель изменится только после того, как вы начнете перетаскивание).
Чтобы задать крутизну создаваемого сегмента кривой, перетащите указатель инструмента, затем отпустите кнопку мыши.
Как правило, управляющую линию следует растягивать примерно на одну треть от расстояния до следующей опорной точки, которую вы собираетесь нарисовать (позднее можно скорректировать управляющую линию с одной или с обеих сторон).
Чтобы ограничить движение инструмента углом, кратным 45°, удерживайте клавишу «Shift».
A. Расположение инструмента «Перо» B. Начало перетаскивания (с нажатой кнопкой мыши) C. Растягивание управляющих линий путем перетаскивания
Поместите инструмент «Перо» в том месте, где должен заканчиваться сегмент кривой, и выполните следующие действия.
Для того чтобы создать С-образную кривую, перетащите инструмент в направлении, противоположном предыдущей управляющей линии. Отпустите кнопку мыши.
Для того чтобы создать S-образную кривую, перетащите инструмент в направлении предыдущей линии. Отпустите кнопку мыши.
Чтобы резко изменить направление кривой, отпустите кнопку мыши и, удерживая клавишу «Alt» (Windows) или «Option» (Mac OS), перетащите управляющую точку в направлении кривой. Отпустите клавишу «Alt» (Windows) или «Option» (Mac OS) и кнопку мыши, переместите указатель в то место, где должен заканчиваться сегмент, затем перетащите его в противоположном направлении.
Для того чтобы создать несколько сглаженных кривых, продолжайте перетаскивать инструмент «Перо» в другие места. Обратите внимание на то, что опорные точки размещаются в начале и в конце каждой кривой, а не на ее вершине.
Для того чтобы развернуть управляющие линии опорной точки, перетащите указатель, удерживая клавишу «Alt» (Windows) или «Option» (Mac OS).
Чтобы замкнуть контур, поместите инструмент «Перо» на первую (пустую) опорную точку. При правильном размещении рядом с указателем инструмента «Перо» появится кружок. Чтобы закрыть контур, щелкните или перетащите указатель.
- Чтобы оставить контур открытым, щелкните, удерживая клавишу «Ctrl» (Windows) или «Command» (Mac OS), в любом месте на достаточном расстоянии от всех объектов или выберите другой инструмент.
Завершение рисования контура
Для того чтобы закрыть контур, поместите инструмент «Перо» на первую (пустую) опорную точку. При правильном размещении рядом с указателем инструмента «Перо» появится кружок. Чтобы закрыть контур, щелкните или перетащите указатель.
- Чтобы оставить контур открытым, щелкните, удерживая клавишу «Ctrl» (Windows) или «Command» (Mac OS), в любом месте на достаточном расстоянии от всех объектов.
Рисование с помощью инструмента «Свободное перо»
Инструмент «Свободное перо» позволяет рисовать так же, как это делается карандашом на бумаге. Узловые точки добавляются автоматически в процессе рисования. Пользователь не определяет положение этих точек в процессе рисования, но может настроить их положение по завершении создания контура. Для рисования с большей точностью воспользуйтесь инструментом «Перо».
Выберите инструмент «Свободное перо» .
Чтобы задать чувствительность завершающей части контура к движениям мыши или пера, щелкните стрелку вниз рядом с кнопками фигур на панели параметров и введите значение от 0,5 до 10,0 пиксела в поле «Погрешность». Чем выше значение, тем проще создаваемый контур и меньше узловых точек.
Перетащите курсор по изображению. В процессе перетаскивания курсор оставляет след контура. В момент отпускания кнопки мыши создается рабочий контур.
Чтобы продолжить существующий контур, нарисованный от руки, установите указатель пера на конце контура и перетащите курсор.
Чтобы завершить создание контура, отпустите кнопку мыши. Для создания замкнутого контура проведите линию до начальной точки контура (когда курсор поравняется с ней, рядом с ним появится кружок).
Рисование прямых линий, за которыми следуют кривые
Поместите инструмент «Перо» над выбранной конечной точкой. Рядом с инструментом «Перо» появляется косая черта. Для того чтобы задать крутизну сегмента кривой, который будет создан далее, щелкните опорную точку и перетащите появившуюся управляющую линию.
A. Завершенный сегмент прямой B. Размещение инструмента «Перо» над конечной точкой C. Перемещение управляющей точки
Поместите перо в том месте, где должна быть следующая опорная точка, затем, чтобы завершить кривую, щелкните (и при необходимости перетащите) новую опорную точку.
A. Расположение инструмента «Перо» B. Перетаскивание управляющей линии C. Новый отрезок кривой завершен
Рисование кривых, за которыми следуют прямые линии
Выбрав инструмент «Перо», перетащите указатель мыши, чтобы создать первую гладкую узловую точку сегмента кривой, и отпустите кнопку мыши.
Переместите инструмент «Перо» в точку, где сегмент кривой должен закончиться, перетащите указатель мыши, чтобы завершить кривую, и отпустите кнопку мыши.
Выберите в палитре инструментов инструмент «Угол» и щелкните выделенную конечную точку, чтобы преобразовать ее из гладкой узловой точки в точку преломления.
Нажмите клавишу «Alt» (Windows) или «Option» (Mac OS), чтобы временно сменить инструмент «Перо» на инструмент «Угол».
Выберите в палитре инструментов инструмент «Перо», установите его в точке, где должен закончиться прямой сегмент, и щелкните мышью, чтобы завершить прямой сегмент.
Рисование двух сегментов кривой, соединенных углом
Переместите инструмент «Перо» и перетащите указатель для создания кривой со второй точкой сглаживания. Затем для настройки крутизны следующей кривой перетащите управляющую линию в сторону ее противоположного конца, удерживая клавишу «Alt» (Windows) или «Option» (Mac OS). Отпустите клавишу и кнопку мыши.
В результате разделения управляющих линий точка сглаживания преобразуется в угловую точку.
Переместите инструмент «Перо» в то место, где должен заканчиваться второй сегмент кривой, затем перетащите новую точку сглаживания для завершения второго сегмента кривой.
A. Перетаскивание новой точки сглаживания B. Разделение управляющих линий при перетаскивании с помощью клавиши «Alt» или «Option» и изгиб управляющей линии вверх C. Результат после перемещения и перетаскивания в третий раз
Рисование с помощью магнитного пера
Магнитное перо — это вариант инструмента «Свободное перо», позволяющий рисовать контуры, привязанные к краям определенных областей изображения. Существует возможность определить диапазон и чувствительность привязки, а также сложность результирующего контура. Параметры инструментов «Магнитное перо» и «Магнитное лассо» во многом одинаковы.
Чтобы превратить инструмент «Свободное перо» в инструмент «Магнитное перо» , установите флажок «Магнитное» на панели параметров или нажмите стрелку вниз рядом с кнопками фигур на панели параметров и установите флажок «Магнитное». После этого задайте перечисленные далее параметры.
Ширина: введите число пикселов от 1 до 256. Магнитное перо обнаруживает края только в пределах указанного расстояния от курсора.
Для параметра «Контрастность» введите значение в процентах от 1 до 100, указывающее контраст между пикселами области, наличие которого будет считаться признаком края. Для слабоконтрастных изображений используйте большее значение.
Для параметра «Частота» введите число от 0 до 100, указывающее, как часто перо создает узловые точки. Чем выше значение, тем быстрее контур привязывается к месту.
При работе с планшетом можно установить или снять флажок рядом с параметром «Нажим пера». При включении этого параметра чем сильнее нажим, тем меньше ширина линии.
Доброе утро, давайте сегодня нарисуем ленточку в Фотошопе, вот такую:
Сама задача не очень сложная и нарисовать точно такую же ленточку вы сможете быстро.
Сначала рисовать я буду шапку, и мне ленточки нужны позади герба, который я украду у РФ через Яндекс, ибо Гугл не выдал нормальных гербов:
Это крутой герб, но красная подложка меня все равно немного раздражала, да и на белом фоне без подложки орел будет круче. Долго же Я его вырезал:
Потом чуть обработал перфектумом и пошарпил, плюс вписал немного в белый фон. Немного увел желтый цвет в синий. Возможно это моя паранойя уже — но мне так больше нравится. 🙂
Вот что у меня получилось:
Ну а теперь собственно то, из-за чего я пост этот пишу. Будем рисовать ленточки, которые будут вылазить из-за герба. Делать их можно через берн и додж, или через градиенты. У меня есть планшетка – поэтому я почти всегда делаю через берн и додж, но и мышкой это вполне удобно делать.
В общем, сначала нарисуем основу ленточки. Раньше, когда-то давно, я пытался рисовать ленточку полностью пентулом, но это бесперспективность полная. У меня все получалось криво и косо, вот как НЕ надо делать:
Ведь даже если не присматриваться – сразу видно что косая лента получилась. Может если вы супер точны – то попробуйте, вдруг получится. 🙂
Я делаю проще. Провожу линию, как должна извиваться лента:
Далее беру инструмент «Кисть». Выбирайте тот цвет, в котором у вас будет лента, саму кисточку выбирайте из стандартного набора «Каллиграфические кисти», вот такую:
После того как выбрали кисть, снова берем пентул, клик по нашему контуру правой кнопкой мыши, выбираем «Выполнить обводку контура». В появившемся окне, в выпадающем меню выбираем «Кисть», жмем ок.
Все это делаем на новом слое.
Должно выйти так:
И не надо ничего выводить с помощью одного лишь пентула 🙂
Ну как вы видите, у ленточки края прозрачные, поэтому я несколько раз дублирую слой с лентой, пока она не станет непрозрачной полностью, а затем склеиваю эти слои в один.
Кстати, ленточку вы можете без проблем сделать любой толщины, просто дублируйте слой, и каждый раз сдвигай его чуть вниз, пока не устроит толщина. У меня лента будет в виде флага России, поэтому я сделал ее немного толще:
Теперь при помощи того же пентула, равняйте края, убирайте косяки если они у вас вылезут.
Дальше я буду разукрашивать свою ленточку. Все просто – белый, синий, красный.
Немного про белый цвет на белом. Опять же, никаких проблем, просто делайте вместо белого чуть серый цвет, светло-серый. С ним и берном работать можно будет.
Дублируем слой с лентой, а нижний отключаем. Теперь выбираем слой-дубликат, и меняем его цвет на светло-серый через ctrl+u . Потом дублируем этот слой, меняем его цвет на синий, и двигаем слой чуть ниже.
Так же поступаем и с красным цветом. Потом сливаем все эти слои в один, выделяем самый первый слой с ленточкой (именно делаем из него выделение, не делая его видимым! Для этого достаточно зажать ctrl и кликнуть по иконке слоя. А потом инвертировать выделение, нажав ctrl+shift+i ). Затем удаляем все ненужные остатки ленточки.
У меня вышло так:
Флаг готов. Кстати я ещё как то писал урок о том как рисовать флаг, почитайте его, может быть что-нибудь полезное вынесите для себя.
Делаем объёмные ленточки
Пока писал этот текст, все же решил делать через берн и додж.
Выбирайте инструмент «Затемнитель» он же Burn –
С такими настройками:
И в местах, где у нашей ленты изгибы внутрь, проведите сверху вниз 1-2 раза – это будет тень.
Дальше возьмите инструмент «Осветлитель», он же Dodge –
С такими настройками:
И проведите сверху вниз, 1-2 раза там, где у ленты изгиб наружу, то есть на нас – это свет.
Теперь, я хочу, как всегда сделать грани. Для этого дублирую слой с лентой, через crtl+u делаю его белым, выделяю, зажав ctrl и кликнув по иконке слоя, выделение двигаю на 1 пиксель вниз (стрелочка вниз на клаве) и очищаю выделение нажав Backspac .
У нас осталась однопиксельная грань. Я сдвину эту грань вниз, на 1 пиксель (зажмите ctrl и нажми стрелку вниз), так как фон у нас белый и на нем эту грань просто не будет видно. В общем сдвигаю и режим этого слоя ставлю в «перекрытие». Так же добавляем и снизу ленточки:
Ну и финальный шаг, я добавлю немного шума на ленточку, чтобы у нее была текстура, для этого выбираю слой с лентой, иду в Фильтры>Шум>Добавить шум, проставляю количество 0,7:
Сейчас, я привел самый простой, быстрый и легкий способ рисования ленточки, можно посидеть подольше – результат будет лучше. Может потом, как-нибудь напишу продолжение урока.
Вот такой хедер получился в итоге у меня:
Если остались вопросы – спрашивай в комментариях. Поможем.
[sc name=»728 text» ]
Читайте также: