Блог Сергея Хилькова

Блог о дизайне, работе на маке в графических программах от Sketch до Photoshop, вёрстке и веб-технологиях.

Перенос горячих клавиш Скетча между компьютерами

В телеграм-канале Скетч-дизайнер появился прекрасный совет о том как перенести горячие клавиши и плагины Скетча на новый компьютер. Привожу немного сокращенный вариант заметки.

Переносим плагины

Все они хранятся в папке:

~/Library/Application Support/com.bohemiancoding.sketch3/Plugins

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

Переносим файл настроек с клавишами

Все настройки Скетча хранятся в файле типа plist. Первое, в чём мы удостоверимся — что и на старом Маке и на новом одна и та же версия Скетча. Это важно, потому что файл настроек от версии к версии меняет свою структуру. Проверил, 51.1 несовместим с 51.2. При необходимости нужно сделать даунгрейд до той версии, которая стоит на старом компе. Впоследствии мы обновимся и Скетч сам обновит структуру файла настроек.

Нам нужен файл com.bohemiancoding.sketch3.plist, который лежит в папке

~/Library/Preferences/

Закрываем Скетч, копируем этот файл со старого в аналогичную папку на новом.

Чистим кэш Мака

Теперь нужно перезапустить приложение Файндер (сделать реланч). Для этого зажимаем Alt и правой кликаем на иконку Файндера. В появившемся контекстном меню будет скрытый пункт Relaunch.

Это нужно сделать, потому что macOS кэширует настройки и не обращается к ним из файла постоянно. Чтение настроек как раз происходит при запуске Файндера.

Обновляем Скетч, если нужно

Лезем в меню Sketch → Check for Updates... и ставим актуальную версию. Во время апдейта файл настроек обновится.

Проверяем в System Preferences, подтянулись ли клавиши.

2018   Sketch

Paddy — плагин для Скетча, который давно ждал

Совершенно гениальный плагин для Скетча Paddy, позволяет автоматически изменять размер фона под контент (как это делал Dynamic button или Compo). И что мега-круто, и отличает его от других подобных плагинов — он поддерживает символы и бесконечную вложенность! Теперь можно создавать макеты из символов, которые будут меняться по заданным правилам автоматически, в зависимости от контента.

Наконец-то можно снести Compo (прекрасен, но не работает с символами) и Anima Auto Layout (добавляет панели с кучей хлама)

2018   Sketch

Медиаклавиши в Hight Sierra

В Hight Sierra случилось странное. Apple поменяла поведение медиаклавиш (тех, что на клавиатуре на клавишах F7, F8 и F9). Теперь они контролируют не только воспроизведение в iTunes, но и управляют воспроизведением видео в Safari, Telegram и других программах. Самый простой способ это исправить — установка программки «highsierramediakeyenabler».

ГитХаб проекта.

2017   macOS

Способ конвертировать .sketch в .psd без потерь данных

Для этого:

  1. Заходим на сайт www.photopea.com
  2. Открываем в нем файл .sketch
  3. Сохраняем его как .psd
  4. Открываем psd в фотошопе
  5. Получаем внятный макет, с сохраненной структурой слоев (в т.ч. скрытых), шейпами, цветами, градиентами, шрифтами и эффектами.

Спасибо telegram-каналу «Наука Дизайна»

2017   Sketch

14 советов по использованию Sketch и InVision в работе дизайнера

Инвижн позволяет дизайнеру продемонстрировать заказчику прототип дизайна приложения, сделав его интерактивным. Кроме того, благодаря Инвижн, можно организовать слаженную работу внутри команды, между дизайнером, менеджером проекта, верстальщиком и программистами, независимо от платформы (macOs, Windows, Linux). Предлагаю вашему вниманию удобные сценарии использования связки Sketch + InVision.

Советы по подготовке прототипов в Sketch

1. Установите набор плагинов «Craft»

Craft — это великолепный набор плагинов, созданный компанией InVison LABS. В контексте нашей темы, обращаю внимание на плагин Sync, который позволяет прямо из редактора Скетч загружать артборды в Инвижн. Для этого, вначале нужно создать проект на сайте Инвижн, указав тип интерфейса (приложение для десктопа, планшета, телефона или часов).

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

Кроме того, дизайн можно выгружать в разрешениях @1x или @2x. Благодаря этому, ваш дизайн будет великолепно смотреться на устройствах с ретина-дисплеями.

2. Один раздел — одна страница

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

3. Модальные окна на отдельных артбордах

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

Обратите внимание, что если у окна есть тень, то она должна быть внутри артборда, иначе она «обрежется» и не будет видна.

Важно в Скетче сразу правильно называть артборды, т. к. в Инвижн экраны получат такое же имя. А если арборд переименовать после синхронизации, то в Инвижн создадутся 2 одинаковых экрана с разными именами, один из которых придётся удалять вручную.

На мой взгляд, это бага. Надеюсь, в скором времени её исправят, но пока этот момент надо иметь в виду.

4. Состояния элементов

Если вы разрабатываете интерфейс для десктопа, то для выпадающих списков, и других элементов интерфейса нужно изобразить состояние «hover» (наведение курсором). Для этого, так же как и с модальными окнами, на отдельном артборде изобразите список в раскрытом виде и загрузите в Инвижн. У вас создастся отдельный экран с этим списком.

Далее, создаём область над заголовком списка, при наведение на который будет отображаться развёрнутое меню, выбираем «Screen as overlay» и  экран со списком в раскрытом состоянии. Для того чтобы всё размещалась ровно, выбираем «Position — Top Left», «Transition — Fade in» и указываем координаты, которые можно подсмотреть в Скетче в панели Position.

5. Статусбар рисовать не нужно

В дизайне приложений для мобильных и планшетов не изображайте Статусбар, но оставьте для него место. Дело в том, что Инвижн покажет свой статусбар при просмотре через браузер. Вы сможете выбрать оформление статусбара из 2 вариантов: тёмный и светлый.

6. Подготавливайте иконки и графику для экспорта

Благодаря недавним нововведениям в Инвижн появился Inspect Mode, через который верстальщики и программисты могут смотреть описание любых элементов, а так же экспортировать их. Какие элементы будут доступны для экспорта из Инвижн, и их размеры, определяет дизайнер в редакторе Скетч. Просто выберите элемент, укажите форматы и размеры для экспорта. Теперь этот элемент можно скачать в указанных форматах прямо из Инвижн.

Забыли настроить экспорт для какого-либо объекта? Не беда. Идём в Скетч, настраиваем экспорт элемента и синхронизируем артборд через плагин «Craft Sync». Готово, объект можно экспортировать из Инвижн.

Советы по работе в InVision

Инвижн весьма демократичны в ценовой политике. Для того, чтобы ознакомиться с функционалом, платить ничего не нужно, создание одного прототипа — бесплатно. Если вы фрилансер, который одновременно ведёт не больше трёх проектов, то вам подойдёт «Стартовый» тариф, за 15 долларов в месяц. На этом тарифе можно создавать до 3 активных прототипов. Причем, сколько прототипов у вас в архиве — не важно, главное, чтобы активных было не больше трёх. Я использую тариф «Professional» за 25 долларов в месяц. Он позволяет создавать неограниченное количество проектов. Более дорогие планы нужны для компаний, в которых над прототипами работает больше одного дизайнера.

Как я писал выше, Инвижн позволяет разработчикам из под Windows верстать макеты или приложения, созданные в Скетче. Согласитесь, $25 в месяц сильно дешевле, чем купить всей команде Маки :-)

7. Создавайте иконку приложения

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

8. «Устанавливайте» приложения на iOs

Если скопировать ссылку на проект в «Public share link» и вставить в браузере Сафари на мобильном, то в нём откроется ваше приложение. Нажмите на иконку «Поделиться» в браузере и выберите «На экран „Домой“». Теперь у вас на рабочем столе мобильного появилась иконка приложения, а само приложение можно посмотреть без адресной строки браузера. Трудозатрат — минимум, заказчик — в восторге, он может перемещаться между экранами на своей мобилке.

9. Создавайте хедер и футер в приложениях

Зачастую контент занимает больше одного экрана, и при его прокрутке необходимо закрепить хедер и футер. Для этого в режиме «Build Mode» перемещайте ползунки «Fixed Header» и «Fixed Footer». Теперь контент проматывается между ними.

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

10. Используйте шаблоны (templates) для навигации

Долгое время я не обращал внимания на эту мега-полезную возможность и для каждого экрана по новой создавал «кликабельные» области. На самом деле, для сквозных меню (тех, что есть на всех страницах сайта) нужно «кликабельные» области добавлять в «Шаблоны». Создаём область, выбираем куда ведёт клик по ней и добавляем в шаблон, например, «Sidebar».

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

11. Inspect Mode

Ранее я упоминал об этом нововведении Инвижн, но оно достойно отдельного пункта. Невозможность открыть файл в Виндоус до недавнего времени было большой проблемой для дизайнеров, вынуждающей использовать Фотошоп вместо Скетча. Для передачи файлов использовались различные сервисы, например Avocode или плагин Marketch. Также, недавно появилось бесплатное решение от ребят из Icons8, позволяющее открывать Скетч-файлы из-под Виндоус, за что им отдельное спасибо!

Как вариант решения проблемы подойдёт Inspect Mode в Инвижн. Он предоставляет такой же функционал как и перечисленные решения.

Для того чтобы он правильно работал — используйте плагин Craft Sync для выгрузки экранов. Добавляйте разработчиков к проекту и они получат доступ к этому режиму.

Причём, разработчику достаточно иметь бесплатный аккаунт, чтобы получить доступ в режиме Inspect Mode к любому количество ваших прототипов.

12. Создавайте комментарии и туры

Когда проектов и экранов много, масса времени уходит на выяснение в каком именно экране интерфейса нужно внести правки. Эта проблема легко решается если предоставить заказчику доступ к комментариям. Он кликает в нужном месте, и создает текстовый комментарий. Уведомление о нём упадёт вам на почту и будет доступно в Инвижн во вкладке «Comments». На комментарий можно написать ответ или уточняющий вопрос, а можно выполнить задачу и отметить комментарий как выполненный (Mark as resolved).

Бывает, нужно сделать не полноценный интерфейс, а обзорный тур по нему. Для этого в Инвижн есть функционал создания туров. Он работает по принципу комментариев. Вы создаёте одну или несколько точек на экране с текстовым описанием. Точки последовательно «проведут» пользователя по экранам, при помощи кнопок «Prev» и «Next». Пример маленькой презентации.

13. Храните историю версий

Если у вашей комнады нет необходимости в Inspect Mode и достаточно загрузки экранов в виде картинок, то есть возможность использовать хранилище версий в Инвижн. Для этого загружайте макеты при помощи программы «Desktop Sync App», а не плагина «Craft Sync». Вся история изменений вашего макета с возможностью скачать предыдущие версии будет доступна в разделе «Assets». Вот короткое видео об этом функционале.

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

14. Презентуйте дизайн онлайн (LiveShare)

Хороший дизайнер должен уметь не только создавать качественный интерфейс будущего продукта, но и грамотно презентовать его. Очень важно обосновать и донести до заказчика свои идеи и решения. Конечно, лучше это делать при встрече в уютном конференц-зале, но такая возможность есть не всегда. В таких случаях весьма полезен интерфейс «LiveShare», позволяющий в режиме реального времени показывать экраны, перемещаться между ними, обсуждая увиденное. Вот как это работает:

Скетч и Инвижн позволяют создавать, обсуждать и улучшать пользовательские интерфейсы. Бесспорно, в Инвижн есть что доработать, но уже сегодня это отличный продукт для презентации ваших дизайн-решений. А если учесть, что над Инвижн постоянно ведётся осмысленная работа и регулярно внедряются отличные решения, то стоит попробовать его в своей работе!

2017   InVision   Sketch

4 правила работы в Sketch над крупными проектами

Появление редактора Sketch сильно облегчило работу дизайнеров. Артборды, Символы, Стили, большое количеств плагинов и интуитивно понятный интерфейс — всё это сделало нас немного счастливее. В этой статье постараюсь привести правила и приёмы, которые выработал при работе над проектами.

Правило №1: Создавать символы

Элементы, которые повторяются чаще 2-х раз на артборде нужно переводить в символы. Если понадобилось внести какие-либо правки внешнего вида символа, меняем его на странице «Symbols», и редактирование применится автоматически на всех артбордах проекта.

Предпосылки символов были и в Photoshop, в котором можно было импортировать ссылку на другой psd-файл, и при его изменении в одном месте, он менялся во всех файлах. Можно даже управлять его отображением при помощи Layer Comp. Но у Sketch подобная работа выведена на новый уровень.

Для упорядочивания символов в меню «Symbols» по группам и подгруппам, используются слеши — «/». Например, название артбордов элементов формы должны начинаться с «Form / element_title». Тогда они сгруппируются в разделе «Form». Если артборд назвать «Form / Input / element_title» он будет размещён в подгруппе «Input» группы «Form». Уровень вложенности неограничен.

Вариант группировки меню «Symbols»

Никому не нужен набор элементов-близнецов. Ведь, чаще всего, внешний вид объектов одинаковый, а контент отличается. Редактирование контента символа производится на панели «Overrides». В ней можно легко редактировать текстовые слои.

Обратите внимание, в панели «Overrides» у заголовков текстовых полей правильные названия и порядок. Для этого в символе упорядочиваем слои сверху вниз и называем их не контекстно, а функционально. Т. е. заголовок инпута в символе должен быть не «Имя», а «Label» и стоять в самом верху.

В последних версиях Скетча, кроме редактирования текстовых слоёв, можно заменять вложенные символы. Тут нужно помнить 2 момента: символ может содержать вложенные символы. Вложенные символы можно менять из панели «Overrides», если у них одинаковый размер.

Пример использования — навигационная панель:
Для отображения активного пункта меню, редактируем видимость вложенного символа Active.

Как вариант, можно создать 2 символа одного размера «Active» и «Default» и менять их, чтобы перекрашивать активный пункт меню.

Чего сейчас, на мой взгляд, не хватает в Скетче — возможности менять цвет у текстовых слоев. Т. е. для того, чтобы перекрасить надпись, нужно создать для неё символ где она чёрная, и символ где надпись красная, только после этого переключать их между собой. Гораздо удобнее было бы сразу указывать цвет текста.

Если внутри символа есть объект залитый растровой картинкой (например, автарка), то его тоже можно с лёгкостью редактировать.

В этом примере, из буфера в панель «Overrides» вставляется изображение для смены аватарки

Правда, и здесь мне не хватает одной фичи, а именно, скопировать растровую заливку из панели «Overrides» и вставить в другой символ.

А ещё символы, как и группы, можно делать «резиновыми». В Скетче есть возможность прописать правила, по которым символ растягивается или сжимается, и как при этом должен вести себя контент внутри. Вот 3-х минутное видео как это работает, от создателей Sketch. Оно на английском, но там все понятно.

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

Правило №2: Поддерживать странцу с UI guide

Если проект предполагает большое количество разделов, форм, текстовых блоков, создаётся отдельная страница, на которой собираются все элементы. Страница называется «UI» и состоит из 4-х артбордов:

1. Элементы форм и их состояний

2. Текстовые стили документа



3. Элементы интерфейса

4. Иконки

По логике, здесь должны быть ещё и все цвета, которые используются в макетах, но я их добавляю в панель Document Colors, которую могу экспортировать и импортировать в другие скетч-файлы, благодаря плагину Sketch Palettes

К сожалению, так и не смог заставить себя пользоваться стилями для текстов и объектов, т. к. их нельзя упорядочить в меню. Как только стилей становится больше 10-ти, в них просто невозможно ориентироваться. Если бы разработчики дали возможность упорядочивать стили по группам (как это сделано для Cимволов), возможно, это было бы удобно.

В настоящее время, если мне нужно вставить какой-либо элемент, который уже использовался в макете, я открываю страницу «UI» и копирую его оттуда, чтобы не искать среди множества артбордов. Если элемент не создан в «UI», значит его нужно создать и обязательно добавить на страницу «UI».

В заключение этого правила, должен упомянуть плагин «Library», из пакета «Craft», который некоторые из описанных телодвижений делает автоматически (собирает стили текста, используемые шрифты и цвета на отдельной странице). Но и с ним у меня не сложилось. Крафт чёрт-те как упорядочивает текстовые стили и сливает всё в одну кучу. Удобней, когда я вручную создаю библиотеку стилей и элементов, куда не попадёт ничего лишнего и всё упорядочено по моим правилам.

Правило №3: Правильно называть слои и группы. Соблюдать иерархию

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

Да и самому дизайнеру, когда слоёв стало очень много, удобней в них ориентироваться, если они понятно названы. Для быстрого поиска слоя у Скетча есть встроенный функционал. Для того чтобы найти стрелку в макете, которую я всегда называю arrow, достаточно написать в поиске «arr» и Скетч покажет все слои и группы в имени которых есть эти символы.

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

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

Правило №4: Использовать сетку. Вертикальный и горизонтальный ритмы

К сеткам приступаю после создания дизайн-макета страницы. Они предназначены для упорядочивания всех элементов на артборде. Благодаря сетке создаются вертикальный и горизонтальный ритмы макета. Дизайн становится упорядоченным и систематизированным. Т. е. вначале всё разрабатывается «на глаз», а в самом конце встраивается в сеточную систему.

В Скетче за настройку сетки отвечают пункты «Grid Settings…» и «Layout Settings…». Для удобства, есть горячие клавиши, которые покажут или скроют сетку. Control + G — показать или скрыть сетку, Control + L — показывает или скрывает лэйаут.

Последнее время использую 8-ми пиксельную сетку. Подробнее о ней написано здесь

Если коротко, то просто используйте размеры кратные 8-ми пикселям. Для блоков, отступов, междустрочных интервалов, иконок и других элементов интерфейса. Когда все элементы подчинены правилу кратности 8-ми, вы получите визуально логичный и последовательный интерфейс.

Для того, чтобы с восьмипиксельной сеткой стало удобней работать в Скетче, есть плагин nudg.it. Он позволяет установить на сколько пикселей будет смещаться объект при нажатии Shift + Arrow. Если вам удобней работать с сеткой в 5 пикселей, как великолепным Charmerstudio или гениальным Area 17, то nudg.it легко настроить и на пятипиксельный шаг.

Итог:

Благодаря вышеописанным несложным правилам и приёмам, повышается продуктивность работы со Скетч. Причём, не только дизайнера, но и верстальщика, которому макет достанется. Хороший дизайн начинается с порядка в макетах :-)

2017   Sketch

Проектная папка дизайнера. Часть 2

Изучив комментарии на Хабре на Хабре к предыдущему посту о проектной папке, решил перестроить процесс, связанный с версиями файлов и их хранением. Умные люди говорили, что в наше время неправильно дублировать файлики вручную, создавая архив версий, а нужно пользоваться современными технологиями Git, Subversion и подобными. В этом посте напишу о системе к которой пришёл и с удовольствием теперь пользуюсь.

Решений для сохранения версий файлов великое множество. Для меня, как дизайнера, ключевыми являются следующие параметры, которым должна отвечать система:

  1. Я сам должен определять в какой момент создать точку восстановления файла;
  2. Иметь возможность посмотреть что изменилось в файле (чаще всего в графическом);
  3. Загружать файл и его версии в онлайн-хранилище;
  4. Получать неограниченный срок хранения файлов и их версий;
  5. Приватность. К данным, без моего ведома, не должны иметь доступ посторонние;
  6. Низкая стоимость.

Dropbox

Да-да, не удивляйтесь. Не знал, но Дропбокс умеет хранить историю изменения файлов. Очень удобное решение, для хранения и доступа к файлам из любой точки мира. Легко делиться материалами и не нужно думать об их загрузке, достаточно установить приложение, которое само будет выгружать файлы и историю их редактирования. Но этот плюс является и минусом, т. к. новые версии файлов создаются после каждого сохранения автоматически. Во-вторых, нельзя сравнить что именно поменялось в файле, не откатив его назад. Без покупки дополнительного «Расширенного журнала версий» (EVN), который стоит 40 баксов в год, файлы хранятся только 30 дней. Бесплатно дают 2 ГБ, остальное за ежемесячный платёж от $8,25. Получаем, минимум 140 долларов в год и не полное соответствие требованиям. Едем дальше.

Google Drive

Все те же преимущества и недостатки что и у Дропбокса. Но в Google Drive больше 30 дней версии не хранят в принципе, что неприемлемо. Сразу пропускаем.

Invision

Второе открытие, которое я сделал, подготавливая этот пост (спасибо Сергею за наводку). Сервис, который знаком и любим многими дизайнерами оказывается ещё умеет хранить версии файлов. Для этого нужно использовать их утилиту — «Desktop sync app». Ничего дополнительно оплачивать не нужно. Из минусов — нет превью для файлов Sketch и не продумано взаимодействие для пользователей, который хотят использовать «Inspect Mode». Дело в том, что для работы инспектирования кода, макеты должны быть загружены через плагин «Craft». И тут возникает конфликт, т. к. «Desktop sync app» занимается тем же самым, но не «разбирает» макет по составляющим, соответственно «Inspect Mode» у него недоступен. Приходиться выбирать между историей версий файла и инспектором кода. Т. к. в нашей команде инспектор кода используется верстальщиками и программистами — выбор в пользу Inspect Mode

Cornerstone 3

Судя по всему, самое популярное subversion-решение под мак. Очень красивая программа. Из минусов — нет своего хранилища в облаке. Можно, конечно, разместить папки с файлами и бекапами в директории стороннего облачного сервиса, например Яндекс.Диска. Но есть и второй минус — стоимость $69. Не сказать, что сильно дорого и я готов был попробовать поработать с программой (есть триальный период 14 дней), но заметил еще один недостаток — нет превью файлов Sketch. Возьмём на заметку, но поищем ещё.

GitHub

Это решение использовал раньше, когда активно занимался вёрсткой. Отвечает всем требованиям, которые я описал выше. Есть свой десктопный клиент, что важно для тех кто не владеет командной строкой. Приватные репозитории (онлайн-хранилища) платные, от $7 в месяц. Отличный вариант, но не идеальный.

Bitbucket

Я остановился на хранилище Битбакет в связке с клиентом SourceTree. Битбакет я предпочел ГитХабу за бесплатные приватные репозитории. Причем, я могу их создавать сколько угодно, ещё и до 5 пользователей пригласить для работы над проектом. Если больше 5 юзеров подключены к репозиторию, то нужно платить от $10 в месяц. В общем, отличное предложение.

Сравнительная таблица изученных решений.

Теперь расскажу как организован процесс работы.

Первым делом регистрируемся на www.bitbucket.org и скачиваем SourceTree (Есть под Мак и Виндоус).

Кстати, SourceTree можно использовать и в качестве клиента для GitHub

Запускаем SourceTree и добавляем новый проект «New Repository» → «Create Local Repository».

Выбираем директорию где будет храниться проект и архив его версий. Т. к. я сохраняю файлы ещё и в онлайн, то ставлю чекбокс «Also create remote repository».

Можно не загружать файлы в онлайн, а создавать хранилище только у себя на диске, или в директории облачного сервиса. Тогда вы никак не будете зависеть ни от ГитХаба, ни от Битбакета.

Теперь положим какой-нибудь файл в созданную папку. Пусть это будет фотошоповский файлик hello.psd. После сохранения файла в папку в SourceTree появилось уведомление, что директория изменилась, а справа небольшая превьюшка содержимого файла.

Если файл больше 5МБ, то превью показываться не будет. Для решения открыть «Preferences» → «Diff». Установить «Size limit (binary)», например 50,000 KB. Превьюшки создадутся без ограничений.



Так будет происходить после каждого изменения фалов в директории или добавления новых.

Создадим «Точку восстановления» (В терминологии Git такая точка называется Commit). Для этого отметим файлы для которых создастся версия в хранилище (я обычно выбираю все), напишем комментарий и жмём «Commit», для создания точки восстановления.

Готово. Теперь мы всегда сможем вернуться к этому файлу в таком виде.

Перекрасим заголовок в другой цвет и сохранимся. SourceTree заметил манипуляции и в превью-окне показывает 2 изображения «Было» и «Стало».

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

«Закоммитим» изменений и отправим на сервер.

Для чистоты эксперимента внесём третью правку, отправив на сервер и её.

Понадобилось «откатиться» к первой версии файла или взять оттуда пару слоёв? Попробуем. Перейдём в сайдбаре программы во вкладку «History» и выберем первый коммит. Если дважды кликнуть по превью, то в Фотошопе откроется первая версия файла. Берём из него любые слои или пересохраняем как основной файл. Это очень удобно и просто.

Я описал базовый функционал, который предоставляет технология Git. Там есть еще много всего, но даже с этим функционалом можно не опасаться за сохранность рабочих файлов и их итераций.

2017   Работа
Ранее Ctrl + ↓