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

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

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

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

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

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 (Перспектива)

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

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

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

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

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

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

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

  1. Картинка будет поделена на 7 (или любое другое число) фрагментом, причём они будут равны между собой.
  2. Картинка будет поделена на фрагменты размером 65 пикселей (или любое другое число), причём если не будут хватать, фрагмент будет неполный.
  3. Пункт (1) только по вертикали
  4. Пункт (2) только по вертикали

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

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

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

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

специально для .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну а теперь самая основная часть вопроса — сохранение. Тут не прокатит обычное + . Тут нужно магическое сочетании клавиш +++ (Файл, Сохранить для web

)

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

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

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

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

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

Раскройка

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

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

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

1) Обычный режим,

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

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

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

1:1

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

2:1

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

1:2

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

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

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

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

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
(толщина рамки), то эти рамочки исчезнут.

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

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

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

Инструмент Photoshop «Рамка» , быстрый вызов инструмента — латинская буква «C». Этим инструментом осуществляется кадрирование исходного файла

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

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

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

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

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

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

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

Рейтинг
( 2 оценки, среднее 4.5 из 5 )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий