Подписаться Бесплатная новостная рассылка Подписчиков 6 RSS

Июнь 2011 →
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

За последние 60 дней ни разу не выходила

Сайт рассылки: http://kaktous.ru
Открыта: 24-05-2011

Автор

ijully

Статистика

6 подписчиков
0 за неделю

← Все выпуски →

Волшебный мир векторной графики InkScape

Волшебный мир векторной графики Inkscape

Выпуск № 1

Первое знакомство с программой

Где взять программу

Inkscape — открытый редактор векторной графики, функционально схожий с Illustrator, Freehand, CorelDraw или Xara X. Как заявляют разработчики, их целью является создание мощного и удобного инструмента для рисования, полностью совместимого с со стандартами XML, SVG и CSS.

Русскоязычную версию программы можно скачать с официального сайта вот по этому адресу:
http://inkscape.org/download/?lang=ru
Проблем с установкой быть не должно, при использовании установочного пакета единственное, что от вас потребуется, это выбрать язык.

На этом же сайте интересно ознакомиться с примерами профессионально выполненных работ в Inkscape, чтобы еще раз убедиться, что мы имеем дело с действительно мощным редактором векторной графики. Работы выложены здесь:
http://inkscape.org/showcase/index.php?lang=ru

Лицензия

Это конечно формальность, когда речь изет о GNU GENERAL PUBLIC LICENSE, но для некоторых организаций важно. Вы можете скопировать лицензию, открыв ее в меню Справка > О программа В открывшемся диалоге есть специальная вкладка Лицензия

Справочная система

Редактор Inkscape снабжен неплохим учебником, переведенным на русский язык (по крайней мере первые самые основные уроки, перевод последних уроков пока отсутствует, но он и не так актуален). Учебник открывается командой меню Справка > Учебник . Примечательно, что учебник создан в формате Inkscape SVG, то есть каждая его страница может быть открыта и отредактирована в самом Inkscape. Можно сразу же попробовать поработать с примерами изодражений, посмотреть настройки и т.п.

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

Помимо учебника в меню Справка содержится ссылка на руководство к программе (Справка > Руководство по Inkscape ), в настоящий момент только на английском языке.

В официальном руководстве есть интересный раздел под названием "Быстрый старт". Там помимо общего описания есть 11 очень неплохих уроков. Они написаны так, чтобы охватить как можно больше приемов работы за минимальное время. Поэтому я не буду отступать от этого пути, и лишь подробнее изложу некоторые моменты, требующие дополнительных пояснений.

Итак, первый урок называется

Шведский флаг

Почему именно шведский, а не российский? Во-первых, дань традиции (как выбрали авторы), а во-вторых (и это главное) шведский флаг более подходит для того, чтобы реализовать цели урока.

Цели урока

Научиться:

Управлять размерами страницы.
Автоматически подбирать оптимальный масштаб.
Создавать и удалять сетки.
Настраивать шаг сетки.
Использовать прилипание к узлам сетки для точности построения изображения.
Работать с фигурой "Прямоугольник".
Настраивать цвет заливки фигуры.
Настраивать обводку фигуры.
Oбъединять две фигуры в одну при помощи логических операций.
Сохранять и экспортировать готовое изображение.

Задание

Построить изображение государственного флага Швеции, соблюдая размеры и пропорции, представленные на рисунке:

Соотноешние высоты и ширины флага определяется как 10:16. Для построения были выбраны размеры 200:300 пикселей.

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

Порядок выполнения задания

1. Загрузить Inkscape

При загрузке открывается окно, как на рисунке, который можно увидеть здесь. В середине окна находится прямоугольная рамка, ограничивающая печатную страницу документа. Рисовать можно и за пределами этой рамки. Но при печати документа принтер выводит только то, что внутри нее.

2. Управление размерами страницы

В данном уроке будем располагать рисунок строго в пределах страницы, причем он будет занимать все отводимое место.

Выберите команду меню Файл > Свойства документа (или нажмите Shift + Ctrl + D). В открывшемся диалоге введите:

Ширина - 320

Высота - 200

Как только будут введены оба числа и нажата клавиша , переключатель "Ориентация" автоматически установится в режим Альбом

Проследите, чтобы были выбраны единицы px
т.е. все, как показано ниже на рисунке:

Не закрывайте диалог, просто отодвиньте его в сторону, он еще нужен.

3. Выбор оптимального масштаба

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

Другой способ: нажать клавишу с цифрой 5

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

4. Создание сетки

Сетка - это вспомогательная разлиновка, используемая для удобства построений. Она подобна разлиновке тетради "в клетку", но размер и форму клеток можно изменять. На готовом изображении сетки видно не будет.

Вернитесь к диалогу Свойства документа (если закрыли, откройте еще раз). Перейдите на вкладку Сетки. Если по умолчанию не задан режим Прямоугольная сетка (см. рисунок), задайте его, выбрав из списка. Затем нажмите кнопку Создать.

Возможная проблема: Inkscape позволяет создавать несколько сеток. Если вы случайно нажмете кнопку Создать более одного раза, будут созданы лишние сетки. Для каждой из них создается собственная дополнительная вкладка. Удалить лишние сетки можно нажатием кнопки Удалить в самом низу диалога (см. рисунок ниже).

5. Настройка шага сетки

По умолчанию сетка имеет шаг 1 пиксель. Обычно масштаб не позволяет отобразить все линии сетки.

Для решения поставленной задачи удобнее использовать сетку с шагом 20 пикселей. Тогда сетка разобъет холст на 10 частей по высоте и 16 частей по ширине, и можно легко выполнить все построения. Введите указанные числа, как показано на рисунке:

Диалог не закрывайте, работа с ним еще не закончена

6. Настройка прилипания к сетке

Для точности геометрических построений удобно пользоваться прилипанием к узлам сетки. Перейдите в диалоге на вкладку Прилипание. Переключатель Прилипание к сетке установите в режим Всегда

Затем в Панели параметров прилипания нажмите (если они еще не нажаты) те кнопки, которые указаны на рисунке внизу:

7. Построение прямоугольника (фон изображения)

В панели инструментов выберите инструмент Прямоугольник либо нажмите клавишу F4

После этого курсор приобретает вид перекрестья, рядом с которым нарисован маленький прямоугольник.

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

Прямоугольник строится как в любом другом графическом редакторе: наведите курсор на угол страницы, нажмите кнопку мыли и протащите в противоположный угол. Обратите внимание, как углы прямоугольника прилипают к узлам сетки.

Если получилось неудачно, выберите команду меню Правка > Отменить... либо нажмите Ctrl + Z либо кнопку отмены в Панели команд:

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

Полезно знать: в нижней части окна в строке состояния имеет область подсказки (см. Общий вид окна здесь), где сообщается, какой инструмент выбран, что и как с его помощью можно сделать, сколько и каких объектов выделено на данный момент, и т.п. Для того, чтобы видеть подсказку целиком, нужно выбрать не слишком маленький размер окна.

8. Построение креста

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

Для построения горизонтальной полосы отступите от края страницы по 4 клетки снизу и сверху и постройте прямоугольник высотой в 2 клетки.

Для построения вертикальной полосы отступите 5 клеток слева и постройте прямоугольник шириной в 2 клетки.

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

9. Сумма двух фигур

Это в принципе не обязательно, но желательно хотя бы для того, чтобы этому научиться. Выделите оба прямоугольника, образующих крест. Для этого удерживая клавишу Shift, щелкните сначала по одному, затем по второму прямоугольнику. Вокруг выделенных фигур появляются пунктирные рамки. Выберите команду Контур > Сумма. (или нажмите клавиши Ctrl и + Из двух фигур получится одна. Теперь крест стал единым объектом.

10. Настройка цвета заливки и обводки

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

Эти параметры можно увидеть в области индикаторов стиля слева в строке состояния (см. Общий вид рабочего пространства).

Если требуется изменить стиль, нужно выделить фигуру и поменять для нее настройки стиля. Фигуру в векторных редакторах выделяют щелчком по ней. Цвет заливки можно изменить, если щелкнуть по новому цвету в палитре. Цвет обводки меняется точно так же, но с удерживанием клавиши Shift.

Этого будет почти достаточно для решения задачи, но цвета не совсем соответствуют стандартным цветам флага Швеции. Для более точной настройки параметров стиля требуется выполнить другие действия.

Выделите прямоугольник фона (щелкните по нему). Выберите команду меню Объект > Заливка и обводка

Откроется диалог. На вкладке Заливка выберите дополнительную вкладку RGB и введите значения, как на рисунке.

R - 0

G - 90

B - 173

A - 255 (непрозрачность)

Не снимая выделения с прямоугольника в этом же диалоге перейдите на вкладку Обводка и щелкните по значку Нет (см. рисунок)

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

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

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

R - 255

G - 194

B - 0

A - 255

От обводки креста избавимся другим способом. Выбелите крест. Удерживая клавишу Shift, щелкните по значку Нет в палитре, расположенной в нижней части окна, над строкой состояния (см. рисунок).

11. Сохранение и экспорт изображения

Сохранение изображения выполняется по стандартной схеме: командой меню Файл > Сохранить (вместо этого можно нажать кавиши Shift +Ctrl + S ). Далее стандартный диалог зависит от операционной системы.

Если требуется экспортировать изображение в формат PNG, выберите команду меню Файл > Экспортировать в растр.

В открывшемся диалоге сверху имеется четыре кнопки: Страница, Рисунок, Выделение, Заказная. В нашем случае Страница и Рисунок - это одно и то же, выберите что-то одно. Затем нужно ввести внизу полное имя файла (вместе с путем к нему), но во многих случаях удобнее указать путь при помощи кнопки Выбрать. После того как определено имя файла,нажмите на кнопку Экспорт.

Задание выполнено!

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}