В этой статье мы продолжаем знакомство с инструментами Photoshop CS первой логической группы панели инструментов . Сегодня мы узнаем как работает инструмент «Рамка», и его модификатор - «Раскройка», см. скриншот справа. А также рассмотрим принцип работы инструмента «Пипетка». Принципы действия инструментов «Рамка» и «Раскройка» немного похожи между собой, но все же имеются некоторые отличия принципов действия. Инструментом «Рамка» мы можем одновременно вырезать только один фрагмент, а инструментом «Раскройка» мы имеем возможность одновременно вырезать большое количество фрагментов.
Инструмент «Раскройка» в фотообработке не применяется. Этот инструмент применяется при раскройке нарисованного веб-дизайнером шаблона веб-страницы на фрагменты, из которых верстальщик собирает шаблон будущего веб-сайта.
Инструмент «Рамка» (C)
Инструмент Photoshop «Рамка» , быстрый вызов инструмента - латинская буква «C».
Этим инструментом осуществляется кадрирование исходного файла
. При кадрировании файла под необходимые геометрические размеры, цифровые значения параметров необходимо прописать в панели параметров инструмента, как изображено на скриншоте ниже.
Также необходимо выбрать величину разрешения: пикс/дюйм или пикс/см.
После установки необходимых параметров, можно осуществлять кадрирование файла, см. фото ниже. Для этого, инструментом «Рамка» выделяем необходимую область (фото слева) и отпускаем клавишу мыши (фото справа). Нажимаем «Enter» для завершения операции кадрирования.
При кадрировании изображений можно использовать опцию «1/3» (правило третей) в меню панели параметров инструмента «Рамка», см. скриншот ниже. Это очень удобно, например, при кадрировании крупноплановых портретов, см. фото выше (справа).
Установив галочку возле пункта «Экран», у нас появляется возможность выбрать цвет и необходимую прозрачность отсеченной области. Это очень удобно при выборе нужного варианта кадрирования файла. Процент прозрачности отсеченной области можно менять при помощи соответствующего ползунка на панели параметров.
Область кадрирования можно произвольно поворачивать вокруг оси вправо или влево. Для этого необходимо вывести курсор из выделенной области
(курсор станет таким)
и совершить поворот области кадрирования, см. видеоролик справа. Ели опорную точку оси переместить в другое место, в этом случае поворот будет осуществляться по заданной траектории.
Если при вращении выделенной области удерживать нажатой клавишу «Shift», вращение области будет фиксироваться под определенными углами в шесть шагов. Это удобно когда необходимо установить строго вертикальное, горизонтальное положение области выделения, или зафиксировать область под определенным углом. Точку оси вращения можно перетаскивать мышкой, или нажав клавишу «Alt», - кликнуть мышкой внутри выделенной области в необходимой точке вращения.
Инструмент «Раскройка» (C)
Инструмент Photoshop «Раскройка» , быстрый вызов инструмента - латинская буква «C».
Как уже было сказано вначале статьи, инструмент «Раскройка» в основном используют графические дизайнеры, разработчики разного рода приложений, например, веб-дизайнер, верстальщик использует «Раскройку» для нарезки на фрагменты исходного изображения (графического макета сайта), для создания шаблона веб-сайта.
Работа данного инструмента проста: - выделяем нужные фрагменты на изображении (макете), после этого оптимизируем нарезанные файлы и сохраняем для WEB, см. видеоролик справа.
Инструмент «Пипетка» (I)
Инструмент Photoshop «Пипетка» , быстрый вызов инструмента - латинская буква «I». Этим инструментом мы завершаем знакомство с инструментами первой логической группы.
В следующей статье мы продолжим знакомиться с инструментами Фотошоп начиная с второй логической группы панели инструментов.
Сегодня о инструменте «Пипетка» много рассказывать не буду, в будущих материалах мы еще неоднократно будем возвращаться к этому инструменту.
Инструмент «Пипетка» - это многофункциональный инструмент, сейчас мы рассмотрим его основную функцию - определение цвета и цифровых значений в каналах цветовых пространств.
Вызываются горячей клавишей С.
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 (Раскройка по направляющим) — если перед раскройкой вы расставите направляющие, то при нажатии на эту кнопку изображение будет автоматически раскроено по этим направляющим. Этим инструментом часто пользуются для разделения элементов дизайна сайта. Он позволяет вырезать определенную область и добавить к ней ссылку, режим перехода по ссылке (в новом окне, в текущем окне и т.д.), текст картинки и фон фрагмента.
На этом уроке мы с вами познакомимся с еще двумя очень интересными инструментами в программе 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 )
После того как вы нажмёте эти 4 клавиши, откроется окошко:
Собственно сейчас вы должны выбрать нужные вам фрагменты, которые вы выделили ранее, просто выделите всё, протянув мылкой с зажатой ЛКМ, а далее жмите клавишу «Сохранить». Осталось просто выбрать папку, куда вы будите сохранять фрагменты. В любом случае фотошоп создаст свою собственную папку «image » в которую всё благополучно сохраниться. В итоге вы получите примерно следующие:
Как вы заметили, имя файла состоит из двух частей, первая часть, до символа «_» (нижние подчёркивание) — это основное название картинки, ну а вторая часть, та что после «_» — это номер фрагмента. Ничего сложного нет, совершенно. Теперь картинки готовы к вёрстке. Рассмотрим подробнее некоторые аспекты.
Режимы работы
Раскройка позволяете разрезать цельные крупные графические элементы на фрагменты. Это делается в первую очередь для удобства верстальщика и для быстроты работы сайта. Ну а теперь давайте разберёмся с настройками и принципами работы. Обо всём по порядку.
Режимы работы инструмента «раскройка»
И так, раскройка имеет несколько режимов работы, они называются стилями. Они похожи на те, что есть у инструмента выделение
1) Обычный режим, вы сами, произвольно будите выбирать области, для будущих фрагментов, пропорции при этом соблюдатся не будут, если только вы не зажмёте, например, .
2) Заданные пропорции . Данный режим работы инстремента Раскройка позволяет вам создавать фрагменты с задаными пропорциями, например.
1:1 – это значит, что будут получаться равные по величине ШИРИНЫ и ДЛИНА, иными словами, вы получите квадрат
2:1 – ШИРИНЫ будет в два раза больше ДЛИНЫ
1:2 – ШИРИНА будет в два раза меньше ДЛИНЫ
Аналогична и для любых других пропорций. например 100500:200600 (c)
3) Ну и последний режим, это режим с заранее заданным размером . Задаются заранее размеры фрагмента, после достаточно просто кликнуть в нужном месте и фрагмент появиться.
Разделить фрагмент
Если вы сделаете клик ПКМ при активном инструменте Раскройка , то в контекстом меню вы найдёте одну интересную функцию:
Если мы его активируем, то фрагмент, по которому был сделан клик, будет подвержен ряду изменений, всё зависит от того, что мы сделаем дальше, давайте рассмотрим на примере. После того как мы выбрали данный пункт, перед нами появиться меню:
Настройки «разделить фрагмент»
И так, тут мы видим разные режимы. Рассмотрим всё по порядку.
- Картинка будет поделена на 7 (или любое другое число) фрагментом, причём они будут равны между собой.
- Картинка будет поделена на фрагменты размером 65 пикселей (или любое другое число), причём если не будут хватать, фрагмент будет неполный.
- Пункт (1) только по вертикали
- Пункт (2) только по вертикали
А теперь посмотрим, как это выглядит:
Видно вертикальное, горизонтальное и совмещенное (когда стоят обе галочки).
На этом я заканчиваю. Надеюсь вам было понятно, спасибо за внимание. Фрагментируйте и верстайте.
Статью подготовил Amba специально для .
Если вы хотите использовать наши материалы - пожалуйста, у нас всё для людей, но мы были бы очень признательны, если вы оставите маленькую ссылочку на наш сайт, или на эту статью у себя. Заранее спасибо!
