Как нарисовать иконки для сайта в PhotoShop

Миниатюра

 

Добрый день, уважаемые читатели нашего блога!

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

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

ИТАК, начнем!

1. Открываем файл иконки в Фотошопе и с помощью инструмента

1. Открываем файл иконки (Кнопка Англоязычная
Кнопка Англоязычная
Кнопка Англоязычная
Кнопка_Англоязычная.png
Кнопка Англоязычная
1.4 KiB
88 Скачиваний
Детали
09.12.2014) в Фотошопе и с помощью инструмента Палец замазываем Слово «Download»

1.1 Сначала стираем верхнюю часть слова (так как визуально иконка

1.1 Сначала стираем верхнюю часть слова (так как визуально иконка состоит из 2 вертикально расположенных частей)

1.2 С помощью инструмента текст и параметров наложения слоя

2. С помощью инструмента текст и параметров наложения слоя зададим цвет, Шрифт слоя и сохраним на диск. Такой грубый и быстрый способ получения результата использовался В прошлой статье. Попробуем сделать по-другому.

3. С помощью свойств файла узнаем размер иконки образца

3. С помощью свойств файла узнаем размер иконки образца

4. В Фотошоп создаем новый документ Размером 211 на 40

4. В Фотошоп создаем новый документ Размером 211 на 40

4. Выбираем инструмент Прямоугольник

4.1. Выбираем инструмент Прямоугольник

5. Получилась непонятная фигня. Подредактируем ее

5. Получилась непонятная фигня. Подредактируем ее

6. Нажмем Ctrl-T и подберем края прямоугольника по краям изображения

6. Нажмем Ctrl-T и подберем края прямоугольника по краям изображения и нажмем Enter для сохранения краев

7. Выберем на верхней панели свойство Штрих и выберем

7. Выберем на верхней панели свойство «Штрих» и выберем первую слева иконку

8. Выберем свойство заливка Закладка Градиэнт, выберем обычный

8. Выберем свойство «Заливка» закладка «Градиент», выберем обычный трехступенчатый градиент (3 ползунка снизу)

9. Дважды кликнув на первом слева ползунке мы вызовем цветовое

9. Дважды кликнув на первом слева ползунке мы вызовем цветовое меню, где выберем цвет согласно рисунку

10. Благодаря тому что слева и справа ползунки цветов

10. Благодаря тому что слева и справа ползунки цветов одинаковые мы создали эффект объемности с помощью 3-х ступенчатого градиента

11. С помощью инструмента - Прямоугольник со скругленными

11. С помощью инструмента «Прямоугольник со скругленными краями» создадим скругленную рамку по краям изображения

12. Выберем инструмент Линия

12. Выберем инструмент «Линия»

13. В настройке Заливка выберем темно зеленый цвет заливки

13. В настройке «Заливка» выберем темно зеленый цвет заливки линии, толщина линии 2 пиксела.

14. В качестве штриха выберем простую линию

14. В качестве штриха выберем простую линию

15. Рисуем стрелку по линиям 15.1 Рисуем стрелку по линиям
15.2 Рисуем стрелку по линиям 15.3 Рисуем стрелку по линиям

15. Рисуем стрелку по линиям

16. Выбираем инструмент Заливка

16. Выбираем инструмент Заливка

16.1. При этом необходимо растризовать рисунок

16.1. При этом необходимо растризовать рисунок. Изначально рисунок Векторный (то есть описывается математическим языком). Растрированный рисунок — рисунок в виде точек.

17. Потяните край нижнего окна свойств вверх, выделите

17. Потяните край нижнего окна свойств вверх, выделите с помощью «Ctrl+левая кнопка мыши» все слои и нажмите правую клавишу мыши

17.1. Нажмите объединить слои во всплывшем окне

17.1. Нажмите объединить слои во всплывшем окне

18. С помощью инструмента Заливка и настроек как на скриншоте

18. С помощью инструмента Заливка и настроек как на скриншоте, измените фон внутри стрелки

18.1 Пишем буквы

18.1. С помощью Инструмента «Текст» добавьте рамку с текстом и настройками как на картинке

18.2 Выбираем слой с созданными буквами и нажимаем его

18.2. Пишем буквы

18.3. С помощью Инструмента Текст добавьте рамку с текстом

18.3. Выбираем слой с созданными буквами и нажимаем его правой кнопкой мыши, в всплывающем окне выбираем первый сверху пункт «Параметры наложения».

18.4. Выбираем настройки как на скриншоте

18.4. Выбираем настройки как на скриншоте

19. В настройках качества картинки можно добится хорошего

19. Сохраняем картинку с уменьшением качества (для сайта)

19. Сохраняем картинку с уменьшением качества (для сайта)

19.1. В настройках качества картинки можно добится хорошего качества при приемлемом объеме картинки. Получится симпатичная иконка

20. Сравниваем качество и размер получившихся кнопок с эталоном

20. Сравниваем качество и размер получившихся кнопок с эталоном

 

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

Кнопка Русскоязычная низкое качество
Кнопка Русскоязычная низкое качество
Кнопка Русскоязычная низкое качество
Кнопка_Русскоязычная_низкое_качество(2).jpg
Кнопка Русскоязычная низкое качество
3.0 KiB
118 Скачиваний
Детали
09.12.2014Кнопка Русскоязычная высокое качество
Кнопка Русскоязычная высокое качество
Кнопка Русскоязычная высокое качество
Кнопка_Русскоязычная_высокое_качество.jpg
Кнопка Русскоязычная высокое качество
6.7 KiB
95 Скачиваний
Детали
09.12.2014Кнопка Русскоязычная среднее качество
Кнопка Русскоязычная среднее качество
Кнопка Русскоязычная среднее качество
Кнопка_Русскоязычная_среднее_качество.jpg
Кнопка Русскоязычная среднее качество
3.9 KiB
101 Скачиваний
Детали
09.12.2014

 

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

В следующих статьях я покажу вам как можно наисовать такие-же иконки в других программах. Например, в Corel Draw а также бесплатной IcoFx.

Успехов! До скорого!

Теги: ,

  • http://twitter.com/maxfry Wladislav

    класс

>