Как сделать стикер в Фотошопе для Телеграмма » DelPC.ru

Специальной программы для создания стикеров в Телеграмм нет. Собственные стикеры в Телеграмм можно сделать в Фотошопе. Как сделать стикер в Фотошопе для Телеграмма:

1. Выберите подходящую картинку
2. Откройте её в Фотошопе
3. Выделите объект, который будет стикером
4. Настройте выделение через “Выделение” – “Уточнить край”, в поле “Вывод в” установите значение “Новый слой”
5. Выключите фоновый слой, чтобы остался только ваш объект на прозрачном фоне
6. Установите размер изображения 512 х 512 px
7. Нажмите “Файл” – “Сохранить для Web”
8. Укажите формат PNG при сохранение

Разобрались, как сделать стикеры для Telegram в Фотошопе? Задавайте вопросы в комментариях.

Для добавления своих стикеров найдите в поиске контактов бота — @Stickers. Этот бот расскажет вам, как создать стикеры в Телеграмме. Открыв его, нажмите кнопку “Начать” внизу экрана чата.

На экране представлены основные команды для работы с роботом.

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

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

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

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

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

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

1. Откройте окошко стикеров
2. Нажмите на кнопку настроек
3. В появившемся списке вы увидите подключенные к вам стикеры. Чтобы добавить новые стикеры в Telegram – нажмите на ссылку “Стикеры в тренде”

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

• В формате PNG
• Размером 512 х 512 px
• На прозрачном фоне

То есть можно сделать стикер из фото. Удобно сделать стикер онлайн или в Фотошопе. Так что, какие самому сделать стикеры для Telegram – это ваш полёт фантазии.

delpc.ru

Модный стикер | Photoshop

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

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

Если вы являетесь участником PSD PRO, то PSD файл и многое другое вы можете скачать здесь.

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

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

Начните с создания нового документа с размерами 10 на 10 пикселей. Далее нам нужно создать сетку, перейдите в Редактирование — Установки — Сетка и установите для нее основные метки через 5 пикселей, дополнительные — через 1 пиксель. Проверьте, отображается ли сетка. Если нет, нажмите Ctrl + ‘. Чтобы следующий шаг был еще проще, подключите режим Snap, Вид — Прикрепить:

Выберите голубой цвет, подойдет что-то вроде #0b7dac, затем выберите инструмент «Линия» и убедитесь, что на главной панели инструментов эта кнопка заполнения пикселей активна, ширина установлена 1 пиксель и установлен флажок для опции «Сглаживание».

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

Создайте новый документ с размерами 500 на 500 пикселей, затем создайте новый слой, нажмите D, чтобы сбросить цвета, а затем нажмите Ctrl + Backspace, чтобы заполнить этот слой белым. Щелкните правой кнопкой мыши на этом слое, выберите параметры наложения и добавьте наложение узора, используя настройки, приведенные ниже:

Выберите инструмент «Текст» и введите какой-нибудь текст. Если вы перейдете в Окно — Символы, вам будет выведен редактор символов, в котором вы сможете настроить параметры текста.

Я использовал шрифт Impact regular italic, а также скорректировал смещение (расстояние по горизонтали между знаками) и интервал (вертикальный интервал между строками). Теперь вы можете изменить цвет текста; для «PSD» я использовал цвет #ec7299, для ‘LEARNING’ #62acd1, но не бойтесь экспериментировать:

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

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

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

Затем я выбрал инструмент «Линия» и провел касательные от точки схождения до внешних краев текста. Если вы до этого делали какие-либо технические чертежи или графики, то это должно быть довольно просто для вас. Посмотрите на приведенное ниже изображение, если вы не понимаете, о чем я говорю:

Создайте новый слой и переместите его ниже слоя с текстом и проверьте, чтобы у него был тот же цвет переднего плана, который мы использовали раньше. Выберите инструмент «Прямолинейное лассо» и выделите область в пределах перспективных направлений, затем нажмите Alt + Backspace, чтобы заполнить ее темно-синим цветом.

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

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

Ниже я показал, как выглядит в этот момент моя панель слоев. Убедитесь, что текстовый слой и 3D слой находятся в группе. Теперь щелкните правой кнопкой мыши на группе слоев и выберите опцию «Преобразовать в смарт-объект». Если такой опции в меню нет, то вернитесь назад и щелкните левой кнопкой мыши на группе слоев и нажмите Ctrl + E, чтобы объединить их в группу:

Кликните правой кнопкой мыши на объединенном слое или смарт-объекте, перейдите к параметрам наложения и задайте для тени и обводки параметры, приведенные на рисунке ниже:

Теперь нажмите Ctrl + T, чтобы войти в режим «Свободное трансформирование», а затем переместите и измените размеры слоя, как показано на рисунке ниже:

Теперь вы можете добавить некоторые дополнительные элементы; я кратко опишу, что я сделал. Я трансформировал слой узора и добавил фильтр «Свертывание», используя облака, в качестве карты. Я также поместил слой облаков выше слоя узора и установил для него режим смешивания – «Наложение». Затем я использовал кисть-брызги с размером 3 пикселя, чтобы создать эффект чернильного пятна:

Данная публикация представляет собой перевод статьи «Funky Stickers» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Создаем красивый стикер в фотошопе

77

19.06.2011 | Автор: Трофименко Владимир | Просмотров: 4273

В этом фотошоп видеоуроке создаем эффектный стикер.

Видеоурок:

Источник: https://psdmaster.ru

Узнайте как скачать видеоурок с сайта

Что еще посмотреть:

25.10.2015 | Просмотров: 2322

В этом уроке фотошоп Татьяна Долинская, из команды сайта фотошоп мастер, расскажет как нарисовать в фотошопе рыжего кота

05.05.2015 | Просмотров: 2441

В этом уроке Басманов Максим расскажет как создать логотип в ретро стиле в фотошопе.

01.06.2011 | Просмотров: 11247

В этом видеоуроке фотошоп мы с Вами будем создавать объемный шар.

24.09.2014 | Просмотров: 2806

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

02.07.2011 | Просмотров: 7638

В этом видеоуроке фотошоп создаем золотое свечение

psdmaster.ru

Проектируем мобильное приложение в Photoshop / Фотошоп-мастер

То, что вы создадите

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

Стикеры

Исходные материалы:

• Набор стикеров 
• Шрифт Roboto 
• Иконки 
• Цветовая палитра материального дизайна 

Скачать архив с материалами к уроку

Зачем использовать стикеры?

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

Перетаскивание в дизайне интерфейса

Хотя в этом уроке мы будем использовать Adobe Photoshop, стоит отметить, что стикеры доступны для Sketch, Adobe Illustrator и After Effects.

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

• Adobe Photoshop CC
• Последняя версия стикеров в стиле материального дизайна для Фотошопа

1. Открываем стикеры

Запустите Фотошоп и нажмите Файл > Открыть… (File > Open…), чтобы открыть скачанный вами файл со стикерами. Если на вашем компьютере ещё не установлен шрифт Roboto, Фотошоп предложит вам либо синхронизировать его с Adobe Typekit, либо загрузить его из другого источника (например, Google-шрифты).

Если вы используете Typekit, нажмите кнопку Разрешить (Resolve Fonts), чтобы продолжить. Само собой, вы должны войти в свою учетную запись Creative Cloud, чтобы синхронизация завершилась.

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

2. Создаём глобальные (общие) элементы

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

В файле стикеров все глобальные элементы присутствуют внутри группы слоёв, называемой глобальными элементами (Global elements). Он также содержит глобальные элементы для мобильных телефонов, планшетов и настольных компьютеров. Но пока сосредоточимся только на группе MOBILE. Удерживая ALT, щёлкнем по иконке глаза возле названия группы Mobile.

Как вы видите, группа слоёв содержит все нужные элементы, а также несколько вспомогательных элементов, которые помогут нам правильно расположить виджеты пользовательского интерфейса. Перейдите в Слой > Создать дубликат группы… (Layer > Duplicate Group …), чтобы создать его копию в новом документе MyMaterialApp.

В этом уроке мы создаем пользовательский интерфейс приложения для Android, которое будет подсчитывать потребляемые калории. Поэтому в новом документе разверните группу слоёв «App Bar» и используйте инструмент «Горизонтальный текст» (Horizontal Type Tool) (T), чтобы изменить название приложения на «Калории».

Кроме того, наш дизайн будет иметь диаграмму в области панели приложений. Чтобы освободить для неё место, выделите слои «key shadow» и » ambient shadow «, нажмите Ctrl + T (Свободное трансформирование) и сделайте их высотой 250 пикселей. Не забудьте сохранить изменения, нажав Enter.

3. Добавляем список

Вернитесь на вкладку документа со стикерами и найдите группу слоёв LISTS. В ней есть восемь различных типов списков. Мы, однако, будем использовать только седьмой тип. Поэтому выберите группу слоёв с именем List7 и перейдите в Слой > Создать дубликат группы… (Layer > Duplicate Group …), чтобы скопировать её в документ MyMaterialApp.

На вкладке MyMaterialApp убедитесь, что слой List7 расположен прямо под слоем панели приложений (App bar). Если это так, вы увидите, что направляющие и содержимое списка выровнены идеально.

Всегда лучше давать своим группам слоёв значимые названия. Поэтому переименуйте группу List7 в «Список продуктов».

4. Изменяем названия пунктов списка

Давайте теперь изменим список так, чтобы он отображал названия блюд вместе с их размерами порций. Это делается просто. Выберите нужные слои и используйте инструмент «Горизонтальный текст» (Horizontal Type Tool) (T) для изменения их содержимого. Я предлагаю вам также изменить вес шрифта для названий блюд на «Жирный» (Bold).

Приложение для подсчёта калорий не было бы таким полезным, если бы оно не отображало калории. Однако в нашем списке больше нет места для текста. Поэтому удалим слои «square» из групп слоёв list_01, list_02 и list_03.

Теперь вы можете использовать инструмент «Горизонтальный текст» (Horizontal Type Tool) (T) для добавления слоёв, отображающих калории. Установите размер шрифта слоёв на 24 px, шрифт Roboto Regular и цвет # 333333.

5. Добавляем иконки в стиле материального дизайна

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

Откроем страницу Material Icons и выберем первую иконку под названием local pizza (Проще всего вбить название в строке поиска). В нижней части страницы появится голубая строка, в ней нужно изменить размер на 36 dp и нажать кнопку JPGS, чтобы загрузить zip-архив с иконкой.

Распакуйте архив и в папке android/drawable-mdpi найдите нужное изображение. Перетащите его на вкладку MyMaterialApp в окне Фотошопа.

Повторите те же шаги для иконок local cafe и local dining.

Теперь мы можем заменить слои «circle» в элементах списка иконками. Начнём с иконки пиццы. Выделите её слой и слой «circle», который находится внутри группы слоёв list_01. Перейдите в меню «Слой > Выровнять > Центры по вертикали» (Layer > Align > Vertical Centers), чтобы выровнять их по вертикали. Аналогичным образом перейдите в меню «Слой > Выровнять > Центры по горизонтали» (Layer > Align > Horizontal Centers), чтобы выровнять их центры по горизонтали.

Теперь можно удалить слой «circle» в группе list_01.

Повторите те же шаги для двух оставшихся иконок.

6. Добавляем цвет

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

Выберите слой с названием «ic_local_pizza_black_36dp», щёлкните по нему правой кнопкой мыши и выберите «Параметры наложения» (Blending Options). В открывшемся диалоговом окне перейдите в раздел «Наложение цвета» (Color Overlay) и установите цвет # ffc107, который в дальнейшем будет называться «Янтарный 500» (Amber 500) на цветовой палитре материального дизайна.

Повторите те же действия для слоёв с названиями «ic_local_cafe_black_36dp» и «ic_local_dining_black_36dp». Убедитесь, что каждый раз был выбран другой цвет.

Давайте теперь раскрасим глобальные элементы. Чтобы изменить цвет фона, выберите слой «Фон» (Background), нажмите «А», чтобы выбрать прямоугольник внутри него, и измените цвет заливки на белый.

Чтобы изменить цвет строки состояния, откройте группу слоев «Строка состояния» (Status bar), выберите слой с именем «bar», нажмите «A» и измените цвет заливки на красный 900 (Red 900), шестнадцатеричное значение которого # b71c1c.

Аналогичным образом, чтобы изменить цвет панели приложения, откройте группу слоев «Панель приложения» (App bar) выберите слой «key shadow», нажмите «А» и установите цвет заливки на Красный 500 или # f44336.

7. Добавляем плавающие кнопки действия

Плавающая кнопка действия − это один из самых важных виджетов пользовательского интерфейса в стиле материального дизайна. Чтобы копировать её в наш дизайн, продублируйте группу слоёв «Floating action button» (Плавающая кнопка действия) из документа со стикерами. Если затруднитесь с поиском, найдите её в группе слоёв «METRICS AND KEYLINES».

Разместите группу слоёв » Плавающая кнопка действия » над группой слоёв «Список продуктов».

Затем, используя инструмент «Перемещение» (Move Tool) (V), поместите плавающую кнопку действия в нижний правый угол пользовательского интерфейса.

Плавающая кнопка действия должна быть акцентного цвета (дополняющего основные). Поэтому выберите слой «key shadow» внутри текущей группы слоёв, нажмите «A», чтобы выбрать круг внутри него, и измените цвет заливки на Red Accent 700 (Красный акцентный 700) или # d50000.

Аналогичным образом измените цвет слоя «ic_add», который содержит символ плюса, на белый. Кроме того, откройте его Параметры наложения (Blending Options) и измените Непрозрачность (Opacity) на 100%.

8. Обрезаем документ

Вы могли заметить, что наш документ получился очень большим, и проект занимает в нём лишь маленькую часть. Чтобы изменить размер документа таким образом, чтобы он соответствовал размеру дизайна, нажмите «Изображение > Тримминг» (Image > Trim). В появившемся диалоговом окне оставьте значения по умолчанию и нажмите OK.

9. Добавляем диаграмму

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

Начнём с включения сетки. Для этого перейдите в меню «Просмотр > Показать > Сетку» (View > Show > Grid).

Нажмите Shift + Ctrl + N, чтобы создать новый слой внутри группы слоёв «App bar», и используйте инструмент «Карандаш» (Pencil Tool) (B), чтобы нарисовать четыре горизонтальные линии, белого цвета и толщиной в 1 пиксель ниже названия приложения.

Используя инструмент «Горизонтальный текст» (Horizontal Type Tool) (T), добавьте три даты ниже последней горизонтальной линии. Размер шрифта дат − 13 пикселей.

Теперь можно отключить сетку, снова нажав «Просмотр > Показать > Сетку» (View > Show > Grid).

Выделите все слои, созданные в этом шаге, и нажмите Ctrl + G, чтобы создать для них новую группу слоёв. Назовите группу «Диаграмма» (Chart).

Затем, внутри группы слоёв «Диаграмма» создайте новый слой и назовите его «Данные». Внутри слоя нарисуйте замкнутый контур с помощью инструмента «Перо» (Pen Tool) (P). Форма контура не очень важна, если она похожа на гладкую кривую.

Чтобы залить контур цветом переднего плана, перейдите на панель «Контуры» (Paths), щёлкните правой кнопкой мыши на «Рабочий контур» (Work Path) и выберите «Заливка контура …» (Fill path). В открывшемся диалоговом окне оставьте значения по умолчанию и нажмите ОК.

Чтобы диаграмма не выглядела такой назойливой, уменьшите непрозрачность группы слоёв «Диаграмма» до 75%.

Наконец, используйте инструмент «Горизонтальный текст» (Horizontal Type Tool) (T), чтобы под графиком отобразить общее количество потребляемых калорий. Пусть размер шрифта цифр будет 24 px, а размер шрифта слов − 14px.

Наш дизайн закончен. Идем дальше и скрываем группу слоёв «Guides», она нам больше не понадобится.

10. Создаём обложку устройства

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

Сначала экспортируйте свой дизайн в файл JPG, нажав в меню «Файл > Сохранить как» (File > Save As).

Теперь перетащите файл JPG на любое из устройств, которые вы видите в Device art generator. Обратите внимание, что вам нужно масштабировать изображение, по крайней мере, до 1080 × 1920 пикселей, чтобы использовать обложки новейших моделей устройств.

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

Заключение

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

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

Чтобы узнать больше о дизайне приложений для Android, а также найти ещё больше дизайнерских ресурсов, можно посетить сайт Google Design.

Автор: Ashraff Hathibelagal

photoshop-master.ru

Создаём 3D стикер с текстом в Photoshop / Фотошоп-мастер

Эффект создания 3D стикера очень лёгок и прост, при этом эффект по-настоящему красивый и полезный. В этом уроке я покажу вам, как создать текст в виде 3D стикера, используя смарт-объекты и стили слоя. Итак, давайте приступим!

Скачать архив с материалами к уроку

Итоговый результат

 

1. Создаём задний фон

Шаг 1

Создайте новый документ со следующими размерами 770 x 490px. Установите цвет переднего план на #3f797d, а цвет заднего плана на #80b2bb, выберите инструмент Градиент (Gradient Tool), в настройках данного инструмента, выберите Линейный градиент (Linear Gradient). Далее, потяните градиент снизу верх, создав градиентный задний фон.

Далее, идём Преобразовать для смарт-фильтров (Filter > Convert for Smart Filters).

Шаг 2

Дважды щёлкните по слою с задним фоном, чтобы применить стиль слоя Перекрытие узора (Pattern Overlay). Примените следующие настройки:

Режим наложения (Blend Mode): Мягкий свет (Soft Light)
Узор (Pattern): текстура Бетонной стены
 

Итак, мы создали задний фон, применив стилизацию.

2. Создаём текст

Шаг 1

Создайте текст, шрифт текста Alba, размер шрифта 120pt, цвет текста чёрный.

Шаг 2

Продублируйте слой с текстом. Назовите оригинальный слой с текстом Обводка (Stroke), а дубликат слоя назовите Текст (Text).

Шаг 3

Дважды щёлкните по слою Обводка(Stroke), чтобы применить стиль слоя Обводка(Stroke). Примените следующие настройки:

Размер(Size): 14
Цвет(Color): #dcdcdc

Шаг 4

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

Шаг 5

Щёлкните правой кнопкой по каждому слою, которые мы создали (слой Обводка (Stroke) и слой Текст (Text), и в появившемся окне, выберите опцию Преобразовать в смарт-объект (Convert to Smart Object).

Продублируйте слой Текст (Text). Для дубликата слоя, уменьшите значение Заливки (Fill) до 0.

Примечание переводчика: назовите дубликат слоя «дубликат 1 слоя Текст (Text)».

Шаг 6

Продублируйте дубликат 1 слоя Текст (Text), а также продублируйте слой Обводка (Stroke). Для дубликата слоя Обводка (Stroke), уменьшите значение Заливки (Fill) до 0, расположите данный дубликат слоя поверх всех слоёв.

Примечание переводчика: 2-й дубликат можно назвать «дубликат 2 слоя Текст (Text)».

3. Применяем стилизацию к слою обводка (Stroke)

Дважды щёлкните по слою Обводка (Stroke), чтобы применить следующие стили слоя:

Шаг 1

Добавьте стиль слоя Тиснение (Bevel and Emboss). Примените следующие настройки:

Размер (Size): 10
Уберите галочку в окошке Глобальное освещение (Global Light)
Угол(Angle): 79
Высота(Altitude): 37
Поставьте галочку в окошке Сглаживание (Anti-aliased)
Режим Тени (Shadow Mode) – цвет: #2f959d

Шаг 2

Далее, добавьте стиль слоя Внутренняя тень (Inner Shadow) со следующими настройками:

Смещение (Distance): 0
Стягивание(Choke): 30
Размер (Size): 3

Шаг 3

Далее, добавьте стиль слоя Тень (Drop Shadow) со следующими настройками:

Непрозрачность (Opacity): 47%
Смещение (Distance): 5
Размер(Size): 6

Итак, мы добавили стилизацию к нижнему слою с обводкой.

4. Применяем стилизацию к оригинальному слою текст (Text)

Дважды щёлкните по оригинальному слою Текст (Text), чтобы применить следующие стили слоя:

Шаг 1

Добавьте стиль слоя Тиснение (Bevel and Emboss). Примените следующие настройки:

Размер (Size): 7
Уберите галочку в окошке Глобальное освещение (Global Light)
Угол (Angle): 117
Высота (Altitude): 69
Поставьте галочку в окошке Сглаживание (Anti-aliased)

Шаг 2

Далее, добавьте стиль слоя Внутренняя тень (Inner Shadow) со следующими настройками:

Непрозрачность (Opacity): 35%
Смещение(Distance): 0
Размер (Size): 5

Шаг 3

Далее, добавьте стиль слоя Наложение цвета (Color Overlay) со следующими настройками:

Цвет(Color): #ea326e

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

Итак, мы добавили стилизацию к основному слою с текстом.

5. Применяем стилизацию к дубликату 1 слоя текст (Text)

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

Шаг 1

Добавьте стиль слоя Тиснение (Bevel and Emboss). Примените следующие настройки:

Размер (Size): 5
Уберите галочку в окошке Глобальное освещение (Global Light)
Угол (Angle): 0
Высота (Altitude): 69
Поставьте галочку в окошке Сглаживание (Anti-aliased)
Режим Тени (Shadow Mode) – Непрозрачность (Opacity): 25%

Шаг 2

Далее, добавьте стиль слоя Контур (Contour) со следующими настройками:

Просто поставьте галочку в окошке Сглаживание (Anti-aliased).

Таким образом, мы усилили эффект глянца.

6. Применяем стилизацию к дубликату 2 слоя текст (Text)

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

Шаг 1

Добавьте стиль слоя Тиснение (Bevel and Emboss). Примените следующие настройки:

Стиль (Style): Внешний скос (Outer Bevel)
Размер (Size): 7
Уберите галочку в окошке Глобальное освещение (Global Light)
Угол (Angle): 117
Высота (Altitude): 69
Поставьте галочку в окошке Сглаживание (Anti-aliased)
Режим Подсветки (Highlight Mode) – Непрозрачность (Opacity): 100%
Режим Тени (Shadow Mode) – Непрозрачность (Opacity): 100%

Шаг 2

Далее, добавьте стиль слоя Наложение градиента (Gradient Overlay) со следующими настройками:

Режим наложения (Blend Mode): Мягкий свет (Soft Light)
Непрозрачность (Opacity): 30%

Итак, мы добавили внешнюю обводку к внутренней части текста, создав ощущение 3D эффекта.

7. Применяем стилизацию к самому верхнему слою обводка (Stroke)

Дважды щёлкните по дубликату слоя Обводка (Stroke), чтобы применить следующие стили слоя:

Шаг 1

Добавьте стиль слоя Тиснение (Bevel and Emboss). Примените следующие настройки:

Размер (Size): 3
Смягчение (Soften): 2
Уберите галочку в окошке Глобальное освещение (Global Light)
Угол (Angle): -153
Высота (Altitude): 69
Поставьте галочку в окошке Сглаживание (Anti-aliased)
Режим Подсветки (Highlight Mode): Яркий свет (Vivid Light)

Шаг 2

Далее, добавьте стиль слоя Контур (Contour) со следующими настройками:

Просто поставьте галочку в окошке Сглаживание (Anti-aliased).

Итак, мы применили стилизацию к заключительному слою.

Поздравляю! Мы завершили урок.

В этом уроке мы создали просто задний фон, а также создали пару слоёв с обводкой и текстом, которые мы преобразовали в смарт-объекты.

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

Итоговый результат

Скачать архив с материалами к уроку

Автор: Rose

 

photoshop-master.ru

Рисуем липкие стикеры в фотошопе

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

Итак, в качестве примера создадим в фотошопе документ, можно стандартный web (640×480), разрешение 72рх на дюйм. Зальем фон цветом #3e3d3d. Далее создадим новый слой, выбираем инструмент Кисть белого цвета в форме круга. Размер кисти 50рх, жесткость 0. Посередине документа на новом слое нажимаем кистью один раз. Делаем прозрачность круга 60%. Применяет размытие по Гауссу 70рх. К фону добавляем шум. Вкладка: Фильтр — Шум — Добавить шум и выставляем значение 2% по Гауссу, монохромный. Можно еще применить наложение цвета, какой Вам больше нравится и сделать его прозрачность примерно 10%.

Итак, фон у нас готов. Теперь берем инструмент Прямоугольник и рисуем прямоугольную фигуру белого цвета. Копируем Ctrl + J фигуру и перемещаем копию ниже оригинала (перетащить мышкой слой копии). к копии слоя применяем наложение черного цвета. Затем выбираем инструмент Трансформирование или же просто нажимаем Ctrl + T. Зажимаем Ctrl и тянем правый нижний угол копии фигуры вниз на несколько пикселей и немного влево по диагонали. Выставляем прозрачность слоя 70% и применяем размытие по Гауссу 3рх. В принципе один стикер мы уже изготовили. Должно получиться примерно вот так:Теперь попробуем добавить немного эффектов для самого стикера. Для этого можно применить наложение узора и внутреннюю тень и выставить прозрачность на глаз. Вот, что должно примерно получится.

serblog.ru

No related posts.