Этот небольшой урок вам продемонстрирует, как всего за несколько шагов, используя 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 Шаг
Теперь пришло время добавить текст. Скачайте шрифт Oval Typeface нанесите надписи цветом #F1EFED. Напишите какой-нибудь цифровой код и имя. Затем примените следующие стили слоев:
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.
В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».
Александр Карачевский · #18 января 2011, 13:17
еще пару подобных уроков — и дизы останутся без работы)
Мы вакансии будем прям в уроке тогда публиковать. Выкрутимся… 😉
Ну… стараемся ж.. материал подбирать попривлекательнее))
Kreditovik · #7 июня 2012, 17:32
Хочу поменять картинку кредитки на сайте кредитовик ком юа. Что можете посоветовать? Буду благодарен))
Евгений Гетманенко · #8 июня 2012, 05:29
Советую меньше париться. Зачем вообще переделывать?
Источник
Синяя кредит-карта
Визитки на разные темы
Коллекция Mega из 64 тонких профессиональных и дизайнерских моделей.
Дизайн шаблона визитной карточки треугольника
Визитка абстрактного фона. Векторная иллюстрация
.
Набор реалистичных кредитных карт две стороны изолированы
Подарочная карта (дисконтная карта, визитная карточка, Подарочный купон, визитная карточка) с золотой цветочной карточкой (свиток), вихревой узор (дорожка). Черный фон для визитной карточки, ваучера, приглашения, билета. Вектор
Современный шаблон визитки
Иконка «Деньги без швов»
Коллекция вертикальных визитных карточек на различные темы
Дизайн кредитной карты
Набор абстрактного фона для дизайна
Простой векторный шаблон набора визиток
Подарочная карта (дисконтная карта, визитная карточка, Подарочный купон, визитная карточка) с золотой цветочной карточкой (свиток), вихревой узор (дорожка). Черный фон для визитной карточки, ваучера, приглашения, билета. Вектор
Визитка водитель такси, плоский современный модный стиль желтый и черный пластиковый кредит
Шаблон цветовой треугольной мозаики
Визитка
Вертикальные и горизонтальные карты Mix Collection на различные темы
Стильный дизайн визитной карточки
.
Бизнес и финансы Рисуют контур иконки
Шаблон с монетами, долларами и кредитными картами
Визитка абстрактного фона. Векторная иллюстрация
.
Шаблон
Шаблон с монетами, долларами и кредитными картами
Набор роскошных металлических фонов
Контур, монохромная мандала. этнический, религиозный элемент дизайна с круговой структурой
Набор роскошных металлических фонов
Роскошный пионский узор
.
Бесшовный векторный фон с иконками покупок
Подарочная карта
Красивая подарочная карта
Подарочные карты с зелеными лентами
Смешанные баннеры и визитные карточки
Шаблон квадратной мозаики
Фиолетовый треугольный шаблон визитной карточки
Разноцветный абстрактный дизайн шаблона визитки
Шаблон мозаики треугольника
Минимальный дизайн флаера
Коллекция визиток
Коллекция вертикальных визитных карточек на различные темы
Визитка
Мбаппе нарисовал безмозглые финансовые иконы
Подарочный купон, шаблон дисконтной карты с цветочным орнаментом фона
Зеленая мозаика дизайн визитной карточки
Технология бизнес-карт
Набор роскошных металлических фонов
Набор черных карт. Вектор
.
Современный стиль бизнес-кружка оригами
.
Цветная цифровая мозаика
Визитки на разные темы
Креативный бизнес или дизайн визитной карточки
.
Подарочный купон, подарочная карта (дисконтная карта, визитная карточка) с абстрактным рисунком (круги). Дизайн серебряного фона для телефонной карточки, ваучера, приглашения, билета и т.д. Вектор
Подарочная карта
Векторная кредитная карта
Набор векторных сетей и икон социальных сетей. Ref-flat
Электронная коммерция
Набор иконок линии финансирования бизнеса
Подарочный купон, шаблон дисконтной карты с цветочным орнаментом фона
Серебряная карта участника
Цветочный дизайн визитки
.
Электронная коммерция онлайн покупки бесшовные фоновый рисунок
Бизнес-модель
.
Шаблон Подарочная карта, кредитная карта, визитная карточка, приглашение, документ
Кредитная карта
Серебряная декоративная карта. Векторная иллюстрация
Смешанные баннеры и визитные карточки
Концепция дизайна знаков доллара США
Бесшовный векторный фон с красочными иконками для покупок
Красивая подарочная карта
Подарочная карта (дисконтная карта, визитная карточка, Подарочный купон, визитная карточка) с золотой цветочной карточкой (свиток), вихревой узор (дорожка). Дизайн фона для визитной карточки, ваучера, приглашения, билета. Вектор
Самая большая коллекция векторных логотипов деньги, финансы
Коллекционные карточки на разные темы
Набор роскошных металлических фонов
Шаблон Подарочная карта, кредитная карта, визитная карточка, приглашение, документ с круглыми узорами
Подарочный купон, шаблон дисконтной карты с цветочным орнаментом фона
Схема покупок
Векторная цветочная визитка
Кредитная карта
Подарочный купон, шаблон дисконтной карты с цветочным орнаментом фона
Цветочные визитки
Красивая подарочная карта
Шаблон купона подарочных сертификатов
Набор визиток
Успех — купить и продать онлайн — графический дизайн концепции
Подарочная карта
Кредитная карта
Большой набор векторных логотипов
Красивый набор ваучеров, векторная иллюстрация
Шаблон с монетами, долларами и кредитными картами
Комплект подарочных карт
Торгово-промышленный план Ручной рисунок иконки
Зеленый геометрический набор шаблонов визитных карточек
Подарочная карта с подарочной коробкой. Значения карт 25, 50, 75, 100, 150, 250. Набор векторных иллюстраций
.
Безшовный иконный рисунок азартных игр
Подарочные карты с розовыми лентами
Модель покупок и доставки
Комплект из семи продаж и шопинга бесшовные шаблоны фонов
Набор карт
Коллекция вертикальных визитных карточек на различные темы
Бронзовая карта класса люкс
Этот небольшой урок вам продемонстрирует, как всего за несколько шагов, используя 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 Шаг
Теперь пришло время добавить текст. Скачайте шрифт Oval Typeface нанесите надписи цветом #F1EFED. Напишите какой-нибудь цифровой код и имя. Затем примените следующие стили слоев:
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.
В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».
Александр Карачевский · #18 января 2011, 13:17
еще пару подобных уроков — и дизы останутся без работы)
Мы вакансии будем прям в уроке тогда публиковать. Выкрутимся… ????
Ну… стараемся ж.. материал подбирать попривлекательнее))
Kreditovik · #7 июня 2012, 17:32
Хочу поменять картинку кредитки на сайте кредитовик ком юа. Что можете посоветовать? Буду благодарен))
Евгений Гетманенко · #8 июня 2012, 05:29
Советую меньше париться. Зачем вообще переделывать?