Урок: создаем иконки

[Silver_John]

Интересовались как создать иконку DVDbox нужного тебе фильма, игры в Photoshop post171398#171398 . Вот сделал инструкцию.

[Silver_John]

Пользуясь уроком, создал файлик "ALL X-Files"(поклонникам сериала посвещается, сам являюсь таковым) с прозрачным фоном (можно использовать как иконку) формат .png

[Tin]

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

Возможности AWicons:
многоязычный интерфейс
полная поддержка иконок Windows XP
загрузка и сохранение изображений в следующих форматах: ico, cur, ani, png, gif, jpg, bmp
поддержка всех цветовых форматов (1-, 4-, 8-, 24-, 32-битные изображения)
произвольные размеры (максимум 128x128)
поиск объектов в заданной папке (с подкаталогами) по нескольким критериям (имя файла, размеры, цветность, тип) с отображением всех найденных изображений
разнообразные инструменты рисования (карандаш, линия, эллипс, полигон, текст, заливка, замена цветов и т.д.)
модификаторы инструментов (анти-алиасинг, прозрачность, многоцветный градиент с прозрачностью, размеры кисти)
разнообразные эффекты (тень, выпуклость, контрастность, цветность, размывка и т.д.)
импортирование из больших изображений с поддержкой прозрачности (для png и gif) и с ипользованием префильтрации
импортирование иконок, курсоров и bitmap из ресурсов исполняемых файлов (exe, dll, ocx, scr и т.д.)
редактирование иконок в иполняемых файлах
работа с библиотеками иконок (icl)
работа с буфером обмена Windows
возможность снятия изображения с экрана (двумя методами)
функция, позволяющая перестроить кэш системных иконок для корректного отображения изменений на рабочем столе и в меню Пуск
истории папок и файлов (отдельно для каждого типа)
простой, приятный, изменяемый интерфейс
специальная функция для программистов: AWicons позволяет редактировать картинки, содержащие несколько изображений (image list), которые используются при создании различных элементов управления (панелей инструментов, деревьев, закладок и т.д.)

Для граждан стран бывшего СССР версия Standard бесплатна!

[Tin]

Вот программа и инструкция к ней!

[Tin]

Плагин для фотошопа, чтобы сохранять иконки в нужном формате!

[Silver_John]

Вообщем вот урок
как сделать вот такую иконку:

Шаг 1. Для начала создаем изображение 128*128.
Заливаем его нужный фоном или оставляем прозрачный фон.
Создаем новый слой (ctrl+shift+N).
Далее выбираем инструмент "скругленный прямоугольник" (shift+U несколько раз пока не попадем на то что нам нужно).

Задаем скругление 10 пикселей.
Выставляем его в режим вектора как показано на рисунке.

При зажатой клавиже shift рисуем скругленный прямоугольник на слое что мы создали.
Нажимаем ctrl+enter для преобразования контура в выделение и заливаем любым цветом (на данный момент цвет не важен).
Должно получится что-такое:

Шаг 2. Создаем тень для полученного скругленного прямоугольника.
В свойствах слоя задаем следующие параметры тени:

Налаживаем градиент (цвет вы можете выбирать сами - поэкспереминтируйте).
Я, например, использовал следующий градиент:

Можно также наложить любую текстуру (я использовал текстуру 4*2 пикселя, где половину высоты занимает черный цвет, а другую половину прозрачные пиксели, таким образом я получил линии):

Далее в свойствах слоя выставляем параметры тени:

Цвет тени выбирайте исходя из цвета фона.

Шаг 4. Создание блика.
Создаем еще один слой где изпользуя инструмент "скругленный прямоугольник" (уже просто U) рисуем контур с скруглением 9 пикселей и отступами по боках от "основного тела" иконки порядка 1-2 пикселя.
Нажимаем ctrl+enter для преобразования контура в выделение и заливаем его полупрозрачным градиентом (от белого до прозрачного).
Должно получится как на рисунке:

Далее используя инструмент "pen" (нажимаем "P"), отрисовуем дугу среза по середине иконки. Должно получится что похожее как на рисунке.
Нажимаем ctrl+enter для преобразования контура в выделение и удаляем лишний градиент (del).

В результате должно получится что-то похожее на это:

Такой метод дает довольно неплохие результаты:

Так что пробуйте...

Я не автор дизайна этих иконок.
Спасиб за внимание!

[Tin]

Хотел в общем добавить, как рисовать круглые иконки, хотя какая разница!

Откройте документ размером 300 на 300 пикселей.



Залейте бекграунд градиентом от #84AAD9 до #A4BFEA




Создайте новый слой, сделайте выделение как на рисунке и залейте его белым



Понизте прозрачность слоя до 31 и примините filter->blur->Gaussian Blur со значением 2



Создайте новый слой и выделите на нем идеальную окружность залейте цветом #5B87CE и не снимайте выделения



Мяхкой кистью и диаметром 150 рисуем нечто подобное:



Применяем filter->blur->motion blur с параметрами:



Получаем:



Понизте прозрачность слоя до 83 нажмите V и подвинте слой на четыре нажатия "стрелки вверх"



Примините filter->blur->Gaussian blur с радиусом 5, затем щелкните по слою с кругом с зажатой клавишой CTRL чтобы выделить круг
идем в select->modify->contract и ставим значение 7



Создаем новый слой и наше выделение заливаем сверху вниз градиентом от белого к прозрачному и делаем вот такое вот выделение



Инвертируем выделенное shift+ctrl+I и нажимаем DEL чтобы удалить не нужное!



и снимаем выделение далее filter->blur->Gaussian Blur со значением 1,5 результат:



Добавляем на слой с кругом стиль Drop Shadow со значениями



Получили в итоги:

[Zidein]

Во, решил попробовать (: