Векторный логотип в Inkscape

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

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

Логотип векторного редактора Inkscape
Сегодня мы с вами отредактируем присланный дизайнером квадратный логотип компании в простейшем редакторе векторной графики Inkscape, чтобы получить требуемый прямоугольный.
Кто не знаком с этой легкой (по сравнению с такими «монстрами», как Adobe Illustrator) программой, напишите мне, и я вышлю вам программу с подробной русской инструкцией.

Логотип нам выслали на формате PDF. Открываем векторный редактор Inkscape.

Первый шаг урока
Импортируем в программу файл логотипа. Для этого наводим курсор мышки на меню «файл» и в открывшейся вкладке кликаем левой кнопкой мыши на подменю «импортировать».

Импорт логтипа
Открывается окошко проводника для выбора файлов импорта. Выбираем файл логотипа в формате pdf (у вас этот файл может быть в формате svg). Расширение формата не имеет значения, так как мы сохраним наш созданный логотип в растровым формате PNG.

Выбор исходника
После выбора нажатие на кнопке «открыть», появится окно редактора с параметрами импорта. Нечего не меняем и нажимаем на кнопку «ОК»

Окно импорта
Файл логотипа появляется в рабочем пространстве векторного редактора Inkscape.

Рабочее пространство редактора
Наша задача создать логотип размером 187х50 пикселя, притом рисунок должен быть с слева, а надпись - справа. Требуемые размеры мы зададим при экспортировании готового логотипа, поэтому, не обращая внимание на исходные размеры, приступаем к редактированию.
Главное достоинство векторных изображений – это независимость качества от размера.

Первым делом дублируем исходник. Для этого выбираем инструмент выделения (стрелка) и кликаем на изображении.

Дублирование вектора
Далее в меню «Правка» выбираем подменю «Продублировать» и кликаем.

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

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

Выделение требуемого участка
Если прямоугольнику задана заливка, то следует в окошке «Заливка и обводка» отменить заливку. Чтобы окошко заливки появилось на рабочем столе, в верхнем меню установите курсор на «Объект» и в появившемся подменю – на «Заливку и обводка»

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

Окно заливка и обводка
Как видно на фото, заливка исчезала, остались только пунктиры выделенного участка.
Чтобы вырезать требуемый участок, нажимаем кнопку “Shift” на клавиатуре и выбираем изображение так же, чтобы они обе были выделены. Далее снова открываем меню «Объект», выбираем подменю «Обтравочный контур».

Меню контур
Справа появляется подменю «Установить». Жмем: этим действием мы вырезаем требуемы участок.

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

Редактирование логотипа
Далее рисуем прямоугольник требуемого размера, 187х50 пикселя и заливаем желтым цветом фона логотипа. Цвет заливки выбираем с помощью пипетки, как во всех графических редакторах.

Основной слой логатипа
Чтобы задать точные размеры, открываем окошко «Трансформировать», выбираем вкладку «Масштаб» и единицу измерения «px». Ставим требуемые параметры и нажимаем на кнопку «Применить».

Задаем размеры
Перетаскиваем вырезанные ранее участки на основной фон, и, перетаскивая мышкой за крайние маркера, уменьшаем или увеличиваем до требуемых размеров.
Чтобы поднять вырезанные участки на передний план, просто выделяйте и в меню «Объект» выбирайте подменю  «Поднять на передний план».

Выводим на передний план
Для вставки полученного логотипа на сайт, требуется экспортировать в формат PNG. Для этого выделяем все три слои и в меню «файл» выбираем «Экспортировать в PNG».

Меню экспорта
Справа открывается окошка экспорта. Выбираем требуемый размер, папку и нажимаем на кнопку «Экспорт».

Размеры экспорта
Задача выполнена, не профессионально, но выполнена.))) Если остались вопросы, обращайтесь при помощи комментариев.

Готовый логотип в формате PNG
Ниже для зарегистрированных посетителей выкладываю (для скачивания) учебное пособие, инструкции для пользования векторным редактором «Inkscape» на русском языке.

Скачать файл: inkscape.pdf [1,68 Mb] (cкачиваний: 14)
Посмотреть онлайн файл: inkscape.pdf
WEB

Был ли полезен этот урок?

Комментарии 1

AVDSM от 28 октября 2017 21:42
Напишите, если желаете получит ссылку на скачивание программы inkscape
Добавить комментарий

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