Как отменить раскройку в фотошопе

11.01.202311.01.2023 admin 0 Comments

Профессиональная ретушь в Photoshop: модель в бикини

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

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

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

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

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

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

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

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

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

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

— позволяет применять к рамке три варианта:

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

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

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

Если вы сделаете клик ПКМ при активном инструменте Раскройка

, то в контекстом меню вы найдёте одну интересную функцию:

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

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

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

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

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

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

Статью подготовил Amba

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

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

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

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

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

— незаменимые для верстальщиков сайтов.

Как рождается оформление сайта?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Принцип работы очень просто, для начала выберите инструмент Раскройка

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

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

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

» в которую всё благополучно сохраниться. В итоге вы получите примерно следующие:

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

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

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

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

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

2) Заданные пропорции

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

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

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

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

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

3) Ну и последний режим, это режим с заранее заданным размером

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

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

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

Это поле доступно в том случае, когда в Стиле выбран вариант Заданные пропорции или Заданный размер. В случае варианта Заданный размер значение, указанное в поле Ширина, определяет ширину фрагмента. При выборе варианта Заданные пропорции в поле Ширина указывается значение, устанавливающее отношение ширины фрагмента к его высоте.

— высота фрагмента. Это поле доступно в том случае, когда в Стиле выбран вариант Заданные пропорции или Заданный размер. В случае варианта Заданный размер значение, указанное в поле Высота, определяет высоту фрагмента. При выборе варианта Заданные пропорции в поле Высота указывается значение, устанавливающее отношение высоты фрагмента к его ширине.

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

На этом уроке мы с вами познакомимся с еще двумя очень интересными инструментами

в программе
Photoshop
— инструмент
РАСКРОЙКА
и
инструментВЫДЕЛЕНИЕ ФРАГМЕНТА
в
Photoshop
.

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

Итак, инструмент РАСКРОЙКА

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

Рассмотрим работу инструмента РАСКРОЙКА

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

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

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

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

Берем инструмент РАСКРОЙКА

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

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

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

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

Выделенный фрагмент в Photoshop

имеет оранжевую рамку.

Теперь нам нужно сохранить этот файл для интернета. Для этого переходим в МЕНЮ-СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ

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

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

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

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

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

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

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

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

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

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

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

, где наши изображения записаны в виде кода и папка
images
:

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

Давайте посмотрим наш html

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

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

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

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

Если мы вернем значение 0

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

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

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

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

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

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

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

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

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

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

Источник

Как разрезать картинку в фотошопе через раскройку

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

Как включить линейку в фотошопе

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

Как разрезать картинку в фотошопе с помощью раскройки

После того, как вы сделали разметку на картинке выбираете инструмент раскройка.

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

Как сохранить части картинки в одну папку

Согласитесь, что разрезанные части одной картинки удобнее всего сохранять в одну папку для дальнейшей работы. Для этого вы заходите в раздел Файл — Сохранить для Web (для виндовс) и Файл-Экспортировать Сохранить для Web (для мак).

Уменьшите раскроенную область для наглядности раскройки изображения на части. Выбираете набор PNG 24 и нажимаете на кнопку Сохранить.

Сохраняем раскроенные объекты в одну папку в нужное место на своем компьютере и применяете изображения по назначению.

Источник

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

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

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

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

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

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

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

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

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

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

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