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

Обновлено: 03.07.2024

Иллюстратор Амир Занд из Quantic Dream рассказал, как проходит работа над ранними концептами, если время на поиски ограничено. Перевели главное.

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

Как видите, я создал абстрактную форму на холсте — это первый шаг. Попробуйте и вы. После выделите эту форму и идите по пути Edit/Define as Brush preset, затем — сохранение. То, что вы выделили, сохранится как кисть и появится сверху вашего списка кистей. Не беспокойтесь за белые участки выделения — Photoshop учитывает только черные элементы, игнорируя белые.

На изображении «C» пример того, как выглядит мазок этой кистью. Она еще не готова, поэтому давайте немного ее подправим! Выделите кисть и затем выберите Brush preset (Windows Brush Preset). Далее я пойду в Brush Tip и поменяю значение Spacing на 0%, чтобы получить более мягкую гладкую кисть.

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

(Прим. ред: кисть Амира можно скачать тут).

Получилось вот так:

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

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

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

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

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

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

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

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

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

Здесь я вношу в работу новый тон, чтобы подготовить ее к добавлению деталей дальше. Я использую Color Balance, который можно найти тут: Image > Adjustments > Color Balance (по умолчанию это сочетание клавиш ctrl+B). Я начинаю менять тон для параметров Shadows/Midtones и Highlights. Можете посмотреть, что именно получилось, на изображении ниже.

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

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

Например, режим Darker Color будет влиять только на светлые цвета и яркие участки, игнорируя темные зоны, и с этим режимом вы легко можете контролировать световые зоны. Lighter Color работает с точностью до наоборот. Overlay позволяет добавить любой цвет и смешать его с уже существующим цветом, сохраняя и светлые, и темные участки. (прим. ред: а еще мы предлагаем почитать про три режима, которые использует художник Atey Ghailan, вот тут).

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

Многие из них будут забыты. Часто люди думают, что все, что они делают, должно попасть в финальный проект, но это не так. Вы должны сделать очень много всего, чтобы получить единственный концепт. Так много “нет” для одного “да”!

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

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

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

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

А тут — почему многие художники начинают работу с чб.

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

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

Шаг 1. Начнём с создания нового документа, автор использовал Ширину - 600px, Высота - 600px. Используем Инструмент Прямоугольник со скругленными углами (U), Радиус - 20px, нарисуйте прямоугольник, как показано ниже, изменим форму прямоугольника, используя Инструмент Перо+ (Добавить опорную точку), разместите опорные точки как показано на изображении.

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

Шаг 3. Назовите этот Слой Base. Ctrl + клик на миниатюре слоя, чтобы создать выделение. Создайте новый слой с именем Outside Stroke. Редактирование > Выполнить обводку. Примените Обводку размером в 8px, Позиция относительно границы - По Центру. (Вы можете использовать любой цвет).

(Перевод комментария на скриншоте.
Измените его Прозрачность (Opacity) на 60%)

Шаг 4. Теперь мы должны создать тень для слоя Outside Stroke. Чтобы сделать это, Вы должны будете дублировать слой и переместить его под основным Outside Stroke. Слой > Стиль Слоя > Наложение цвета. Заполните его Чёрным цветом. Фильтр>Размытие>Размытие по Гауссу. Радиус - 0.9 px. Измените Прозрачность на 7%. У Вас должно получиться что-то подобное.

Шаг 5. Выделите слой Base. Создайте новый слой и назовите его Glow Overlay1. Заполните его белым цветом и переместите выделение вниз. Нажмите Del. Измените его Прозрачность до 7%.

Шаг 6. Настало время глянца. Используйте Инструмент Перо (P) и нарисуйте форму как это показано на изображении. Назовите этот слой Glow Overlay2. Измените его Прозрачность до 11%.

(Перевод комментария на скриншоте.
Используйте Инструмент Перо (P), чтобы создать форму, как на изображении.
Возьмите инструмент Ластик (E). Размер=100 Прозрачность=50% и стирайте выделяющиеся области. В тех местах, где показано оранжевым цветом, пройдите Ластиком 4 раза, а там где салатовым - 6 раз
Измените прозрачность слоя на 11%. Дубликат этого слоя и поместите ниже.)

Шаг 7. Снова выделите слой "Base". Создайте новый слой и назовите его “Box Glow”. Заполните его белым цветом. Выделение > Модификация > Сжать, Сжатие 30px. Удалите эту область, используя Инструмент Ластик (E). Смотрите изображение ниже.

(Перевод комментария на скриншоте.
Выделение > Модификация > Сжать, Сжатие 30px. Удалите эту область, используя Инструмент Ластик (E)
Size=40. Opacity=50, пройдите ластиком по отмеченным местам цветом 3 раза
Примените Стиль Слоя.
Изменение Прозрачность до 33%)

Шаг 8. Всё это дело стиля и фантазии. Можете применить и свои стили и параметры.

Шаг 9. Наш следующий шаг должен придать этому изображению стеклянный вид. Создайте новый слой и назовите его Glass. Возьмите Инструмент Прямоугольник со скругленными углами , Радиус - 10px, Режим наложения изменим на Свечение. Действия данного шага представлены на изображении ниже.

(Перевод комментария на скриншоте Нарисуйте прямоугольное выделение. Заполните его белым цветом.
Возьмите Инструмент Ластик, Радиус=60, Прозрачность=50.
В тех местах, где показано оранжевым цветом, пройдите Ластиком 6 раз, а там , где бирюзовым - 4 раза
Попытайтесь создать нечто похожее на то, что представлено на изображении)

Шаг 10. Теперь Вы должны создать край стекла. Нарисуйте такую же самую форму, используя Инструмент Прямоугольник со скругленными углами , выделите фигуру, Редактирование > Выполнить обводку, ширина - 1px, Позиция относительно границы - По центру, цвет - белый. Измените режим наложения слоёв на Перекрытие. Проделайте операции, показанные на изображении, используя Инструмент Ластик (Е).

(Перевод комментария на скриншоте.
Возьмите Инструмент Ластик , используйте предыдущие настройки инструмента.

Сотрите эту область 7 раз
Сотрите эту область 5 раз

Измените режим наложения на Перекрытие.)

Шаг 11. Теперь напечатайте текст (на Ваш выбор). Создайте новую Группу, назовите его Object Front, и поместите все слои в эту группу.

Шаг 12. Чтобы создать заднюю часть изображения, создайте новый слой под слоем Object Front и назовем его Object Back, создайте фигуру, используя Инструмент Прямоугольник со скругленными углами , затем примените следующие Стили Слоя.

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

Шаг 13. Теперь пришло время добавить глянцевый эффект к слою Object Back. Проделайте с этим слоем вышеописанные шаги по приданию глянца.

Шаг 14. Наш следующий шаг: добавление тени к слою Object Back. Так же сделайте небольшое выделение, как показано на изображении и примените к нему Размытие по Гауссу. Режим наложение - Перекрытие.

(Перевод комментария на скриншоте.
Создайте выделение, используя Инструмент Прямоугольная область (М), Заполните его черным. Фильтр>Размытие>Размытие по Гауссу> приблизительно 16рх. Режим наложение - Перекрытие.)

Шаг 15. Создайте Новую Группу, назовите её Object Back и поместите слои в группу. После этого, создайте область выделения на верхней части изображения папки. Создайте новый слой выше Группы Object Back. Назовите слой Head. Используйте инструмент Перо, чтобы получить изображение, показанное ниже..

(Перевод комментария на скриншоте.
Создайте фигуру как на изображении с помощью Инструмента Перо , нажмите Ctr+Enter, чтобы сделать выделение, заполните его белым цветом, после этого примените Стиль Слоя с приведёнными параметрами)

Шаг 16. Выделите слой Head и создайте новый слой, назовите его Head Stroke. Редактирование > Выполнить обводку, ширина - 1px, цвет - белый. Добавьте глянцевого эффекта к этому слою, но уже самостоятельно.

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

Перевод комментария на скриншоте.
Создайте прямоугольник, используя Прямоугольник со скругленными углами .
При помощи Ластика сотрите верхнюю и нижнюю области.
Выполните обводку в 1px на новом слое, Режим наложения – Перекрытие.
Примените стили слоя Наложение Градиента, Внутреннее свечение.
Дублируйте слой и объедините два слоя при помощи Ctrl+E.
Установите прозрачность на 43%.
Объедините все слои, вооружитесь инструментом Овальное выделение, создайте круг и нажмите Del. Создайте новый слой, получите выделение круга (сделанного ранее) и сделайте обводка у кольца в 2px. Примените Стиль слоя - Тень, Тиснение, Наложение Градиента.
Добившись желаемого результата, разместите текст (на Ваш вкус).

Шаг 18. Нарисуйте верёвочку, используя Инструмент Перо . К слою с верёвкой примените Стили слоя как и в шаге 17 к отверстию в лэйбле.

Шаг 19. Чтобы создать тень от лэйбла, проделайте действия из Шага 4, и сотрите внешние области. Установите Прозрачность в 61%.

Шаг 20. Создайте тень для изображения папки, разместив его ниже всех слоёв.

Результат:
Вы можете создать серию изображений, используя подобные методы.

Автор: Tanmoy Dey
Переводчик: Лукша Юрий
Ссылка на источник

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

Для начала создадим новый документ размером в 128×128 пикселей с прозрачным фоном.

Сделаем новый слой Ctrl+N и с помощью Pen Tool создадим область папки, примерно как на картинке ниже:

Нажмем правой кнопкой по нашему слою с папкой, выберем в раскрывшемся меню Blending Options и сделаем там следующие настройки:

Blend Mode: Normal

Должно получиться примерно так:

Скопируем слой Ctrl+J и идем в Edit -> Transform (в CS3 Transform Path) -> Perspective и потянем за правый верхний квадратик как показано на картинке ниже:

Теперь идем в Edit -> Transform (в CS3 Transform Path) -> Scale и немного уменьшаем нашу папку и тем самым придадим ей небольшой эффект 3d:

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

Делаем там следующие изменения:

Должно получиться что то вроде этого:

Положим листочек во внутрь папки, для этого поместим наш слой с листком между двумя слоями папки и повернем его как следует (картинка ниже) при помощи Ctrl +T.

Снизим прозрачность передней части папки до 50%-60%

Результаты которых добился автор этого урока добавив еще некоторые эффекты:

О сайте

ArtsLab

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

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

1 Шаг

Чтобы ускорить процесс, начнем с создания базовых объектов в Illustrator. Создайте прямоугольник со скругленными углами размером 3.5in на 1.9in. Затем залейте фигуру любым градиентом на свой выбор.

Нарисуйте несколько изогнутых линий, как показано на картинке при помощи Pen Tool. Затем откройте Object > Blend > Blend Options, в выпадающем списке Spacing выберите пункт Specified Steps и задайте ему значение 30. Кликните Ok. Создайте две разных кривых разных цветов.

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

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

Также при помощи Pen Tool нарисуйте ленту, как показано ниже.

2 Шаг

На этом шаге мы заканчиваем работу с Illustrator и переходим в Photoshop. Создайте новый документ, который должен быть чуть больше размеров документа в Illustrator. Далее перенесите из иллюстратора каждую деталь по отдельности в Photoshop. К этому времени вам уже нужно позаботиться о каких-то логотипах и графике, которые будет необходимо поместить на кредитку. Если таковых нет — попробуйте нарисовать своими силами. Разместите элементы на кредитной карточке, как показано ниже. Шрифты можете подбирать на свое усмотрение. Что-нибудь интересное можно найти здесь и здесь.

3 Шаг

4 Шаг

Что ж, наше творение начинает выглядеть как настоящая кредитная карточка. Теперь нанесем тени, чтобы придать изображению еще большей реалистичности. Дублируйте объемные надписи, смените цвет дублей на черный и отключите для них стили слоев. Только что мы получили основу для тени. Теперь сдвиньте все эти дубли на 3-5 пикселей правее и на 3 вниз. Затем примените к этим слоям фильтр Filter > Blur > Motion Blur с параметрами Angle 34, Distance 10px, установите режим наложения слоев в Multiply и задайте 50% Opacity. В качестве завершающего штриха для лицевой части посмотрите еще раз на образец кредитки и добавьте дату окончания ее срока на свой рисунок. Вот и все, с лицевой стороной кредитки мы закончили работу. Создайте новую группу для слоев и перенесите в нее все имеющиеся на данном шаге слои. Папку назовите “FRONT”.

5 Шаг

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

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

6 Шаг

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

Здесь все, включая роспись, можно создать с помощью инструментария Photoshop. Если у вас есть логотип — поверните его на 45 градусов, несколько раз продублируйте, задайте дублям разные цвета при помощи коррекции Hue and Saturation (Ctrl + U), слейте дубли в один слой и создайте по нему шаблон для заливки. Затем на новом слое создайте прямоугольник нужных для создания полосы для подписи размеров и примените к нему заливку по шаблону, применив стиль Pattern Overlay.

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

В завершение добавьте защитный код.

7 Шаг

Если хотите — можете остановиться уже здесь, но я собираюсь показать карту в объемном пространстве и добавить перспективу. Дублируйте каждую папку, затем выполните по ним поочередно клик правой клавишей мыши, выбирая пункт Merge Group. У вас должно получиться два слоя — каждый для своей стороны карточки. Затем уменьшите эти два слоя, нажав Ctrl + T и изменив их размеры, немного поверните и задайте им перспективу (щелчок правой клавишей мыши по рамке трансформации > пункт Perspective), как показано ниже.

8 Шаг

Выберите слой с кредитной карточкой (неважно какой — лицевой или обратный) и дублируйте его. Загрузите по нему выделение, залейте его серым цветом, а затем сдвиньте вправо на два пикселя — карта приобрела толщину. Теперь, чтобы создать тень, дублируйте кредитку, загрузите выделение по дублю и залейте его черным цветом. Далее нажмите Ctrl + T, затем выполните щелчок правой клавишей мыши по рамке трансформации и выберите пункт Distort, чтобы придать тени необходимое искажение. После этого выполните Filter > Blur > Gaussian Blur и в выпавшем окне задайте радиус размывки равным 10px. Режим наложения слоя смените на Multiply и задайте ему 30% Opacity.

Для создания отражения дублируйте оба слоя карточки, выделите их и отобразите по вертикали (Ctrl + R > клик правой клавишей мыши > Flip Vertical) и разместите их у кончика кредитки. Затем переключитесь на мягкий ластик Eraser Tool с 30% Opacity и затрите каждый слой для создания эффекта растворения.

9 Шаг

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

Заключение

Теперь добавьте фон и вуаля! Чтобы переключаться между сторонами кредитки, просто отключайте и включайте слой с лицевой стороной карточки, но не забывайте при этом проделывать то же самое и со слоем отражения. Этот урок хорошо подойдет, к примеру, для того, чтобы создать свой сет иконок. Экспериментируйте также с цветами карточек, меняя их при помощи коррекции Hue and Saturation.

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

еще пару подобных уроков — и дизы останутся без работы)

Мы вакансии будем прям в уроке тогда публиковать. Выкрутимся… ;-)

Ну. стараемся ж.. материал подбирать попривлекательнее))

Хочу поменять картинку кредитки на сайте кредитовик ком юа. Что можете посоветовать? Буду благодарен))

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