- PVSM.RU - https://www.pvsm.ru -
Есть для дизайна специальные программы как Sketch [1], но они есть только на маках (а у меня их нет) и занимаются только дизайном, хотя судя по обзорам делают это хорошо (unix-way как-никак). А есть фотошопы, гимпы и прочие корелы, которые используют не по назначению, об одном из таких случаев и есть этот топик. Картинка для привлечения внимания (на дизайн не претендую, да и не считаю его лучше того что есть сейчас, просто картинка):
Для начала нужно подготовить документ и сам редактор для быстрой работы, конкретно будем править: хоткеи, настройки документа, сетки и немного мелочей.
Настройки, как не странно открываются в меню по Правка / Параметры. Общий вид на параметры (прошу прощения за вырвиглазный синий цвет хоткеев, gtk не очень переваривает цветовые настройки кед), полагаю читатели сами найдут описанные настройки, тем более что подавляющая часть доступна на великом и могучем:
Файл / Свойства документа. По-умолчанию при открытии уже создаётся пустой документ, так что работать будем с ним:
Тут компановку каждый может составить себе привычную, хотя и управление окнами совсем не привычное, работа со слоями обычная, но ввиду некоторых особенностей можно иногда обойтись одним уровнем слоёв:
Панели инструментов не настраиваются к ним можно только привыкнуть или поменять положение на другую сторону экрана, хотя данное по-умолчанию по мне самое удобное из возможных. Окно слоёв не отображает ничего, кроме слоёв, для управления объектами и их свойствами непосредственно есть редактор xml, он встраивается в панель, но больно широкий получается, лучше при необходимости открывать отдельным окном:
Важно аккуратно заранее всё делать по слоям, дальше будет сложнее, так как объекты в слоях он не показывает и их придётся либо редактором xml, либо на ощупь переводить в нужное место. В inkscape слои созданы для создания документа, а не вёрстки — для этого там другие штуки.
Клоны тоже одна из самых замечательных вещей в inkscape: создаётся один объект и копируются только его клоны, что очень важно в любых повторяющихся элементах. Создание клонов: для начала создаём нужный элемент/текст/что-то сложное и объединяем в группу — Правка / Клоны / Создать клон. Клоны можно трансформировать, перемещать и вращать, но не более — для остального придётся отсоединить клон. При этом изменять придётся только оригинал. Пример с банальными границами (пригодится на всяких интернет магазинах с кучей одинаковых блоков):
Я не буду учить вас дизайну, конверсии, интерфейсам и прочим шрифтам, полагаю это будет и так очевидно — никакого колдовства не надо будет. Самого бы кто научил
Этот раздел достоин отдельного поста и я его писать не буду, лишь разберу иконку хабра:
До кучи есть у редактора много функционала, связанного с выравниванием объектов, множество настроек привязки, фильтров, работ с контуром и так далее. У нас на выходе из кучи текста, квадратных блоков, иконок и одного логотипа готовый макет, за неимением достаточно мощного сервера выкладывать некуда, но по сути возвращаемся к картинке в начале поста. Осталось сверстать.
Чего не хватает в inkscape: адекватного управления объектами аналогично «слоям» в гимпе/фотошопе — редактор xml слишком перегружен и в то же время бесполезен без знания специфичных указателей svg; страниц — доступна только одна страница при создании документа, остальные делать либо в одном документе просто с большим сдвигом, либо в разных файлах — но тогда невозможны клоны и совместные правки становятся сложнее (хотя может подключаться отдельный css для svg, что правильно при вёрстке, но будет сильно замедлять работу во время дизайна).
Во второй части будет рассматриваться функционал для вёрстки
Ссылки:
Иконочный шрифт Font Awesome [10] с сервиса fontello.com [11]
Шрифт Fira sans [12]
Шрифт Open Sans [13]
Inkscape [14]
Автор: alltiptop
Источник [15]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/interfejsy/66167
Ссылки в тексте:
[1] Sketch: http://habrahabr.ru/post/183018/
[2] Image: http://http:http://habrastorage.org/getpro/habr/post_images/a61/68d/b1c/a6168db1c6737c2e72e99f6e9f154a51.png
[3] Image: http://http:http://habrastorage.org/getpro/habr/post_images/ca1/ad4/449/ca1ad4449a5e04272d71f8def639ebbe.png
[4] Image: http://habrastorage.org/getpro/habr/post_images/41f/a7a/e52/41fa7ae5218ea68640633c3e5e7fcc3d.png
[5] Image: http://http:http://habrastorage.org/getpro/habr/post_images/2bb/e6e/37b/2bbe6e37b3d4112b1c1fc87c9f91da6f.png
[6] Image: http://http:http://habrastorage.org/getpro/habr/post_images/c22/134/af4/c22134af4fd0abdb82846c0309905440.png
[7] Image: http://http:http://habrastorage.org/getpro/habr/post_images/d95/b76/f35/d95b76f35133278a756c1599641ce0ab.png
[8] Image: http://http:http://habrastorage.org/getpro/habr/post_images/bd4/bec/1a0/bd4bec1a0cfb81e6e6da4475570e1c16.png
[9] Image: http://habrastorage.org/files/083/366/38e/08336638e36b4287ba485d28ce26cebe.png
[10] Font Awesome: http://fortawesome.github.io/Font-Awesome/
[11] fontello.com: http://fontello.com/
[12] Fira sans: https://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/
[13] Open Sans: http://www.google.com/fonts/specimen/Open+Sans
[14] Inkscape: http://inkscape.org/
[15] Источник: http://habrahabr.ru/post/231417/
Нажмите здесь для печати.