Читать

Урок 35. Рисуем иконку для приложения

15.11.2018 / Уроки

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

Инструментом "Прямоугольник со скруглёнными углами" рисуем форму иконки с зажатой клавишей Shift (чтобы получился идеальный квадрат).


Рисуем иконку для приложения


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


Рисуем иконку для приложения

Рисуем иконку для приложения


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


Рисуем иконку для приложения

Рисуем иконку для приложения


Снова дублируем новую фигуру. но на этот раз смещаем её всю в нижний правый угол и создаём обтравочную маску (Ctrl+Alt+G).


Рисуем иконку для приложения


При выделенном контуре последней созданной фигуры, выбираем Перо и в режиме "Объединения фигур" рисуем дугообразный элемент, который сгладит переход загнутого уголка. Такой же элемент рисуем и во тором месте сгиба уголка.


Рисуем иконку для приложения

Рисуем иконку для приложения


Основа готова. Переходим к объёму. Дублируем слой, находящийся под фиолетовым и меняем режим наложения на "Умножение", цвет - на фиолетовый, а прозрачность - на 70%


Рисуем иконку для приложения


Затем создаём маску, выбираем тип заливки "Градиент" (уходящий от чёрного в прозрачность), и по диагонали проводим курсором от угла, как показано на рисунке ниже:


Рисуем иконку для приложения


Ещё один градиент, на этот раз в стилях слоя, наложим на верхний фиолетовый слой с отрезанным углом. Дважды кликаем по слою и выбираем "Наложение градиента". Проставляем значения как на рисунке и получаем мягкий объём:


Рисуем иконку для приложения

Рисуем иконку для приложения


В самом верху панели слоёв создаём новый (Shift+Ctrl+N) и рисуем на нём прямоугольник. Трансформацией (Ctrl+T) поворачиваем его на 45 градусов и размещаем в области загнутого уголка.


Рисуем иконку для приложения


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


Рисуем иконку для приложения


Можно ещё немного поколдовать над эффектами, но мы остановимся на этом. Тем более, что нам не хватает символа на нашей иконке. И так как предполагается, что это иконка приложения данного сайта, то символ на ней должен быть соответствующий. Чтобы он не перекрывал загнутый уголок, заключаем его в группу (Ctrl+G), снова кликаем по контуру слоя уголка (с зажатой Ctrl) и жмём на создание слоя-маски. Новая группа, а точнее, все находящиеся в ней фигуры, примут границы уголка. Но нам нужно, чтобы было наоборот, значит жмём Ctrl+I (инвертирование цветов в маске) и получаем, что наш символ распространяется на всю область иконки, кроме уголка.


Рисуем иконку для приложения


Осталось добавить тиснение на символ: внутреннюю и наружную тени. Заходим в стили слоя символа и на соответствующих вкладках выставляем необходимые значения. В зависимости от цвета значения могут меняться, но в целом схема одна.


Рисуем иконку для приложения


Рисуем иконку для приложения


Рисуем иконку для приложения


В общем-то иконка готова. Но чтобы преподнести её, стоит добавить ещё немного объёма. Для этого достаточно под самый первый слой-фигуру нарисовать чуть меньшую её копию и размыть по Гауссу (примерно, радиусом = 15). А фоновому слою можно добавить "Наложение градиента". Для этого, кликаем правой кнопкой по верхнему светло-фиолетовому слою и в выпавшем меню выбираем "Скопировать стиль слоя", затем кликаем правой кнопкой по фону и в выпавшем списке выбираем "Вставить стиль слоя" (Если на фоновом слое отмечен значок замка, предварительно нужно разблокировать его, просто кликнув по слою дважды и нажав "ОК" во всплывшем окне). Иконка приложения готова!


Рисуем иконку для приложения


Если что-то осталось непонятно, спрашивайте в комментариях
или смотрите исходник урока — запакован в zip-архив весом 210 КБ

Скачать архив




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





Просмотров: 696 / Теги: иконка, урок, фотошоп, рисуем, приложение

Комментарии (0)

avatar


НЕКОТОРЫЕ АРХИВНЫЕ ПУБЛИКАЦИИ

О сериале «Очень странные дела»

Внимание! Возможны спойлеры!
Продукт компании Netflix «Очень странные дела» разделён на 8 серий, продолжительностью в среднем 50 минут. А это значит, что зрителя ждёт почти 7 часов увлекательного просмотра!


19.10.2016 / Отзывы

Вы планируете запустить сайт и уже купили домен (адрес в сети), но сайт ещё не готов? Или вы хотите выдержать время до заветного запуска? Значит вам обязательно нужна так называемая «заглушка» для сайта!


07.06.2016 / Уроки

Интерактивный пост по «Гарри Поттеру»

Ещё один пост, посвящённый 15-летию фильма «Гарри Поттер и философский камень». На этот раз интерактивный! Давайте попробуем вспомнить интересные детали волшебного мира «Гарри Поттера» и пройдём небольшой тест.


02.11.2016 / Любопытное

До премьеры 7-го эпизода «Звёздных войн» осталось меньше 3-х месяцев (а точнее 80 дней). Находясь в предвкушении, я обратился к одной из моих любимых составляющих - космическим кораблям.


27.09.2015 / Арт



ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ