Как рисовать бетон в фотошопе

Обновлено: 06.07.2024

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

Инктобер — самый популярный челлендж для художников. Его запустил иллюстратор Джейк Паркер (Jake Parker) в 2009 году, а для названия выбрано сочетание слов «чернила» и «октябрь» (англ. ink + october). Художникам в течение месяца нужно рисовать по одному рисунку каждый день на заданную тему.

Smirnov School вместе с Elephant Games, 1С Интерес и ИД «Питер» в этом году тоже предлагает собственный список тем на челлендж и призы, среди которых iPad, Nintendo Switch и уникальный Inspiration box. Если вы хотите принять участие — все подробности вот здесь.

Основное условие челленджа — выдерживать стилистику рисования чернилами. Но это не значит, что нужно откладывать планшет в сторону — можно рисовать и в цифре. Главное — делать в монохроме (преимущественно ч/б) или использовать минимум 1-2 дополнительных цвета для ярких акцентов.

Расскажем теперь, как сделать так, чтобы ваши цифровые работы были похожи на нарисованные настоящими чернилами.

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

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

Жидкая краска позволяет рисовать в разных техниках. Авторы: Koda Voyce (слева), Grzegorz Przybyś (справа).

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

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

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

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

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

Работы, выполненные маркерами, отличаются сильной контрастностью. Этим инструментом сложно передать мягкие переходы в тоне. Автор: Finian MacManus

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

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

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

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

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

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

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

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

Рядом с облаками видны остатки карандашного эскиза. Глядя на них не возникает сомнений, что художник рисовал на бумаге, а не в Photoshop. Автор: Rob Turpin

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

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

Экспериментируйте с формой штриховки для передачи тона и текстур. Автор: A. Noah Rodriguez-Acosta.

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

С помощью штриховки можно передавать не только тон, но и форму. Автор: Alphonso Dunn

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

Karl Kopinski (слева) передает тон с помощью кисти. Scot Williams (справа) использует заливку и штриховку.

Мокрая техника напоминает работу с акварелью. Чернила или тушь разбавляются водой, что позволяет создавать плавные переходы между светом и тенью. Самые светлые участки при этом остаются незакрашенными. Поэтому уже на этапе эскиза нужно определить, где будет свет и тень. После этого художники добавляют тон — от более светлого к наиболее темному. Вот так в этой технике рисует иллюстратор Карл Копински (Karl Kopinski):

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

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

Возможность сглаживать линии в Adobe Photoshop появилась позже, чем у большинства его конкурентов — с версии CC 2018, вышедшей в конце 2017 года. Функция включается нажатием кнопки «Сглаживание» (Smoothing) на верхней панели и установкой нужного значения. Дополнительные опции сглаживания доступны при нажатии на соседнюю иконку в виде шестеренки.

В Procreate нужно зайти в настройки кисти и отрегулировать параметр Streamline. Чем больше его значение — тем ровнее будет линия.

Сглаживание линий также доступно в Clip Studio Paint и Paint Tool Sai.

Пример того, как работает сглаживание в Photoshop. Линия слева проведена «от руки». Справа — с применением функции сглаживания.

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

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

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

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

В традиционных техниках художники рисуют размашистые ровные линии, используя иные точки опоры — локоть или плечо. Меняется при этом и хват инструмента. Стилус нужно держать за его верхнюю часть. Это выглядит вот так:

При рисовании «от плеча» двигается вся рука:

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

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

Набор из 44 бесплатных кистей от Игоря Витковского можно скачать здесь. В комплекте есть кисти, подходящие для сухих и мокрых техник работы с чернилами и тушью. В качестве бонуса приложены 15 текстур, в том числе 3 для имитации бумаги.
Кисти от Кайла Вебстера (Kyle Webster) — иллюстратора и члена команды Adobe Design — можно бесплатно скачать здесь.
В профиле Бритни Мерфи (Brittney Murphy) на DeviantArt можно скачать набор кистей, имитирующих маркеры и чернила. Кисти бесплатные, но для их скачивания нужно завести аккаунт на сайте.
Акварельные кисти от Снежаны Швитцер для имитации работы мокрой кистью доступны здесь.

В библиотеке кистей Procreate изначально есть инструменты для имитации чернил. Вот несколько вариантов для тех, кого не устраивает стандартный набор:

Бесплатные кисти от Георга Вестфалена (Georg Graf von Westphalen) можно скачать тут.
Кисти от автора курса «Рисование в Procreate» Марины Пахомовой бесплатны и доступны для скачивания здесь.
Платный набор от дизайнера Ольги Ром включает в себя 62 кисти и текстуру акварельной бумаги. Он доступен здесь и стоит 19$.

Цифровые кисти убедительно копируют начертание традиционных инструментов. Автор кистей: Игорь Витковский.

Если для решения творческих задач не удается найти подходящую кисть среди готовых наборов, можно создать свою собственную. Посмотрим, как делает кисти Роберт Марзулло (Robert Marzullo) — художник и автор курсов по рисованию комиксов.

Сперва создаем файл размером 600х600 пикселей и с разрешением 1000 пикселей на дюйм. С помощью инструмента «Лассо» (Lasso) художник намечает контур на отдельном слое и заливает его черным цветом. Для сглаживания краев применен фильтр «Размытие по Гауссу» (Gaussian Blur).

После того, как мы получили подходящую форму кисти, перейдем во вкладку Редактирование — Определить кисть (Edit — Define Brush Preset), чтобы Photoshop создал кисть на основе заданных контуров. Затем создадим новый рабочий документ, выберем созданную нами кисть и приступим к ее настройке.

Сперва сделаем так, чтобы кисть могла менять размер в соответствии с силой нажатия на перо. Откроем панель кистей (кнопка справа от окошка выбора кисти) и в меню «Динамика формы» (Shape Dynamics) у строчки «Управление» (Control) выберем «Нажим пера» (Pen Pressure). После этого в меню «Форма отпечатка кисти» (Brush Tip Shape) зададим наклон кисти, как на изображении ниже.

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

Также можно прочитать нашу статью о том, как создать кисть, а затем нарисовать и раскрасить скетч — вот здесь. Еще есть материал в целом о кистях для CG-рисунка.

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

Типы тиснения. Иногда акварельная бумага бывает с легкой тонировкой.

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

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

Пример текстур крафтовой бумаги (слева) и картона (справа).

Слой с текстурой бумаги можно наложить поверх рисунка. Поэкспериментируйте с режимами наложения и непрозрачностью в меню слоев, чтобы получить подходящий вариант. В Adobe Photoshop подойдут режимы группы затемнения, а в частности — Затемнение, Умножение, Линейный затемнитель, Темнее (Darken, Multiply, Linear Burn, Darker Color).

Мы наложили текстуру тонированной бумаги в режиме «Умножение» (Multiply). Автор: Giorgio Baroni

Чтобы копировать традиционные техники рисования, нужно разобраться в их особенностях — какие используются материалы и инструменты, какой след оставляет материал на бумаге или холсте, как создают свои работы другие художники.
Для имитации настоящих инструментов в графических редакторах используют наборы цифровых кистей. Можно скачать уже готовые или создать свои собственные.
Чернилами можно рисовать в сухой, мокрой и смешанной технике. От этого зависит выбор кистей и подход к работе с тоном.
Для работы в сухой технике подойдут кисти, которые имитируют перья, ручки или маркеры. В таком случае для передачи тона используется штриховка и/или сплошная заливка глубоких теней.
В мокрой технике нужны кисти с мокрым краем или такие, которые оставляют за собой влажные разводы. Для этого стоит присмотреться к наборам акварельных кистей. Объем создается полупрозрачными мазками так, чтобы обеспечить плавный переход между светом и тенью.
В смешанной технике пригодятся оба типа кистей. Плавные переходы могут соседствовать со штриховкой и сплошной заливкой. В больших комплектах кистей бывают инструменты, подходящие для обеих техник.
Для проведения ровных линий используйте функцию «Сглаживание» (Smoothing). Она есть в большинстве графических редакторов. Также можно воспользоваться традиционными техниками и проводить линии быстрым движением «от локтя» или «от плеча».
Помните о том, на чем рисуют в традиционной технике — наложите слой с текстурой бумаги поверх рисунка и выберите подходящий режим наложения (в Adobe Photoshop лучше подойдут режимы затемняющей группы).

Текст написал Богдан Дудниченко, автор в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

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

Исходники

Для выполнения урока вам потребуются следующие исходники:

1. Создаем фон

Шаг 1

Установите паттерн concrete01.pat, кликнув на него дважды.

Шаг 2

Создайте новый документ (File > New/Файл>Новый). Укажите размер в 600 px на 500 px и разрешение в 72 ppi.

Шаг 3

Выберите фоновый слой и дублируйте его (Layer > Duplicate Layer > OK/Слой>Cоздать дубликат слоя>OK). Переименуйте новый слой в Background Pattern.

Шаг 4

Чтобы добавить текстуру зайдите в меню Layer/Слой и откройте окно Layer Style/Стиль слоя. Выберите вкладку Pattern Overlay/Перекрытие узора, выберите паттерн concrete01.pat из списка и нажмите OK.

Шаг 5

Вернитесь в режим редактирования стилей слоя и выберите стиль Color Overlay/Перекрытие цвета. Настройте параметры как показано ниже.

Шаг 6

Теперь нам нужно добавить красного свечения, имитирующего отсвет. Для этого в режиме редактирования стилей слоя выберите Bevel & Emboss/Тиснение и укажите следующие параметры:

2. Создание текста

Шаг 1

Введите слово используя шрифт Stonecross. Укажите тексту размер шрифта в 130 pt, Leading/Интерлиньяж на Auto и Tracking/Трэкинг в 20 pt. Для лучшего эффекта смените anti-aliasing mode/метода сглаживания на Sharp/Резкость. Переименуйте слой в ‘SAINT a’.

Шаг 2

Дублируйте слой и переименуйте копию в ‘SAINT b’ как показано ниже. Скройте слой ‘SAINT b’, чтобы работать было удобнее.

Шаг 3

При помощи инструмента Move/Перемещение выделите оба слоя с текстом и фоновый слой, затем кликните на иконки выравнивания Align Horizontal Center/Выровнять горизонтально по центру и Align Vertical Center/Выровнять вертикально по центру.

3. Стили для главного слоя

Шаг 1

Выберите слой SAINT a и в меню найдите Layer > Layer Style > Pattern Overlay/Слой>Стиль слоя>Перекрытие узора. Выберите паттерн concrete01 и настройте параметры эффекта как показано ниже.

Шаг 2

Перейдите в закладку Bevel & Emboss/Тиснение и Contour/Контур и настройте параметры как показано на скриншотах ниже.

Шаг 3

Чтобы подсветить буквы нам понадобится градиент. Для этого перейдите в закладку Gradient Overlay/Перекрытие градиента. Настройте параметры как показано ниже.

Шаг 4

Перейдите во вкладку Satin/Глянец и настройте параметры как показано ниже.

Шаг 5

Теперь добавим свечения. Во вкладке Inner Glow/Внутреннее свечение настройте параметры как показано ниже.

Шаг 6

Нам нужно добавить немного тени, чтобы отделить текст от фона. Для этого во вкладке Outer Glow/Внешнее свечение настройте параметры как указано ниже.

4. Стили для второго слоя

Шаг 1

Теперь перейдем к работе над слоем ‘SAINT b’. Активируйте его. Зайдите в палитру Character/Символ и смените параметр Horizontally Scale/Горизонтальный масштаб на 97%.

Шаг 2

В меню выберите Layer > Layer Style > Pattern Overlay/Слой>Стиль слоя>Перекрытие узора. Выберите паттерн concrete01 и настройте параметры как показано ниже.

Шаг 3

Переключитесь на вкладку Color Overlay/Перекрытие цвета и используйте следующие значения:

Шаг 4

Перейдите во вкладку Stroke/Обводка и настройте эффект как показано ниже.

Шаг 5

Добавим теней. Для этого перейдите во вкладку Drop Shadow/Тень и укажите параметры как показано ниже.

Шаг 6

Добавим свечения. Для этого перейдите во вкладку Outer Glow/Внешнее свечение и настройте параметры как указано ниже.

В этом уроке мы будем изучать основы работы с векторными формами (их ещё называют "фигурами", англ - Shapes) и слой-фигурами в Photoshop. Мы начнем с изучения применения пяти геометрических инструментов формы - "Прямоугольник" (The Rectangle Tool), "Прямоугольник со скруглёнными углами" (Rounded Rectangle Tool), "Эллипс" (Ellipse Tool), "Многоугольник" (Polygon Tool), и инструмент "Линия" (Line Tool). Чтобы узнать о каждой из этих фигур подробнее, кликните по их названию.

Затем, в следующем уроке, мы узнаем, как работать с более сложными фигурами - инструментом "Произвольная фигура" (Custom Shape Tool).

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

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

Инструменты форм

Adobe Photoshop имеет шесть инструментов формы, это "Прямоугольник" (The Rectangle Tool), "Прямоугольник со скруглёнными углами" (Rounded Rectangle Tool), "Эллипс" (Ellipse Tool), "Многоугольник" (Polygon Tool), "Линия" (Line Tool) и инструмент "Произвольная фигура" (Custom Shape Tool). Все они вложены в одном месте в панели инструментов. По умолчанию, на инструментальной панели отображён инструмент "Прямоугольник", но если вы нажмёте на него правой клавишей мыши, то откроется выпадающий список с остальными инструментами:

Инструменты векторных форм, верхний инструмент - "Прямоугольник" (Rectangle Tool)

Я выберу первый инструмент в списке, это "Прямоугольник" (Rectangle Tool).

Фигура, Контур или Пиксели

Прежде, начинать создавать какие-либо формы, в первую очередь необходимо указать Photoshop, какой тип формы мы хотим нарисовать. Это необходимо потому, что на самом деле Photoshop позволяет нам создать три абсолютно разных вида форм. Это "Фигура" (Shape), "Контур" (Path) и "Пиксели" (Pixel Shapes).

Установка опции режима инструмента "Фигура" (Shape)

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

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

Чтобы убедиться, что вы рисуете векторные фигуры, а не контуры или пиксели, выберите опцию "Фигура" (Shape) из видов режимов инструмента в панели параметров:

Выбор опции "Фигура" (Shape) на панели параметров

Заливка формы цветом

Следующее действие, которое мы, как правило, выполняем после выбора опции "Фигура", это выбор цвета, заполняющего форму, в версии Photoshop CS6 и выше, это делается с помощью клика по полю "Заливка" (Fill) в панели параметров:

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

Это действие открывает окно, которое позволяет нам выбрать один из четырех различных способов заполнения формы, каждый из которых представлен одним из четырех значков, расположенных вдоль верхней части окна. Назначение значков, начиная с левого края:

Нет цвета (No Color) - белый прямоугольник с красной диагональной линией, заливка отсутствует
Чистый цвет (Solid Color) - заливка сплошным цветом
Градиент (Gradient) - заливка градиентом
Узор (Pattern) - залива Photoshop-узором (паттерном)

Различные методы заливки формы

Нет цвета (No Color)

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

Ниже показан простой пример того, как выглядит форма без заливки цветом. Все, что мы видим - это основной контур формы, который так и называется - "Контур" (Path). Контур отображается только в документе Photoshop, так что при сохранении вашей работы в формате JPEG или PNG, или при печати, контур виден не будет. Чтобы сделать его видимым, мы должны добавить к нему обводку, способы добавления которой мы рассмотрим далее:

Фигура "Прямоугольник" без заливки и обводки.

Чистый цвет (Solid Color)

Чтобы заполнить вашу форму однотонным цветом, выбирайте опцию "Чистый цвет" (Solid Color) вторая иконка слева:

Опция "Чистый цвет" (Solid Color) для заливки фигуры сплошным однотонным цветом

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

Выбор цвета нажатием на образец.

Если нужного вам цвета нет среди представленных образцов,нажмите на значок "Палитра цветов" (Color Picker), расположенный в правом верхнем углу окна:

Клик на значок Color Picker для выбора собственного цвета.

Откроется диалоговое окно палитры цветов, выберите в неё цвет и нажмите OK, чтобы закрыть Color Picker после выбора нужного цвета.

Как видно на рисунке ниже, после этих действий мы имеем такую же форму, только теперь форма имеет цвет:

Фигура, залитая цветом.

Заливка градиентом

Чтобы заполнить вашу форму градиентом, выберите опцию "Градиент" (Gradient). Затем нажмите на одну из миниатюр для выбора предустановленного градиента, или используйте миниатюру полосы градиента, расположенную ниже, для создания своего собственного варианта градиента.

Выбор готового или создание собственного градиента для заливки фигуры.

Вот тот же форма, только теперь она заполнена градиентом:

Форма, заполненная одним из предустановленных градиентов Photoshop.

Заливка узором (Patterns)

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

Ниже показана та же форма, на этот раз заполненная узором:

Та же форма, только на этот раз залитая стандартным узором Photoshop.

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

Добавление обводки к векторной фигуре

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

Для добавления обводки, нажмите на соответствующую опцию в панели параметров:

Опция добавления обводки.

Это открывает окно с параметрами, где мы можем выбрать цвет обводки, а также, задать многие другие параметры.

В верхней части окна у нас есть те же самые четыре иконы для выбора типа заливки линии обводки, это "Нет цвета" (No Color), "Чистый цвет" (Solid Color), Градиент (Gradient) и "Узор" (Pattern). По умолчанию выбран вариант "Нет цвета". Я выберу тип "Чистый цвет" (Solid Color). Выбирать и назначать цвет обводки точно таким же образом, как и цвет заливки, о чем рассказано выше.

Изменение толщины обводки

Чтобы изменить толщину обводки, используйте соответствующее поле ввода, расположенное непосредственно справа от прямоугольника образца цвета в панели параметров. По умолчанию, толщина установлена в 3 пт (пункта). Но вы можете задать другие единицы измерения, если нажмёте на это поле ввода правой клавишей мыши, откроется выпадающий список единиц измерения. Я, практически всегда, выбираю пиксели:

Изменение ширины и единиц измерения обводки.

Опция выравнивания краёв (Align Edges)

Правее всех других, в панели параметров расположена опция "Выровнять края". При включении этой функции (она включена по умолчанию) Photoshop приведёт в соответствие положение краёв обводки с пиксельной сеткой, что сделает изображение чётче.
Опция будет активна только при единицах измерения обводки пиксели.

Дополнительные параметры обводки

По умолчанию, Photoshop рисует обводку в виде сплошной линии, но мы можем изменить это, нажав кнопку "Задать тип штриха фигуры" (Stroke Options ) на панели параметров:

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

Это открывает окно "Параметры обводки" (Stroke Options). В этом окне мы можем изменить тип линии со сплошной на пунктирную или состоящую из точек. Кроме этого, имеется три дополнительные опции обводки:

Диалоговое окно дополнительных параметров обводки

Опция "Выровнять" (Align) позволяет нам выбрать, будет ли обводка расположена внутри контура, снаружи или посередине.
Следующая опция "Концы" (Caps) работает только в случае, если мы выбрали пунктирную обводку. Мы можем изменить вид концов отрезков.

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

"Углы" (Corners) позволяют изменить вид угла при стыке линий обводки. Угля могут быть острыми (по умолчанию), закруглёнными или скошенными. Эта опция работает, если обводка расположена снаружи или посередине контура. Если обводка внутри контура, углы всегда остаются острыми.

Нажатие на кнопку внизу окна "Другие параметры. " (More Options. ) открывает ещё одно окно, где мы можем задать длину штрихов и разрывов между штрихами. Вот пример прямоугольной фигуры с заливкой и пунктирной обводкой с разными длинами штрихов:

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

В этой статье я расскажу, как нарисовать пиксель арт в Photoshop CC / CS6. Для этого мы используем пиксельную графику:

Создайте новый квадратный документ со сторонами от 20 до 100 пикселей ( в зависимости от того, насколько большой спрайт ). Я буду работать с холстом 50 на 50 пикселей:

Рисунок 1: Новый файл в Photoshop 50 на 50 пикселей

Рисунок 2: Новый пустой холст в Photoshop 50 на 50 пикселей

Рисунок 3: Инструмент «Карандаш» находится в выпадающем меню инструмента «Кисть»

Рисунок 4: Измените размер инструмента «Карандаш» на 1 пиксель

Рисунок 7: Задайте для сетки отображение каждого пикселя

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

Рисунок 9: Изменение интерполяции изображения на «По соседним пикселям»

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

Мы начнем с создания спрайта одиночного персонажа.

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

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

Рисунок 10: Ярлык для добавления нового однородного слоя находится в меню в нижней части палитры слоев

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

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

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

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

Вы можете создавать тело, как вам нравится. Вот, как это сделала я:

Рисунок 12: Порядок создания частей тела, начиная с головы

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

Рисунок 13: Добавление деталей персонажа, начиная с рубашки

Рисунок 14: У меня получился один слой заливки цветом, один слой тела и шесть слоев деталей

Файл Photoshop так, как он есть на текущий момент.

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

Дополнительный шаг, добавление теней

Создадим сведенную копию всех слоев. Для этого отключите видимость слоя заливки цветом ( нажмите на иконку глаза слева от миниатюры слоя ), затем нажмите Command-Option-Shift-E (Mac) или Ctrl-Alt-Shift-E (PC) . Это автоматически создаст сведенную копию всех видимых слоев поверх остального стека слоев.

Теперь я предлагаю поместить слои в отдельную папку и отключить ее видимость. Чтобы быстро сгруппировать слои, выберите их и кликните по ним, а затем нажмите Ctrl / Option -G :

Рисунок 16: Неиспользуемые слои сгруппируйте в папку. Я также вновь включила видимость слоя заливки

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

В конце у меня получилось два слоя теней: первый с непрозрачностью 25%, а второй с непрозрачностью 45%:

Рисунок 18: Добавление глубины с помощью дополнительных слоев теней

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

Если хотите, чтобы изображение было больше, перейдите в Изображение> Размер изображения , и задайте для параметра « Ресамплинг » значение « По соседним пикселям (четкие края) ».

Рисунок 20: Измените значение параметра «Ресамплинг» при изменении размеров

Подводя итоги

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

Читайте также: