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

Позднее Ctrl + ↑

Photoshop: Мои настройки после установки.

Не смотря на то, что Фотошопом пользуюсь всё реже и реже, к нему иногда приходится возвращаться. Скетч слишком плохо работает с растром (фактически никак), поэтому графику подготавливаю в Фотошопе. В этом посте поделюсь своими настройками интерфейса.

После установки размещаю панели. Вот как они выглядят последние 3 года.

Все панели размещаю справа (давным-давно подсмотрел у Бирмана).

В настройках панели слоёв убираю все три чекбокса.

«Add ‘copy’ to Copied Layers and Groups» выключаю, чтобы при копировании слоя к нему не добавлялось «copy», «copy 2» и т. д. «Use Default Masks on Fill Layers» добавляет ненужную маску, когда заливаем слой через «Solid Color…» в панели слоёв, а «Expand New Effects» разворачивает под слоем список эффектов после применения.

Панель «Info»

Здесь выключаю всё лишнее. Оставляю только цвета RGB и HSB и отображение «веса» документа.

Дальше, включаю инструмент Move Tool (V) и убеждаюсь, что убрана галка «Auto-Select», а в выпадающем меню установлен «Layer».

Для того, чтобы в процессе работы выбрать любой объект на артборде, зажимаем cmd (Ctrl на Windows) и кликаем по нужному объекту.

Переключаюсь на Pen Tool (P) и ставлю в выпадающем меню настройки чекбокс «Rubber Band».

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

Убеждаюсь, что включен правильный цветовой профиль в разделе «View» → «Proof Setup» → «Internet Standart RGB (sRGB)» и установлена «галка» на «View» → «Proof Colors»

Эти настройки заставляют Фотошоп отображать цвета в стандартном для веба sRGB режиме.

Последнее время перешёл на 8-ми пиксельную сетку при построении интерфейсов сайтов и мобильных. Поэтому, иду в «File» → «Preferences» (cmd + k), вкладка «Guides, Grids & Slices». Здесь, в поле «Grid» устанавливаю «Gridline Every: 80 pixels», «Subdivisions 10». В результате этого, при включенной сетке отображаются блоки 80 x 80 px внутри разбытые на 10 частей по 8 px.

Оказывается, в последних версиях фотошоп умеет строить сетки из коробки. Для этого нужно пройти в «View» → «New Guide Layout…»

А ещё, я обязательно переназначаю пару хоткеев. Делается это в «Edit» → «Keyboard Shortcuts…».
Устанавливаю сочетание Control+Opt+Comd+T для трансформации выделения («Select» → «Transform Selection») и Control+Opt+Comd+C для Кропа артборда («Image» → «Crop»).

Все описанные выше настройки интерфейса можно сохранить, для того чтобы после переустановки не пробегать опять по всем менюшкам. Экспорт и импорт настроек интерфейса лежит в «Edit» → «Presets» → «Export/Import Presets…». Только перед экспортом сохраните свой Воркспейс в «Windows» → «Workspace» → «New Workspace…»

О том какие плагины, экшены и трюки использую при работе с Фотошопом, если вам интересно, напишу в следующем посте. Спасибо за внимание!

Work: Структура проектной папки дизайнера

Заказчику понадобилось изображение, созданное 3 года назад или закончился тираж визиток двухгодичной давности? Внести коррективы в макет сайта которому уже 5 лет или откатиться на версию, которая была отклонена на прошлой неделе? Для всех вышеперечисленных вопросов полезно хранить и быстро находить файлы. Делюсь наработками и структурой папок, которые облегчают задачу.

Используем облака

Все рабочие файлы размещены в папке «work», которая лежит в «облаке» Яндекс.Диска. Таким образом, всегда есть доступ к файлам из любой точки мира, плюс, данные хранятся в двух местах: на компьютере и на сервере, что даёт надежду на их сохранность в случае форс-мажора.

Бекап данных

Для большей надёжности, раз в год все рабочие файлы загружаю на Google Drive, в созданный специально для бекапа аккаунт. Так как файлов много, а гугл бесплатно даёт всего-лишь 15 ГБ, приходится хитрить. Когда делаю бекап данных, оплачиваю месяц хранилища на 100 ГБ, заливаю файлы и отменяю подписку. Цена вопроса — 139 рублей, а спокойствия на миллион. Причём, это именно отдельный аккаунт. Файлы в хранилище не трогаю до следующего года, что предохраняет их от случайных удалений, поломок и прочих ненастий.

Структура папки «work»

состоит из 3-х директорий:

  • «01_current» — проекты «в работе»;
  • «02_support» — часто редактируемые проекты;
  • «03_final» — завершенные работы.

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

Цифры в названии нужны для правильной сортировки по алфавиту в менеджере файлов.

Теперь подробней о каждой из директорий.

Папка «01_current»

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

Структура папки любого проекта:

«01_incoming»

В папке «Входящие» храню полученные от клиента материалы: Техническое задание, брифы, брендбук, фотографии, тексты и пр.

«02_inspiration»

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

«03_development»

Основная рабочая папка — «Разработка». Её структура зависит от размера проекта. Если проект небольшой, то файлы хранятся в ней без дополнительной группировки.

В больших проектах внутри «03_development» создаются подпапки, такие как «img» — для фотографий, картинок иллюстраций, «vector» — для векторных иллюстраций, логотипов, иконок, «wireframes» — для прототипов сайта. Рабочие файлы размещены в корневой директории.

Классная фича macOs — отображение колонками с сортировкой по программе. Навигация становится быстрой и наглядной.

Так же, создаю в «03_development» папку со шрифтами «_fonts», и папку «_archive» для хранения версий файлов.

Если в файле планируется вносить большое количество изменений, то создаю его дубликат, а старую версию переношу в папку «_archive».

Все файлы называю согласно правилу:
- Номер (например, номер раздела в структуре сайта. Используется не всегда, а только если нужна сортировка);
- Название;
- Версия.
Файл, который называется «03_services_04.psd», сообщает слева-направо, что это третий раздел сайта, который называется «Услуги», и перед нами 4-я версия файла. Если мы откроем папку «archive», то найдём там «03_services_01.psd», «03_services_02.psd», «03_services_03.psd» которые хранят предыдущие итерации раздела.

С использованием Sketch и артбордов стало проще, файл называется по имени проекта, например «pinhost_04.sketch» (четвёртая версия сайта PinHost).

«04_final »

Папка «Финал» хранит последние версии файлов, которые будут передаваться заказчику. Здесь не должно быть файлов со старыми версиями проекта, только актуальные данные. Название файла, отправленного в эту директорию, не должно содержать номер версии. Например, файл который назывался «03_services_04.psd» после завершения работ и дублирования в папке «Final» должен носить название «03_services.psd».

Получается, последние версии файла хранятся в двух папках — «03_development» и «04_final», но с различными названиями, благодаря чему, вероятность утери файла стремиться к нулю.

Для передачи исходников заказчику расшариваю папку в облаке и отправляю ссылку.

Папка «02_support»

Имеет такую же структуру, как и «01_current». В ней размещены проекты, к которым приходится часто, и в течении длительного времени обращаться. Если работа над проектом ведётся уже больше полугода, или периодичность обращения к проекту чаще чем раз в месяц, то проекту самое место в «02_support». Раз в 3−4 месяца провожу ревизию и перемещаю неиспользуемые папки в «03_final».

Папка «03_final»

Содержит все сделанные ранее проекты. Если нужно вернуться к каком-то проекту, то его папка перемещается в «01_current», до окончания работ. После чего проект возвращается в «03_final». Сейчас задумываюсь над тем, чтобы «раскидать» все работы по годам, но сомневаюсь, что удобно будет находить нужный проект.

Итоги

Описанная структура позволяет хранить версии файлов, не используя TimeMachine (она тоже нужна и работает) и быстро находить необходимые данные. Правильная структура проектов — один из приёмов, применив который пару раз, уже не можешь вернуться к бардаку в файлах.

JS: Закрепляем блок у верхней границы окна

Задача: блок при прокрутке ведёт себя как обычный элемент, но как только достигнет верхней границы браузера закрепляется.

Для реализации, к блоку, который должен закрепиться, добавим класс, фиксирующий его при помощи position: fixed. Сделаем это, используя jQuery.

В HTML создаем три блока:

<div class="welcome">
  Hello!
</div>

<div class="stick_menu">
  Menu here
</div>

<div class="third_block">
  Content Third block
</div>

В стилях зададим блокам разную высоту и цвета. Закреплять будем .stick_menu, при помощи добавления к нему класса .fixed.

.welcome {
  height: 500px;
  background-color: #f5f6f6;
}

.stick_menu {
  width: 100%;
  line-height: 50px;
  background-color: #c00;
}

.third_block {
  height: 2000px;
  background: #f5f6f6;
    background: -webkit-linear-gradient(45deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
}

.fixed {
  position: fixed;
  top: 0;
}

И немного магии на JavaScript.

$(document).ready(function() {
var start_pos=$('.stick_menu').offset().top;
 $(window).scroll(function(){
  if ($(window).scrollTop()>=start_pos) {
      if ($('.stick_menu').hasClass()==false) $('.stick_menu').addClass('fixed');
  }
  else $('.stick_menu').removeClass('fixed');
 });
});

Пример на CodePen (немного добавил стилей в CSS для украшательства):

See the Pen Закрепляем блок у верхней границы окна by Sergei (@eshill) on CodePen.

Sketch plugin`s: Динамические кнопки и относительное размещение объектов

Плагин, которым пользуюсь ежедневно в разработке интерфейсов Compo: UI components in Sketch. Одна из фич Compo — управление размером кнопки в зависимости от количества текста. 

Пишем текст кнопки, например «Регистрация». При нажатии ⌘J создаётся кнопка.

Изменяя название текстового слоя, меняем отступы от краёв кнопки по часовой стрелке, начиная с левого верхнего угла. Например, установим отступы сверху и снизу по 8 px, а по краям 16 px.

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

Раньше для такой задачи использовался Dynamic Button, но у плагина Compo больше возможностей. Например, управлять размещением объекта относительно фона.

Создадим фоновый объект, он должен называться «BG». Сверху добавим ещё один прямоугольник и назовем b:20 (отступ снизу 20 px) r:16 (отступ справа 16 px). Сгруппируем эти 2 слоя и нажмем ⌘J. Объекты разместились согласно прописанных правил.

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

Приятной работы в Sketch!

Sketch plugin`s: Работа с палитрами и простая установка плагинов

Для работы с палитрами уже не первый месяц использую плагин Sketch Palettes. Плагин экспортирует и импортирует палитру документа и глобальные цвета Скетча. Удобно, если нужно работать в разных документах, например, с фирменными цветами компании.

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

MacOs: Удаляем дубли в меню «Открыть в программе»

Если в контекстном меню «Открыть в программе» появились дубли, удалите из командой терминала:

/System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -kill -r -domain local -domain system -domain user

И не забудьте перезапустить Файндер:

killall Finder

UI mLingos.app for iOs

Работаю над дизайном новой версии интефейса приложения для изучения иностранных языков mLingos.

Sketch plugin`s: Переименование слоёв по имени символа

Rename Instances Sketch Plugin

Переименует слои символов на артборде, согласно имени на странице «Символы». Работает как с отдельными слоями, так и со всеми символами в макете.

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

Ранее Ctrl + ↓