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

Инструмент «Раскройка» в фотообработке не применяется. Этот инструмент применяется при раскройке нарисованного веб-дизайнером шаблона веб-страницы на фрагменты, из которых верстальщик собирает шаблон будущего веб-сайта.

Инструмент «Рамка» (C)

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

Также необходимо выбрать величину разрешения: пикс/дюйм или пикс/см.

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

При кадрировании изображений можно использовать опцию «1/3» (правило третей) в меню панели параметров инструмента «Рамка», см. скриншот ниже. Это очень удобно, например, при кадрировании крупноплановых портретов, см. фото выше (справа).

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

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

Если при вращении выделенной области удерживать нажатой клавишу «Shift», вращение области будет фиксироваться под определенными углами в шесть шагов. Это удобно когда необходимо установить строго вертикальное, горизонтальное положение области выделения, или зафиксировать область под определенным углом. Точку оси вращения можно перетаскивать мышкой, или нажав клавишу «Alt», - кликнуть мышкой внутри выделенной области в необходимой точке вращения.

Инструмент «Раскройка» (C)

Инструмент Photoshop «Раскройка» , быстрый вызов инструмента - латинская буква «C».
Как уже было сказано вначале статьи, инструмент «Раскройка» в основном используют графические дизайнеры, разработчики разного рода приложений, например, веб-дизайнер, верстальщик использует «Раскройку» для нарезки на фрагменты исходного изображения (графического макета сайта), для создания шаблона веб-сайта.

Работа данного инструмента проста: - выделяем нужные фрагменты на изображении (макете), после этого оптимизируем нарезанные файлы и сохраняем для WEB, см. видеоролик справа.

Инструмент «Пипетка» (I)

Инструмент Photoshop «Пипетка» , быстрый вызов инструмента - латинская буква «I». Этим инструментом мы завершаем знакомство с инструментами первой логической группы.
В следующей статье мы продолжим знакомиться с инструментами Фотошоп начиная с второй логической группы панели инструментов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здравствуй товарищ! Следующий инструмент в нашем списке — Раскройка . Не имеет никакого отношения к шитью, зато к 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 специально для .

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

45296 ,

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


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

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

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

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

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

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

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

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