Инструменты раскройка и выделение фрагмента в фотошопе. Инструменты раскройка и выделение фрагмента в photoshop
Что научитесь делать, посмотрев это видео?
Вы научитесь работать с инструментом Рамка кадрирования и Раскройка. Узнаете, как с помощью программы Photoshop рационально сохранять изображения для интернета.
Описание видео:
В предыдущем уроке вы узнали, . В этом уроке перейдем к инструментам Рамка и Раскройка.
Рамка кадрирования – это очень простой в использовании инструмент. Для наглядного примера откроем какую-нибудь фотографию. Берете инструмент и протягиваете выделение, зажимая левую клавишу мыши. Отпустив мышку, вы увидите, что выделенная область остается в оригинальном цвете, а остальное изображение становится прозрачно-черного цвета. Если нажать клавишу Enter, то останется только тот участок в документе, который вы выделили.
Существуют следующие возможности этого инструмента:
- Можно вручную установить ширину и высоту выделения.
- Параметр Расширение нужно указывать таким же, как и расширение вашего рисунка.
- Кнопка Изображение показывает настоящие размеры данного изображения.
- Если вы подводите курсор к углам рамки, то он принимает вид стрелки, с помощью которой рамку можно корректировать. Если подводить курсор с внешней стороны угла, то стрелка становится изогнутой, и с её помощью рамку можно поворачивать. Внутри рамки есть центр вращения, его расположение можно менять. Изначально центр вращения находится в середине.
- У инструмента Рамка кадрирования есть опция Перспектива. Принцип её работы наглядно рассмотрен в видео.
Инструмент Раскройка используется для разрезания изображения на части. Для примера работать будем с графической шапкой для сайта. Поскольку изображения в интернете грузятся долго, а помощью инструмента Раскройка мы можем разрезать шапку на кусочки, сохранить каждую часть изображения отдельно. При загрузке эта шапка будет загружаться намного быстрее.
Берете инструмент, выделяете какую-то область. Размер выделенных фрагментов можно изменять. Затем нужно сохранить данный файл для интернета. Переходите в меню Файл и выбираете команду Сохранить для Web. Откроется окно для оптимизации, где можно задать параметры для каждого кусочка изображения.
Пусть в первом кусочке изображения находится текст, и нет рисунков. Так как изображения с текстом или схемами лучше всего сохранять в формате *.gif, то в настройках этого кусочка нужно указать формат gif и подобрать качество изображения.
Второй кусочек – это изображение, и вам нужно его сохранить в формате *.jpeg с высоким качеством.
Пусть третье изображение – это мерцающая кнопка. Её лучше сохранять в формате *.png.
Остальные кусочки изображения оставляете в формате *.jpeg, сохраняете настройки, указываете папку для хранения изображения, выбираете тип файла Html и изображения и кликаете кнопку Сохранить.
Находятся на ниже инструментов выделения. Инструмент Рамка позволяет кадрировать изображение — вырезать из него тот фрагмент, который Вам нужен. Для кадрирования кликаете мышью на один угол предполагаемого фрагмента и, удерживая клавишу мыши, передвигаете курсор по диагонали на другой угол. Затем отпускаете клавишу.
После этого на панели настроек Вы можете установить параметры отображения сетки кадрирования: нет сетки, правило одной трети, сетка.
Правило одной трети облегчает выбор кадрирования с точки зрения законов композиции, согласно которым ключевые элементы должны находиться либо на линиях сетки, либо на узловых точках сетки.
А сетка помогает выровнять изображение по вертикали, или горизонтали, например. выровнять заваленный горизонт.
Также на панели настроек можно выбрать цвет и непрозрачность отображения отсекаемой области.
Рамку кадрирования можно передвигать, изменять ее размер, или поворачивать. помещая курсор внутрь, на маркеры, или за пределами угловых маркеров.
Если у Вас появились пустые места на холсте, к примеру, после поворота холста, можно их выделить с помощью инструмента Лассо , и выполнить заливку с учетом содержимого.
Для этого выделяете пустые области. затем выбираете меню Редактировать — Выполнить заливку
, и выбираете команду С учетом содержимого
. Если результат получится не очень хорошим — эту операцию повторяете.
Заливку с учетом содержимого хорошо применять, если в изображении у Вас есть какой-либо лишний объект, и Вы его хотите убрать, например, какой-то кусок бумаги на траве. Выделяете этот участок с помощью инструмента Лассо , и выполняете данную операцию.
Если при кадрировании Вам нужно, чтобы получилось изображение определенного размера, выбираете инструмент Рамка , и вводите в панели настроек требуемую ширину и высоту. После этого выполняете кадрирование. Изображение, которое получится в результате, будет иметь именно те размеры, которые Вам нужны.
Также при кадрировании можно задавать разрешение. Это делать имеет смысл в том случае, если впоследствии Вы собираетесь печатать изображение.
Чтобы очистить настройки, нужно на панели настроек нажать кнопку Удалить .
Чтобы сохранить настройки, нужно нажать на стрелку раскрывающегося списка рядом с иконкой инструмента Рамка , эта иконка находится в левой части панели настроек, затем нажимаете на черную треугольную стрелку в круге. и выбираете Новый набор параметров для инструмента .
И эти настройки появятся в верхней строке выпадающего списка, их можно будет там всегда выбрать.
Если при использовании инструмента Рамка поставить в панели настроек галочку в чекбоксе Перспектива , то угловые маркеры можно будет передвигать независимо один от другого. И таким образом можно быстро исправлять заваленные на фотографиях объекты, ставить их прямо.
Инструмент Раскройка
Применяется для того, чтобы разрезать изображение на кусочки. Каждый фрагмент будет затем сохраняться, как отдельное изображение. Это нужно, например, вебдизайнерам, когда они делают изображение целого сайта. а затем разрезают на кусочки: на шапку, основную область, меню, подвал, и так далее.
Кроме того, разрезанная картинка быстрее загружается, потому что несколько картинок грузятся одновременно, и они имеют меньший вес. Даже шапку сайта можно разрезать на отдельные картинки, чтобы затем поставить их вместе, и она будет выглядеть, как единое целое.
Чтобы разрезать картинку, выбираете инструмент Раскройка , нажимаете на один угол изображения клавишей мыши, и протягиваете нажатой клавишей на другой угол по диагонали. Таким способом режете все изображение так, как Вам нужно, затем сохраняете их. Для сохранения переходите на инструмент Выделение фрагментов , выделяете фрагмент, выбираете в меню Файл — Сохранить для Web и устройств , и сохраняете фрагмент в нужном Вам формате. Так сохраняете все фрагменты изображения.
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Часто возникает необходимость разрезать какое-либо изображение на равные части. Например, при сублимационной печати на керамической плитке, подобная необходимость возникает постоянно. Сейчас я расскажу вам о том, как в программе Photoshop разрезать любую картинку
на одинаковые фрагменты.
Итак, представим, что я делаю в ванной комнате ремонт и решил часть стены оклеить кафельной плиткой с красивым изображением дельфинов. Панно у меня будет большим, поэтому качество изображения должно быть соответствующим.
Изображение выбрал, теперь нужно купить керамическую плитку для сублимационной печати. Я возьму плитку размером 150 х 150 мм. Значит разрезать изображение мне нужно будет также на части, каждая размером 150 х 150 мм.
Открываю изображение в Photoshop. Для начала, мне нужно обрезать картинку так, чтобы ее стороны были кратны 15 см (длина ребра плитки). Для этого я активирую инструмент "Рамка" и задам параметры - ширина 150 см, высота 90 см, разрешение 72 пикселя на дюйм.
Выделяем рамкой нужный участок изображения и нажимаем клавишу "Enter". Я обрежу картинку, "пожертвовав" ее нижней частью.
После обрезки изображения начну его делить на части. Активирую на панели задач инструмент "Раскройка".
Теперь кликаю по картинке правой кнопкой мыши и выбираю строку "Разделить фрагмент..."
В появившемся окошке ввожу параметры разделения изображения. Раз я обрезал картинку 150 х 90 см, то делю ее на 6 частей по горизонтали и 10 частей по вертикали.
Нажимаю "Enter". Теперь разрезанную картинку нужно сохранить. Для чего иду в меню Файл--Сохранить для Web и устройств...
В открывшемся окошке выставляю параметр "2 варианта". Формат изображения - Jpeg, качество - 100%.
Осталось каждый в отдельности распечатать на и в перевести на керамическую плитку. Подобное изображение очень стойкое, не боится воды и мыла, поэтому будет радовать вас долгие годы!
Надеюсь данный урок будет вам полезен и вы легко теперь сможете порезать изображение на равные части нужного размера.
На этом уроке мы с вами познакомимся с еще двумя очень интересными инструментами в программе Photoshop - инструмент РАСКРОЙКА и инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА вPhotoshop .
Научимся разрезать большие изображения на фрагменты для того, чтобы они быстрее грузились в интернете.
Итак, инструмент РАСКРОЙКА в Photoshop используется для разрезания изображения на части. Например, веб-дизайнеры используют этот инструмент довольно часто - они разрезают изображение, чтобы в дальнейшем оно быстрее грузилось в интернете.
Рассмотрим работу инструмента РАСКРОЙКА в Photoshop на примере моего сайта «Алабай Троян и мейн-куны ».
К примеру, мне нужно сделать шапку для сайта. Я подбираю изображение, подходящее по тематике к моему сайту и устанавливаю необходимый размер изображения.
Наше изображение-шапка будет грузиться в интернете очень долго. Чтобы загрузка нашего изображения происходила в интернете быстрее, мы можем с помощью инструмента РАСКРОЙКА в Photoshop разрезать изображение на кусочки и сохранить каждый кусочек отдельно. После чего, при загрузке, наша шапка будет моментально загружаться в интернете.
Берем инструмент РАСКРОЙКА и, зажав левую кнопку мыши, растягиваем на нашем изображении выделение:
После чего, отпускаем левую кнопку мыши:
Мы видим, что наше изображение разделилось на три фрагмента (см. рисунок выше). С помощью этого инструмента, если нам это нужно, можно выделить еще области и разделить шапку-изображение еще на несколько частей.
Если нам надо, то взяв инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА и щелкнув по любому фрагменту, мы можем изменить его размер, к примеру, растянуть:
Выделенный фрагмент в Photoshop имеет оранжевую рамку.
Теперь нам нужно сохранить этот файл для интернета. Для этого переходим вМЕНЮ-СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ . Выбрав данное сохрание у нас открывается окно оптимизации. В левой части окна мы выбираем фрагмент, который нам нужно настроить (щелкаем по нему мышкой, делая активным):
А в правой части окна мы поочередно можем задать параметры для каждого нашего фрагмента изображения:
Допустим, в первом фрагмете у нас присутствует какой нибудь текст и нет фотографии. Мы уже изучали в статье , что различные схемы, тексты, где нет плавных переходов цветов лучше всего сохранять в .gif
- они будут занимать меньше места.
А в правой части окна (см.рисунок выше) мы задаем формат .gif
(в красной рамочке) и подбираем качество изображения (в синей рамочке).
Если мы посмотрим в самый низ левой части окна, то увидим формат сохранения и итоговый размер фрагмента изображения.
В самом верху левой части окна имеется возможность просмотра изображения в двух, а также в четырех вариантах. Поэкспериментируйте сами.
Следующий фрагмент у нас может иметь только фотографию (без текста) - его лучше сохранять в .jpg
.
Статья форматы сохранения файлов в Photoshop поможет вам разобраться в чем удобнее сохранять тот или иной фрагмент.
После того, как мы настроили каждый из фрагментов изображения, нажимаем кнопку СОХРАНИТЬ . В открывшемся окне выбираем папку для сохранения нашего изображения.
Выбрав папку, устанавливаем тип файла (см. рисунок) - HTML и изображения
.
Если мы зайдем в папку на нашем компьютере, куда сохранили изображение, то увидим, что в ней находится файлик html , где наши изображения записаны в виде кода и папка images :
В папке images сохранены фрагменты изображения с выбранными нами настройками (см. рисунок ниже):
Давайте посмотрим наш html файлик с помощью блокнота / Как это сделать? Щелкаем правой кнопкой мыши по файлу html и выбираем ОТКРЫТЬ С ПОМОЩЬЮ - БЛОКНОТ :
На рисунке выше мы видим, что наши фрагменты (находятся в красных рамочках) закодировались.
Изображение прописано в виде таблички. Давайте, к примеру, поставим для border
(что означает толщина рамки) вместо 0
значение равное единице (показано в синей рамочке на рисунке выше) и сохраним измения. Затем перейдем в папку, куда мы первоначально все сохраняли и еще раз щелкнем правой кнопкой мыши по файлу html
и выберем ОТКРЫТЬ С ПОМОЩЬЮ - выбираем браузер, в котором работаем (Opera, Firefox и т.п.)
:
На рисунке выше мы видим, что наше изображение-шапка сохранилось в виде кусочков, на которые мы его разбивали ранее. Получается, что когда мы разместим это изображение в интернете, то фрагменты один за одним будут мгновенно подгружаться.
Если мы вернем значение 0 для border (толщина рамки), то эти рамочки исчезнут.
Вызываются горячей клавишей С.
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 (Раскройка по направляющим) — если перед раскройкой вы расставите направляющие, то при нажатии на эту кнопку изображение будет автоматически раскроено по этим направляющим. Этим инструментом часто пользуются для разделения элементов дизайна сайта. Он позволяет вырезать определенную область и добавить к ней ссылку, режим перехода по ссылке (в новом окне, в текущем окне и т.д.), текст картинки и фон фрагмента.