11 заметок с тегом

Посоветовал

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…»

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

19 января   Photoshop   Посоветовал

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 (она тоже нужна и работает) и быстро находить необходимые данные. Правильная структура проектов — один из приёмов, применив который пару раз, уже не можешь вернуться к бардаку в файлах.

12 января   Посоветовал   Работа
28 декабря   macOS   Посоветовал

Sketch pugin`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!

2016   Sketch   Посоветовал

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

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

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

2016   Sketch   Посоветовал

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

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

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

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

killall Finder
2016   macOS   Terminal.app   Посоветовал

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

Rename Instances Sketch Plugin

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

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

2016   Sketch   Посоветовал

Sketch: Секреты трансформации объектов

По умолчанию Скетч трансформирует объекты, изменяя правую или нижнюю границы объекта. Фотошоп делает аналогичное если при трансформировании «Reference point location» установлена в левом верхнем углу

Зачастую нужно изменить размер объекта так, чтобы правая граница осталась на месте, а изменилась левая. Для этого используется приём, которой стал для меня открытием.  В поле «Size» указываем нужный размер и дописываем букву «r», если нужно трансформировать объект относительно правой стороны, «m» — относительно центра, «b» — относительно нижней границы объекта. 

Вторым открытием стал тот факт, что в поле «Size» или «Position» можно писать математические формулы, в результате, получая нужное значение. Хотите уменьшить объект в три раза? Добавьте к текущему размеру /3. Кроме деления, можно складывать и умножать.

Ну, и главным открытием стало то, что можно использовать эти 2 приёма одновременно.

2016   Sketch   Посоветовал

Photoshop: Смена интерфейса с русского на ангийский

В последних версиях Фотошоп постоянно устанавливается с русским интерфейсом, мне же привычней работать с английским. Чтобы этого избежать, нужно перед установкой адобовских приложений в правом верхнем углу открыть Creative Cloud, выбрать шестеренку  — «Установки…». 
Открыть таб Creative Cloud — Apps: Язык приложения — English.
Теперь приложения будут ставиться с английским интерфейсом.

Если приложения уже установлены, то придётся их удалить, а затем поставить заново. Но для Фотошопа есть хак.

  1. Выйти из Фотошопа
  2. В Файндере найти файл файл tw10428.dat, который лежит в папке
Applications\Adobe Photoshop CС\Locales\ (дальше папка называется в зависимости от текущего языка фотошопа)\Support Files/tw10428.dat
  1. Поменять расширение с «.dat» на «.bak»
2016   Photoshop   Посоветовал

Отображать 2 недели в «Календаре»

По умолчанию в «Календаре» во вкладке «Неделя» отображается только одна неделя. Такое отображение не наглядно, если неделя заканчивается, то не видно предстоящих событий. С помощью терминала легко настроить отображение сразу 2-х и более недель.

Запускаем терминал и пишем код:

defaults write com.apple.iCal n\ days\ of\ week 14

Где «14» — количество дней, отображаемых во вкладке «Неделя».

Чтобы вернуть классическое отображение набираем:

defaults write com.apple.iCal n\ days\ of\ week 7
2016   Calendar.app   macOS   Посоветовал
Ctrl + ↓ Ранее