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

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

Ctrl + ↑ Позднее

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 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!

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

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

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

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

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

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

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

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

«Заглушки» для PinSpb b2b

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

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

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

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

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