Как создать мини-иконки - Школа Photoshop
Как создать иконку? Как создать иконку?

Как создать мини-иконки

16.10.2008Категория урока: Кнопки и Иконки

Многие люди просили меня научить создавать мои пиксельные иконки. Фактически их относительно просто создавать. Все, что вам нужно, это иметь базовые навыки Photoshop. Я покажу вам, как использовать Pencil для создания пиксельных иконок, и затем использовать этот инструмент повторно для создания коллекции. Я использую эту технику для создания более 320 иконок в день.

Как создать иконки?

Приблизительное время выполнения: 5 минут

1. Создайте новый документ

Создайте новый документ в Photoshop, размером 14 x 14 пикселей с прозрачным фоном.

Как создать иконку?

2. Нарисуйте контур фигуры

Выберите Pencil tool и размер кисти1 пиксель из палитры. Выберите темно-серый цвет и начните рисовать контур иконки. Чтобы нарисовать прямую линию, кликните там, где хотите начать, затем зажмите shift и кликните на конечной точке.

Как создать иконку?

Совет: Каждый раз, как вы хотите стереть пиксель, выбирайте Eraser tool, у него — режим Pencil mode и размер кисти 1 пиксель.

3. Базовый градиент

Выделите пустую белую область при помощи Magic Wand tool. Создайте новый слой. Поставьте цвет переднего плана на светло-серый и фоновый цвет на белый. Используйте Gradient tool, протяните из верхнего угла в нижний угол по диагонали.

Как создать иконку?

4. Свет и тень

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

Как создавать иконки?

5. Сгруппируйте все слои

В палитре слоев выберите все слои и нажмите Cmd+G, чтобы сгруппировать все слои в папку.

Создать иконку

6. Нарисуйте карандаш

Снова начните рисовать сначала контур и затем залейте всю внутреннюю область одним цветом либо градиентом. Когда закончите, сгруппируйте эти слои в отдельную папку.

Совет: Если вы хотите одинаковые цвета во всех иконках в наборе, сохраняйте цвета в палитре.

Как создать иконку?

7. Используйте слои повторно

Тут я показал, как использовать группы слоев повторно, чтобы создать коллекцию

Как создать иконку?

8. Экспортируем для веба

После того, как закончите, примените toggle (invisible / visible) к группам слоев и сохраните их для веб. (Cmd+Alt+Shift+S).

Как создать иконку?

Источник: How to Design Mini Icons




Смотрите также:

Понравился урок? Поделитесь им в социальных сетях:



11 комментария(-ев) к уроку “Как создать мини-иконки”

  1. Неплохо,у меня получилось
    КЛАСС :mrgreen:

    JENEK

  2. Один из наиболее бестолковых уроков на сайте. Но может и пригодится кому то.

    :!: Admin

  3. Было бы интересно посмотреть урок рисования какой-нибудь favicon для сайта. Там тоже с пикселями возиться приходится.

    Омский студент

  4. Отлично!!! :lol: Только вот хотелось бы чё нить покрупнее Щас прою3аем сайт можат чё и найдём :) ))))

    Меньшиков blog

  5. Урок супер! :smile: Всё чётко и ясно написано. :wink: Осталось самому придумать свою собственную иконку для сайта.

    Марк

  6. Отличный урок, отличный туториал, пригодится.

    Kosma

  7. Я сначало рисую в большом формате, потом уменьшаю до размеры иконки.. вот и все))

    Поисковая система

  8. как сохранить? :cry:

    Sunwell

  9. Аноним

  10. Спасибо, за урок! У меня всё получилось. Это была моя самая маленькая работа в Photoshop. ;-)

    Рыбка

  11. Объяснять научись ничего не понятно
    пиши подробнее :x :???:

    vandos

Прокомментировать урок

 


Rambler's Top100