От переводчика. Привожу вольный перевод великолепной статьи “Styling And Animating SVGs With CSS” от Sara Soueidan.

Данная статья является одной из пяти в серии, посвященной формату SVG. Больше мне сказать нечего - читайте Сару.

CSS может использоваться для стилизации и анимации векторной графики точно также, как для стилизации и анимации HTML-элементов. В этой статье, которая является производной от моего недавнего выступления на конференциях CSSconf EU и From the Front, где я рассказывала о перспективах и приемах работы с форматом векторной графики SVG и возможностях ее стилизации при помощи CSS.

Я покажу, каким образом можно экспотировать и оптимизировать SVG-файлы, способы вставки этих файлов в web-документ, способы стилизации и анимации SVG-файлов, на практике применим стили и анимацию к SVG-файлам-примерам.

Введение

Масштабируемая векторная графика (SVG) представляет из себя векторные изображение для двухмерной графики (2D), в основе которой лежит формат XML. Подобная графика имеет поддержку интерактивности и анимации. Другими словами, SVG-файлы представляют из себя XML-теги, которые генерируют фигуры и изображения; к этим фигурам и изображениям могут быть применены стили и эффекты с помощью CSS точно также, как это делается с обычными HTML-элементами.

Анимация или интерактивность в SVG-файлах могут быть достигнута двумя способами - с помощью CSS или с помощью Javascript. В этой статье будет рассмотрен первый способ - как это сделать с помощью CSS.

Существует много причин, почему нужно делать выбор в пользу SVG и почему нужно использовать этот формат сегодня:

  • графика в формате SVG является масштабируемой и не зависящей от разрешения. Такая графика выглядит великолепно везде, будь то экраны с высоким разрешением Retina или же печатный вариант;
  • изображения имеют отличную поддержку браузеров. Создать fallbacks для браузеров, не имеющих поддержки, очень легко и в этой статье будет показано, как это сделать.
  • поскольку файлы в своей основе являются текстом, то они хорошо поддаются архивации, что позволяет сделать их значительно меньше по размеру, чем файлы форматов JPEG или PNG.
  • файлы стилизуются и анимируются с помощью CSS или Javascript
  • файлы формата SVG имеют встроенную поддержку clipping, masking, background blend modes и filters. Эти возможности эквиваленты возможностям обычного графического редактора, такого как Photoshop.
  • к файлам можно получить доступ. Другими словами, к ним можно получить легкий доступ через DOM API, что делает их прекрасным инструментом для инфографики и визуализации данных. Это дает ему преимущество перед HTML5 Canvas, поскольку контент последнего недоступен. С другой стороны, можно легко инспектировать каждый элемент файла с помощью инспектора элементов браузера точно также, как это делается с обычными HTML-элементами. Помимо этого, файлы доступны для экранных устройств чтения, если это необходимо. В последней части этой статье будет более подробно рассмотрен вопрос доступности файлов.
  • существует достаточно инструментов для создания, редактирования и оптимизации файлов. Помимо этого, существуют инструменты для облегчения и рабочий процесс. Эти инструменты также будут рассмотрены позже.

Экспортирование SVG из графических редакторов и их оптимизация

Из всех редакторов векторной графики имеется три самых популярных:

  1. Adobe Illustrator
  2. Inkscape
  3. Sketch

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

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

Sketch - это приложение только под Mac OS X. Оно также не бесплатное, но уже успело стать достаточно популярным и собрать свою группу поклонников. Обладает множеством инструментов и возможностей, что делает работу в этом редакторе быстрее и удобнее.

Для создания векторной графики можно выбрать любой из этих трех редакторов. После создания SVG-файлов перед их вставкой на web-страницу нужно выполнить две операции: экспортирование из редактора и очистка этих файлов от лишних данных.

В этой статье я буду показывать экспортирование и оптимизацию SVG-файлов на примере редактора Adobe Illustrator. Этот процесс практически ничем не отличается от подобного в других редакторах. За исключением некоторых специфических настроек самого Illustrator, о чем будет упоминаться по ходу этой статьи.

Для экспортирования графики в SVG-формат в Illustrator нужно перейти в меню по пути “File” - “Save as”, а затем выбрать формат .svg из выпадающего списка форматов. Настройки в окне поменяются в соответствии с выбранным форматом .svg. Например, можно будет выбрать версию SVG; встраивать изображения в виде графики или же сохранить их отдельно, с созданием внешней ссылки на них; выбрать способ стилизации (с помощью презентационных аттрибутов или же при помощи CSS-стилей в элементе style).

Ниже показано изображение с окном экспорта SVG, в котором представлен наилучший набор настроек для сохранения файлов SVG для web:

Окно настроек экспорта SVG в Adobe Illustrator

Почему представленный выбор настроек является наилучшим, рассказано Michaël Chaize в прекрасной статье Export SVG for the Web With Illustrator CC.

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

Имеется несколько инструментов для оптимизации SVG-кода. Peter Collingridge создал online-инструмент SVG Editor, в котором можно как вставлять напрямую, так и загружать свои собственные SVG-файлы. Инструмент обладает многими возможностями по оптимизации - удалением вспомогательного кода, комментариев, пустых групп и так далее. Одной из интересных настроек является управление числом знаков после запятой для координат точек:

Окно настроек SVG Editor

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

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

Редактор SVG Editor является online-инструментом. Если вы предпочитаете offline инструмент, то попробуйте SVGO (O - сокращение от “оптимизатор”). Этот инструмент основан на Node.js, имеет простой и понятный drag-and-drop интерфейс. Если вам не нравиться использовать online-инструменты, то SVGO будет хорошей альтернативой.

Ниже представлено простое изображение формата “до и после”, иллюстрирующее процесс оптимизации SVG-файла в online-редакторе SVG Editor. Красным цветом выделены paths и наглядно показано, насколько эффективен процесс оптимизации в данном случае:

Оптимизация SVG в SVG Editor

Обратите внимание на размер исходного SVG-файла и размер его оптимизированной версии. Вне всяких сомнений, оптимизированная версия более удобочитаемая.

После оптимизации SVG-файлов они готовы для встраивания их на web-страницу, для дальнейшей стилизации и анимации с помощью CSS.

P.S.

На практике воспользовался обоими инструментами оптимизации SVG - SVG Editor и SVGO. Могу сказать по личному опыту, что SVGO обладает значительно лучшим коэффициентом оптимизации. К слову сказать, это отечественная разработка команды Yandex.


От переводчика. Данная статья является вольным переводом поста Creating Asymmetric Layouts With Susy автора Zell Liew.

Цель статьи - на простом примере показать, каким образом можно создавать ассиметричную разметку (asymmetric layout) с помощью Susy 2. Обзор ни в коей мере не является каким-либо пособием - это просто очень краткий экскурс по возможностям Susy 2 в области (asymmetric layout). Далее - вольный перевод с разрешения автора.


Когда я впервые услышал об ассиметричной разметке (asymmetric layout), на тот момент такую можно было сделать только с помощью фреймворка Singularity GS. Подобная разметка была чем-то невероятно крутым и я очень захотел сделать подобную же - с неравной шириной столбцов columns. Но на тот момент я был полностью доволен системой Susyone и мне очень не хотелось переключаться на другой инструмент.

Можете представить мой восторг, когда вышла новая версия Susy 2, в которой была включена поддержка ассиметричной разметки (asymmetric layout).

В этой статье я покажу, как просто можно создавать ассиметричную разметку (asymmetric layout) с помощью Susy 2.

Что мы будем делать

В этой статье мы будем создавать с помощью Susy простую fluid-разметку. В этой разметке есть две боковых панели и два вложенных блока-потомка внутри центрального блока с контентом:

Asymmetric Layout Basic Setup

Глобальные переменные Susy

Для того, чтобы использовать возможность создания ассиметричной разметки (asymmetric layout) в Susy, в ее глобальной переменной $susyнужно внести два параметра: columns и output. Параметр columns должен быть Sass-списком для того, чтобы можно было работать с ассиметричной разметкой (asymmetric layouts).

Sass-список является строкой значений, разделенных пробелом и выглядит он примерно таким образом:

$list : 1 2 3 2 1;

Внутри данного списка $list располагаются пять значений: 1, 2, 3, 2, 1. Если поместить этот список в качестве параметра в глобальную переменную $susy, то в результате получим ассиметричную разметку (asymmetric layout), состоящую из пяти столбцов.

Также же необходимо добавить еще один параметр output: isolate:

$susy : (
  columns: 1 2 3 2 1,
  output: isolate
)

После установки этих параметров все готово для создания заметки с помощью Susy.

Создание ассиметричной разметки (asymmetric layout)

Как правило, первым важным шагом является добавление миксина container для блока-обертки. Помимо этого, в данном примере для блока-обертки добавим еще высоту на 100% viewport, так как внутри блока нет содержимого и иначе мы его просто не увидим:

.wrap {
  @include container(1140px);
  height: 100vh;
}

Asymmetric Layout

Прежде чем продолжить создание разметки, необходимо разобраться с еще одним вопросом.

Так как в глобальных настройках Susy используется параметр output: isolate, необходимо уточнить месторасположение каждой отдельной части разметки. Для этой цели нужно использовать параметр $location.

Параметр $location указывает месторасположение каждого отдельного span и может принимать следующие значения:

  • first
  • last
  • at <number>

Если какой-либо отдельный блок по разметке располагается первым, то для него необходимо использовать ключевое слово first. Если блок располагается последним, то для него нужно использовать слово last. Если же блок располагается в разметке, к примеру, начиная со 2-го столбца, то в миксине span нужно использовать ключевое слово at 2.

Теперь, обладая всеми этими знаниями, можно создать разметку для трех блоков: .sidebar-one, .content и .sidebar-two.

Блок .sidebar-one по нашей схеме располагается первым и занимает ширину в один столбец:

.sidebar-one {
  @include span(1 first);
}

Блок .sidebar-two является последним в схеме разметки и также занимает ширину в один столбец:

.sidebar-two {
  @include span(1 last);
}

Блок .content имеет ширину в три столбца и начинается со второго столбца:

.content {
  @include span(3 at 2);
}

Теперь все три блока должны точно расположиться в создаваемой нами ассиметричной разметке (asymmetric layout). Два оставшихся блока .nest-one и .nest-two временно опустим для более ясной картины:

Созданная Asymmetric Layout

Создание разметки для вложенных блоков .nest-one и .nest-two немного сложнее, нежели для основных блоков разметки. Имеется ввиду, что при разметке блоков-потомков необходимо учитывать факт их вложенности.

Оба наших блока расположены внутри блока .content, а мы знаем, что данный блок имеет структуру (2 3 2), которая также является ассиметричной разметкой (asymmetric layout).

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

Блок с классом .nest-one является первым блоком в разметке и занимает ширину в один (1) столбец ассиметричной сетки (asymmetric layout). Блок с классом .nest-two является последним блоком в разметке и занимает ширину в два (2) столбца.

Такая разметка создается с помощью следующего кода:

.nest-one{
  @include span(1 of (2 3 2) first);
}
.nest-two{
  @include span(2 of (2 3 2) last);
}

Как видим по исходному коду, при создании разметки нет необходимости указывать точную ширину (px,%) каждого блока. Благодаря Susy создание ассиметричной разметки (asymmetric layout) выполняется просто, с применением той теории, о которой только что говорилось. Достаточно только указать число столбцов, которое должен занимать каждый блок.

Более сложный пример разметки

Пример ассиметричной разметки, представленный в этой статье, достаточно простой. Более сложным случаем является создание адаптивной ассиметричной разметки (asymmetric layout).

В качестве примера могу привести образец ассиметричной разметки, созданной Nathan Ford с применением приложения GridsetApp. Этот образец является хорошим примером адаптивной страницы, которая дает представление о том, что может Susy.

Примечание переводчика: на этом самое существенное и интересное в этой статье заканчивается. Дальше идет реклама книги автора. Собственно, данная статья для этого и писалась, конечно. Но ради даже такого простого примера ассиметричной разметки (asymmetric layout) на Susy стоило привести этот пост.


При изучении Susy одним из вопросов, который всегда стоял передо мной, заключался в следующем: “Как удалить padding или margin у первого и последнего столбца column в разметке Susy без применения CSS-свойств first-child и last-child?”.

Этот вопрос является один из самых главных для всех, кто только начинает изучение Susy. Если посмотреть в корень данного вопроса, то его основную суть можно свести к следующему (если судить по многочисленным постам в Интернет): необходимо использовать значение inside вместо значения after. Для того, чтобы точно ответить на этот вопрос, необходимо хорошо понимать, каким образом положение отступов gutter в целом оказывает влияние на всю разметку, созданную в Susy.

Как мне кажется, вопрос о расположении отступов gutter в разметке Susy является самой важной настройкой, поскольку он оказывает влияние на весь код в целом. Если у вас перед прочтением статьи существовал такой вопрос, то данная статья именно для вас.

Что такое - расположение отступов gutter

Расположение отступа gutter позволяет полностью менять всю разметку страницы, созданную в Susy. Данный параметр определяет, где должны находиться отступы gutter относительно столбцов columns. Также данная настройка определяет, будут ли отступы gutter являться CSS-свойством padding или margin.

Эта параметр находиться среди глобальных настроек переменной $susy. Как вариант, данный параметр можно использовать локально, внутри миксина span. Давайте начнем с рассмотрения случая, когда расположение отступа gutter управляется из глобальной переменной $susy.

По умолчанию, расположение отступов в Susy определено ключевым словом after. Помимо этого, существуют еще варианты: before, split, inside и inside-static. Ниже представлен полный вариант синтаксиса параметра gutter-position в глобальной переменной $susy:

$susy: (
  gutter-position: after ( before | after | split | inside | inside-static )
);

Ключевые слова в круглых скобках являются возможными вариантами значения параметра gutter-position.

Для ясности понимания тонкостей разметки в Susy при использовании параметра gutter-position необходимо создать простую структуру:

Базовая разметка в Susy

Gutter-position: after

Значением по умолчанию для параметра gutter-position является ключевое слово after. Данное значение заставляет Susy располагать отступы gutters после каждого столбца разметки. В этом режиме необходимо удалить отступ у последнего столбца в разметке. В этом случае отступы gutters являются CSS-свойством margin и размещаются в разметке следующим образом:

Gutter-position: after

При использовании значения по умолчанию для параметра gutter-position миксин span создает три CSS-правила - width, margin-right и float: left:

.test {
  @include span(3 of 4);
}

Результирующий CSS-код:

.test {
  width: 73.68421%;
  float: left;
  margin-right: 5.26316%;
}

В этом коде свойство margin-right - это отступ gutter, созданный Susy в данной разметке.

Можно использовать ключевое слово last для удаления крайнего margin у столбца:

.last {
  @include span(1 of 4 last);
}

В результате получим результат в виде margin-right: 0:

.last {
  width: 21.05263%;
  float: right;
  margin-right: 0;
}

В рассматриваемой нами разметке область контента занимает 3 столбца из 4. При этом область боковой панели размещается в одном столбце из 4-х. Кроме того, боковая панель является последним элементом разметки, поэтому код для подобного случая будет таким:

.content {
  @include span(3 of 4);
}
.sidebar {
  @include span(1 of 4 last);
}

Краткое заключение: значение after параметра gutter-position является наиболее интуитивно понятным случаем создания разметки в Susy. При использовании значения по умолчанию единственный момент, о котором следует помнить - это убрать отступ у последнего столбца разметки с помощью ключевого слова last.

Gutter-position: before

Значение before является одним из вариантов предыдущего значения - after. Суть этого значения также простая. Вместо размещения отступов gutter после столбцов (как в случае с after), при значении before отступы gutters размещаются перед столбцами. В этом случае необходимо удалить отступ у первого столбца в разметке. Отступы gutter также являются в данном случае CSS-свойством margin:

Gutter-position: before

При использовании значения before для параметра gutter-position миксин span генерирует три CSS-правила: width, margin-left и float: left с помощью кода:

.test {
  @include span(3 of 4);
}

Результирующий CSS-код будет выглядеть таким образом:

.test {
  width: 73.68421%;
  float: left;
  margin-left: 5.26316%; /* Notice this is margin left, not right */
}

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

.content {
  @include span(3 of 4 first);
}

.sidebar {
  @include span(1 of 4);
}

В результате получим точно такую же разметку, что и в предыдущем случае.

Краткое заключение: при использовании значения before разметка получается точно такой же, как и в предыдущем случае. Единственное отличие заключается в применении ключевого слова first для первого столбца разметки.

Gutter-position: split

Значение split параметра gutter-position кардинально отличается от двух предыдущих значений before и after. Если установлено значение split, то ширина отступа gutter делиться пополам (надвое) и обе половинки отступа располагаются по обеим сторонам одного столбца. В этом режиме отступы gutters генерируются в CSS-коде в виде CSS-свойства margin. В этом случае нет необходимости удалять отступы для крайних столбцов разметки:

Gutter-position: split

Если, как в нашем случае, имеются только два блока (с классом .content и .sidebar), то создание такой разметки выполняется просто. Для этого достаточно воспользоваться функцией span, как обычно:

.content {
  @include span(3 of 4);
}
.sidebar {
  @include span(1 of 4);
}

Разметка с двумя блоками

Однако, ситуация становиться не такой ясной, если блок .content или блок .sidebar будут содержать внутри себя блоки-потомки.

Давайте добавим два блока div с классом .child-one и классом .child-two внутрь блока .content для того, чтобы проиллюстрировать эту ситуацию:

<div class="content">
  <h2>
    Content
  </h2>
  <div class="child-one">
    <h2>
      Child One
    </h2>
  </div>
  <div class="child-two">
    <h2>
      Child Two
    </h2>
  </div>
</div>

Для обоих вновь созданных блока применим тот же подход, что и ранее. Блок с классом .child-one будет иметь ширину 2-х столбцов из 3-х; блок с классом .child-two будет иметь ширину 1-го столбца из 3-х.

.content {
  @include span(3 of 4);
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Разметка с двумя дополнительными блоками

Обратите внимание на тот факт, что границы обоих блоков .child-one и .child-two не совпадают с границами фоновой сетки!

Это происходит потому, что при задании для параметра gutter-position значения split нужно учитывать взаимосвязь между блоками-родителями и блоками-потомками. В данном конкретном случае блоком-родителем является .content, а блоками-потомками являются .child-one и .child-two.

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

.content {
  @include span(3 of 4 nest); // Добавлен ключ nest
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Применение ключевого слова nest

Теперь посмотрите, как точно оба блока .child-oneи.child-two` вписались в границы сетки, “нарисованной” фоновым изображением!

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

Если “копнуть” поглубже и проанализировать сгенерированный CSS-код, то можно заметить, что для блоков .child-one и .child-two он совершенно различный:

.content {
  width: 75%;
  float: left;
}

.child-one {
  width: 60%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}

.child-two {
  width: 26.66667%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}

Блок-родитель имеет плавание влево float: left и ширину, которая указана в процентах; при этом ширина отступов gutters этого блока не учитывается (75% равно 3/4).

Блоки-потомки имеют все те же свойства, что и блок-родитель. Но при этом отступы gutters имеют место быть для этих блоков.

Краткое заключение: значение split кардинально отличается от двух рассмотренных ранее значений before и after. При использовании значения split необходимо добавлять ключевое слово nest к блоку-родителю и использовать миксин span для всех блоков-потомков.

Gutter-position: inside/inside-static

Оба значения inside и inside-static очень похожи на предыдущее значение split. Отступы gutters также делятся пополам (надвое) и обе половинки располагаются по обеим сторонам каждого столбца. Однако, в этом случае в CSS-выводе отступы являются свойством padding, а не margin. Также в этом случае нет необходимости удалять отступы у крайних столбцов в разметке:

Gutter-position: inside

Отступы gutters в случае gutter-position: inside имеют тот же принцип, что и при значении split. Если для блока-родителя не будет указано ключевое слово nest, то блоки-потомки выйдут за границы разметки.

.content {
  @include span(3 of 4);
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Блоки-потомки выходят за границы разметки

Если просто добавить ключевое слово nest для блока-родителя .content, то в результате получим следующее:

.content {
  @include span(3 of 4 nest); // The nest key is needed
}
.child-one {
  @include span(2 of 3);
}
.child-two {
  @include span(1 of 3);
}

Блоки-потомки в границах разметки

Значение inside-static работает точно также, как и значение inside. Единственное исключение заключается в том, что отступы gutters получаются в фиксированных единицах измерения, а не в процентах. Кроме этого, в глобальной переменной $susy необходимо задать параметр column-width с указанием ширины столбца column.

Краткое заключение: значение inside работает точно также, как и значение split. При использовании значения inside необходимо добавлять ключевое слово nest к блоку-родителю и использовать миксин span для всех блоков-потомков.

Значение inside и split имеют одинаковый сгенерированный CSS-код, поэтому можно с легкостью менять между собой эти значения в глобальной переменной $susy для параметра gutter-position.

Заключение

Различные типы разметки в Susy создаются с помощью выбора расположения отступов gutters. Различное местоположение отступов gutters в каждом случае имеет свои тонкости и требует понимания процесса, если вы хотите эффективно их использовать.

Существует два основных способа создания разметки при содействии отступов gutters:

  • значения before и after имеют создают отступы gutters с одной стороны каждого столбца column; для крайнего столбца необходимо удалить отступ gutter с помощью ключевого слова first или last.

  • значения inside, inside-static, split разделяют каждый отступ gutter на две равные половины, которые располагаются по обе стороны каждого столбца column. Такие отступы не нуждаются в удалении.

Эта статья является небольшой выдержкой из книги Learning Susy, а точнее - из главы 8, посвященной позиционированию отступов gutter в разметке Susy. В книге вопрос позиционирования рассмотрен подробнее на основе более сложного примера. Если материал, поданный в статье, вам понравился, то книга понравиться еще больше.

Примечание переводчика: данный пост является переводом статьи Understanding Gutter Positions in Susy, созданным мною с любезного разрешения ее автора Zell Liew.


Коротенькая заметка о небольшом баге в 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 нужно установить пару пакетов —exfat-fuse и exfat-utils:

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

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

В Интернете почти на всех ресурсах приведена другая команда для установки пакетов exfat-fuse и exfat-utils (причем —один в один, перепечатывают друг у друга вслепую):

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

Однако, эта команда на моей системе не запустилась —выдала ошибку ключа при подключении репозитория ppa:relan/exfat. Именно этот факт и послужил для меня поводом написать этот краткий обзор.

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

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

$ sudo fdisk -l

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

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

где ключ -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 бережный способ обращения с флеш-накопителями, то этому решению вообще цены нет.

На этом все.