Как правильно нарисовать иконку (размер 32х32, часть I)
Хочу предложить вашему вниманию урок по созданию иконок размером 32х32 в программе Adobe Photoshop. Данный урок позволит научиться рисовать иконки не прилагая много усилий – в итоге вы поймете что рисование иконок для интерфейсов не такая уж и сложная задача, нужно лишь запастись терпением, и знать представление о работе в программе Adobe Photoshop.
![40.png](https://habrastorage.org/getpro/habr/post_images/862/382/8a8/8623828a822a1ef98ccbaf4a6e726d63.png)
![39.png](https://habrastorage.org/getpro/habr/post_images/4cb/069/ad0/4cb069ad07e1b74d5551a614ea7385ba.png)
Итак, начнем! В первую очередь, чтобы иконки не выбивались из размера и были похожи по стилю, нужно сделать шаблон, на основе которого мы будем рисовать серию иконок.
Первым делом запустим программу Adobe Photoshop, далее заходим в меню File > New, либо нажмем сочетание клавиш Ctrl+N, и создаем изображение размером 32х32 пикселя, и разрешением 72 dpi.
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/053/fe9/3a6/053fe93a61bda118f5978eecf3a0220d.png)
Далее, чтобы у наших иконок были четкие неразмытые края, и в дальнейшем они выглядели четко и контрастно, нам нужно настроить отображение сетки (Grid), благодаря которой мы будем ориентироваться при рисовании – ведь изображение состоит из пикселей, соответсвенно нам нужно чтобы у нас отображалась сетка с шагом в один пиксель.
Заходим в меню Edit > Preferences > Guides, Grid and Slices, либо жмем на клавиатуре сочетание Ctrl +K и производим настройки как показано на изображении.
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/d05/fee/c8f/d05feec8fd824a361104f5a96ce3d3b5.png)
Теперь у нас создан шаблон, на основе которого мы будем создавать наши маленькие шедевры. Так как у нас в иконках подразумевается тень, то это нужно учесть. Размер тени я планирую сделать на 2 пикселя снизу от иконки и по 1-му пикселю с каждой стороны, следовательно, иконка у нас получится 30х30 плюс тень. Для удобства давайте поставим направляющие, которые позволят нам в дальнейшем видеть границы между изображением иконки и тенями, на которые мы отвели соответствующее пространство.
![03.png](https://habrastorage.org/getpro/habr/post_images/b62/d79/bec/b62d79becfb883cb7159f450a6329246.png)
В итоге наш шаблон готов, и теперь можно приступить непосредственно к рисованию иконок.
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/862/382/8a8/8623828a822a1ef98ccbaf4a6e726d63.png)
Иконка Home
Чтобы четко видеть формы, которые мы рисуем, я буду использовать черную заливку. Итак с помощью инструмента
![pen_tool.png](https://habrastorage.org/getpro/habr/post_images/d14/6ed/112/d146ed112715c6ccb8aac4d97a44c145.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/504/a4d/0c8/504a4d0c8d80455d38b11cb791f13bbb.png)
Далее, чтобы придать нужный цвет и контур идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета eae6c9 до цвета cbcfba
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/400/951/864/400951864bc60feff8471a6bc3db84fe.png)
После, чтобы форма была в будущем контрастной мы присвоим этой форме контур. Для этого идем в меню Layer > Layer Style > Stroke… и делаем линию толщиной 1 пиксель и с цветом 868686
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/0ee/d56/8d0/0eed568d03269b174fd903818b029cc9.png)
Вот что у нас должно получиться
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/2e5/653/3f8/2e56533f88b84e8687709d3eea17bb20.png)
Теперь с помощью того же инструмента
![pen_tool.png](https://habrastorage.org/getpro/habr/post_images/d14/6ed/112/d146ed112715c6ccb8aac4d97a44c145.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/449/8c0/de5/4498c0de5ef044764aefffd0e4f8f4e8.png)
Теперь придадим ей нужный цвет — идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета b06a00 до цвета 8c4d00.
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/2b7/bf2/ba3/2b7bf2ba385dbb222a1a16f7643408c3.png)
Получаем вот такой результат
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/557/004/2bb/5570042bb403b007b81d5ab60c9a696c.png)
Ну вот, уже кое-какие очертания у нас появились, теперь будем дополнять нашу форму деталями – с помощью инструмента
![restange_tool.png](https://habrastorage.org/getpro/habr/post_images/83c/a66/03b/83ca6603b10b56f64c74010d499ec62a.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/e83/152/29b/e8315229badee21daf82ebe0db9f9c0f.png)
Назначаем на трубу градиентную заливку от цвета eae6c9 до цвета cbcfba, только градиент на этот раз направляем горизонтально
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/753/176/589/753176589a45beddc33bfb8e6eb72f93.png)
Как и ранее, добавляем контур толщиной 1 пиксель и с цветом 868686
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/0ee/d56/8d0/0eed568d03269b174fd903818b029cc9.png)
Получаем…
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/569/476/72c/56947672cbc397f1e616a4932856911c.png)
Теперь прячем трубу на задний план, и с помощью инструмента
![restange_tool.png](https://habrastorage.org/getpro/habr/post_images/83c/a66/03b/83ca6603b10b56f64c74010d499ec62a.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/3b4/898/713/3b48987138893d19cced1e70b3091206.png)
Назначаем градиент от цвета ce9128 до цвета b06a00…
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/c20/15c/e41/c2015ce4155be3a6eaf2c449fe1bc167.png)
… и добавляем контур толщиной 1 пиксель и с цветом a86600
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/79d/52f/17a/79d52f17aa5c3c06e455dafc5fe83b17.png)
Смотрим…
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/847/7e1/8ef/8477e18ef639a4744d90c070e001c243.png)
Прячем готовый элемент так же как и трубу на задний план, и опять же с помощью инструмента
![restange_tool.png](https://habrastorage.org/getpro/habr/post_images/83c/a66/03b/83ca6603b10b56f64c74010d499ec62a.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/988/cfc/8af/988cfc8afc5bfe934f3dd9d4db061564.png)
И выполняем уже знакомую нам операцию с градиентом от цвета b06a00 до цвета cd9128
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/5fa/252/c83/5fa252c8335a0464c2e3978e78faa36e.png)
… и не забываем про линию… толщина 1 пиксель, цвет a75700
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/18e/a46/e82/18ea46e82ae6a3efa652ead7b905040b.png)
Смотрим результат…
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/fdc/690/23e/fdc69023eea690b8036937c7d35f88b5.png)
Получился, вполне симпатичный домик, но мы продолжим наполнять нашу иконку деталями – жмем
![restange_tool.png](https://habrastorage.org/getpro/habr/post_images/83c/a66/03b/83ca6603b10b56f64c74010d499ec62a.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/e1a/631/56c/e1a63156c40fd060ab1c2827d5d6da23.png)
Ну, и, опять же, градиент – с цвета 2e8ce0 до цвета 7cc6fd
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/b1d/bba/6cc/b1dbba6cc7a70762c089bc96229c90a8.png)
Назначаем контур толщиной в 1 пиксель, и цветом 4381c8
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/2a7/e3a/e83/2a7e3ae83fe082735099f1f6113bfce0.png)
Оцениваем результат…
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/820/748/e8c/820748e8cfcd29dd7ca11bb1ea5345b0.png)
Наш домик почти готов, но он смотрится слишком плоским – будем добавлять объем с помощью бликов.
Создаем новый слой, и с помощью инструмента
![pencil_tool.png](https://habrastorage.org/getpro/habr/post_images/775/c47/b52/775c47b525b8064742be1035ffd87d6f.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/17a/ae4/007/17aae4007203df14408d1fc6d20a530f.png)
Идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета 000000 до цвета ffffff. Обратите внимание на параметр Blend Mode – я поставил значение Screen
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/855/68e/a50/85568ea503bcdc47555ef30499e06cdb.png)
Должен получиться следующий результат
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/c07/ad4/878/c07ad487800bb9716977303e894951d5.png)
Для того чтобы добиться нужного нам эффекта, нужно к слою применить следующие манипуляции
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/b23/a31/1a9/b23a311a9fea2ebed617fb6ed24833b2.png)
В результате, мы получаем вот такой эффект
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/3b5/522/f91/3b5522f913fc18c44f81472fcc191a94.png)
Теперь сделаем блик под крышей. Создаем новый слой, и с помощью того же инструмента
![pencil_tool.png](https://habrastorage.org/getpro/habr/post_images/775/c47/b52/775c47b525b8064742be1035ffd87d6f.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/956/41e/4fc/95641e4fcbc7cb8f60812152a7720fa7.png)
Так как градиент у нас на этом объекте будет точно такой как и на прошлом, то имеет смысл сэкономить время и просто скопировать стиль со слоя, который мы сделали до этого. Чтобы скопировать стиль, жмем правой кнопкой мыши на слое с первыми бликами и в выпадающем меню выбираем Copy Layer Style. Теперь жмем так же правой кнопкой мыши на слой с бликом под крышей, и в меню выбираем Paste Layer Style. Таким образом мы скопировали стиль с черно-белым градиентом – осталось произвести манипуляции с самим слоем
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/b23/a31/1a9/b23a311a9fea2ebed617fb6ed24833b2.png)
Результат будет следующим
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/e94/7dc/940/e947dc94084d558c07ae8ee3a2712a77.png)
Продолжаем добавлять блики. Хочу заметить что каждый блик должен быть на отдельном слое, так будет легче манипулировать со стилями… Рисуем еще четыре блика – каждый в отдельном слое
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/015/790/b68/015790b68e222f42ff23489eb2b8909f.png)
Предлагаю сэкономить время – копируем стиль со слоя, на котором мы делали первый блик. Далее, назначаем на скопированный стиль на каждый из последних четырех слоев. Так же для каждого слоя производим соответствующие манипуляции
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/b23/a31/1a9/b23a311a9fea2ebed617fb6ed24833b2.png)
В результате у нас должно получиться следующее
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/af0/cc3/0dc/af0cc30dc23576f2c35333763d62da78.png)
На этом этапе домик смотрится завершенным, но я все же позволю себе нанести последние штрихи, подчеркнув фундамент. Для этого с помощью инструмента
![pencil_tool.png](https://habrastorage.org/getpro/habr/post_images/775/c47/b52/775c47b525b8064742be1035ffd87d6f.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/657/634/b4d/657634b4da883d36f415de5d95759d7c.png)
Почти готово. Ниже добавим еще одну линию только с цветом b5b8a3.
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/ab3/49d/426/ab349d4267d470fb5f4958a15c23980a.png)
Осталось нашему домику добавить тень. Для этого выделяем все слои, и группируем их в одну группу – это будет наш исходник. Далее делаем копию группы, и в этой копии сжимаем все слои в один – идем в меню Layers > Merge Layers (Ctrl + E). Это будет слой к которому мы применим тень, а наш исходник мы сделаем невидимым
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/690/246/f38/690246f38f36c1ae107252f47d05bdad.png)
Далее идем в меню Layer > Layer Style > Drop Shadow… и назначаем тень со следующими параметрами
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/51b/254/27a/51b25427a91c07156db5f4fbcaeb43ad.png)
И, в итоге получаем готовую к использованию иконку!
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/4cb/069/ad0/4cb069ad07e1b74d5551a614ea7385ba.png)
![Как нарисовать иконку](https://habrastorage.org/getpro/habr/post_images/862/382/8a8/8623828a822a1ef98ccbaf4a6e726d63.png)