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

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

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

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

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

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

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

Ниже приведу созданные мною четыре блока 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>Lets 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-документа - перед закрывающим тегом </body>.

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

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

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

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


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

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

Кратко о parallax

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

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

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

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

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

Еще одним обязательным атрибутом для элементов списка li является атрибут data-depth, у которого значение может меняться в диапазоне от 0 до 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

Произведем небольшую стилизацию нашего будущего parallax с помощью Sass/Compass. Для элемента 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

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

Тут все просто. Первой строкой подключается файл скрипта Parallax.js. Второй строкой сначала в теле документа отыскивается элемент с идентификатором scene, который помещается внутрь переменной scene. Затем создается новый экземпляр parallax объекта Parallax и ему передается в качестве аргумента эта переменная 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”.


Краткая статья, посвященная тому же вопросу - как реализовать кросс-браузерную поддержку SVG в браузерах.

В предыдущей статье “SVG fallback с помощью PNG” было показано четыре очень интересных способа реализации такой задачи. В этой статье будут показаны также несколько способов решения, но уже с помощью библиотеки jQuery .

В начале статьи автор рассказывает о преимуществах использования формата графики SVG. Думаю, что многие уже устали читать деферамбы о пользе SVG. Мне, как переводчику, тем более надоело переводить всю эту “воду”, поэтому смело ее опускаю и перехожу к главному.

jQuery и Modernizr

Для реализации этого способа понадобиться библиотека Modernizr. Код реализации должен выглядеть таким образом:

if (Modernizr.svg) {
  // Supports SVG
} else {
  // Doesnt support SVG (Fallback)
}

Если Modernizr обнаружит, что пользовательский браузер не поддерживает SVG, то запуститься простой jQuery-скрипт, который произведет замену расширения svg на png у всех файлов-изображений:

if (!Modernizr.svg) {
  $(img[src*="svg"]).attr(src, function() {
    return $(this).attr(src).replace(.svg, .png);
  });
}

Данный способ имет точно такие же ограничения, что и скрипт из предыдущей статьи - “SVG fallback с помощью PNG”. То есть, нужно иметь два комплекта файлов - один в SVG-формате, другой в PNG-формате. Имена файлов должны быть идентичными.

SVGMagic - плагин под jQuery

SVGMagic - это простой плагин под библиотеку jQuery, который отыскивает в HTML-документе все SVG-изображения (в том числе и фоновые SVG-изображения). А затем им создаются PNG-копии всех найденных SVG-изображений, если браузер пользователя не поддерживает SVG.

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

$(document).ready(function(){
  $(img).svgmagic();
});

Работа плагина SVGMagic строится следующим образом. Проверяется возможность браузером пользователя отображения SVG-изображений. Если такой поддержки нет, то плагин выполняет полную проверку всего HTML-документа и собирает коллекцию всех URL на SVG-файлы, размещенные внутри этого документа.

Затем эта коллекция URL отправляется на сервер плагина. Сервер производит скачивание всех SVG-изображений по этим URL. Затем производиться конвертирование SVG в PNG.

На страницу клиента отправляется новая коллекция URL, которые теперь указывают на файлы формата PNG. Браузер посетителя загружает по этим ссылкам новые PNG-файлы и внешний вид страницы не нарушается.

SVGeezy - еще один плагин jQuery

SVGeezy является fallback-плагином в полном смысле этого слова. Плагин проверяет поддержку SVG в браузере пользователя. Если таковой нет, то выполняется замена значения в атрибуте src на то, в котором указывается на путь PNG-файла.

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

svgeezy.init(false, png);

Первый параметр плагина SVGeezy “говорит” ему - не выполнять или выполнять проверку. Если необходима проверка плагином SVGeezy браузера и замена изображений, то нужно оставить значение в false. Этот параметр может понадобиться в случае, когда нет необходимости в работе плагина на каких-то страницах.

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

Например, файл по пути /images/logo.svg будет заменен файлом по пути /images/logo.png.

На этом самая интересная часть статьи “How to fallback to PNG if SVG not supported?” завершается. Как лично мне кажется, в данной статье заслуживают внимания только первый и последний способы реализации SVG fallback.

На этом все.


Рассмотрим вопрос автоматизации действий в программе Photoshop.

Тема статьи перекликается с предыдущей статей “Macros в Sublime Text 3”, посвященной макросам в Sublime Text.

В Adobe Photoshop также имеется инструмент для записи макросов, только называется он по другому - Actions (Операции). Но от смены названия суть не меняется.

С помощью Actions (Операции) в Photoshop можно записать последовательность действий, а потом запускать их на выполнение каждый раз, когда это понадобиться.

Для чего нужны Actions (Операции) верстальщику? Не поверите, но это очень удобная вешь, которая значительно ускоряет работу в Photoshop. В частности, можно ускорить нарезку изображений из psd-макета.

Буквально за месяц до этого я приобрел лицензию на плагин PNG Hat для автоматизации вырезания картинок:

Плагин PNG Hat в Photoshop

Так вот - я просто на тот момент не знал о существовании макросов в Photoshop! Actions - это намного круче, чем PNG Hat.

Но меньше слов - больше дела. Приступим к изучению Actions (Операции) в Photoshop на простом примере. Создадим макрос для вырезания и экспорта картинок из psd-макета.

Actions - где они живут

Все actions в Photoshop “проживают”” по одному адресу - в меню “Окно” - “Операции” (если Photoshop русскоязычный). Или же быстрее и проще - через сочетание клавиш Alt+F9. Как и все другие инструменты в этой программе, actions имеют свою собственную панель:

Палитра Actions в Photoshop

По умолчанию, в Photoshop уже есть готовые операции actions, расположенные в папке “Операции по умолчанию”: “Виньетка”, “Рамка - 50 пикс.”, “Деревянная рамка - 50 пикс.” и так далее.

Actions в Photoshop не могут жить вне набора операций (правильно такой набор называется “Set”). На скриншоте как раз показаны два таких набора (“Set”) - один от Photoshop, второй - мой собственный.

Внизу палитры расположены шесть кнопок управления actions. Перечислю их по порядку, слева направо:

  • остановка записи action
  • запуск записи action
  • воспроизведение записанного action
  • создание нового набора actions
  • создание нового action

Создаем новую операцию action

В палитре “Операции” кликаем на кнопке “Создать новый набор”. В диалоговом окне вводим название нового набора - “Export-Images-to-Web”, затем сохраняем его.

Созданный набор операций (“Set”) готов, но он пока пустой, в нем нет ни одной операции (action):

Новый Set для Actions

В самом левом столбце палитры можно напротив каждого Set’а ставить или убирать галочки, тем самым включая или отлючая данный набор операций (actions).

Треугольнички напротив названия Set’а разворачивают или сворачивают данный набор операций (actions). Каждый набор операций (“Set”) может содержать неограниченное число операций (actions).

Предварительно откроем в Photoshop любой psd-макет, из которого можно экспортировать изображения для будущего HTML-шаблона. В палитре “Слои” заранее выделим слой с изображением, которое будем экспортировать (отключим все эффекты данного слоя, если они есть):

Слой с изображением для экспорта

И нажмем кнопку “Создать новую операцию” в палитре “Операции”. Откроется диалоговое окна настройки будущей операции (action):

Настройка будущего action

В этом окне указываем имя для будущей операции (action); в какой набор операций (“Set”) она будет входить; назначить “горячие” клавиши для данной операции.

Кнопка “Записать” запускает процесс записи макроса. Внизу панели “Операции” кнопочка “Запись операции” станет красной, что напоминает о том, что запись пошла! С этого момента все мои действия будут запоминаться программой Photoshop, поэтому буду внимательным.

Вырезание картинки из выбранного слоя я буду делать пошагово, в следующем порядке:

  • дублирование активного слоя
  • отрезка прозрачных пикселов (trimming)
  • сохранение полученной картинки для Web
  • закрытие нового документа без его сохранения

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

Созданная операция (action)

Настройка операции (action)

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

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

Для этой цели существует колоночка с пустыми квадратиками напротив каждого действия в записанной мною операции (action).

Если навести курсор мыши на любой из них, то всплывающий tooltip подскажет, что это - “Возможность установки или отмены установки диалогового окна”.

К слову сказать, все операции (actions) в Photoshop делятся на два вида:

  • автоматические (без вмешательства пользователя)
  • полуавтоматические (с частичным вмешательством пользователя)

Нам как раз нужно из автоматической операции (action) сделать ее полуавтоматической. На этапе “Экспортировать” нужно сделать так, чтобы Photoshop спрашивал нас, куда нужно сохранять изображение.

Делается это очень просто - достаточно кликнуть мышью в нужном окошке:

Диалоговое окно экспорта изображения

Попробуем снова экспортировать изображение по нажатию клавиши F3. Вуаля - видим, что открылось окно Photoshop, в котором можем задать параметры для экспорта изображения. И в том числе - куда необходимо сохранять изображение:

Экспорт изображения для Web

Заключение

На этом можно закончить тему создания операций (actions) в Photoshop. На самом деле эта тема большая и достаточно сложная. Я видел даже специальный курс для дизайнеров по написанию actions под Photoshop.

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

На этом все.