Иконки для фотошопа: фотошоп иконок – 363 бесплатных векторных иконок

Как сделать иконку в фотошопе – процесс отрисовки (видеоурок)

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

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

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

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

В этом процессе я покажу, как нарисовать 12 иконок и несколько дополнительных вариаций.

Мы отрисуем такие иконки как:

• Часы;
• Маркер указатель места на карте;
• Бирку;
• Иконку закрыть;
• Стрелки;
• Иконку для меню бургер;
• Лупу;
• Папку для файлов;
• Облако;
• Диаграмма;
• Иконка сообщения;
• Монитор.

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

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

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

Векторные иконки « Бесплатные инструменты для дизайнера

80 современных иконок для дизайна интерфейса пользователя:
Добавить в избранное, Добавить, Ответы, Утверждение, Доступные обновления, Окно браузера, Изменить тему, Флажок, Галочка, Обведенная точка, Очистить символ, Закрыть окно, Комментарии, Всплывающее окно с подробностями, Не беспокоить, Двойной флажок, Загрузить , Загрузка обновлений, Электронная почта, Ввод, Ошибка, Выход, Истек срок действия, Часто задаваемые вопросы, Обратная связь, Поиск и замена, Форма, Справка, Высокий приоритет, Миксер горизонтальных настроек, Выполняется, Всплывающее окно с информацией, Информация, Установка обновлений, Фотографии iOS, Язык, Список , выход завершен, заполнен, Обслуживание, Окно развернуть, Меню, Свернуть окно, Новый документ, Уведомление, Нумерованный список, Онлайн-поддержка, Открыть в браузере, Открыть в окне, Органайзер, Конфиденциальность, Приват, Процесс, Вопросы, Окно восстановления, Сохранить как, Сохранить, Отправить ход выполнения, Поддержка, Отключить, Включить, Снять флажок, Загрузить , Руководство пользователя и т.

д.

Add to Favorites, Add, Answers, Approval, Available Updates, Browser Window, Bullish, Change Theme, Checked Checkbox, Checkmark, Circled Dot, Clear Symbol, Close Window, Collect, Comments, Details Popup, Do Not Disturb, Double Tick, Download, Downloading Updates, Email, Enter, Error, Exit, Expired, FAQ, Feedback, Find and Replace, Form, Help, High Priority, Horizontal Settings Mixer, In Progress, Info Popup, Info, Installing Updates, iOS Photos, Language, List, Login Rounded Down, Login, Logout Rounded Down Filled, Logout Rounded Left, Logout Rounded Up, Logout Rounded, Maintenance, Maximize Window, Menu 2 Filled, Menu, Mind Map, Minimize Window, Natural User Interface 1, New Document, Notification, Numbered List, Online Support, Open in Browser, Open in Window, Org Unit, Privacy, Private, Process, Questions, Restore Window, Save as, Save, Submit Progress, Support, Thumbnails, Toggle Off, Toggle On, Unchecked Checkbox, Upload, User Manual, Vertical Settings Mixer, View Details, VIP, Workflow, Zoom In, Zoom Out

Форматы: Dusk UI Icons (SVG (50px и 100px), EPS, PDF, PNG (50px).

Использование – бесплатное в личных и коммерческих проектах: “The icons are free for personal and commercial use. No linking required, but if you provide a link, the guys from Icons8 will drink to your success. 🙂 Please don’t resell or redistribute them.”
Источник: https://tympanus.net/codrops/2017/06/23/freebie-dusk-ui-icons/
Скачать бесплатные иконки для дизайна интерфейса можно с сайта источника.

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

В этом уроке мы узнаем, как нарисовать красивую иконку телевизора в Adobe Photoshop.

Шаг 1.

Создание нового документа

Создайте новый документ (File > New) с показанными настройками

Шаг 2.

Создание фона

Залейте фон

#FFFFFF цветом, а затем примените к нему следующие Эффекты слоя.

Шаг 3.

Создание корпуса телевизора

Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY, откройте Стили Слоя и примените следующие настройки.

Также добавьте Обводку с слою BODY со следующими настройками

Шаг 4.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 5.

Создание корпуса телевизора

Используйте  инструмент  Прямоугольник со скругленными углами (U)

с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY_2 и после этого примените на этот слой следующие эффекты.

Также добавьте Обводку к слою BODY_2 со следующими настройками.

После этого добавьте Внутреннею тень к слою BODY_2 со следующими настройками.

Шаг 6.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 7.

Создание корпуса телевизора

Создайте новый слой и поместите его под слой BODY. Назовите этот слоя BASE. Используйте 

инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.

Для этого выберите слой BODY нажмите правой кнопкой мыши и выберите Скопировать стиль слоя и затем выберете слой Base нажмите на правую кнопку мыши и выберете Вставить стиль слоя.

После этого необходимо исправить толщину Обводки на 3px в слое BASE.

Шаг 8.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 9.

Создание корпуса телевизора

Создайте новый слой и поместите его под слой BODY. Назовите этот слой

FOOT. Используйте  инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.

Примените также Внутреннюю тень к слою FOOT.

Шаг 10.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 11.

Создание корпуса телевизора

Теперь продублируйте слой FOOT и поместите его как показано на рисунке.

Шаг 12.

Создание корпуса телевизора

Создайте новый слой, назовите его GLOSSY и поместите его поверх всех слоев, затем выберите инструмент Кисть (B)

и большой кистью с мягкими краями поставьте одно белое пятно.

Затем поменяйте Режим наложения на Перекрытие с уменьшите Прозрачность на 50%

Шаг 13.

Создание экрана

Создайте новый слой назовите его SCREEN и поместите поверх всех слоев.

Используйте инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px, чтобы создать прямоугольник. Затем скопируйте Стиль слоя BODY_2 и примените его к слою SCREEN. Теперь исправьте толщину обводки на 10px в слое

SCREEN.

Шаг 14.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 15.

Создание экрана

В этом шаге мы сделаем сам экран. Создайте новый слой SCREEN_2. Поместите его поверх остальных слоев. Используйте инструмент  Прямоугольник со скругленными углами (U) с радиусом 35px, чтобы создать прямоугольник. Затем примените Градиент в Стилях Слоя со следующими настройками.

Затем примените Внутреннюю тень к слою SCREEN_2.

Затем примените Внутреннее свечение к слою SCREEN_2.

Затем Тень к слою SCREEN_2.

Шаг 16.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 17.

Создание экрана

Создаем новый слой и называем его SCREEN GLOSSY и помещаем его поверх остальных. Затем выбираем инструмент Перо (P) и рисуем контур как показано на рисунке. И заливаем его белым цветом #FFFFFF. Затем уменьшаем прозрачность до 20%

Шаг 18.

Создание экрана

Создаем новый слой, называем его LIGHT DOT и помещаем поверх остальных слоем. После этого выбираем инструмент Кисть (B) и большим размером кисти, с мягкими краями ставим по центру экрана одно большое белое пятно. 

Шаг 19.

Создание дополнительных элементов

В этом шаге вы сделаем кнопки. Возьмите инструмент Эллипс (U) и создайте круг и поместите его примерно так как на картинке, назовите этот слой BUTTON.

Теперь вернитесь к слою BODY_2 и скопируйте его Стиль слоя нажав по нему правой кнопкой и выбрав Скопировать стиль слоя. После этого примените скопированный стиль на слой BUTTON.

Шаг 20.

Создание дополнительных элементов

Далее мы создаем еще один круг и помещаем его так как показано на картинке.

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

Далее применяем Окантовку со следующими настройками.

Затем добавляем Тень.

Шаг 21.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 22.

Создание дополнительных элементов

Далее используем инструмент Прямоугольник со скругленными углами (U) и создаем прямоугольник как показано на примере.

Повторяем ранние шаги и применяем Стили слоя к прямоугольнику, но немного модифицируем настройки Тени.

Шаг 23.

Промежуточный результат

Вы должны получить похожий результат.

Шаг 24.

Создание дополнительных элементов

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

Шаг 25.

Промежуточный результат

Теперь наши кнопки готовы.

Результат должен быть как на картинке.

Шаг 26.

Создание дополнительных элементов

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

Шаг 27.

Создание дополнительных элементов

Теперь откроем Стиль слоя и применим следующие настройки.

Применим Внутреннюю тень к слою SPEAKER.

Добавим Обводку к слою SPEAKER.

Шаг 28.

Промежуточный результат

Теперь наш динамик должен выглядеть так.

Шаг 29.

Создание дополнительных элементов

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

Шаг 30.

Создание марки телевизора

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

Также применим Тень к слою с маркой телевизора.

Шаг 31.

Промежуточный результат

Должен получиться следующий результат.

Шаг 32.

Создание антенны

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

Шаг 33.

Промежуточный результат

Результат должен выглядеть так.

Шаг 34.

Рисование тени

Далее создадим тень от телевизора.

Создаем группу слоев которую назовем SHADOW и поместим ее перед нижним фоном. Используем инструмент Эллипс (U) и создаем эллипс и заливаем его черным цветом. После этого применим размытие Размытие по Гауссу со следующими настройками.

Шаг 35.

Рисование тени

Теперь используем инструмент Ластик (E) сотрем часть тени. Затем изменим Режим наложения на Умножение и уменьшим прозрачность на 50%

Шаг 36.

Промежуточный результат

У нас должен получиться следующий результат.

Шаг 37.

Добавление тени от ножек

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

Шаг 38.

Итоговое изображение

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

Ссылка на источник

%d1%84%d0%be%d1%82%d0%be%d1%88%d0%be%d0%bf %d0%b8%d0%ba%d0%be%d0%bd%d0%ba%d0%b8 пнг образ | Векторы и PSD-файлы

дизайн плаката премьера фильма кино с белым вектором экрана ба

1200*1200

каба хадж мабрур исламская икона паломничества

2776*2776

мусульманская пара хадж ка ба

2600*2600

с днем ​​отца 84

1200*1200

аль хадж мубарок с верблюдом и каба мекка иллюстрация

3374*3374

номер 88 золотой шрифт

1200*1200

ценю хорошо как плоская цвет значок векторная icon замечания

5556*5556

начальная буква bf с логотипом

1200*1200

мода с днем ​​рождения шрифты

1200*1200

милый слоненок и маленькая кошечка летят в космос

2000*2000

88 летний юбилей векторный дизайн шаблона иллюстрация

4083*4083

облака комиксов

5042*5042

малыш парень им значок на прозрачных ба новорожденного весы вес

5556*5556

be careful to slip fall warning sign carefully

2500*2775

3d золотой номер восемьдесят восемь прозрачный фон png клипарт

2300*2300

Искусство selamat hari raya idul adha с абстрактными ka ba vectir иллюстрация

1200*1200

Ручная роспись борода ба zihu большая борода

1200*1200

ма дурга лицо индуистский праздник карта

5000*5000

набор векторных иконок реалистичные погоды изолированных на прозрачной ба

800*800

green environmental protection pattern garbage can be recycled green clean

2000*2000

номер 84 золотой шрифт

1200*1200

красивый современный всплеск кофе с кофе в зернах

3333*3333

инопланетянин с карандашом и тетрадью иллюстрации вектор на белом ба

1200*1200

вектор поп арт иллюстрацией черная женщина шопинг

800*800

схема бд электронный компонент технологии принципиальная схема технологическая линия

2000*2000

ба конфеты шоколад

800*800

Векторная иллюстрация мультфильм различных овощей на деревянном ба

800*800

чат комментарий образование синий значок на абстрактных облако сообщение

5556*5556

вектор поп арт иллюстрацией черная женщина шопинг

800*800

prohibited use mobile phone illustration can not be used

2048*2048

сердце сердцебиение любовь свадьба в квартире цвет значок векторная icon

5556*5556

blue series frame color can be changed text box streamer

1024*1369

Головной мозг гипноз психология синий значок на абстрактное облако ба

5556*5556

три группы 3d реалистичное декоративное яйцо с золотым цветом на гнезде bd с золотым всплеском текстовый баннер

5000*5000

коробка и объектив камеры значок дизайн вдохновение изолирован на белом ба

1200*1200

happy singing mai ba sing self indulgence happy singing

2000*2000

чат пузыри комментарии разговоры переговоры аннотация круг ба

5556*5556

Буква c с логотипом дизайн вдохновение изолированные на белом ба

1200*1200

12 7 84 clean

2000*2000

индийский фестиваль счастливого карва чаут каллиграфия хинди текст ба

5041*5041

новые facebook покрытия с red lion и черный и синий полигональной ба

5556*5556

pop be surprised female character

2000*2000

аркада консоли игры машина играть в соответствие значок на прозрачных ба

5556*5556

chinese wind distant mountain pine tree chinese style pine tree chinese style poster can be combined

3600*2475

flowering in spring flower buds flowers to be placed plumeria

2000*2000

ломтики зеленого листа пандана

1200*1200

be careful with fire pay attention to fire pay attention to fire warning icon

2000*2000

black and white train icon daquan free download can be used separately can be used as decoration free of charge

2000*2000

кодер кодирование компьютер список документ линии значок на прозрачных ба

5556*5556

black key that can be hung on the body car key key

2000*2000

подарки, елка, дед мороз и др.

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

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

Iconset: Standard New Year Icons by Aha-Soft

Iconset: The Real Christmas 05 Icons by Enhanced Labs Design Studio

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

Free Christmas icons

Free High Quality Christmas Icons

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

Christmas icons

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

Iconset: Xmas Stickers Icons by Double-J Design

Забавный формат для иконок в виде стикеров.

Iconset: Xmas Festival Icons by Double-J Design

18 Christmas & New Year Icons

Просто стильные и симпатичные новогодние иконки (набор изображений традиционный).

Christmas Icon Set

28 christmas vector icon RS

Приятные и милые векторные иконки по тематике нового года и рождества.

Festive Christmas Icon Pack

Silent Night – Christmas Icons

Flat vector Christmas icons

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

Flat Christmas Icon Set

25 Christmas Flat Icons

50 Free Christmas Icons

Иконки в виде «марок». Не смотря на схематические изображения смотрятся стильно.

Новогодние иконки

Free Long Shadow Christmas Icons

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

Free Christmas Graphics

Christmas Social Network Icon set

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

Не смотря на то, что картинки в некоторых случаях повторяются, все они могут вам пригодиться. Я подобрал всего 20 новогодних наборов, хотя их на самом деле гораздо больше. Если бы включал в статью те архивы, где собраны по 3-5 новогодних иконок, тогда список спокойно перевалил бы за 50 ссылок. Также вы легко можете найти иконки через гуглопоиск или просмотреть архивы иконок например Findicons.com или Iconarchive.com. С наступающими праздниками.

Как изменить размер наборов иконок в фотошопе?

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

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

Вот как масштабировать этот набор с 48 px до 24 px, работая с PSD:

• Откройте набор слоев для одного из значков. Давайте выберем значок Google+.

• Выделите круг и выберите « Edit > Transform > Scale . Убедитесь, что выбрана центральная точка прокси-сервера управления Transform, и переключите связь между полями W и H, чтобы масштабирование было пропорциональным.

• Введите 50 в поле W или H и нажмите Enter / Return.

В этот момент ваш круг имеет диаметр 24 пикселя, но «g» и «+» слишком велики.

• Выберите слой формы «g» и текстовый слой «+» и выберите « Edit > Transform > Scale как и раньше, но на этот раз введите 80 в поле «W» или «H» и нажмите клавишу «Ввод / возврат».

• Сдвиньте слои «g +», чтобы расположить их по центру.

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

Относитесь к остальным значкам аналогично. Круги определяют границы, поэтому все они масштабируются на 50%. Величина, которую вы масштабируете для каждого изображения, будет разной (значок Skype работает лучше на 75%, чем на 80%), поэтому вам придется немного поэкспериментировать. Опыт научит вас, как вы идете.

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

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

Использование Font Awesome в Photoshop

Всем привет! Сегодня я расскажу, как работать с иконочными шрифтами Font Awesome. Написание данного поста побудило меня на, то что я стал видеть много макетов где дизайнеры используют картинки вместо иконочного шрифта! Так делать не нужно! И не нужно забывать, что после создания макета его еще нужно будет, кому то верстать.

И так перед тем как начать использовать Font Awesome его сначала нужно скачать и установить в систему. Установку буду производить на системе Windows думаю, что для системы MacOS процедура будет похожей.

Скачивание и установка. Для того чтобы скачать этот шрифт переходим по ссылке — http://fontawesome.io нажимаем кнопку Download и нажимаем на No thanks, just download Font Awesome 4. Сохраняете архив в любое удобное место на Вашем ПК. Потом разархивируем архив в любое место. В папке будут находиться несколько папок и файл. Нам нужна папка с названием fonts, а все остальные используются для CSS и препроцессоров – грубо говоря, все это используется для верстки сайта. И так продолжим, заходим в папку fonts и двойным щелчком мыши открываем первый файл с названием FontAwesome. Во всплывающем окне нажимаем «Установить» в верхней части экрана и дожидаемся завершения установки. Все, установка Font Awesome успешно завершена!

Использование Font Awesome. Для вставки нужной иконки переходим сюда — http://fontawesome.io/cheatsheet/, выбираем понравившуюся иконку, выделяем ее как обычный текст мышкой и правой кнопкой копируем. Запускаем Photoshop и выбираем инструмент «Горизонтальный текст», вставляем эту иконку. Не пугайтесь, если иконка отображается как квадратик. Чтобы это исправить нужно ее выделить и в названии шрифта начните вбивать название FontAwesome и иконка станет похожей на иконку. Теперь Вы сможете ее растрировать или использовать как смарт-объект, трансформировать, накладывать цвет и т.д.

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

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

Как создать пустой файл значков с помощью Photoshop

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

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

Загрузите и установите Adobe Photoshop . Откройте Adobe Photoshop. Создайте новое рабочее пространство для создания изображения.

Установите размеры изображения и выберите белый фон изображения. Нажмите «Создать», чтобы создать изображение в рабочей области Photoshop.

В главном окне рабочей области дважды щелкните слой 1, чтобы открыть его свойства.

Откроется окно стиля слоя. Измените значения параметров «Непрозрачность» и «Непрозрачность заливки» на ноль.

Будет создано прозрачное изображение.

Щелкните Файл в верхнем левом углу главного окна Adobe Photoshop. Перейдите в раздел «Экспорт» и нажмите «Сохранить для Интернета».

Photoshop отображает новое окно на вашем экране. Измените формат изображения на PNG-24 и установите флажок «Прозрачность». Сохраните изображение в своей системе.

В выбранной системной директории присутствует прозрачное пустое изображение. Это похоже на квадрат черного цвета, но это пустое прозрачное изображение.

Теперь преобразуйте пустое прозрачное изображение в значок. Теперь перейдите на icoconvert.com. Выберите пустой файл изображения в вашей системе и нажмите кнопку «Загрузить», чтобы загрузить изображение в этот онлайн-конвертер изображений.

Прокрутите вниз до шага 4 на веб-сайте icoconvert и выберите нужный размер значка. Нажмите кнопку «Конвертировать ICO» ниже.

Через несколько секунд ваш пустой файл значка будет готов к загрузке. Сохраните файл на своем ПК, нажав Загрузить значок (значки).

Щелкните правой кнопкой мыши значок любого установленного приложения и откройте его Свойства.

В окне свойств приложения перейдите к ярлыку и нажмите кнопку «Изменить значок» ниже.

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

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

Как изменить цвет иконок PNG в фотошопе?

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

Иконки имеют решающее значение, и важно иметь правильный цвет.В этой статье мы рассмотрим, как изменить цвета значков PNG в Photoshop.

Также прочтите: 65 сочетаний клавиш Photoshop для ускорения рабочего процесса

Во-первых, давайте возьмем набор значков. Я использую этот от Pixabay.

Шаг 1: Загрузите пакет значков (или значок) в Photoshop и убедитесь, что вы изолировали значок (значки), которые нужно отредактировать и включить.

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

Я собираюсь выбрать этот классный значок зарядки электромобиля просто из-за моей любви к электромобилям.

Шаг 3: Выберите новый слой. Затем нажмите «Изображение», затем « Mode » и убедитесь, что выбран вариант « RGB Color ».

Шаг 4: Теперь щелкните слой правой кнопкой мыши и выберите Blending Options.

Шаг 5: Выбрав новый слой.Щелкните его правой кнопкой мыши и выберите Color overlay , вы увидите, что ваш значок уже изменил цвет. Теперь выберите любой цвет для значка, и все готово.

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

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

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

Также прочтите: Photoshop 101: Изменение цветов в изображении

Тот, кто пишет / редактирует / снимает / размещает все, что связано с технологиями, а когда нет, транслирует свои гоночные виртуальные машины. Вы можете связаться с Ядуллахом по адресу yad [электронная почта] или подписаться на него в Instagram или Twitter.

пикселейTango

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

Результат

Дизайн иконки в Photoshop

1. Откройте новый документ ( CTRL + N ). Я назвал его « Photoshop_Icon » и дал ему 10 сантиметров в ширину и высоту. Не забудьте установить разрешение 300 пикселей на дюйм. Если на вашем компьютере возникают проблемы с большими изображениями, просто измените их размер до желаемого размера, но сохраните пропорции.
2. Создайте прямоугольник со скругленными углами с помощью инструмента «Прямоугольник со скругленными углами» ( U ).У меня 7 сантиметров в ширину и высоту с радиусом 30 пикселей.
3. Преобразуйте его ( CTRL + T ) и установите по центру, изменив X и Y на половину ширины и высоты документа. В данном случае 5 сантиметров.
4. Создайте новый слой « Color ». Теперь нажмите CTRL + ALT + G , чтобы создать обтравочную маску на слое ниже. После этого выберите градиент и сделайте его вот так. От верхнего правого до нижнего левого угла.
5. Создайте новый слой « Border ».Теперь CTRL + НАЖМИТЕ на маленькую иконку слоя « Box ». Перейти Выберите> Изменить> Контракт и сократите выделение на 25 пикселей. Залейте выделение белым цветом. Переведите его в режим наложения « Soft Light » с непрозрачностью 25%. Дублируйте слой « Border » с . Щелкните правой кнопкой мыши> Дублировать слой или ярлык ( CTRL + J ). Теперь нам нужно немного размыть его, Filter> Blur> Gaussian Blur около 15 пикселей.Поместите этот слой на « Overlay » с непрозрачностью 25%.
6. Введите текст с помощью инструмента «Текст» ( T ).
7. Дублируйте этот слой, затем переместите его вниз на 5-10 пикселей и установите непрозрачность 40%.
8. Создайте новый слой « Ps_Fill ». CTRL + щелкните на значке текстового слоя, чтобы сделать новое выделение. Теперь сожмите его на 10 пикселей. Если вы забыли, Выберите> Изменить> Контракт .
9. Залейте его градиентом по вашему выбору. Я залил его градиентом от мягкого серого к белому.
10. Создайте новый слой « Highlight ». CTRL + Щелкните на значке слоя « Box », чтобы сделать выбор. Теперь, используя белый цвет, чтобы ничего не использовать радиальный градиент, залейте его, как я.
11. С помощью Elliptical Marquee Tool ( M ) сделайте такое выделение, а затем нажмите «Удалить».
12. Переведите его в режим наложения « Soft Light » с непрозрачностью около 75%.Дублируйте тот же слой, трансформируйте его ( CTRL + T ), чтобы увеличить его, и установите его непрозрачность на 50%. Снова продублируйте его, снова увеличьте и установите непрозрачность на 25%.
13. Создайте новый слой « Noise ». Залейте его черным. Теперь перейдите Filter> Noise> Add noise и добавьте немного шума. Опции не имеют значения. Установите непрозрачность 3%.
14. Новый слой « Результат ».
15. Переведите его в режим наложения « Color Burn » с непрозрачностью 75%.
16. Создайте новый слой под слоем « Box ». Назовите его « Shadow ». Используя инструмент Elliptical Marquee Tool ( M ), сделайте выделение, как я, и залейте его черным цветом. Фильтр> Размытие> Размытие по Гауссу , около 15 пикселей.
17. Дублируйте этот слой с Тенью и поместите его поверх документа.
18. CTRL + Щелкните на значке слоя « Box ». Щелкните правой кнопкой мыши по вашему выбору> Выберите инверсию .Нажмите УДАЛИТЬ .
19. Вот и все. Теперь вы можете поиграть с цветами или с чем угодно.

Загрузить .PSD

Вот графика в высоком разрешении. Сохрани это. Следующим шагом будет загрузка плагина, его установка, изменение размера и экспорт в рабочий файл . ico . Затем вы можете назначить его любому файлу или папке на рабочем столе Windows. Загрузите плагин формата файлов ICO (Windows Icon) для Photoshop от Тоби Тейна с официальной веб-страницы http: // www.telegraphics.com.au. Если у вас возникли проблемы с поиском ресурса, просто перейдите по этой ссылке.

Узнайте, как установить подключаемый модуль на наших пользовательских ресурсах в учебнике Photoshop.

Сделать иконку из картинки

1. Установите плагин.
2. Откройте документ с иконками.
3. Удалить фон.
4. Измените его размер до 32 × 32 пикселей. Изображение> Размер изображения. Установите «Разрешение , » на 72 пикселя на дюйм.
5. Изображение> Режим> Индексированные цвета .Установите цвета на 256.
6. Файл> Сохранить как . Проявите творческий подход к имени файла и поместите Сохранить как в ICO (значок Windows) (* .ICO).
7. Щелкните правой кнопкой мыши файл или папку > Свойства. Перейдите на вкладку « Настроить » и щелкните « Изменить значок… ». Щелкните « Обзор… » и укажите на вновь созданный значок.
8. Щелкните « OK ».

Это были шаги по созданию иконки в Adobe Photoshop с новым плагином Тоби Тейна.Теперь ваш Photoshop может работать с файлами ICO. Используя этот процесс, теперь вы можете создавать .ico из любой понравившейся графики.

Спасибо, что прочитали наши руководства и обязательно ознакомьтесь с другими!

Вам понравилось это?

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

Об авторе

Как создать элегантный значок приложения для iOS в Photoshop

Adobe Photoshop Паула Боровска • 4 декабря 2015 г. • 6 минут ПРОЧИТАТЬ

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

Для начала вам понадобится шаблон значка приложения для iOS. Вы можете получить его из шаблона значка iOS или шаблона значка приложения; Я использую последнее. Как видите, на моем экране есть только большой значок 1024 пикселей. Это потому, что я не хотел иметь дело с другими элементами.

Вы можете обрезать файл шаблона значка приложения, чтобы включить в него значок размером 1024 пикселя, или обработать остальные элементы в PSD — выбор за вами.

Шаг 1. Создание основной формы значка приложения iOS

Создайте новый слой и задайте цвет фона всему документу.Я использую # acced6 . Нажмите G , чтобы использовать инструмент ведро и раскрасить новый слой.

Конструктор электронных писем

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

Попробуйте бесплатноДругие продукты

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

Для этого нажмите COMMAND или CTRL и щелкните маску слоя Rounded Mask. Теперь на синем фоне должно появиться выделение формы значка.

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

Шаг 2 — Добавьте градиент

Затем щелкните правой кнопкой мыши фоновый слой значка и выберите Параметры наложения .Мы хотим добавить фону легкий градиент. Начальный цвет должен быть # acced6 , а конечный цвет — # 7cbece .

Градиент должен быть линейным. Для получения диагонального угла установите угол 135 градусов . Градиент должен быть изменен от темно-синего в левом верхнем углу до светло-синего в правом нижнем углу. Если вы перепутали цвета, просто поверните угол на -135 или 315 градусов.

Шаг 3. Создание внутреннего круга

Большая часть этого дизайна иконок — это белый круг посередине. Следуйте сетке значков iOS, чтобы создать ее. Вы хотите использовать эллиптический тренажер Elliptical Tool , который находится под кнопкой U . Создайте круг примерно 890 пикселей в высоту и ширину. Вы можете настроить его размер на панели «Свойства», если он не идеально совмещен с сеткой.

Шаг 4 — Стиль круга

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

Добавьте градиент

Градиент в круге простой. Градиент формируется из #ffffff и # d9d9d9 .

Это радиальный градиент, потому что мы хотим придать середине круга немного блеска. Убедитесь, что белый цвет находится в центре, а светло-серый — снаружи градиента. Кроме того, максимально увеличьте масштаб до и установите его на 150% .

Добавить обводку

Обводка по кругу должна выглядеть как толстая рамка. Установите ход на , расположенный внутри , и убедитесь, что он толстый. Я установил размеры 30 пикселей . Кроме того, обводка будет включать градиент.

Цвета, используемые для градиента, являются более светлой версией фонового градиента значка. Градиент начинается с более светлого синего # d1e4e8 и заканчивается более темным и более насыщенным оттенком # a9deeb .Градиент должен быть установлен по диагонали, так чтобы светло-синий цвет был сверху, а более темно-синий — снизу. Для этого установите угол — 45 градусов .

Добавьте внутреннюю тень

Технически внутренняя тень представляет собой белое свечение — вы можете использовать вместо него внутреннее свечение. Установите Blend Mode на normal уменьшите расстояние до 0px . Белое свечение должно немного увеличиваться за пределами штриха, поэтому установите его размер примерно на 140 пикселей .

Добавить тень

Последнее, что вам нужно сделать, это добавить тень к кругу. Это придаст более четкости толстой границе (обводке). Это выделит круг в целом на синем фоне. В тени измените непрозрачность на 10% . Затем уменьшите расстояние до 0px , но увеличьте размер до немного большего. Я выбрал 55px .

У вас должно получиться что-то вроде изображения ниже.

Шаг 5. Добавьте значок карандаша

Последнее, что нужно этому значку, — это значок. Я выбрала карандаш. Найдите значок в Sliceberry или Noun Project и вставьте его в свой PSD. Убедитесь, что значок большой, потому что файл, над которым мы работаем, имеет высоту и ширину более 1000 пикселей.

Если вы хотите использовать значок карандаша, который я выбрал, вы можете загрузить его из Noun Project. Он был создан Молли Брамлет, и вы можете скачать его здесь.

Импортируйте значок в файл и измените его размер.Если вы используете тот же значок карандаша, что и я, вам нужно уменьшить его размер примерно на 50%. Используйте руководство по шаблону для iOS, чтобы подобрать размер изображения до самого маленького круга.

Чтобы значок располагался вертикально, поверните его на 62,32 градуса . Для этого нажмите COMMAND или CRTL + T . На верхней панели введите 62,32 градуса с помощью маленького треугольника. (Хотя это совершенно не обязательно.)

Шаг 6. Создайте стиль значка карандаша

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

Добавьте градиент

Откройте Blending Options слоя карандаша, чтобы добавить градиент наложения . Градиент, который мы будем добавлять, будет точно таким же, как мы применили к синему фону всего значка в самом начале урока. Начните градиент с голубого оттенка # acced6 и закончите его более темно-синим # 7cbece .Градиент также должен быть диагональным. Однако на этот раз более светло-синий будет в верхнем левом углу, а более темно-синий — в правом нижнем углу. Установите угол поворота — 45 градусов , чтобы получить этот угол наклона.

Добавьте внутреннюю тень

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

Конечный продукт

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

10 руководств по созданию значков в Photoshop

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

1. Как создать значок карты местоположения в Photoshop

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

2. Кнопка или значок Perfect Shine

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

3. Создайте подробный значок камеры в Photoshop

Если вы хотите создать подробный значок камеры, этот урок идеально подходит для вас. Здесь вы научитесь создавать подробный значок камеры Fuji X100 в Photoshop.

4. Научитесь создавать значок замка в Adobe Photoshop

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

5. Учебное пособие по значку Google Docs

В этом руководстве вы узнаете, как создать значок Google Docs. Всего 50 шагов, так что это довольно длинный учебник, но определенно полезный.

6. Как создать значок батареи в Photoshop

В этом уроке вы научитесь создавать значок батареи в Photoshop. Ключевым моментом здесь является стиль слоя Gradient Overlay.Используя этот стиль слоя, вы можете добавить освещение в батарею и придать ей трехмерный вид.

7. Создайте значок домашней страницы в стиле Mac в Photoshop

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

8. Как создать реалистичную иконку кофе на вынос

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

9. Создание значка сладкого пончика в Photoshop с нуля

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

10. Быстрое создание деревянного значка социальных сетей с помощью Photoshop

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

Об авторе

Как создать иконку стекломорфизма в Photoshop — Medialoot

Создание прозрачного значка облака пользовательского интерфейса в Photoshop

Стекломорфизм — это новый вариант недавней тенденции пользовательского интерфейса Neumorphism, который сам по себе является вариантом скевоморфизма.Глассморфизм сочетает в себе тенденции глубины и тактильного ощущения, присущие другим морфизмам, с эстетикой прозрачного стекла. Из этого туториала Вы узнаете, как создать значок облака в стиле Glassmorphism, используя простые формы, стили слоев, смарт-объекты и фильтры в Photoshop.

Шаг 1

Запустите Photoshop и создайте новый документ (Файл> Создать …)

• Ширина: 512 пикселей
• Высота: 512 пикселей
• Разрешение: 72 пикселей

Шаг 3

Перейдите в Слой> Новый слой заливки> Сплошной цвет… и нажмите ОК

В следующем окне введите # E9FFFC и нажмите ОК

(Необязательно) назовите слой «Цвет фона»

Шаг 4

Инструментом Прямоугольник со скругленными углами (U) нарисуйте квадрат на холсте.

• X: 88 пикселей
• Y: 133 пикселей
• Ширина: 306 пикселей
• Высота: 306 пикселей
• Угловой радиус: 50 пикселей

Шаг 5

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

В вариантах наложения:

• Непрозрачность: 50%
• Непрозрачность заливки: 0%

Шаг 6

Щелкните галочку рядом с Bevel and Emboss и используйте следующие настройки:

• Стиль: Внутренний скос
• Техника: Гладкий
• Глубина: 100%
• Угол: 90º
• Высота: 30º
• Размер: 6 пикселей
• Смягчение: 0 пикселей
• Режим выделения: Линейное затемнение (черный)
• Непрозрачность подсветки: 15%
• Режим тени: Линейное затемнение (черный)
• Непрозрачность тени: 15%

Шаг 7

Щелкните галочку рядом с Inner Shadow и используйте следующие настройки:

• Режим наложения: Обычный
• Цвет: Белый
• Непрозрачность: 100%
• Угол: 90º
• Расстояние: 0 пикселей
• Дроссель: 25%
• Размер: 5 пикселей

Шаг 8

Нажмите кнопку с плюсом рядом с Inner Shadow, чтобы добавить еще один экземпляр и использовать следующие настройки:

• Режим наложения: Мягкий свет
• Цвет: Черный
• Непрозрачность: 100%
• Угол: 90º
• Расстояние: 0 пикселей
• Дроссель: 0%
• Размер: 10 пикселей

Шаг 9

Щелкните галочку рядом с Inner Glow и используйте следующие настройки:

• Режим наложения: Наложение
• Непрозрачность: 100%
• Шум: 0%
• Цвет: Белый
• Техника: Более мягкая
• Источник: Центр
• Размер 161 пикселей

Шаг 10

Установите флажок рядом с Gradient Overlay и используйте следующие настройки:

Шаг 11

Нажмите CMD + J или CTRL + J, чтобы продублировать слой прямоугольника с закругленными углами

Шаг 12

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

В параметрах наложения измените Непрозрачность на 100%

Шаг 13

В разделе «Наложение градиента» измените непрозрачность на 100%.

Шаг 14

Теперь щелкните правой кнопкой мыши на дублированном слое прямоугольника со скругленными углами и выберите «Преобразовать в смарт-объект».

Шаг 15

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

Поверните дубликат на 15º и поместите его по адресу:

Шаг 16

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

Шаг 17

Щелкните маску «Добавить слой» в нижней части окна «Слои».

Шаг 18

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

Щелкните миниатюру маски слоя нового дублированного слоя в окне «Слои».

Нажмите CMD + I или CTRL + I, чтобы инвертировать маску.

Шаг 19

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

Шаг 20

Выделите самый нижний слой с прямоугольником с наиболее закругленными углами и затем перейдите в Фильтр> Размытие> Размытие по Гауссу …

Введите эти настройки:

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

Шаг 21

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

• Цвет заливки: черный
• Непрозрачность: 50%

Переместите новый слой вниз в порядке слоев под самым верхним (исходным) слоем с прямоугольником с закругленными углами.

Нажмите CMD + T или CTRL + T, чтобы войти в режим преобразования.

Измените размер и положение нового слоя:

• Ширина: 291 пикселей
• Высота: 291 пикселей
• X: 95 пикселей
• Y: 154 пикселей

Шаг 22

Перейдите в «Окно»> «Свойства» и щелкните значок «Маски» в верхнем левом углу.

Установите значение «Растушевка» на 5,0 пикселей, чтобы создать эффект размытой тени.

Шаг 23

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

Щелкните маску «Добавить слой» в нижней части окна «Слои».

Нажмите CMD + I или CTRL + I, чтобы инвертировать маску, чтобы она была видна только за пределами / под исходным прямоугольником с закругленными углами.

Шаг 24

Теперь мы собираемся создать простой значок облака. Используя инструмент Ellipse Tool (U), удерживайте клавишу Shift, чтобы нарисовать круг над всеми остальными слоями.

• Цвет: Белый
• Ширина: 83 пикселя
• Высота: 83 пикселя
• X: 123 пикселя
• Y: 271 пиксель

Шаг 25

Примечание: для следующих нескольких шагов оставьте инструмент Direct Selection Tool активным, чтобы мы создавали единую векторную фигуру, в качестве альтернативы вы можете создать отдельные слои, но вы должны сгруппировать их или объединить их позже на .

На том же слое нажмите CMD + J или CTRL + J, чтобы продублировать вектор круга

• Ширина: 83 пикселей
• Высота: 83 пикселей
• X: 165 пикселей
• Y: 229 пикселей

Шаг 26

На том же слое нажмите CMD + J или CTRL + J, чтобы продублировать вектор круга

• Ширина: 112 пикселей
• Высота: 112 пикселей
• X: 206 пикселей
• Y: 201 пикселей

Шаг 27

На том же слое нажмите CMD + J или CTRL + J, чтобы продублировать вектор круга

• Ширина: 83 пикселя
• Высота: 83 пикселя
• X: 275 пикселей
• Y: 271 пиксель

Шаг 28

На том же слое и с помощью инструмента «Прямоугольник» (U) добавьте прямоугольник к форме, чтобы завершить иконку облака:

• Ширина: 152 пикселей
• Высота: 70 пикселей
• X: 165 пикселей
• Y: 284 пикселей

Шаг 29

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

В вариантах наложения:

• Непрозрачность: 100%
• Непрозрачность заливки: 0%

Шаг 30

Установите флажок рядом с Gradient Overlay и используйте следующие настройки:

• Режим наложения: Нормальный
• Непрозрачность: 100%
• Градиент: #FFFFFF (Непрозрачность 0%) до #FFFFFF (Непрозрачность 100%)
• Стиль: Линейный
• Угол: 90º
• Масштаб: 100%

Шаг 31

Щелкните галочку рядом с Drop Shadow и используйте следующие настройки:

• Режим наложения: Мягкий свет
• Цвет: Черный
• Непрозрачность: 60%
• Расстояние: 0 пикселей
• Размах: 0 пикселей
• Размер: 1 пиксель

Результат и заключение

Надеюсь, вам понравилось следовать этому руководству и вы узнали, как создать значок облака в стиле Glassmorphism, используя простые формы, стили слоев, смарт-объекты и фильтры в Photoshop.

Glassmorphism — это новая вариация недавнего Neumorphism тренда UI, который сам по себе является вариацией Skeuomorphism. Глассморфизм сочетает в себе тенденции глубины и тактильного ощущения, присущие другим морфизмам, с эстетикой прозрачного стекла.

5 кнопок со значками, которые вы могли не знать в Photoshop

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

Всегда используйте давление для размера

Возможно, вы видели, как этот маленький значок регулярно появляется на панели параметров в верхней части рабочего пространства Photoshop. Это действительно классная кнопка, которая при активации позволяет вам контролировать размер кисти с помощью давления, которое вы прикладываете пером на планшете Wacom. Чем сильнее вы нажимаете на планшет, тем больше становится кисть, что позволяет переключаться между тонкими линиями и жирными отметками без изменения настроек.Эта функция, доступная в инструментах «Лечение», «Кисть», «Клонирование», «История искусства», «Ластик», «Размытие» и «Осветление / затемнение», является фаворитом для ретушеров и иллюстраторов.

Всегда используйте давление для непрозрачности

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

Дух Уровень

Если (как и я) вы не очень хорошо умеете держать камеру прямо при съемке от руки, в инструмент «Кадрирование» встроена замечательная функция, позволяющая корректировать угол, просто проводя линию поперек прямой кромки изображения. Рядом со словом «Выпрямить» щелкните значок уровня, чтобы получить доступ к функции. Photoshop автоматически исправит линию на горизонтальную или вертикальную, в зависимости от того, какой угол является ближайшим.Великолепный инструмент для фотографов и ретушеров, а также для всех, кто работает со сканированными изображениями.

Игнорировать корректирующие слои при клонировании

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

Наборы кистей

Надоели одни и те же старые кисти? В инструментах «Кисть», «Клонирование», «Ластик», «Осветление / затемнение» и «Размытие» рядом с меню «Заглушка кисти» вы найдете значок емкости с краской и кистей. Щелчок по этому значку вызывает панель «Набор кистей», где вы можете создать свой собственный набор кистей с полностью индивидуализированными углами пера и текстурными эффектами.