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

45288 ,

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

На самом деле, всё это делается элементарно. В Adobe Photoshop для этих целей предусмотрен специальный инструмент . Он позволяет разрезать целое изображение на прямоугольные части и сохранять их в виде отдельных изображений всего несколькими кликами мыши. Так как является вложенным элементом панели инструментов, начинающие пользователи его попросту не видят. Находится он в том же меню, что и «Рамка» .

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

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

А теперь самое главное. Чтобы сохранить изображение в виде отдельных частей, в главном меню нужно выбирать опцию не «Сохранить как» , а .

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

После этого жмём кнопку и указываем режим сохранения.

Доступны три режима: «Только изображения» , «HTML и изображения» и «Только HTML» . Если вы не собираетесь создавать HTML-страничку, можете оставить всё по умолчанию.

Все выделенные фрагменты будут сохранены в отдельную папку «images» в указанном вами месте.

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

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

Итак, инструмент РАСКРОЙКА в Photoshop используется для разрезания изображения на части. Например, веб-дизайнеры используют этот инструмент довольно часто - они разрезают изображение, чтобы в дальнейшем оно быстрее грузилось в интернете.

Рассмотрим работу инструмента РАСКРОЙКА в Photoshop на примере моего сайта «Алабай Троян и мейн-куны ».

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

Наше изображение-шапка будет грузиться в интернете очень долго. Чтобы загрузка нашего изображения происходила в интернете быстрее, мы можем с помощью инструмента РАСКРОЙКА в Photoshop разрезать изображение на кусочки и сохранить каждый кусочек отдельно. После чего, при загрузке, наша шапка будет моментально загружаться в интернете.

Берем инструмент РАСКРОЙКА и, зажав левую кнопку мыши, растягиваем на нашем изображении выделение:

После чего, отпускаем левую кнопку мыши:

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

Если нам надо, то взяв инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА и щелкнув по любому фрагменту, мы можем изменить его размер, к примеру, растянуть:

Выделенный фрагмент в Photoshop имеет оранжевую рамку.

Теперь нам нужно сохранить этот файл для интернета. Для этого переходим вМЕНЮ-СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ . Выбрав данное сохрание у нас открывается окно оптимизации. В левой части окна мы выбираем фрагмент, который нам нужно настроить (щелкаем по нему мышкой, делая активным):

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

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

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

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

Следующий фрагмент у нас может иметь только фотографию (без текста) - его лучше сохранять в .jpg .
Статья форматы сохранения файлов в Photoshop поможет вам разобраться в чем удобнее сохранять тот или иной фрагмент.

После того, как мы настроили каждый из фрагментов изображения, нажимаем кнопку СОХРАНИТЬ . В открывшемся окне выбираем папку для сохранения нашего изображения.

Выбрав папку, устанавливаем тип файла (см. рисунок) - HTML и изображения .

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

В папке images сохранены фрагменты изображения с выбранными нами настройками (см. рисунок ниже):

Давайте посмотрим наш html файлик с помощью блокнота / Как это сделать? Щелкаем правой кнопкой мыши по файлу html и выбираем ОТКРЫТЬ С ПОМОЩЬЮ - БЛОКНОТ :

На рисунке выше мы видим, что наши фрагменты (находятся в красных рамочках) закодировались.
Изображение прописано в виде таблички. Давайте, к примеру, поставим для border (что означает толщина рамки) вместо 0 значение равное единице (показано в синей рамочке на рисунке выше) и сохраним измения. Затем перейдем в папку, куда мы первоначально все сохраняли и еще раз щелкнем правой кнопкой мыши по файлу html и выберем ОТКРЫТЬ С ПОМОЩЬЮ - выбираем браузер, в котором работаем (Opera, Firefox и т.п.) :

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

Если мы вернем значение 0 для border (толщина рамки), то эти рамочки исчезнут.

У нас есть макет сайта, в формате PSD, мы хотим разрезать (раскроить) его на фрагменты для дальнейшей HTML верстки сайта.

Для этого мы будем использовать программу Photoshop

Шаг 1. Открытие PSD макета в Photoshop для раскройки

PSD - макет сайта для PS +готовые изображения, если у вас нет PS, либо вам лень это делать самим.

Разархивируйте файлы с архива в рабочую папку, если вы этого еще не сделали. Откройте файл с названием home-o.psd. Вид интерфейса самой программы Photoshop у вас будет отличаться от моего, так как у нас могут быть разные версии программы, и скорее всего сами окна программы у вас расположены, так как вам удобней.

На скриншоте показано расположение моего интерфейса окна Photoshop

Шаг 2. Инструмент раскройка

Найдите и выберите в панели инструментов (ToolBox) нужный нам инструмент «Раскройка» или он может называться «Нож» , в зависимости от вашей версии программы. Находится рядом с инструментом «Рамка» или «Crop» в английской версии Photoshop.

Инструмент "Раскройка"

Шаг 3. Разрезаем PSD макет на фрагменты

Пользоваться инструментом "Раскройка" очень просто, всё что вам необходимо, это выделить все необходимые вам фрагменты шаблона для последующей верстки. Но помните золотое правило: «7 раз отмерь, один раз отрежь».

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

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

Выделение мелких элементов шаблона

Шаг 4. Сохраняем выделенные фрагменты шаблона

Перед тем, как перейти к сохранению фрагментов шаблона в виде кусочков изображений, проверьте ещё раз, все ли нужные вам элементы были выделены. Если да, перейдите в раздел Файл - Сохранить для Web и устройств , или воспользуйтесь комбинацией клавиш Alt+Shift+Ctrl+S (Если хватит рук)

Сохранение выделенных фрагментов

Шаг 5. Настройка сохраняемых фрагментов

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

Параметры сохранения выделенных фрагментов

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

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

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

Шаг 6. Сохранение изображений в папку

Когда вы выбрали все необходимые параметры, можно нажать «Сохранить» , эта кнопка находится справа снизу. Именно «Сохранить» , а не «Готово»! Дело в том, что этот инструмент позволяет нам сделать сразу множество вариантов раскроенного шаблона, на случай, если выбранные параметры качества нас не удовлетворяют, мы можем вернуться, произвести изменения и сохранить файлы заново.

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

После того, как мы указали путь к папке в которую мы хотим сохранить наши нарезанные фрагменты, обратите внимание на поле «Формат» Photoshop позволяет создавать налету не только простые фрагменты, но и сразу верстку, но поверьте мне на слово, то что у вас получится в результате автоматической верстки, вам не понравиться. По этому проследите, что в качестве выбранного форматы было установлено значение «Только изображения»

А в поле «Фрагменты» должно стоять «Все фрагменты»

И только после этого всего можно нажимать «Сохранить».

Вам еще может выдать вот такое предупреждение.

Игнорируйте его!

Шаг 7. Удаляем лишнее, оставляем нужные фрагменты макета

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

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

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

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

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

А сетка помогает выровнять изображение по вертикали, или горизонтали, например. выровнять заваленный горизонт.

Также на панели настроек можно выбрать цвет и непрозрачность отображения отсекаемой области.

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

Если у Вас появились пустые места на холсте, к примеру, после поворота холста, можно их выделить с помощью инструмента Лассо , и выполнить заливку с учетом содержимого.

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

Заливку с учетом содержимого хорошо применять, если в изображении у Вас есть какой-либо лишний объект, и Вы его хотите убрать, например, какой-то кусок бумаги на траве. Выделяете этот участок с помощью инструмента Лассо , и выполняете данную операцию.

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

Также при кадрировании можно задавать разрешение. Это делать имеет смысл в том случае, если впоследствии Вы собираетесь печатать изображение.

Чтобы очистить настройки, нужно на панели настроек нажать кнопку Удалить .

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

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

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

Инструмент Раскройка

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

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

Чтобы разрезать картинку, выбираете инструмент Раскройка , нажимаете на один угол изображения клавишей мыши, и протягиваете нажатой клавишей на другой угол по диагонали. Таким способом режете все изображение так, как Вам нужно, затем сохраняете их. Для сохранения переходите на инструмент Выделение фрагментов , выделяете фрагмент, выбираете в меню Файл — Сохранить для Web и устройств , и сохраняете фрагмент в нужном Вам формате. Так сохраняете все фрагменты изображения.

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже: