Читать

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

15.11.2018 / Уроки

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

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


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


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


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

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


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


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

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


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


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


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


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

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


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


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


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


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


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


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

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


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


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


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


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


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


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


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


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


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


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


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


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


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

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




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





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

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

avatar


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


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