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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Открываю изображение в Photoshop. Для начала, мне нужно обрезать картинку так, чтобы ее стороны были кратны 15 см (длина ребра плитки). Для этого я активирую инструмент "Рамка" и задам параметры - ширина 150 см, высота 90 см, разрешение 72 пикселя на дюйм.

Выделяем рамкой нужный участок изображения и нажимаем клавишу "Enter". Я обрежу картинку, "пожертвовав" ее нижней частью.

После обрезки изображения начну его делить на части. Активирую на панели задач инструмент "Раскройка".

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

В появившемся окошке ввожу параметры разделения изображения. Раз я обрезал картинку 150 х 90 см, то делю ее на 6 частей по горизонтали и 10 частей по вертикали.

Нажимаю "Enter". Теперь разрезанную картинку нужно сохранить. Для чего иду в меню Файл--Сохранить для Web и устройств...

В открывшемся окошке выставляю параметр "2 варианта". Формат изображения - Jpeg, качество - 100%.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

45296 ,

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

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

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

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

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

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

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

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

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

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

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