Photoshop CS4 - Жвалевский Андрей Валентинович 11 стр.

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

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

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

Если какое-нибудь действие вам очень понравилось, то не ленитесь и посмотрите, как оно было сделано. Для этого следует обратиться к палитре ACTIONS (Действия) и, раскрыв все списки, просмотреть последовательность выполняемых операций.

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

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

1. Продумайте, какую последовательность команд вы хотите сохранить в виде макроса. Можете даже записать эту последовательность на бумаге, особенно если команд много.

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

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

4. Убедившись, что все готово, нажмите в нижней части палитры ACTIONS (Действия) кнопку

Появится окно, в котором нужно указать название записываемого макроса (Name) и при желании горячую клавишу для его быстрого вызова (Function Key) (рис. 7.15).

Рис. 7.15. Окно выбора общих параметров макроса

5. После внесения необходимых изменений в окне параметров макроса нажмите ОК. Окно будет закрыто, а кнопка

в нижней части палитры ACTIONS (Действия) станет красной, сигнализируя, что запись макроса начата. Все действия, которые вы выполните в режиме записи, будут внесены в макрос.

6. Выполните все операции, которые хотите сохранить в виде макрокоманды.

7. Нажмите в нижней части палитры ACTIONS (Действия) кнопку

Запись макроса будет остановлена.

Глава 8 Картинки для Интернета

• Анимация

• Разбиение изображения на пластины

Принято считать, что Photoshop для веб-мастера такой же незаменимый инструмент, как топор для дровосека. Ни в одной другой программе нельзя так быстро нарисовать кнопки, стрелки, баннеры и прочие графические элементы интернет-сайта. И даже саму веб-страницу тоже можно сделать в Photoshop. Причем для ее создания вам не нужно знать язык HTML и уж тем более быть программистом. Широчайший функционал программы дает возможность каждому попробовать себя в роли веб-мастера. Самое главное при подготовке изображений для Интернета – оптимизировать их, то есть подобрать оптимальное соотношение качества и размера файла. Об этом рассказано в главе 4. Однако есть и другие особенности веб-графики, реализовать которые можно в Photoshop.

Анимация

Одно из требований, которому должен соответствовать современный сайт, – интерактивность. С одной стороны, виртуальное общение с посетителем сайта необходимо для того, чтобы информация, за которой пришел пользователь, была быстро найдена. С другой стороны, интерактивная форма общения делает пребывание на сайте более комфортным. Чтобы создать «живую атмосферу» интернет-страницы, ее интерфейс должен содержать анимированные элементы. Это могут быть видоизменяющиеся кнопки, переливающиеся различными цветами элементы навигации по сайту и т. д.

Один из наиболее популярных способов использования анимации на сайте – размещение анимированных графических файлов в формате GIF. Такой файл представляет собой последовательность кадров, сменяющих друг друга через определенные промежутки времени. Анимированные GIF-файлы можно легко создавать в Adobe Photoshop.

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

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

Рис. 8.1. Исходные изображения для создания анимации

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

Откройте оба кадра в Photoshop. На одном из них выделите все изображение (Ctrl+A) и скопируйте его в буфер обмена (Ctrl+C). Затем перейдите ко второму изображению (например, щелкнув на нем кнопкой мыши) и вставьте изображение из буфера обмена (Ctrl+V). Новое изображение скроет под собой старое. Не волнуйтесь, это не навсегда.

Включите отображение палитры ANIMATION (Анимация) с помощью команды Window → Animation (Окно → Анимация). На ней будут располагаться кадры анимированного GIF-файла. Собственно, первый кадр уже есть – это то, что вы видите на экране. Щелкните на значке

в правом верхнем углу палитры. В результате откроется ее меню. Выберите в нем пункт New Frame (Новый кадр). А можете не открывать меню, а просто щелкнуть на изображении чистой страницы в нижней части палитры. Появится второй кадр. Пока он ничем не отличается от первого (рис. 8.2).

Ничего, сейчас мы его изменим. Щелкните на втором кадре на палитре ANIMATION (Анимация) и приготовьтесь немного повозиться с палитрой LAYERS (Слои) (рис. 8.3).

Как видите, на ней есть два слоя – по одному на кадр. Напротив каждого стоит значок глаза, который показывает, что соответствующий слой виден. Щелкните на глазе верхнего слоя. Он исчезнет, зато станет виден нижний. Новый кадр готов! Теперь он отличается от исходного (рис. 8.4).

Попробуйте посмотреть, что получилось. Для этого нажмите кнопку Plays animation (Воспроизвести анимацию)

в нижней части палитры Animation (Анимация). Кадры начнут очень быстро мелькать. Остановите их нажатием кнопки

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

Простейшая анимация готова! Можете немного усложнить ее, выбрав в меню палитры ANIMATION (Анимация) пункт Tween (Размножить). Появится окно, в котором нужно указать количество промежуточных кадров. Эти кадры будут достроены между первым и последним кадрами анимации. Получается довольно занятно.

Созданный файл можно просмотреть в любом браузере, однако рекомендуем оценить результат заранее. Для этого, вызвав окно Save for Web & Devices (Сохранить для веб и устройств), нажмите кнопку Preview (Просмотр) в нижней части этого окна. Анимированное изображение будет открыто в браузере, которым вы пользуетесь. Если результат вас устроит, возвращайтесь в окно Save for Web & Devices (Сохранить для веб и устройств) и нажимайте кнопку Save (Сохранить).

Созданный файл можно просмотреть в любом браузере, однако рекомендуем оценить результат заранее. Для этого, вызвав окно Save for Web & Devices (Сохранить для веб и устройств), нажмите кнопку Preview (Просмотр) в нижней части этого окна. Анимированное изображение будет открыто в браузере, которым вы пользуетесь. Если результат вас устроит, возвращайтесь в окно Save for Web & Devices (Сохранить для веб и устройств) и нажимайте кнопку Save (Сохранить).

Разбиение изображения на пластины

Если вы выкладываете на сайт картинку небольшого размера, этот раздел вам читать не обязательно. Но случается, что веб-изображение должно быть большим (например, рекламный плакат). В таких случаях лучше разбить его на несколько кусков. Это позволит уменьшить время загрузки картинки. Кроме того, разным частям изображения вы сможете присвоить разные гиперссылки.

Такое разбиение называется разделением на пластины (Slice).

Чтобы создать пластины, можно воспользоваться одним из трех способов:

• создать пластины из слоев (о слоях будет рассказано в следующей главе);

• разделить изображение с помощью специального инструмента;

• разделить изображение, используя направляющие.

Рассмотрим два последних способа.

Инструмент Slice (Пластина)

Этот инструмент находится в верхней части палитры инструментов (рис. 8.5).

Рис. 8.5. Инструмент Slice (Пластина) на палитре инструментов

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

Изображение сразу будет разделено на несколько прямоугольников – пластин. В левом верхнем углу каждой пластины вы увидите ее номер и специальный значок

Разделение на пластины с помощью направляющих

Направляющие – это вспомогательные линии, которые видны на изображении при редактировании его в Photoshop. Они применяются для того, чтобы проверить вертикальность или горизонтальность элементов изображения, выравнивание фрагментов и т. д. Вне Photoshop направляющие не отображаются.

Чтобы создать направляющую, нужно прежде всего включить показ разметных линеек слева и сверху окна документа. Для этого служит команда View → Rulers (Вид → Линейки) или сочетание клавиш Ctrl+R. Когда появятся линейки, подведите указатель мыши к любой из них, нажмите кнопку мыши и, не отпуская ее, вытащите направляющую в окно документа.

Созданные направляющие можно перетаскивать мышью с места на место, а также влючать или выключать их отображение командой View → Show → Guides (Вид → Показать → Направляющие) или сочетанием клавиш Ctrl+;.

Для быстрого управления показом линеек и направляющих служит кнопка

под строкой заголовка документа.

Расположите направляющие на изображении так, чтобы они обозначали границы создаваемых пластин. Активизируйте инструмент Slice (Пластина) на палитре инструментов. На панели параметров появится кнопка Slices From Guides (Пластины из направляющих). При нажатии на нее изображение разрезается на пластины по направляющим.

Редактирование пластин

Существует два типа пластин:

• пользовательские – то есть созданные нажатием кнопки Slices From Guides (Пластины из направляющих) или непосредственно инструментом Slice (Пластина);

• автоматические – пластины, которые программа создает автоматически после создания пользовательской пластины инструментом Slice (Пластина).

Пластины первого типа можно редактировать. Метки в их заголовках – синего цвета.

Автоматические пластины меняются в соответствии с изменением пользовательских, однако напрямую их редактировать нельзя. Метки в заголовках автоматических пластин – серого цвета. Чтобы преобразовать автоматическую пластину в пользовательскую, щелкните на ней правой кнопкой мыши и выполните в появившемся меню команду Promote to User Slice (Улучшить до пользовательской пластины).

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

• Delete Slice (Удалить пластину).

• Edit Slice Option (Редактировать свойства пастины). При выполнении этой команды появляется окно свойств пластины (рис. 8.6).

Рис. 8.6. Свойства пластины

Здесь вы можете изменить основные свойства данной пластины. Например, на рис. 8.6 мы ввели в поле URL адрес сайта издательского дома «Питер». В результате после сохранения изображения (см. ниже) данная пластина станет «кликабельной» – после щелчка на ней пользователь окажется на сайте «Питера». Кроме того, в области Dimentions (Размеры) вы можете установить точное положение левого верхнего угла пластины (поля X и Y), а также ее ширину (W) и высоту (H).

Если в верхнем списке Slice Type (Тип пластины) выбрать вариант No Image (Без изображения), при сохранении вместо данного фрагмента будет пустой прямоугольник. Можете присвоить этому прямоугольнику произвольный цвет с помощью списка Slice Background Type (Тип фона пластины).

• Devide Slice (Разделить пластину). Очень удобная команда, если вам нужно разделить пластину на несколько одинаковых фрагментов. При ее выполнении появляется окно (рис. 8.7).

Чтобы разбить пластину по вертикали, установите флажок Divide Horizontally Into (Разбить на горизонтальные). Соответственно флажок Divide Vertically Into (Разбить на вертикальные) позволяет разбить пластину по горизонтали. Каждая область устроена одинаковым образом. Вы можете выбрать один из вариантов разбиения: указать количество фрагментов в верхнем поле или задать точный размер одного фрагмента (в пикселах) в нижнем поле.

Изменять размеры и положение пластины можно вручную с помощью инструмента Slice Select (Выделение пластины).

Для управления всеми пластинами изображения служат команды главного меню программы View (Вид):

• Lock Slices (Запереть пластины) – все пластины становятся недоступными для редактирования;

• Clear Slices (Очистить пластины) – все пластины удаляются.

Сохранение изображения, разделенного на пластины

Для корректного сохранения изображения, разбитого на пластины, используйте команду Save for Web & Devices (Сохранить для веб и устройств) (см. главу 4).

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

После этого нажмите кнопку Save (Сохранить), но в появившемся стандартном окне сохранения файла не торопитесь щелкать на Сохранить. Предварительно выберите в списке Тип файла пункт HTML and Images (HTML и изображения). Дело в том, что каждая пластина хранится в отдельном файле. Чтобы на веб-странице собрать все фрагменты изображения, необходим определенный HTML-код. По этой причине и нужно сохранить не только графические файлы, но и HTML-документ, в котором записан этот код.

После сохранения вы получите HTML-файл и соответствующий ему набор графических файлов в папке Images.

Глава 9 Кандидатский минимум

• Выделение фрагмента изображения

• Слои

• Каналы

• Маски

• Работа с текстом

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

Выделение фрагмента изображения