Instrumenty_Raskrojka_i_Vydelenie_fragmenta_v_fotoshope

Инструменты Раскройка и Выделение фрагмента в фотошопе

Здравствуйте! Фотошоп с самого начала своего существования обладает рядом инструментов, необходимых для веб-мастеров и сайтостроителей. Например, по умолчанию даже в самых свежих версиях программы установлены, так скажем, «древние» наборы стилей слоя (в основном их использовали для создания веб-графики и кнопок). Так вот, среди этих инструментов центральное место занимают Раскройка и Выделение фрагмента — незаменимые для верстальщиков сайтов.

Как рождается оформление сайта? Сначала рисуется дизайн-макет будущего сайта (как правило, его рисуют в фотошопе). В этом макете рисуют все: шапку сайта, логотип, меню, блоки с информацией и все остальное. Затем верстальщик берет инструмент Раскройка и разрезает этот макет на отдельные фрагменты. Для чего это надо? Каждый фрагмент сайта должен работать, а за работу отвечает код. Поэтому необходимо разделить макет на небольшие части и для каждой из них будет прописан свой код, чтобы в итоге потом на сайте все работало, нажималось, мерцало и тому подобное.

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

Итак, на панели инструментов Раскройка и Выделение фрагмента расположены в одной группе с инструментом Рамка. Быстрая клавиша вызова — С (узнать как изменить клавиши вызова).

mestopolozhenie_instrumentov_Raskrojka_i_Vydelenie_fragmenta_na_paneli_instrumentov_v_fotoshope

Как работает инструмент Раскройка

Инструмент Раскройка делит изображение на отдельные фрагменты, которые отделяются от изображения после его сохранения.

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

raskrojka_izobrazhenija_v_fotoshope

Желтой стрелкой я указал на фрагмент который я создал. Синими стрелками помечены границы фрагментов, которые создал фотошоп.

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

Совет: Если вы не хотите видеть раскройку автоматических фрагментов, можно отключить их видимость. Для этого па панели параметров инструмента Выделение фрагмента нажмите кнопку Скрыть автоматические фрагменты.

Но имейте ввиду, это не означает, что они не существуют. Фотошоп их просто скрыл, чтобы не отвлекать внимание. 

Каждый фрагмент получает свой номер, который можно увидеть в верхнем левом углу.

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

panel'_parametrov_instrumenta_Raskrojka_v_fotoshope

где:

  • Стиль Обычный — это рисование фрагмента любого размера, как рука ляжет.
  • Стиль Заданные пропорции — это рисование прямоугольника по заданным пропорциям. Например, если проставить значения ширины и высоты 1 и 1 соответственно, то получится квадрат. Если проставить ширину 1, а высоту 2, то получится, что высота прямоугольника в два раза больше его ширины. При этом размеры такого прямоугольника ничем не ограничены — он будет изменять в размерах только в соответствии с выставленными пропорциями.
  • Стиль Заданный размер позволяет указать фотошопу конкретные размеры необходимого фрагмента, например, 60 на 100 пикселей. Фотошоп создает рамочку заданных размеров, а вы, в свою очередь, уже размещаете ее в нужном месте на изображении.

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

Инструмент Выделение фрагмента

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

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

Двойной клик по фрагменты открывает диалоговое окно со свойствами:

dialogovoe_okno_parametry_fragmenta

На сколько мне известно, верстальщики не используют параметры URL, Цель, Текст сообщения и Альтернативный текст, поскольку данные значения пишутся в сам код во время верстки сайта. Может быть, это, опять же, наследство с тех времен, когда фотошоп только появился и сайты в интернете были очень примитивными. Их можно было нарисовать  в фотошопе, раскроить на фрагменты, добавить ссылки для отдельных картинок и сразу залить все в интернет, минуя сложные html-коды и каскадные таблицы стилей.

В нынешние времена нас, возможно, заинтересует параметры имя фрагмента (если надо его как-то выделить и отличить от остальных), а также изменение размеров ширины и высоты (два поля Ш и В предлагают ввести конкретные значения).

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

К важным свойствам инструмента Выделение фрагмента я бы отнес возможность выделить одновременно несколько фрагментов, поскольку данная задача является стартом для большинства других возможных махинаций. Чтобы выделить несколько фрагментов, удерживайте зажатой клавишу Shift и поочередно щелкайте на необходимые фрагменты, они должны выделиться оранжевой рамочкой (рамка активности).

Что теперь можно с ними сделать:

1. Объединить, то есть из нескольких фрагментов сделать один. Здесь есть одно НО. Помните я написал  про принцип действия раскройки? Так вот исключений не будет. Это означает, что, например, из трех фрагментов разных по размеру, после объединения будет один большой прямоугольник, который по ширине и высоте будет равен двум самым крайним границам рамок. Если непонятно, вот наглядный пример:

vydelenie_neskol'kih_fragmentov_raskrojki

ob#edinenie_fragmentov_raskrojki

Команда Объединить расположена в меню, которое вызывается нажатием правой кнопкой мыши на активном фрагменте:

menju_komandy_vydelenija_fragmenta

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

vyravnivanie_fragmentov_raskrojki

3. Удалить. Команда выбирается так же через меню правой кнопки мыши. Можно удалить как один так и несколько сразу фрагментов. Понятное дело, что пустого места не будет — фотошоп автоматически пересчитает и покажет другие границы автоматических фрагментов.

4. Кнопка Разделить открывает диалоговое окно, в котором можно выбрать на сколько частей по вертикале и горизонтале вы хотите разделить активные фрагменты. 

После того как все сделано, нужно сохранить изображение. Для этого нужно выбрать команду Сохранить для Web и устройств (Alt+Shift+Ctrl+S). Появится большущее диалоговое окно с дополнительными настройками для сохранения. Об этом окне и всех его параметрах я расскажу в новой статье.

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

Sohranit'_dlja_Web_i_ustrojstv

8 Комментарии

  1. Добрый день.
    Спасибо большое за статью.
    Жду новую статью о параметрах сохранения!)

  2. Алексей

    Спасибо, всё очень подробно! Не могу найти только ответа на вопрос: можно ли при созданных фрагментах воспользоваться функцией «Сохранить для веб и устройств» так, чтобы картинка сохранилась целиком, а не по частям?

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

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

    • Алексей

      Нашёл обходной путь: выделить всё, скопировать видимое (Ctrl+Shift+C), создать новый документ, и сохранить его для веб.

  3. Спасибо большое! из всех материалов в вебе только Ваша статья помогла приблизиться к пониманию !

  4. Денис, здравствуйте! Помогите найти кнопку в Photoshop CC(2015) или что-то другое, чтобы я могла разделить фотку. Спасибо

    • Здравствуйте, Ольга. Что Вы подразумеваете под «разделить»? Если раскройка, то кнопка должна быть в группе с «Кадрированием». У меня нет СС версии, поэтому скриншот не могу показать.

  5. Нарезка

    спасибо за доступность вашей информации) мои знания по фотошопу увеличились в разы)

Написать комментарий

Ваш E-mail адрес не будет опубликован. Обязательные поля отмечены звездочкой *

*