Коротенькая заметка о небольшом баге в Photoshop CC 2014, связанном с невозможностью узнать размер pattern’а.

В предыдущих версиях Photoshop все было проще - выбираешь в палитре слоев примененный образец и в окне “Pattern Overlay” достаточно навести курсор мыши на пример pattern’а. Появляется всплывающая подсказка, в которой видны размеры образца.

В Photoshop CC 2014 теперь таким образом невозможно получить подсказку о размере образцов изображения. Это баг или фича Photoshop CC 2014 - непонятно. Но жить стало труднее без такой возможности.

Однако, выход все же есть, хоть и через всем известное место. Решение таково.

Шаг первый - Pattern Stamp

В палитре инструментов выбираем инструмент Pattern Stamp:

Инструмент Pattern Stamp

Шаг второй - верхняя панель инструментов

Переводим взгляд вверх, на верхнюю панель инструментов (или как она там называется - неважно). На ней находим иконку окна Pattern Overlay:

Окно Pattern Overlay

Шаг третий - окно Pattern Overlay

Щелкаем мышкой по этой иконке. Появится окно Pattern Overlay со списком образцов изображений. Наводим курсор мыши на нужный образец и в появившемся tooltip видим размеры (момент появления tooltip я не заснял - но оно работает):

Размер pattern'а в Photoshop

Заключение

Вот такую небольшую головоломку подкинули нам разработчики Photoshop. Но хоть и через заднее место, но выход все же есть.


Тема достаточно освещенная, но для меня, как новичка в мире Mac OS X - очередное маленькое открытие. Вопрос связан с одной небольшой проблемой - выбором файловой системы для флешек.

Для пары Windows + Linux обычным решением является файловая система NTFS. Обе операционные системы с ней прекрасно работают - чтение+запись.

Для пары Mac OS X + Linux такой выбор не подойдет, так как NTFS в Mac OS X имеет поддержку только чтения. Для записи нужно ставить сторонний софт, типа Paragon. Это не является решением - нужна нативная поддержка в обеих системах.

Решением является файловая система ExFAT. В Mac OS X у нее есть поддержка “из коробки”. В Linux поддержки “из коробки” нет - но проблема решается установкой дополнительных пакетов (как почти всегда).

Более того, в Сети пишут о системе ExFAT как изначально созданной для флеш-накопителей. Что она умеет бережно относится к флешкам и поддерживает размер более 4Gb.

Все отлично - ставлю ее на обе свои флешки: Apacer 8Gb и Transcend 16Gb. Начну с более сложного - с системы Linux.

ExFAT - установка в Linux

Для включения поддержки файловой системы в Linux нужно установить пару пакетов -

1
exfat-fuse
и
1
exfat-utils
:

$ sudo apt-get install exfat-fuse exfat-utils

Скажу, что приведенная выше команда на моей системе Linux Mint 17 Cinnamon оказалась действенной - все пакеты установились без проблем и поддержка ExFAT в системе появилась сразу же.

В Интернете почти на всех ресурсах приведена другая команда для установки пакетов

1
exfat-fuse
и
1
exfat-utils
(причем - один в один, перепечатывают друг у друга вслепую):

$ sudo add-apt-repository ppa:relan/exfat
$ sudo apt-get update
$ sudo apt-get install fuse fuse-exfat exfat-utils

Однако, эта команда на моей системе не запустилась - выдала ошибку ключа при подключении репозитория

1
ppa:relan/exfat
. Именно этот факт и послужил для меня поводом написать этот краткий обзор.

Все - дело сделано. Теперь отформатирую флешку под файловую систему ExFAT в Linux.

Для этого сначала нахожу, где она расположена в файловой системе (в моем случае это устройство

1
/dev/sdb1
):

$ sudo fdisk -l

… и затем произвожу форматирование флешки командой:

$ sudo mkfs.exfat -n large_flash /dev/sdb1

где ключ

1
-n
- это задание для флешки имени как устройства.

Форматирование происходит буквально за пару секунд, ждать не придется. Первая флешка готова и операция форматирования выполнена под Linux.

ExFAT - форматирование под Mac OS X

Как уже говорилось мною выше, система Mac OS X имеет нативную поддержку файловой системы ExFAT. То есть, ничего дополнительно ставить не придется - все готово “из коробки”.

Операции по форматированию накопителей и другим действиям с жесткими дисками производится в стандартной утилите “Disk Utility”.

Вставляю вторую флешку и запускаю “Disk Utility”:

Создание ExFAT в дисковой утилите Disk Utility

Разобраться с работой этой утилиты нетрудно, но вкратце опишу.

Слева находиться окно со всеми подключенными дисками, которые утилита сумела обнаружить.

Справа на вкладке “Erase” производиться настройка и выполнение форматирования (в терминологии Mac OS X форматирование называется “Erase”). В списке “Format” выбирается нужная файловая система (кстати, выбор небогатый).

В списке “Name” выбирается диск, который будет форматироваться. Там же находиться одноименная кнопка “Erase” для запуска форматирования.

Ниже располагается информативное (я был приятно впечатлен объемом и качеством подачи информации в нем) окно, в котором можно увидеть всю информацию по подключенному диску. Внимательный читатель заметит, что флешка у меня уже отформатирована в ExFAT - обзор делал “по горячим следам”.

В принципе - и все. Осталось нажать кнопку “Erase” и моя флешка отформатируется под систему ExFAT.

Если ее открыть в Finder, то теперь мне будут доступны как чтение с нее, так и запись на нее.

Заключение

Вот так “неожиданно” я решил проблему совместимости флешки под Mac OS X и Linux. Более того, данная система ExFAT является разработкой Microsoft, поэтому с ее поддержкой в Windows вообще нет проблем.

А если учитывать обещанный создателями ExFAT бережный способ обращения с флеш-накопителями, то этому решению вообще цены нет.

На этом все.


В данном примере рассмотрим создание parallax с эффектом вертикального скроллинга. Это самый популярный вид parallax’а для страниц типа Landing Page.

Создавать эффект будет с помощью скрипта Parallax.js. По странному стечению обстоятельств данный скрипт имеет точно такое же имя, что и скрипт из предыдущего примера - “Parallax.js - создаем простой parallax”. Однако, это разные скрипты и авторы у них разные; данный скрипт расположен на странице GitHub по адресу - Parallax.js.

Домашняя страничка скрипта выполнена также с эффектом parallax - Simple Parallax Scrolling.

Parallax.js - создаем HTML-разметку

Разметка для скрипта Parallax.js проста. Это обычный блок, который может быть

1
div
,
1
section
или что-либо еще. Обязательным условием является подключение для блока класса
1
class="parallax-window"
и двух data-атрибутов:
1
data-parallax="scroll"
и
1
data-image-src="images/one.jpg"
.

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

  • 1
    
    data-natural-width
    
    - реальная ширина изображения
  • 1
    
    data-natural-height
    
    - реальная высота изображения

Ниже приведу созданные мною четыре блока

1
section
с содержимым:

<!-- begin one -->
<section data-parallax="scroll" data-image-src="images/one.jpg" class="parallax-window">
  <div class="wrap one">
    <h1>Welcome to Parallax!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus consequatur, nulla neque voluptatum deserunt at voluptatibus eos. Magni sapiente rem, suscipit assumenda provident, quaerat doloribus libero? Eaque doloremque, quo sequi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nemo cum, dignissimos blanditiis iusto quasi, quis! Ducimus aperiam sunt libero deleniti numquam rerum esse architecto, officiis amet, officia recusandae aut.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reiciendis vitae, amet! Quas saepe consequuntur, nisi quia, cupiditate dignissimos laborum incidunt soluta repellat, libero id quibusdam mollitia maiores omnis tempore.</p>
  </div>
</section>
<!-- end one -->

<!-- begin two -->
<section data-parallax="scroll" data-image-src="images/two.jpg" class="parallax-window">
  <div class="wrap two">
    <h2>Parallax is great!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi accusamus deserunt ipsum nesciunt odit vero corporis eaque, quibusdam, enim, beatae, repellendus iusto. Amet corporis beatae, inventore officiis est aut. Ab!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime possimus sint a facere dignissimos! Labore at, beatae consequuntur corporis perspiciatis! Asperiores illum esse repellat veniam vero totam debitis! Quos, consectetur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, totam maxime dolorum similique, ipsa a. Ea illo eligendi, ex, officia id eum sit sint nobis aperiam, error nihil ab dolorum.</p>
  </div>
</section>
<!-- end two -->

<!-- begin three -->
<section data-parallax="scroll" data-image-src="images/three.jpg" class="parallax-window">
  <div class="wrap three">
    <h3>Parallax is easy!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quia ex doloremque et, eum soluta culpa ipsum placeat consectetur, error at, accusamus iure! Doloribus corporis, earum quo modi omnis hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ab distinctio omnis repellendus exercitationem maiores ad sed, deleniti dolorem tempore praesentium nobis suscipit nihil quidem qui nostrum debitis ipsam culpa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repellendus, qui. Aspernatur reiciendis eligendi, totam eaque iusto illo officia. Facere dicta harum, dolore sit perferendis in neque mollitia eligendi dignissimos?</p>
  </div>
</section>
<!-- end three -->

<!-- begin four -->
<section data-parallax="scroll" data-image-src="images/four.jpg" class="parallax-window">
  <div class="wrap">
    <h4>Let's start use it!</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ab voluptates alias corporis, laborum provident corrupti assumenda dignissimos vel repellendus obcaecati, aspernatur earum ipsum rem. Voluptatum ipsum nostrum in! Rerum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit alias illum minus asperiores culpa, modi veritatis quibusdam, aperiam accusantium repellendus at possimus qui cupiditate dolorem quod accusamus a. Mollitia, repudiandae.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo nulla officia sapiente a tenetur maxime sunt mollitia accusantium aut, eius minus maiores fugit necessitatibus obcaecati ex eos quibusdam sequi.</p>
  </div>
</section>
<!-- end four -->

Parallax.js - стилизация страницы

Стилизацию страницы буду выполнять на Sass/Compass с использованием вертикального ритма “Vertical Rhythm” - в данном случае он подойдет как раз к месту, как мне кажется:

@import "compass";
@import "compass/reset";

$base-font-size: 24px;
$base-line-height: 36px;
$rhythm-unit: "rem";
$rem-with-px-fallback: true;

@include establish-baseline;

.parallax-window {
  min-height: 1080px;
  background: transparent;
  .wrap{
    margin-top: 100px;
    text-align: center;
    width: 1200px;
    margin: 0 auto;
    @include leader($lines: 7, $property: padding);
    p{
      @include rhythm-margins;
    }
    h1{
      @include adjust-font-size-to(2.074rem);
    }
    h2{
      @include adjust-font-size-to(1.728rem);
    }
    h3{
      @include adjust-font-size-to(1.44rem);
    }
    h4{
      @include adjust-font-size-to(1.2rem);
    }
    &.one{
      text-align: center;
      color: rgba(255,255,255,.8);
    }
    &.two{
      text-align: left;
      color: rgba(0, 0, 0, .8);
    }
    &.three{
      text-align: right;
      color: rgba(255, 255, 255, .8);
    }
  }
}

В этом коде наиболее важными строками являются две - без них скроллинга не получиться:

.parallax-window {
  min-height: 1080px;
  background: transparent;
  ...

Parallax.js - добавление Javascript

Разметка и стили готовы - осталось подключить скрипт Parallax.js и библиотеку jQuery:



jQuery “забираем” с Google, а скрипт Parallax.js - с GitHub-страницы проекта - Parallax.js. Все это “добро” пихаем в самый низ, подвал HTML-документа - перед закрывающим тегом

1
</body>
.

В дальнейшие украшательства вдаваться не буду - это дело техники. Мне важен сам принцип создания parallax с эффектом вертикального скроллинга.

В принципе, у меня все готово для того, чтобы полюбоваться результатом. Открываю страницу в браузере и любуюсь (не забывая скролить саму страницу):

Страница на Parallax.js с вертикальным скроллингом

Отлично! Получился прямо таки совсем неплохой parallax с вертикальным скроллингом. Готовый пример со всеми исходниками можно посмотреть на GitHub - Parallax.js Scrolling.


Небольшой обзор новой для меня темы - создание эффекта

1
parallax
на странице сайта. Вместе с вами буду учиться создавать такой эффект и начну с самого простого - Parallax.js.

Чтобы посмотреть, что примерно мы должны в результате получить, посмотрим на домашнюю страницу этого проекта - Parallax.js. Исходный код скрипта и документация расположена на GitHub - Parallax.js

Кратко о parallax

Что такое

1
parallax
как эффект сам по себе, хорошо видно на самой страничке и расписывать его я не буду. В Интернет есть лучшее и более подробное описание эффекта
1
parallax
. Единственное, что можно сказать по поводу
1
parallax
- появился он в основном как необходимость, дань моде. Своим существованием практически полностью обязан популярным на сегодняшний день
1
landing page
и призван скрасить и разнообразить их относительную монотонность.

Способов реализации

1
parallax
на сегодня сушествует множество. Но практически все они основаны на одном принципе - изменении скорости прокрутки фонового изображения на странице относительно других объектов на ней (поправьте меня, если я неправ).

Одним из преимуществ метода на основе скрипта Parallax.js является то, что в этом случае не требуется библиотеки jQuery. Скрипт может работать и с ней, но ее присутствие совсем необязательно. Получается выгода в весе страницы и скорости ее загрузки в браузере.

Parallax.js - начальная разметка

HTML-разметка для нашего будущего

1
parallax
удивительно простая - это маркированный список
1
ul
с идентификатором (имя его произвольное) и элементами списка
1
li
(имя класса обязательно и неизменно).

Еще одним обязательным атрибутом для элементов списка

1
li
является атрибут
1
data-depth
, у которого значение может меняться в диапазоне от 0 до 1. Чем выше значение в 1, тем выше скорость перемещения объекта на странице.

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

1
parallax
.

Ниже приведен пример такой разметки:

<ul id="scene">
  <li class="layer" data-depth="0.10">
    <img src="images/one.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/two.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.20">
    <img src="images/three.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/four.png" height="100" width="100" alt="Image" />
  </li>
</ul>

Parallax.js - стилизация parallax

Произведем небольшую стилизацию нашего будущего

1
parallax
с помощью Sass/Compass. Для элемента
1
ul
добавим фоновое изображение, чтобы был лучше виден эффект parallax.

@import "compass/";
@import "compass/reset";

#scene{
  width: 95%;
  margin: 20px auto 0;
  min-height: 775px;
  background: url(../images/bg.jpg) 0 0 no-repeat;
  img{
    display: inline-block;
    width: 100px;
    height: 100px;
    @include border-radius(50%);
  }
  img[src="images/one.png"]{
    margin: 200px 0 0 200px;
  }
  img[src="images/two.png"]{
    margin: 200px 0 0 1000px;
  }
  img[src="images/three.png"]{
    margin: 500px 0 0 700px;
  }
  img[src="images/four.png"]{
    margin: 600px 0 0 300px;
  }
}

Parallax.js - добавляем javascript

Наш

1
parallax
почти готов - осталось “вдохнуть в него жизнь” с помощью Javascript.

Тут все просто. Первой строкой подключается файл скрипта Parallax.js. Второй строкой сначала в теле документа отыскивается элемент с идентификатором

1
scene
, который помещается внутрь переменной
1
scene
. Затем создается новый экземпляр
1
parallax
объекта Parallax и ему передается в качестве аргумента эта переменная
1
scene
.

Все - смотрим результат:

Готовый эффект на Parallax.js

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

Мы получили эффект parallax.

Ниже приведен полный код HTML и CSS рассмотренного нами примера:

<ul id="scene">
  <li class="layer" data-depth="0.10">
    <img src="images/one.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/two.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.20">
    <img src="images/three.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/four.png" height="100" width="100" alt="Image"
  </li>
</ul><!-- scripts -->
@import "compass";
@import "compass/reset";

scene{
width: 95%;
 margin: 20px auto 0;
 min-height: 775px;
 background: url(../images/bg.jpg) 0 0 no-repeat;
 img{
 display: inline-block;
 width: 100px;
 height: 100px;
 @include border-radius(50%);
 }
 img[src="images/one.png"]{
 margin: 200px 0 0 200px;
 }
 img[src="images/two.png"]{
 margin: 200px 0 0 1000px;
 }
 img[src="images/three.png"]{
 margin: 500px 0 0 700px;
 }
 img[src="images/four.png"]{
 margin: 600px 0 0 300px;
 }
}

Полный исходный код примера можно посмотреть на GitHub - Parallax.js


С недавних пор (чуть больше двух недель) я стал счастливым обладателем Mac OS X. Если быть точнее - это iMac (21.5-inch, Mid 2014).

Неделю чувствовал себя не своей “тарелке” под ним, еще неделю привыкал. Потом все уже пошло по накатанной - система хороша, ничего не скажешь. Для работы - лучше не придумаешь.

Но речь в этой статье не о прелестях Mac OS X - их и без меня (с моими скромными талантами) превознесли до небес. Тема этой небольшой статьи - маленькое приложение Spectacle. Эта небольшая программка призвана улучшить-ускорить-облегчить работу в оконной среде Mac, служа в качестве менеджера этих самых окон.

Другими словами - Spectacle - это оконный менеджер для Mac OS X. Это приложение является не единственным в своем роде. Существуют еще программы - платная (и самая известная) - Divvy, также платная (стоит целых 2$) - BetterSnapTool и бесплатная - BetterTouchTool. Однако, Spectacle (в отличие от Divvy, которая стоит $13.99) - бесплатен.

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

Установка Spectacle

Установка программы Spectacle под Mac OS X стандартная. Скачиваем с официального сайта архив приложения, распаковываем его и перетаскиваем программку в папку “Applications”.

Настройки Spectacle

При запуске программы Spectacle она появиться в области индикаторов строки меню в виде значка:

Значок Spectacle

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

Настройки Spectacle

Там же расположен checkbox - “Launch Spectacle at login” - думаю, все понятно и в переводе не нуждается.

Управление окнами с помощью Spectacle

Чтобы разобраться, что это за клавиатурные сокращения, достаточно пять минут поиграться с ними и все станет понятно. Выберем любое приложение (в моем случае это будет окно Terminal) в качестве подопытного кролика и будем нажимать hotkeys.

Следующие hotkeys заставят окно терминала занимать ровно половину экрана монитора, смещаясь при этом в нужную сторону:

  • занять левую половину окна — ⌥⌘←
  • занять правую половину окна — ⌥⌘→
  • занять верхнюю половину окна — ⌥⌘↑
  • занять нижнюю половину окна — ⌥⌘↓

Нижеследующие hotkeys заставят окно терминала “побегать” по углам экрана монитора. То есть, поместиться в нужный угол экрана, при этом размер окна останется без изменения:

  • сместиться в левый верхний угол — ⌃⌘←
  • сместиться в правый верхний угол — ⌃⌘→
  • сместится в нижний левый угол — ⌃⇧⌘←
  • сместиться в нижний правый угол — ⌃⇧⌘→

Еще пара полезных команд для управления окном:

  • окно программы по центру экрана - ⌥⌘C
  • окно во всю ширину экрана - ⌥⌘F

Программа Spectacle умеет перемещать окно приложения таким образом, чтобы оно занимало ровно треть площади экрана монитора. Сочетание - ⌃⌥→ заставит окно перемещаться сперва вертикально, а потом горизонтально по экрану, при этом занимая треть площади. Сочетание - ⌃⌥← заставит окно двигаться в обратном порядке. Попробуйте у себя - интересный эффект получается.

Изменение размера окна приложения достигается с помощью двух сочетаний клавиш:

  • увеличение размера окна - ⌃⌥⇧→
  • уменьшение размера окна - ⌃⌥⇧←

Перемещение окна между виртуальными дисплеями:

  • переместить окно на следующий дисплей - ⌃⌥⌘→
  • переместить окно на предыдущий дисплей - ⌃⌥⌘←

Очень полезной и приятной (а более того - нужной) особенностью Spectacle является то, что программа запоминает местоположение и размер окна для каждого приложения. В следующий раз, когда запуститься (например, у меня - окно терминала) приложение, его окно расположиться точно в нужном месте экрана монитора.

Если нужно сбросить настройки для окна проложения, то для этого существует комбинация - ⌥⌘Z. Вернуть обратно настройки для окна приложения - ⌥⇧⌘Z.

Заключение о Spectacle

Программа Spectacle мне понравилась однозначно. Первый фактор - она бесплатна. Второй - она (можно сказать) незаменима для удобной настройки workflow.

Первое упоминание об этой программе я увидел у Sorax. До этого пытался “подружиться” с Divvy, которую рекомендовали ребята из Loftblog. Однако, как-то не получилось у меня с ней работать.

А вот Spectacle понравилась с первого взгляда. Как мне кажется, из программа разряда “must have”.