3.23.2019

2.4.2. Рисуем иконки. Развитие темы

Предыдущий раздел
К оглавлению
Следующий раздел→

Мы подробно рассмотрели процесс рисования иконки цветного яблока. Попробуем нарисовать другие иконки для оформления веб-страниц, документов, презентаций.
Допустим, что Вы оформляете объявление о конкурсе, где к месту будет изображение иконки для слов о наградах. Эта иконка должна быть яркой, чтобы привлечь читателя и интуитивно понятной, чтобы читатель подсознательно обратил на ее свое внимание.
Поскольку далеко не всегда можно заранее объявлять, в чем состоит награда, вполне подойдет изображение коробочки, обвязанной ленточкой.
Шаг 1. Итак, как и в предыдущем упражнении, создаем прозрачный холст 200х200 пикселей и увеличиваем его для удобства рисования.



Рис. 1. Создание квадратного изображения 200х200 пикселей с прозрачным фоном

Шаг 2. Инструментом Прямоугольная область выделяем прямоугольник, например,  такимобразом, чтобы он отстоял от верхнего края на 80 пикселей, от левой и правой сторон на 10 пикселей и полностью касался нижней стороны холста или отстоял от нее на 1–2 пикселя. Заливаем его черным цветом.


Рис. 2. Рисуем коробку

Шаг 3. Нарисуем крышку. Для этого создаем новый слой и в нем над коробкой выделяем прямоугольную область, оставляя сверху место для банта (около 45–50 пикселей), а снизу – границу между коробкой и крышкой (около 10 пикселей). Выполняем ее заливку черным цветом.



Рис. 3. Рисуем крышку коробки в новом слое

Шаг 4. Рисуем вертикальную ленту, для чего по центру выделяем вертикальный прямоугольник шириной 10–20 пикселей.



Рис. 4. Выделяем область для ленточки

Шаг 5. На панели Слои делаем рабочим слой коробки и, не снимая выделения,  нажимаем клавишу <Delete>, удаляя черную заливку на месте ленты.



Рис. 5. Переходим в нижний слой и нажатием клавиши <Delete> удаляем область ленточки

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



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

Шаг 7. Снимаем выделение, командой Отменить выделение в меню Выделение, либо кликнув левой кнопкой мышки в любом месте холста, либо нажав сочетание клавиш <Ctrl>+D.
Шаг 8. Приступаем к рисованию банта. Он может быть симметричным и асимметричным. Для его рисования у нас имеется 35–45 пикселей по высоте. Создаем  новый слой. Для этого либо выбираем команду Слой… в меню Слои – Новый, либо нажимаем сочетание горячих клавиш <CTRL>+<Shift>+N.



Рис. 7. Создаем еще один слой для банта

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



Рис. 8. Слздаем элипс - заготовку для правой части банта

Шаг 10. Создаем овальную выделенную область со смещением влево от нарисованного эллипса и меньшего размера. Затем, нажав клавишу <Delete>, очищаем ее.



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

Шаг 11. Промасштабируем и расположим правую часть банта. Для этого, нажимаем <Ctrl>+Dчтобы снять выделение, и, оставаясь в этом слое как рабочем, выбираем команду Свободное трансформирование в меню Редактирование или нажимаем <Ctrl>+T.  Выбираем нужный наклон, масшьаб и соотношение сторон таким образом, чтобы это выглядело эстетично и не выходило за границы холста. По окончанию трансформирования нажимаем клавишу <Enter>, чтобы завершить операцию.



Рис. 10. Трансформируем правую часть банта перемещением, масштабированием м поворотом

Шаг 12. Создаем копию слоя, нажав сочетание клавиш <Ctrl>+J.
Шаг 13. В меню Редактирование – Трансформирование выбираем команду Отразить по горизонтали.



Рис. 11. оздаем копию слоя с частью банта и отражаем ее по горизонтали

Шаг 14. Инструментом Перемещение перемещаем левую половину банта на место. Черный бант готов.



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

Шаг 15. Раскрасим его. Подарок, если это – ценный приз, должен выглядеть достаточно богато. Годятся, например, золотые или красные тона. Создадим корректирующий слой поверх остальных. В меню Слои – Новый корректирующий слой выбираем команду Цветовой тон/Насыщенность…


Рис. 13. Создаем корректирующий слой Цветовой тон/Насыщенность…

Шаг 16. Устанавливаем флажок Тонирование, а регуляторы корректирующего слоя устанавливаем в положения: Цветовой тон – 56, Насыщенность – 94, Яркость – +35.



Рис. 14. настройкой корректирующего слоя подбираем желаемый цвет иконки

При желании можно задать и другие цвета иконки.
Шаг 17. Сохраняем изображение со всеми слоями в PDF-формате.
Шаг 18. Уменьшаем масштаб изображение до нужного размера (например, до 70 пикселей по стороне) и сохраняем его в формате PNG. Иконка готова.



Рис. 15. Изображение иконки повязанной бантиком корзинки, уменьшенное до нужного размера

Предыдущий раздел
К оглавлению
Следующий раздел→

Комментариев нет:

Отправить комментарий

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