Как сделать смайлики в фотошопе

Как создать

Как сделать смайлики в фотошопе

Emoji стали неотъемлемой частью нашего повседневного общения. У Apple и Google есть свой набор смайликов, и список эмоций, которые вы можете выразить с их помощью, продолжает расширяться. Начиная с Windows 10, Microsoft добавила более простой способ вставки эмодзи в виде панели эмодзи. Если вам когда-нибудь понадобится вставить смайлик в дизайн-проект, вам будет приятно узнать, что вы можете вставить смайлики в Photoshop. Фактически, вы можете вставить их в любое приложение Adobe, которое поддерживает ввод текста. Вот как.

Вставить эмодзи в фотошоп

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

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

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

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

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

Другие приложения Adobe

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

Это должно работать как на MacOS, так и на Windows 10, а также, возможно, на Windows 7 и 8 / 8.1.

Источник

Рисуем смайлик в Photoshop

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

Откройте Photoshop и создайте в нём документ 200Х200 пикселей с прозрачным фоном. На новом слое инструментом Эллипс (U) нарисуйте круг во весь холст, не забудьте зажать клавишу Shift, чтобы круг поучился идеальным.

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

После применения градиента результат должен выглядеть так:

Переходим к стилям Тиснение и Контур. В контуре выберите стиль – линейный, диапазон 100% и перейдите к тиснению.

Этим смайлику мы придали объём.

Примените стиль Внутренняя тень.

Добавим смайлику блик. Продублируйте слой с кругом Ctrl + J и очистите стили слоя, сделав клик по нему правой кнопкой мыши и выбрав нужную команду. При помощи свободной трансформации Ctrl + T уменьшите копию и заполните радиальным градиентом от жёлтого к прозрачному.

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

Теперь нарисуем глаза. При помощи Эллипса (U) создайте два круга. Слои с формами выделите и объедините. К полученному слою примените Тень коричневого цвета, а затем Тиснение с такими настройками:

После этого примените Внутреннюю тень.

Читайте также:  Как сделать сенсорную ручку

Улыбку смайлика мы создадим при помощи Пера (P). После этого сделайте клик правой кнопкой мыши по контуру и выберите команду Выполнить обводку. Установите красный цвет и ширину 5 пикселей. К улыбке добавьте Тень и Внутреннюю тень с настройками подобно глазам.

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

Таким образом, вы можете экспериментировать с различными выражениями лица, пока не создадите свой набор смайликов. Например, добавив сердечки вместо глаз, вы тем самым создадите выражение влюблённости. Если вы создавали смайлики на прозрачном фоне, то каждый из них можно сохранить в виде отдельных PNG-файлов.

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

Источник

Как сделать крутую эмодзи-иллюстрацию

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

Илья Слюсарев

СММщик, контент-мейкер и просто хороший человек.

Илья Слюсарев

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

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

Иллюстрация внутри статьи Перезвони на Спарке

Иллюстрация для статьи «Как я использую Трело» на личном блоге

Иллюстрация для обложки к статье SMMplanner

Что понадобится

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

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

Базовые знания верстки.

Идея для иллюстрации.

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

Делаем

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

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

Можно создавать любые картинки, вертикальные, квадратные, даже круг!

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

Накидываю текст

Ищем подходящие эмодзи

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

Копируем картинку которые находятся внизу

Скопировав картинку на Эмодзипедии, её можно вставить в Фотошоп.

В моем случае картинка великовата, поэтому я её редактирую и изменяю до нужного размера. Для этого нужно использовать режим «Трансформирование форм», зажав сочетание клавиш ctrl+T (⌘+T). В панели настройки инструмента можно задать подходящий размер в %. Чтобы сохранить пропорции картинки, нажмите кнопку «Сохранять пропорции»

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

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

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

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

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

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

Итоговый результат, когда я поместил все направляющие

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

Выглядит неряшливо, поэтому я решил выровнять внутри по левому краю

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

Чтобы рисовать стрелки, я использую инструмент «Перо» (P), который настроил на 2 пикселя толщиной, с красной обводкой и пустой заливкой. Чтобы линии получались гнутыми, нужно немного потренироваться рисовать. Как рисовать пером, хорошо показано в wikiHow «Как рисовать пером»

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

После картинку нужно сохранить. Я привык сохранять в PNG, через сочетание ctrl+shift+alt+S (⌘+shift+alt+S). Получится вот такая картинка.

Лайфхак. Перед тем как сохранять картинку, подумайте где она будет использоваться. Белая картинка на сайте с белым фоном смотрится плохо, нужно создать однопиксельную рамочку, чтобы отделить картинку от фона. Или намеренно создать жирную рамку. Можно вместо белого фона, использовать сероватый, если картинка заливается на сайт с белым фоном, или если она заливается на сайт с сероватым фоном, её можно оставить белой.

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

Просто дурачусь

К статье про здоровое питание

Источник

Как сделать смайлики в фотошопе

Сайт о графическом дизайне в Photoshop
Информация, статьи, теория, уроки

Мы живем в век высоких технологий и постоянного развития ПО. В дизайне революцию стремительно сделал Photoshop. Сейчас без этого инструмента вообще никуда — это уже всемирно, давно и всеми признанный стандарт.
(А.Б.Чубайс, чиновник)

Еще 20 лет назад индустрия графического дизайна была уделом художников. Сейчас Photoshop дает возможность творить людям с хорошим художественным вкусом. Если они профессионалы.
(Н.А.Копейкин, художник)

Photoshop дает нам массу возможностей — начиная с редактирования домашних фотографий и до разработки сайтов и полиграфии. Нужно просто понимать, на что ты УЖЕ способен, владея этим инструментом!
(М.С.Щипунов, ИТ-директор)

В этой статье о графическом дизайне в Photoshop мы рассмотрим достаточно несложный урок, который покажет, как средствами лучшего графического редактора нарисовать симпатичный смайлик, изображающий эмоцию. Скажем, эмоцию «Шок!», «Офигеть!», или что то в этом роде. Никаких сторонних исходных материалов нам для этого вовсе не потребуется. Будем работать исключительно средствами фотошопа.

Начнём с создания нового документа, нажав в верхнем меню редактора «Файл» — «Новый. » и создадим документ размерами, например, 500×500 px. Фон подложки выберем белый.

В панели инструментов выберем инструмент «Овальная область». Далее, удерживая клавишу Shift, отрисовываем окружность.
После этого нам необходимо создать новый слой в палитре слоёв. Устанавливаем основной цвет в палитре цветов #FF9000, а фоновый цвет — #FFE700. Затем обратимся к инструменту «Градиент» — «Радиальный градиент» и протянем им по стрелке, изображённой на скриншоте ниже. Постарайтесь светлую область расположить в левой, верхней части.

Не снимая выделения, переходим в меню «Выделение» — «Модификация» — «Сжатие». Устанавливаем значение в 10рх. Наше выделение перемещается на 10рх внутрь круга.
Теперь же поменяем основной цвет в палитре цветов на белый. Далее мы выберем инструмент «Градиент» с функцией «Линейный градиент», от белого к прозрачному, а затем протянем его по стрелочке, как указано на изображении ниже. Теперь давайте назовём этот слой условно «Лицо».

Нажав комбинацию клавиш Ctrl+D, снимаем выделение.
Теперь переходим к рисованию глаза. Выбираем инструмент «Овальная область».
Создаём новый слой, нажав на значок внизу палитры слоёв, и отрисовываем овал на лице нашего смайлика. Теперь в палитре инструментов основным цветом выбираем белый, фоновым цветом определим светло-серый — #D1D1D1. Далее давайте с вами обратимся к инструменту «Градиент» — «Линейный градиент» — «От белого к серому». Выбрав всё это, нужно протянуть с верхней части глаза к нижней. После этого выделение не снимаем.

Теперь перейдем в «Выделение» — «Модификация» — «Сжатие», где установим значение 5рх.

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

При помощи инструмента «Овальное выделение», рисуем окружность для зрачка глаза.
Чёрно-белым линейным градиентом нужно провести сверху вниз зрачка. Слой, который у нас получился, назовём «Глаз».

Зажав Ctrl на клавиатуре, нужно нажать по иконке слоя «Глаз», выделив его.
Далее нужно перейти в меню редактора, зайдя в «Выделение» — «Модификация» — «Сжатие», где давайте установим значение в 5рх. После этого нажимаем Ctrl+J, дублируя сжатую область на новом слое. Назовём этот новый слой «Сжатие». Теперь же необходимо спуститься на слой «Глаз» и продублировать его. Получившийся слой назовем «Глаз копия».
Не уходя со слоя «Глаз копия», нам нужно, удерживая Ctrl, кликнуть по иконке слоя «Сжатие» и после этого нажать клавишу Delete, удалив внутреннюю часть. Затем, не снимая выделения, нам нужно, снова удерживая клавишу Ctrl, кликнуть по иконке слоя «Глаз копия». В результате получится двойное выделение в виде овального кольца.

Устанавливаем основной цвет #FFB221, а фоновый — #FFCD22. Теперь выберем линейный градиент и протянем им сверху вниз выделенной области.

Теперь давайте удалим наш слой «Сжатие».
При помощи клавиши Shift выделим слои «Глаз» и «Глаз копия». Сочетанием клавиш Ctrl+E клавиатуры объединим эти слои и назовём объединённый слой «Глаз».

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

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

Основной цвет чёрный, а фоновый — #880202. Линейным градиентом тянем так, как показано на скриншоте.

Нажимаем Ctrl+T и при помощи инструмента «Свободное трансформирование» поворачиваем рот рожицы наискосок. После этого двойным кликом по рамке снимаем трансформирование.

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

Основной цвет делаем белым, затем нажимаем Shift+F5, заливаем белым цветом и получаем нижеследующее.

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

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

Благодарим вас за внимание! Читайте чаще на сайте нашего проекта статьи о графическом дизайне, а мы, в свою очередь, надеемся, что вы найдете в них для себя что-то полезное и интересное и призываем не стесняться присылать нам свои работы с описаниями!
Давайте делать наш сайт вместе!

Дорогие графические дизайнеры!
Мы всегда рады приветствовать вас
на сайте о дизайне в Photoshop!

Источник

Оцените статью
Полезные советы и лайфхаки для жизни