Используйте Fireworks для создания изысканных деталей на значках

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

При использовании Fireworks (далее — FW) для дизайна значков следует учитывать два основных момента:

Во-первых, FW ориентирован на веб-дизайн и не подходит для создания слишком сложных эффектов PS. Вы можете рассчитывать на фильтры PS FW CS5;
Во-вторых, метод редактирования FW аналогичен AI. Если вы привыкли работать в среде пиксельного затенения, подобной PS, вы можете игнорировать это руководство.

Далее перейдем к делу. Скопируем для пояснения относительно стандартную иконку, которая облегчит понимание каждому.

На рисунке ниже представлен набор иконок, созданных известным отечественным дизайном eico. Объект, который мы хотим скопировать, — это значок конверта, обрамленный на картинке. Позвольте мне заранее объяснить, что в соответствии с тематикой урока мы добавим некоторые детали к этой иконке, поэтому конечный результат копирования будет отличаться от исходного изображения.

Шаг 01

Вырежьте значок, который хотите скопировать в качестве ссылки, и заблокируйте слой. Панель пути моей прошивки здесь извлечена из Fireworks CS4, но она не влияет на последующие операции, поскольку я использую все функции, включенные в CS3.

Шаг 02

Используйте инструмент «Прямоугольник со скругленными углами», чтобы нарисовать прямоугольник с закругленными углами, похожий на образец изображения, используйте четыре контрольные точки с закругленными углами, чтобы отрегулировать радиус закругленных углов, а затем нажмите Ctrl+Shift+G, чтобы разбить фигуру.

Затем скопируйте первый скругленный прямоугольник, с помощью инструмента «Белая стрелка» переместите один пиксель в четырех направлениях и создайте два скругленных прямоугольника, как показано на рисунке (обратите внимание, что восемь узлов в закругленных углах обработаны белыми стрелками, их нужно выровнено).

Мы не можем использовать Stroke, чтобы добавить внешнюю границу прямоугольника, потому что виртуальная граница вас убьет. Если прямоугольник с закругленными углами, который вы нарисовали с помощью инструмента «Прямоугольник со скругленными углами», имеет виртуальные края без обводки, рассредоточьте узлы, выберите «Путь» с помощью инструмента «Черная стрелка» и нажмите «Округлить точки до пикселей» на панели «Путь», чтобы вернуть все узлы пути. . положение пересечения пикселей (вы также можете использовать инструмент с белой стрелкой, чтобы выбрать узел для индивидуального возвращения в исходное положение).

Шаг 03

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

Шаг 04

Используйте белые стрелки, чтобы выбрать узлы, показанные посередине, а затем с помощью клавиш со стрелками клавиатуры переместите вниз на два пикселя, чтобы конверт выглядел длиннее (поскольку здесь один значок не ограничен общим стилем).

Шаг 05

Переверните перевернутый треугольник с градиентной заливкой, нарисованный ранее, по вертикали, сделайте копию и разместите ее, как показано на рисунке ниже. Два перевернутых треугольника разделены чуть более чем на 1 пиксель сверху вниз. Вы можете использовать инструмент с белой стрелкой, чтобы выбрать четыре узла над темно-коричневым перевернутым треугольником, и перетащить мышь со вспомогательной линией, чтобы переместить узлы вверх на 0,3 ~ 0,5 пикселей. Это сначала сделает темно-коричневый цвет менее размытым (а затем). Еще раз откажитесь как можно скорее от идеи использовать Обводку для границ, это не фотошоп).

Шаг 06

Обратите внимание, что над значком на образце изображения есть подсветка, и это не обычная однопиксельная сияющая подсветка (высветление в 1 пиксель над выделением размером примерно в два пикселя ярче, чем выделение в 1 пиксель ниже), поэтому вы можете рассмотреть возможность использования эллиптический радиатор, такой как Ellipse Filling, достигает этого эффекта.

Мы дважды выбираем и копируем нижний скругленный прямоугольник. После перемещения позиции мы получаем два скругленных прямоугольника на расстоянии 2 пикселей друг от друга. Используем метод вычитания двух прямоугольных путей, чтобы получить новый путь, и заполняем его эллипсом (белый 0). -100 прозрачности) и, наконец, установите режим наложения этого пути выделения на Overlay.

Шаг 07

Добавьте блик размером 1 пиксель внизу.

Шаг 08

Текущий результат показан ниже. Давайте сделаем перерыв и выпьем чаю. Далее добавим детали.

Шаг 09

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

Существует два метода обработки этих пикселей: один — сглаживание как растровое изображение, а другой — маскирование с сохранением пути. Я предпочитаю последний, поскольку при этом путь сохраняется, и при необходимости его можно отредактировать. Операция показана на рисунке. ниже:

Шаг 10

Давайте вернемся к темному фону. Чувствуете ли вы, что стороны конверта немного плоские? Давайте воспользуемся полосами или радиальной заливкой, чтобы добавить некоторый эффект.

Шаг 11

Затем добавьте однопиксельные блики к верхнему и нижнему треугольникам конверта. Поскольку операция вычитания пути (Punch Path, вы можете найти ее в меню «Изменить — Объединить контуры») неоднократно обсуждалась ранее, я не буду ее объяснять. здесь, как показано ниже:

Шаг 12

Таким же образом добавьте блики треугольнику ниже.

Шаг 13

Поскольку фон более темного цвета, мы можем рассмотреть возможность добавления свечения. Здесь мы не используем проекцию или фильтр люминесценции FW, а используем Path. Почему? Потому что им легче управлять, просто личные предпочтения. Мы можем создать новый скругленный прямоугольник, который будет на 1 пиксель больше сверху, снизу, слева и справа, чем нижний скругленный прямоугольник конверта, без растушевки и с прозрачностью 30.

Шаг 14

Затем добавьте блик размером 1 пиксель ниже.

Шаг 15

На данный момент иконка в основном завершена, и теперь мы переходим к этапу полировки. Мы выбираем все слои и «копируем» их, затем быстро нажимаем Ctrl+Alt+Shift+Z, чтобы свести слои в растровые изображения, а затем устанавливаем режим наложения на Overlay и прозрачность на 60, чтобы мы могли видеть насыщенность Улучшены степень и контрастность. Это мой любимый метод быстрой полировки, но он не всегда применим. Иногда вам приходится вручную использовать встроенные фильтры FW для настройки таких параметров, как кривые, контрастность и т. д. и насыщенность.

Заканчивать

Конечный эффект (треугольник под конвертом использует путь в качестве проекции)