Рассмотрим вопрос автоматизации действий в программе 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 - где они живут

Все

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

Палитра Actions в Photoshop

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

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

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 для Actions

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

1
actions
).

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

1
actions
). Каждый набор операций (“Set”) может содержать неограниченное число операций (
1
actions
).

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

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

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

1
action
):

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

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

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

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

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

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

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

1
action
):

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

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

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

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

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

1
action
).

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

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

1
actions
) в Photoshop делятся на два вида:

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

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

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

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

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

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

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

Заключение

На этом можно закончить тему создания операций (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
в Photoshop. Этот способ самый точный и надежный. В нем мы как-бы “опираемся” на силы самого Photoshop, который должен “помочь” нам обнаружить
1
pattern
в нарисованном дизайнером psd-макете.

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

1
pattern
в двух словах.

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

1
102x102px
,
1
20x20px
или же
1
5x5px
. Этот образец узора может быть любого рисунка (завитушки, полосочки, цветочки и т. д.).

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

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

1
pattern
из psd-макета в отдельное изображение. Чтобы увидеть, что в данном слое используется
1
pattern
, достаточно открыть палитру “Слои” и активировать нужный слой. В качестве примененных к слою эффектов должно стоять “Наложение узора”:

Фоновый слой с pattern

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

1
pattern
в качестве заливки каким-то там рисунком.

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

1
pattern
, что является задачей чисто технической. И нам в этом поможет сам Photoshop.

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

1
pattern
, с помощью которого дизайнер выполнял заливку данного слоя.

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

1
pattern
использовал дизайнер в анализируемом нами слое. Нам осталось “вычленить” этот
1
pattern
и в этом нам снова поможет Photoshop:

Pattern для выбранного слоя

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

1
pattern
‘ом (окно “Узор”) и немного подождать, пока рядом с курсором мыши не появиться всплывающий tooltip, в котором будут показаны размеры данного
1
pattern
‘а.

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

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

1
pattern
‘а открываем палитру паттернов (
1
patterns
):

Палитра паттернов (patterns)

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

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

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

1
pattern
‘а:

Новое изображение с размерами pattern'а

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

1
pattern
‘ы имеют форму квадрата), все остальное для нас неважно.

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

Заливка нового слоя с помощью pattern'а

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

1
pattern
:

Выбор 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”:

Sublime Text User Macros

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

1
comment.sublime-macro
. Ничего сложного в нем нет - это простая запись последовательности выполненных мною действий, в формате JSON.

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

[
{
  "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
на сочетание клавиш Shift+Ctrl+C. Для этого я подстраховываю себя и проверяю, нет ли во вкладке “Key Bindings - Default” такого сочетания клавиш, чтобы не переопределить какое-либо действие.

Такого не оказалось, поэтому во вкладке “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”:

Директория плагинов редактора Sublime Text

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

1
.config
-
1
sublime-text-3
-
1
Packages
и с помощью клавиш Ctrl+C + Ctrl+V производим вставку файлов русского словаря.

Третий способ - с помощью редактора 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!

Ширина psd-макета на всю сетку

Левый край psd-макета

Правый край psd-макета

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

Неравная ширина колонок psd-макета

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

Смещение контента внутри psd-макета

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

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

Вывод

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

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