Находятся на ниже инструментов выделения. Инструмент Рамка позволяет кадрировать изображение — вырезать из него тот фрагмент, который Вам нужен. Для кадрирования кликаете мышью на один угол предполагаемого фрагмента и, удерживая клавишу мыши, передвигаете курсор по диагонали на другой угол. Затем отпускаете клавишу.
После этого на панели настроек Вы можете установить параметры отображения сетки кадрирования: нет сетки, правило одной трети, сетка.
Правило одной трети облегчает выбор кадрирования с точки зрения законов композиции, согласно которым ключевые элементы должны находиться либо на линиях сетки, либо на узловых точках сетки.
А сетка помогает выровнять изображение по вертикали, или горизонтали, например. выровнять заваленный горизонт.
Также на панели настроек можно выбрать цвет и непрозрачность отображения отсекаемой области.
Рамку кадрирования можно передвигать, изменять ее размер, или поворачивать. помещая курсор внутрь, на маркеры, или за пределами угловых маркеров.
Если у Вас появились пустые места на холсте, к примеру, после поворота холста, можно их выделить с помощью инструмента Лассо , и выполнить заливку с учетом содержимого.
Для этого выделяете пустые области. затем выбираете меню Редактировать — Выполнить заливку
, и выбираете команду С учетом содержимого
. Если результат получится не очень хорошим — эту операцию повторяете.
Заливку с учетом содержимого хорошо применять, если в изображении у Вас есть какой-либо лишний объект, и Вы его хотите убрать, например, какой-то кусок бумаги на траве. Выделяете этот участок с помощью инструмента Лассо , и выполняете данную операцию.
Если при кадрировании Вам нужно, чтобы получилось изображение определенного размера, выбираете инструмент Рамка , и вводите в панели настроек требуемую ширину и высоту. После этого выполняете кадрирование. Изображение, которое получится в результате, будет иметь именно те размеры, которые Вам нужны.
Также при кадрировании можно задавать разрешение. Это делать имеет смысл в том случае, если впоследствии Вы собираетесь печатать изображение.
Чтобы очистить настройки, нужно на панели настроек нажать кнопку Удалить .
Чтобы сохранить настройки, нужно нажать на стрелку раскрывающегося списка рядом с иконкой инструмента Рамка , эта иконка находится в левой части панели настроек, затем нажимаете на черную треугольную стрелку в круге. и выбираете Новый набор параметров для инструмента .
И эти настройки появятся в верхней строке выпадающего списка, их можно будет там всегда выбрать.
Если при использовании инструмента Рамка поставить в панели настроек галочку в чекбоксе Перспектива , то угловые маркеры можно будет передвигать независимо один от другого. И таким образом можно быстро исправлять заваленные на фотографиях объекты, ставить их прямо.
Инструмент Раскройка
Применяется для того, чтобы разрезать изображение на кусочки. Каждый фрагмент будет затем сохраняться, как отдельное изображение. Это нужно, например, вебдизайнерам, когда они делают изображение целого сайта. а затем разрезают на кусочки: на шапку, основную область, меню, подвал, и так далее.
Кроме того, разрезанная картинка быстрее загружается, потому что несколько картинок грузятся одновременно, и они имеют меньший вес. Даже шапку сайта можно разрезать на отдельные картинки, чтобы затем поставить их вместе, и она будет выглядеть, как единое целое.
Чтобы разрезать картинку, выбираете инструмент Раскройка , нажимаете на один угол изображения клавишей мыши, и протягиваете нажатой клавишей на другой угол по диагонали. Таким способом режете все изображение так, как Вам нужно, затем сохраняете их. Для сохранения переходите на инструмент Выделение фрагментов , выделяете фрагмент, выбираете в меню Файл — Сохранить для Web и устройств , и сохраняете фрагмент в нужном Вам формате. Так сохраняете все фрагменты изображения.
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
На этом уроке мы с вами познакомимся с еще двумя очень интересными инструментами в программе Photoshop — инструмент РАСКРОЙКА и инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА в Photoshop .
Научимся разрезать большие изображения на фрагменты для того, чтобы они быстрее грузились в интернете.
Итак, инструмент РАСКРОЙКА в Photoshop используется для разрезания изображения на части. Например, веб-дизайнеры используют этот инструмент довольно часто — они разрезают изображение, чтобы в дальнейшем оно быстрее грузилось в интернете.
Рассмотрим работу инструмента РАСКРОЙКА в Photoshop на примере моего сайта «Алабай Троян и мейн-куны «.
К примеру, мне нужно сделать шапку для сайта. Я подбираю изображение, подходящее по тематике к моему сайту и устанавливаю необходимый размер изображения.
Наше изображение-шапка будет грузиться в интернете очень долго. Чтобы загрузка нашего изображения происходила в интернете быстрее, мы можем с помощью инструмента РАСКРОЙКА в Photoshop разрезать изображение на кусочки и сохранить каждый кусочек отдельно. После чего, при загрузке, наша шапка будет моментально загружаться в интернете.
Берем инструмент РАСКРОЙКА и, зажав левую кнопку мыши, растягиваем на нашем изображении выделение:
После чего, отпускаем левую кнопку мыши:
Мы видим, что наше изображение разделилось на три фрагмента (см. рисунок выше). С помощью этого инструмента, если нам это нужно, можно выделить еще области и разделить шапку-изображение еще на несколько частей.
Если нам надо, то взяв инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА и щелкнув по любому фрагменту, мы можем изменить его размер, к примеру, растянуть:
Выделенный фрагмент в Photoshop имеет оранжевую рамку.
Теперь нам нужно сохранить этот файл для интернета. Для этого переходим в МЕНЮ-СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ . Выбрав данное сохрание у нас открывается окно оптимизации. В левой части окна мы выбираем фрагмент, который нам нужно настроить (щелкаем по нему мышкой, делая активным):
А в правой части окна мы поочередно можем задать параметры для каждого нашего фрагмента изображения:
Допустим, в первом фрагмете у нас присутствует какой нибудь текст и нет фотографии. Мы уже изучали в статье , что различные схемы, тексты, где нет плавных переходов цветов лучше всего сохранять в .gif
— они будут занимать меньше места.
А в правой части окна (см.рисунок выше) мы задаем формат .gif
(в красной рамочке) и подбираем качество изображения (в синей рамочке).
Если мы посмотрим в самый низ левой части окна, то увидим формат сохранения и итоговый размер фрагмента изображения.
В самом верху левой части окна имеется возможность просмотра изображения в двух, а также в четырех вариантах. Поэкспериментируйте сами.
Следующий фрагмент у нас может иметь только фотографию (без текста) — его лучше сохранять в .jpg
.
Статья поможет вам разобраться в чем удобнее сохранять тот или иной фрагмент.
После того, как мы настроили каждый из фрагментов изображения, нажимаем кнопку СОХРАНИТЬ . В открывшемся окне выбираем папку для сохранения нашего изображения.
Выбрав папку, устанавливаем тип файла (см. рисунок) — HTML и изображения
.
Если мы зайдем в папку на нашем компьютере, куда сохранили изображение, то увидим, что в ней находится файлик html , где наши изображения записаны в виде кода и папка images :
В папке images сохранены фрагменты изображения с выбранными нами настройками (см. рисунок ниже):
Давайте посмотрим наш html файлик с помощью блокнота / Как это сделать? Щелкаем правой кнопкой мыши по файлу html и выбираем ОТКРЫТЬ С ПОМОЩЬЮ — БЛОКНОТ :
На рисунке выше мы видим, что наши фрагменты (находятся в красных рамочках) закодировались.
Изображение прописано в виде таблички. Давайте, к примеру, поставим для border
(что означает толщина рамки) вместо 0
значение равное единице (показано в синей рамочке на рисунке выше) и сохраним измения. Затем перейдем в папку, куда мы первоначально все сохраняли и еще раз щелкнем правой кнопкой мыши по файлу html
и выберем ОТКРЫТЬ С ПОМОЩЬЮ — выбираем браузер, в котором работаем (Opera, Firefox и т.п.)
:
На рисунке выше мы видим, что наше изображение-шапка сохранилось в виде кусочков, на которые мы его разбивали ранее. Получается, что когда мы разместим это изображение в интернете, то фрагменты один за одним будут мгновенно подгружаться.
Если мы вернем значение 0 для border (толщина рамки), то эти рамочки исчезнут.
Фотошоп с самого начала своего существования обладает рядом инструментов, необходимых для веб-мастеров и сайтостроителей . Например, по умолчанию даже в самых свежих версиях программы установлены, так скажем, «древние» наборы (в основном их использовали для создания веб-графики и кнопок). Так вот, среди этих инструментов центральное место занимают Раскройка и Выделение фрагмента — незаменимые для верстальщиков сайтов.
Как рождается оформление сайта? Сначала рисуется дизайн-макет будущего сайта (как правило, его рисуют в фотошопе). В этом макете рисуют все: шапку сайта, логотип, меню, блоки с информацией и все остальное. Затем верстальщик берет инструмент Раскройка и разрезает этот макет на отдельные фрагменты. Для чего это надо? Каждый фрагмент сайта должен работать, а за работу отвечает код. Поэтому необходимо разделить макет на небольшие части и для каждой из них будет прописан свой код, чтобы в итоге потом на сайте все работало, нажималось, мерцало и тому подобное.
По большому счету, инструмент Раскройка нужен именно для этой цели. Инструмент Выделение фрагмента — это вспомогательная задача, которая позволяет работать с уже нарезанными фрагментами. Далее в этой статье я распишу все подробнее.
Как работает инструмент Раскройка
Инструмент Раскройка делит изображение на отдельные фрагменты, которые отделяются от изображения после его сохранения.
По своему принципу использования он напоминает . Нужно, всего навсего, начертить прямоугольную область вокруг фрагмента изображения, который нужно отделить. Посмотрите как это выглядит на деле:
Желтой стрелкой я указал на фрагмент, который я создал. Синими стрелками помечены границы фрагментов, которые создал фотошоп.
Принцип действия
Все фрагменты обязательно должны быть прямоугольными. Поэтому, выбрав фрагмент посередине изображения, фотошоп автоматические вычислит как наилучшим образом раскроить изображение на прямоугольники, чтобы у вас получился желаемый фрагмент.
Если вы не хотите видеть раскройку автоматических фрагментов, можно отключить их видимость. Для этого на панели параметров инструмента Выделение фрагмента нажмите кнопку Скрыть автоматические фрагменты .
Но имейте ввиду, это не означает, что они не существуют. Фотошоп их просто скрыл, чтобы не отвлекать внимание.
Каждый фрагмент получает свой номер, который можно увидеть в верхнем левом углу.
На самом деле, это очень простой инструмент, у которого нет никаких особенных дополнительных опций. Его главная задача выделить прямоугольный фрагмент . На панели параметров можно выбрать следующие опции:
- Стиль Обычный — это рисование фрагмента любого размера, как рука ляжет.
- Стиль Заданные пропорции — это рисование прямоугольника по заданным пропорциям. Например, если проставить значения ширины и высоты 1 и 1 соответственно, то получится квадрат. Если проставить ширину 1, а высоту 2, то получится, что высота прямоугольника в два раза больше его ширины. При этом размеры такого прямоугольника ничем не ограничены — он будет изменять в размерах только в соответствии с выставленными пропорциями.
- Стиль Заданный размер позволяет указать фотошопу конкретные размеры необходимого фрагмента, например, 60 на 100 пикселей. Фотошоп создает рамочку заданных размеров, а вы, в свою очередь, уже размещаете ее в нужном месте на изображении.
Обратите внимание на кнопку Фрагменты по направляющим : если вы использовали горизонтальные и вертикальные направляющие, то данная кнопка станет активной. Нажав на нее, фотошоп разделит изображение по границам этих направляющих. О том, что такое направляющие в фотошопе, читайте в .
Инструмент Выделение фрагмента
Раскроив изображение на фрагменты, вам вдруг понадобилось отредактировать, например, размеры одного из них. Для этого выберите инструмент Выделение фрагмента .
Активный фрагмент отображается оранжевой рамкой. На углах и сторонах этой рамочки появляются квадратные маркеры, за которые можно потянуть, чтобы изменить размер.
Двойной клик открывает диалоговое окно со свойствами:
Насколько мне известно, верстальщики не используют параметры URL, Цель, Текст сообщения и Альтернативный текст, поскольку данные значения пишутся в сам код во время верстки сайта. Может быть, это, опять же, наследство с тех времен, когда фотошоп только появился и сайты в интернете были очень примитивными. Их можно было нарисовать в фотошопе, раскроить на фрагменты, добавить ссылки для отдельных картинок и сразу залить все в интернет, минуя сложные html-коды и каскадные таблицы стилей.
В нынешние времена нас, возможно, заинтересует параметры имя фрагмента (если надо его как-то выделить и отличить от остальных), а также изменение размеров ширины и высоты (два поля Ш и В предлагают ввести конкретные значения).
Поля X и Y это координаты. Изменяя их, вы двигаете рамочку фрагмента. Кстати двигать рамочку можно и самому, подобно (зажав левую клавишу мыши, тяните активный фрагмент в сторону, затем отпустите клавишу).
К важным свойствам этого инструмента я бы отнес возможность выделить одновременно несколько фрагментов , поскольку данная задача является стартом для большинства других возможных махинаций. Чтобы это сделать, удерживайте зажатой клавишу Shift и поочередно щелкайте на необходимые фрагменты, они должны выделиться оранжевой рамочкой (рамка активности).
Что теперь можно с ними сделать:
1. Объединить , то есть из нескольких фрагментов сделать один. Здесь есть одно НО. Помните я написал про принцип действия раскройки? Так вот исключений не будет. Это означает, что, например, из трех фрагментов разных по размеру, после объединения будет один большой прямоугольник, который по ширине и высоте будет равен двум самым крайним границам рамок. Если непонятно, вот наглядный пример:
Команда Объединить расположена в меню, которое вызывается нажатием правой кнопкой мыши на активном фрагменте:
2. Выравнивание фрагментов относительно друг друга. Для этого на панели параметров инструмента расположены блоки кнопок. Они, кстати, работают аналогичным образом, что и классическое .
3. Удалить . Команда выбирается так же через меню правой кнопки мыши. Можно удалить как один так и несколько сразу фрагментов. Понятное дело, что пустого места не будет — фотошоп автоматически пересчитает и покажет другие границы автоматических фрагментов.
4. Кнопка Разделить открывает диалоговое окно, в котором можно выбрать на сколько частей по вертикали и горизонтали вы хотите разделить активные фрагменты.
В итоге, после раскройки и выставления всех параметров, фотошоп сохранит разрезанное изображение в отдельную папочку:
Как сохранить только один фрагмент из всех, что были созданы
Раскроив изображение на множество частей, вы решили сохранить только один фрагмент? Хорошо! Фотошоп может это сделать.
Итак, перед вами некое изображение. Допустим, вдруг захотелось сохранить только один фрагмент, в моем случае это аквариумная рыбка. Почему бы и нет.
Для этого нужно перейти в режим: Файл — . В этом режиме выберите в левой части инструмент Выделение фрагмента , затем кликните по нужному участку изображения. Этот участок станет активным, то есть будет выделяться более насыщенным цветом. Затем нажмите кнопку Сохранить .
(Нажмите, чтобы увеличить)
Появится знакомое окно проводника, но к которому добавятся дополнительные настройки, позволяющие сохранить фрагмент в единственном экземпляре.
Первым делом, внизу окна, в группе Фрагменты из выпадающего списка выберите Выделенные фрагменты . Именно эта настройка и отвечает за поставленную задачу — сохранить только один фрагмент.
Затем правильно завершим начатое, а именно: в группе Формат установите Только изображения , в Настройках — Фоновое изображение . Не забудьте выбрать папку для сохранения и, по необходимости, задать имя файлу.
Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!
На этом уроке мы с вами познакомимся с еще двумя очень интересными инструментами в программе Photoshop - инструмент РАСКРОЙКА и инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА вPhotoshop .
Научимся разрезать большие изображения на фрагменты для того, чтобы они быстрее грузились в интернете.
Итак, инструмент РАСКРОЙКА в Photoshop используется для разрезания изображения на части. Например, веб-дизайнеры используют этот инструмент довольно часто - они разрезают изображение, чтобы в дальнейшем оно быстрее грузилось в интернете.
Рассмотрим работу инструмента РАСКРОЙКА в Photoshop на примере моего сайта «Алабай Троян и мейн-куны ».
К примеру, мне нужно сделать шапку для сайта. Я подбираю изображение, подходящее по тематике к моему сайту и устанавливаю необходимый размер изображения.
Наше изображение-шапка будет грузиться в интернете очень долго. Чтобы загрузка нашего изображения происходила в интернете быстрее, мы можем с помощью инструмента РАСКРОЙКА в Photoshop разрезать изображение на кусочки и сохранить каждый кусочек отдельно. После чего, при загрузке, наша шапка будет моментально загружаться в интернете.
Берем инструмент РАСКРОЙКА и, зажав левую кнопку мыши, растягиваем на нашем изображении выделение:
После чего, отпускаем левую кнопку мыши:
Мы видим, что наше изображение разделилось на три фрагмента (см. рисунок выше). С помощью этого инструмента, если нам это нужно, можно выделить еще области и разделить шапку-изображение еще на несколько частей.
Если нам надо, то взяв инструмент ВЫДЕЛЕНИЕ ФРАГМЕНТА и щелкнув по любому фрагменту, мы можем изменить его размер, к примеру, растянуть:
Выделенный фрагмент в Photoshop имеет оранжевую рамку.
Теперь нам нужно сохранить этот файл для интернета. Для этого переходим вМЕНЮ-СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ . Выбрав данное сохрание у нас открывается окно оптимизации. В левой части окна мы выбираем фрагмент, который нам нужно настроить (щелкаем по нему мышкой, делая активным):
А в правой части окна мы поочередно можем задать параметры для каждого нашего фрагмента изображения:
Допустим, в первом фрагмете у нас присутствует какой нибудь текст и нет фотографии. Мы уже изучали в статье , что различные схемы, тексты, где нет плавных переходов цветов лучше всего сохранять в .gif
- они будут занимать меньше места.
А в правой части окна (см.рисунок выше) мы задаем формат .gif
(в красной рамочке) и подбираем качество изображения (в синей рамочке).
Если мы посмотрим в самый низ левой части окна, то увидим формат сохранения и итоговый размер фрагмента изображения.
В самом верху левой части окна имеется возможность просмотра изображения в двух, а также в четырех вариантах. Поэкспериментируйте сами.
Следующий фрагмент у нас может иметь только фотографию (без текста) - его лучше сохранять в .jpg
.
Статья форматы сохранения файлов в Photoshop поможет вам разобраться в чем удобнее сохранять тот или иной фрагмент.
После того, как мы настроили каждый из фрагментов изображения, нажимаем кнопку СОХРАНИТЬ . В открывшемся окне выбираем папку для сохранения нашего изображения.
Выбрав папку, устанавливаем тип файла (см. рисунок) - HTML и изображения
.
Если мы зайдем в папку на нашем компьютере, куда сохранили изображение, то увидим, что в ней находится файлик html , где наши изображения записаны в виде кода и папка images :
В папке images сохранены фрагменты изображения с выбранными нами настройками (см. рисунок ниже):
Давайте посмотрим наш html файлик с помощью блокнота / Как это сделать? Щелкаем правой кнопкой мыши по файлу html и выбираем ОТКРЫТЬ С ПОМОЩЬЮ - БЛОКНОТ :
На рисунке выше мы видим, что наши фрагменты (находятся в красных рамочках) закодировались.
Изображение прописано в виде таблички. Давайте, к примеру, поставим для border
(что означает толщина рамки) вместо 0
значение равное единице (показано в синей рамочке на рисунке выше) и сохраним измения. Затем перейдем в папку, куда мы первоначально все сохраняли и еще раз щелкнем правой кнопкой мыши по файлу html
и выберем ОТКРЫТЬ С ПОМОЩЬЮ - выбираем браузер, в котором работаем (Opera, Firefox и т.п.)
:
На рисунке выше мы видим, что наше изображение-шапка сохранилось в виде кусочков, на которые мы его разбивали ранее. Получается, что когда мы разместим это изображение в интернете, то фрагменты один за одним будут мгновенно подгружаться.
Если мы вернем значение 0 для border (толщина рамки), то эти рамочки исчезнут.
Что научитесь делать, посмотрев это видео?
Вы научитесь работать с инструментом Рамка кадрирования и Раскройка. Узнаете, как с помощью программы Photoshop рационально сохранять изображения для интернета.
Описание видео:
В предыдущем уроке вы узнали, . В этом уроке перейдем к инструментам Рамка и Раскройка.
Рамка кадрирования – это очень простой в использовании инструмент. Для наглядного примера откроем какую-нибудь фотографию. Берете инструмент и протягиваете выделение, зажимая левую клавишу мыши. Отпустив мышку, вы увидите, что выделенная область остается в оригинальном цвете, а остальное изображение становится прозрачно-черного цвета. Если нажать клавишу Enter, то останется только тот участок в документе, который вы выделили.
Существуют следующие возможности этого инструмента:
- Можно вручную установить ширину и высоту выделения.
- Параметр Расширение нужно указывать таким же, как и расширение вашего рисунка.
- Кнопка Изображение показывает настоящие размеры данного изображения.
- Если вы подводите курсор к углам рамки, то он принимает вид стрелки, с помощью которой рамку можно корректировать. Если подводить курсор с внешней стороны угла, то стрелка становится изогнутой, и с её помощью рамку можно поворачивать. Внутри рамки есть центр вращения, его расположение можно менять. Изначально центр вращения находится в середине.
- У инструмента Рамка кадрирования есть опция Перспектива. Принцип её работы наглядно рассмотрен в видео.
Инструмент Раскройка используется для разрезания изображения на части. Для примера работать будем с графической шапкой для сайта. Поскольку изображения в интернете грузятся долго, а помощью инструмента Раскройка мы можем разрезать шапку на кусочки, сохранить каждую часть изображения отдельно. При загрузке эта шапка будет загружаться намного быстрее.
Берете инструмент, выделяете какую-то область. Размер выделенных фрагментов можно изменять. Затем нужно сохранить данный файл для интернета. Переходите в меню Файл и выбираете команду Сохранить для Web. Откроется окно для оптимизации, где можно задать параметры для каждого кусочка изображения.
Пусть в первом кусочке изображения находится текст, и нет рисунков. Так как изображения с текстом или схемами лучше всего сохранять в формате *.gif, то в настройках этого кусочка нужно указать формат gif и подобрать качество изображения.
Второй кусочек – это изображение, и вам нужно его сохранить в формате *.jpeg с высоким качеством.
Пусть третье изображение – это мерцающая кнопка. Её лучше сохранять в формате *.png.
Остальные кусочки изображения оставляете в формате *.jpeg, сохраняете настройки, указываете папку для хранения изображения, выбираете тип файла Html и изображения и кликаете кнопку Сохранить.
