среда, 3 февраля 2010 г.

3D Rss Icon


В этом уроке научимся рисовать трёхмерную RSS-иконку. Урок рассчитан на инкскейперов, которые обладают базовыми навыками работы с Inkscape: создание и правка градиентов, правка узлов.


1. Создайте новый документ в Inkscape. Выберите инструмент рисования прямоугольников и квадратов. Нарисуйте квадрат и закруглите углы. Горизонтальный и вертикальный радиусы закругленных углов выберите около 25-40, всё будет зависеть от размеров нарисованного квадрата. Цвет выберите оранжевый, без обводки. Результат должен получиться как на скриншоте ниже. Полученную фигуру необходимо оконтурить (Shift+Ctrl+C).


2. Выделяем нарисованную фигуру и переходим в меню Расширения > Создание из контура > Движение (для Inkscape 0.47). Настройки выставите как на скриншоте ниже, от них будет зависеть ширина и перспектива будущей трёхмерной фигуры.


В итоге у нас получится фигура как на скриншоте ниже.


3. Полученная фигура чем-то и напоминает трёхмерную плитку, однако её предательски портят зазоры, образовавшиеся после применения эффекта. Эти зазоры необходимо убрать.


4. Разгруппируйте нашу фигуру Объект > Разгруппировать (Shift+Ctrl+G). Выделите переднюю грань плитки и переместите её влево (или вправо). Лучше всего это сделать так: выделив грань, зажмите Shift и переместите грань несколько раз нажав клавишу со стрелкой. В этом случае у вас не будет проблем при перемещении грани на прежнее место. Перед вами должны остаться фигуры, которые образуют боковые грани плитки, все они сгруппированы. Разгруппируйте их, выделите и примените контурную операцию Контур > Сумма (Ctrl++).


5. Верните на прежнее место переднюю грань. Для ликвидации оставшихся зазоров необходимо немного увеличить размер передней грани (на 0.5 - 2) и подкорректируйте местоположение. Удобнее всего это делать при большом масштабе или используя панель с координатами.


В итоге вы должны получит чистую фигуру без зазоров.


6. Выделяем переднюю грань, открываем диалог заливки и обводки (Shift+Ctrl+F). Примените к грани линейный градиент, его необходимо будет изменить: добавить ещё одну опорную точку (в сумме их будет три) и выбрать нужные цвета (1-й и 3-й - d45500ff, 2-й - d47d00ff). Инструментом редактирования градиентов (Ctrl+F1) меняем направление градиента как показано на скриншоте ниже.


7. Выделяем элемент боковой грани, таким же образом создаём градиент и правим его направление и цвета (1-й и 3-й - d44600ff, 2-й - d47800ff).


8. Выделяем переднюю грань и дублируем её (Ctrl+D). Меняем направление градиента и немного уменьшаем размер продублированной грани. Располагаем её по центру над прежней гранью.


9. Дублируем созданную в шаге 8 уменьшенную грань, перемещаем её в сторону (используйте Shift и клавиши со стрелками). Далее необходимо удалить два нижних правых узла, которые образую закруглённый угол. Далее у получевшейся фигуры необходимо изменит градиент (предварительно продублируйте градиент), удалите одну опорную точку (в сумме их должно быть две). Направление градиента должно быть сверху-вниз (верхний цвет - полупрозрачный белый, нижний - прозрачный белый).


10. Полученную в шаге 9 фигуру поместите строго поверх передней грани (полученную в шаге 8) плитки.


11. Создадим пиктограмму RSS. Нарисуйте две окружности (одна меньше другой), толщину обводки установите около 35. У обоих окружностей необходимо оконтурить обводку (Ctrl+Alt+C).


12. Для точного выравнивания окружностей (центры обеих окружностей должны сойтись в одной точке) откройте диалог в меню Объект > Выровнять и расставить (Shift+Ctrl+A). Выделяем обе окружности и кликаем по кнопкам Центрировать объекты по горизонтали и Центрировать на горизонтальной оси.


13. Далее суммируем отцентрованные окружности (Ctrl++). Рисуем квадрат без заливки (размер должен быть больше радиуса большей окружности). Оконтуриваем обводку (Ctrl+Alt+C), помещаем квадрат на окружности так, чтобы визуально отделить правую верхнюю часть окружностей.


14. Выделяем квадрат и окружности. Применяем контурную операцию Разделить (Ctrl+/). После применения оставляем верхнюю правую часть, остальную часть получившейся фигуры удаляем.


15. Завершающий штрих для нашей пиктограммы RSS, рисуем небольшой кружок и помещаем в нижнюю левую часть пиктограммы.


16. Полученную пиктограмму заливаем белым цветом и перемещаем на плитку. Немного корректируем размер и положение.


Подготовлено по материалам сайта www.kendraschaefer.com


Комментариев нет:

Отправить комментарий