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

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

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

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

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

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

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

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

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

Все

1

actions

1

actions

По умолчанию, в Photoshop уже есть готовые операции

1

actions

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

Внизу палитры расположены шесть кнопок управления

1

actions

• остановка записи

  1

  action

• запуск записи

  1

  action

• воспроизведение записанного

  1

  action

• создание нового набора

  1

  actions

• создание нового

  1

  action

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

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

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

1

action

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

1

actions

Треугольнички напротив названия Set’а разворачивают или сворачивают данный набор операций (

1

actions

1

actions

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

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

1

action

В этом окне указываем имя для будущей операции (

1

action

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

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

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

  1

  trimming

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

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

1

action

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

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

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

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

1

action

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

К слову сказать, все операции (

1

actions

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

Нам как раз нужно из автоматической операции (

1

action

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

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

Заключение

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

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

На этом все.

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

Чтобы было яснее, рассмотрим пример psd-макета страницы:

Видим, что на странице имеются множественные фоновые изображения. И как вы думаете, каким образом нужно вырезать такое изображение? Чтоб потом замостить им фон страницы или фон блока-контейнера?

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

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

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

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

Описание выполняемых действий приведено в локализованной версии Photoshop.

Простое вырезание фона

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

В этом случае нужно поступить только одним способом.

Свести воедино все видимые слои с помощью сочетания клавиш Shift+Ctrl+E.

Инструментом “Crop” с зажатой клавишей Shift (чтобы получился квадрат) выделяем на фоне psd-макета квадрат побольше, размера

1

50x50px

1

100x100px

Затем экспортируем его в Web и используем в CSS для установки в качестве фонового изображения.

Вырезание фрагмента фона

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

Инструментом “Crop” вырезаем из фона обнаруженный фрагмент, сохраняем его для Web и используем по назначению в CSS.

Pattern в Photoshop

Третий способ основан на понятии

1

pattern

1

pattern

Я не дизайнер (и никогда им не буду), поэтому могу сказать по поводу того, что такое

1

pattern

Это образец узора какого-то определенного размера (который может быть любым) -

1

102x102px

1

20x20px

1

5x5px

Вся задача pattern’а - служить образчиком, которым дизайнер выполняет заливку слоя. То есть, ситуация получается в точности такая, как у верстальщика. Имеется маленький кусочек рисунка, которым дизайнер “мостит” весь слой.

Задача верстальщика при нарезке psd-макета - выделить этот

1

pattern

1

pattern

Все! Наша задача наполовину выполнена - мы знаем, что для этого слоя дизайнер применил

1

pattern

Осталось только найти этот

1

pattern

Дважды кликаем мышкой по выбранному слою с фоновым рисунком. Откроется окно “Стиль слоя”, в котором активируем пункт - “Наложение узора”. В правой части окна будет показан конкретный

1

pattern

То есть, Photoshop показал, какой

1

pattern

1

pattern

В этом же окне нужно навести курсор мыши на окошко с

1

pattern

1

pattern

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

Щелчком мыши на маленькой стрелочке справа от окна с образцом

1

pattern

1

patterns

В этой палитре нам необходимо добавить выбранный нами

1

pattern

1

pattern

Закрываем окно “Стиль слоя” и создаем новый документ Ctrl+N с размерами, как у нашего

1

pattern

Здесь самое главное - правильно указать размеры будущего документа (как правило, все

1

pattern

Создаем новый документ. Затем в меню Photoshop переходим по пути “Слои” - “Новый слой-заливка” - “Узор”. И в открывшемся окошке “Новый слой” просто кликаем по кнопке ОК, все остальное для нас опять неважно:

Откроется еще одно окошко, в котором выбираем нужный нам

1

pattern

Как результат получаем новый документ с заливкой слоя выбранным нами

1

pattern

Картинка для фоновой заливки готова! Осталось только экспортировать ее для Web и применить на странице силами CSS.

Например, таким образом:

background-position: 0 0;
background-repeat: repeat;
background-image: url(../images/bg_body.png);

Все - задача выполнена!

Заключение

Вот мы и познакомились с тремя способами вырезания фонового изображения из psd-макета.

Отличная тема из разряда “как повысить эффективность своей работы”.

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

Захотел написать маленький обзор этой темы, когда пересматривал видео по верстке от Adi Purdila, записанное им для Tuts Plus. В этом видео он прямо-таки волшебным образом вставлял комментарии в HTML-файл. Конечно, делать комментарии в этаких файлах - дело нужное и полезное. Но вот добавлять их - это такая нудная задача!

Решил потратить немного своего времени, чтобы разобраться, как же он мог сделать? Немного подумал и пришел к мысли, что наверняка он делал это с помощью макросов (macros). Точнее - он создал макрос (macros), который вставляет комментарий в файл. А потом только применял этот макрос (macros) - просто и быстро!

Ну что же, давайте и мы разберемся, каким образом можно записать свой собственный макрос (macros) в Sublime Text. Чем мы хуже Adi Purdila?

Что такое macros?

Для начала неплохо было бы вспомнить, что такое макрос (macros)? В любой программе, будь то MS Excel, Adobe Photoshop, Notepad++ или же Sublime Text макрос (macros) - это записанная этой программой последовательность действий, выполненная пользователем. Образно говоря, пользователь говорит программе - “смотри, запоминай и повторяй за мной”.

Запись macros в Sublime Text

Запись и воспроизведение макросов (macros) в Sublime Text можно выполнить двумя способами.

Первый - через панель инструментов по пути “Tools” - “Record Macro”, “Tools” - “Playback Macro”.

Или же более правильным способом (ведь мы с вами настоящие кодеры?) - через сочетание клавиш. Запуск записи макроса (macros) - через Ctrl+Q. Остановка записи макроса (macros) - тоже через Ctrl+Q. Воспроизведение записанного макроса (macros) - через Shift+Ctrl+Q.

Я создам макрос (macros) для вставки начального комментария для блока. После остановки записи макроса (macros) он сохраняется в буфере обмена и при закрытии программы Sublime Text он пропадет. Поэтому его нужно сохранить через меню “Tools” - “Save Macro”.

Все пользовательские макросы (macros) сохраняются в директорию “Packages” - “User”. Показанный на видео макрос я сохранил под именем

1

comment.sublime-macro

В меню редактора Sublime Text сохраненный макрос (macro) можно найти по пути “Tools” - “Macros”. Там уже имеются дефолтные макросы (macros) самого редактора и плагинов, установленных в нем. В моем случае там есть макросы (macros) под плагин “MarkdownEditing”:

Ради любопытства можно посмотреть на содержимое сохраненного мною макроса (macros)

1

comment.sublime-macro

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

[
{
  "args": null,
  "command": "find_under_expand"
},
{
  "args": null,
  "command": "upper_case"
},
{
  "args":
  {
    "extend": false,
    "to": "bol"
  },
  "command": "move_to"
},
{
  "args":
  {
    "characters": "<!"
  },
  "command": "insert"
},
{
  "args":
  {
    "characters": "--"
  },
  "command": "insert"
},
...

Создание key binding для macros

Теперь неплохо было бы “повесить” на этот макрос (macros) сочетание горячих клавиш (“забиндить”), чтобы почти мгновенно вызывать его на исполнение. Для этого понадобятся вкладки “Key Bindings - Default” и “Key Bindings - User”. Обе они располагаются в меню “Preferences”.

Во вкладке “Key Bindings - Default” помещен список всех сочетаний клавиш по умолчанию, на которые повешены какие-либо действия в редакторе Sublime Text.

Во вкладке “Key Bindings - User” можно задать свои собственные сочетания клавиш и повесить на них нужное действие.

Мне захотелось повесить выполнение макроса

1

comment.sublime-macro

Такого не оказалось, поэтому во вкладке “Key Bindings - User” добавляю такую строку:

[
  { "keys": ["alt+shift+c"], "command": "run_macro_file", "args": {"file": "Packages/User/comment.sublime-macro"} }
]

Эта строка легко читается.

Здесь:

• 1	"keys": ["alt+shift+c"]

  - это записанное мною сочетание клавиш;

• 1	"command": "run_macro_file"

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

• 1	"args": {"file": "Packages/User/comment.sublime-macro"}

  - указывает, какой именно макрос (macro) нужно выполнить.

Аналогично предыдущему макросу, создам еще один macros, который будет вставлять конечный комментарий для блока. На него во вкладке “Key Bindings - User” я повешу сочетание клавиш Shift+Ctrl+E:

{ "keys": ["alt+shift+e"], "command": "run_macro_file", "args": {"file": "Packages/User/end_comment.sublime-macro"} }

Запуск макроса (macros) в Sublime Text

Теперь настало время проверить, как работают записанные мною макросы. Для этого в коде я воспользуюсь сочетаниями клавиш Shift+Ctrl+C и Shift+Ctrl+E:

Отлично! Быстрота и легкость вставки комментариев впечатляет. А сколько времени и сил при этом экономится! Конечно, одними комментариями для макросов (macros) можно не ограничиваться - тут уж насколько хватит фантазии.

Главное - что инструмент нужный и полезный, макросы (macros) в Sublime Text.

Вопрос настройки орфографии (spellcheck) в редакторе Sublime Text 3.

Сам вопрос подразумевает настройку проверки орфографии (spellcheck) русского текста в Sublime Text, ибо орфография английского языка включена в этом редакторе по умолчанию (точнее - есть встроенный словарь английского языка).

Установка русского словаря

Чтобы включить возможность проверки (spellcheck) русскаго текста в редакторе Sublime Text, необходимо подключить словарь русского языка. Готовый к использованию под Sublime Text словарь русского языка можно скачать по ссылке - sublime_russian_english_dictonary.zip.

После скачивания архива его нужно распаковать. В итоге получиться два файла:

$ ls
  russian_english.aff
  russian_english.dic

Затем нужно переместить (или скопировать) оба файла в директорию с плагинами Sublime Text. Это можно сделать тремя способами.

Первый способ - быстрый и простой, основан на использовании консоли Linux (я не забыл сказать, что пример приведен под Linux Mint 17 Cinnamon?). Для этого в текущей директории со словарями открываем терминал и выполняем всего одну команду:

$ cp * ~/.config/sublime-text-3/Packages/

… которая произведет копирование всех файлов (в данном случае - двух) в директорию с плагинами под Sublime Text.

Второй способ - более медленный. Для этого в окне Nemo (в Linux Mint Cinnamon - это аналог Finder под Mac OS X или Проводник под Windows) в контекстном меню выбираем “Показать скрытые файлы”.

Отобразятся все скрытые (системные) файлы\директории системы Linux Mint и среди них нужная нам директория - “.config”:

Переходим по пути

1

.config

1

sublime-text-3

1

Packages

Третий способ - с помощью редактора Sublime Text. Для этого в самом редакторе переходим по пути “Preferences” - “Browse Packages…”. Откроется окно с плагинами Sublime Text. Далее - действовать, как во втором примере.

Spellcheck в Sublime Text

После помещения файлов словаря в директорию “Packages” желательно перезапустить редактор Sublime Text. Если все прошло успешно, то в меню “View” - “Dictionary” под пунктом “Language - English” появиться пункт “russian-english” - это и есть подключенный нами словарь русского языка.

Чтобы осуществить проверку (spellcheck) на ошибки в русско-язычном тексте в редакторе Sublime Text, нужно выбрать в меню вышеназванный пункт - “View” - “Dictionary” - “russian-english”, тем самым указав редактору, какой словарь использовать для проверки. А затем запустить проверку орфографии (spellcheck), нажав клавишу F6. Повторное нажатие клавиши отключает проверку орфографии.

Настройка spellcheck в Sublime Text

Рассмотренный выше способ проверки орфографии (spellcheck) в Sublime Text можно назвать ручным. Однако, для этого способа требуется много времени и телодвижений, чтобы включить его.

Если в Sublime Text пишется в основном русско-язычный текст, то можно включить автоматическую проверку орфографии (spellcheck) в этом редакторе.

Для этого в пользовательских настройках “Preferences” - “Settings - User” достаточно прописать две строки:

// Word list to use for spellchecking
"dictionary": "Packages/russian_english.dic",

// Set to true to turn spellchecking on by default
"spell_check": true

Первая строка указывает редактору Sublime Text месторасположение русского словаря, тем самым говоря ему, что для проверки орфографии (spellcheck) нужно использовать этот словарь, а не какой-нибудь другой.

Вторая строка включает автоматическую проверку орфографии (spellcheck) в Sublime Text. Если в тексте много англоязычных слов, или если необходимо на время отключить проверку, то достаточно нажать клавишу F6. Чтобы снова вернуть назад проверку, опять нажимаем F6.

Заключение

Очень полезная штучка оказалась для меня, возможность проверки орфографии (spellcheck) в Sublime Text. Открыл для себя с удивлением, сколько же много я ошибок и опечаток делаю в тексте!

Один вопрос в данной теме остался для меня открытым - как самому вносить правки в русский словарь? Как самому добавлять в него слова? К примеру, чтобы он не “ругался” на незнакомое ему слово “фреймворк” или “плагин”?

Совсем короткий пост. Думал даже, нужно ли его публиковать вообще? Но потом решил, что раз уже “накропал” статью, то стоит ее разместить на своем бложике.

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

Так вот, мною был взят “premium”-макет из одного из видеокурсов по верстке (не буду говорить, какой - это неважно). Открыл его, посмотрел и впечатлился - красивый такой макет! Да и автор курса его нахваливал. Это потом стало ясно, что в данном случае psd-макет не мог быть реально хорошим, по определению.

Начал я верстать этот макет, с обязательным применением Susy, ибо даже при первоначальном открытии макета на нем осталась сетка из guidelines, по которой дизайнер рисовал макет. Капитан Очевидность говорил о том, что данный макет нужно верстать по сетке.

Ну я и начал делать верстку на Susy, радостно потирая ручки от предвкушения, что вот сейчас сверстаю такой красивый шаблон! Но когда дошел до контентной части, то верстка у меня почему-то “расползлась”. Три колонки не вписывались по ширине в блок-родитель и последняя из них выпадала вниз. Сначала решил, что это я сделал что-то не так.

Немного поостыл и решил внимательно разобраться, в чем дело. И … е-мое! Вы только посмотрите на это “чудо” дизайнерской мысли!

Макет вписан точно в 960px! Не в 940px, как это можно было ожидать, а именно в 960px!

Ну ладно, можно поправить ширину навигации и слайдера силами CSS, чтобы вписать ширину обоих в 940px. Но это было бы еще пол-беды! Ведь, если на главной странице сетка еще выдержана, то на остальных страницах - просто тихий ужас:

Более того, абсолютно непонятно, зачем этому “дизайнеру” сетка вообще понадобилась в данном случае:

Чтобы макет “профессионально” выглядел?

Становится ясно, что изначально этот макет делался (и должен был делаться) по сетке. Но дизайнер “закосячил” с самого начала. Или не знал о предназначении сетки вообще?

Вывод

Такой макет нужно или отсылать на доработку; или верстать на “ванильном” CSS, без использования любой из grid system.

Мораль сей басни такова: нужно внимательно анализировать макет перед тем, как приступать к верстке. Чтобы не потерять время даром (а время - деньги, как хорошо известно).