Как сделать раскройку в фотошопе. Инструменты раскройка и выделение фрагмента в photoshop

Здравствуй товарищ! Следующий инструмент в нашем списке — Раскройка . Не имеет никакого отношения к шитью, зато к web-дизайну имеет непосредственное отношение. Раскройка здорово упрощает жизнь, позволяя быстренько разрезать макет на составляющие для вёрстки. И так, начнём уже рассматривать данный инструмент!

Раскройка в фотошопе

Принцип работы

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

Ну а теперь самая основная часть вопроса — сохранение. Тут не прокатит обычное + . Тут нужно магическое сочетании клавиш +++ (Файл, Сохранить для web )

После того как вы нажмёте эти 4 клавиши, откроется окошко:

Собственно сейчас вы должны выбрать нужные вам фрагменты, которые вы выделили ранее, просто выделите всё, протянув мылкой с зажатой ЛКМ, а далее жмите клавишу «Сохранить». Осталось просто выбрать папку, куда вы будите сохранять фрагменты. В любом случае фотошоп создаст свою собственную папку «image » в которую всё благополучно сохраниться. В итоге вы получите примерно следующие:

Как вы заметили, имя файла состоит из двух частей, первая часть, до символа «_» (нижние подчёркивание) — это основное название картинки, ну а вторая часть, та что после «_» — это номер фрагмента. Ничего сложного нет, совершенно. Теперь картинки готовы к вёрстке. Рассмотрим подробнее некоторые аспекты.

Режимы работы

Раскройка позволяете разрезать цельные крупные графические элементы на фрагменты. Это делается в первую очередь для удобства верстальщика и для быстроты работы сайта. Ну а теперь давайте разберёмся с настройками и принципами работы. Обо всём по порядку.

Режимы работы инструмента «раскройка»

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

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

2) Заданные пропорции . Данный режим работы инстремента Раскройка позволяет вам создавать фрагменты с задаными пропорциями, например.

1:1 – это значит, что будут получаться равные по величине ШИРИНЫ и ДЛИНА, иными словами, вы получите квадрат

2:1 – ШИРИНЫ будет в два раза больше ДЛИНЫ

1:2 – ШИРИНА будет в два раза меньше ДЛИНЫ

Аналогична и для любых других пропорций. например 100500:200600 (c)

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

Разделить фрагмент

Если вы сделаете клик ПКМ при активном инструменте Раскройка , то в контекстом меню вы найдёте одну интересную функцию:

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

Настройки «разделить фрагмент»

И так, тут мы видим разные режимы. Рассмотрим всё по порядку.

1. Картинка будет поделена на 7 (или любое другое число) фрагментом, причём они будут равны между собой.
2. Картинка будет поделена на фрагменты размером 65 пикселей (или любое другое число), причём если не будут хватать, фрагмент будет неполный.
3. Пункт (1) только по вертикали
4. Пункт (2) только по вертикали

А теперь посмотрим, как это выглядит:

Видно вертикальное, горизонтальное и совмещенное (когда стоят обе галочки).

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

Статью подготовил Amba специально для .

Если вы хотите использовать наши материалы - пожалуйста, у нас всё для людей, но мы были бы очень признательны, если вы оставите маленькую ссылочку на наш сайт, или на эту статью у себя. Заранее спасибо!

Вызываются горячей клавишей С.

Crop Tool (Рамка или Обрезка)

Обрезает изображение до указанной области. Аналог — любое прямоугольное выделение и команда Crop (Кадрирование) из меню Image (Изображение).

Чтобы обрезать изображение, нужно выделить область, которую необходимо оставить, затем нажать на клавишу Enter — все лишнее будет отброшено.

По умолчанию все текстовые поля параметров инструмента Рамка являются пустыми, в этом случае рамка кадрирования имеет 8 маркеров: 4 угловых и 4 центральных (на серединах сторон). Поэтому можно изменять ширину и высоту рамки независимо друг от друга. А когда текстовые поля заполнены, рамка лишается 4 маркеров, расположенных на серединах ее сторон. В этом случае можно изменять только одновременно ее ширину и высоту.

Параметры до создания области :

Параметры после создания области :

• Cropped Area (Отсеченная область) . Определяет, что делать с полученной после обрезки областью изображения. Есть два варианта:
• Hide (Спрятать) — позволяет сохранить в файле области изображения, не попавшие в рамку кадрирования. Чтобы их увидеть, необходимо просто перетащить изображение инструментом Move (Перемещение) .
• Delete (Удалить) — установлен по умолчанию, в этом случае отсеченные области удаляются из файла.
• Crop Guide Overlay (Обрезать наложение направляющей) — позволяет применять к рамке три варианта:
• None (Нет) — отображает рамку кадрирования без направляющих в ней.
• Rule of Thirds (Правило 1/3) — направляющие делят стороны рамки кадрирования на три равные части.
• Grid (Сетка) — отображает фиксированные направляющие, расстояние между которыми зависит от размера рамки.
• Shield (Экран) — затеняет область изображения, которая будет удалена в процессе кадрирования. Также можно определить дополнительные параметры этого затенения:
• Color (Цвет) — выбор цвета затенения, по умолчанию используется черный цвет.
• Opacity (Непрозрачность) — плотность затенения, по умолчанию используется 75%.
• Perspective (Перспектива) — позволяет применять эффект перспективы к кадрируемому изображению, по умолчанию выключен.

Slice Tool (Раскройка)

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

Параметры :

• Style (Стиль) — режим выделения:
• Normal (Обычный) — обычный режим выделения.
• Constrained Aspect (Заданные пропорции) служит для определения необходимых пропорций (отношения высоты и ширины), можно вводить и дробные значения.
• Fixed Size (Заданный размер) служит для установки конкретных размеров выделения в пикселах.
• Width (Ширина) — ширина фрагмента. Это поле доступно в том случае, когда в Стиле выбран вариант Заданные пропорции или Заданный размер. В случае варианта Заданный размер значение, указанное в поле Ширина, определяет ширину фрагмента. При выборе варианта Заданные пропорции в поле Ширина указывается значение, устанавливающее отношение ширины фрагмента к его высоте.
• Height (Высота) — высота фрагмента. Это поле доступно в том случае, когда в Стиле выбран вариант Заданные пропорции или Заданный размер. В случае варианта Заданный размер значение, указанное в поле Высота, определяет высоту фрагмента. При выборе варианта Заданные пропорции в поле Высота указывается значение, устанавливающее отношение высоты фрагмента к его ширине.
• Slices From Guides (Раскройка по направляющим) — если перед раскройкой вы расставите направляющие, то при нажатии на эту кнопку изображение будет автоматически раскроено по этим направляющим. Этим инструментом часто пользуются для разделения элементов дизайна сайта. Он позволяет вырезать определенную область и добавить к ней ссылку, режим перехода по ссылке (в новом окне, в текущем окне и т.д.), текст картинки и фон фрагмента.

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

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

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

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

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

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

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

Принцип действия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сохранить только один фрагмент из всех, что были созданы

Раскроив изображение на множество частей, вы решили сохранить только один фрагмент? Хорошо! Фотошоп может это сделать.

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

Для этого нужно перейти в режим: Файл — . В этом режиме выберите в левой части инструмент Выделение фрагмента , затем кликните по нужному участку изображения. Этот участок станет активным, то есть будет выделяться более насыщенным цветом. Затем нажмите кнопку Сохранить .

(Нажмите, чтобы увеличить)

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

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

Затем правильно завершим начатое, а именно: в группе Формат установите Только изображения , в Настройках — Фоновое изображение . Не забудьте выбрать папку для сохранения и, по необходимости, задать имя файлу.

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

Что научитесь делать, посмотрев это видео?

Вы научитесь работать с инструментом Рамка кадрирования и Раскройка. Узнаете, как с помощью программы Photoshop рационально сохранять изображения для интернета.

Описание видео:

В предыдущем уроке вы узнали, . В этом уроке перейдем к инструментам Рамка и Раскройка.

Рамка кадрирования – это очень простой в использовании инструмент. Для наглядного примера откроем какую-нибудь фотографию. Берете инструмент и протягиваете выделение, зажимая левую клавишу мыши. Отпустив мышку, вы увидите, что выделенная область остается в оригинальном цвете, а остальное изображение становится прозрачно-черного цвета. Если нажать клавишу Enter, то останется только тот участок в документе, который вы выделили.

Существуют следующие возможности этого инструмента:

1. Можно вручную установить ширину и высоту выделения.
2. Параметр Расширение нужно указывать таким же, как и расширение вашего рисунка.
3. Кнопка Изображение показывает настоящие размеры данного изображения.
4. Если вы подводите курсор к углам рамки, то он принимает вид стрелки, с помощью которой рамку можно корректировать. Если подводить курсор с внешней стороны угла, то стрелка становится изогнутой, и с её помощью рамку можно поворачивать. Внутри рамки есть центр вращения, его расположение можно менять. Изначально центр вращения находится в середине.
5. У инструмента Рамка кадрирования есть опция Перспектива. Принцип её работы наглядно рассмотрен в видео.

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

Берете инструмент, выделяете какую-то область. Размер выделенных фрагментов можно изменять. Затем нужно сохранить данный файл для интернета. Переходите в меню Файл и выбираете команду Сохранить для Web. Откроется окно для оптимизации, где можно задать параметры для каждого кусочка изображения.

Пусть в первом кусочке изображения находится текст, и нет рисунков. Так как изображения с текстом или схемами лучше всего сохранять в формате *.gif, то в настройках этого кусочка нужно указать формат gif и подобрать качество изображения.

Второй кусочек – это изображение, и вам нужно его сохранить в формате *.jpeg с высоким качеством.

Пусть третье изображение – это мерцающая кнопка. Её лучше сохранять в формате *.png.

Остальные кусочки изображения оставляете в формате *.jpeg, сохраняете настройки, указываете папку для хранения изображения, выбираете тип файла Html и изображения и кликаете кнопку Сохранить.

На этом уроке мы с вами познакомимся с еще двумя очень интересными инструментами в программе Photoshop - инструмент РАСКРОЙКА и инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА вPhotoshop .

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