WEB-графика в сети Интернет

Самоучитель по WEB-графике

1. ВВЕДЕНИЕ

 

ВВЕДЕНИЕ

 

1. Кому адресована книга

 

Кому адресована книга

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

 

2. О чем эта книга

 

О чем эта книга

Книга посвящена компьютерной графике. Однако не всей. Мы рассматриваем методы и средства создания и обработки изображений, предназначенные преимущественно для вывода на монитор компьютера и публикации в Интернете. Специальные вопросы предпечатной подготовки (например, цветоделение) и создание трехмерной графики здесь не рассматриваются. Это, конечно, не означает, что вы не сможете распечатать свою картину на принтере. Просто все предпечатные изыски мы оставляем без особого внимания. Подготовка буклетов, рекламных плакатов, обложек и шикарных иллюстраций книг на высоком уровне требует особых знаний, навыков и опыта, которыми обладают специалисты верстки.
Из всех программных средств работы с графикой мы выбрали Adobe Photoshop и Macromedia Flash, а также Dynamic HTML. Photoshop является признанным лидером обработки растровых (точечных) изображений, a Flash — широко известный редактор векторной графики, ориентированный на создание анимации, которая может сопровождаться звуком. Файлы, создаваемые Flash, компактны и
могут встраиваться в Web-страницы. Другими словами, векторную графику и серьезную анимацию, которые удается вставить в Web-страницу. можно подготовить в Flash. Динамический HTML (HyperText Markup Language — язык разметки гипертекста) обеспечивает создание несущей конструкции Web-сайта. Это основное средство Web-дизайна имеет свои инструменты для работы с графикой. Корректировать сканированные изображения и делать коллажи лучше всего в Photoshop, а рисовать на «чистом листе бумаге» — в Flash. И то, и другое обычно требуется в Web-дизайне.
Перечисленный выше набор программных средств позволяет решить львиную долю всех графических задач, связанных с Web и экспозицией на мониторе компьютера. Однако настоящая книга не является руководством пользователя по Photoshop, Flash и HTML в том смысле, который обычно вкладывается в это понятие. Вместе с тем эти средства — главные герои нашей книги. Цель книги -дать базовые понятия, поддерживаемые в том или ином объеме практически всеми серьезными графическими пакетами. Мы не стремились к исчерпывающей полноте изложения. Для нас важнее было создать критическую массу сведений, позволяющую начать работу и понять, какая именно информация еще нужна. Для конкретности изложения основные понятия компьютерной графики рассматриваются применительно к Photoshop и Flash. Базовые сведения, подкрепленные множеством примеров, позволят вам самостоятельно освоить основные методы и приемы создания и обработки изображений с помощью этих пакетов, а также почувствовать уверенность в своих силах при переходе к другим графическим программам, таким как CorelDRAW, Macromedia FreeHand, Adobe Illustrator, если это вам понадобится.
Кроме того, мы хотели написать книгу небольшого объема, доступную многим, посвященную одновременно и растровой, и векторной графике («два в одном»), содержащую и элементы теории, и практические рекомендации.

 

3. Как устроена книга

 

Как устроена книга

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

Первые три главы являются базовыми. Здесь вы узнаете, что такое цвет, как с ним работать, как корректировать изображения и сохранять их в файлах. Хотя материал в этих главах ориентирован преимущественно на Photoshop и Flash, его можно взять за основу и при работе с другими графическими программами. Материал всех последующих глав связан, так или иначе, с первыми тремя. Если вам лишь эпизодически приходится заниматься графикой и некогда вникать в тонкости, то можете ограничиться только этими главами и пятой главой, посвященной сканированию. Это — минимальный набор сведений по компьютерной графике для тех. кто не стремится стать специалистом, но хотел бы научиться избегать грубых ошибок при обработке изображений. Ведь нередки еще случаи, когда в иллюстрированные прайс-листы вставляют картинки, имеющие объем в сотни к тысячи килобайт.

В главе 1 рассказывается о цвете и, в частности, о настройках цвета в Photoshop и Flash.

В главе 2 вы познакомитесь с основными приемами и средствами коррекции изображений в редакторе Photoshop.

Глава 3 посвящена описанию форматов графических файлов, а также средствам экспорта Photoshop и Flash.

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

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

Главы 6 и 7 посвящены графическому редактору Photoshop. В главе 6 рассматриваются инструменты редактора, а в главе 7 — примеры решения типовых задач.

Главы 8 и 9 рассказывают о графическом редакторе Flash. В главе 8 рассматривается применение Flash только как векторного графического редактора для создания и редактирования статических изображений. Глава 9 посвящена анимационной графике или, говоря иначе, мультфильмам. Если вас интересует анимация, то предыдущую главу также следует прочитать.

В заключительной главе 10 рассматриваются основные способы работы с графикой в рамках HTML-кода. Графические элементы (картинки, графические ссылки и карты ссылок, мультфильмы Flash) для публикации в Web должны быть в конечном счете вставлены в HTML-код, который, собственно, и определяет облик и содержание Web-страницы. Материал этой главы далеко не исчерпывает тему HTML, но дает основные начальные сведения для понимания того, каким образом графика монтируется в Web-сайт.

Проще и быстрее всего вы сможете на практике овладеть предлагаемыми в книге средствами создания и обработки изображений, если не спеша воспроизведете на компьютере предлагаемые примеры. Начните вместе с нами, а затем продолжите самостоятельно. Прежде всего получите устойчивые навыки владения инструментами и элементарными приемами, затем хорошенько продумайте свой замысел и план его воплощения и только после этого приступайте к его реализации. Этот процесс — нелинейный. Возможно, вам придется возвращаться и все начинать с начала. Ничего не бойтесь, кроме одного: приобрести вредные привычки.

 

4. Что надо иметь

 

Что надо иметь

Конечно же, нужен компьютер. Чтобы начать заниматься графикой, достаточно иметь компьютер, весьма скромный по своим техническим характеристикам. Все рассмотренное в настоящей книге относится к IBM-совместимым компьютерам, работающим под управлением операционной системы Microsoft Windows. Программы Photoshop, Flash и популярные Web-браузеры, конечно же, работают и на платформе Macintosh, но мы в книге не будем подробно останавливаться на этой специфике.
Минимальные требования к компьютеру, при которых работа с графическими пакетами возможна и вполне сносна, такие:

  • Процессор Pentium, 200 МГц или аналогичный
  • Оперативная память 16 Мбайт
  • Видеопамять 8 Мбайт
  • Монитор 15 дюймов по диагонали, разрешение 800x600, не менее 256 цветов
  • Сканер (не обязателен, но желателен; лучше — планшетный)

Часто при работе с графикой необходимо держать открытыми несколько программ (Photoshop, Flash, FrontPage, FineReader, Word и т. п.) и несколько (иногда десятки) графических файлов. Для этого требуется больше оперативной и видеопамяти. При работе с графикой приходится несколько часов проводить перед монитором. Поэтому хороший монитор — очень важная деталь вашего аппаратного оснащения. Лучше иметь монитор с диагональю 17—19 дюймов, разрешением от 1024x768, глубиной цвета True Color (24 бит или 16 млн цветов) и видеокартой с памятью от 32 Мбайт . Однако мы себя чувствовали более-менее комфортно при работе с компьютером Intel Pentium II, 450 МГц с оперативной памятью 64 Мбайт и видеопамятью 16 Мбайт. Монитор у нас был 15 дюймов по диагонали с установленным разрешением 800x600 и глубиной цвета 24 бит. Другими словами, мы работали на довольно скромном по техническим характеристикам компьютере, что не мешало нам заниматься графикой и писать эту книгу.

Сканер — относительно недорогое и очень полезное устройство для создания первичных изображений, которые можно хранить в виде файлов на компьютере. В большинстве случаев исходный графический материал для последующей обработки получается с помощью сканеров. Если вы серьезно решили заниматься компьютерной графикой, то сканер вам необходим. Кроме сканера можно использовать и цифровые камеры, однако они сейчас не очень широко распространены из-за их дороговизны.

Чтобы читать нашу книгу с максимальным эффектом для себя, желательно все попробовать самостоятельно. Для этого нужно иметь установленный графический пакет Adobe Photoshop. Большинство описанных инструментов и примеров соответствуют версии 5.0 и даже версии 4.0. Однако мы ориентировались главным образом на версии 6.0 и 7.0. В пакет Adobe Photoshop 6.0 входит программа ImageReady 3.0, ориентированная на подготовку изображений преимущественно для Web. В пакет Adobe Photoshop 7.0 входит ImageReady 7.0. Работа с векторной графикой, а также создание анимационной графики рассматриваются применительно к Macromedia Flash. Мы ориентировались в основном на версию 5.0, но не обошли вниманием и следующую версию — 6.0 или, иначе, MX. Заметим, что версия 5.0 существенно отличается от предыдущей версии 4.0, главным образом — в языке действий ActionScript. Flash MX имеет ряд улучшений интерфейса и некоторое расширение языка ActionScript. Итак, вам понадобится Adobe Photoshop версии 6.0 или 7.0 и Macromedia Flash версии 5.0 или MX.

Мы также рассматриваем использование графики в контексте HTML, поэтому вам понадобится браузер Web-страниц. Это нужно, чтобы иметь возможность просмотреть результаты творчества глазами посетителя вашего Web-сайта. В этой книге все примеры проверялись для Microsoft Internet Explorer 5.0 и более поздних версий.

Чтобы делать снимки с экрана монитора (так называемые скриншоты), копируемые в буфер обмена, вы, конечно же, можете использовать клавиши <Print Screen> (для всего экрана) или <Alt>+<Print Screen> (для активного окна). Однако лучше обзавестись более гибкой и удобной утилитой, например, Capture Express или Hard Copy.

 

5. Что такое Web-сайт

 

Что такое Web-сайт

Web-сайт или, другими словами, Web-узел является совокупностью взаимосвязанных Web-страниц. Каждая страница определяется соответствующим ей HTML-кодом (HTML-документом). HTML-код представляет собой набор команд или инструкций, написанных на специальном языке HTML (HyperText Markup Language — язык разметки гипертекста). Этот код сохраняется в обычном текстовом файле с расширением htm или html и может редактироваться с помощью простого текстового редактора, например, блокнота Windows (Notepad.exe). В документ HTML можно вставлять «инородные» элементы, такие как программы на других языках (JavaScript, VisualBasicScript), видео и звук, Flash-мультфильмы (swf-файлы) и др. Тем не менее, HTML-документ остается основной несущей конструкцией Web-страницы.

Страницы, относящиеся к одному и тому же сайту, обычно связаны друг с другом ссылками (гиперссылками) и единой системой навигации. Это — так называемое функциональное единство. В основе сайта находится так называемая домашняя страница (Homepage). Это страница, с которой можно перейти посредством ссылок на другие страницы сайта, а также на любые другие странииы World Wide Web (WWW, Всемирной паутины), принадлежащие другим сайтам. Кроме того, множество страниц одного и того же сайта обычно объединяет единство стиля. С формальной точки -зрения, последнее совсем не обязательно, но весьма желательно, по крайней мере из эстетических соображений. Web-дизайнеры стремятся к этому, чтобы посетитель сайта, на какой бы странице он ни находился, постоянно чувствовал, в какой епархии находится — все в том же сайте, или уже за его пределами. Не забывайте, что многие путешественники и сети испытывают чувства заблудившегося в лесу или покинутого в пустыне. Стиль сайта создается не только средствами графического дизайна. Однако именно с помощью графики легче всего добиться ощущения стилевого единства множества страниц. Может быть поэтому графическому дизайну сайта уделяется столь высокое внимание.

 

6. Особенности графики для Web

 

Особенности графики для Web

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

Главной особенностью графики в Web-дизайне является то, что обычно она соседствует с текстовой информацией и элементами интерфейса (кнопками, переключателями и т. п.), и это соседство приходится учитывать при создании изображений. Основное назначение графики в том, чтобы привлечь внимание к Web-странице в целом или к отдельным ее фрагментам, а также представить информацию, которую словами не опишешь. Иначе говоря, графика используется и для оформления страницы, и для представления информации (иллюстраций). Она может как существенно помочь посетителю понять информацию, так и наоборот, сбить его с толку, сделать тексты трудночитаемыми. Графический дизайн Web-сайта — дело тонкое, требующее вкуса и чувства меры. Плохое графическое оформление сайта может просто отпугнуть посетителей. В то же время нужно помнить, что посетители возвращаются к сайту снова и снова благодаря, прежде всего, его информативности, а не красоте. Таким образом, разработчик графического дизайна сайта не просто свободный художник. Ближе всего он к архитектору.

Другая немаловажная особенность графики для Web заключается в довольно жестких ограничениях, накладываемых на объем файлов. И это связано не столько с экономией дискового пространства компьютера, сколько с пропускной способностью каналов связи. В настоящее время подавляющее большинство посетителей Интернета используют подключение к серверу через модем. Сегодня наиболее производительные модемы обеспечивают скорость передачи данных 57 600 бит/с (около 6 Кбайт/с). Многие используют модемы производительностью 33 600 бит/с и ниже. Если Web-страница загружается в браузер дольше 10 с. это раздражает посетителей, которые могут уйти по другому адресу, так и не дождавшись окончания загрузки. Отсюда следует, что надо стремиться к тому, чтобы Web-страница не превышала по объему 50—60 Кбайт. Для графических изображений это довольно серьезное ограничение, требующее от дизайнеров особых знаний и умения. В частности, нужно хорошо разбираться в форматах файлов и способах монтирования изображений в Web-страницу.

Третья особенность графики состоит в том, что в мире встречаются компьютеры, построенные, как говорится, на различных платформах. Так, существуют компьютеры на платформе PC и на платформе Macintosh. Мониторы этих компыотеров имеют различную яркость. Если этого не учитывать, то одна и та же картинка, великолепно выглядящая на одном мониторе, может потерять свою выразительность на другом. Поэтому художник, занимающийся Web-дизайном или просто публикующий свои произведения и Интернете, должен учитывать это обстоятельство и уметь настраивать свой монитор.

 

7. Понятие растровой и векторной графики

 

Понятие растровой и векторной графики

Чтобы изображение можно было хранить, просматривать и обрабатывать на компьютере, оно должно быть представлено в так называемом цифровом виде. Такое представление или, другими словами, описание изображения можно выполнить различными способами. Самый простой (по крайней мере, для понимания) способ состоит в том, чтобы каждый элемент изображения (точку или, как принято говорить, пиксел) описать отдельно. Описание точки это описание ее цвета. Все изображения, представленные таким способом, называют растровыми. Фотографии, произведения живописи, картинки с плавными переходами цветов обычно представляются в компьютере как растровые изображения. Для редактирования растровых изображений существуют специальные программные средства — графические растровые редакторы. Многие из них предназначены только для просмотра изображений и, возможно, некоторой коррекцией (яркости, контрастности, цветового баланса). Другие же являются мощными средствами не только для коррекции, но и для комбинирования фрагментов различных изображений (создания коллажей), а также для собственно рисования. Лидером среди редакторов растровых изображений является Adobe Photoshop. Однако следует заметить, что рисование «от нуля» в редакторах растровой графики, хотя это и возможно, является довольно сложным делом. Для этой цели лучше подходят редакторы так называемой векторной графики.

Векторные изображения описываются математическими формулами. В них элементами являются не пикселы, а объекты (линии, фигуры и т. п.). Например, чтобы описать такой объект, как отрезок прямой линии, требуется указать координаты его начала и конца, толщину и цвет линии. При растровом описании линии нам пришлось бы описывать каждую ее точку, причем чем толще линия, тем больше точек она содержит и тем объемнее ее общее описание. Рисовать картинки от руки в редакторах векторной графики существенно удобнее, чем в растровых. В частности, схемы и чертежи, а также рисунки типа плакатов (т. е. без плавных переходов цветов), несомненно, надо делать с помощью векторных редакторов. Однако они являются не очень хорошими помощниками при созданиу изображений с качеством фотографий или произведений живописи. Лидер среди векторных редакторов — CorelDRAW, хотя есть множество других векторных графических программ, например, Macromedia FreeHand и Macromedia Flash.

Растровые изображения плохо переносят масштабирование. Увеличение размеров картинки обычно приводит к ухудшению ее качества (проявляется зернистость). Если же требуется сохранить качество при увеличении размеров изображения, за что платят увеличением объема занимаемого места на диске. Качество векторного изображения практически не зависит от масштаба его представления и, следовательно, изменение масштаба не сказывается на объеме занимаемого места на диске. Это — одно из главных достоинств векторной графики.

Тенденция развития графических программ состоит в завоевании тех областей, для работы с которыми они изначально не предназначались. Таким образом, растровые и векторные редакторы стремятся сблизиться друг с другом по широте охвата и мощности своих средств. Photoshop сейчас не является чисто растровым редактором, a CorelDRAW имеет довольно развитые средства работы с растровой графикой. В настоящее время документ, создаваемый в мощном графическом редакторе, обычно является комбинированным, состоящим из множества объектов, различающихся способами описания (например, растровые и векторные изображения, текстовые поля). Документ может содержать информацию о слоях, прозрачности областей изображения и другую информацию. Таким образом, графический документ может иметь сложную объектную структуру.

Большинство начинающих заниматься компьютерной графикой обычно плохо разбирается, в каких случаях следует использовать тот или иной редактор. Часто бывает и так, что они пытаются в векторных редакторах применить технологии, естественные для растровых редакторов, и наоборот. Опытный специалист по компьютерной графике легко выберет наиболее подходящий редактор в зависимости от стоящей перед ним задачи. У него всегда под рукой и растровый, и векторный редактор. Поэтому в своей книге мы рассматриваем оба типа редакторов — растровый Photoshop и векторный Flash. Photoshop мы выбрали в силу его чрезвычайной популярности и огромных функциональных возможностей. К Flash мы обратились потому, что он является простым и достаточно удобным векторным редактором, имеет чрезвычайно мощные и удобные средства работы с анимационной графикой, а также потому, что его выходные файлы могут восприниматься Web-браузерами.

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

 

2. ГЛАВА 1. ЦВЕТ

 

ГЛАВА 1. ЦВЕТ

 

1. Цвет

  

Цвет

Любое графическое изображение можно представить как некоторую композицию разноокрашенных областей. Поэтому основная информация о картинке есть информация о цвете. Цвет — это свойство видимых предметов, непосредственно воспринимаемое глазом. Поэтому, на первый взгляд, и говорить-то не о чем. Однако при смешении красок в банке или на палитре художника, а также при выводе изображения на монитор или принтер или, наоборот, при сканировании картинок постоянно возникают вопросы о цвете и цветопередаче (переносе изображений с одного носителя на другой или с одного устройства вывода на другое).

Все не так просто, как кажется. Художники, полиграфисты и компьютерные дизайнеры знают, как это важно. Ощущение цвета очень индивидуально. Однако во всем этом многообразии можно найти некоторые универсалии. Если бы их не нашлось, то у нас не было бы ни мониторов, ни принтеров, ни сканеров, ни телевизоров. Поиск универсалий — это поиск моделей, которые отбрасывают все несущественное и подробно описывают наиболее важное для практики. Заметим попутно, что наука от ненауки отличается только объективностью и абстрагированием. Объективность заключается в независимости описания предмета от индивидуальных человеческих способностей восприятия. Абстрагирование состоит в том, чтобы удалить из описания предмета частности, оставив самое главное.

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

  

2. 0 природе цвета

   

0 природе цвета

Известно, что мы видим окружающие предметы благодаря воздействию света на сетчатку глаза. Этот свет может быть излученным или отраженным предметами. Мы можем видеть предметы, которые излучают свет сами по себе (например, звезды, электрические лампочки, костер). Чтобы увидеть другие, не светящиеся сами по себе предметы, необходим источник внешнего света (например, фонарь). Предметы, освещенные внешним светом, становятся видимыми благодаря отражению этого света. Между глазом и предметом существует некоторая среда, через которую распространяется свет, несущий информацию о предмете. Эта среда может оказывать влияние на проходящий через нее свет. Кроме того, предметы могут частично поглощать падающий на них свет, отражая лишь некоторую измененную его часть. Например, краска является веществом, которое поглощает одну часть света, а другую — отражает. Так, падающий на предмет свет может быть белым, а отраженный — красным, зеленым, синим или каким-нибудь другим. Если на пути луча белого света установить прозрачную пленку какого-нибудь цвета, то выходной луч приобретет такой же цвет. Такие пленки обычно называют световыми (цветными) фильтрами. Иначе говоря, вещество может отражать, поглощать и пропускать через себя свет. Свет, получаемый в результате взаимодействия с веществом, отличается, в общем случае, от исходного света. Таким образом, информация о предмете, переносимая светом, претерпевает изменения из-за взаимодействия света с веществом на пути его распространения.

С точки зрения физики, свет имеет электромагнитную природу. Это означает, что свет представляет собой композицию (смесь) множества электромагнитных волн. Электромагнитная волна есть распространяющиеся в пространстве колебания электрического и магнитного полей. Колебание (периодическое изменение), как известно, характеризуется частотой, а волна — длиной. Для света частота колебаний/ и длина волны А. связаны простой формулой: f = с/А, где с — скорость света (в вакууме она равна примерно 300 000 км/с).

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

Рис. 2. Луч белого света, проходя через призму, разлагается на цветные составляющие

Видимый цвет однозначно определяется длиной волны соответствующего излучения. Электромагнитные волны, которые воспринимает наше зрение, лежат в области примерно от 0,75 до 0,4 мкм. Левой границе соответствует красный цвет, левее находится диапазон инфракрасных (тепловых) волн, а еше левее (0,3 мм—30 000 м) расположены радиоволны. Правой границе видимого диапазона волн соответствует фиолетовый цвет, правее находятся ультрафиолетовые, рентгеновские, гамма- и космические лучи. Инфракрасные лучи наш глаз не чувствует, но они воздействуют, например, на термометр. Ультрафиолетовые лучи также невидимы, но они способны заставить светиться люминофор — вещество, применяемое в электронно-лучевых трубках мониторов.


Рис. 3. Спектр электромагнитных волн

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

Если лучи различных цветов с помощью линз и зеркал сфокусировать (т. е. смешать) в один пучок, то вновь получим белый цвет. Опыты по разложению белого света на цветные составляющие и сведению их снова в белый луч впервые провел И. Ньютон в XVII веке. Путем смешения лучей различных цветов можно получать другие цвета, даже такие, которых нет в спектре разложения белого цвета. Различные цвета можно получать и смешением красок. Однако цвет, возникающий в результате смешения цветных лучей света, будет отличаться от цвета, полученного смешением аналогичных красок. Например, красный, зеленый и синий лучи света вместе дают белый цвет, а смешение соответствующих красок — грязно-коричневый. Попробуйте зачертить на одном месте бумаги сначала красным карандашом, потом зеленым и синим. Никакого подобия белого цвета вы не получите. Дело в том, что цвета красок мы видим в отраженном свете, который отличается от падающего. Видимый отраженный цвет получается в результате поглощения части падающего света. Таким образом, чтобы предсказать, какой цвету нас получится, необходимо знать, что мы будем смешивать — лучи света или краски. Все сказанное имеет прямое отношение к компьютерной графике. Мониторы отображают цвета в результате смешения цветных лучей света, испускаемых люминофорами, а печатающие устройства — смешивают краски, т. е. вещества, обладающие способностью поглощать одну часть лучей света и отражать — другую.

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

Говоря о цветах, часто используют термины тон и оттенок, а также тени, средние тона и света. Под тоном обычно понимают спектральный цвет или цвет, полученный смешением базовых цветов максимальной яркости. Изменяя (уменьшая яркость) данного цвета, получают его оттенки. Под тенями имеют в виду области изображения низкой яркости (освещенности). Аналогично, средние тона — участки изображения средней яркости, а света — участки высокой яркости. Если смешать лучи трех базовых цветов (красного, зеленого и синего) одинаковой яркости, то получится некий оттенок серого цвета. Сохраняя одинаковость яркостей составляющих, но изменяя величину яркости, можно получить всю шкалу оттенков серого цвета (grayscale), от черного до белого. Изображения, выполненные в оттенках (или градациях) серого цвета, называют полутоновыми.

А теперь мы рассмотрим важную характеристику света, которая называется температурой. Дело в том, что современные мониторы, а также фотопленки характеризуются, помимо прочего, величиной цветовой температуры, и фотохудожники, кинооператоры и полиграфисты не могут ею пренебречь. Более того, профессионалы в значительной мере отличаются от любителей тем, что хорошо понимают и умело используют это понятие в своей практике. Мы различаем зимний и летний полуденный белый свет в ясную погоду, отличаем утренний и вечерний белый свет от ясного неба. Мы уж не говорим о различиях белого света при различных вариациях состояния атмосферы: облачность, туман, видимость солнца и т. п. А как насчет освещения ламгкши в помещении? Лампы могут быть обычными, т. е. лампами накаливания, а также дневного света с различными наполнителями. Лампы дают нам белый, но особенный свет. И эти различия белого света можно описать количественно, просто через температуру света.

Откуда взялось понятие «белый свет»? Белый свет исходит от Солнца, неба (даже тогда, когда Солнца не видно), электрических ламп. Таким образом, белый свет создается природой и искусственными приборами. Вместе с тем, при его изучении выяснились следующие весьма любопытные обстоятельства.
Как уже отмечалось, белый свете помощью обычной стеклянной призмы можно разложить на множество составляющих различного цвета. Эту разноцветную шкалу обычно называют спектром. Но спектр это не просто шкала цветов. Каждый участок этой шкалы характеризуется еще одной характеристикой — мощностью (яркостью, интенсивностью) излучения в соответствующем диапазоне волн. Вспомним, что свет (излучение, распространяющееся в виде волны) воспринимается глазом как окрашенный в тот или иной цвет в зависимости от длины волны. Таким образом, мы могли бы представить спектр как некоторую кривую в системе координат, по горизонтальной оси которой отложены значения длины волны, а по вертикальной — энергия излучения. Вдоль горизонтальной оси дополнительно можно растянуть линейку соответствующих цветов, для наглядности. Чтобы идти дальше, нам понадобится еще одна абстракция: так называемое абсолютно черное тело. Но сначала скажем о просто черном теле.

Понятно, что это — любое тело, воспринимаемое нами как окрашенное в черный цвет. Например, черная бархотка, нагуталиненные сапоги, сажа и т. п. Мы уже знаем, что черное тело потому и черное, что поглощает почти все составляющие падающего на него белого цвета. Так вот: абсолютно черное тело поглощает абсолютно все падающее на него электромагнитное излучение (в том числе и белый свет) и ничего не отражает. Однако если абсолютно черное тело нагреть, то оно начнет излучать. Спектр этого излучения зависит только от температуры нагрева тела и не зависит от природы его материала. Напомним, что спектр — это распределение энергии излучения по длинам волн. На рисунке показана зависимость энергии Е излучения абсолютно черного тела от длины волны , излучения и температуры Т.

Рис. 4. Распределение энергии в спектре излучения абсолютно черного тела

Обратите внимание на то, как зависит длина волны, при которой энергия излучения максимальна, от температуры. В результате опытов В. Вин вывел формулу этой зависимости:

*T = k,

где k — постоянный коэффициент, называемый постоянной Вина;
Т — температура излучающего тела.

Из этой зависимости, называемой также законом смещения Вина, следует, в частности, что чем выше температура нагретого тела, тем короче волны, на которые приходится максимум энергии излучения.

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


Рис. 5. Модель абсолютно черного тела. Все излучение, падающее на него, полностью поглощается

Температуру света (излучения) измеряют в градусах по шкале Кельвина. Это линейная шкала, в которой 0 соответствует примерно -273 градусам по шкале Цельсия. Ноль градусов по Кельвину называют абсолютным нулем температуры. При этой температуре, согласно физике, ничто не движется и ничто не излучается. Когда мы говорим, что белый свет имеет температуру Т градусов по Кельвину, то это означает, что он имеет такой же спектр, что и излучение абсолютно черного тела, нагретого до указанной температуры. Аналогично, если мы говорим, что, например, красный цвет и мест температуру Т, то это означает, что он имеет такой же вид, что и красный цвет в спектре абсолютно черного тела, нагретого до температуры Т.

Понятие абсолютно черного тела ввел в науку Г. Кирхгоф в 1859 г., а объяснение различий света в зависимости от времени суток, сезона и атмосферной обстановки дал Рэлей на рубеже XIX и XX вв.

В следующих таблицах представлено соответстние между некоторыми источниками белого смета и температурой и градусах по шкале Кельвина.

Таблица 1. Цветовые температуры, соответствующие различным условиям дневного освещения

Естественный источник света
Цветовая температура, К
Утреннее или вечернее сумеречное небо
2000
Небо близ восходящего или заходящего Солнца
2300-2400
Солнце через час после восхода
3500
Солнце за час до захода
3500
Луна
4125
Утреннее или вечернее Солнце в ясном небе под углом больше 15° над линией горизонта
3600-5000
Солнце около полудня при легкой облачности
5100-5600
Свет летнего полуденного Солнца близ поверхности Земли при ясном голубом небе
5300-5700
Свет полуденного Солнца при легкой облачности
5700-5900
Летнее Солнце в зените в синем ясном небе
6000-6500
Дневной свет неба при легкой высокой облачности
6700-7000
Дневной свет неба при сильной облачности
7000-8500
Дневной свет неба при слабой облачности
12 000-14 000
Облачное небо в северной части
12 000-25 000
15000-2700

Таблица 2. Цветовая температура искусственных источников света

Пламя спички
1700
Пламя стеариновой свечи
1850-2000
Керосиновая лампа
1900-2050
Пламя газовой зажигалки
2500
Электролампа перекальная вакуумная
2450-2500
Электролампа перекальная газонаполненная
2600-2900
Фотолампа с зеркальным рефлектором мощностью 250-500 Вт
3250-3500
Фотолампа перекальная с зеркальным рефлектором мощностьюдо 1000 Вт
3600-4000
Импульсная лампа-вспышка
3400-6500
Лампа кинопроекционная
3300-3400
Лампа прожекторная
3300-3500
Лампа галогенная
3300-3350
Вспышка магния
3650
Лампа дуговая
3700-5500
Лампа люминесцентная типа ЛТБ
2800
Лампа люминесцентная типа ЛБ
3500±300
Лампа люминесцентная типа ЛХБ
4300±400
Лампа люминесцентная типа ЛД
6750±800

Понимать, что такое температура света, а также умело использовать свет на практике особенно важно для фотографов, кино- и видеооператоров, а также для полиграфистов. Фотографы решают задачу, как будет выглядеть изображение при съемке на ту или иную пленку при том или ином освещении. Например, вид, воспринимаемый нами как голубоватый в условиях ночной съемки, может оказаться при печати зеленоватым. Дело в том, что фотопленка рассчитана на освещение белым светом определенной температуры (с допуском порядка 3000°К). Если вы снимаете ночью (даже со вспышкой), то температура белого света ночного освещения будет совсем другой, что и отразится на результатах съемки. Фотограф-профессионал может использовать подобные цветовые сдвиги для реализации своих художественных замыслов, а любитель обычно оказывается в недоумении и пытается стихийно сменить тип (марку) пленки. Кино- и видеооператоры обычно проявляют свое понимание температуры света, выбирая источник освещения сцены съемок. Для полиграфии важно, какую температуру имеет белый цвет бумаги, на которой будет производиться печать. Белая бумага может быть ослепительно белой, желтоватой, голубоватой и других оттенков. Одни и те же краски на различной белой бумаге будут выглядеть по-разному.

Следует отметить, что «психологическая» температура цвета отличается прямо противоположным образом от той, которую мы рассмотрели выше. Какой цвет, красный или синий, имеет большую температуру? Психологически мы считаем более теплыми те цвета, которые ближе к красному концу спектра, и наоборот, синий и фиолетовый цвета мы оцениваем как холодные. Однако с точки зрения теории излучения красный цвет имеет более низкую цветовую температуру, а синий — более высокую. Вспомните, как говорят о температуре звезд: охлаждающийся красный карлик и горячая голубая сверхновая звезда. Другой пример: нагревая металл, мы видим, что его цвет с увеличением температуры изменяется от красного к желтому и даже белому (если довести его до «белого каления»). Дело в том, что по закону Вина длина волны, соответствующая максимуму излучения абсолютно черного тела, обратно пропорциональна его температуре (см. графики зависимости энергии от длины волны и температуры). Чем выше температура тела, тем больше доля мощности излучения в области коротких длин волн (т. е. в области синих тонов). С увеличением температуры их роль в формировании белого цвета усиливается. Поэтому если тело представляется вам красным, то оно еще не очень разогрето, а если оно имеет голубой оттенок, то это означает, что температура его столь высока, что влияние синей части спектра стало заметным. Общее же правило таково: чем короче длина волны излучения, тем выше его температура. Здесь можно ожидать вопрос: красное и синее пятна на листе бумаге имеют совершенно одинаковую температуру, так почему же вы говорите о том, что одно из них горячее другого? Напомним, что речь идет не о температуре красок или других цветных предметов, которую можно измерить термометром, а о температуре абсолютно черного тела, которое излучает такие же спектральные составляющие, что и те, с которыми мы имеем дело в данный момент времени. Например, цвет изображения фотосферы Солнца на бумаге имеет температуру примерно 6000°К. Такова и реальная температура внешней оболочки Солнца, которая излучает видимый свет. Однако Солнце на бумаге не обжигает, не греет и даже не светит. Таким образом, речь идет не о температуре как мере тепловой энергии, а о цветовой температуре, имеющей к теплу опосредованное (через абсолютно черное тело) отношение. Кстати говоря, именно путем анализа спектра измеряют температуру звезд.

Теперь рассмотрим особенности восприятия цвета глазом человека. В области видимого света чувствительность глаза очень высока. Если человек долгое время находился в темноте, то его глаза приспосабливаются к восприятию очень малых световых потоков. В таких условиях, как установил С. Вавилов, глаз может чувствовать отдельные фотоны (кванты света). С другой стороны, большие потоки света, превосходящие самые малые в 10 12 раз, не ослепляют нас. Глаз хорошо различает цвета, хотя и по-разному реагирует на монохроматические потоки света одинаковой мощности, но разной длины волны. Желто-зеленые лучи кажутся самыми яркими, а красные и фиолетовые — темными. На рисунке показана кривая видимости лучей невооруженным глазом. Яркость желтого света (= 0,555 мкм), ощущаемая глазом, принята за 1, яркость голубого ( = 0,49 мкм) при той же мощности будет равна 0,2, а яркость красного ( = 0,65 мкм) — 0,1.


Рис. 6. Зависимость относительной чувствительности глаза к монохроматическому свету от длины волны (в миллимикрометрах, ммкм)


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

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

  

2.gif

Изображение: 

3.gif

Изображение: 

4.gif

Изображение: 

5.gif

Изображение: 

6.gif

Изображение: 

3. Модель RGB

  

Модель RGB

Цветовая модель RGB наиболее часто используется при описании цветов, получаемых смешением световых лучей. Она подходит для описания цветов, отображаемых мониторами, получаемых сканерами и цветовыми фильтрами, но не печатающими устройствами. Цвет в модели RGВ представляется как сумма трех базовых цветов — красного (Red), зеленого (Green) и синего (Blue), Из первых букв английских названий этих цветов составлено название модели. На рисунке показано, какие цвета получаются при сложении трех базовых.

Рис. 7. Комбинации базовых цветов модели RGB

В модели RGB каждый базовый цвет характеризуется яркостью (интенсивностью), которая может принимать 256 дискретных значений от 0 до 255. Поэтому можно смешивать цвета в различных пропорциях, варьируя яркость каждой составляющей. Таким образом, можно получить 256x256x256 = 16 777 216 цветов.

Каждому цвету можно сопоставить код, который содержит значения яркости трех составляющих. Используются десятичное и шестнадцатеричное представления кода. Десятичное представление — это тройка десятичных чисел, разделенных запятыми. Первое число соответствует яркости красной составляющей, второе — зеленой, а третье — синей. Код цвета в шестнадцатеричном представлении имеет вид 0хХХХХХХ. Префикс 0х указывает на то, что мы имеем дело с шестнадцатеричным числом, а не каким-нибудь другим. За префиксом следуют шесть шестнадцатеричных цифр (0, 1, 2,...,9, А, В, С, D, E, F). Первые две цифры — шестнадцатеричное число, представляющее яркость красной составляющей, вторая и третья пары соответствуют яркости зеленой и синей составляющих.
Если все составляющие имеют максимальную яркость (255,255,255 — в десятичном представлении; 0xFFFFFF — в шестнадцатеричном представлении), то получается белый цвет. Минимальная яркость (0,0,0 или 0x000000) соответствует черному цвету. Смешение красного, зеленого и синего цветов с различными, но одинаковыми яркостями дает шкалу из 256 оттенков (градаций) серого цвета — от черного до белого. Изображения в оттенках серого еще называют полутоновыми изображениями.

Базовые цвета смешиваются следующим образом:

  • Красный и зеленый — при максимальной яркости дают желтый цвет. Уменьшение яркости красного изменяет результирующий цвет в сторону зеленоватого, а уменьшение яркости зеленого делает цвет оранжевым.
  • Зеленый и синий — при максимальной яркости дают голубой. Изменяя пропорцию яркостей можно получить 65 000 оттенков голубого, от небесного до темно-синего.
  • Красный и синий — при максимальной яркости дают пурпурный или фиолетовый. Уменьшение яркости синего сдвигает цвет в сторону розового, а уменьшение красного — в сторону пурпурного.

Поскольку яркость каждой из базовых составляющих цвета может принимать только 256 целочисленных значений, каждое значение можно представить 8-разрядным двоичным числом (последовательностью из 8 нулей и единиц, 256 = 28) или, другими словами, одним байтом. Напомним, что каждый разряд в байте называется битом (двоичной единицей или нулем). Таким образом, в модели RGB информация о каждом цвете требует 3 байта (по одному байту на каждый базовый цвет) или 24 бита памяти для хранения. Заметим, что поскольку все оттенки серого цвета образуются смешением трех составляющих одинаковой яркости, то для представления любого из 256 оттенков серого требуется лишь 1 байт.

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

Модель RGB еще называют аддитивной, поскольку по мере увеличения яркости составляющих цветов увеличивается яркость результирующего цвета.

  

7.gif

Изображение: 

4. Модель CMYK

  

Модель CMYK

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

Смешение красок, которое делают печатающие устройства, описывает модель CMYK. В этой модели используются три базовых цвета: голубой (Cyan), пурпурный (Magenta) и желтый (Yellow). Кроме того, применяется черный цвет (black), но о нем будет рассказано позже. На рисунке показана комбинация базовых цветов CMYK.

Рис. 8. Комбинации базовых цветов модели CMYK

Каждый из трех базовых цветов модели CMYK получается в результате вычитания из белого цвета одного из базовых цветов модели RGB. Так, например, голубой (cyan) получается вычитанием красного из белого, а желтый (yellow) — вычитанием синего. Напомним, что в модели RGB белый цвет представляется как смесь красного, зеленого и синего максимальной яркости. Тогда базовые цвета модели CMYK можно представить с помощью формул вычитания базовых цветов модели RGB следующим образом:

Cyan = RGB - R = GB = (0,255,255)
Yellow = RGB - В = RG = (255,255,0)
Magenta = RGB - G = RB = (255,0,255)

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

RGB - RGB = RGB - RGB - ... - RGB = (0,0,0) - черный цвет
RGB + RGB = RGB + RGB + ... + RGB = (255,255,255) - белый цвет

Обратите внимание, что сложение базовых цветов CMYK дает в результате черный:

Cyan + Yellow + Magenta = RGB-R-B-G = (0,0,0)

Вычитание из белого всех базовых цветов CMYK дает белый:

RGB - (RGB - R) - (RGB - В) - (RGB - G) = RGB - RGB + R + В + G = RGB = (255,255,255)

Вычитание цвета соответствует поглощению его краской. Например, голубая (cyan) краска поглощает из падающего на нее белого света красную составляющую, а все остальное отражает. Этот отраженный свет наш глаз и воспринимает как голубой. Белый лист бумаги потому кажется нам белым, чтв он отражает практически весь падающий на него белый свет. С другой стороны, черные предметы почти ничего не отражают, а почти весь свет поглощают.
Базовые цвета модели CMYK являются довольно яркими цветами и не вполне годятся для воспроизведения темных цветов. Так, при их смешивании на практике получается не чисто черный, а грязно-коричневый цвет. Поэтому в цветовую модель CMYK включен еще и чистый черный цвет, который используется для создания темных оттенков, а также для печати черных элементов изображения. Смешение цветов в модели CMYK противоположно смешению составляющих в модели RGB. Однако краски субтрактивной модели не являются столь чисты ми, как цвета аддитивной модели. Этим и объясняются следующие особенности:

  • Голубой и пурпурный — при максимальной яркости дает глубокий синий цвет с небольшим фиолетовым оттенком. Уменьшение яркости голубого делает цвет пурпурным, а уменьшение яркости пурпурного — средне-синим (желтой краски нет совсем).
  • Пурпурный и желтый — при максимальной яркости смесь получается ярко-красного цвета. Уменьшение яркости пурпурной составляющей приводит к оранжевому, а уменьшение яркости желтой — к розовому цвету (голубая составляющая отсутствует).
  • Желтый и голубой — ярко-зеленый цвет с небольшим оттенком синего. Уменьшение яркости желтого дает изумрудный цвет, а уменьшение яркости голубого — салатовый цвет (пурпурная составляющая отсутствует).

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


Рис. 9. Взаимосвязь основных цветов RGB и С МУК

Каждый цвет расположен напротив дополняющего его и между цветами, с помощью которых он получен. Чтобы усилить какой-либо цвет, необходимо ослабить дополняющий цвет, расположенный на противоположной стороне круга. Например, чтобы усилить желтый (Yellow), надо ослабить синий (Blue). На круге цветов желтый расположен между зеленым (Green) и красным (Red). Сложение этих цветов цветов дает желтый (Yellow).

В заключение данного раздела следует отметить, что не все цвета модели CMYK могут быть представлены в модели RGB и наоборот. В количественном отношении цветовой диапазон CMYK меньше цветового диапазона RGB. Это обстоятельство имеет принципиальное значение, а не обусловлено только физическими особенностями монитора, печатающего устройства или красок и холста.

  

8.gif

Изображение: 

9.gif

Изображение: 

5. Модели HSB и HLS

  

Модели HSB и HLS

Модель HSB основана на трех параметрах: Н — оттенок или тон (Hue), S — насыщенность (Saturation) и В —яркость (Brightness). Модель HSB лучше, чем RGB и CMYK, соответствует понятию цвета, которое используют маляры и профессиональные художники. Действительно, у них обычно есть несколько основных красок, а все другие получаются добавлением к ним белой и черной. Таким образом, нужные цвета — это некоторая модификация основных: замесить погуще или развести пожиже, осветлить или затемнить. Хотя художники и смешивают краски, но это уже выходит за рамки модели HSB («...есть многое на свете, друг Горацио, что и не снилось нашим мудрецам...»).

Насыщенность характеризует чистоту цвета. Нулевая насыщенность соответствует серому цвету, а максимальная насыщенность — наиболее яркому варианту данного цвета. Можно считать, что изменение насыщенности связано с добавлением белой краски. То есть уменьшение насыщенности соответствует добавлению белой краски.

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

Графически модель HSB можно представить в виде кольца, вдоль которого располагаются оттенки цветов. На внешнем крае круга находятся чистые спектральные цвета или цветовые тона (параметр Н измеряется в угловых градусах, от 0 до 360). Чем ближе к центру круга расположен цвет, тем меньше его насыщенность, тем он более блеклый, пастельный (параметр S измеряется в процентах). Яркость (освещенность) отображается на линейке, перпендикулярной плоскости цветового круга (параметр В измеряется в процентах). Все цвета на внешнем круге имеют максимальную яркость.


Рис. 10. Графическое представление модели HSB

В некоторых графических редакторах, например в Macromedia FreeHand, используется модель HLS (Hue, Lightness, Saturation), которая похожа на HSB. В модели HLS, в отличие от HSB, вместо яркости используется параметр L— освещенность (Lightness). Уменьшение освещенности приближает цвет к черному, а увеличение — к белому. Чистый спектральный цвет получается при освещенности 50%.

Модели HSB и HLS не ориентированы ни на какое техническое устройство воспроизведения цветов, поэтому их называют еще аппаратно независимыми.

  

10.gif

Изображение: 

6. Модель Lab

  

Модель Lab

Выше уже отмечалось, что модель RGB ориентирована в основном на особенности излучаемого света (монитор), a CMYK — на особенности поглощаемого света (принтер). Кроме того, цветовые диапазоны этих моделей не совпадают. Добавим, что RGB хорошо воспроизводит цвета в диапазоне от синего до зеленого и несколько хуже — желтые и оранжевые оттенки, а в модели CMYK не хватает очень многих оттенков. От всех этих недостатков свободна модель Lab. В рамках Lab работают многие профессионалы компьютерной графики.

Модель Lab основана на трех параметрах: L — яркость (Luminosity) и два цветовых параметра — а и Ь. Параметр а содержит цвета от темно-зеленого через серый до ярко-розового. Параметр b содержит цвета от светло-синего через серый до ярко-желтого.

Параметр L еще называют освещенностью, легкостью (например, в русской версии графического редактора Photoshop) и даже светлостью. Следует отметить, что понятия яркости в моделях Lab и HSB не тождественны. Как и в RGB, смешение цветов из шкал а и b позволяет получить более яркие цвета. Уменьшить яркость результирующего цвета можно за счет параметра яркости L.

Рис. 11. Графическое представление модели Lab

Модель Lab аппаратно независима, ее цветовой диапазон покрывает диапазоны RGB и CMYK. Графический редактор Photoshop при переходе от режима RGB к CMYK использует Lab в качестве промежуточного этапа.

  

11.gif

Изображение: 

7. Цветовой охват

  

Цветовой охват

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

Наибольшим цветовым охватом обладает модель Lab, в ней можно представить практически все цвета природы, которые способен воспринять человек. Собственно, с этой целью она и создавалась. Соотношение цветовых охватов моделей Lab, RGB и CMYK представлено на рисунке.


Рис. 12. Цветовой охват различных цветовых моделей

  

12.gif

Изображение: 

8. Пикселы и глубина цвета

  

Пикселы и глубина цвета

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

Представим себе некоторое изображение и нанесем на него прямоугольную сетку с квадратными ячейками. Ячейки сетки могут быть маленькими или большими, сейчас это не важно. Каждой ячейке сетки соответствует элемент изображения, который в ней находится. Этот квадратный элемент называется графическим элементом (picture element) или, сокращенно, пикселом (pixel). Мы создали основу для разложения изображения на множество элементов — пикселов. Теперь нам надо определить способ описания одного пиксела, чтобы затем описать все изображение как совокупность описаний отдельных пикселов.
В каждой клетке сетки, нанесенной на изображение, может находиться какая-то часть нашего изображения. Клетка может быть заполнена полностью, либо частично. Заполнение может быть однородным, либо неоднородным по цвету. Требуется решить, что же содержит клетка. Уже сейчас сами собой напрашиваются правила определения этого решения. Например, мы можем считать, что клетка целиком заполнена красным цветом, если преимущественный цвет ее окраски является красным. Однако на данном этапе рассмотрения это не столь важно. Будем считать, что эти правила как-то определены. В результате их применения мы преобразуем исходное изображение в некоторое другое. На рисунке показаны простые черные кривые на белом фоне. Здесь нет ни вариаций цвета, ни даже градаций серого. Представьте, что получится, если, например, заменить все клетки, зак-эашенные черным менее чем наполовину, белыми клетками, а более чем «половину — черными. Ясно, что это будет другая картинка. Мы не думаем сейчас о том, будет ли она лучше или хуже. Важно лишь то, что картинка как-то изменится. Именно это новое изображение будет тем, которое мы и сохраним в нашем протофайле.


Рис. 13.
Сетка на изображении. Каждая клетка соответствует пикселу. Требуется решить, какой цвет содержит каждый пиксел
Итак, основа протофайла создана. Это — описание цветов всех пикселов (клеток) сетки, нанесенной на исходное изображение. Как описать цвет пиксела, вы уже знаете из предыдущей главы. Описание цвета пиксела является, по существу, кодом цвета в соответствии с той или иной цветовой моделью. Например, в модели RGB каждый пиксел описывается тройкой чисел, соответствующих яркостям базовых составляющих. В модели CMYK пиксел описывается четверкой чисел. В моделях Lab и HSB пиксел описывается тройкой чисел, соответствующих значениям параметров этих моделей. Указание на цветовую модель нужно также включить в протофайл. Кроме того, в протофайл необходимо записать, сколько пикселов по ширине и высоте имеет наше изображение. Сведения о цветовой модели, габаритах изображения и, может быть, еще о чем-то (например, об авторе картинки) включаются в специальный раздел файла, обычно называемый заголовком. После заголовка в файле записываются друг за другом коды цветов (или параметров цветовой модели) отдельных пикселов, слева направо и сверху вниз. Наш идеальный графический файл готов! Напомним, что рассмотренная структура файла не используется на практике в точности. Однако файлы реального формата BMP имеют очень похожую структуру. Это не случайное совпадение и даже не упрошенное описание одного из существующих форматов. Дело в том, что простая, почти самоочевидная, идея описания графики, изложенная выше, нашла свое воплощение в одном из реально существующих (и, кстати, самых древних) форматов графических файлов. Простые идеи реализуются раньше других.

Как было отмечено выше, цвет пиксела описывается несколькими числами. Эти числа еще называют каналами. В случае моделей RGB, CMYK и Lab эти каналы называют также цветовыми каналами. Числа можно представлять в различных системах счисления. В обычной практике мы используем десятичную систему, в которой для записи чисел применяются 10 цифр (0, 1, 2,..., 9). В программировании часто используется шестнадцатеричная система счисления 0, 1, 2,..., 9, А, В, С, D, Е, F). Работа компьютеров основана на двоичной системе с двумя цифрами — 0 и 1. Двоичную цифру называют битом. Бит может принимать только одно из двух возможных значений. Количество бит, отводимое на каждый пиксел для представления цветовой информации, называют цветовой глубиной (color depth) или битовой глубиной цвета (bit depth).

Цветовая глубина определяет, как много цветов может быть представлено пикселом. Например, если цветовая глубина равна 1 бит, то пиксел может представлять только один из двух возможных цветов — белый или черный. Если цветовая глубина равна 8 бит, то количество возможных цветов равно 28 = 256. При глубине цвета 24 бит количество цветов превышает 16 млн. Иногда под цветовой глубиной понимают максимальное количество цветов, которые можно представить. Очевидно: чем больше цветовая глубина, тем больше объем файла, содержащего описание изображения.

Изображения в системах RGB, CMYK, Lab и оттенках серого (gray scale) обычно содержат 8 бит на один цветовой канал. Поскольку в RGB и Lab три цветовых канала, глубина цвета в этих режимах равна 8x3 = 24. В CMYK четыре канала и поэтому цветовая глубина равна 8x4 = 32. В полутоновых изображениях только один канал, следовательно, его цветовая глубина равна 8. Однако Photoshop может воспринимать RGB, CMYK, Lab и изображения в оттенках серого, содержащие 16 бит на канал.

  

13.gif

Изображение: 

9. Установка цвета в Photoshop

  

Установка цвета в Photoshop

Цветовые модели используются в мощных графических редакторах путем установки цветового режима. Например, в редакторе Photoshop выбор режима, соответствующего той или иной цветовой модели, производится в подменю команды Image>Моdе (Изображение>Режим). Важно отметить, что при переходе между режимами возможно изменение цветов, причем необратимое. Однако открытие графического файла в режиме Lab совершенно безопасно.


Рис. 14. Установка цветового режима в Photoshop

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


Рис. 15. То же изображение в режиме CMYK (цвета более тусклые) и в режиме RGB

Выбор цвета в графических редакторах обычно производится с помощью панели инструментов, позволяющей определить основной цвет (Foreground color, цвет переднего плана) и цвет фона (Background color). В Photoshop на панели инструментов предусмотрены четыре элемента для управления цветом:
Основной цвет или, иначе, цвет переднего плана — это цвет, который используют инструменты рисования: Brush (Кисть), Pencil (Карандаш), Реn (Перо) и т. д. Цвет фона используется инструментом Eraser (Ластик) и Gradient (Градиент). Переключение цветов (switch color) меняет местами основной цвет и цвет фона. Цвета по умолчанию (default colors): черный — основной, белый — цвет фона.


Рис. 16. Элементы управления цветом а Photoshop

  

14.gif

Изображение: 

15.gif

Изображение: 

16.gif

Изображение: 

10. Диалоговое окно Color Picker

  

Диалоговое окно Color Picker

Когда вы щелкаете на элементе выбора цвета (квадратик), открывается диалоговое окно выбора цвета Color Picker (Сборщик цветов). Ниже описаны его элементы.


Рис. 17. Окно Color Picker

Текущий цвет. Циет, который вы выбрали и цветовом поле, отображается в верхней части прямоугольника правее цветовой шкалы. Если щелкнуть на кнопке ОК или нажать клавишу <Enter>, то этот цвет будет установлен как основной или как цвет фона в зависимости от того, как вы вошли в окно выбора цвета из панели инструментов.
Предыдущий цвет. Цвет, который вы выбрали на предыдущем этапе. Он отображается в нижней части прямоугольника, расположенного правее цветовой шкалы. Разделение этого прямоугольника на две части происходит, если вы выбирали цвет хотя бы дважды. Какой это цвет, основной или фона, зависит от способа входа в окно выбора цветов.
Цветовая шкала позволяет указать цвет, который вы хотите выбрать, в 8-разрядном представлении. Это делается перетаскиванием мышью ползунков или просто щелчком в нужном месте шкалы. На шкале представляется 2 8= 256 цветов или оттенков одного цвета в зависимости от состояния переключателей, расположенных правее.
Цветовое поле отображает цвета в 16-разрядном представлении, т. е. охватывает 216 = 65 536 цветов или оттенков одного цвета. Вместе же цветовое поле и шкала отображают более 16 млн цветов (65 535x256 = 16 777 216). Что именно отображается на цветовой шкале и цветовом поле, зависит от состояния переключателей.
HSB. Если выбрать переключатель Н (Hue — тон), то на шкале будет отображен спектр цветов, а на цветовом поле — оттенки текущего цвета. При этом вертикальной оси соответствуют различные значения яркости, а горизонтальной оси — насыщенности.
Если выбрать переключатель S (Saturation — насыщенность), то цветовая шкала будет отображать оттенки текущего цвета так, что в верхней части шкалы расположатся наиболее насыщенные оттенки, а в нижней — наименее насыщенные (серые). При этом в цветовом поле по горизонтали развернется спектр цветов с изменяющейся яркостью по вертикали.


Рис. 18. Окно выбора цветов при выбранном переключателе S (насыщенность)

При установке переключателя В (Brightness — яркость) цветовая шкала отражает оттенки текущего цвета при различных значениях яркости (наверху наиболее яркие, внизу— наименее яркие), а в цветовом поле располагается спектр с изменяющейся по вертикали насыщенностью.

Если вы собираетесь рисовать, а не корректировать изображение, то эта модель, возможно, лучше других подойдет вам. Впрочем, то же самое мы могли бы сказать и о модели Lab. Напомним, что HSB и Lab являются в некотором смысле наиболее естественными для общечеловеческой практики моделями цветов, приспособленными для синтеза цветов на компьютере.

Значения параметров Н, S, В можно ввести с клавиатуры. Н принимает значения от 0 до 360 градусов. Вспомните, что в модели HSB оттенок распределен по окружности. Параметры S и В измеряются в процентах и принимают целочисленные значения от 0 до 100.

RGB. Переключатели R (Red — красный), G (Green — зеленый) и В (Blue — синий) позволяют управлять с помощью шкалы отдельными составляющими текущего цвета. При этом в верхней части шкалы отображается текущий цвет при различных значениях яркости выбранной составляющей (наверху — максимальная яркость, внизу — минимальная). Например, если выбран переключатель R, то шкала представляет спектр текущего цвета при различных значениях красной составляющей (от 0 внизу до 255 вверху). Параметры R, G, В принимают значения от 0 до 255. Их можно ввести с клавиатуры.


Рис. 19. Окно выбора цветов при выбранном переключателе R (красный)

Lab. Переключатель L (яркость) отображает на цветовой шкале текущий цвет при различных значениях яркости (в модели Lab). Значение яркости можно ввести вручную. Эта величина может принимать целочисленные значения от 0 до 100. Параметры а и b принимают целочисленные значения от -128 до 127. Рекомендуем поэкспериментировать с этим представлением, чтобы понять, что и как отображается в цветовом поле.

CMYK. Значения параметров цветовой модели CMYK вводятся с клавиатуры и измеряются в процентах. Они могут принимать целочисленные значения от 0 до 100. Рекомендуем поэкспериментировать и с этим представлением, чтобы прочувствовать, что и как отображается в цветовом поле.

Цвета Web. Все графические изображения, создаваемые для Web. должны использовать либо цветовую модель RGB, либо подмножество индексированных цветов, либо представляться в градациях серого цвета. Это — общее правило. Однако в Интернете существует великое множество мониторов с низким разрешением цветопередачи — 256 цветов. Даже если ваша картинка создана в палитре из 256 цветов, это еще не означает, что она будет отображена в браузере Web-страниц так же, как вы ее видите в своем редакторе. Кроме того, имеются мониторы, отображающие цвет ярче других не только потому, что они «моложе». Так, мониторы у компьютеров с Mac OS в стандартном режиме светятся ярче, чем компьютеры с Windows. Поэтому картинка, созданная вами под Windows и опубликованная в Web, может выглядеть где нибудь в Америке не так, как вы ее задумали. Если Европа (и Россия, в том числе) в основном базируется на Windows, то Северная Америка — на Mac OS. С этим приходится считаться.

И это еще не все. В Web довольно широко используется графика с индексированными цветами. В графических редакторах можно создавать изображения с различными палитрами цветов. Однако браузеры Web-страниц имеют свою собственную палитру, содержащую 216 цветов. Эта палитра является результатом пересечения множеств цветов, содержащихся в палитрах Windows и Mac OS. Если говорить по существу, Web-палитра включает в себя те 216 цветов, значения R, G и В которых делятся нацело на 51. Это означает, что значение яркости каждого базового цвета модели RGB можно установить равным 0, 51, 102, 153, 204 или 255 (т. е. 6 возможных значений). Таким образом, палитра Web содержит 6x6x6 = 216 цветов. При выводе изображения на экран монитора, настроенный на отображение 256 цветов, браузер автоматически меняет все цвета нате, которые представлены в палитре Web. Это гарантирует, что посетители вашей страницы увидят то же, что и вы на своем мониторе.

Для учета отмеченных выше обстоятельств в окне выбора цветов в Photoshop предусмотрен флажок Only Web Colors (Только Web цвета). Если его установить, то цветовое поле будет отображать цвета, совместимые с Web в рассмотренном выше смысле.


Рис. 20. Окно выбора цветов при установленном переключателе Only Web Colors

Предупреждения о выходе из диапазона цветов. Правее прямоугольника, отображающего текущие цвета, могут появиться значки в виде треугольника и кубика. Треугольник сигнализирует, что выбранный вами цвет выходит за пределы диапазона печати (модели CMYK), а кубик — о несовместимости выбранного цвета с Web. Ниже каждого из этих значков расположен квадратик, щелчок на котором изменяет текущий цвет на ближайший совместимый.


Рис. 21. Значки предупреждений о выходе за диапазон цветов Web и пригодных для печати

В окне Color Picker (Сборщик цветов) цвет можно задать, введя его шестнадца-теричный код в поле, расположенное справа от символа #. Такой способ применяется, когда нужно очень точно установить цвет.

  

17.gif

Изображение: 

18.gif

Изображение: 

19.gif

Изображение: 

20.gif

Изображение: 

21.gif

Изображение: 

11. Палитра цветов

  

Палитра цветов

Кроме окна Color Picker (Сборщик цветов) в Photoshop есть ряд других способов выбора цвета. Цвет можно выбрать в палитре цветов, открываемой командой меню Window>Show Color (Окно>Показать цвет), а также в палитре образцов цвета, открываемой командой Window>Show Swatches (Окно>Показать образцы).

В палитре цветов Color (Цвет) цвет можно задать путем ввода числовых значений с клавиатуры, а также с помощью ползунков. Линейки с ползунками окрашены так, что позволяют увидеть, в какую сторону следует переместить ползунок, чтобы нужным образом изменить цвет. Щелчок на круглой кнопке со стрелкой в правом верхнем углу палитры раскрывает меню с командами установки режима (цветовой модели) и др. Два квадратика на панели отображают текущие цвета переднего плана и фона. Щелчок на выделенном квадратике откроет окно Color Picker (Сборщик цветов). Внизу палитры отображается цветовая полоса для выбора цвета с помощью пипетки (eyedropper). Щелкните на нужном местд цветовой полосы. При этом цвет выделенного квадратика изменится, а ползунки на цветовых линейках изменят положение. На правом конце цветовой полосы расположены белый и черный квадратики. Они служат для быстрой установки чистых белого и черного цветов.
В левой части палитры цветов, ниже квадратов основного и фонового цветов, могут появиться значки предупреждений о выходе из диапазона цветов. Треугольный значок сигнализирует о выходе из диапазона цветов CMYK, а значок в виде кубика — о несовпадении текущего цвета ни с одним из 216 цветов палитры Web (если в меню палитры была выбрана опция Web Color Sliders (Web Цвет).


Рис. 22. Палитра Color в Photoshop

Палитра образцов цветов Swatches (Образцы), в которую можно добавлять дополнительные цвета, является типичным средством для многих графических редакторов. Щелчок на клетке с нужным цветом приводит к его установке. В нижней части панели справа находятся кнопки создания нового образца и удаления образца (с изображением урны). Для создания нового образца нужно щелкнуть на соответствующей кнопке. В результате появится новый квадратик. Двойным щелчком левой кнопкой мыши на нем откройте окно (см. рисунок) и введите название образца. Щелчок на квадрате приведет к открытию окна выбора цвета Color picker (Сборщик цветов). Чтобы удалить какой-нибудь образец, нужно просто перетащить мышью соответствующий квадратик на кнопку с изображением урны.


Рис. 23. Палитра Swatches в Photoshop


Рис. 24. Создание нового образца цвета. Щелчок на квадрате откроет окно выбора цветов

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

Рис. 25. Вкладка Swatches выделена из палитры цветов в отдельную палитру

  

22.gif

Изображение: 

23.gif

Изображение: 

24.gif

Изображение: 

25.gif

Изображение: 

12. Менеджер цветов

  

Менеджер цветов

Вы можете создать собственную палитру цветов, отличную от используемой по умолчанию. Обычный способ состоит в том, чтобы сделать новую палитру на основе уже имеющейся. Этой цели служит менеджер цветов, который вызывается по команде Edit>Presets Manager (Редактирование>Инициализация менеджера). В открывшемся окне Preset Manager (Управление установками по умолчанию) в раскрывающемся списке Preset Type (Заданный тип) выберите Swatches (Образцы). Щелчок на круглой кнопке со стрелкой раскрывает меню. Для замены текущей палитры выберите в меню команду Replace Swatches (Заменить образцы), а для отображения палитры, используемой по умолчанию, — Reset Swatches (Сбросить Образцы). К существующей палитре образцов можно добавить еще одну или несколько палитр. Для этого нужно щелкнуть на кнопке Загрузить. При этом, как и в случае замены текущей палитры, откроется диалоговое окно, в котором можно выбрать файл палитры с расширением асо. Чтобы удалить образец цвета из палитры, выделите его щелчком, а затем щелкните на кнопке Удалить.

Названия образцов цветов можно изменять. Для этого следует выделить образец и щелкнуть на кнопке Rename (Переименовать), а затем ввести имя цвета. Слева от поля ввода находится квадрат, окрашенный в выделенный цве'в Если щелкнуть на нем, то откроется уже известное окно Color Picker (Сборщик цветов), в котором можно выбрать цвет. Этот цвет займет место образца, который был выделен в палитре.

Окно ввода имени образца цвета. Щелчок на квадрате откроет окно Color Picker (Сборщик цветов) для выбора цвета, который заменит выделенный образец в палитре.

Рис. 26. Окно менеджера цветов

Для сохранения изменений палитры цветов щелкните на кнопке Save Set (Сохранить установки) в окне менеджера цветов.

  

26.gif

Изображение: 

13. Цветовые книги

  

Цветовые книги

Если в окне Color Picker (Сборщик цветов) щелкнуть на кнопке Custom (Пользовательский), то откроется окно Custom Colors (Пользовательские цвета). В этом окне можно выбрать в раскрывающемся списке книгу (библиотеку, справочник) цветов и готовый образец цвета из нее. Применять цветовые книги имеет смысл, если цвета вашего изображения должны соответствовать какому-нибудь коммерческому стандарту. Это важно при подготовке изображений к печати и не имеет значения для публикации в Web. Наиболее употребимыми являются книги PANTONE и TrueMatch.

Рис. 27. Окно выбора пользовательских цветов из книг (библиотек) цветов

  

27.gif

Изображение: 

14. Индексированный цвет (Indexed Color)

  

Индексированный цвет (Indexed Color)

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

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

На практике довольно широко используются палитры, содержащие 256 цветов каждый цвет представляется одним байтом или восемью битами). Иногда используются 16-цветные (4-битные) палитры. Часто используется 16-битное представление цвета, называемое High Color. Его палитра содержит 216 = 65 536 цветов. По существу, это— индексированные RGB-цвета. Индексированные цвета используются в графических файлах формата GIF, а этот формат чрезвычайно популярен в Web-дизайне.

В Photoshop исходное изображение должно быть представлено в режиме RGB, чтобы его можно было преобразовать в систему индексированных цветов. Следует отметить, что после индексирования большинство функций редактирования в Fhotoshop не будут доступны. Если вам все же необходимо отредактировать такое изображение, то сначала переведите его в режим RGB (Image>Mode>RGB) (Изображение>Режим>RGB). После редактирования можно будет вернуться в режим индексированных цветов.

Команда Image>Mode>Indexed Color (Изображение>Режим>Индексирован-ый) открывает окно, в котором можно задать параметры представления изобра-ения в режиме индексированных цветов.

Раскрывающийся список Palette (Палитра) позволяет выбрать либо уже гото-/ю палитру, либо способ вычисления цветов для создания палитры на основе ветов, имеющихся в изображени. Возможны следующие варианты.

Рис. 28. Окно установки параметров преобразования в индексированные цвета

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

System (Системная). Возможны два варианта этого параметра, используемых для операционных систем Windows и Mac OS. Обычно применяется при создании фоновых узоров.

Web. Браузеры Web-страниц имеют собственные 216-цветные палитры. При выводе изображения на монитор, настроенный на отображение 256 цветов, браузер автоматически преобразует все цвета изображения к палитре Web.

Uniform (Универсальная). Эта палитра представляет равномерное распределение цветов спектра.

Adaptive (Адаптивная). В палитру отбираются наиболее часто используемые цвета. Возможны два варианта этого параметра — Local (Локальный) и Master (Мастер). Вариант Local позволяет учитывать цвета только в текущем изображении, а Master — в нескольких изображениях. При использовании варианта Local можно выделить на изображении некоторый участок, чтобы при построении палитры было отдано предпочтение цветам этого участка. Параметр Adaptive используется чаще других.

Perceptual (Восприимчивая) и Selective (Выборочная). Являются некоторыми вариациями параметра Adaptive. Perceptual обычно используется для фотографий, когда точность передачи важнее количества цветов. Selective лучше подходит для ярких и четких изображений. Как и и случае параметра Adaptive, параметры Perceptual и Selective имеют два варианта — Local (Локальный) и Master (Мастер).

Custom (Заказ). Позволяет загрузить цветовую палитру из файла с расширением act, а также сохранить ее в файле. Впрочем, этот же инструмент для изображения с индексированными цветами можно вызвать с помощью команды lmage>Mode>Color Table (Изображение>Режим>Палитра).

Previous (Предшествующая). Установка этого переключателя позволяет использовать последнюю цветовую палитру, созданную с помощью команды Image>Mode>Indexed Color (Изображение>Режим>Индексированный). Обычно используется в случае создания нескольких высококонтрастных изображений, которые должны выглядеть в цветовом отношении однородными. Параметр доступен, если вы хотя бы раз в текущем сеансе работы использовали команду Image>Mode>Indexed Color (Изображение>Режим>Индексированный).

Поле Colors (Цвета) позволяет задать количество (от 2 до 256) цветов в палитре. Чем меньше это число, тем меньшим по объему будет файл. Если флажок Preview (Предпросмотр) установлен, то можно наблюдать, как влияет на качество изображения выбор того или иного количества цветов в палитре. Старайтесь выбирать наименьшее значение, при котором качество изображения вас устраивает.

Раскрывающийся список Forced (Неестественный) позволяет заблокировать некоторые цвета, чтобы они остались неизменными при индексации. В раскрывающемся списке можно выбрать следующие значения:
Black and White (Черный и Белый). Сохраняет черный и белый цвета в исходном изображении.

Primaries (Изначальный). Сохраняет 8 цветов: белый, красный, зеленый, синий, голубой, темно-красный, желтый и черный.

Web. Сохраняет 216 цветов Web-палитры.

Custom (Заказ). Позволяет указать, какие цвета следует сохранить. При выборе этого варианта открывается окно Forced Colors (Принудительные цвета), в котором можно увидеть образец для каждого заблокированного цвета. Для добавления нового образца, щелкните на пустой клетке и выберите цвет в открывшемся окне Color Picker (Сборшик цветов). Чтобы разблокировать цвет, щелкните на его образце при нажатой клавише <Ctrl>.

None (Нет). Ни один из цветов не блокируется.

Флажок Transparency (Прозрачность) позволяет сохранить прозрачные области.
Раскрывающийся список Matte (Матовость) служит для выбора цвета раскраски полупрозрачных пикселов изображения. Этот параметр используется совместно с параметром Transparency (Прозрачность); если изображение не содержит прозрачных участков, то параметр Matte недоступен. Если флажок Transparency установлен, то список Matte позволяет указать цвет полупрозрачных пикселов изображения. Если флажок Transparency снят, то выбранный в списке Matte цвет заполнит как полупрозрачные, так и прозрачные пикселы. В Web-цизайне с помощью списка Matte выбирают цвет, совпадающий с цветом фона Web-страницы.
Раскрывающийся список Dither (Размытие) позволяет указать способ передачи цветовых оттенков с целью повысить качество изображения, содержащего не-эольшое количество цветов. Возможны следующие значения:

None (Нет). Каждый цвет изображения, пиксел за пикселом, отображается в Злижайший цвет палитры. Это может привести к резким переходам цвета.
Diffusion (Диффузия). Создает эффект естественного цвета.
Pattern (Шаблон). Доступен только для палитры Mac OS (Системная). Специалисты не рекомендуют использовать это значение.
Noise (Шум). Пикселы накладываются по всему изображению.

Поле Amount (Количество) позволяет устанавливать уровень обработки изображения способом, указанным в списке Dither (Размытие). Небольшие значения уменьшают количество используемых цветов.

Флажок Preserve Exact Colors (Сохранить верный цвет) позволяет включить в цветовую палитру точные цвета исходного изображения. Этот параметр доступен, только если в списке Dither (Размытие) выбрано значение Diffusion (Диффузия). Если флажок установлен, то выключается размытие цвета в областях, цвет которых совпадает с цветом текущей палитры.

Цвета в изображении с индексированными цветами можно редактировать. Вы можете перекрасить все пикселы изображения, имеющие один цвет, в другой цвет. Для этого необходимо отредактировать палитру цветов. Выполните команду Image>Mode>Color Table (Изображение>Режим>Палитра). Откроется окно Color Table (Таблица цветов).

*

Рис. 29. Окно Color Table для редактирования индексированных цветов

Чтобы изменить какой-либо цвет в таблице цветов, щелкните на нем. Откроется окно Color Picker (Сборщик цветов), в котором можно выбрать нужный цвет.
Окно Color Table (Таблица цветов) позволяет загрузить/сохранить палитру из файла/в файле с расширением act. Кроме того, оно дает возможность выбрать предопределенную палитру в раскрывающемся списке Table (Таблица).

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

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

  

28.gif

Изображение: 

29.gif

Изображение: 

30.gif

Изображение: 

15. Изображения в оттенках серого цвета

  

Изображения в оттенках серого цвета

Изображения в оттенках серого цвета (gray scale) называют также полутоновыми. Мы уже упоминали о них в предыдущих разделах. В Photoshop вы можете преобразовать любое изображение в полутоновое, независимо от того, в каком режиме оно было создано или отредактировано. Для этого служит команда меню Image>Моdе>Сгауsсаlе (Изображение>Режим>Черно-белый).

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

  

1. «Цветовые каналы»

  

Цветовые каналы

Графический редактор Photoshop представляет полноцветное изображение не как единый набор цветных точек, а в виде трех или четырех наборов точек. Например, RGB-изображение состоит из трех наборов, каждый из которых представляет это изображение в одном из базовых цветов — красном, зеленом и синем. Эти наборы назынаются каналами. Каждый канал представляется как отдельное изображение. Вспомним, что в модели RGB каждая точка полноцветного изображения представляется в виде тройки чисел, первое из которых соответствует яркости красной составляющей цвета, а другие два — зеленой и синей. Чтобы получить изображение одного какого-нибудь канала, следует в каждой точке исходного изображения оставить без изменения значение яркости соответствующего цвета, а значения яркости всех других составляющих приравнять нулю. Значение яркости одной цветовой составляющей может принимать только 256 целочисленных значений, т. е. столько же, сколько в случае полутонового (в оттенках серого) изображения. Поэтому изображение канала любого цвета представляется в редакторе в оттенках серого.

В Photoshop имеется палитра каналов, открываемая командой меню Window>Show Channels (Окно>Показать каналы). Щелчок на изображении глаза скрывает канал, а щелчок на месте, где оно должно быть, делает соответствующий канал видимым. Если видимым является только один канал, то его содержимое представляется в оттенках серого. Если видимы два канала, то соответствующее изображение представляется в цвете. Однако при желании вы можете настроить редактор так, чтобы он показывал изображения отдельных каналов в цвете Edit>Preferences>Display&Cursors (Редактирование>Предпочтения>Дисплеи и курсоры), но практика показывает, что для редактирования это неудобно. В палитре каналов кроме каналов отдельных цветов имеется составной киши, соответствующий полноцветному изображению. На следующих рисунках вы видите некоторое исходное RGB-изображение, на фоне которого показана палитра каналов, а также изображения отдельных каналов.

Рис. 40. RGB- изображение и палитра Channels

При анализе полутоновых (в оттенках серого) представлений цветовых каналов необходимо иметь некоторую сноровку. Например, что означает белый цвет в красном канале RGB-изображения? Это красный цвет максимальной яркости. А что означает, например, бледное, почти полностью белое представление зеленого канала. Если остальные каналы достаточно темные, то все изображение выполнено преимущественно в зеленых тонах. Наконец, как выглядит полноцветное изображение, все каналы которого абсолютно одинаковы по содержанию? Изображение будет не цветным, а в оттенках серого, поскольку каждый его пиксел имеет одинаковые значения яркости для трех цветовых составляющих. В этом случае изображение не стоит хранить как RGB-изображение, лучше преобразовать его в полутоновое, что позволит в 3 раза сократить объем занимаемого места надиске. Подчеркнем, что это справедливо в случае идентичности содержимого всех трех каналов.

CMYK-изображение можно разложить на четыре канала, соответствующие голубому, пурпурному, желтому и черному цветам. Аналогично Lab-изображение раскладывается натри канала, соответствующие трем параметрам модели Lab. На следующих рисунках приведены изображения каналов для модели Lab.
Изображения, содержащие не более 256 цветов, представляются одним каналом. Это же относится и к изображениям в оттенках серого, а также к черно-белым изображениям.

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

Иногда цветные изображения преобразуют в полутоновые (в оттенках серого). Для этого предназначена команда Image>Mode>Grayscale (Изображение>Режим>Черно-белый). Однако прежде чем воспользоваться этой командой, просмотрите содержимое цветовых каналов. Быть может, достаточно оставить один из них (например, красный или зеленый), а остальные удалить? Этим способом мы получаем изображение в оттенках серого без использования алгоритма учета всех цветовых каналов, что может быть полезным, если изображение в одном или двух каналах имеет дефекты.

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

Идея разложения цветного изображения на три канала в оттенках серого возникла еще в цветной фотографии. Сделаем с цветного предмета три обычных черно-белых снимка, освещая его красным, зеленым и синим светом. Изготовим три отпечатка на позитивных черно-белых фотопленках. Затем окрасим каждую пленку в цвет того света, которым освещался предмет съемки. С помощью трех проекционных фонарей совместим на экране все три цветных изображения. В результате получим изображение предмета в его исходных цветах.

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

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

С негативной пленки получают позитив, и на нем соотношение темных и светлых пятен будет противоположным: красно-желтые цвета дадут светлые пятна, а сине-зеленые — темные. Тем же способом получают и две другие позитивные пленки. На негативе, снятом в зеленых лучах, почернение будет там, где предмет окрашен в голубой, зеленый, желтый, белый и серый цвета. На негативе, снятом в синем свете, почернение произойдет там, где предмет окрашен в»синий, голубой, пурпурный и белый цвета.

В 30-х годах XX века были изобретены способы получения цветной фотографии не с трех, а с одной негативной пленки. При этом съемка производится в обычном белом свете на специальную цветную пленку с тремя светочувствительными слоями, каждый из которых чувствителен только к одному цвету.

  

40.gif

Изображение: 

16. Изображения в Bitmap

  

Изображения в режиме Bitmap

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

В Photoshop режим Bitmap (Битовое) доступен только для изображений в оттенках серого. Чтобы представить полутоновое изображение в режиме (Bitmap), следует выполнить команду меню Image>Mode>Bitmap (Изображение>Режим>Би-товое). При этом откроется окно, в котором можно указать разрешение (output) результирующего изображения и выбрать метод преобразования. Параметр Input (Ввод) представляет разрешение исходного изображения. Что такое разрешение, будет подробно рассмотрено в главе 2, а здесь лишь отметим, что разрешение есть количество пикселов на единицу длины (дюйм или сантиметр).

Рис. 31. Окно установки параметров для режима Bitmap

Если в качестве метода преобразования выбрать Custom Pattern (Заказной шаблон), то станет доступной палитра шаблонов (узоров) для представления изображения.

Рис. 32. Окно установки параметров режима Bitmap с палитрой шаблонов

Рассмотрим параметры преобразования в Bitmap более подробно.
Поле Output (Результат) устанавливает разрешение результирующего (выходного) изображения. Обычно значение в этом поле устанавливается равным разрешению принтера. Рекомендуется устанавливать значение в 2-2,5 раза большее, чем разрешение исходного изображения.

Метод 50% Threshold (50% Порог) делает псе пикселы с яркостью, меньшей или равной 50%, черными, а остальные — белыми.

Pattern Dither (Шаблон) — преобразование с использованием геометрических узоров. Обычно используется для создания некоторого текстурного эффекта.

Рис. 33. Слева полутоновое изображение, справа — черно-белое, полученное в результате применения метода 50% Tlireshold

Diffusion Dither (Диффузия) — результат этого метода лучше рассмотреть на рисунке, чем описать словами.


Рис. 34. Результат применении метода Pattern Dither. Справа показан увеличенный фрагмент

Halftone Screen (Полутона) — при выборе этого метода появляется диалоговое окно Halftone Screen (Полутональный экран), в котором можно задать параметры растрирования:

Рис. 35. Результат применения метода Diffusion Dither. Справа показан увеличенный фрагмент

Frequency (Частота) — частота точек растра;
Angle (Искаженность) — угол наклона точек растра (в градусах);
Shape (Форма) — форма точки растра (выбирается в раскрывающемся списке).
Halftone Screen

Рис. 36. Результат применения метода Halftone Screen. Слева — частота строк 53 строки/ дюйм, справа — 30 строк/дюйм

Мы рекомендуем самостоятельно поэкспериментироиать с различными значениями параметров метода Halftone Screen.

Custom Patern (Заказной шаблон) — преобразование на основе узора, выбираемого из палитры. Обычно используется для создания некоторого текстурного эффекта.

В режиме Bitmap (Битовое) Photoshop позволяет редактировать отдельные пикселы изображения. Однако более серьезные операции оказываются недоступными. В частности, возврат к полутоновому режиму невозможен. Обычно преобразование в Bitmap производится (если уж это необходимо) после окончания редактирования изображения в полутоновом режиме.

  

31.gif

Изображение: 

32.gif

Изображение: 

33.gif

Изображение: 

34.gif

Изображение: 

35.gif

Изображение: 

36.gif

Изображение: 

17. Изображения в режиме Duotone

  

Изображения в режиме Duotone

Полутоновые (в оттенках серого) изображения могут содержать до 250 градаций уровня яркости. Однако печатающие устройства могут воспроизводить значительно меньшее количество полутонов. Например, лазерный принтер может воспроизвести не более 26 оттенков серого цвета. Дуплексные изображения позволяют сохранить контрастность и множественность полутоновых различий за счет использования двух различных красителей. Photoshop позволяет подготавливать триплексные (3 красителя) и квадроплексные (4 красителя) изображения.

Чтобы преобразовать полутоновое изображение в дуплексное, триплексное или квадроплексное, следует выполнить команду Image>Mode>Duotone (Изображение>Режим>Дуплексный). Откроется окно Duotone Optibns (Дуплекс параметры). В этом окне можно задать тип преобразования — одно-, двух-, трех- или четырехкрасочный. Для задания цвета красителя нужно щелкнуть на соответствующем цветном квадрате и выбрать цвет в диалоговом окне Color Picker (Сборщик цветов).

Рис. 37. Окно Duotone Options

Если щелкнуть на квадрате с прямой или кривой линией, то откроется окно, в котором можно скорректировать вид двухоттеночной кривой, которая задает преобразование яркостей пикселов. Как пользоваться этим инструментом, подробно рассмотрено в .

Рис. 38. Окно Duotone Curve

  

1. главе 2

 

ГЛАВА 2. КОРРЕКЦИЯ ИЗОБРАЖЕНИЙ

 

1. Коррекция изображений

  

Корекция изображения

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

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

  

2. Делаем тестовое изображение

  

Делаем тестовое изображение

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

Эксперименты нужны для практического овладения как понятиями компьютерной графики, так и множеством инструментов. В книге ограниченного объема все не опишешь. Самый быстрый путь правильного усвоения идей, методов и приемов — самостоятельная практическая работа. Для этого, прежде всего, надо взять готовую картинку и попробовать применить к ней различные инструменты, варьируя их параметры. Однако если картинка не очень удачная, вы рискуете не понять, что позволяет делать тот или иной инструмент, где границы его возможностей и чем отличаются различные инструменты. Многие начинающие пользователи графических редакторов, совершенно случайно получив положительный эффект на некоторой картинке, полагают, что это произошло благодаря особенным свойствам выбранного инструмента. И наоборот, не добившись положительного эффекта, они забраковывают этот инструмент.

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

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

Итак, создадим сначала простое тестовое изображение в виде градиента. Создадим прямоугольник, который зальем (как говорят компьютерные графики) градиентом. Пользователи графических программ с ходу понимают, что и как надо сделать. Для новичков мы разъясним более подробно.

Задача в том, чтобы создать некоторое изображение. Для этого нужен графический редактор. Мы выбираем Adobe Photoshop 6.0. Однако вы можете воспользоваться и другими имеющимися у вас под рукой графическими редакторами, например, Corel PHOTO-PAINT, CorelDRAW, Macromedia FreeHand, Macromedia Flash и др. Это можно сделать как в растровом, так и в векторном графическом редакторе. Нужен любой редактор, который позволяет не только корректировать имеющиеся изображения, но и создавать новые (собственные). В одном из самых популярных, растровом графическом редакторе Adobe Photoshop, в меню File (Файл) выбираем опцию New (Новый) для создания нового графического документа. Когда в главном окне редактора появится окно с новым пустым документом, на панели инструментов выбираем «Градиент» (этот инструмент находится правее инструмента «Ластик»). Если в данный момент там находится не «Градиент», а «Ведро» , то щелкните на нем правой кнопкой мыши и выберите в раскрывшемся меню инструмент «Градиент». Далее, перейдите в окно с новым (пустым) документом изображения и протяните мышью линию из левого верхнего угла в правый верхний угол в этом окне. Тем самым вы указываете, где и насколько широко залить градиентом новое изображение.

Рис. 57. Создание градиента в Photoshop

После того, как у вас это получилось, сохраните изображение в файле типа jpg или tif командой File>Save As (Файл>Сохранить как). Теперь у вас есть файл с изображением градиента, который вы сможете загружать в графический редактор для последующих экспериментов.

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

  

57.gif

Изображение: 

3. Разрешение

  

Разрешение

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

Если говорить точнее, то разрешение есть величина, измеряемая как количество пикселов на единицу длины. Например, часто разрешение измеряют в пикселах на дюйм (pixels per inch, ppi), 1 дюйм = 2,54 см. Иногда разрешение измеряют числом пикселов, содержащихся в квадратном дюйме. Очевидно, что разрешению N ppi соответствует разрешение N2 пикселов на квадратный дюйм.
Дисплей монитора состоит из множества элементов, которые могут воспроизводить цвет. Эти элементы нередко также называют пикселами, хотя это и неправильно. Однако понимая, о чем говоришь, можно позволить себе некоторую небрежность в терминологии. Поэтому говоря об отображении картинки на дисплее, мы имеем в виду отображение пикселов этой картинки на пикселы дисплея. Монитор можно настроить на отображение 640x480, 800x600, 1024x768, 1152x864, 1280x1024 и 1600x1200 пикселов соответственно по ширине и высоте. Важно, что отношение ширины к высоте равно 4:3. Таков стандарт.

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

Web-дизайнеры, проектируя внешний вид Web-страницы, учитывают типовые размеры дисплеев и размеры картинок, которые они собираются разместить на странице. Они чаще заняты не созданием одной картинки из нескольких, а расположением нескольких картинок в окне браузера (на экране монитора). Поэтому для них важнее не разрешение картинки, а ее размеры. Однако если размеры определены в пикселах, то пересчитать их в разрешение не представляет особого труда. Еще раз напомним, что разрешение это всего лишь плотность пикселов. Вспомните детскую загадку: что тяжелее — 1 кг пуха или I кг свинца?

На следующих двух рисунках показано одно и то же изображение с одинаковыми размерами, но с разными разрешениями. Разрешение первого — 480x360 пикселов, второго — 120x90 пикселов, т. е. в 4 раза меньше по каждому измерению. Чтобы второе изображение с меньшим разрешением имело такое же качество, как первое, необходимо уменьшить размеры его представления на экране или бумаге.

Рис. 58. Изображение с разрешением 480x360 пикселов


Рис. 59. Изображение с разрешением 120x90 пикселов

Рис. 60. Изображения с разрешением 120x90 пикселов, уменьшенные в размерах

В Photoshop можно устанавливать размеры изображения без изменения разрешения, а также устанавливать разрешение независимо от размеров. Для этого служит команда Image>Image Size (Изображение>Размер изображения). Она открывает окно Image Size (Размер рисунка). Если установить флажок Resample Image (Тип масштабирования), то значение в поле Resolution (Разрешение) не будет связано с размерами изображения в полях Width (Ширина) и Height (Высота). При изменении размеров изображения Photoshop использует метод интерполяции пикселов, выбираемый в раскрывающемся списке Resample Image (Тип масштабирования). Наиболее плавные переходы дает Bicubic (Бикубическая) интерполяция, Bilinear (Билинейная) интерполяция работает быстрее, а метод интерполяции Nearest neighbor (По соседним точкам) либо удаляет лишние пикселы, либо дублирует соседние.

Рис. 61. Окно изменения размеров и разрешения изображения

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

  

58.gif

Изображение: 

59.gif

Изображение: 

60.gif

Изображение: 

61.gif

Изображение: 

4. Яркость

  

Яркость

О яркости (brightness) много говорилось в предыдущей главе. Мы отмечали, что цвет характеризуется яркостью — величиной, принимающей целые значения от 0 до 255. В графических редакторах можно корректировать яркость как всего изображения в целом, так и отдельных его цветовых каналов (если разделение на каналы предусмотрено в этом редакторе). Изменение яркости изображения означает изменение яркости всех пикселов изображения (цветового канала), от самых темных до самых ярких. Иначе говоря, коррекция яркости изображения (канала) тотальна. Другие характеристики изображения, такие как контрастность и гамма (см. следующие разделы этой главы), определяются в конечном счете через яркость (но по другим алгоритмам), поэтому рассмотрим ее более подробно.

Рис. 62. Яркость изображения в диапазоне значений от 0 до 100

С помощью инструментов графического редактора можно установить яркость изображения в диапазоне значений от 0 до 100. Исходным значением является 50. Это означает, что при открытии файла изображения в графическом редакторе его яркость принимается равной 50. При желании вы можете изменить ее в ту или иную сторону.

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

  

62.gif

Изображение: 

5. Контрастность

  

Контрастность

Контрастность (contrast) является характеристикой изображения, определяемой через яркость. Точнее, значение контрастности влияет на яркость пикселов но не тотально (как при регулировке яркости изображения), а по некоторому алгоритму. Этот алгоритм довольно прост.

Управляя контрастностью, мы управляем яркостью не всех пикселов изображения, а только некоторой их части, яркость которых находится в некотором диапазоне. По существу, контрастность можно определить как диапазон тонов средней яркости. При увеличении контрастности диапазон яркости средних тонов сужается, а при уменьшении контрастности, наоборот, увеличивается. Так, при увеличении контрастности пикселы, имеющие яркость выше некоторого значения, приобретают еще большую яркость, а пикселы, имеющие яркость ниже некоторого значения, становятся еще темнее. Грубо говоря, с увеличением контрастности светлые пикселы становятся светлее, а темные — темнее. При этом область средних яркостей сужается. При уменьшении контрастности все происходит противоположным образом: диапазон средних яркостей расширяется за счет того, что светлые пикселы темнеют, а темные светлеют. Максимально контрастное изображение вообще не содержит пикселов средней яркости, а в минимально контрастном изображении все пикселы серы.

Рис. 63. Контрастность изображения в диапазоне значений от 0 до 100

С помощью инструментов графического редактора можно установить контрастность изображения в диапазоне значений от 0 до 100. Исходным значением является 50. Это означает, что при открытии файла изображения в графическом редакторе его контрастность принимается равной 50. При желании вы можете изменить ее в ту или иную сторону.

На следующих рисунках показан вышеупомянутый градиент при различных значениях контрастности.

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

  

63.gif

Изображение: 

6. Гамма

  

Гамма

Гамма является параметром изображения, который влияет на яркость пикселов исходного изображения. Однако изменению подвергаются не все пикселы, а только те из них, которые имеют среднюю яркость (т. е. не самые темные и не самые светлые). Значения яркости самых темных и самых ярких пикселов остаются без изменений. Какие именно значения яркости не затрагиваются, зависит от конкретной величины параметра гамма. Таким образом, регулировка гаммы воздействует только на средние тона. Напомним для сравнения, что при регулировке яркости все пикселы изменяют свою яркость; при регулировке контрастности алгоритм изменения яркости пикселов другой, но все же при желании мы можем «достать» как самые светлые, так и самые темные пикселы.
С помощью инструментов графического редактора можно установить значение параметра гамма в диапазоне от 0,1 до 9,9 с шагом. Исходным значением является 1. Это означает, что при открытии файла изображения в графическом редакторе его параметр гамма имеет значение 1. При желании вы можете изменить его в ту или иную сторону.

На следующих рисунках показан градиент при различных значениях гаммы.

Рис. 64. Градиент при различных значениях гаммы

Обратите внимание, что при регулировке гаммы мы, расширяя или сужая диапазон средней яркости, все же оставляем какую-то долю как самых темных (черных), так и самых светлых (белых) пикселов. Это — самое главное отличие гаммы от контрастности.

  

64.gif

Изображение: 

7. Инструменты настройки яркости, контрастности и гаммы

  

Инструменты настройки яркости, контрастности и гаммы

Во всех графических редакторах имеются средства для настройки яркости, контрастности и гаммы. Они имеют разный вид, но одинаковую суть. В Adobe Photoshop команда Image>Brightness/Contrast открывает панель для регулировки яркости и контрастности изображения. Здесь имеются и более мощные средства, но эти простые инструменты предоставляются потому, что они есть практически в любом редакторе.

Рис. 65. Панель настройки яркости и контрастности в Adobe Photoshop

Рис. 66. Панель настройки яркости, контрастности и гаммы в MS Photo Editor

Рис. 67. Панель настройки яркости, контрастности, гаммы и уровней белого и черного цветов в ACDSee

В простом графическом редакторе MS Photo Editor панель настройки яркости, контрастности и гаммы имеет аналогичный вид.

В популярной программе просмотра и коррекции изображений ACDSee кроме управления яркостью, контрастностью и гаммой можно задавать уровни белого и черного цветов. По умолчанию уровень яркости черного цвета равен 0, а белого — 255. Если, например, понизить уровень белого, то пикселы, имеющие большую яркость, приобретают максимальную яркость. Аналогично, если повысить уровень черного, то все более темные пикселы станут черными.

  

65.gif

Изображение: 

65.gif

67.gif

Изображение: 

8. Уровни и кривые в Photoshop

  

Уровни и кривые в Photoshop

Рассмотренные выше средства коррекции изображения являются глобальными, а следовательно, негибкими. Они пригодны для коррекции изображений «на скорою руку».

В Photoshop имеются еще два средства, которыми обычно пользуются профессионалы: Levels (Уровни) и Curves (Кривые). Это очень гибкие инструменты, позволяющие довольно точно скорректировать изображение, вплоть до пиксела. Они вызываются командой Image>Adjust (Изображение>Установка). Среди пользователей Photoshop есть те, которые предпочитают инструмент Levels (Уровни), другие используют исключительно Curves (Кривые). Рассмотрим эти инструменты.

  

9. Диалоговое окно Levels

  

Диалоговое окно Levels

Команда Image>Adjust>Levels (Изображение>Установка>Уровни) открывает диалоговое окно Levels (Уровни). В этом окне содержится гистограмма, которая отображает распределение пикселов изображения по уровням яркости: по горизонтали отложены уровни яркости, а по вертикали — доля пикселов с соответствующей яркостью. В раскрывающемся списке можно выбрать канал, который вы хотите редактировать. Можно корректировать и изображение целиком, не разделенное на каналы. На рисунке показано, что редактированию подвергается канал RGB, т. е. изображение в целом, которое соответствует модели RGB.

Рис. 68. Окно Levels (Уровни) в Photoshop

В окне имеются две группы полей ввода данных: Input Levels (Вводные уровни) и Output Levels (Выводные уровни). Мы считаем, что их названия лучше перевести с английского как «входные» и «выходные». Идея состоит в том, чтобы входные характеристики изображения преобразовать в новые (выходные) значения.

Входные уровни бывают трехтипов: уровень темных пикселов (левое поле), гамма (среднее поле) и уровень светлых пикселов (правое поле). Эти параметры устанавливают диапазон яркости пикселов исходного изображения, которые вы хотите подвергнуть преобразованию. Задавая значения входных параметров, вы указываете, какие пикселы требуется преобразовать, а какие — оставить без изменений. Например, введя в левое поле 128, а в правое — 200, вы указываете графическому редактору, что собираетесь изменить яркость пикселов всего изображения или только одного канала (что у вас выбрано в списке Канал ?), яркость которых лежит в диапазоне от 128 до 200. Вместо ввода числовых значений входных параметров вы можете воспользоваться ползунками, расположенными ниже гистограммы. Левый ползунок соответствует значениям левого поля ввода (уровень темного), правый — правого (уровень светлого), а средний — значениям параметра гамма. Итак, входные параметры являются аргументами преобразования яркости. Пикселы, не входящие в диапазон преобразования, остаются без изменений. В нашем примере пикселы с яркостью менее 128 и более 200 не участвуют в преобразовании, которое производится инструментом «Уровни» (Levels). В этой связи указанные входные значения называются иногда значениями отсечки.

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

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

Справа от гистограммы, полей ввода данных и ползунков находятся кнопки. Щелчок на кнопке ОК, как обычно, приводит к применению установок параметров. Кнопка Save (Сохранить) дает возможность сохранить текущие установки параметров в специальном файле с расширением alv, чтобы потом можно было их использовать. Кнопка Load (Загрузить) позволяет загрузить в диалоговое окно параметры коррекции изображения из файла с расширением alv.

Кнопка Auto (Авто) изменяет свой вид на Options (Опции) при нажатии клавиши <Alt>. Нажатие кнопки Auto (Авто) приводит к автоматической коррекции изображения по некоторому внутреннему алгоритму так, что самые темные пикселы становятся черными, а самые светлые — белыми. При этом яркость остальных пикселов равномерно распределяется во всем диапазоне яркости. Щелчок на кнопке Auto (Авто) при нажатой клавише <Alt> открывает диалоговое окно для задания так называемых диапазонов отсечения пикселов, представляющих собой доли самых темных и самых светлых пикселов (в процентах), которые будут игнорироваться при преобразовании.
Установленный флажок Preview (Предпросмотр) позволяет просматривать результаты изменения уровней в окне изображения при открытом окне Levels (Уровни).

Рассмотрим несколько примеров использования инструмента «Уровни ». Сначала в качестве корректируемого изображения возьмем градиент, т. е. прямоугольник с плавным изменением яркости пикселов. Количества пикселов различной яркости в таком изображении в идеале одинаковы.

Рис. 69. Градиент с равномерным распределением яркости пикселов

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

Рис. 70. Ввод значений выходных уровней. Гистограмма пока остается прежней, а изображение изменяется сразу

Рис. 71. Гистограмма после преобразования уровней яркости

На практике нередко приходится иметь дело с так называемыми «вялыми» изображениями. Обычно это относится к старым, выцветшим фотографиям. Проблема в том, что на них слишком мало очень темных и очень светлых тонов. Говорят, что на таких изображениях «завалены» темные и/или светлые тона. Цель коррекции таких изображений состоит в том, чтобы растянуть гистограмму по горизонтали. Для этого мы изменяем входные уровни. Например, устанавливая входные уровни черного и белого равными соответственно 60 и 190 и оставляя выходные уровни неизменными (0 и 255), мы превращаем все пикселы исходного изображения с яркостью, меньшей 60, в черные, а с яркостью, большей 190, — в белые. На следующих рисунках показано исходное неконтрастное (вялое) изображение автомобиля, а также результаты его коррекции путем изменения только входных уровней черного и белого.

Рис. 72. Исходное вялое (неконтрастное) изображение автомобиля. Преобладают средние тона, мало света, черный не выразителен. Гистограмма сосредоточена в середине шкалы яркости

Рис. 73. То же изображение после установки входных уровней: 60 -для черного, 190 — для белого. Гистограмма несколько растянулась

Рис. 74. То же изображение после установки входных уровней: 100 — для черного, 140 — для белого. Гистограмма несколько растянулась

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

Рис. 75. То же изображение после установки гаммы 0,6 и входных уровней: 100 — для черного, 140 -для белого

Рис. 76. То же изображение после установки гаммы 3 и входных уровней: 100 — для черного, 140 — для белого

Прежде чем применять инструмент Levels (Уровни) мы советуем попробовать инструмент Auto Levels (Авто Уровни), который автоматически производит коррекцию изображения. В Photoshop это команда Image>Adjust>Auto Levels (Изображение>Установка>Авто Уровни). По этой команде происходит поиск в изображении максимального и минимального значений яркости пикселов, которые затем преобразуются в значения 255 и 0 соответственно, а все промежуточные значения яркостей равномерно распределяются между ними. В рассматриваемом примере с изображением автомобиля применение этого инструмента дало, на наш взгляд, оптимальный результат.

Рис. 77. Результат применения инструмента Auto Levels (Авто Уровни)

При преобразованиях уровней яркости следует иметь в виду, что на результирующем изображении могут появиться резкие перепады яркости (блики, затемнения). Это обусловлено линейчатостью гистограммы. Взгляните на гистограммы изображения с автомобилем. Они представляют собой дискретные столбики. Это означает, что некоторых значений яркости совсем нет на изображении. Чем реже расставлены столбики гистограммы, тем больше перепады яркости (а в случае цветного изображения — и цвета) на картинке.
Подведем итоги. Если вы хорошо уяснили, что такое яркость, контрастность и гамма, то вам нетрудно будет понять, что инструмент Levels (Уровни) является всего лишь средством коррекции изображения, в котором перечисленные параметры удобно задавать во взаимной увязке. Рекомендуем самостоятельно поэкспериментировать с этим инструментом на специально подобранном тестовом изображении, лучше всего — на градиенте. Мы не приводим дальнейших иллюстраций только потому, что всего самого важного все равно не покажешь, а вредные предубеждения навязать новичку очень легко. Представьте себе видеоролик, в котором показано, как рубят дрова. Одни зрители больше смотрят на топор, а другие — на рубщика. В рубке дров важно и то, и другое. Тем не менее, главная задача нашей книги — как можно дальше растащить друг от друга «топор», «рубщика» и «дрова». Искусство же достигается экспериментальным соединением этих участников одного и того же процесса. В общем, пробуйте сами, но не тогда, когда вам нужно срочно модифицировать картинку, а не спеша, на тестовом изображении, без боязни испортить его и потерять время зря.

  

68.gif

Изображение: 

69.gif

Изображение: 

70.gif

Изображение: 

71.gif

Изображение: 

72.gif

Изображение: 

73.gif

Изображение: 

74.gif

Изображение: 

75.gif

Изображение: 

76.gif

Изображение: 

77.gif

Изображение: 

10. Диалоговое окно Curves

  

Диалоговое окно Curves

В графическом редакторе Adobe Photoshop кроме Levels (Уровней) есть еще один прецизионный инструмент, которым пользуются профессионалы. Команда Image>Adjust>Curves (Изображение>Установка>Кривые) открывает диалоговое окно Curves (Кривые). В центре окна расположен график соответствия вводных уровней яркости (по горизонтали) и выводных (по вертикали). В исходном положении этот график представляет собой прямую линию с наклоном 45 градусов. Это означает, что выводные уровни равны вводным (соответствие 1:1). Иначе говоря, если мы щелкнем на кнопке ОК, никакого преобразования не произойдет. Поле графика по умолчанию разбито на 16 квадратов. При желании его можно разбить на 100 квадратов. Чтобы переключиться из одного режима отображения сетки в другой, нажмите клавишу <Alt> и щелкните на поле.

Внизу графика отображается шкала яркости. Если темный конец шкалы находится слева, то цвета измеряются значениями яркости. Цвета RGB-изображений измеряются именно таким образом. Если щелкнуть на шкале яркости, то она инвертируется: темный конец окажется справа, а светлый — слева. В этом случае цвета измеряются в терминах типографской печати. Такая установка предусмотрена по умолчанию для черно-белых и CMYK-изображений. В Web-графике следует использовать RGB-установку, при которой темный конец шкалы находится слева, а светлый — справа.

Рис. 78. Окно Curves в Photoshop

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

Рис. 79. Задание кривых в Photoshop

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

Рис. 80. Кривая, при которой контрастность изображения увеличивается

Действительно, при такой кривой сужается диапазон средних по яркости пикселов: светлые пикселы становятся еще светлее, а темные — еще темнее.
На следующих рисунках показано, как изменение кривой влияет на тестовое изображение градиента. Мы рекомендуем самостоятельно поэкспериментировать с данным инструментом на каком-нибудь тестовом изображении.

Рис. 81. Исходное изображение градиента

Рис. 82. Повышение контрастности

Рис. 83. Повышение яркости средних тонов

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

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

Как и в окне Levels (Уровни), кнопка Save (Сохранение) позволяет сохранить установки кривых в специальном файле с расширением acv. Обратите внимание, что сохранение установок кривых производится в другом файле, отличном от файла сохранения установок уровней. Кнопка Load (Загрузка) обеспечивает загрузку в диалоговое окно Curves (Кривые) параметров из файла.

Установленный флажок Preview (Предпросмотр) позволяет просматривать результаты изменения кривой в окне изображения при открытом окне Curves (Кривые).

На следующих рисунках показаны изображения до и после коррекции с помощью инструмента Curves (Кривые).

Рис. 84. Исходное изображение

Рис. 85. Результат коррекции кривой

Итоги обзора возможностей данного инструмента можно примерно сформулировать так же, как и в случае инструмента Levels (Уровни). В литературе и Интернете можно встретить дискуссию о том, какой из этих инструментов лучше. Мы считаем, что лучше тот, которым вы лучше владеете. Однако отметим, что как Levels (Уровни), так и Curves (Кривые), превосходят по своим возможностям простые инструменты коррекции изображения (окна с ползунками коррекции яркости, контрастности и гаммы).

  

78.gif

Изображение: 

79.gif

Изображение: 

80.gif

Изображение: 

81.gif

Изображение: 

82.gif

Изображение: 

83.gif

Изображение: 

84.gif

Изображение: 

85.gif

Изображение: 

11. Резкость

  

Резкость

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

Если мы имеем дело с размытой черной линией, то понять, что такое четкая линия, довольно просто. Размытая черная линия на белом фоне имеет по краям серые пикселы, яркость которых существенно отличается от яркости пикселов «тела» линии. Чтобы повысить резкость линии, достаточно увеличить ее контрастность. В результате светло-серые пикселы станут более светлыми или даже белыми, а темно-серые еще больше потемнеют или даже превратятся в черные.

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

В Adobe Photoshop имеются средства повышения резкости и размытости изображения, которые отнесены к группе, называемой Filters (Фильтры). В других редакторах, например в MS Photo Editor, такая группа называется Effects (Эффекты). Среди фильтров Photoshop, изменяющих резкость изображения, особо отметим фильтр под несколько странным названием Unsharpen Mask (Нечеткая маска). Именно он во многих случаях наиболее эффективен.

Рис. 86. Фильтр Photoshop, позволяющий изменить резкость изображения

На следующих двух рисунках показаны две картинки. Одна из них несколько размыта, а вторая получена из первой с помощью фильтра Unsharpen Mask (Нечеткая маска). Как видно из рисунков, этот фильтр позволяет поднять, как говорят специалисты, резкость контуров.

Рис. 87. Исходное нечеткое изображение

Рис. 88. Панель Unsharp Mask

В основе алгоритма работы инструмента (фильтра) Unsharpn Mask (Нечеткая маска) лежит сравнение корректируемого изображения с слегка размытой его копией. Эта копия и называется нечеткой маской. Цель такого сравнения — выявление областей, содержащих контуры, чтобы повысить их контрастность. Сравнение происходит в небольших областях, размер которых можно установить. Степень повышения контрастности, коль скоро решение об этом принято, можно также регулировать. Наконец, мы можем задать, на сколько должны отличаться пикселы по яркости, чтобы принять решение о том, что мы имеем дело с контуром.

На панели Unsharpen Mask (Нечеткая маска) можно настроить следующие параметры:

  • Amount (Количество) — определяет степень увеличения контраста пикселов;
  • Radius (Радиус) — определяет ширину контура, подвергаемого воздействию инструмента;
  • Threshold (Порог) — определяет диапазон яркости соседних пикселов, при котором будет увеличиваться их резкость.

Фильтр Sharpen (Резкость) немного повышает резкость изображения за счет увеличения различий между цветовыми оттенками соседних пикселов.

Рис. 89. Исходное изображение

Рис. 90. Нечеткая маска (Unsharp Mask)

Рис. 91. Резкие границы (Sharpen Edges)

Рис. 92. Резкость (Sharpen)

Фильтр Sharpen More (Резкость + ) действует так же, как и Sharpen (Резкость), но примерно в три раза сильнее.

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

На следующих рисунках показано действие рассмотренных выше инструментов повышения резкости.

Рис. 93. Исходное изображение

Рис. 94. Резкие границы (Sharpen Edges)

Рис. 95. Резкость (Sharpen)

Рис. 96. Резкость (Sharpen) + (Sharpen More)

  

86.gif

Изображение: 

87.gif

Изображение: 

88.gif

Изображение: 

89.gif

Изображение: 

90.gif

Изображение: 

91.gif

Изображение: 

92.gif

Изображение: 

93.gif

Изображение: 

94.gif

Изображение: 

95.gif

Изображение: 

96.gif

Изображение: 

37.gif

Изображение: 

38.gif

Изображение: 

18. Цветовой баланс

  

Цветовой баланс

Регулировка соотношения цветов (цветового баланса) может быть выполнена с помощью команды Image>Adjust >Color Balance (Изображение>Настройка>Цветовой баланс). По этой команде открывается окно Color Balance (Цветовой баланс). Регулировка баланса может производиться как во всем тоновом диапазоне изображения, так и в отдельных его частях — в области теней (shadows), средних тонов (midtones) и светлой области (highlights). Установка переключателя Preserve Luminosity (Сохранить яркость тонов) позволяет сохранить общий уровень яркости изображения после его обработки с учетом настроек параметров цветового баланса. Обратите внимание, что при коррекции цветового баланса увеличение одной цветовой составляющей происходит за счет уменьшения другой.

Рис. 39. Окно Color Balance

  

39.gif

Изображение: 

19. Установки цвета в Flash

  

Установки цвета в Flash

В векторном редакторе Flash можно создавать различные рисунки. Простейший рисунок (фигура) представляет собой некоторую область (область заливки), обведенную линией (обводкой). Впрочем, область заливки может и не иметь обводки, а линия может су шествовать и вне связи с какой-нибудь областью заливки. Так или иначе, линия и область могут быть окрашены каждая в свой цвет (у них есть и другие параметры, значения которых могут различаться). Для линий мы будем использовать термин штрих (stroke), как это принято в графических редакторах. Штрих не обязательно короткая линия, это может быть линия произвольной длины и толщины; она может быть самостоятельным элементом вашего рисунка, а может служить контуром какой-либо фигуры.
Внимание! При описании инструментов Flash, если специально не оговорено, имеется в виду версия Flash 5.O. Особенности Flash MX (версия Flash 6.0) мы будем оговаривать особо.

  

20. Выбор цвета на панели инструментов

 

Выбор цвета на панели инструментов

В разделе Colors (Цвета) на панели инструментов Flash есть два элемента в виде цветных квадратиков. Это — обычные кнопки, щелчок на которых открывает окно для выбора цвета. Квадратик рядом с изображением карандаша служит для выбора цвета штриха (линии)— Stroke Color (Цвет штриха). Другой, рядом с изображением ведра, служит для выбора цвета заполнения замкнутых областей — Fill Color (Цвет заливки). Ниже этих квадратиков на панели инструментов расположены три кнопки:

  • С черным и белым квадратиками — устанавливает цвета по умолчанию: черный для штриха и белый для заливки.
  • С перечеркнутым квадратиком — отсутствие цвета. Относится к штриху или заливке в зависимости оттого, на каком квадрате выбора цвета вы щелкнули последний раз.
  • Со стрелками — переключение цветов (меняет местами цвета штриха и заливки).

Рис. 44. Выбор цвета на панели инструментов

Если щелкнуть на квадратике выбора цвета, откроется окно с цветовыми образцами, из которых можно выбрать нужный цвет (щелчком на нужном образце). Набор образцов соответствует текущей цветовой палитре, которую можно изменять, но об этом позже. В поле наверху цветовой палитры указывается 16-ричный код цвета того образца, на котором в данный момент находится указатель мыши (в форме пипетки). Расширенные возможности для выбора цвета дает окно Цвет, которое открывается щелчком на круглой кнопке в правом верхнем углу окна с образцами. Это окно аналогично окну Color Picker (Сборщик цветов) в Photoshop, поэтому здесь мы не будем его описывать. Выбранный цвет относится либо к штриху (Stroke) либо к заливке (Fill), в зависимости оттого, на каком цветовом квадратике панели инструментов вы щелкнули.

Рис. 45. Если щелкнуть на квадратике выбора цветов (панель инструментов), то откроется доступ к образцам цвета

 

44.gif

Изображение: 

45.gif

Изображение: 

21. Палитры Mixer и Swatches

 

Палитры Miхег и Swatches

Цветом можно управлять и с помощью специальных палитр, которые в Flash называются panel (панель). В Flash MX по сравнению с Flash 5.0 эти палитры несколько улучшены. Сначала рассмотрим палитры Flash 5.O. Прежде всего, отметим палитру Mixer (Смеситель). Это один из наиболее мощных инструментов настройки цвета. Если ее нет на экране, то выполните команду Window>Panels>Mixer (Окно>Палитры>Смеситель). На этой палитре есть две вкладки — Mixer и Swatches (Образцы). Обратите внимание, что аналогичная палитра имеется и в Photoshop. Также, как и в Photoshop, любую вкладку этой палитры можно перетащить мышью и превратить в отдельную палитру, а также собрать вкладки-палитры в единую палитру. Поэкспериментируйте с этим, сделайте так, чтобы вам было удобно. В конце концов, хорошо подготовленное рабочее место, когда все под рукой и в надлежащем порядке, превращает работу в удовольствие.

На вкладке Mixer имеются кнопки (квадраты) выбора цветов штриха и заливки, как на панели инструментов, а также цветовая полоса. Щелчок на цветовой полосе также позволяет быстро выбрать цвет. Однако для более тонкой настройки лучше щелкнуть на квадате выбора цвета. Кроме того, можно ввести числовые значения цветовых каналов в соответствии с моделями RGB или HSB. При этом числовые значения для модели RGB могут вводиться как к десятичной, так и в шестнадцатеричной форме. Этими инструментами пользуются для прецизионных установок. Например, когда нужно, чтобы цвет и точности соответствовал цвету из какого-либо другого изображения.

Чтобы выбрать цветовую модель и форму представления числовых значений, щелкните на круглой кнопке со стрелкой, расположенной в правом верхнем углу вкладки Mixer. Раскроется меню с пунктами: RGB, HSB, Hex (16-ричная форма) и Add Swatch (Добавить образец в цветовую палитру образцов).

На вкладке Mixer имеется особый параметр Alpha. Его часто называют «прозрачность», хотя точнее было бы говорить «непрозрачность», поскольку его значению 0% соответствует полная прозрачность (невидимость), а значению 100% — полная непрозрачность (видимость) окрашиваемого объекта. Этот параметр играет важную роль при наложении фигур друг на друга. Вы можете определить степень видимости фигур, расположенных на заднем плане, задав значение параметра непрозрачности накладываемых на них фигур переднего плана. Параметр Alpha играет большую роль при создании анимации, когда требуется создать эффект постепенного появления или исчезновения изображения. Подробности будут изложены в .

Рис. 46. Овал с непрозрачной черной обводкой, помещенный на растровое изображение, имеет полупрозрачную (50% непрозрачности) белую заливку

Черный (по установке цвета заливки) овал размещен над (с точки зрения пользователя — перед) текстом. На левом рисунке непрозрачность (значение параметра Alpha) овала 50%, а на правом — 65%. Поскольку непрозрачность меньше 100%, черный овал выглядит, как серый.

В Flash имеется множество других палитр, например, Character для задания параметров текста, Stroke для задания параметров штрихов (линий). В таких палитрах есть собственные средства управления цветом, но все они аналогичны рассмотренным выше и синхронизированы между собой. Последнее означает, что изменение цвета штриха или заливки можно производить в любой из палитр.

Если вы изменяете цвета в палитре, то можете сохранить ее в файле для использования в других проектах Flash, чтобы не повторять длительную работу по подбору цветов. Можно наоборот, импортировать цветовую палитру из другого проекта Flash. Для этого следует воспользоваться меню, которое раскрывается щелчком па круглой кнопке на вкладке Swatches.

Рис. 47. Палитры Mixer и Swatches для управления цветом в Flash 5.0

Рис. 48. Палитры Color Mixer и Color Swatches для управления цветом в Flash 5.0
В Flash MX палитры для настройки цветов называются Color Mixer (Смеситель цветов) и Color Swatches (Образцы цветов). Они вызываются из меню Window (Окно). Палитра Color Mixer в Flash MX более развита, чем аналогичная палитра Mixer в Flash 5.0.

 

1. главе 9

 

ГЛАВА 9. АНИМАЦИЯ ВО FLASH

 

1. Анимация во Flash

 

Анимация во Flash

В предыдущей главе мы рассматривали программу Flash только как графический векторный редактор. Однако главное назначение Flash состоит в создании анимационной графики, т. е. мультфильмов. Анимация в Flash может содержать звуковое сопровождение и интерактивные элементы. Таким образом, речь идет не просто о графике, а о создании мультимедийных продуктов. С помощью Flash можно создавать интересные приложения, в частности, Web-страницы.
Результаты работы Flash (файлы, анимации, Web-страницы) принято называть мультфильмами, клипами, видеофрагментами, роликами и анимациями (общий термин — movie). Обычно клипами называют мультфильмы, входящие в состав других мультфильмов. Процесс создания мультфильма состоит в следующем. Сначала создается исходный или так называемый авторский файл с расширением fla. Этот файл можно редактировать и просматривать в среде программы Flash. Затем он преобразуется в SWF-файл, который уже можно просмотреть в Flash-проигрывателе и Web-браузере. Кроме того, можно экспортировать результаты вашей работы в файлы других широко распространенных форматов: MOV, анимационный GIF, JPEG и ряд других.

Внимание! При описании инструментов Flash, если специально не оговорено, имеется в виду версия 5.0. Особенности Flash MX мы будем оговаривать особо.

В предыдущей главе мы уже отмечали основные отличия Flash 5.0 от Flash MX. Напомним лишь одно из них, являющееся важнейшим. В Flash 5.0 свойства объекта рассредоточены по нескольким палитрам или по нескольким вкладкам одной палитры. Открыть или закрыть эти палитры можно с помощью меню Window>Panels (Окно>Палитры). В Flash MX сокращено количество палитр. В меню Window нет подменю Panels, в котором можно выбрать панель (палитру), чтобы открыть или закрыть ее. Палитры в Flash MX открываются и закрываются непосредственно с помощью меню Window. Обратите внимание на то, что все свойства текущего (т. е. выделенного) элемента на рабочем поле в Flash MX отображаются на одной палитре Properties (Свойства), которая по умолчанию расположена внизу. Содержание этой палитры зависит от текущего объекта (т. е. выделенного в данный момент). Иначе говоря, содержание палитры свойств контекстно зависимо.

 

2. Пробная анимация

 

Пробная анимация

Для первого знакомства с анимационными возможностями Flash создадим простой мультфильм: кружок, который перемещается по экрану слева направо. Сначала мы покажем, как это делается в Flash 5.0, а затем — в Flash MX. Прежде
всего нам понадобятся инструменты («Овал») и («Выделение»). Выполните в Flash 5.0 следующие шаги:

  1. 1. Выберите инструмент «Овал» и нарисуйте кружок в левой части рабочей области с помощью мыши, нажав ее левую кнопку.
  2. 2. Выберите инструмент «Выделение» и выделите кружок вместе с контуром. Для этого либо обведите фигуру прямоугольной рамкой, удерживая кнопку мыши нажатой, либо сделайте двойной щелчок на ней. Затем в меню Insert (Вставить) выберите команду Convert to symbol (Преобразовать в символ) или нажмите клавишу <F8>. В появившемся диалоговом окне выберите переключатель Graphic (Графический) и щелкните на кнопке ОК:
  3. Рис. 546.

  4. 3. Теперь выберите кадр на временной шкале, например, 25-й кадр (просто щелкните на нем), и выполните команду меню Insert>Keyframe (Вставить>Ключевой кадр) или нажмите клавишу <F6>. Этим вы сделаете 25-й кадр ключевым. На рисунке показано, что должно получиться:

    Рис. 547.

  5. 4. Выделите кружок (теперь вокруг него возникнет рамка) и переместите его в правую часть рабочей области. Этим вы указали траекторию перемещения кружка.

  6. 5. Вернитесь на временной шкале к первому кадру (вы должны увидеть кружок снова в левой части экрана). В меню Insert (или в контекстном меню, вызываемом нажатием правой кнопки мыши на первом кадре) выберите команду Create Motion Tween (Создать анимацию движения). Между первым и 25-м кадрами на временной шкале появится стрелка.

    Рис. 548.

  7. Итак, вы только что сделали очень простой, но все же мультфильм. Выберите теперь команду Control>Play (Управление>Воспроизвести) или просто нажмите клавишу <Enter>, чтобы просмотреть результат. Для представления движения на статичном рисунке показаны промежуточные кадры мультфильма

    Рис. 549.

    6. Добавим в наш мультфильм дополнительный эффект. А именно, сделаем так, чтобы кружок не только перемещался, но и постепенно исчезал. Выберите опять 25-й кадр и выделите все объекты. Перейдите в диалоговое окно Effect. Если сложно отыскать необходимую вкладку в диалоговых окнах справа от рабочей области, выберите команду меню Window>Panels>Effect. В раскрывающемся списке выберите Alpha (Прозрачность), а появившийся параметр установите равным 0% (полная прозрачность или, иначе, невидимость объекта).

  8. Рис. 550. Попробуйте еще раз проиграть ваш мультфильм

  9. Наконец, нам нужно транслировать результаты нашего творчества в SWF-файл и сгенерировать HTML-файл, который загружал бы мультфильм в браузер. Это можно сделать, выбрав команду FiIe>Publish (Файл>Публикация) или нажав клавиши <Shift>+<F12>.

Теперь можно открыть созданный HTML-файл в браузере. Впрочем, это можно сделать даже из Flash, выбрав команду File>Publish Preview>HTML (Файл>Предварительный просмотр пyбликaции>HTML) или нажав клавишу <F12>. При этом Flash воспользуется браузером, установленным по умолчанию. Вот и все! Далее мы рассмотрим вопросы создания анимации более подробно.

Все описанное выше в точности соответстует Flash 5.O. Если вы используете Flash MX, то следует учесть, что горячая клавиша <F6> не создает ключевой кадр, а все параметры текущего (выделенного объекта) сосредоточены в одной палитре, которая называется Properties (Свойства). Flash MX, вообще говоря, удобнее, чем Flash 5.0, однако жаль, что горячая клавиша <F6> исчезла.

Теперь рассмотрим создание анимации в Flash MX. На рабочем поле рисуем круг. Выделяем его и группируем в одно целое его контур и заливку. Это можно сделать с помощью команды Modify>Group (Модифицировать>Группировать). Далее, щелкните правой кнопкой мыши на конечном кадре и в контекстном меню выберите команду Insert Keyframe (Вставить ключевой кадр). Перетащите круг на новое место. Щелкните левой кнопкой на первом кадре. При этом круг окажется в исходном положении. Теперь обращаемся к палитре Properties, содержащей в данный момент параметры первого кадра. В раскрывающемся списке Tween выбираем значение Motion (Движение). При этом на временной шкале между первым и последним ключевыми кадрами появится стрелка, что говорит об успешном создании анимации. Для воспроизведения мультфильма нажмите клавишу <Enter>.

Рис. 551. Создание анимации в Flash MX

Если на временной шкале вместо стрелки появилась штриховая линия, то это означает, что вы допустили какую-то ошибку. При этом на палитре свойств появляется кнопка с изображением треугольника и восклицательного знака. Щелчок на ней откроет панель с сообщением об ошибке. Неудача при создании анимации чаще всего обусловлена следующими двумя причинами: либо вы пытаетесь анимировать несгруппированные объекты (в случае круга это контур и заливка), либо в данном слое находятся несколько сгруппированных объектов.
Кроме способа, рассмотренного выше, в Flash MX можно создать анимацию посредством команды Create Motion Tween (Создать анимацию движения). В этом случае щелкните правой кнопкой мыши на первом кадре и в контекстном меню выберите команду Create Motion Tween. При этом изображение круга будет преобразовано в символ типа Graphic. Щелкните правой кнопкой мыши на последнем кадре и в контекстном меню выберите команду Insert Frame (Вставить кадр). Между первым и последним кадрами появится штриховая линия. Теперь нужно переместить круг на новое место. В результате последний кадр автоматически станет ключевым, а штриховая линия будет заменена стрелкой. Создание анимации завершено.

 

546.gif

Изображение: 

547.gif

Изображение: 

548.gif

Изображение: 

549.gif

Изображение: 

550.gif

Изображение: 

551.gif

Изображение: 

3. Основные понятия анимации

 

Основные понятия анимации

Под термином анимация понимается последовательность сменяющихся изображений (кадров), в результате просмотра которой возникает иллюзия движения (плавного изменения формы и/или положения изображения). В Macromedia Flash реализовано два способа анимации:

  • Покадровая анимация. Этот способ состоит в том, чтобы достаточно быстро пролистать заранее нарисованные кадры. В данном случае иллюзия движения возникает за счет выбора подходящих скорости перелистывания и степени похожести соседних кадров. Рассматриваемый способ аналогичен способу, применяемому при создании анимационных GIF-файлов
  • Интерполяционная анимация. Этот способ заключается в том, чтобы создать несколько опорных (ключевых) кадров, а затем на их основе «вычислить» промежуточные кадры (tweening animation). Данный способ аналогичен рисованию гладкой линии, проходящей через указанные точки. Например, допустим, что требуется переместить какую-нибудь фигуру из левой части экрана в правую с помощью 25 кадров. В случае первого, покадрового, способа анимации нам придется нарисовать все двадцать пять кадров, и в каждом последующем кадре чуть-чуть сдвигать фигуру вправо. А если нужно сделать так, чтобы фигура, двигаясь вправо, постепенно исчезала или меняла форму? Очевидно, делать вручную каждый кадр в этом случае будет слишком утомительным занятием. Вот для таких ситуаций и предусмотрен второй способ анимации. В простейшем случае вам понадобится задать только два ключевых кадра: начальный и конечный. По умолчанию Flash рассчитывает промежуточные кадры по линейному закону, но можно задать и экспоненциальный закон.

Сначала рассмотрим основные элементы, используемые при работе с Flash: временную шкалу (timeline), кадры (frames), символы (symbols) и слои (layers).

 

1. \(см. главу 3\).

 

ГЛАВА 3. ФОРМАТЫ ФАЙЛОВ

 

4. Временная шкала

 

Временная шкала

Временная шкала — основной инструмент при работе с анимацией в Flash. На ней отображается информация о слоях и о том, какие кадры являются ключевыми, а какие промежуточными (генерируемыми Flash). С помощью временной шкалы можно понять, какие кадры содержат действия или метки. Она позволяет перемещать ключевые кадры и отдельные фрагменты анимации. Этот инструмент хорошо продуман и очень удобен, вы быстро научитесь работать с ним.

Рис. 552. Временная шкала в Flash 5.0

В Flash MX временная шкала несколько модифицирована. Например, появилась возможность создания папок, содержащих слои. Это средство организации структуры мультфильма мы уже рассматривали в предыдущей главе. В правом верхнем углу временной шкалы находится кнопка меню форматов кадров. От выбора формата кадров зависит внешний вид временной шкалы. В отличие от Flash 5.0, теперь в кадрах можно отобразить уменьшенные копии изображений.

Рис. 553. Временная шкала в Flash MX

Перечислим основные элементы временной шкалы.

  • Маркер — выделенный красным цветом прямоугольник, указывающий на текущий кадр, содержимое которого отображается в рабочей области. Ячейки прямоугольной сетки (шкалы кадров) соответствуют кадрам. При щелчке на какой-либо ячейке маркер автоматически перемещается на нее, а в рабочей области отображается содержимое соответствующего кадра.
  • Слои. Слева от линейки кадров находится список слоев. Под ним расположены кнопки, позволяющие добавлять и удалять слои. При желании каждый слой можно сделать невидимым или запретить его редактирование.
  • Шкала кадров — поле, где можно добавлять и удалять простые и ключевые кадры. Если вызвать контекстное меню, щелкнув правой кнопкой мыши на каком-либо кадре, вы увидите перечень действий, которые можно совершить. На шкале кадров отображается следующая информация:
    • ключевые кадры помечаются черными кружками;
    • кадры, с которыми связаны действия, помечаются буквой «а» над кружком;
    • на помеченные кадры указывают красный флажок и название метки.
  • Цвет также говорит о типе кадров. Кадры, которые в точности повторяют ключевой кадр (keyframe), окрашиваются в серый цвет. Сиреневая или зеленая подсветка говорит о том, что кадры сгенерированы Flash. Белый цвет указывает на пустые кадры.
  • Кнопки управления тенями позволяют отображать соседние кадры как бы через кальку, чтобы видеть различия между соседними кадрами. Иначе говоря, они позволяют создать шлейф для движущегося изображения. Можно задавать количество отображаемых соседних кадров.
 

552.gif

Изображение: 

553.gif

Изображение: 

5. Кадры

 

Кадры

Анимация состоит из последовательности кадров. Кадр может быть как создан вручную, так и сгенерирован Flash. Это относится к кадрам одного слоя. Так как сцены Flash (что это такое, описано ниже в этой главе) состоят обычно из нескольких слоев, то итоговые «многослойные» кадры могут содержать как сгенерированные, так и «самодельные» кадры.

В компьютерной анимации существует понятие ключевые кадры (keyframes) — это кадры, которые Flash не изменяет в процессе создания анимации, но использует в качестве опорных при генерации промежуточных кадров.
Существует два типа промежуточных кадров:

  • Кадры, построенные на основе изменения формы (shape tweening).
  • Кадры, построенные на основе изменения символов (motion tweening). Наиболее часто они используются при создании анимации движения по рабочему полю.

Следует упомянуть и о пустых кадрах, которые ничего не содержат.

Рис. 554.

На временной шкале последовательность неизменяющихся кадров имеет серый цвет, последовательность кадров motion tweening — сиреневый, последовательность кадров shape tweening — зеленый, пустые кадры — белый. Ключевые кадры обозначаются черной точкой.
Элементарные операции над кадрами:

  • вставить пустой ключевой кадр: команда Insert>Blank keyframe (<F7>);
  • вставить ключевой кадр, повторяющий содержание предыдущего: команда Insert>Keyframe (<F6>, только в Flash 5.0);
  • очистить ключевой кадр: команда Insert>CIear keyframe (<Shift>+<F6>);
  • вставить обычный кадр: команда Insert>Frame (<F5>);
  • удалить кадр: команда Insert>Remove Frames (<Shift>+<F5>).
 

554.gif

Изображение: 

6. Символы (Symbols)

 

Символы (Symbols)

Символ — одно из ключевых понятий в Flash. Мы уже говорили о нем в предыдущей главе. Символом может быть простейшая фигура, объединение нескольких фигур и даже целая анимация (movie). Например, можно создать символы «колесо», «кузов» и «фара», а потом все это объединить в символ «автомобиль». Затем можно создать сцену, в которой этот «автомобиль» будет «ехать». Вы можете сделать колесо анимационным символом, чтобы ощущалось его вращение. Дверь автомобиля можно сделать символом типа «кнопка», чтобы она открывалась при щелчке на ней. При этом в любой момент вы можете изменить содержание и тип символа. Другими словами, символ это — объект. Вроде бы термин «объект» более привычен, но в Flash используется именно «символ» (поэтому символы текста во избежание путаницы мы будем называть знаками).
Символы могут быть вложенными друг в друга вне зависимости от типа, что является самым главным их достоинством. Символы можно создавать как «с нуля» (команда Insert>New Symbol (Вставить>Новый символ) или клавиши <Ctrl>+<F8>), так и используя текущее выделение в рабочей области, преобразовав его в символ (команда Insert>Convert to Symbol или клавиша <F8>). Второй прием используется гораздо чаше, чем первый, т. к. отпадает необходимость позиционировать выделение и подгонять его размер.

Для управления символами используются так называемые библиотеки (Library), о которых мы расскажем ниже. Все, что вы нарисовали или импортировали в рабочую область, можно преобразовать (конвертировать) в символ. Этот символ сразу же попадет в библиотеку текущего (создаваемого или редактируемого) мультфильма. Символы из библиотеки могут быть перенесены на сцену или в другой мультфильм. При этом то, что вы перенесли, фигурирует уже не как символ, а как экземпляр (instance) символа. Вы можете редактировать символ, и тогда результат ваших модификаций распространится на все его экземпляры. Можно редактировать экземпляр символа, не затрагивая сам символ. Модифицированный экземпляр символа можно превратить в самостоятельный символ. Окно библиотеки раскрывается командой Window>Library (Окно>Библиотека) или нажатием клавиш <Ctrl>+<L>. Рекомендуется разобраться с ней самостойтельно.

Существует три типа символов: графический (Graphic), кнопка (Button) и анимация (мультфильм, клип) (Movie Clip). Команда Insert>New Symbol открывает окно, в котором следует указать тип создаваемого символа. Рассмотрим типы символов более подробно.

Рис. 555. Диалоговое окно, в котором указываются имя и тип создаваемого символа

Графический (Graphic)

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

Напомним, что изображения можно создавать не только вручную с помощью инструментов рисования, но и импортировать из графических файлов.
Кнопка (Button)

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

  • Up — указатель мыши не находится над кнопкой;
  • Over — указатель мышки находится над кнопкой;
  • Down — указатель мыши находится над кнопкой и при этом нажата кнопка
    мыши;
  • Hit — кадр для определения активной области кнопки, реагирующей на щелчок; его содержимое невидимо и может быть как меньше, так и больше видимого изображения кнопки. Если вы не опишете этот кадр, для него будет использоваться изображение кнопки из кадра Up.

Заметим, что в предыдущей главе мы рисовали изображение кнопки, но не создавали символ кнопки.

Чтобы создать кнопку, выполните команду Insert>New Symbol или нажмите клавиши <Ctrl>+<F8>. В раскрывшемся диалоговом окне введите имя символа и выберите его тип (Behavior (поведение)) Button. Flash переключится в режим редактирования символа. При этом на временной шкале отобразятся четыре кадра: Up, Over, Down и Hit.

Первый кадр — Up. Теперь надо создать изображение для кнопки, используя инструменты для рисования, импорт графики или вставку экземпляра другого символа. При этом можно применять символы типа Graphic (Графический) и Movie Clip (Анимация), но не Button (Кнопка). Используйте Movie Clip, если хотите, чтобы кнопка была анимированной. Созданное изображение для кнопки будет вставлено в кадр Up, который автоматически станет ключевым.

Далее, щелкните на временной шкале кадра Over и сделайте его ключевым (Insert>Keyframe или клавиша <F6>). Содержимое предыдущего кадра (Up) будет автоматически скопировано в кадр Over. Повторите это для кадров Down и Hit. Теперь вы можете отредактировать изображение кнопки для каждого из четырех кадров. Например, можно изменить цвет и/или надпись на кнопке, что придаст динамичность кнопке: она будет менять внешний вид в зависимости от положения указателя и состояния кнопки мыши. На рисунках, как пример, показаны изображения кнопки для различных кадров.

Если необходимо воспроизводить звук, зависящий от состояний кнопки, выделите соответствующий кадр на временной шкале и выполните команду Modify>Frame (Модифицировать>Кадр), чтобы раскрылась панель Frame, на которой есть вкладка Sound (Звук). В этой вкладке можно установить необходимые параметры.
Завершив создание символа кнопки, перейдите в режим редактирования мультфильма (команда Edit>Edit Movie) и перетащите символ кнопки из окна библиотеки в рабочую область, чтобы создать экземпляр этого символа в вашем мультфильме (сцене).

Рис. 556.

Рис. 557.

Рис. 558.

Рис. 559.

Все, что мы сделали, является лишь визуальным объектом. Однако кнопки, как известно, служат элементами управления. Мы хотим, чтобы, например, при щелчке на кнопке что-то происходило. Другими словами, кнопку необходимо наделить функциональностью. Для этого щелкните правой кнопкой мыши на изображении кнопки и в раскрывшемся меню выберите команду Actions (Действия). В результате рас кроется панель Object Actions, показанная на рисунке. На вкладке Object Actions этой панели в левом списке можно выбрать действие. В правом поле записываются инструкции сценария на языке ActionScript. Вы можете выбирать действия и значения их параметров (поля ввода и/или переключатели), наблюдая, что пишет Flash в правом поле, либо вручную писать сценарий. На рисунке показан пример, в котором в качестве действия выбрана функция getURL(adpec), вызывающая документ (файл), расположенный по указан ному адресу. Причем это действие произойдет в случае нажатия кнопки (при щелчке левой кнопкой мыши на изображении кнопки) — за это отвечает функция on (press)

Рис. 560. Панель создания и редактирования действий, связанных с объектом

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

Обратите внимание на то, что действия следует назначать экземпляру символа Button в мультфильме, а не кадрам кнопки на временной шкале. Другими словами, вы размещаете экземпляр кнопки на рабочей области и затем назначаете ему действия.

В общей библиотеке символов Flash, открываемой командой Window>Common Libraries, имеются уже готовые кнопки. Вы можете открыть эту библиотеку и перетащить из нее в рабочую область понравившийся символ столько раз, сколько его экземпляров потребуется в мультфильме. При этом символ сразу же попадете частную библиотеку вашего мультфильма. Вы можете модифицировать как символ, так и его экземпляры. Например, если нужно создать ряд кнопок в одинаковом стиле, но с различными надписями, то следует модифицировать экземпляры, для чего выделите на рабочей области экземпляр кнопки и выполните команду Modify>Instance (Модифицировать>Экземпляр).

В Flash MX модификация кадров, экземпляров символов и самих символов производится с помощью палитры Properties (Свойства).

Рис. 561. Два экземпляра кнопки, различающиеся надписями. Library - Moviel — окно библиотеки символов нашего мультфильма (в данный момент в ней содержится лишь один символ Push Bar); Library - Buttons.fla — окно библиотеки кнопок из общих библиотек (Common Libraries)

Анимация (Movie Clip)

Анимация — самый интересный тип символа. В этом символе может быть любое количество кадров. В языке сценариев ActionScript данный символ воспринимается как объект типа Movie Clip. Каждый символ этого типа (клип) имеет собственную временную шкалу, которая воспроизводится независимо от временной шкалы основного мультфильма. С другой стороны, клип может содержать другие клипы и элементы интерактивного управления.

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

 

555.gif

Изображение: 

556.gif

Изображение: 

557.gif

Изображение: 

558.gif

Изображение: 

559.gif

Изображение: 

560.gif

Изображение: 

561.gif

Изображение: 

7. Библиотеки символов

 

Библиотеки символов

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

В Flash имеются следующие типы библиотек:

  • Библиотека мультфильма (Library)
  • Обшая библиотека (Common Library)
  • Постоянная библиотека (Permanent Library)
  • Разделяемая библиотека (Shared Library)

В Flash MX, в отличие от Flash 5.0, разделяемые библиотеки бывают двух видов:

  • Run-time — разделяемая библиотека времени выполнения;
  • Author-time — разделяемая библиотека времени разработки.

В Flash 5.0 единственный тип разделяемой библиотеки есть библиотека Run-time.
С точки зрения пользовательского интерфейса работа с библиотеками различного типа организована одинаково, ее содержимое можно просмотреть в специальном диалоговом окне.

Библиотека мультфильма — библиотека символов, связанная с конкретным мультфильмом. Она создается автоматически, как только вы создадите первый символ. Этот символ сразу же попадет в библиотеку. Пустую библиотеку можно создать, выполнив команду Window>Library (Окно>Библиотека). Библиотека, коль скоро она создана, существует столько времени, сколько существует мультфильм. Можно удалить все ее содержимое, но удалить собственно библиотеку нельзя. В заголовке окна библиотеки выводится название мультфильма (имя файла). Символы билиотеки могут быть использованы в любом другом мультфильме. Для этого достаточно открыть новый файл, не закрывая файл, библиотекой которого вы хотите воспользоваться. При этом окно библиотеки файла-источника должно быть открыто.

Общая библиотека — встроенная библиотека Flash. В отличие от библиотеки мультфильма, ее содержимое нельзя изменить. Общая библиотека состоит из нескольких библиотек, таких как Buttons (Кнопки), Learning Interactions (Интерактивное обучение) и др. Общая библиотека Flash MX включает, кроме прочего, еще и раздел Developer Assets (Ресурсы разработчика), который содержит компоненты пользовательского интерфейса ().
Элементы общей библиотеки можно использовать в своих мультфильмах и в имеющемся виде, и в качестве начальных заготовок для последующей модификации.

Постоянная библиотека — библиотека, создаваемая пользователем и доступная из любого мультфильма. Для создания постоянной библиотеки выполните следующее:

  1. 1. Создайте Flash-файл (новый мультфильм, т. е. файл с расширением fla) с библиотекой, содержащей символы, которые вы хотите включить в постоянную библиотеку.
  2. 2. Сохраните созданный Flash-файл в папке Libraries, которая находится среди других папок пакета Flash.

После создания новая библиотека появится в меню Window>Common Libraries (Окно>Общие библиотеки).

Разделяемая библиотека позволяет использовать содержащиеся в ней символы в нескольких мультфильмах без копирования этих символов в частные библиотеки мультфильмов. Элементы разделяемой библиотеки называются ресурсами (asset). Разделяемая библиотека используется как внешний файл и не содержится внутри мультфильма.

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

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

Чтобы создать библиотеку разделяемой, следует определить ее ресурсы (входящие в нее символы), разрешить экспорт разделяемых символов, указать URL-адрес сайта, на котором будет размещена библиотека, экспортировать Flash-файл в SWF-формат и разместить его на Web-сайте.

После создания разделяемой библиотеки необходимо указать, какие из ее символов могут быть экспортированы в другие мультфильмы. Для этого в окне библиотеки выберите нужный символ и щелкните на нем правой кнопкой мыши. В контекстном меню выберите команду Linkage (Связывание). В результате откроется окно, которое в Flash 5.0 называется Symbol Linkage Properties (Свойства связывания символа), а в Flash MX — просто Linkage Properties (Свойства связывания). В разных версиях Flash эти окна несколько отличаются, но суть одна.
В поле Identifier (Идентификатор) вводится имя символа (без пробелов), с которым он будет экспортирован в фильм-совладелец.

В Flash 5.0 вы можете выбрать экспорт символа или импорт его. В последнем случае требуется указать URL-адрес мультфильма-источника, т. е. SWF-файла с разделемой библиотекой. Это же можно сделать и в Flash MX, но там есть и дополнительные возможности. В частности, чтобы экспортируемый символ мог использоваться сразу же с первого кадра мультфильма-совладельца, установите флажок Export in first frame. Если экспортируемый символ следует сделать доступным в сценарии на языке ActionScript, то установите флажок Export for ActionScript.


Рис. 562. Окно свойств связывания символа в Flash 5.0

Рис. 563. Окно свойств связывания в Flash MX

Чтобы использовать символы из разделяемой библиотеки в мультфильме-совладельце, откройте библиотеку этого мультфильма и в раскрывающемся меню библиотеки выберите команду New Symbol (Новый символ). В результате откроется окно Create New Symbol (Создание нового символа). В Flash 5.0 в этом окне можно задать только имя и тип символа. Поэтому после появления нового символа в билиотеке требуется открыть окно Symbol Linkage Properties, рассмотренное выше. В Flash MX окно Create New Symbol сразу содержит все параметры символа.

Рис. 564. Окно Create New Symbol в Flash MX

Выше мы рассмотрели работу с разделяемыми библиотеками вида Run-time. Напомним, что в Flash 5.0 это единственный вид разделяемой библиотеки. В Flash MX, кроме того, есть еще один вид разделяемых библиотек — Author-time. Здесь мы не будем подробно его рассматривать. Отметим лишь, что применение библиотек Author-time позволяет заменять содержимое символов в редактируемом Flash-файле.

 

1. см. главу 8

 

ГЛАВА 8. РИСОВАНИЕ В FLASH

 

562.gif

Изображение: 

563.gif

Изображение: 

564.gif

Изображение: 

8. Создание анимации

 

Создание анимации

Рассмотрим способы и примеры создания анимации.

 

9. Покадровая анимация

 

Покадровая анимация

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

Рис. 565. Покадровая анимация состоит только из ключевых кадров. Одно и то же изображение может занимать несколько таких кадров

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

Рис. 566. Четыре последовательных кадра из мультфильма, в котором вырастает цветок

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

Заметим, что анимационные GIF-файлы, широко применяемые в Web-дизайне, создаются в Flash методом покадровой анимации. Вы можете создать несколько ключевых кадров (если необходимо, то используйте несколько слоев), а затем преобразуйте свое произведение в GIF-файл с параметром Animated с помощью операции публикации. Более подробно об этом рассказано в последнем разделе данной главы.

 

565.gif

Изображение: 

566.gif

Изображение: 

10. Интерполяционная анимация

 

Интерполяционная анимация

При таком способе анимации Flash автоматически создает промежуточные кадры, которые встраиваются между ключевыми кадрами, заданными вами. Это означает, что вы в одном кадре рисуете объект, потом в другом кадре производите его изменения. Созданные кадры являются ключевыми. Затем вы просите Flash рассчитать кадры, которые должны занять место между двумя ключевыми кадрами. В результате вы получаете анимацию.

Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение, а также от скорости прокрутки вашего Flash-мультфильма (movie). Скорость прокрутки мультфильма можно установить в Flash 5.0 командой Modify>Movie или клавишами <Ctrl>+<M>, а в Flash MX — командой Modify>Document. Параметр Frame Rate задает количество кадров, показываемых в секунду. Для высококачественной анимации скорость должна быть не меньше 25-30 кадров/с. По умолчанию скорость равна 12 кадров/с. При создании мультфильмов она обычно подбирается экспериментально, в зависимости от динамичности вашего произведения, требуемого качества, ограничений на объем файла и т. п.

Плавность и длительность задаются количеством кадров, отведенных на всю анимацию (ее фрагмент). Например, если скорость вашего мультфильма составляет 30 кадров/с, и вам нужно, чтобы совершалось перемещение объекта из одного угла картинки в другой за 2,5 с, то на движение потребуется отвести 75 кадров. В Flash есть два варианта построения промежуточных изображений:

  • Shape tweening — построение анимации на основе изменения формы;
  • Motion tweening — построение анимации на основе изменения символов.

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

Анимация на основе изменения формы (Shape tweening)

Допустим, нужно, чтобы квадрат плавно превратился в круг, или изображение кошки плавно превратилось в изображение собаки. В таких случаях используется shape tweening (изменение формы, трансформация). При этом вы задаете два ключевых кадра на некотором расстоянии друг от друга. В рассматриваемом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов). После того как вы создали два ключевых кадра, сделайте активным первый из них (просто перейдите на него щелчком кнопкой мыши) и выберите в палитре Frame (вызываемой командой Windows>Panels>Frame или нажатием клавиш <Ctrl> + <F>) в списке Tweening строку Shape (Форма), как показано на рисунке.

Рис. 567. Указываем вариант анимации Shape tweening

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

Рис. 568. Круг плавно переходит в полумесяц. Здесь первый ключевой кадр содержит круг, а последний, 10-й кадр, — полумесяц. На рисунке показаны все кадры мультфильма

Рассмотрим параметры преобразования shape tweening. При выборе этого варианта в палитре Frame появились параметры Easing и Blend и поле ввода метки кадра Label.

  • Параметр Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от -100 до +100. Это означает, что если вы зададите отрицательную величину в поле Easing, то движение будет происходить с положительным ускорением (скорость будет увеличиваться). И наоборот, если значение Easing положительное, анимация замедляется.

Рис. 569. Анимация с ускорением (Easing < 0)

Рис. 570. Анимация с замедлением (fusing > 0)

  • Параметр Blend (Переход) определяет алгоритм перехода: Distributive (Размытый) и Angular (Угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов и отрезки прямых линий. Рекомендуется поэкспериментировать с этим параметром, чтобы понять, в каких случаях какое значение параметра лучше использовать.

Последний инструмент в анимации типа shape tweening — контрольные точки (shape hints), с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись при работе со сложными формами. Пользоваться контрольными точками очень легко. В первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (команда Modify>lransform>Add shape hint или клавиши <Ctrl>+<Shift>+<H>). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр и прикрепляете эту же точку к части, в которую должна перейти помеченная часть в начальном кадре. Эта точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Таким образом, вы можете отличать начальные и конечные контрольные точки (на одном кадре могут присутствовать и те, и другие). Удалить все точки можно с помощью команды ModifyTransform>Remove All Hints. Удалить же единственную точку можно, щелкнув на ней правой кнопкой мыши и в появившемся контекстном меню выбрав команду Remove Hint. Поскольку контрольные точки обозначаются буквами латинского алфавита, их может быть не больше 27.

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

Рис. 571. Shape tweening без использования контрольных точек

Рис. 572. Shape tweening с использованием контрольных точек

При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:

  • Форма
  • Расположение
  • Размер (любые пропорции)
  • Цвет
  • Угол поворота

Если вам нужно отключить shape tweening, то в палитре Frame выберите в списке Tweening значение None.

Анимация на основе изменения символов (Motion tweening)

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

Вот какие параметры символа могут модифицироваться при использовании motion tweening:

  • размер (как пропорционально, так и непропорционально — отдельно высота и ширина)
  • наклон
  • расположение
  • угол поворота
  • цветовые эффекты

Включить motion tweening можно несколькими способами, а отключить — только одним. Для того чтобы включить motion tweening, нужно сделать активным начальный кадр перехода, а затем, нажав правую кнопку мыши, в контекстном меню выбрать команду Create motion tween, либо выбрать команду Insert>Create motion tween). Универсальный способ включения/выключения motion tweening— в палитре Frame выбрать значение в списке Tweening.

Рис. 573.

Параметры анимации:

  • Easing — задает обратное экспоненциальное ускорение; работает так же, как и в shape tweening;
  • Rotate — позволяет управлять вращением:
    • Auto — заставляет Flash автоматически пытаться определить количество витков;
    • CW — задает вращение по часовой стрелке;
    • CCW — задает вращение против часовой стрелки; при этом в ставшем доступном поле справа можно ввести количество оборотов (можно использовать только целые значения или отключить вращение, выбрав в списке Rotate значение None).
  • Options — дополнительные параметры:
    • Orient to path — поворачивает символ в соответствии с направляющей линией;
    • Snap — привязывает символ к направляющей линии;
    • В случаях, когда количество кадров основной сцены не кратно количеству кадров символа, флажок Synchronize (Синхронизировать) позволяет синхронизировать эти две анимации.

Направляющие слои

Движение объекта можно организовать с помощью направляющего слоя. В направляющем слое рисуется траектория, по которой должен дв'игаться объект, затем к ней привязывается сам объект, а направляющий слой вместе с траекторией делается невидимым. В общем случае в качестве объекта может выступать символ типа Movie clip, т. е. некоторый мультфильм, или даже группа объектов различных типов. Рассмотрим простой пример, в котором по произвольной кривой перемещается изображение стрелки.

В слое, который назовем Стрелка, нарисуем объект в виде стрелки и преобразуем его в символ типа Graphic. В более общем случае в качестве объекта может выступать символ типа Movie Clip, т. е. некоторый мультфильм или даже группа объектов различных типов.

Рис. 574. Объект в виде стрелки, который должен двигаться

Далее, щелкнем правой кнопкой мыши на имени слоя Стрелка и в контекстном меню выберем команду Add Motion Guide (Добавить направляющую движения). В результате в списке слоев появится новый слой Guide: Стрелка с характерным значком слева от его имени. Это и есть направляющий слой (guide layer). Слой, находящийся в списке непосредственно под ним, является направляемым (guided). В направляющем слое нарисуем траекторию движения. Для этого можно использовать любой инструмент рисования линий, например, «Карандаш» (Pencil). Главное, чтобы траектория была линией (контуром), а не областью заливки.
Выделим наш объект в виде стрелки и переместим его на начало траектории. При перемещении в центре изображения объекта появится кружок, который должен попасть на линию траектории и как бы зацепиться за нее. Этим мы привязываем объект к траектории.

На временной шкале выберем кадр, соответствующий окончанию движения по траектории (в нашем примере это 30-й кадр). Сделаем его ключевым. Это нужно сделать сначала в направляющем слое, а затем — в направляемом.

Убедимся, что активным является направляемый слой (в нашем примере это слой Стрелка). Перетащим объект на конец траектории, а затем вернемся к первому кадру в этом же слое. Создадим анимацию (команда Insert Motion Tween). В общих чертах организация движения по направляющей траектории завершена.

Рис. 575. В направляющем слое рисуется траектория движения

Рис. 576. Задание параметров движения по траектории

Рис. 577. Движение объекта с его ориентацией вдоль траектории

Чтобы траектория движения была невидимой, достаточно сделать невидимым направляющий слой. Если вы хотите, чтобы объект ориентировался вдоль траектории, установите для первого кадра слоя с объектом свойство Orient to Path. Ускорение или замедление движения по траектории определяется параметром Easing.

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

Слои-маски

Содержимое слоя можно рассматривать через отверстие, скрыв все остальное. Для этого служит так называемый слой-маска — особый тип слоя, содержащий собственно маску. Маска (отверстие или окно просмотра) может быть создана на основе объектов различных типов: области заливки, текстового поля, экземпляра графического символа и даже мультфильма. Маску можно заставить изменять свою форму или перемещаться. Однако нельзя применять слои-маски внутри кнопок.
Маска представляет собой слой, в котором любая область заливки интерпретируется как отверстие, через которое виден нижележащий слой. При этом цвет заливки, градиент и контур игнорируются. По умолчанию слой-маска закрывает (маскирует) только тот слой, который лежит непосредственно под ним.
Рассмотрим создание простой маски на основе области заливки. Создадим сначала маскируемый слой. Назовем его Фон. Мы импортировали в него растровую картинку из пакета Photoshop 7.O. Далее, создадим слой-маску. Для этого достаточно щелкнуть на кнопке со знаком «+» внизу списка слоев. Назовем его Маска. В этом слое нарисуем какую-нибудь фигуру и зальем ее каким-нибудь цветом, т. е. создадим область заливки. Мы нарисовали овал, а затем трансформировали его с помощью инструмента Subselect (белая стрелка). Теперь укажем, что данный слой является слоем-маской. Для этого достаточно щелкнуть правой кнопкой мыши на его имени и в контекстном меню выбрать команду Mask (Маска). При этом слева от имени слоя-маски и маскируемого слоя появятся характерные значки, и оба слоя будут заблокированы (справа от их имен появятся изображения замков). Маскирование вступит в силу, ивы увидите на рабочей области лишь участок фона, который накрывается фигурой слоя-маски.
Чтобы перейти в режим редактирования маски и увидеть как фон, так и просмотровое окно маски, разблокируйте слой-маску (щелкните на соответствующем изображении замка) В режиме редактирования можно изменить форму, расположение и даже количество просмотровых окон маски.
В общем случае можно маскировать несколько слоев, а не только тот, который находится непосредственно под слоем-маской. Если необходимо сделать какой-либо слой маскируемым, то его прежде всего следует расположить ниже слоя-маски, а затем в свойствах этого слоя установить переключатель Masked (Маскируемый). Наоборот, чтобы вывести слой из-под маски, установите этот переключатель Normal.

Итак, мы рассмотрели простейший способ создания маски. Зачем нужны маски? Маска в статическом виде является инструментом для создания коллажей.
Здесь мы не будем останавливаться на том, в каких случаях и зачем может потребоваться скрывать что-то из уже имеющегося, чтобы оставшееся предстало в интересном или нужном нам виде.

Рис. 578. Маска в режиме редактирования. Чтобы увидеть действие маски, установите блокировку слоя-маски (замок)

Рис. 579. Вид сцены при включенном режиме маскирования: слой-маска заблокирован (замок). Фон виден только через просмотровое окно маски

Наиболее интересные и полезные эффекты применения масок получаются при их анимировании: просмотровые окна масок могут изменять свою форму и перемещаться на фоне маскируемых слоев. Именно поэтому они и находят широкое применение в мультфильмах. Раскрывающиеся меню, рябь на воде, метаморфозы облаков, движение губ при разговоре — все это можно сделать с помощью аними-рованных масок.

Теперь рассмотрим создание анимированных масок. По существу, анимиро-ванная маска — это маска, просмотровое окно которой либо изменяет свою форму, либо перемещается в рабочей области. Вы можете создать несколько просмотровых окон, но все они должны быть сгруппированы в единый объект с помощью команды Modify>Groupe (Модифицировать>Группировать).

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

Для слоя-маски создадим анимацию движения. Сначала сделаем перемещение просмотрового окна в слое-маске. В нашем примере в качестве последнего выбран 20-й кадр (он является ключевым). В слое-маске перемещаем фигуру просмотрового окна на новое место. Возвращаемся к первому кадру и выполняем команду Insert>Create Motion Tween (Вставить>Создать анимацию движения). В результате между первым и последним кадрами появится стрелка. Чтобы анимация получилась, советуем вам сначала выделить фигуру просмотрового окна, а затем применить к ней команду группировки Modify>Groupe. Мы уже отмечали это обстоятельство при рассмотрении направляющих слоев. Если что-то не так, между первым и последним кадрами вместо стрелки появляется штриховая линия. Затем в маскируемом слое вставьте кадр на 20-ю позицию. Это может быть обычный, не обязательно ключевой, кадр. Заблокируйте слои и нажмите клавишу <Enter>, чтобы увидеть маску в действии.

Рис. 580.

Рис. 581. Временная шкала при создании перемещающейся маски и вид рабочего поля в режиме редактирования (слои разблокированы)

В Flash MX создание анимации несколько отличается от того, как это делается в Flash 5.O. Эти отличия мы уже рассматривали в разделе данной главы. Их суть заключается в выборе подходящих значений свойств кадра в палитре Properties (Свойства).

Просмотровое окно маски может изменять форму. Для этого вместо motion tweening (Анимация движения) следует использовать shape tweening (Анимация формы). Для этого в свойствах первого кадра следует выбрать в раскрывающемся списке Tweening значение Shape (Форма). Значение Distributive (Размытый) параметра Blend (Переход) позволяет получить более сглаженные промежуточные кадры; значение Angular (Угловатый) этого же параметра позволяет сохранить в промежуточных кадрах углы и отрезки прямых линий.

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

В Flash MX анимация типа трансформации производится аналогичным образом. Особенность заключается в том, что свойства первого кадра устанавливаются в палитре Properties (Свойства).

Интересные визуальные эффекты получаются, когда под маской находятся несколько фоновых слоев. Рассмотрим случай, когда требуется лучом фонарика осветить какое-нибудь темное изображение. В нашем примере это растровая картинка — фрагмент интерьера сельского дома. Очевидно, что в слое-маске можно использовать круглое просмотровое окно, которое будет имитировать световое пятно. Далее, нам потребуются два слоя, содержащие идентичные изображения, отличающиеся друг от друга только тем, что одно из них светлее другого. Эти изображения можно получить из одного и того же файла путем коррекции яркости и контрастности в каком-нибудь растровом графическом редакторе, например, в Photoshop. Светлое изображение поместим в слой непосредственно под слоем-маской, а темное изображение — в слое, расположенном еще ниже. Картинки в этих двух слоях должны быть расположены так, чтобы одна полностью накрывала другую. Маскируемым будет слой со светлым изображением.

Рис. 582. Картинки в разных слоях должны быть совмещены так, чтобы более светлая накрывала темную

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

Рис. 583. Использование маски для создания эффекта перемещения луча от фонарика

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

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

Рассмотрим пример, в котором маска неподвижна, а картинка в маскируемом слое перемещается. На исходной картинке, которая является фоном всей композиции, изображены дюна и облачное небо. Мы хотим, чтобы облака перемещались. С этой целью мы поместили в маскируемый слой растянутое по ширине исходное изображение, а просмотровое окно маски сделали так, чтобы оно совпадало с участком неба на исходной картинке. Растянутое изображение в маскируемом слое перемещается по горизонтали. При этом в окно маски попадает только небо, а дюна маскируется. Ширина растянутого изображения должна быть такой, чтобы к окончанию движения его левый край совпадал елевым краем фоновой картинки. Конечно, в качестве перемещающегося изображения можно было бы взять только полосу с облаками, но наш способ оказался в данном случае более быстрым: мы просто скопировали исходную картинку в маскируемый слой и применили к ней команду Scale.

Рис. 584. Создание эффекта плывущих облаков на основе неподвижного просмотрового окна маски и перемещающегося маскируемого слоя

Цветовые эффекты

Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует у shape tweening.
В Flash 5.0, для того чтобы применить эффект к символу, нужно выделить этот символ и на палитре эффектов, открываемой командой Windows>Panels>Effects, выбрать нужный эффект (см. рисунки).

Рис. 587. Точная установка всех составляющих цвета (Advanced)

Рис. 588. Установка прозрачности (Alpha)

В Flash MX аналогичные эффекты выбираются в раскрывающемся списке Color (Цвет) в палитре Properties (Свойства).

Рис. 589. Установка эффектов в палитре Properties в Flash MX

 

567.gif

Изображение: 

568.gif

Изображение: 

569.gif

Изображение: 

570.gif

Изображение: 

571.gif

Изображение: 

572.gif

Изображение: 

573.gif

Изображение: 

574.gif

Изображение: 

575.gif

Изображение: 

576.gif

Изображение: 

577.gif

Изображение: 

578.gif

Изображение: 

579.gif

Изображение: 

580.gif

Изображение: 

581.gif

Изображение: 

582.gif

Изображение: 

583.gif

Изображение: 

584.gif

Изображение: 

587.gif

Изображение: 

588.gif

Изображение: 

589.gif

Изображение: 

11. Примеры анимации

 

Примеры анимации

Ряд примеров создания анимации мы уже рассматривали выше, например, в разделах, и . Здесь мы приведем дополнительные примеры.

Аквариум

Рассмотрим, как на основе одного символа «Рыба» можно сделать «Аквариум» с множеством различных рыбок. Для этого воспользуемся библиотекой символов, поставляемой вместе с пакетом Flash 5.0 (команда Window>Common Libraries>Movie Clips). Выберем в ней символ Fish Movie Clip (Мультфильм «Рыба»). Это — не просто картинка, а мультфильм, т. е. рыба перемещается в некоторой области. Перенесем экземпляр этого символа на рабочую область редактора. Теперь выделим его и отредактируем. Например, изменим размеры и немного повернем, как показано на следующем рисунке. Можно изменить цвет и произвести другие трансформации.

Рис. 590. Экземпляр символа из библиотеки можно модифицировать

Повторим эту операцию несколько раз, т. е. создадим несколько экземпляров символа «Рыба». Каждый экземпляр должен «плавать» в своем отдельном слое. Далее, создадим еще один слой, зальем его голубым цветом и нарисуем водоросли. В результате получится примерно то, что показано на следующем рисунке.

Рис. 591. В рабочей области расположены несколько экземпляров символа «Рыба», различающихся размерами, цветом и начальным положением. «Водоросли» нарисованы вручную в слое Фон

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

Рис. 592. Кадр мультфильма, созданного путем композиции фрагментов растровой графики

Вращение планет вокруг Солнца

Рассмотрим теперь вращение трех планет — Меркурия, Венеры и Земли — вокруг Солнца. Этот весьма поучительный и красивый пример описан Александром Рыбниковым на сайте http://zona5.al.ru. Подробно, шаг за шагом, опишем процесс создания мультфильма.

Шаг 1. Создадим новый файл. Выполним команду Modify>Movie и в открывшемся диалоговом окне укажем физические размеры области в пикселах. Не будем себя ограничивать, Flash-мультфильмы хорошо смотрятся в полноэкранном варианте, поэтому зададим размеры кадра 800x600. По умолчанию скорость смены кадров мультфильма устанавливается 12 кадров/с. В данном случае разумно это число увеличить до 16, так как иначе изображение заметно «дергается».
Шаг 2. Нарисуем сначала Космос. Для этого просто очертим рабочую область прямоугольником и зальем его черным цветом.
ШагЗ. Теперь в центре нашей Вселенной необходимо поместить Солнце. Постарайтесь изобразить его более или менее правдоподобно, то есть нарисовать не просто некий красный круг, а еще и нанести на него слегка несимметричный градиент, что должно придать вашему произведению некоторую объемность, а затем окружить Солнце светящимся ореолом, что прибавит правдоподобности. Всего вышеперечисленного можно достичь как средствами самого редактора Flash, так и импортировать уже готовую картинку из любого растрового графического редактора. Но второй способ в нашем случае крайне нецелесообразен, поскольку Солнце является достаточно крупным объектом , и если оно будет представлено в виде растрового изображения, то значительно увеличится объем выходного файла. Рассмотрим, как нарисовать Солнце средствами Flash.
Нарисуем круг, для заливки в раскрывающемся списке с образцами цветов выберем любой градиент. С помощью команды Window>Panels>Fill (Окно>Па-литры>3аливка) откроем диалоговое окно, которое позволит задать значения цветов градиента. Пусть Солнце будет залито ярко-желтым цветом, плавно переходящим в ярко-красный. Ореол сделаем аналогичным образом, подложив круг большего размера, окрашенный градиентом из красного цвета в черный. Важно, чтобы Солнце находилось точно в центре, т. е. координаты центра должны быть (400,300).
Шаг 4. Настало время рисовать три планеты. Важно заметить, что они достаточно маленькие, поэтому в данном случае можно импортировать растровое изображение в формате прозрачного GIF (точнее, рисунок с прозрачным фоном). Такое изображение должно занимать не более 500 байт дискового пространства. Импортирование осуществляется следующим образом.
Сначала надо создать новый слой командой Insert>Layer (Вставить>Слой). Для каждой из планет потребуется отдельный слой, поэтому слои имеет смысл назвать именами планет. Далее в этом слое необходимо создать новый символ (команда Insert>Symbol (Вставить>Символ)). В меню File выберем команду Import и импортируем нужное GIF-изображение.
Шаг 5. После этого созданный символ требуется поместить в соответствующий слой. Для этого откроем библиотеку символов (команда Window>Library (Окно> Библиотека)) и перетащим оттуда символ с изображением планеты в рабочую область (сцену).
Шаг 6. Отметим, что планеты должны впоследствии вращаться вокруг Солнца.— центра сцены. Поэтому надо вновь вернуться к редактированию символа (2 раза щелкнуть на планете) и указать в диалоговом окне Info (команда Window>Info) удаленность его от центра. Выбрана удаленность по горизонтальной оси (все эти значения отрицательные, т. е. изначально планеты располагаются слева от Солнца):

  • для Земли: — 250 пикселов;
  • для Венеры:— 180 пикселов;
  • для Меркурия: — 120 пикселов.

Стационарная картинка готова! Она должна быть как можно более похожа на следующий рисунок:

Рис. 593. Стационарная сцена: Солнце и три планеты, расположенные слева от него

Шаг 7. Теперь заставим наши планеты вращаться против часовой стрелки вокруг Солнца. Известно, что те планеты, которые располагаются ближе к Солнцу, вращаются быстрее. Попытаемся количество кадров мультфильма рассчитать таким образом, чтобы Земля за один цикл совершала один оборот, Венера — два, а Меркурий — три. Оптимальным числом кадров, кратным двум, трем и четырем, является число 120. Было бы некрасиво, если бы все планеты в какой-то момент времени становились в ряд. Поэтому зададим начальный угол расположения планет :

  • для Земли — 150°;
  • для Венеры — 120°;
  • для Меркурия — 0°.

Эти данные можно задавать и изменять в диалоговом окне Info.
Шаг 8. Теперь создадим первый ключевой кадр для любой из планет, например, для Земли. Для этого щелкнем на первом кадре соответствующего слоя правой кнопкой мыши и в открывшемся меню выберем команду Create Motion Tween. Затем скопируем данный кадр в буфер обмена (Сору) и вставим его (Paste) на место кадра с номером 60. Затем повернем Землю на угол 180 , т. е. укажем значение угла в окне Transform равным —30 (см. рисунок). Следующим ключевым кадром будет 90-й (поворот еше на 90°) и последний ключевой кадр — 120-й (полный оборот Земли вокруг Солнца завершен).

Рис. 594. Разработка анимации в мультфильме с Солнцем и планетами

Шаг 9. Аналогичным образом мы можем задать движение Венеры и Меркурия. Чтобы задать движение Венеры, потребуется вдвое больше опорных кадров, для Меркурия — втрое. При этом можно копировать сразу несколько кадров. Поэтому в диалоговом окне достаточно задать углы только для одного оборота каждой из планет.

Шаг 10. Остается только опубликовать полученную сцену (команда File>Publish) и насладиться полученным эффектом.

 

590.gif

Изображение: 

591.gif

Изображение: 

592.gif

Изображение: 

593.gif

Изображение: 

594.gif

Изображение: 

12. Звук в мультфильмах

 

Звук в мультфильмах

К мультфильму можно добавить звуковое сопровождение. Для этого необходимо сначала импортировать звуковой файл в одном из следующих форматов: WAV, AIFF или МРЗ. Импорт осуществляется с помощью команды File>Import (Файл>Импорт).
Звуковое сопровождение может украсить ваш мультфильм. Однако многие пользователи нередко предпочитают отключить звук. Поэтому неплохо бы, разрабатывая озвученный мультфильм, предусмотреть в нем кнопку для выключения звука. Этой кнопке следует назначить действие Stop All Sounds (Прекратить все звуки) (подобные действия, назначаемые объектам, еще называют Action или сценарий). Звуковой файл имеет следующие параметры, которые влияют как на качество звука, так и на объем файла:

  • Частота дискретизации (Sample rate). Количество выборок из звукового сигнала, производимых в одну секунду. Обычно эта величина не превышает 22 кГц, что соответствует полосе частот 11 кГц (по теореме Котельникова ширина полосы воспроизводимых частот равна половине частоты дискретизации).
  • Битовое разрешение (Bit resolution). Количество бит (двоичных разрядов), используемых для дискретизации звукового сигнала по уровню. 16-битные файлы характеризуются меньшим фоновым шумом, но для уменьшения объема файла в Flash-мультфильмах обычно используют 8-битный звук.
  • Каналы (Channels). Звук может быть одно- и двухканальный (моно и стерео). Для Flash-мультфильмов обычно достаточным является монозвук, требующий примерно вдвое меньше памяти, чем стереозвук.

При разработке мультфильма вы можете использовать высококачественные звуковые файлы, а затем, при публикации в файл SWF-формата, установить нужные параметры звука.

Чтобы импортировать звуковой файл в мультфильм, выполните команду File>Import и в открывшемся диалоговом окне Import выберите файл звукового формата, который хотите импортировать. Затем щелкните на кнопке Open (Открыть). В результате выбранный звуковой файл попадет в библиотеку мультфильма.
После импортирования звукового файла в мультфильм его нужно разместить и задать параметры. Выполните следующее:

  1. 1. Создайте новый слой для звукового файла.
  2. 2. Выделите на этом слое нужный ключевой кадр, откройте библиотеку (Window>Library) и перетащите звуковой файл на рабочее поле. При этом звуковой файл будет распространен на все кадры до следующего ключевого кадра, если такой имеется.
  3. 3. В Flash 5.0 выполните команду Window>Panels>Sound (Окно>Палитры>Звук). Откроется палитра Sound (Звук). В Flash MX обратитесь к палитре Properties (Свойства). В раскрывающемся списке Sound выберите нужные звуки. В этом списке указаны все импортированные звуковые файлы. Сведения о файле приведены ниже списка, под названием файла: частота дискретизации в кГц, каналы, битовое разрешение, длительность звучания и размер файла.
  4. 4. В раскрывающемся списке Effect (Эффект) при желании выберите звуковой эффект. По умолчанию используется значение None (Нет). Например, эффект Fade In (Нарастание) воспроизводит звук с постепенным увеличением громкости.
  5. 5. В раскрывающемся списке Sync (Синхронизация) выберите одно из следующих значений:
    • Event (Событие). Начинает воспроизведение звука с первого ключевого кадра и продолжает до окончания файла, даже если мультфильм уже закончился. Это значение используется по умолчанию.
    • Start (Начать). Начинает воспроизведение звука с первого ключевого кадра. Однако если ключевой кадр воспроизводится снова при продолжающемся звучании, Flash начинает проигрывать звук заново. Это значение обычно используется при озвучивании кнопок.
    • Stop (Остановить). Останавливает воспроизведение звука.
    • Stream (Поток). Синхронизирует звук с анимацией. При этом Flash укорачивает или удлиняет анимацию, чтобы она совпала со звуком. Воспроизведение звука прекращается при воспроизведении последнего кадра, содержащего звук. Для указания места окончания звучания можно добавить заключительный ключевой кадр перед добавлением звука.
  6. 6. В поле Loop (Цикл) задайте число циклов повторения воспроизведения звука. Если известны длительность звукового файла, количество циклов анимации и частота воспроизведения кадров, можно рассчитать, сколько циклов воспроизведения звука потребуется при воспроизведении вашей анимации. Например, если анимация содержит 48 кадров, а их частота воспроизведения равна 12 кадров/с, то длительность мультфильма составляет 4 с; если длительность звукового файла равна 2 с, то количество циклов воспроизведения звука равно 2. На практике, чтобы не заниматься вычислениями, обычно указывают заведомо большее количество циклов.
  7. 7. После добавления звукового файла, чтобы просмотреть результаты, нажмите клавишу <Enter> или выполните команду Control>Play (Управление> Воспроизвести).

После размещения звукового файла в мультфильме его можно отредактировать. Например, вы можете удалить ненужные фрагменты звука, изменить его громкость. Для этого в палитре Sound щелкните на кнопке Edit (Редактировать). В результате откроется окно Edit Envelope (Редактировать огибающую).

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

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

По окончании редактирования звукового файла щелкните на кнопке ОК, чтобы закрыть окно Edit Envelope.

Рис. 595. Окно Edit Envelope

Следует иметь в виду, что добавление звука может существенно увеличить объем файла мультфильма. Поэтому следует принять меры для сжатия звуковой информации. Если уменьшить частоту дискретизации, то это может ухудшить качество звука. Можно использовать не двухканальный, а одноканальный звук. Для задания свойств звука в Flash предусмотрены два способа:

Можно назначить звуки различным состояниям символа-кнопки. Звуки со

  • Для определения свойств всех звуковых файлов мультфильма используйте вкладку Flash диалогового окна Publish Settings (Параметры публикации), открываемого командой File>Publish (Файл>Публикация). Этот способ хорош, если мультфильм содержит один или несколько похожих звуков.
  • Для задания свойств отдельных звуковых файлов используйте диалоговое окно Sound Properties (Свойства звука). Для этого сначала откройте библиотеку мультфильма (Window>Library) и дважды щелкните на значке звукового файла, свойства которого хотите изменить. В верхней части диалогового окна отображаются сведения о звуковом файле. Новые значения параметров можно выбрать в раскрывающихся списках группы Export Settings (Параметры экспорта). При этом в нижней части диалогового окна отображается новый размер файла в килобайтах и процентах от исходного размера. Вы можете использовать формат сжатия (compression) MP3 как наилучший из имеющихся в Flash.

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

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

595.gif

Изображение: 

13. Композиция мультфильма — сцены и клипы

 

Композиция мультфильма — сцены и клипы

Мультфильм может иметь сложную структуру (композицию). Так, отдельные элементы одного мультфильма сами могут быть мультфильмами. В рассмотренном выше примере с аквариумом рыбы представляли собой различные экземпляры символа типа Movie Clip, т. е. были мультфильмами. Каждый мультфильм имеет собственную временную шкалу, которая управляет его воспроизведением. Если мультфильм входит составной частью в другой мультфильм, то чтобы подчеркнуть это обстоятельство, его называют клипом. В свою очередь, клип может содержать другие клипы.

Для управления множеством элементов клипа их обычно распределяют по слоям. Многослойную структуру используют при создании практически любого более или менее сложного объекта, будь то просто рисунок или целая анимация.
Кроме декомпозиции мультфильма (клипа) на слои, можно разделить его на временные отрезки, т. е. на сцены. Затем эти сцены можно располагать в произвольном порядке. Основания для разбиения мультфильма на сцены могут быть следующие:

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

При создании нового мультфильма (File>New) по умолчанию создается только одна сцена с именем Scene 1. При этом любая разрабатываемая анимация становится частью этой сцены. Чтобы добавить сцену, выполните команду Insert>Scene (Вставить>Сцена). При этом рабочее поле очистится и над временной шкалой слева появится другое название — Scene 2.

Рис. 596.

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

Для задания параметров сцены выполните команду Window>Panels>Scene (Окно>Палитры>Сцена). В Flash MX эта команда короче: Window>Scene (Окно>Сцена). На открывшейся палитре Scene отобразится список всех сцен данного мультфильма. Порядок сцен в списке важен, поскольку именно в таком порядке они будут воспроизводиться. Чтобы его изменить, просто перетащите название сцены в списке в новое положение. Для изменения названия сцены дважды щелкните на нем, введите новое название и нажмите клавишу <Enter>.

Рис. 597. Палитра Scene. В нижней части палитры расположены три кнопки для дублирования, добавления и удаления сцены

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

 

596.gif

Изображение: 

597.gif

Изображение: 

14. Сценарии (ActionScript)

 

Сценарии (ActionScript)

В предыдущих разделах обсуждалась собственно анимация. Теперь перейдем к рассмотрению инструмента, используемого при создании большинства высококачественных Flash-приложений (Flash movies). Речь пойдет об ActionScript — языке программирования, встроенном в Flash. Заметим, что версия языка ActionScript для Flash 5.0 существенно отличается от ActionScript, который был в Flash 4.
В Flash MX язык ActionScript был несколько расширен:

  • добавлены функции динамического управления параметрами мультфильма во время его воспроизведения;
  • для любого объекта мультфильма появилась возможность задавать перечень обрабатываемых событий (щелчок кнопкой мыши, нажатие клавиши и т. п.);
  • добавлена возможность создания собственных типов объектов и событий;
  • добавлены специальные команды управления временными параметрами мультфильма, Setlnterval и ClearInterval. В ряде случаев их использование более эффективно, чем управление воспроизведением с помощью временной шкалы. Заметим, что аналогичные методы используются при создании анимационных эффектов в динамическом HTML ;
  • расширены возможности управления текстовыми объектами. Например, можно при воспроизведении мультфильма преобразовывать статический текст в ссылку и наоборот;
  • включен оператор Switch, который обеспечивает более наглядное представление последовательности логических условий по сравнению с оператором If;
  • улучшена реализация ряда базовых функций языка (string, number, array и др.), в результате чего они теперь выполняются существенно быстрее.

В этой книге мы не будем выходить за рамки ActionScript, поддерживаемого в Flash 5.O.

ActionScript позволяет создавать интерактивные Web-страницы. Вы можете сделать так, чтобы выполнялись какие-либо действия при проигрывании определенного кадра, при щелчке или при нажатии клавиши. Этот язык очень похож на JavaScript. Лучший способ овладеть языком — начать писать на нем простые программки. В программе Flash имеются возможности управления мультфильмом, отдаляющие пользователя от написания программ на языке ActionScript вручную. Это сделано, в основном, для начинающих и оправдано при создании очень простых мультфильмов. Вся сила Flash — в развитом языке программирования. Что-либо серьезное невозможно сделать без его применения.

Действия можно применить к трем вещам: к кадру на временной шкале, к символу типа Button (Кнопка) и символу типа Movie Clip (Анимация). К символам типа Graphic (Графический) действия не применимы.

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

 

1. \(см. главу 10\)

 

ГЛАВА 10. ЭЛЕМЕНТЫ ЯЗЫКОВ HTML И JAVASCRIPT

 

15. Термины

 

Термины

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

  • Действие (Action) — инструкция, которая указывает Flash-мультфильму, что делать. От них произошло название языка — ActionScript (Сценарий действий).
  • Событие (Event) — может возникать, когда закончилась загрузка какого-то кадра, когда достигнут определенный кадр, когда пользователь нажал клавишу на клавиатуре или когда курсор мыши оказался над объектом и т. п.
  • Выражение (Expression) — любая часть инструкции, порождающая значение,
    Например:

    2 + 2
    2 * 5
    a + b
    (s5 + k) * random (10)

  • Функция (Function) — блок кода, который можно многократно использовать. Функции можно передавать значения и получать от нее возвращаемый результат. Например, number=get_color(15,24), где 15 и 24 являются аргументами (параметрами) функции get_color, возвращаемое значение которой записывается в переменную number.
  • Класс (Class) — тип объектов. Например, класс «дерево» — экземпляр класса «растение». В Flash есть несколько предопределенных классов (очень похожих на классы JavaScript). Вы можете создавать свои классы или модифицировать существующие.
  • Экземпляр (Instance) — это экземпляр (в буквальном смысле) определенного класса. Например, экземпляром класса «растения» могут являться «дерево», «куст» или «цветок». Экземпляр— уже конкретный реальный объект. Если класс — это определение объекта, то экземпляр — его конкретное воплощение. Каждому экземпляру можно присвоить имя, чтобы через него обращаться к функциям или переменным объекта. Когда мы создаем символ, то тем самым создаем класс, а когда перетаскиваем этот символ из окна библиотеки в рабочую область, то вставляем в сцену экземпляр символа.
  • Обработчик (Handler) — специальная инструкция, обрабатывающая событие. Например, onClipEvent является обработчиком действий, связанных с конкретным символом.
  • Оператор (Operator) — элемент языка, который вычисляет значение, исходя из одного или более аргументов. Например, оператор сложения (+) возвращает сумму двух значений, расположенных слева и справа от него.
  • Переменная (Variable) — это идентификатор, которому можно присвоить значение. Например: а = 5, name = "Иван".
 

16. Палитра действий

 

Палитра действий

Палитра действий (Actions) служит для отображения и ввода ActionScript-npoграмм. Существует два режима работы с палитрой действий: нормальный (для «чайников») и экспертный. В экспертном режиме вы можете задать команду (инструкцию) прямо в поле ввода с помощью клавиатуры, а в нормальном режиме так делать нельзя, но для уточнения действий используется панель параметров внизу. Выбрать нормальный или экспертный режим можно в меню палитры действий (кнопка со стрелкой в правом верхнем углу).

Добавить инструкцию можно, нажав кнопку «+» или выбрав соответствующую инструкцию в списке элементов языка. Кроме того, для всех действий в Flash имеются комбинации клавиш, с помощью которых это можно сделать гораздо быстрее. Они приведены справа от каждого действия в меню кнопки «+». Удалить инструкцию можно, выбрав ее и нажав клавишу <Delete>.

Ели у вас нет опыта программирования на языках типа C++, Java или JavaScript, то начните работу в нормальном режиме. Нормальный режим обладает достоинством, делающим его незаменимым для новичков: при его использовании гораздо меньше шансов ошибиться в синтаксисе языка. Новичкам это поможет быстрее понять тонкости ActionScript. Почаще смотрите на выражения в правой части палитры.

Рис. 598. Палитра действий (Actions), вкладка действий объекта (Object Actions) в Flash 5.0. В меню можно выбрать нормальный или экспертный режим работы. Если выделенное действие имеет параметры, то внизу палитры располагаются поля ввода их значений

На палитре действий указываются либо действия объекта (Object Actions), либо кадра (Frame Actions), выбранного в данный момент. Это отражается в заголовке палитры. Действия объекта это действия кнопки или клипа. Заметим, что действия клипа задаются на его собственной временной шкале, а не на основной временной шкале. Впрочем, если ваш мультфильм состоит из единственного клипа, то их нет надобности различать.

На вкладке Movie Explorer (Проводник мультфильма) палитры действий можно увидеть структуру мультфильма.
В Flash MX палитра действий несколько усовершенствована и, кроме того, сам язык ActionScript получил развитие. Рассмотрим лишь основные особенности палитры Actions.

Вызвать палитру Actions можно различными способами. Самым эффективным, пожалуй, является следующий. Если требуется создать или редактировать сценарий кадра, то щелкните правой кнопкой мыши на нужном кадре на временной шкале и в контекстном меню выберите команду Actions. В случае кнопки или мультфильма выделите объект на рабочем поле и на палитре Properties (Свойства) щелкните кнопке Edit the action script (Редактировать сценарий действий), расположенной у правой границы палитры. Убедитесь, что сценарий связан именно с интересующим вас объектом. Для этого посмотрите на заголовок палитры действий и расположенный ниже раскрывающийся список.

Рис. 599. На вкладке Movie Explorer отображается иерархическая структура мультфильма

В правом конце заголовка палитры Actions имеется значок, щелчок на котором вызывает меню. В этом меню, в частности, можно выбрать режим работы с палитрой (нормальный или экспертный).

Кнопка Script Pin (Закрепить сценарий) позволяет оставить содержимое палитры Actions без изменений, даже если вы выберете другой объект.
Среди элементов иерархического списка действий отметим группы Flash UI Components (Компоненты пользовательского интерфейса) и Deprecated (He рекомендуемые).

Рис. 600. Палитра Actions в Flash MX

 

598.gif

Изображение: 

599.gif

Изображение: 

600.gif

Изображение: 

17. Основные действия с мультфильмами

 

Основные действия с мультфильмами

Большая часть работы в Flash приходится на манипулирование символами. На нем основаны практически все базовые приемы, трюки и эффекты. С помощью сценариев на языке ActionScript символы могут выполнять практически любые действия. Надо только помнить, что делать это нужно только либо в ответ на действие пользователя, либо при появлении кадра на временной шкале. Ниже перечислены некоторые основные инструменты. Описание остальных вы найдете, например, в электронной справке Macromedia Flamnshi и приложении 5 этой книги. Перечислим события, используемые при определении действий в мультфильмах, с указанием, когда они происходят:

  • Load (Загрузка) — при загрузке мультфильма в память;
  • EnterFrame (Ввод кадра) — при вводе каждого кадра мультфильма;
  • Unload (Выгрузка) — в первом кадре после выгрузки мультфильма из памяти;
  • Mouse Down (Нажата кнопка мыши) — при нажатии (щелчке) левой кнопки мыши;
  • Mouse Up (Отпущена кнопка мыши) — когда отпускается левая кнопка мыши;
  • Mouse Move (Перемещение мыши) — при перемещении указателя мыши;
  • Key down (Нажатие клавиши) — при нажатии любой клавиши;
  • Key Up (Отпускание клавиши) — при отпускании любой клавиши;
  • Data (Данные) — при получении данных из действий loadVariables и load Movie.

Далее мы опишем основные действия, т. е. действия из списка Basic Actions.

Действие Go To

Действие Go To (Перейти к) предписывает мультфильму перейти к указанному кадру, который можно задать несколькими способами. На палитре действий способ задания кадра перехода выбирается в раскрывающемся списке Туре. Возможны следующие значения:

  • Frame Number (Номер кадра). Число, указывающее позицию кадра на временной шкале;
  • Frame Label (Метка кадра). Кадру можно присвоить метку и затем обращаться к нему через нее. Это очень полезно, если вы перемещаете кадры по временной шкале, изменяя тем самым их номера;
  • Expression (Выражение). Номер кадра можно вычислять с помощью выражения на языке ActionScript;
  • Next Frame (Следующий кадр);
  • Previous Frame (Предыдущий кадр).

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

  • Go to and Play (Перейти и воспроизвести). Используется для перехода к другому фрагменту мультфильма, а также для организации циклического воcпроизведения. Во втором случае к последнему кадру добавляется действие, предписывающее переход к первому кадру;
  • Go to and Stop (Перейти и остановить воспроизведение). Используется, например, для ожидания реакции пользователя (щелчка на кнопке и т. п.).

Рис.601. Палитра действий при выборе параметров действия Go To

Действие Play

Действие Play (Воспроизвести) воспроизводит мультфильм. Обычно оно добавляется к специальной кнопке, щелчок на которой начинает воспроизведение. Для корректного выполнения действия Play необходимо, чтобы указанный мультфильм присутствовал на временной шкале и имел имя. Чтобы указать, что именно следует воспроизвести, используется действие Tell Target (Указать цель), которое мы опишем ниже.

Действие Stop

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

Действие Toggle High Quality

Действие Toggle High Quality (Установить высокое качество) служит для управления качеством графического изображения мультфильма. Обычно его добавляют к кнопке для переключений между высоким и низким качеством отображения.

Действие Stop All Sounds

Действие Stop All Sounds (Остановить все звуки) прекращает воспроизведение всех звуковых файлов.

Действие Get URL

Действие Get URL (Связать с URL) является эквивалентом гиперссылки в языке HTML. Обычно используется при создании Web-страниц. Добавив это действие к кнопке, можно сделать так, чтобы при щелчке на ней открывалось приложение (например, Web-страница) неуказанному URL-адресу.

Рис. 602. Палитра действий при выборе параметров действия Get URL

На палитре действий можно задать параметры действия Get URL. В поле URL следует ввести URL-адрес. В раскрывающемся списке Window (Окно) можно выбрать следующие значения:

  • _self (в том же). Открывает Web-страницу в текущем (том же) окне;
  • _blank (в новом). Открывает Web-страницу в новом окне;
  • _parent (в родительском). Если мультфильм находится внутри кадра на Web-странице, то новая Web-страница будет расположена в родительском окне, содержащем этот кадр;
  • _top (поверх). Если мультфильм находится в кадре внутри окна, то все кадры будут удалены и замещены новой Web-страницей.

Вы можете использовать разработанные ранее сценарии на языках ActionScript, JavaScript и других, которые сохраняют данные в переменных. При этом вы можете определить, что делать с значениями этих переменных. Для этого нужно выбрать значение в раскрывающемся списке Variables (Переменные):

  • Don't send (He отправлять) (значение по умолчанию). Если у вас нет программных заготовок, вычисляющих значения переменных, то оставьте этот параметр;
  • Get. Отправляет значения переменных как часть строки, содержащей URL.
    Можно использовать не более 1024 символов для значений переменных.
  • Post. Отправляет значения переменных как отдельный набор данных. В этом случае данных может быть больше и они лучше защищены.

Действие FS Command

Действие FS Command (Команда FS) предназначено для управления приложениями, такими как Flash Player, Web-браузер и другие. Например, это действие позволяет выполнить сценарий на языке JavaScript, написанный для конкретной Web-страницы. На палитре действий предусмотрены два поля для ввода названия команды JavaScript и ее аргументов.
Выполнение сценариев на языке JavaScript из ActionScript более подробно будет рассмотрено ниже в соответствующем разделе данной главы.

Действие Load Movie
Действие Load Movie (Загрузить мультфильм) предназначено для загрузки SWF-файла с мультфильмом. Оно предпочтительнее, чем действие Get URL, используемое обычно для загрузки Web-страниц.

Рис. 603. Палитра действий при выборе параметров действия Load Movie

Действие Load Movie имеет следующие параметры:

  • URL. Если мультфильм находится в Web, то необходимо ввести полный URL-адрес. Если загружаемый SWF-файл находится в той же папке, что и текущий мультфильм, то можете просто указать его имя. Если он находится во вложенной папке, введите путь кфайлу и его имя, например, mov/my_movie.swf.
  • Location (Положение). Возможны два варианта:
    • Level (Уровень). Введите номер уровня, если хотите использовать несколько открытых мультфильмов. Чтобы заменить исходны и и все другие загруженные мультфильмы новым, установите значение 0. Для загрузки нового мультфильма без замены уже загруженных выберите номер уровня, который еще не использовался. При этом частота кадров, цвет фона и размер нового мультфильма будет определяться соответствующими параметрами мультфильма уровня 0;
    • Target (Цель). Введите имя клипа, который хотите заменить SWF-файлом. Это позволяет встраивать один клип вместо другого при сохранении места, масштаба и параметров вращения заменяемого клипа.
  • Назначение параметра Variables (Переменные) такое же, как и для действия Get URL (см. выше).

Действие UnLoad Movie

Действие Unload Movie (Выгрузить мультфильм) выгружает из памяти мультфильмы, которые были загружены с помощью действия Load Movie. Среди параметров нужно указать Level (Уровень), либо Target (Цель). Следует своевременно выгружать уже ненужные клипы для освобождения памяти. Это будет способствовать, в частности, высококачественному воспроизведению оставшейся части мультфильма.

Действие Tell Target

Мультфильм может содержать клипы (другие мультфильмы). Каждый такой мультфильм имеет собственную временную шкалу. Действие Tell Target (Указать цель) служит для управления одним мультфильмом из другого. Таким образом, одна временная шкала может управлять другой. Действие Tell Target лишь сообщает Flash, с каким объектом вы собираетесь работать, а другие действия должны указывать, что предстоит совершить.
Для действия Tell Target требуется указать лишь один параметр — целевой объект. Если вы не можете его указать непосредственно, то воспользуйтесь кнопкой с изображением прицела внизу палитры действий. В результате откроется диалоговое окно Insert Target Path (Вставить путь к цели). Кроме иерархического списка объектов, в этом окне можно указать дополнительные параметры:

  • Notation (Система обозначения). В Flash 5.0 принято разделять элементы пути точками (Dots), а в Flash 4.0 — косыми линиями (Slashes);
  • Mode (Режим). Определяет отображение иерархии клипов. В режие Relative (Относительный) отображаются только экземпляры клипов в текущем кадре текущей временной шкалы и экземпляры вложенных в них клипов. Для ссылки на текущую временную шкалу используется приставка this (этот). В режиме Absolute (Абсолютный) отображается каждый экземпляр клипа во всем мультфильме.

Рис. 604. Диалоговое окно Insert Target Path

Действие If Frame Is Loaded

Действие If Frame Is Loaded (Если кадр загружен) проверяет, загружается ли в память указанный кадр. Оно обычно используется при создании заставки — небольшого клипа, предваряющего воспроизведение основного мультфильма. При этом его комбинируют с действием Go To and Play (Перейти и воспроизвести).
Для действия If Frame Is Loaded можно задать параметры:

  • Scene (Сцена). Укажите сцену, содержащую нужный кадр;
  • Туре (Тип). Укажите, каким способом задается нужный кадр: Frame Number (Номер кадра), Frame Label (Метка кадра) или Expression (Выражение ActionScript, вычисляющее номер кадра);
  • Frame (Кадр). Введите номер кадра, метку или выражение.

Рис. 605. Палитра действий при выборе параметров действия If Frame Is Loaded

Действие On Mouse Event

Действие On Mouse Event (По событию мыши) используется только для кнопок. При добавлении какого либо действия к кнопке Flash автоматически добавляет и действие On Mouse Event. Это действие имеет параметр — событие.

Рис. 606. Палитра действий при выборе параметров действия On Mouse Event

 

601.gif

Изображение: 

602.gif

Изображение: 

603.gif

Изображение: 

604.gif

Изображение: 

605.gif

Изображение: 

606.gif

Изображение: 

18. Свойства мультфильма

 

Свойства мультфильма

Ниже перечислены некоторые наиболее часто используемые свойства (параметры) мультфильмов, которые можно считывать и/или изменять с помощью выражений ActionScript:

  • _ х, _у — координаты мультфильма (в пикселах);
  • _xscale, _yscale — масштаб мультфильма (в процентах), соответственно по горизонтали и вертикали;
  • _width, _height — ширина и высота мультфильма (в пикселах);
  • _rotation — угол поворота мультфильма (в градусах);
  • _alpha — прозрачность мультфильма (в процентах);
  • _visible — видимость.

Рассмотрим в качестве примера мультфильм, в котором имеются анимация (клип) и кнопка. При щелчке на кнопке клип становится невидимым.

  1. 1. Сначала сделаем мультфильм. Чтобы не тратить на это время, выберем его в библиотеке: возьмем какую-нибудь кнопку (Window> Common Libraries>Buttons), а затем — клип (Window>Common Libraries>Movie Clips). Поместим кнопку и клип в рабочую область. Тем самым мы создадим экземпляры символов кнопки и клипа.
  2. 2. Выделим экземпляр клипа на рабочей области и раскроем палитру его свойств (Window>Panels>Instance Properties).
  3. 3. В поле Name (Имя) введем значение testMC.
  4. 4. Выделим экземпляр кнопки в рабочей области on и раскроем палитру действий (Window>Actions). На палитре действий раскроем вкладку Actions.
  5. 5. Дважды щелкнем на названии действия setProperty (Установка свойств), чтобы добавить его в правый список.
  6. 6. В контекстном меню выберем _visible (Видимость).
  7. 7. Для параметра Target (Цель) введем значение testMC, а для параметра Value (Значение) — 0. Код должен выглядеть так:

    on (release) {
    setProperty ("testMC", _visible, false)};

  8. 8. Для проверки клипа выберем команду Control>Test Movie и щелкнем на кнопке. Клип должен исчезнуть с экрана.
 

19. Имена объектов

 

Имена объектов

Для того чтобы обращаться к мультфильмам, требуется задать имя объекта (instance name) и путь до объекта (target path). Договоримся, что мультфильм (Movie Clip) и объект — для нас одинаковые вещи.

Имя объекта — это имя конкретного экземпляра символа. Например, у нас может быть символ «Автомобиль», а экземпляры этого символа называются «Жигули», «Волга», «Audi», «Ока» и т. д.

Чтобы дать имя объекту, нужно выделить объект и в палитре Instance (открываемой командой Window>Panels>Instance или нажатием клавиш <Ctrl>+<I>) ввести имя объекта в поле Name. Имена могут состоять только из букв, цифр и знака подчеркивания, причем имя не должно начинаться с цифры. В поле Behavior этой панели задается тип объекта, в нашем случае — это Movie Clip.

Рис. 607. Панель задания свойств экземпляра символа (объекта)

 

607.gif

Изображение: 

20. Пути к объектам

 

Пути к объектам

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

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

  • this — указатель на самого себя (т. е. на текущий объект). Используется в случаях, когда, например, нужно передать в функцию указатель на объект, из которого эта функция вызывается;
  • _parent — указатель на родительский объект, т. е. объект, расположенный уровнем выше;
  • _root — «корень» или начало иерархии. Без него не обойтись при указании абсолютного пути.

Примеры пути:

  • лист.play () — вызывается функция play() подобъекта лист;
  • _parent .дерево .лист . stop ()— подразумевается, что на некотором уровне имеется объект дерево, у которого есть вложенный объект лист, вызывающий функцию stop();
  • _root .banner ._visible = false — сделать невидимым мультфильм banner, находящийся на первом уровне.

Рассмотрим в качестве примера иерархию из пяти объектов (см. рисунок). Объекты 1—4 находятся в первом слое, объект 5 — во втором слое. Объект 2 вложен в объект 1, а объект 3 вложен в объект 2. Назовем объекты obj 1, obj2, obj3, obj4, obj5.

Рис. 608. Пример иерархии из 5 объектов

Теперь займемся путями. Для начала посмотрим, какие объекты могут обращаться друг к другу по имени: obj 1 может обращаться к obj2, a obj2 — к obj3, но при этом obj 1 не может обратиться к obj3 напрямую, т. к. он содержится не в obj 1, а в obj2.

Пусть, например, объекту 1 нужно, чтобы объект 3 начал заново воспроизводиться с первого кадра. Вот как это делается:

obj 2.obj 3.gotoAndPlay(1)

Чтобы из объекта 4 сделать полупрозрачным объект 1 (со всеми его подобъек-тами), нужно в действиях объекта 4 написать:

_parent.objI._alpha = 50

или

_root.obj1._alpha = 50

Поскольку obj4 находится на первом уровне иерархии, то для него _root и _parent — одно и то же.

Теперь для объекта 3 напишем сценарий, который сделает объект 5 невидимым при нажатии кнопки мыши. В сценарии для объекта 3 напишем:

onClipEvent (mouseDown)
{
_root.obj5._visible = false;
}

В этом фрагменте использован абсолютный путь. При использовании относительного пути текст выглядел бы так:

_parent._parent._parent.objS._visible = false

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

Одними из самых важных являются функции управления воспроизведением мультфильма (play(), stop(), gotoAndPlay(), gotoAndStop()). Функции play() и stop() вызываются без параметров, в то время как в функции goto() нужно указывать номер кадра и, возможно, сцену.

При создании мультфильмов, особенно интерактивных, часто требуется знать положение указателя мыши. Координаты указателя мыши хранятся в свойствах _xmouse и _ymouse. Они могут быть вычислены относительно различных систем координат. Так, в главной системе координат горизонтальная координата курсора мыши определяется следующим образом:

x_pos = _root._xmouse;

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

x_pos = root.myMovieClip. xmouse

Здесь myMovieClip — имя экземпляра клипа.
Вы можете также определить положение указателя мыши внутри клипа, используя свойства _xmouse и _ymouse в действии клипа (clip action), как показано в следующем примере:

nClipEvent (enterFrame)
{
xmousePosition = _xmouse;
ymousePosition = _ymouse;
}

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

onClipEvent(mouseMove)
{
x_pos = root, xmouse; y_pos = _root._ymouse;
}

 

608.gif

Изображение: 

21. Отладка сценариев ActionScript

 

Отладка сценариев ActionScript

Рассмотрим инструменты, служащие для отладки сценариев ActionScript, окна Output (Вывод) и Debugger (Отладчик).

Есть функция trace(), которая выводит сообщения в окно Output. Туда же выводятся сообщения об ошибках. Использовать функцию trace() очень просто:

trace ("280-й кадр");

или, например,

trace (xpos + k);

Flash 4 окно Output было единственным средством отладки. В Flash 5 появился специальный инструмент — окно Debugger. Чтобы им пользоваться, нужно проверять мультфильмы не как обычно (команда Test Movie или клавиши <Ctrl> + <Enter>), а с помощью команды Debug Movie (или клавиш <Ctrl>+<Shift>+<Enter>). Окно Debugger можно скрыть/показать с помощью команды Window> Debugger.

Рис. 609. Окно Debugger отладчика сценариев

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

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

 

609.gif

Изображение: 

22. Действия для кнопки

 

Действия для кнопки

При изучении свойств интерактивности проще всего начать с создания кнопки. Как вы уже знаете, в Flash существует специальный тип символа для создания кнопок — Button. Будем считать, что вы уже умеете создавать кнопки как визуальный объект (выше в этой главе рассказано, как это сделать). Теперь попробуем наделить кнопку функциями (или, как еще говорят, добавим к ней функциональность).

Кнопки в Macromedia Flash могут реагировать на много событий. Эти события можно обработать по своему усмотрению. Вот список событий:

  • press —кнопка мыши нажата, когда курсор находится в пределах кнопки;
  • release — кнопка мыши отжата, когда курсор находится в пределах кнопки;
  • releaseOutside — кнопка мыши отжата, когда курсор находится вне пределов кнопки;
  • rollover — указатель мыши входит в пределы кнопки;
  • rollout — указатель мыши выходит за пределы кнопки;
  • dragOver — указатель мыши входит в пределы кнопки, при этом она была
    нажата, и нажата кнопка мыши;
  • dragOut — указатель выходит за пределы кнопки, при этом она была нажата, и нажата кнопка мыши;
  • keyPress ("клавиша") — была нажата <клавиша>. Список клавиш можно посмотреть в справке по Flash (объект Key) или воспользоваться панелью параметров для ввода нужной клавиши.

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

Перехватываются события с помощью функции оn(). Синтаксис ее таков:

on (событие)
{
...II код, обрабатывающий событие
}

Очень часто используемый пример — переход по ссылке при нажатии кнопки:

on(release)
{
getURL("http://zonaS.al.ru") ;
}

Чтобы проверить этот сценарий, выделите кнопку, нажмите <Ctrl>+<Alt>+<A> и введите этот текст сценария.

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

 

23. Раскрывающееся меню

 

Раскрывающееся меню

Без меню не обходится практически ни одна Web-страница. Есть несколько способов создания меню в Flash. Рассмотрим один из них. У нас будет главная кнопка. Наведение на нее указателя мыши раскроет ряд других кнопок, составляющих подменю. Если щелкнуть на кнопке подменю, то выполнится некоторое действие, например, переход на Web-страницу по указанному URL-адресу. Если указатель мыши окажется за пределами кнопок подменю, то они исчезнут, а главная кнопка останется.

Рис. 610. Пример раскрывающегося меню

Сначала рассмотрим план реализации нашего меню:

  1. 1. Создать главную кнопку и разместить ее в кадре1. Добавить к этому кадру действие Stop.
  2. 2. Добавить к главной кнопке (не кадру !) действие перехода к другому кадру, например, кадру 5.
  3. 3. В кадре 5 разместить главную кнопку и кнопки подменю. Таким образом, щелкнув на главной кнопке в кадре 1, мы перейдем в кадр 5, содержащий раскрытое меню.
  4. 4. Добавить к каждой кнопке подменю их собственные действия — переходы по некоторму URL-адресу.
  5. 5. В кадре 5 создать еще одну кнопку без всяких украшений. Сделать ее невидимой. Ее активная область (Hit) должна охватывать все рабочее поле за исключением области, занятой главной кнопкой и кнопками подменю. Добавить к этой кнопке действие перехода к кадру 1, если указатель мыши находится над ней (т. е. если указатель мыши вышел за область кнопок меню).

Теперь перейдем к алгоритму реализации нашего плана. Начнем с создания четырех слоев (Insert>Layer):

  1. 1. Для хранения действий кадров. Назовем его Actions (Действия).
  2. 2. Для главной кнопки меню. Назовем его Main (Главная).
  3. 3. Для кнопок подменю. Назовем его Submenu (Подменю).
  4. 4. Для остальной части рабочей области. Назовем его Other (Остальная).

Далее поступайте следующим образом:

  1. 1. В слое Actions создайте ключевые кадры 1 и 5. Добавьте к этим кадрам действие Stop.
  2. 2. В слое Main создайте ключевой кадр 5.
  3. 3. В слое Main выделите кадр 1. Создайте новый символ типа Button (Кнопка). Нарисуйте кнопку. Экземпляры этого символа мы используем и для кнопок подменю.
  4. 4. Щелкните на кадре Over и нажмите клавишу <F6>, чтобы вставить ключевой кадр. Нарисуйте кнопку для состояния Over. Обычно это просто модификация изображения для состояния Up.
  5. 5. Щелкните на кадре Down и нажмите клавишу <F6>. Нарисуйте изображение кнопки для этого состояния.
  6. 6. Выполните команду Edit>Edit Movie (Редактировать>Редактировать Мультфильм), чтобы покинуть временную шкалу кнопки и вернуться к главной временной шкале (шкале сцены).
  7. 7. Откройте окно библиотеки (Window>Library). Перетащите из него экземпляр символа кнопки на рабочее поле, например, в левый верхний угол.
  8. 8. Откройте окно Object Actions (Window>Actions) и выберите действие Go To (Перейти к). В поле Туре (Тип) установите значение Frame Number (Номер кадра), а в поле Frame (Кадр) введите значение 5. Выделите первую строку программного кода и установите флажок Roll Over (Переместить над) и снимите флажок Release (Отпустить). В результате при пересечении указателем мыши главной кнопки произойдет переход к кадру 5, в котором будут находиться кнопки подменю.
  9. 9. Создайте на кнопке какой-нибудь текст.
  10. 10. Сохраните полученный результат (File>Save).
  11. 11. В слое Submenu выделите кадр 5 и нажмите клавишу <F6>, чтобы он стал ключевым. Перетащите экземпляр своей кнопки из окна библиотеки непосредственно под первую кнопку. Перетащите еще один экземпляр кнопки под вторую. Сделайте это столько раз, сколько вам нужно. Если хотите, можете воспользоваться панелью Align (Выравнивание). Добавьте к кнопкам текстовые надписи.
  12. 12. Добавьте к кнопкам подменю какие-нибудь действия, например, Get URL или Go To and Play.
  13. 13. В слое Other выделите кадр 5 и нажмите клавишу <F6>, чтобы он стал ключевым.
  14. 14. Нарисуйте прямоугольник, немного перекрывающий рабочее поле. Цвет заливки выберите заметно отличающимся от цвета кнопок.
  15. 15. Выберите другой цвет заливки, отличающийся от цвета большого прямоугольника и цвета кнопок. Нарисуйте прямоугольник, охватывающий все кнопки. Выделите только этот прямоугольник и нажмите клавишу <Delete>. В предыдущей главе мы уже описывали, что происходит в этом случае. В результате у вас получится большой прямоугольник, который закрывает все, кроме кнопок.
  16. 16. Преобразуйте большой прямоугольник в символ типа Button.
  17. 17. Выполните команду Edit>Edit Symbols(Редактировать>Редактировать символы).
  18. 18. Выделите кадр Hit и нажмите клавишу <F6>, чтобы сделать его ключевым.
  19. 19. Выделите кадр Up и нажмите клавишу <Delete>.
  20. 20. Выполните команду Edit>Edit Movie (Редактировать>Редактировать мультфильм). Теперь большой прямоугольник будет отображаться прозрачным голубым цветом. Выделите его и выполните команду Window>Actions (Окно>Действия), чтобы открыть окно Object Actions (Действия объекта). Выберите действие On Mouse Event (По событию мыши). Установите флажок Roll Over и снимите флажок Release. Добавьте действие Go To, оставив значение параметра по умолчанию, т. е. 1.
 

700.gif

Изображение: 

24. Перетаскивание элементов мышью

 

Перетаскивание элементов мышью

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

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

  1. 1. Создадим новый мультфильм. Выполним команду Insert>New Symbol (Вставить>Новый символ). На экране появится диалоговое окно Symbol Properties (Свойства символа).
  2. 2. Введем имя перетащи_меня, установим переключатель Movie Clip. Щелкнем на кнопке ОК. При этом произойдет переход в режим редактирования символов.
  3. 3. Нарисуем произвольную фигуру («Тряпку»). Для этого можно использовать инструмент «Овал». Для достижения эффекта прозрачности, если хотите, можно установить значение параметра alpha равным 50. Выделим эту фигуру и нажмем клавишу <F8> для преобразования рисунка в символ.
  4. 4. В диалоговом окне Symbol Properties установим переключатель Button и назовем символ Кнопка. Щелкнем на кнопке ОК.
  5. 5. Выделим только что созданную кнопку и перейдем в экспертный режим ввода сценариев. Чтобы раскрыть окно ввода сценариев (Object Actions), щелкнем правой клавишей на символе кнопки и в контекстном меню выберем команду Actions. Введем следующий сценарий:

    on (press) {
    startDrag(_root.cloth);
    }
    on (release) {
    stopDrag () ;
    }

    Вместо startDrag(_root.cloth) можно написать startDrag(this). Идентификатор cloth — имя экземпляра клипа (символа типа Movie Clip), который будет перемешаться. Мы рассмотрим его позднее.
  6. 6. Щелкнем на кнопке Scene 1 (Сцена 1). При этом мы выходим из режима редактирования символов и возвращаемся к работе с главным мультфильмом. Введем текст «Сотрите пыль с экрана» (где угодно, только не на кнопке).
  7. 7. Выделим только что введенный текст и нажмем на клавишу <F8> (преобразовать в символ). Установим тип символа Graphic и введем имя сотри_меня. Вообще говоря, преобразовывать текстовые символы в графические не обязательно. Обычно это делается для того, чтобы зритель гарантированно увидел текст таким, как его задумал автор, независимо от наличия у него на компьютере нужного шрифта.
  8. 8. Объекты и сценарии мультфильма созданы. Теперь раскроем окно библиотеки (команда меню Window>Library), в нем должны быть три созданных нами символа, как показано на рисунке.


    Рис. 611. Окно Library с тремя символами типов Button, Movie Clip и Graphic

  9. Перетащим символ типа Movie Clip с именем перетащи_меня из окна библиотеки в рабочую область. Выделим его и раскроем палитру Instance (Экземпляр). Для этого выполним команду Modify>Instance (или нажмем клавиши <Ctrl>+<I>). Введем в поле Name имя экземпляра клипа cloth. Ввод имени экземпляра клипа обязателен, поскольку к нему есть обращение из сценария.

  10. Сохраним наше творчество в файле с расширением fla. Протестируем мультфильм, для чего выполним команду меню Control>Test movie. На следующем рисунке показано то, что должно было получиться.

Рис. 612. Фигуру в виде пятна можно перетаскивать по экрану мышью. Прозрачность этой фигуры установлена равной 50, чтобы было виден текст, который они перекрывает.

 

701.gif

Изображение: 

702.gif

Изображение: 

25. Текстовое поле

 

Текстовое поле

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

  1. 1. В новом мультфильме создадим два слоя с названиями Текст и Кнопка.
  2. 2. В слое Кнопка разместим символ типа Button (Кнопка) и прямоугольную рамку, которую нарисуем с помощью инструмента Rectangle (Прямоугольник). Кнопку можно взять из встроенной библиотеки. Для этого раскроем окно библиотеки (Window>Common Library) и выберем подходящую кнопку. Затем перетащим ее экземпляр в рабочую область и выделим его. Щелкнув правой кнопкой мыши на экземпляре кнопки, в раскрывшемся меню выберем команду Actions. Перейдем в экспертный режим и введем следующий сценарий:
    on (release) {
    _root.mytext = "";
    }

    Здесь mytext — имя текстового поля, которое будет рассмотрено далее. Сценарий просто заменяет содержимое текстового поля пустой строкой.
  3. 3. Перейдем к слою Текст и с помощью инструмента «Текст» нарисуем внутри рамки прямоугольник текстового поля. Выделим это текстовое поле и на палитре Text Options (если ее нет на экране, то выполните команду Window>Panels>Text Options) на одноименной вкладке введем параметры:
    • в раскрывающемся списке выберем тип поля Input Text (вводимый текст);
    • в раскрывающемся списке ниже выберем значение Miltiline (Многострочный режим);
    • установим флажок Word wrap (Перенос слов);
    • введем значение в поле Max. Chars (Максимальное количество символов); ноль означает, что редактирование и ввод текста запрещены;
    • в поле Variable введем значение mytext (имя переменной, к которой обращается сценарий).

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

Рис. 613. Текстовая область и кнопка на этапе разработки

На других вкладках палитры Text Options можно задать шрифт, выравнивание и другие параметры.

Протестируем результаты нашей работы (команда Control>Test Movie). Установим в текстовом поле курсор и введем какой-нибудь текст. Если щелкнуть на кнопке, то текст должен исчезнуть. Наследующем рисунке показано то, что у нас должно было получиться.

Рис. 614. Мультфильм с текстовым полем ввода и кнопкой для его очистки

 

703.gif

Изображение: 

704.gif

Изображение: 

26. Прокрутка текста

 

Прокрутка текста

Если текст имеет большой объем, а текстовое поле не вмешает его полностью, то применяется широко известный механизм прокрутки.
В данном примере мы возьмем за основу мультфильм, разработанный в предыдущем разделе. Нам потребуется добавить две кнопки в виде стрелок и написать сценарии для них. Щелчок на стрелке должен инициировать прокрутку текста на заданное количество строк. Кроме того, здесь будет продемонстрирован один интересный технологический прием. А именно: мы создадим еще одно текстовое поле, расположенное вне рабочей области. Все элементы вне рабочей области при просмотре мультфильма не видны, хотя в функциональном плане они полноценны. В этом невидимом поле будет храниться некоторый текст. Внешний вид сцены на этапе разработки выглядит так, как показано на рисунке. Рабочая область имеет белый цвет фона.

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

Рис. 615. Рабочая область с текстовым полем и кнопками имеет белый фон. Текстовое поле вне рабочей области не будет видно при воспроизведении мультфильма

Пусть видимое текстовое поле имеет имя mytext, а имя невидимого текстового поля — storetext. Круглая кнопка предназначена для переноса текста из text2 в mytext. Сценарий для нее и мест следующий вид.
on (release) _root.mytext{
root.storetext;
}

Кнопки в виде стрелок предназначены для прокрутки. Механизм прокрутки основан на использовании свойства scroll, которое имеют все текстовые поля. Для кнопки с изображением стрелки вверх сценарий такой:

оп (release) {
root.mytext.scroll = _root.mytext.scroll - 2;
}

Для кнопки с изображением стрелки вниз сценарий аналогичен:

on (release) {
root.mytext.scroll = _root.mytext.scroll + 2;
}

Мы установили шаг прокрутки равным 2.
Вид нашего мультфильма в окне браузера Internet Explorer показан на следующем рисунке.


Рис. 616. Мультфильм с прокручиваемым текстовым полем в окне браузера

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

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

 

705.gif

Изображение: 

706.gif

Изображение: 

27. Загрузка переменных из текстового файла

 

Загрузка переменных из текстового файла

В системе Flash есть возможность загрузки переменных из текстовых файлов и из приложений, таких как ASP, PHP, CGI, Gold Fussion и других систем обработки сценариев на сервере. Если у вас есть тексты большого объема, особенно если они написаны на кириллице, то данный технологический прием оказывается очень полезным.

В следующем примере мы рассмотрим загрузку в мультфильм двух переменных, определенных в текстовом файле. Прежде всего создадим текстовый файл. Это можно сделать с помощью Блокнота Windows. При этом необходимо соблюдать следующие требования:

  • Каждая переменная записывается в формате:

    имя_переменной = значение_переменной

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

Текстовый файл с определениями переменных сохраним в той же папке, что и SWF-файл, который будет к нему обращаться. В общем случае это необязательно: можно использовать полный URL-адрес. На рисунке показан текстовый файл textfile.txt в окне редактора Блокнот. Здесь был использован режим переноса слов, нигде символ перевода каретки (клавиша <Enter>) не применялся. В этом файле определены две переменные: mytextl и mytext2.

Рис. 617. Текстовый файл с определениями переменных

Мультфильм состоит из двух слоев. В первом слое расположены два текстовых поля в рамках. Второй слой содержит кнопку. Текстовые поля имеют идентификаторы (имена переменных) mytext 1 и mytext2. Именно эти переменные были определены в текстовом файле textfile.txt. Текстовые поля определены в палитре Text Options как Dynamic Text (Динамический текст). Загрузка текстов в эти поля происходит при щелчке на кнопке. Это событие обрабатывается следующим сценарием кнопки:
on (release) {
loadVariblesNum ("textile. txt ", 0)
}

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

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

Рис. 618. Мультфильм с текстовыми полями и кнопкой на стадии разработки

Рис. 619. Мультфильм после загрузки переменных в текстовые поля

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

mytext = String (mytext );
if (mytext . length == 0) {
( gotoAndPlay (1)
}

Этот сценарий циклически воспроизводит кадры мультфильма, пока значение указанной переменной (точнее, длина значения) не станет отличным от нуля.

 

707.gif

Изображение: 

708.gif

Изображение: 

709.gif

Изображение: 

28. Всплывающие тексты на кнопках

 

Bсплывающие тексты на кнопках

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

Особенность состоит в том, что у нас три кнопки, и поведение каждой из них зависит от того, с какой именно кнопкой мы работали ранее. Эта задача решается с использованием переменных для хранения предшествующих состояний.
В мультфильме будут фигурировать кнопки и тексты. Тексты обладают собственным поведением, хотя и зависящим от действий с кнопками. Создадим три слоя. Первый слой назовем action (действие), второй — buttons (кнопки) и третий — texts (тексты). В слой buttons поместим три кнопки с именами bul1, but2 и but3 (выбор имен может быть произвольным). Точнее говоря, создадим три символа типа Button. Это можно сделать вручную или воспользоваться встроенной библиотекой (Window> Common Libraries > Buttons). Затем создадим три символа типа Movie Clip с именами text1, text2 и texts и поместим в них наши тексты, например «Один», «Два» и «Три». К каждому тексту применим анимацию motion tweening так, чтобы он плавно появлялся и так же плавно исчезал (выберите подходящие значения параметра alpha). При этом ключевые кадры расположим так, как показано на рисунке.

Рис. 620. Временная шкала

На рисунке видно, что к ключевым кадрам привязаны какие-то действия (пометки над точками). Мы рассмотрим их позднее.

В первом кадре каждого мультфильма-текста собственно текст должен быть невидим (значение параметра прозрачности alpha равно 0). Когда все тексты будут готовы, поместим их на сцену.

Теперь, когда вся графическая часть готова, займёмся составлением сценариев. На сцене в слое actions поместим следующее действие:

i = 0;
j = 0;

Здесь мы объявляем переменные и присваиваем им начальные значения. Переменная j будет хранить номер последней нажатой кнопки, а переменная i — текущий номер кнопки. Теперь переходим к действиям, происходящим при нажатии кнопок.
Сценарий для первой кнопки:

on (release) {
if (3 == 2) {
}
text2.gotoAndPlay (16) ; }
}
else if (j == 3) {
text3.gotoAndPlay(16);
}
else if (j == 0) {
textl.gotoAndPlay(1) ;
}
i = 0;
j = 0;
}

Здесь, в зависимости от значения переменной j, назначается «исчезновение» соответствующего текста. Чтобы с самого начала проявить текст данной кнопки, делаем проверку, равно ли значение переменной j нулю. Затем передаём переменным i и j новые значения. На остальных кнопках действия будут аналогичными.
Сценарий для второй кнопки:

on (release) {
if (j =- 3) {
text3.gotoAndPlay (16); } else if (j == 1) {
textl.gotoAndPlay(16);
} else if (j == 0) {
text2.gotoAndPlay (1);
}
i = 2;
j = 2; }

Сценарий для третьей кнопки:

on (release) {
if (j == 0) {
text3.gotoAndPlay(1);
I else if (j == 1) (
text 1.gotoAndPlay(16) ;
iпава 9
else it" (j == 2) {
text 2.gotoAndPlay(16)
}
else if (j == 2) {
text2.gotoAndPlay (16);
}
i = 3;
j = 3; }

Но эти действия лишь делают тексты невидимыми, а нам нужно ещё и последующее их появление. Переходим к редактированию символов текста. Сценарий для первого кадра символа text1:

stop ();
_root.i = 1;

Это предотвратит произвольное проигрывание мультфильма и присвоит значение переменной i.

В 15-м кадре также поставим функцию останова (т. е. stop()) для того, чтобы текст останавливался, когда полностью исчезнет. Теперь нужно дать программе знать, какой текст делать видимым после исчезновения текущего текста. Для этого в последнем кадре символа text1 поставим такой сценарий:

if (_root.i == 2) (
_root.text2.gotoAndPlay (1);
} else if (_root.i == 3) (
_root.text3.gotoAndPlay(1);
}

Здесь проверяется текущее значение переменной i и в зависимости от результатов проигрывается соответствующий символ. Для остальных символов действия будут аналогичными, изменятся только имена символов. Общим будет только action stop() для 15-го кадра каждого символа. Вот остальные действия.
Для первого кадра символа text2:

stop ();
_root.i = 2;

Для последнего кадра символа text2:

if (_root.i == 1) {
( _root.textl.gotoAndPlay(1);
}
else if (__root.i == 3) {
_root.text3.gotoAndPlay(1);
}

Для первого кадра символа text3:

stop ();
_root.i = 2;

Для последнего кадра символа text3:

if (_root.i == 1)
( _root.textl.gotoAndPlay(1); Т
}
else if (_root.i == 2) {
root.text2.gotoAndPlay(1);
} .

Вот, собственно, и все. Попробуйте проиграть мультфильм, а затем внести в него какие-нибудь изменения.

 

800.gif

Изображение: 

29. Генератор случайных чисел

 

Генератор случайных чисел

Функция random (n) создает случайное число в интервале от 0 до n—1. Например, random (101) возвращает случайное число в диапазоне от 0 до 100.

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

Следующий простой сценарий перемещает экземпляр мультфильма с именем My_clip в пределах квадрата со стороной 300 пикселов:

My_clip._x = random(300);
My_clip._y = random(300);

Броуновское движение объекта My_clip можно задать, если циклически выполнять следующий сценарий:

dx = random(5);
dy = random(5);
My_clip._x = My_clip._x + dx;
My_clip._y = My_clip._y +dy;

 

30. Гистограмма

 

Гистограмма

Для наглядного представления числовых данных часто используют гистограммы — диаграммы в виде ряда столбиков, высота которых пропорциональна соответствующим числам. Здесь мы рассмотрим пример построения небольшой гистограммы из пяти столбиков. Данные будут вводиться в текстовые поля, а перерисовка гистограммы будет происходить при щелчке на кнопке.

Создадим новый мультфильм, в котором разместим четыре слоя с именами: Столбики, Тексты, Кнопка и Фон. В слое Фон нарисуем прямоугольник, занимающий нею рабочую область, и зальем его серым цветом. Затем в слое Тексты создадим пять текстовых полей, задав для них имена Т1, Т2.....Т5 (палитра Text Options, поле Variables). Эти поля следует расположить в один ряд на линии с значением координаты у равным 310 (пикселов).

Выделим на временной шкале слой Столбики и создадим новый символ типа Movie Clip с именем bar (столбик). Для этого надо выполнить команду Insert>Ne\v Symbol.

Нарисуем прямоугольник шириной 40 и высотой 1 пиксел. Внешне такой прямоугольник похож на горизонтальный отрезок прямой. Для точного задания этих параметров следует воспользоваться палитрой Info. Щелкнув на кнопке Scene 1 в верхнем левом углу главного окна Flash, переходим к работе с главным мультфильмом. Теперь перетащим мышью 5 экземпляров только что созданного символа из окна библиотеки в рабочую область. Расположим их в один ряд немного выше текстовых полей, как показано на следующем рисунке.

Рис. 621. Разработка гистограммы. Линии представляют столбики, ниже расположены текстовые поля, правее — кнопка

Говоря точнее, необходимо установить для всех экземпляров символа bar значение вертикальной координаты у равным 300 пикселов. Это можно сделать с по-мошью палитры Info: выделите экземпляр и введите требуемое значение.
Для каждого экземпляра столбика необходимо ввести имя. Именем будет просто порядковый номер. Поочередно выделяя столбики, введем числа от 1 до 5 в поле Name на палитре Instance (Экземпляр).

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

on (release) {
// Начальные значения переменных
х = 0;
п = 0;
1 = 0;
value = 0;
К = 0; // масштабирующий коэффициент
maximum = 0;
// Установка начальной высоты и позиции всех столбиков
while (х <= 4) {
х+= 1;
_root[x]._yscale = 100;
_root[х]._у = 300;
}
// Определение максимального значения,
// введенного пользователем
while (n <= 4) {
п+= 1;
if (_root["T" + n] > maximum) (
maximum = _root["T" + n];
}
// Определение высоты столбика
К = 300/maximum; // масштабирующий коэффициент
while (i <= 4) {
i+ = 1;
value = _root["T" + i] * K;
_root[d]._yscale = value * 100;
_root[d]._y = 300 - value;

Поясним определение высоты столбика. Мы использовали свойство _yscale, возвращающее относительную высоту (масштаб) мультфильма (т. к. столбик у нас имеет тип Movie Clip) в процентах. Одному пикселу соответствует 100%, поэтому величине value (в пикселах) соответствует _yscale, ранное value* 100. Изменив высоту столбика, следует изменить и его вертикальную координату _у, задаваемую и пикселах. Чем выше столбик, тем меньше _у и, наоборот, чем меньше высота столбика, тем ниже он должен позиционироваться. Поскольку максимальная высота столбика равна 300 пикселов, _у = 300 - value. Текстовые поля с именами Т1,..., Т5 обрабатываются циклически с помощью так называемого псевдомассива _root ["T" + i]. Параметр, означающий имя текстового поля, получается путем конкатенации (склейки) буквы "Т" с параметром цикла \.

Заметим, что конструкция псевдомассива _root ["T" + i] применяется вместо использовавшейся в Flash 4 функции eval. В данном случае можно было бы использовать выражение вида eval( "/:T"&i).

// Определение высоты столбика
К = ЗОО/maximum; // масштабирующий коэффициент while (i <= 4) { d+ = 1;
value = _root["T" -f i ] * K;
_root[d]._height = value;
root[d]. у = 300 - value;

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


Рис. 622.
Гистограмма, построенная на основе введенных пользователем данных

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

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

 

1. «Передача данных из Jscript в ActionScript»

 

Передача данных из JScript в ActionScript

Рассмотрим передачу данных из HTML-документа во встроенный в него Flash-мультфильм (SWF-файл). Это позволит, например, управлять мультфильмом средствами HTML и JScript. Данная задача противоположна той, которую мы рассмотрели в предыдущем разделе. Там мы из сценариев на ActionScript вызывали фуниии. написанные на JSscript. Здесь же, наоборот, вся основная работа выполняется сценариями на ActionScript, а сценарий на JScript лишь передает в мультфильм какие-то данные. Эти данные могут просто отображаться каким-то образом в мультфильме, а могут и управлять им.

Напомним, что внедрение Flash-мультфильма в HTML-документ производится с помощью тэгов <OBJECT> и <EMBED>. В языке JScript имеется метод 5е1\/апаЫе("имя_переменной", значение_переменной), принимающий два параметра: имя переменной в Flash-мультфильме и значение этой переменной. Данный метод используется в следующем формате:

window.document.имя_мультфильма.SetVariable("имя_переменной", значение_переменной)

Здесь имя_мультфильма — имя мультфильма, заданное в тэгах <OBJECT> и <EMBED> в атрибуте NAME. Ниже мы еще рассмотрим это более подробно.
В следующем примере мы создадим простой Flash-мультфильм с текстовым полем и кнопкой. Текстовое поле будет отображать сообщение, переданное мультфильму из сценария на JScript, а кнопка — очищать это поле. Создадим сначала два слоя с именами Border_Button (т. е. Рамка_Кнопка) и Text_Field (т. е. Текстовое_Поле).
В слое Border_Button нарисуем обычную круглую кнопку, выделим ее и нажмем клавишу <F8> (конвертировать в символ). Назначим символу тип Button и имя — Clear (Очистить). С помощью кнопки будет удаляться содержимое текстового поля. Для этой цели нужен следующий сценарий на ActionScript:

on(release) {
_root.inFlash = ""; )
}

Здесь inFlash — имя переменной (идентификатор), соответствующий текстовому полю. Понятно, что мы выбрали ее по своему усмотрению.

В слое Text_Field находится текстовое поле в рамке. Установим в окне его свойств (Text Options) тип Input Text, режим автоматического переноса слов (Word wrap) многострочного текста (Multiline) и запрет на редактирование (Max Chars = 0 ). В поле Variable должно быть значение inFlash. Это — имя переменной, соответствующей текстовому полю. Именно эта переменная фигурирует в сценарии, привязанном к кнопке Clear (Очистить). Можно также задать параметры шрифта (вкладка Character палитры Text Options).

Итак, мультфильм готов. Сохраним его под именем flashvar.fla. Сделаем публикацию, в результате которой получим два файла: flashvar.swf и flashvar.htm. Откроем HTML-файл, созданный системой Flash при публикации. Внесем в него изменения, так чтобы HTML-код имел следующий вид:


Рис. 628. Создание мультфильма с текстовым полем и кнопкой

br> <HTML>
<HEAD>
<ТIТLЕ>Передача данных из JScript во Flash</TITLE>
<SCRIPT LANGUAGE="JScript">
function getlt()
{
var message=document.main.input_text.value
window.document.passFlash.SetVariable("inFlash", message)
// здесь main - имя формы,
// input_text - имя поля ввода текста в форме,
// inFlash - имя текстового поля в ActionScript
}
</SCRIPT>
</HEAD>
I
<!== Flash-мультфильм ==>
<BODY bgcolor="#FFFFFF">
<!== URL's used in the movie ==>
<OBJECT classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"
соdebase=http://download.macromedia.com/pub/Shockwave/cabs/flash/
swflash.cab#version=5,О,О,О ID=flashvar WIDTH=500 HEIGHT=150
NAME='passFlash'>
<PARAM NAME=movie VALUE="flashvar . swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="flashvar.swf" quality=high bgcolor=#FFFFFF WIDTH=500 HEIGHT=150 NAME="passFlash"
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http:// www.macromedia.com/Shockwave/download/ index.cgi?Pl_Prod_Version=ShockwaveFlash">
153ак, 757
450
</EMBED> </OBJECT>
<FORM NAME="main">
<! Текстовое поле >
<INPUT TYPE="text" NAME="input_text" LENGTH=14>
<! Кнопка >
<INPUT TYPE="button" value = "Ha;KMM здесь" ONCLICK="getIt()">
</FORM>
</BODY>
</HTML>

Обратите внимание, что в тэгах<ОВJЕСТ> и <EMBED> задаются имя файла с мультфильмом flashvar.swf и имя passFlash объекта, представляющего мультфильм в HTML-документе. Имя passFlash используется в сценарии на JScript.
Текст, вводимый в поле формы HTML-документа, появляется в текстовом поле Flash-мультфильма, если щелкнуть на кнопке с надписью «Нажми здесь». При этом шрифт текста будет таким, каким он был определен в мультфильме. Это показано на следующем рисунке.



Рис. 629. Внешний вид страницы в браузере. Поле ввода и кнопка внизу являются элементами формы HTML-документа, а все остальное — Flash-мультфильм

 

808.gif

Изображение: 

809.gif

Изображение: 

801.gif

Изображение: 

802.gif

Изображение: 

31. Вращающееся колесо

 

Вращающееся колесо

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

Создадим новый символ типа Movie Clip и назовем его Колесо. В режиме редактирования символа нарисуем две концентрических окружности. Внешнюю окружность зальем радиальным градиентом, а внутреннюю — линейным. С помощью инструмента «Кисть» нарисуем несколько пятнышек на внутренней окружности. Должно получиться примерно так, как показано на рисунке. Более подробно рисование колеса было рассмотрено в предыдущей главе. Далее, вставим еще один кадр (команда Insert>Frame или клавиша <F5>). В первом, ключевом кадре определим следующий сценарий:

_rotation = _rotation - 10;

Это означает, что значение свойства _rotation (вращение) следует изменять на 10 градусов, причем вращение должно происходить против часовой стрелки (т. к. приращение значения отрицательно). Выбор направления вращения обусловлен тем простым обстоятельством, что в заготовленной картинке автомобиль «смотрит» налево. Следует заметить, однако, что задание вращения колеса против часовой стрелки еще не означает, что именно такое вращение мы будем видеть при воспроизведении мультфильма. Соотношение частоты пятен на диске колеса и частоты следования кадров может создать эффект противоположного вращения и/или вращения не с той скоростью, на которую мы расчитывали, задавая угол поворота. В этом случае придется подобрать величину угла поворота экспериментально.

Обратите внимание, что колесо у нас сделано как картинка, вращаемая сценарием. Можно было бы поступить и более расточительно: создать 36 кадров, каждый из которых содержал бы колесо, повернутое относительно предыдущего кадра на 10 градусов. В таком случае все приходится делать вручную. Другой способ заключается в том, чтобы использовать анимационный GIF-файл (см. главу 3), содержащий вращающееся изображение колеса.

Далее, перейдем к сцене (щелчок на кнопке Scene 1). Импортируем графический файл с изображением автомобиля. Желательно, чтобы это была картинка с прозрачным фоном.


Рис. 623. Создание символа Колесо из двух концентрических кругов, залитых градиентами различных типов. Два кадра в клипе Колесо нам потребовались, чтобы обеспечить цикличность выполнения сценария

Теперь перетащим из окна библиотеки два экземпляра колеса для создаваемого мультфильма. Их следует установить в нужные места нд изображении автомобиля и выбрать подходящий масштаб. Чтобы выбрать масштаб, щелкните правой кнопкой мыши на выделенном экземпляре колеса и в контекстном меню выберите команду Scale.

Рис. 624. Масштабирование колеса для его встраивания в изображение автомобиля

Выделим изображение автомобиля вместе с двумя экземплярами колеса и конвертируем в символ типа Movie Clip. Назовем этот новый символ Автомобиль.


Рис. 625. Изображение автомобиля с вращающимися колесами конвертируем в символ типа Movie Clip

Очистим сцену и перетащим на нее экземпляр символа Автомобиль. Поскольку наш автомобиль ориентирован капотом влево, то расположить его нужно где-нибудь в правой части сцены. Далее делаем анимацию. Выделим какой-нибудь кадр, например, 40-й и сделаем его ключевым. Переместим автомобиль в левую часть сцены. Затем вернемся в 1-й кадр и выполним команду Insert>Create Motion Tween. На следующем рисунке показано, что должно получиться. Чтобы передать эффект движения, мы включили режим отбражения тени (Onion Scin).


Рис. 626. Движение автомобиля с вращающимися колесами

Чтобы автомобиль остановился у левого края сцены, в последнем кадре мультфильма определите сценарий из одной инструкции: stop().

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

Теперь несколько усложним наш мультфильм, используя простые средства. А именно: добавим еще один экземпляр автомобиля. Мы хотим, чтобы второй автомобиль «ехал» слева направо. Для этого сначала создадим еше один слой в главном мультфильме (на сцене) и перетащим Автомобиль из библиотеки. Разместим его где-нибудь в левой части сцены и немного ниже первого автомобиля, который «ездит» в первом слое. Второй автомобиль должен ехать слева направо, а его экземпляр на сцене сейчас ориентирован, как первый (наоборот). Положение можно исправить с помощью инструментов масштабирования и вращения. Чтобы получить доступ к этим инструментам, выделите автомобиль и щелкните правой кнопкой мыши для раскрытия контекстного меню. Поэкспериментируйте, чтобы получить нужный эффект. Стремитесь к тому, чтобы перевернуть изображение. Мы не будем далее об этом рассказывать, поскольку слова в данном случае малоэффективны по сравнению с опытом, который вы можете получить самостоятельно за пару минут. Как только ваш второй автомобиль приобретет нужные размеры и ориентацию, можете создать анимацию для него (Motion Tweening) так же, как это делалось для первого автомобиля. Обратим внимание, что если мы специально занимались переориентацией экземпляра символа Автомобиль, то изменять направление вращения колес нам не потребовалось: все совершилось, как надо, само собой.

Рис. 627. Два автомобиля, движущиеся в противоположных направлениях. Каждый автомобиль «существует» в своем слое
Что можно сделать еще? Конечно, можно создать еще один слой, выполняющий роль ландшафта (фона). В этот слой можно поместить природный или городской вид. В общем, это — дело вкуса и вашей фантазии.

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

 

803.gif

Изображение: 

804.gif

Изображение: 

805.gif

Изображение: 

806.gif

Изображение: 

807.gif

Изображение: 

32. Вызов JScript из ActionScript

 

Вызов JScript из ActionScript

Здесь мы рассмотрим пример взаимодействия фрагментов сценария на JScript с Flash-мультфильмом. Мы хотим использовать средства JScript во Flash-мультфильме. Фрагменты сценария (функции) на JScript и мультфильм встроены водим и тот же HTML-документ. В нашем примере мультфильм содержит три кнопки, щелчки на которых обрабатываются функциями, написанными на JScript. Заметьте, речь идет об обработке событий не с помощью ActionScript, а посредством JScript! Сценарий на ActionScript должен только вызвать нужную функцию JScript. Идея организации такого взаимодействия состоит в том, чтобы в действиях Flash-мультфильма использовать следующую конструкцию:

getURL ("javascript :имя_функции (параметры) " ) ,

где имя_функции(параметры) — функция, описанная в скрипте в HTML-документе на языке JScript.

Всю работу разобьем на два этапа: сначала создадим HTML-код, а затем мультфильм.

Этап 1. Создание HTML-файла
Порядок действий:

  1. 1. Создадим новый HTML-файл с именем myhtml.htm.
  2. 2. В этом файле между тэгами <HEAD> и </HEAD> напишем три функции, которые потом будем вызывать из Flash-мультфильма и передавать им некоторые параметры. Эти функции обрамим тэгами <SCRIPT> и </SCRIPT>.

Итак, сценарий на JScript в HTML- документе выглядит следующим образом:


<SCRIPT LANGUAGE=" JScript">
// Первая функция принимает 3 параметра
function openNewWindow (my URL, my_width, my_height)
{
// Это — функция открытия окна.
// my_width - переменная, которая будет передавать /принимать
// значение ширины,
// my_height - переменная, которая будет передавать/принимать
// значение высоты. Ниже расположен код самой функции.
myNewWindow=window . open (myURL, ' sample ' , ' toolbar=no, bar=no, location=no, status=no,menubar=no, scrollbars=no, resizable=no,width=' +my_width+ ' ,
height=' -fmy_height+ ' , top=0, lef t=0 ' ) ;
// Параметры в методе ореп() :
// myNewWindow - имя нового окна в иерархии,
// myURL - URL-адрес открываемого нового документа,
// остальные параметры отвечают за отсутствие/присутствие
// элементов интерфейса в новом окне (панели инструментов, меню
/ / и т.д.),
// width= ' +my_width+ ' - параметр, отвечающий за ширину, // height= ' -mny height-*-' - параметр, отвечающий за высоту.
// Вторая функция - это просто окно с предупреждением,
// которое мы передадим из Flash-мультфильма.
function message (message) {
alert (message) ;
}
// Здесь message - передаваемое сообщение.
// Третья функция закрывает окно, открытое первой функцией. // Обращение к окну - по имени myNewWindow. function closeMain(){ myNewWindow . close ( ) ;
</SCRIPT>

Между тэгами <BODY> и </BODY> вставим тэг <OBJECT>, задающий встраивание Flash-проигрывателя с нашим мультфильмом. Мультфильм мы будем хранить в файле myflash.swf. В результате должен получиться следующий HTML-код:

<HTML>
<HEADXTITLE> Взаимодействие Flash и JScript</TITLE>
<SCRIPT LANGUAGE="JScript">
<!== Функция открытия окна ==>
function openNewWindow(myURL,my_width,my_height)
myNewWindow=window.open (myURL, ' sample' , ' toolbar=no,bar=no, location=no, status=no, menubar=no, scrollbars=no, resizable=no, width= ' +my_width+ ' , height= ' +my_height+ ' , top=0, left=0 ' ) ;
< ! == Функция вывода сообщения ==> function Message (message) (
alert (message) ;
/ }
<!== Функция закрытия окна ==>
function closeMain()(
myNewWindow . close () ;
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#000033">
<!- Вставляем Flash-мультфильм—>
<A HREF=javascript:openNewWindow('temp.html',600,200)></A>
<OBJECT classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shoekwave/cabs/flash/ swmyflash.cabttversion=5, 0,0,0" WIDTH=400 HEIGHT=300>
<PARAM NAME=movie VALUE="myflash.swf">
<PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000033> <EMBED src="myflash.swf" quality=high bgcolor=#000033 WIDTH=400 HEIGHT=300 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http:/ /www.macromedia.com/shockwave/download/ index.cgi?Pl_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</BODY>
</HTML>

Этап 2. Создание Flash-мультфильма

Порядок действий:

  1. 1. В редакторе Flash создадим новый файл myflash.fla.
  2. 2. Создадим три произвольные кнопки. Для этого нарисуем произвольную фигуру, нажав клавишу <F8> (конвертировать в символ), выберем тип символа Button и затем просто скопируем его в рабочую область три раза. Можно также воспользоваться библиотекой символов (Window>Common Libraries > Buttons).
  3. 3. Последовательно вставляем в каждую из кнопок следующие действия:
    • Кнопка1 (открытие файла temp.htm в новом окне):
      on (release) {
      getURL("javascript:openNewWindow('temp.html1,600,200)")
    • }

    • Кнопка2 (вывод сообщения):
      on (release) {
      getURL("javascript:message('Мое сообщение')");
      }

    • КнопкаЗ (закрытие окна):
      on (release) {
      getURL("javascript:closeMain()");
      }

  4. 4. Делаем публикацию (клавиши <F12> или <Shift>+<F12>), чтобы получить файл myflash.swf. Что такое публикация, более подробно рассказано в разделе 9.8. На этом работа завершена.
 

33. Управление звуком

 

Управление звуком

На некоторых сайтах, созданных на основе Flash-технологии, имеется возможность управления звуком. Например, звук можно выключить в процессе проигрывания мультфильма, изменить громкость, а на некоторых сайтах можно даже регулировать звуковой баланс. Сначала рассмотрим общие сведения, а затем перейдем к примеру.
Объект Sound

Для работы со звуком достаточно воспользоваться объектом класса Sound (Звук) и его методами. Сначала определяется объект с помощью следующей конструкции:
Mysound =new Sound О;

Здесь Mysound — имя, назначаемое объекту класса Sound. Теперь можно управлять звуком, присоединяя через точку к имени объекта имена методов и указывая
необходимые параметры. Ниже перечислены основные методы объекта Sound:

  • attachSound ("имя_звука") —присоединяет к мультфильму звуковой файл из библиотеки;
  • getPan () — возвращает последнее значение баланса в интервале от -100 до 100. Левому динамику соответствует отрицательное значение, правому — положительное. Значение 0 представляет равномерное распределение силы звука междудинамиками;
  • getVolume ()— возвращает уровень громкости в интервале от 0 до 100;
  • setPan () — устанавливает баланс между левым и правым динамиком. Значения от -100 до -1 соответствуют большей громкости левого динамика, а от 1 до 100 — правого;
  • setVolume () — устанавливает громкость в интервале от 0 до 100. Значением по умолчанию является 100;
  • start (задержка, количество_повторений) — начинает воспроизведение звукового файла.Необязательные параметры позволяют задать время задержки в секундах и количество повторений воспроизведения;
  • stop () — приостанавливает воспроизведение звукового файла. Параметров нет;

Кроме перечисленных выше, имеется еще один метод объекта Sound — setTransform. Синтаксис его использования другой. Для вызова метода setTransform необходимо указать объект класса Object, связанный с параметрами управления динамиками. После этого создается объект класса Sound, который будет обрабатывать значения этих параметров с помощью метода setTransform. Параметры, о которых идет речь, определяют уровень входного сигнала в процентах (в интервале от-100 до 100):

  • l l—уровень воспроизведения в левом динамике сигнала, поступающего с левого входа;
  • 1 r— уровень воспроизведения в левом динамике сигнала, поступающего с
    правого входа;
  • r r — уровень воспроизведения в правом динамике сигнала, поступающего
    с правого входа;
  • r l— уровень воспроизведения в правом динамике сигнала, поступающего c левого входа.

По умолчанию параметры ll и rr имеют значение 100, а параметры 1r и rl — значение 0. процедура настройки параметров звука с помощью метода setTransform выглядит следующим образом:
Mytransform = ne Object () ;
Mytransform.il = 100;
Mytransform.Ir = 0;
Mytransform.rr = 100;
Mytransform.rl = 0;
MySound = new Sound ();
MySound.setTransform (Mytransform};

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

Пример элемента управления звуком

Теперь рассмотрим пример создания элемента управления звуком. В новом мультфильме определим три слоя. Первый, самый верхний, назовем action, второй — volume и третий — pan. У нас должно получиться, как показано на рисунке:

Рис. 630. Создание слоев action, volume и pan в мультфильме
В слой action поместим такое действие:

zvuk = new Sound();
zvuk.attachSound("zvuk" ) ;
zvuk.start(0, 999999);

Этим создаётся новый звуковой объект. Присоединяем его из библиотеки с именем zvuk и запускаем с позиции 0, устанавливая количество повторений 99 999 раз (т. е. практически бесконечно). Если сейчас запустить мультфильм, то мы ничего не увидим и не услышим. Чтобы что-нибудь услышать, надо дать звуку имя. Для этого откроем библиотеку и найдем в ней наш звуковой символ. Неважно, как он там сейчас называется. Чтобы назвать звук, следует щелкнуть на его имени правой кнопкой мыши и в контекстном меню выбрать команду Linkage (). В раскрывшемся окне выберем переключатель Export this symbol и зададим имя zvuk. Иначе говоря, сделаем так, как показано на рисунке:


Рис. 631.
Окно Symbol Linkage Properties. Ввод имени 'вука (Identifier) и установки типа связи (Linkage)
Теперь при просмотре мультфильма можно услышать звук.
На данном этапе осталось только организовать управление нашим звуком. Для решения этой задачи существует множество способов. Мы реализуем самый распространенный: метод ползунка.

Создадим новый символ-кнопку и назовем её polzunok_volume. Она будет выполнять роль регулятора громкости. Далее, создадим ещё один символ типа Movie Clip с названием Polzunok_MC_volume. Поместим в него из библиотеки символ polzunok_volume и зададим ему такое действие:
on (press) {
startDrag (this, false, 0, 7, 100, 7);}
on (release) {
stopDrag ();

Затем создадим символ типа Movie Ciip и назовем его shkala_volume. В этом символе нарисуем прямоугольник, по которому будет передвигаться ползунок. Для правильной работы зададим для него координаты в палитре Info, как показано на рисунке:

Рис. 632. Задание координат и размеров шкалы громкости звука

Теперь создадим в этом символе новый слой и поместим туда polzunok_MC_volume. Слой с ползунком должен быть выше слоя со шкалой. Поставим ползунок в центре шкалы и назначим ему такое действие:
onClipEvent (enterFrame) {
root.zvuk.setVolume(this. x) ;

Этим мы добьёмся того, что звук будет иметь значение, соответствующее координате х ползунка. Теперь переходим на главную сцену и вставляем туда символ shkala_volume. Вот мы и создали элемент управления громкостью звука.
Теперь организуем балансировку звука между левым и правым динамиками. Для этого создадим символ-кнопку с названием polzunok_pan и нарисуем там ползунок, затем создадим символ типа Movie Clip с именем polzunok_MC_pan поместим туда наш polzunok_pan. Зададим ему действие:
on (press) {
startDrag (this, false, on (release) { stopDrag ();
-100, 0, 100, 0) ;
}

Теперь создадим ещё один символ типа Movie Clip с именем shkala_pan. Нарисуем там нашу шкалу в виде прямоугольника с параметрами, как показано на рисунке:

Рис. 633. Задание координат и размеров шкалы балансировки звука

В этом же символе создадим ещё один слой и поместим его выше текущего. В этом слое расположим ползунок polzunok_MC_pan и зададим для него следующее действие:

onClipEvent (enterFrame)
( root.zvuk.setPan(this. x) ;

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

Однако у нас нет цифрового отображения громкости и баланса звука. Давайте разработаем и такой сервис. На главную сцену вставим два динамических текстовых поля. Одно для отображения громкости, другое —для баланса. Назовем их vol и pan соответственно. Сначала займёмся полем vol.
Выделим символ shkala_volume и откроем палитру Action для нашего ползунка. Добавим к уже имеющемуся следующий код:
s = new Sound(zvuk);
_root.vol = s.getVolume();
Таким образом, у нас должно получиться следующее:
onClipEvent (enterFrame) {
в Flash
root . zvuk . set Volume (this. _x) ; ^ = new Sound (zvuk) ; root.vol = s . getVolume ( ) ;
}

Теперь пользователь может видеть цифровое значение громкости звука. Займемся организацией цифрового отображения баланса. Для этого перейдем к символу shkala_pan и добавим к его действиям следующий код:
s = new Sound (zvuk) ;
root. pan = s. getPan (); В результате должно получиться: onClipEvent (enterFrame) {
root. zvuk. set Pan (this -_x) ; s = new Sound(zvuk);
root. pan = s.getPan(); }

Теперь пользователь получает сведения относительно баланса звука. Однако когда ползунок переходит на левую часть шкалы, мы видим отрицательные числа. Обычно в подобных программах отображаются положительные числа и буква «L» или «R». Давайте попробуем сделать так же. Для этого в символе shkala_pan в палитре Actions для ползунка немного изменим существующий код. После замены должно получиться:
onClipEvent (enterFrame) ( _root . zvuk . setPan (this ._x) ; s = new Sound (zvuk) ;
if (this._x<0) (
_root.pan = - (s .getPan () ) +"Left" ; } else if (this._x>0) { _root.pan = s . getPan () +"Right" ; } else if (this._x = = 0) ( _root.pan = s. getPan ();

Здесь мы поставили условие, что если значение координаты х ползунка меньше нуля (т. е. баланс смещается влево), то в поле pan возвращается значение с минусом (отрицательное число с минусом есть положительное число). Кроме того, к Цифровому значению приписывается строка Left. А если баланс смещается вправо, то всё остаётся как есть и ещё приписывается Right. Если же значение координаты х равно нулю, то вообще ничего не приписывается. Теперь мы имеем более привычную форму отображения баланса. Таким же способом можно сделать, чтобы при минимальной громкости выводилось бы, например «OFF» или «Выкл.», а при максимальном значении — «МАХ». Для этого нужно лишь заменить код для ползунка в символе shkala_volume на следующий:
_root . zvuk. set Volume (this. _x) ;
s = new Sound (zvuk) ;
if (this._x == 0) {
root.vol = "Выкл."; Т
else if (this._x == 100) { _root.vol = "MAX"; Т
else { _root.vol = s.getVolume ();

 

810.gif

Изображение: 

811.gif

Изображение: 

812.gif

Изображение: 

813.gif

Изображение: 

34. Загрузка мультфильмов

 

Загрузка мультфильмов

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

  • декомпозиция одного большого мультфильма на несколько мультфильмом меньшего объема;
  • создание специального сценария загрузки — так называемого загрузчика (preloader).

Декомпозиция мультфильма
Время загрузки мультфильмов можно уменьшить, разбив большой SWF-файл на несколько файлов меньшего размера. При этом загрузка дополнительных фрагментов (серий) мультфильма может происходить по мере необходимости. Например, можно загружать следующую серию мультфильма из последнего кадра предыдущей серии. Это делается, разумеется, с помощью сценариев ActionScript.
Инструкция ActionScript по загрузке мультфильма выглядит так:

loadMovie("URL_SWF-файла", уровень)

Здесь первый параметр — адрес SWF-файла с мультфильмом; если этот файл находится в одной папке с вызывающим его файлом, то можно использовать просто имя SWF-файла. Каждому загружаемому мультфильму ставится в соответствие уровень в интервале от 0 до 115 999. Основной (первый) мультфильм располагается на уровне 0. Остальные мультфильмы имеют другие уровни. Уровни мультфильмов подобны слоям: один мультфильм можно загружать поверх другого. На переднем плане находится мультфильм с меньшим уровнем. Однако нулевой уровень имеет особенности. А именно: при загрузке первого мультфильма (нулевой уровень) устанавливаются цвет фона и частота кадров. Эти параметры остаются неизменными, даже если вы загрузите другой мультфильм с иными цветом фона и частотой кадров, или выгрузите первый мультфильм. В тоже время возможна загрузка нового мультфильма на нулевом уровне. При этом новый мультфильм заменит старый, но цвет фона сохранится. При загрузке нового мультфильма на нулевой уровень можно изменить только частоту кадров.

Загруженный мультфильм можно выгрузить, чтобы освободить память. При ,грузке на передний план выходит мультфильм, находящийся на следующем уровне (т. е. под выгружаемым мультфильмом). Формат инструкции ActionScript для выгрузки мультфильма имеет следующий вид:

unloadMovie(уровень)

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

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

При организации взаимодействия между различными частями составного мультфильма используются переменные, хранящие адреса уровней мультфильмов. Например, мультфильм, загружаемый первым, всегда располагается по адресу JevelO; мультфильму на втором уровне соответствует адрес _leve!2 и т. д. Если, скажем, требуется обратиться к переменной message, соответствующей текстовому полю, расположенному в мультфильме на уровне 52, то полное имя этой переменно^ будет иметь вид:
_level52.message



Рис. 634. Окно с параметрами загрузки SWF-файла

Параметры загрузки мультфильма можно протестировать. Для этого выполни-те команду Control>Test Movie, а затем — View>Bandwidth Profiler (Профилировщик полосы пропускания). Далее выполните команду Debug> 14.4 (1.2 Kbs), чтобы моделировать низкую скорость передачи данных по модемному соединению. На следующем рисунке показано окно с параметрами загрузки файла свеча.swf.
Среди параметров в левой части окна можно видеть, в частности, размеры кадра в пикселах (Dim), скорость прокрутки кадров (Fr Rate), размер мультфильма в килобайтах (Size), длительность в секундах и количестве кадров (Duration).
Загрузчик мультфильма

Если мультфильм содержит большие, долго загружаемые компоненты (например, графику большого объема), то следует предусмотреть организацию его загрузки. Прежде чем начать воспроизведение, необходимо произвести загрузку всего мультфильма или хотя бы некоторой его части. Вы должны решить, какая часть мультфильма должна быть загружена прежде, чем можно начать воспроизведение следующей части. Дело в том, что время загрузки по модемному подключению к Интернету может оказаться в 10—100 раз большим, чем при использовании выделенных каналов или кабельного модема. Мы не хотим,-чтобы пользователь томился в ожидании появления на экране хотя бы какой-нибудь реакции на его действия, а также нарушения логики воспроизведения мультфильма. Эта задача решается с помощью сценариев, которые называются загрузчиками (preloader). Сценарий, который проверяет факт завершения загрузки, в простейшем виде должен ориентироваться на факт передачи последнего кадра мультфильма или того кадра, получение которого вы сочтете достаточным для начала воспроизведения. Такой сценарий основан на использовании функции ifFrameLoaded().

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

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

Рассмотрим содержимое слоя Scripts, в котором реализуется собственно загрузчик. В первом кадре этого слоя расположен следующий сценарий:
ifFrameLoaded (10)
{ gotoAndStop("RollEm");


Рис. 635. Загрузчик обеспечивает пересылку компонентов мультфильма и сообщает пользователю о том, что загрузка еще не завершена

Это означает: если 10-й кадр загружен, то перейти к кадру с меткой RollEm (Прокрутить их). Такую метку имеет 7-й кадр. Мы проверяем загрузку 10-го кадра, потому что это — последний кадр мультфильма. Обычно подобный переход происходит с последующим воспроизведением. Однако в нашем мультфильме воспроизведение останавливается.

В 3-м кадре слоя Scripts расположен такой сценарий:
gotoAndPlay("Loaded?");

Это означает, что следует перейти к кадру с меткой Loaded? (Загружен?). Такую метку имеет 1-й кадр. А в 1-м кадре, как уже известно, проверяется, загружен ли 10-й кадр.

Кадр 7 с меткой RollEm является началом мультфильма. Именно в этом кадре можно разместить его содержательную часть. Заметим, что используемая в мультфильме «тяжелая часть», расположенная в слое Основной в кадрах 3-5, к моменту начала воспроизведения уже загружена.

Схема рассмотренных выше переходов между кадрами показана на следующем рисунке.

Рис. 636. Схема переходов между кадрами слоя Scripts, обеспечивающего загрузку мультфильма

После создания мультфильма очень полезно протестировать его загрузку при различных параметрах модемного соединения. В режиме тестирования (Control>Test Movie) сказываются доступными команды меню View>Bandwidth Profiler, View>Streaming (Вид>Показать пересылку) и View>Streaming Graph
(Вид>Показать граф пересылки), а также меню Debug (Отладка), в котором можно выбрать скорость модемного соединения.

 

814.gif

Изображение: 

815.gif

Изображение: 

816.gif

Изображение: 

35. Сценарии ActionScript во внешних файлах

 

Сценарии ActionScript во внешних файлах

Если у вас имеются сценарии общего назначения (часто используемые, домашние заготовки), то их можно хранить в отдельных текстовых файлах. Вместо того чтобы копировать код в нужное место разрабатываемой программы, лучше просто вызвать его из текстового файла. Текстовый файл с кодом на языке ActionScript обычно имеет расширение as, хотя это и не обязательно. Для импорта в сценарий кода из текстового файла служит команда #include с указанием URL-адреса файла. Если этот файл находится в той же папке, что и вызывающий его SWF-файл, то достаточно написать только имя файла. Например, для импорта кода из файла my_prog.as в сценарий обработки нажатия кнопки мыши служит такой код:
on (press) {
#include "my_prog.as";
}

 

36. Оптимизация

 

Оптимизация

Недостаточно научиться только создавать мультфильмы, нужно уметь делать это хорошо. В настоящее время существуют как страстные поклонники применения Flash-технологии в Web-дизайне, так и яростные противники. Мы уже отмечали, что не стоит злоупотреблять обилием видео- и звуковых эффектов на Web-странице, поскольку замедляется загрузка страницы, внимание пользователя отвлекается от главного, не говоря уже о том, что все это может вызвать раздражение. Общая рекомендация такова: используйте Flash только тогда, когда без этого не достичь вашей цели. Если вы все же решили применить эту технологию, то следует уделить внимание вопросам экономии ресурсов, о чем и пойдет речь в данном разделе.

 

37. Частота кадров

 

Частота кадров

Общеизвестно, что плавность анимации достигается большим количеством кадров, появляющихся в одну секунду (fps, frames per second —кадров/с). Следовательно, мы стремимся указывать большую скорость (частоту кадров) в свойствах Flash-мультфильма. По умолчанию Flash использует значение 12 fps, а для высококачественной анимации обычно требуется 25-30 fps.

Однако увеличение частоты кадров требует большей производительности компьютера, на котором выполняется анимация. Если ее недостаточно, Flash уменьшает частоту кадров. Поэтому даже если мы установим частоту кадров равной 100 fps, Flash все равно будет исходить из имеющихся технических возможностей.

 

38. Размеры видимой области и объем анимации

 

Размеры видимой области и объем анимации

Имеются способы повышения качества воспроизведения мультфильма. Пер-вь,й _ уменьшить размеры видимой области мультфильма: на слабом компьютере мультфильм с видимой областью 300x200 пикселов будет воспроизводиться гораздо лучше, чем, скажем, мультфильм с размерами видимой области 600x400.
Второй способ сводится к учету следующего:

  • Чем больше подвижных объектов в сцене, тем сложнее Flash обрабатывать их, и тем медленней будет воспроизведение.
  • Выгодней использовать один символ, содержащий несколько мелких объектов, чем много символов для каждого объекта. В качестве примера можно привести имитацию снега в мультфильме. Много символов, каждый из которых будет отвечать за отдельную снежинку, будут двигаться гораздо медленней, чем один символ, отвечающий за весь снегопад.
  • Не держите символы на сцене, если вы их не используете. Даже если вы сделали символ невидимым, он все равно присутствует на сцене и тормозит всю анимацию.
 

39. Уровень качества

 

Уровень качества

При публикации анимации в Flash имеется возможность указать значение параметра Quality (Качество). Кроме того, в скриптах (сценариях) можно использовать параметы _quality, highquality и функцию toggleHighQuality(). Качество, задаваемое таким образом, тоже оказывает сильное влияние на скорость воспроизведения.

Уровень качества можно установить вручную при экспорте вашего произведения. Если при этом не отключить контекстное меню, то вы можете предоставить пользователю самому регулировать качество воспроизведения.
Качество можно изменять динамически во время исполнения анимации (параметр _quality). Во время воспроизведения особенно сложных и «быстрых» фрагментов неплохо понизить качество, тем самым выигрывая в скорости, а когда «количество» анимации уменьшится, можно вновь вернуться к высокому уровню качества.

 

40. Потоковое воспроизведение и предварительная загрузка

 

Потоковое воспроизведение и предварительная загрузка

Формат файлов Flash специально приспособлен для сети и является так называемым потоковым форматом. Это означает, что мультфильмы Flash могут начать воспроизводиться, еще не загрузившись до конца. С одной стороны, это преимущество, т. к. мультфильм начинает воспроизводиться достаточно рано, и пользователю не нужно дожидаться конца загрузки. С другой стороны, если канал, по которому передаются данные, окажется уже, чем необходимо для передачи Flash-потока, анимация будет приостановлена. Если для вас допустимы такие задержки или у вас есть уверенность в том, что каналы связи не подведут, тогда все в порядке. Но если вам хочется, чтобы мультфильм воспроизводился без задержек, то его следует снабдить предварительным загрузчиком (preloader) — прием, позволяющий задержать воспроизведение мультфильма до его полной загрузки.

Полезно протестировать демонстрацию вашего мультфильма при нескольких значениях частоты кадров с помощью функции Test Movie (команда Control>Test Movie или клавиши <Ctrl>+<Enter>). Скорость можно выбирать в меню Debug которое появляется после запуска мультфильма.

 

41. Синхронизация потокового звука

 

Синхронизация потокового звука

В Flash есть несколько способов синхронизации звука. Если вы используете достаточно продолжительный фрагмент звукового сопровождения, а события анимации должны совпадать с событиями звука, то следует использовать синхронизацию Stream (Поток). В этом случае вся анимация будет синхронизирована со звуком, и два этих потока будут идти параллельно, не отставая друг от друга.

 

42. Размер swf-файлов

 

Размер SWF-файлов

Одним из основных достоинств Flash является малый размер выходного SWF-файла: чем меньше файл, тем быстрее он перекачивается по сети. К сожалению, Flash не может самостоятельно оптимизировать размер файлов. Это должны делать мы. Рассмотрим некоторые обстоятельства, влияющие на размер Flash-файлов.

Использование символов

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

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

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

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

Flash позволяет сглаживать, выпрямлять и оптимизировать линии (команды Smooth, Straighten и Optimize меню Modify). Чем прямее линия, тем меньше места для нее требуется. И, наоборот, чем причудливей линия, тем больше места занимает ее описание. Оптимизируя линии, можно задать уровень сглаживания, а также выполнить многопроходную оптимизацию.

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

Если изображение не является фотографическим (например, схема или чертеж), имеет смысл попробовать преобразовать его в векторный формат. После импортирования изображения в его параметрах можно выбрать тип компрессии и посмотреть, как оно будет выглядеть. Довольно накладно создание анимации в Flash на основе растровых изображений. Для этого можно использовать, например, формат GIF.
Текст и шрифты
По умолчанию Flash преобразует все используемые буквы, цифры и другие печатные символы в так называемые многоугольники (Poligons). Это означает, что для фразы «как дела?» Flash сохранит начертания знаков «к», «а», «д», «е», «л» и «?». Каждая буква сохраняется в виде многоугольника, который потом размножается нужное количество раз. Причем, если мы напишем ту же фразу другим шрифтом, Flash вынужденно сохранит начертания букв этого шрифта тоже. Представьте, сколько места займет описание целого шрифта в случае, когда мы задействуем весь алфавит (плюс ко всему Flash различает прописные и строчные буквы).

Есть способ избежать сохранения шрифта, но тогда придется пожертвовать возможностью сглаживания краев букв. Для этого нужно выбрать параметр Use Device Fonts в опциях текста. Тогда Flash сохраняет не начертания букв, а только характеристики и название шрифта (это всего несколько байт). При воспроизведении используется указанный шрифт либо, если такого шрифта не окажется в системе, Flash применяет шрифт, ближайший по характеристикам.
Итак, тексты больших объемов лучше не хранить в документах Flash, а использовать, например, HTML. Старайтесь применять как можно меньше различных шрифтов. Если уж очень нужно поместить большое количество текста в документ Flash, используйте опцию Use Device Fonts. Все это позволит сократить размер создаваемого файла.

Звук

Очевидно, что использование звука сильно увеличивает размер Flash-файлов. Звук в Flash тоже поддается оптимизации. В параметрах публикации (Publish Settings) можно установить тип компрессии (сжатия) и качество звука. В большинстве случаев имеет смысл использовать компрессию МРЗ, выбирая качество «по потребности». Чем шире поток (bit rate), тем больше места занимает звук.
В общем случае, на размер звуковых данных влияют частота дискретизации (sample rate) и количество каналов (стерео, моно). Понятно, что стереозвук будет занимать в два раза больше места, чем моно, и что звук с частотой дискретизации 44 кГц будет занимать в два раза больше места, чем тот же фрагмент, но с частотой 22 кГц. Частоту дискретизации относительно исходной можно понизить, а повышать ее не имеет смысла (лучше от этого звук не станет).

Еще один способ сократить затраты на звук — проигрывать один и тот же фрагмент несколько раз.

 

43. Публикация мультфильмов

 

Публикация мультфильмов

Результаты вашего творчества хранятся в файлах с расширением Па. Это исходные или, иначе говоря, авторские файлы. Их можно загружать в Flash, просматривать и редактировать. Под термином публикация (publish) понимается создание выходных файлов, которые можно просматривать в браузере, проигрывателе Flash Player и др.

Публикацию можно настроить (FiIe>Publish Setting), сделать предварительный просмотр (FiIe>Pubiish Preview) и, наконец, осуществить (File>Publish). В окне Publish Settings (Настройка публикации) на вкладке Formats (Форматы) вы можете указать, какого типа файлы следует создать, а также ввести их имена, отличные от устанавливаемых по умолчанию. Можно указать сразу несколько типов файлов. В зависимости от того, какие типы выходных файлов вы указали на вкладке Formats, в окне настройки публикации будут присутствовать и другие вкладки, на которых можно установить значения дополнительных параметров для каждого типа файлов.


Рис. 637. Вкладка Formats окна настройки публикации, на которой можно задать типы и имена создаваемых выходных файлов

Заметим, что в Flash MX, в отличие от Flash 5.0, отсутствуют флажки Generator Template (Генератор Шаблона) и RealPlayer.

Типичный вариант публикации для Web-страниц состоит в выборе двух типов файлов: Flash (.swf) и HTML (.html). В этом случае создаются два выходных файла:

  • Файл формата Flash с расширением swf, содержащий мультфильм;
  • Текстовый файл с расширением html, содержащий тэги (команды языка HTML) для встраивания вашего мультфильма в HTML-документ.

Вы можете задать создание файла Windows Projector (.exe). Это — исполнимый файл с расширением ехе, который содержит в себе паше произведение (все, что можно сохранить в обычном для Flash SWF-формате) вместе с проигрывателем. Таким образом, вы можете создать самовоспроизводящийся мультфильм. Его можно продемонстрировать на компьютере, на котором не установлен проигрыватель Flash Player.

Обратите внимание, что в окне настройки публикации можно задать параметры экспорта в файлы обычных графических форматов GIF, JPEG и PNG. Напомним, что экспорт статических графических изображений в эти и другие форматы можно выполнить и с помощью команды File>Export Image (Файл>Экспорт изображения), которая рассматривалась в главе 8. Однако только в окне настройки публикации вы можете задать создание анимационного GIF-файл. Напомним, что небольшие по размерам графики и количеству кадров анимации обычно сохраняют в формате Animated GIF, который особенно широко используется в Web-дизайне.

Если вы хотите сохранить изменения параметров и продолжить работу с мультфильмом, закрыв окно настройки публикации, то щелкните на кнопке ОК. Для выполнения публикации щелкните на кнопке Publish.

Заметим, что кроме команды File>Publish (Файл>Публикация) можно использовать команду File>Export Movie (Файл>Экспорт мультфильма).
Рассмотрим основные варианты публикации более подробно.

 

817.gif

Изображение: 

44. Публикация в формате SWF

 

Публикация в формате SWF

Формат SWF является наиболее компактным. Сохраняйте окончательные варианты вашей работы, особенно анимации, именно в этом формате, если у вас нет веских причин поступать иначе. Если вы хотите разместить мультфильм на Web-странице, то создание SWF-файла обязательно.

На вкладке Formats окна настройки публикации установите флажок Flash (.swf) и перейдите на вкладку Flash.
Параметры SWF-файла:

  • Список Load Order (Порядок загрузки). Порядок загрузки слоев первого кадра мультфильма: Bottom Up (Снизу вверх), Top Down (Сверху вниз);
  • Флажок Generate size report (Генерировать отчет о размере). Задает создание текстового файла, содержащего сведения о размерах в байтах различных фрагментов мультфильма;
  • Флажок Omit Trace actions (Опустить действия трассировки). Трассировка (Trace) выполняется при отладке сценариев ActionScript и выводит отладочную информацию в отдельном окне. Установите этот флажок, чтобы не использовать инструкции Trace в SWF-файле;
  • Флажок Protect fron import (Защитить от импорта). Предотвращает импорт SWF-файла в программу Flash для защиты от несанкционированного использования вашего произведения;
  • Флажок Debugging Permitted (Допустимая отладка). Позволяет использовать Debugger (Отладчик) для отладки мультфильмов, созданных, например, на другом компьютере. Если установить этот флажок, то можно задать пароль для защиты мультфильма. Обычно используется программистами на ActionScript;


Рис. 638. Вкладка Flash окна настройки публикации в Flash 5.0, на которой можно задать параметры создаваемого SWF-файла

  • Ползунок JPEG Quality (Качество JPEG). Определяет качество растровых изображений в мультфильме. Точнее говоря, этот параметр задает степень сжатия алгоритмом JPEG. Чем выше качество, тем меньше сжатие и наоборот;
  • Поле Audio Stream (Аудиопоток). Отображает и устанавливает параметры потоковых звуков. Потоковые звуки — звуки, для которых на палитре Sound (Звук) параметр Sync имеет значение Stream. Этот параметр применяется, если не задана компрессия для отдельных звуковых файлов в окне Sound Properties Чтобы изменить текущие настройки, щелкните на кнопке Set (Установить);
  • Поле Audio Event (Аудиособытие). Отображает и устанавливает параметры компрессии звуков, для которых в палитре Sound параметр Sync имеет значение Event. В противном случае используются параметры, заданные для звука типа Audio Stream;
  • Флажок Override sound settings (Отменить звуковые параметры). Если установить этот флажок, то все параметры, заданные в окне Sound Properties, будут отменены. При этом ко всем звукам будут применены параметры, установленные в окне Publish Settings;
  • Раскрывающийся список Version (Версия). Задает версию Flash-проигрывателя, для которой следует создать выходные файлы. Следует иметь в виду, что если вы использовали средства, отсутствовавшие в более ранних версиях, то отображение в них мультфильма может быть некорректным. Так, например, ActionScript в Flash 5.0 отличается от языка сценариев Flash 4.O. Файлы с дополнительным сжатием (см. следующий параметр), созданные в Flash MX, могут проигрываться только Flash-проигрывателем версии 6;
  • Флажок Compress Movie (Сжатие мультфильма). Присутствует в Flash MX и доступен, если в списке Version (Версия) установлено значение Flash Player 6. При установке этого флажка используется алгоритм дополнительного сжатия мультфильма.


Рис. 639. Вкладка Flash окна настройки публикации в Flash MX, на которой можно задать параметры создаваемого SWF-файла

 

818.gif

Изображение: 

819.gif

Изображение: 

45. Публикация в формате HTML

 

Публикация в формате HTML

Чтобы разместить мультфильм Flash (т. е. SWF-файл) на Web-странице, необходимо сделать в HTML-коде этой страницы специальную вставку. Вставляемый HTML-код содержит указания Web-браузеру, как отобразить проигрыватель (Flash Player) и где его найти. Написать такой код совсем просто. Однако Flash может его создать самостоятельно.

На вкладке Formats окна настройки публикации установите флажок HTML (.html). Обратите внимание, что при этом автоматически установится флажок Flash (.swf). Это означает, что кроме HTML-файла будет создан и SWF-файл с мультфильмом. Перейдите на вкладку HTML.

Рис. 640. Вкладка HTML окна настройки публикации, ни которой можно задать параметры создаваемого HTML-файла

Параметры HTML-файла:

  • Раскрывающийся список Template (Шаблон). Определяет формат и содержание HTML-файла. Возможны следующие значения:
    • Flash Only (Только Flash) — простейший шаблон, устанавливаемый по умолчанию. При этом создается HTML-файл, содержащий только команды загрузки проигрывателя и SWF-файла;
    • Flash with Named Anchor (Flash с именованными якорями) — обеспечивает включение в HTML-файл дополнительных гиперссылок, с помощью которых могут выполняться переходы между кадрами мультфильма;
    • Image Map (Графическая карта) — обеспечивает включение в HTML-файл тэга <1MG> с атрибутами, позволяющими создать графическую карту ссыло к(картинку с областями, чувствительными к щелчку); при этом на вкладке Formats следует указать необходимость генерации файла одного из графических форматов;
    • QuickTime — обеспечивает включение в HTML-файл Flash-мультфильма в виде проигрывателя QuickTime.
  • Раскрывающийся список Dimensions (Размеры). Устанавливает размеры области Web-страницы, выделяемой мультфильму. Возможны следующие три значения:
    • Match Movie (Соответствовать мультфильму) — устанавливает размеры соответственно параметрам, заданным в окне Movie Properties (Свойства мультфильма), которое открывается командой Modify>Movie (Moдифицировать> Мультфильм);
    • Pixels (В пикселах) — введите числовые значения значения в поля Width (Ширина) и Height (Высота);
    • Percent (В процентах) — введите значения ширины и высоты в процентах от соответствующих размеров окна браузера.
  • Флажки группы Playback (Воспроизведение):
    • Paused At Start (Задержка при воспроизведении) — создается параметр PLAY с значением FALSE (ложь). Предполагается, что пользователь должен запустить воспроизведение щелчком на кнопке в мультфильме (к экземпляру кнопки должно быть добавлено действие Play). Кроме того, можно выбрать команду Play (Воспроизвести) контекстного меню, вызываемого щелчком на мультфильме правой кнопкой мыши;
    • Loop (Цикл) — создается параметр LOOP с значением TRUE (истина). При этом мультфильм воспроизводится циклически неопределенно долго. Этот параметр установлен по умолчанию. Снимите флажок, если хотите остановить воспроизведение по окончании мультфильма;
    • Display Menu (Отобразить меню) — создается параметр MENU с значением TRUE (истина). Это позволяет открывать контекстное меню щелчком на мультфильме правой кнопкой мыши. В меню можно выбрать команды увеличения качества, перемотки, воспроизведения и т. п. Этот флажок установлен по умолчанию. Если флажок не установлен, то в контекстном меню будет только пункт About Flash Player (О программе Flash Player);
    • Device Font (Встроенный шрифт) — если этот флажок установлен, то все шрифты заменятся установленными на компьютере пользователя системными шрифтами со сглаженными краями. По умолчанию этот флажок не установлен.
  • Раскрывающийся список Quality (Качество). Определяет степень сглаживания рисунков, т. е. неровностей краев. Чем ниже качество, тем быстрее воспроизводится мультфильм, и наоборот. Возможны следующие шесть значений:
    • Low (Низкое) — нет сглаживания;
    • Autolow (Авто-низкое) — воспроизведение начинается с низким качеством и переключается на высокое, если проигрыватель определит, что компьютер его поддерживает;
    • Autohigh (Авто-высокое) — воспроизведение начинается с высоким качеством и переключается на низкое, если проигрыватель определит, что компьютер не поддерживает высокое качество;
    • Medium (Среднее) — используются некоторые средства сглаживания, но только не растровых изображений;
    • Heigh (Высокое) — сглаживание векторной графики и статических растровых изображений, но только не таких, которые были созданы при автоматическом заполнении кадров;
    • Best (Самое лучшее) — сглаживание всех изображений, в том числе анимационных растровых.
  • Раскрывающийся список Window Mode (Режим окна). Определяет, как окно мультфильма взаимодействует с оставшейся частью Web-страницы. Этот параметр понимают только браузеры Microsoft Internet Explorer версии 4.0 и выше. Возможны следующие три значения:
    • Window (Окно) — мультфильм воспроизводится в собственном окне Flash-проигрывателя, при этом обеспечивается наибольшая скорость проигрывания;
    • Opaque (Непрозрачный) — мультфильм воспроизводится непосредственно на странице, при этом он имеет непрозрачный фон, закрывающий все остальные элементы Web-страницы;
    • Transparent (Прозрачный) — мультфильм воспроизводится непосредственно на странице, при этом фон мультфильма прозрачный, чтобы были видны другие элементы Web-cTpaHHUbi;'Bbi6op этого значения может замедлить воспроизведение мультфильма.
  • Раскрывающийся список HTML Alignment (Выравнивание HTML). Определяет, как будет выравниваться мультфильм по отношению к окну браузера. По умолчанию (Default) мультфильм располагается по центру окна браузера. Если окно браузера по размерам меньше, чем фильм, то края последнего обрезаются. Другие значения параметра позволяют выровнять мультфильм по краям окна браузера;
  • Раскрывающийся список Scale (Масштаб). Определяет положение мультфильма внутри границ, заданных параметрами WIDTH и HEIGHT. Возможны следующие три значения:
    • Default (Show All) (По умолчанию (Показать все)) — отображает весь фильм без искажения, но может создавать границы по обеим сторонам мультфильма;
    • No Border (Без границ) — масштабирует мультфильм так, чтобы он занял всю указанную область без искажений, но, возможно, с обрезкой краев;
    • Exact Fit (Точное соответствие) — приводит мультфильм в точное соответствие с указанными размерами, при необходимости искажая его.
  • Раскрывающиеся списки Flash Alignment (Выравнивание Flash). Определяют, как мультфильм будет располагаться в собственном окне. Эти параметры связаны с параметрами Scale (Масштаб) и Dimensions (Размеры);
  • Флажок Show Warning Messages (Показывать предупреждающие сообщения). Если флажок установлен, то во время публикации будут выводиться предупреждающие сообщения о допущенных ошибках.
    в Flash

Ниже приведен пример содержания HTML-файла, созданного редактором Flash:

<HTML>
<HEAD>
<ТITLE>Пример</ТITLE> </HEAD> <BODY bgcolor="#CCCCCC">
<!== URL's used in the movie==>
<A HREF=http: //www .admiral. ru/hp/dunaevx/A> <!== text used in the movie==>
<OBJECT classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=5,0,0,0" WIDTH=298 HEIGHT=346>
<PARAM NAME=movie VALUE="nPMMEP.SWF"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=ICCCCCC>
<EMBED src="nPMMEP.SWF" quality=highbgcolor=#CCCCCC WIDTH=298 HEIGHT=346
TYPE="application/x-Shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/ index.cgi?Pl_Prod_Version=ShockwaveFlash"> </EMBED>
</OBJECT>
</BODY>
</HTML>

Все, что заключено в угловые скобки <и>, является тэгами (командами, дескрипторами) HTML. Вообще говоря, конкретное содержание HTML-кода зависит от того, какие параметры вы задали на вкладке HTML в окне настройки публикации. Подробнее об HTML мы расскажем в следующей главе, а здесь отметим лишь основные моменты, относящиеся к проигрывателю SWF-файлов на Web-странице.

В HTML-коде используются тэги <ОВJECT> и <EMBED> для вставки в Web-страницу элемента управления ActiveX, обеспечивающего воспроизведение SWF-файла (в нашем случае — npHMep.swf). Это и есть проигрыватель мультфильма в окне Web-браузера. Для браузера Microsoft Internet Explorer достаточно тэга <OBJECT>. Тэг <EMBED> вставлен только для Netscape Navigator. Значения параметров codebase и pluginspage содержат URL-адреса проигрывателя SWF-файлов на тот случай, если он не установлен на компьютере пользователя. Заметим, что в Internet Explorer 5.x и более поздних версий пpoигpывaтeльSWF-фaйлoвyжe встроен,следовательно, этому браузеру не нужен параметр codebase и, тем более, pluginspage. Однако не забывайте, что встречаются браузеры и более ранних версий.

HTML-код, созданный в Flash, вы можете отредактировать (например, вставить другие элементы страницы). А можно, наоборот, вставить необходимые фрагменты этого кода в свой HTML-код. Например, чтобы вставить Flash-мультфильм в уже готоиый HTML-документ, нужно вставить в него нее, что заключено между <ОВJЕСТ> и </OBJECT> из приведенного выше примера. При этом следует лишь подставить нужные значения для имени SWF-файла, размеров (WIDTH и HEIGHT), цвета фона (bgcolor) и качества (quality). HTML-файл — это обычный текстовый файл с расширением html или htm, который можно открыть, например, в Блокноте (Notepad) Windows.

 

820.gif

Изображение: 

46. Публикация самовоспроизводящихся мультфильмов

 

Публикация самовоспроизводящихся мультфильмов

Итак, HTML-файл нужен для просмотра SWF-файлов в Web-браузере. Однако SWF-файлы можно просматривать и в специальном окне Flash-проигрывателя. Чтобы иметь возможность просмотра мультфильмов на компьютерах, на которых Flash-проигрыватель не установлен, нужно создать исполняемый ЕХЕ-файл для Windows (или сжатый HQX-файл для Macintosh). Исполняемый файл кроме мультфильма содержит и Flash-проигрыватель. Однако его размер будет примерно на 370 Кбайт больше, чем размер SWF-файла.

Чтобы создать самовоспроизводящийся мультфильм, на вкладке Formats окна Publish Settings установите флажок Windows Projector (.exe) или Macintosh Projector (.hqx).

Рис. 641. Окно Flash-проигрывателя (Flash Player)

 

821.gif

Изображение: 

47. Публикация в формате Animated GIF472

 

Публикация в формате Animated GIF

Вы можете экспортировать мультфильм в анимационный GIF-файл. Это имеет смысл сделать в случае небольшого мультфильма, содержащего несколько кадров, в которых находятся небольшие по размеру изображения. Такие анимации обычно используются на Web-страницах.

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

Рис. 642. Вкладка GIF окна настройки публикации, на которой можно задать параметры создаваемого GIF-файла

Чтобы экспортировать мультфильм в анимационный GIF-файл, установите переключатель Animated (Анимационный). Если хотите, чтобы анимация воспроизводилась циклически неопределенно долго, установите переключатель Loop Continuously, в противном случае установите переключатель Repeat (Повторить) и задайте число повторений в соседнем поле ввода. Если требуется экспортировать не все кадры мультфильма, то создайте метки #First и #Last соответственно для первого и последнего кадра. Для создания метки щелкните на нужном кадре и выполните команду Window>Panels>Frame (Окно>Палитры>Кадр). В поле Label (Метка) введите название метки.

Отметим еще один важный параметр — Transparent (Прозрачность). С помощью этого параметра можно задать, каким образом прозрачность, определенная в мультфильме посредством параметра alpha, будет экспортирована в GIF-файл.
В списке Transparent можно выбрать следующие значения:

  • Opaque (Непрозрачный). Делает фон мультфильма непрозрачным;
  • Тransparent (Прозрачный). Делает фон мультфильма прозрачным;
  • Alpha. Позволяет установить пороговое значение (Threshold) в диапазоне от 0 до 255. Любые цвета, значения прозрачности (Alpha) которых меньше порога, становятся полностью прозрачными (невидимыми).
 

822.gif

Изображение: 

48. Публикация в других форматах

 

Публикация в других форматах

Мультфильмы могут быть экспортированы в форматы QuickTime (mov) и RealPlayer (smil). Последний формат недоступен в Flash MX, но возможен в Flash 5.0. Файлы этих форматов воспроизводятся с помощью одноименных проигрывателей.

Вы также можете экспортировать мультфильмы в форматы для статических изображений — GIF, JPEG и PNG. При этом по умолчанию экспортируется содержимое первого кадра мультфильма. Чтобы экспортировать другой кадр, его следует пометить меткой #Static. Для создания метки щелкните на нужном кадре и выполните в Flash 5.0 кoмaндy Window>Panels>Frame(Oкнo>Пaлитpы>Kaдp). В Flash MX эта же цель достигается с помощью палитры Properties (Свойства), вызываемой командой Window>Properties. В поле Label (Метка) введите название метки.

 

46.gif

Изображение: 

47.gif

Изображение: 

48.gif

Изображение: 

22. Градиентные цвета

 

Градиентные цвета

Заливку областей рисунка можно производить не только так называемыми твердыми цветами, но и градиентами — комбинациями двух и более цветов, которые, постепенно смешиваясь, переходят один в другой. В Flash можно создавать градиенты с использованием до 8 цветов. Градиент может быть линейным и радиальным, он всегда используется как цвет заливки. В линейном градиенте переход цвета образуется смешением прямых полос, а в радиальном — концентрических кругов.

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

  1. 1. Выполните команду Window>Panels>Fill (Окно>Палитры>Заливка). Откроется палитра Fill (Заливка). В раскрывающемся списке выберите стиль градиента — Linear Gradient (Линейный градиент) или Radial Gradient (Радиальный градиент).
  2. 2. На цветовой полосе редактирования расположены ползунки (указатели цвета). Чтобы задать цвет указателя, щелкните сначала на нем, а затем на цветовом поле справа от полосы редактирования. Выберите в цветовой палитре нужный цвет.
  3. 3. Чтобы изменить количество цветов градиентной заливки, следует добавить или удалить указатель (ползунок). Для добавления указателя щелкните на полосе редактирования в том месте, где должен находиться указатель. Для удаления указателя перетащите его в сторону за пределы полосы редактирования.
  4. 4. Для сохранения градиента щелкните на кнопке меню в правом верхнем углу палитры Fill и выберите Add Gradient (Добавить градиент). Новый вариант градиента появится в цветовой палитре.

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

Рис. 46. Настройка градиентной заливки

 

46.gif

23. Импорт и экспорт цветовых палитр

 

Импорт и экспорт цветовых палитр

Имена файлов цветовой палитры Flash имеют расширение clr. Цветовые палитры Photoshop сохраняются в файлах с расширением act, но Flash может импортировать их.

Чтобы импортировать цветовую палитру, воспользуйтесь меню, которое раскрывается щелчком на круглой кнопке в правом верхнем углу на вкладке Swatches (Образцы). В этом меню выберите команду Add Colors (Добавить цвета), если нужно добавить импортированную цветовую палитру к текущей. Если требуется заменить текущую цветовую палитру, выберите команду Replace Colors (Заменить цвета). Для сохранения палитры в файле выберите команду Save Colors (Сохранить цвета).

Меню палитры Swatches (Образцы) можно использовать для управления цветовой палитрой:

  • Duplicate Swatch (Дублировать образец). Создает копию цветового образца.
    Используется для создания нового образца на основе имеющегося.
  • Delete Swatch (Удалить образец).
  • Load Default Colors (Загрузить цвета по умолчанию). Заменяет текущую цветовую палитру на предустановленную в Flash палитру из 216 цветов Web.
  • Save as Default (Сохранить как по умолчанию). Сохраняет цветовую палитру и использует ее по умолчанию для любого нового проекта Flash.
  • Clear Colors (Очистить цвета). Удаляет все цвета из палитры, кроме черного и белого.
  • Web 216. Загружает 216-иветную палитру Web.
  • Sort by Color (Сортировать по цвету). Сортирует цвета палитры по яркости.
 

24. Настройка цветопередачи

 

Настройка цветопередачи

Многие пользователи компьютеров не любят настраивать монитор отчасти из-за боязни испортить его, а отчасти — из-за непонимания значения параметров. Именно поэтому мы и написали , посвященную мониторам. Однако при подготовке изображений настройка параметров цветопередачи имеет важное значение. Так, изображение, подготовленное на IBM-совместимом компьютере, может выглядеть на компьютере Macintosh заметно иначе; изображения на мониторах различных типов также могут существенно отличаться друг от друга. Наконец, мониторы и принтеры, а также принтеры различных моделей имеют неодинаковую цветопередачу. При подготовке изображений для печати обычно стараются как можно точнее учесть особенности принтера. В Web-дизайне стремятся к инвариантности изображения относительно типов мониторов, т. е. хотят, чтобы вид картинки не зависел от типа монитора.

Параметры цветопередачи различных устройств можно учитывать и сохранять в файле вместе с собственно изображением. Совокупность этих параметров называют цветовым профилем (просто профилем). На первых порах вы можете ничего не знать о цветовых профилях и не заниматься их настройкой. Однако рано или поздно вы вернетесь к этому вопросу. Найдите время, чтобы поэкспериментировать с управлением цветом. Это не очень сложно и даже интересно.

Photoshop 6.0 позволяет работать с несколькими цветовыми профилями одновременно, а также указывать, что делать с изображениями без внедренных цветовых профилей. Создавая изображения и сохраняя их в файлах некоторых форматов (PSD, TIFF, JPEG, EPS и Р1ХТ), вы можете внедрять в них цветовые профили 1СС (International Color Consortium — Международный консорциум по цветопередаче).

В Photoshop имеются три способа настройки параметров цветопередачи:
Настройка цветовых моделей, независимых от устройств, — команда Edit>Color Settings (Редактирование>Цветовые установки).

Настройка параметров монитора с помощью утилиты Adobe Gamma — вызываемая команда Start>Settings>Control>Adobe Gamma (Пуск>Настройка>Панель yпpaвлeния>Adobe Gamma).

Внедрение цветового профиля в графический файл — команда File>Save As (Файл>Сохранить Как).

 

1. главу 4

 

ГЛАВА 4. МОНИТОРЫ

 

1. Мониторы

 

Мониторы

Монитор является внешним устройством отображения видеоинформации компьютера. Для большинства пользователей компьютеров, особенно для занимающихся графикой, монитор — очень важный элемент компьютерной системы. К тому же монитор — один из самых дорогих элементов. Если вы хотите быть на переднем крае компьютерных технологий, то начинку системного блока компьютера вам придется обновлять раз в полгода. Мы не хотим сказать, что делать это обязательно нужно. Вы же не будете менять шестисотый мерседес на девятисотый, как только узнаете, что он сошел с конвейера. Монитор обычно покупается «на вырост». Это означает, что вы должны определить круг задач, которыми будете заниматься в ближайшие 3—5 лет. Честно говоря, мы и сами не можем это сделать. Тогда давайте исходить из следующего: офисные задачи, игры, профессиональная компьютерная графика. Офисные задачи не предъявляют каких бы то ни было особых требований к мониторам. Если вам большего не нужно, то не гонитесь за дорогими моделями. Игры обычно предъявляют самые большие требования к ресурсам компьютера и особенно к видеосистеме. Игры являются пожирателями ресурсов. Их разработчики практически не считаются с бедными владельцами скромных компьютеров. Однако они стимулируют прогресс компьютерных технологий. Если вы «геймер» (мы не любим этого слова, но употребляем его из-за краткости и выразительности, хотя наши оправдания заняли больше места, чем собственно термин), то вам нужен самый продвинутый монитор, который с большей пользой послужил бы графическому дизайнеру. Если вы компьютерный художник (просто художнику хватило бы клочка бумаги да карандашного огрызка), советуем приобрести дорогой монитор с большим (17-21 дюймов) дисплеем. Ведь вам предстоит не любоваться графикой, как геймеру, а создавать и исследовать ее. Кроме того, вам нужнее, чем кому бы то ни было, беречь свое зрение.

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

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

 

2. Мониторы на электронно-лучевых трубках

 

Мониторы на электронно-лучевых трубках

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

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

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

Рис. 111. Монитор на основе ЭЛТ

Рис. 112. Схема ЭЛТ

Горизонтальная и вертикальная развертки характеризуются частотами, которые еще называют частотами строчной и кадровой синхронизации. Чем больше их значения, тем выше качество изображения. Частота горизонтальной развертки принимает значения несколько десятков кГц и показывает, сколько тысяч раз в секунду пробегает луч слева направо. Частота вертикальной развертки принимает значения в диапазоне от 50 до 200 Гц и показывает, сколько раз в секунду луч обегает весь экран. Например, для 15 - 17-дюймовых мониторов с разрешением 800x600 или 1024x768 оптимальное значение частоты вертикальной развертки — 85 Гц. При меньшем значении возможно заметное мерцание изображения. Чтобы проверить это, посмотрите на изображение в затемненном помещении с расстояния 3 - 5 метров. Едва уловимое или даже практически незаметное мерцание изображения все же улавливается нашим зрением (но не фиксируется сознанием) и вызывает усталость глазных мышц. В конце концов это приводит к ослаблению зрения.

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

Рис. 113. Теневая маска

Минимальное расстояние между люминофорными элементами (зернами) одинакового цвета, расположенными в соседних строках экрана, называется шагом (dot pitch) люминофорного покрытия и измеряется в миллиметрах. Из-за того что разноцветные люминофоры расположены в вершинах треугольника, минимальное расстояние между одноцветными люминофорами в соседних строках оказывается меньше, чем в одной строке. Чтобы вычислить расстояние между соседними одноцветными зернами в одной строке, следует шаг умножить на 0,866. Шаг является важной характеристикой ЭЛТ, существенно влияющей на качество отображаемого изображения. Чем меньше шаг, тем выше качество отображения. По существу, шаг определяет размер экранного пиксела (трехцветной точки).

Рис. 114. Шаг люминофорного покрытия в ЭЛТ с обычной теневой маской

Теневые маски рассмотренного выше вида применяют с момента изобретения цветных мониторов. Их обычно изготавливают из магнитного сплава железа с никелем (инвара). Он имеет низкий коэффициент теплового расширения. А это очень важно. Дело в том, что значительная часть (70—80%) электронов наталкивается на маску и нагревает ее. Это приводит к изменению размеров и смещению отверстий и, как следствие, — к ухудшению качества изображения.
Другой тип теневой маски называется апертурной решеткой (aperture grille). Она применяется в ЭЛТ с пленарным (в одной плоскости) расположением электронных пушек. Такое расположение облегчает задачу поворота электронных лучей на большой угол, а также делает их фокусировку независимой от магнитного поля земли. Другими словами, лучше решается задача сведения лучей. ЭЛТ с планарным расположением пушек и апертурной решеткой называют еще «трубками с самосведением лучей».

Рис. 115. Апертурная решетка

Рассмотрим принцип устройства ЭЛТ с апертурной решеткой. Люминофоры трех базовых цветов в такой трубке наносятся на экран в виде сплошных вертикальных полос. Апертурная решетка, играющая роль теневой маски, представляет собой тонкую металлическую фольгу с вертикальными щелями. Для стабилизации решетки (гашения колебаний) к ней прикрепляются тонкие проволочные струны (damper wire). В мониторах с размером по диагонали 15 дюймов применяется одна такая струна, в 17-дюймовых — две, а в 21-дюймовых — три и более. Они заметны на светящемся экране, но это не дефект (как кто-то думает), а конструктивная особенность. Некоторым пользователям это не нравится, а другие используют их в качестве линеек при рисовании.

Минимальное расстояние между полосами люминофора одинакового цвета называется шагом полос (strip pitch) и измеряется в миллиметрах. Чем меньше значение шага полос, тем выше качество изображения на мониторе. Обратите внимание, что шаг в случае ЭЛТ с апертурной решеткой измеряется по горизонтали в отличие шага в ЭЛТ с обычной теневой маской, измеряемого по диагонали.

Третий тип теневой маски называется щелевой маской. Это решение представляет собой комбинацию идей, лежащих в основе теневой маски и апертурной решетки. В данном случае люминофорные элементы имеют форму вытянутых по вертикали овалов и расположены вдоль воображаемых вертикальных линий. Напомним, что в трубках с обычной теневой маской люминофоры расположены в вершинах равносторонних треугольников. Собственно щелевая маска представляет собой множество вертикальных прямоугольных прорезей в металлическом экране. Таким образом, экранный пиксел (трехцветная точка) приобретает прямоугольную форму. В данный момент эта технология обеспечивает ширину пиксела 0,21 мм против 0,25 в случае апертурной решетки.

Рис. 116. Шаг люминофорного покрытия в ЭЛТ с апертурной решеткой

Возникает вопрос: какая маска лучше? Маска — всего лишь один из элементов монитора, очень важный, но не полностью определяющий его потребительские свойства. Электронные блоки регулировок тоже совершенствуются, и многое из того, что недоделано в механике, они виртуозно компенсируют. Обычные теневые маски, изобретенные раньше других, не сошли со сцены. Так, сейчас можно встретить мониторы с обычными теневыми масками, которые не уступают, а подчас и превосходят мониторы с апертурными решетками. В конце концов мы покупаем монитор, а не теневую маску.

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

 

111.gif

Изображение: 

112.gif

Изображение: 

113.gif

Изображение: 

114.gif

Изображение: 

115.gif

Изображение: 

116.gif

Изображение: 

3. FD Trinitron (Sony)

 

FD Trinitron (Sony)

Выпускается фирмой Sony, имеет плоскую внешнюю поверхность экрана (даже модели с диагональю 15 дюймов). Технология, которую Sony использует в своих мониторах, разрабатывается компанией уже более тридцати лет, и не будет преувеличением сказать, что она приобрела всемирную известность, В 1982 г. фирма Sony выпустила первый компьютерный дисплей, в котором была применена ЭЛТ Trinitron. В 1998 г. компания представила первый монитор с плоской поверхностью экрана, выполненный по технологии FD Trinitron.

ЭЛТ Trinitron, которые всем хорошо известны по бытовым телевизорам, отличались от обычных тем, что имели не сферическую поверхность экрана, а цилиндрическую. Остановимся на некоторых основных моментах, отличающих технологию FD Trinitron. Прежде всего, это высокое разрешение. Чтобы достигнуть высокой разрешающей способности, необходимо наличие трех составляющих — очень тонкой экранной маски, минимального диаметра электронного луча и безошибочного позиционирования этого луча на всей поверхности экрана. Решение этой задачи связано с немалыми трудностями. Например, уменьшение диаметра электронного луча уменьшает яркость изображения. Чтобы компенсировать потери яркости, нужно увеличить мощность электронного луча, но это сокращает срок службы люминофорного покрытия и катода электронной пушки.

В FD Trinitron применена конструкция электронной пушки под названием SAGIC (Small Aperture G1 with Impregnated Cathode). В ней используется обычный для пушек бариевый катод, но обогащенный вольфрамом, что позволяет продлить срок службы ЭЛТ. Кроме того, в конструкции электронной пушки предприняты специальные меры по сужению электронного луча.

В качестве экраннной маски фирма Sony использует апертурную решетку с шагом 0,22 - 0,28 мм. Этот параметр изменяется не только в зависимости от модели монитора, но и от периферии к центру маски. Применение апертурной решетки вместо обычной теневой маски позволяет увеличить количество электронов, достигающих поверхности люминофорного покрытия, а это дает более чистое, лучше сфокусированное и яркое изображение. Все мониторы с ЭЛТ FD Trinitron имеют специальное многослойное покрытие (от 4 до 6 слоев), которое выполняет несколько функций. Во-первых, оно позволяет получать истинные цвета на поверхности экрана за счет уменьшения отраженного света. Во-вторых, благодаря дополнительному специальному черному слою антибликового покрытия (Hi-Con™) повышается контрастность, значительно улучшается передача серых оттенков.

 

4. Flatron (LG Electronics)

 

Flatron (LG Electronics)

Основное отличие ЭЛТ Flatron от кинескопов других производителей состоит втом, что в ней для формирования изображения используется абсолютно плоская поверхность экрана как снаружи, так и внутри. Это позволило увеличить угол обзора и, как следствие, видимую область изображения. В мониторах LG Flatron используется щелевая маска, позволяющая воспроизводить изображение с высоким разрешением (шаг маски у 17-дюймовых мониторов LG Flatron 775FT и 795FT Plus — 0,24 мм). Кроме того, в ЭЛТ LG Flatron толщина маски снижена, что повышает качество формируемого на экране электронного пятна.

В LG Flatron используется электронная пушка специальной конструкциии — Hi-Lb-MQ Gun. В обычных пушках по краям экрана электронное пятно имеет овальную форму. Это ведет к появлению муара и снижению горизонтального разрешения. Примененная же в Hi-Lb-MQ Gun система фокусировки позволяет добиваться практически идеальной формы электронного пятна по всей поверхности экрана. В конструкцию решетки электронной пушки также внесены изменения —добавлендополнительный фильтрующий элемент G3.

Еще одной примечательной особенностью Flatron является антибликовое и антистатическое покрытие W-ARAS, оно значительно снижает количество отраженного света и вместе с тем позволяет добиться самого низкого коэффициента светопропускания экрана (38% против 40—52% у конкурентов).

 

5. ErgoFlat (Hitachi)

 

ErgoFlat (Hitachi)

В ЭЛТ ErgoFlat используется теневая маска с очень маленьким шагом. Например, у модели Hitachi CM771 шаг маски равен 0,22 мм по горизонтали и 0,14 мм по вертикали.

 

6. DynaFlat (Samsung)

 

DynaFlat (Samsung)

В ЭЛТ DynaFlat фирмы Samsung также используется теневая маска с очень маленьким шагом (до 0,20 мм). Кроме того, в мониторах этого типа применяется антибликовое и антистатическое покрытие Smart III. По отзывам специалистов, мониторы с ЭЛТ DynaFlat позволяют получать даже более яркую и насыщенную картинку, чем мониторы на базе FD Trinitron.

 

7. Мониторы с жидкокристаллическим дисплеем

 

Мониторы с жидкокристаллическим дисплеем

Первый рабочий жидкокристаллический дисплей (ЖКД) был создан Фергесоном (Fergason) в 1970 г. До этого жидкокристаллические устройства потребляли слишком много энергии, срок их службы был ограничен, а контрастность изображения была очень низкой. Широкой общественности новый жидкокристаллический дисплей был представлен в 1971 г. и получил одобрение.
Жидкие кристаллы (Liquid Crystal) — это вещества, способные под электрическим напряжением изменять величину пропускаемого света. В основу жидкокристаллического монитора (LCD-монитора, ЖК-монитора) положены две стеклянные или пластиковые пластины с суспензией между ними. Кристаллы в этой суспензии расположены параллельно друг к другу и позволяют свету проникать через панель. Под воздействием электрического тока расположение кристаллов изменяется, и они начинают препятствовать прохождению света. Отметим, что первые жидкие кристаллы отличались своей нестабильностью и были малопригодны для массового применения. Реальное развитие ЖК-технологии началось с изобретением английскими учеными стабильного жидкого кристалла — бифени-ла (Biphenyl). Жидкокристаллические дисплеи первого поколения можно наблюдать в калькуляторах, электронных играх, а также в часах.

Современные ЖК-мониторы называют еще плоскими панелями, активными матрицами двойного сканирования, тонкопленочными транзисторами. Идея ЖК-мониторов витала в воздухе более 30 лет, но проводившиеся исследования не приводили к практически приемлемому результату. Сейчас ЖКД стали популярны — всем нравится их изящный вид, компактность, экономичность. Однако их цена остается более высокой, чем у мониторов с ЭЛТ. В то же время наметилась довольно устойчивая тенденция снижения цен и улучшения качества ЖК-мониторов. Теперь они обеспечивают высококачественное контрастное, яркое, отчетливое изображение. Именно по этой причине пользователи переходят с традиционных ЭЛТ мониторов на жидкокристаллические.

Раньше ЖК-мониторы обладали большой инерционностью, особенно заметной при просмотре динамических изображений, их уровень контрастности был низок. Первые матричные технологии, так называемые пассивные матрицы, вполне неплохо отображают текстовую информацию, но при резкой смене картинки на экране оставались так называемые «призраки». Поэтому такого рода устройства не подходили для просмотра видеофильмов и игр. Сегодня на пассивных матрицах работает большинство черно-белых портативных компьютеров, пейджеры и мобильные телефоны. Так как при ЖК-технологии каждый пиксел управляется отдельным транзистором, четкость получаемого текста выше в сравнении с ЭЛТ-монитором. В отличие от ЭЛТ-мониторов, у жидкокристаллического монитора не может быть ни несведения лучей, ни расфокусировки.

Существует два вида ЖК-мониторов: DSTN (dual-scan twisted nematic — кристаллические экраны с двойным сканированием) и TFT (thin film transistor — на тонкопленочных транзисторах). Их еще называют соответственно пассивными и активными матрицами. В первых компьютерах использовались восьмидюймовые (по диагонали) пассивные черно-белые матрицы. С переходом на технологию активных матриц размер экрана монитора стал больше. Практически все современные ЖК-мониторы используют панели на тонкопленочных транзисторах, обеспечивающих яркое, четкое изображение, а его размер значительно больше, чем 8 дюймов.

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

Рис. 114. Устройство жидкокристаллического дисплея

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

Как и в традиционных электроннолучевых трубках, пиксел в ЖК-мониторе формируется из трех участков — красного, зеленого и синего. А различные цвета получаются в результате изменения величины соответствующего электрического заряда (что приводит к повороту кристалла и изменению яркости проходящего светового потока). TFT-дисплей состоит из сетки таких пикселов, где работой каждого цветового участка, каждого пиксела, управляет отдельный транзистор. Количество пикселов задает разрешение TFT-дисплея. Для нормального обеспечения разрешения, например, дисплей 1024x768 должен физически располагать именно таким количеством пикселов.

Рис. 118. Сетка транзисторов в ЖК-дисплее

В ЖК-мониторах каждый пиксел расположен в фиксированной матрице и включается/выключается отдельно, поэтому не возникает никаких проблем со сведением лучей, в отличие от ЭЛТ-мониторов, в которых требуется безукоризненная работа электронных пушек. При этом ЖК-мониторы обеспечивают в разрешении, совпадающем с физическим разрешением матрицы, идеальную четкость изображения. Так, картинка 17-дюймового TFT-монитора в разрешении 1280x1024 по четкости превосходит изображение даже 19-дюймовых ЭЛТ-мониторов, для которых режим 1280x1024 считается оптимальным.

При работе с ЖК-монитором нагрузка на глаза существенно меньше из-за отсутствия мерцания. Коэффициент отражения света от поверхности ЖК-монитора в три и более раз меньше, чем от поверхности ЭЛТ с самым совершенным на сегодня антибликовым покрытием (Sony FD Trinitron, Mitsubishi Diamondtron NF). Поэтому бликов на экране ЖК-монитора в несколько раз меньше.

Если ЭЛТ-мониторы могут работать при нескольких разрешениях в полноэкранном режиме, то ЖК-мониторы могут работать только с одним разрешением. Меньшие разрешения возможны лишь при использовании части экрана. Так, например, на мониторе с разрешением 1024x768 при работе в разрешении 640x480 будет задействовано лишь 66% экрана. Применение же специальных функций «растягивания» изображения на весь экран (полноэкранный режим работы) приводит к существенному падению четкости и даже искажению изображения.

От стандартной видеокарты компьютера идет аналоговый видеосигнал, хорошо понятный ЭЛТ-мониторам, которые по своей сути являются аналоговыми устройствами. ЖК-мониторы принципиально являются цифровыми устройствами (дискретный набор пикселов, дискретное управление цветом и яркостью пиксела и т. д.). Поэтому, чтобы аналоговый сигнал стал понятен ЖК-монитору, необходимо преобразовать аналоговый сигнал в цифровой. Сначала видеокарта преобразовывает цифровой сигнал от компьютера в аналоговый, затем передает его монитору, который осуществляет обратное преобразование. При этом могут возникать различные нежелательные эффекты. Чтобы избежать этого, производители (сначала мониторов, а затем и видеокарт) стали выпускать устройства с двумя выходами — аналоговым и цифровым. Массовое производство видеокарт с цифровым выходом затруднялось отсутствием общепринятого стандарта на передачу цифрового видеосигнала. Однако теперь ситуация изменяется.

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

Особенностью ЖК-мониторов являются меньшие, чему ЭЛТ-мониторов, углы обзора по вертикали и горизонтали. Чем больше угол обзора, тем удобнее работать. Производители стараются их увеличить.

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

 

114.gif

118.gif

Изображение: 

25. Окно Color Settings

 

Окно Color Settings

Самый простой способ настройки цветопередачи — выбор параметров в диалоговом окне Color Settings (Настройки цветов), которое открывается командой Edit>Color Settings (Редактирование> Цветовые установки). Это окно допускает два набора параметров — обычный и расширенный. Расширенный набор предназначен для специалистов; чтобы перейти к нему, установите флажок Advanced Mode (Расширенный режим). Для типовых мониторов вполне годится обычный набор параметров. Далее мы рассмотрим только его.

Рис. 50. Окно Color Settings

Основные комбинации параметров уже предусмотрены. Их можно выбрать в раскрывающемся списке Settings (Установки). Если вы разрабатываете графику преимущественно для Web или для показа на экране, выберите значение Web Graphics Defaults. Если ваша задача — предпечатная подготовка изображений, или вы не можете сделать предпочтений в выборе цели, то используйте U.S. Prepress Defaults.

Группа Рабочее пространство (Working spaces)

Устанавливаемые по умолчанию значения параметров в группе Working spaces (Рабочее пространство) определяются выбором в списке Settings (Установки). Однако вы можете их изменить по своему усмотрению. Что такое рабочее пространство? Дело в том, что цветовые модели, кроме Lab, имеют разновидности, адаптированные к различным типам и моделям воспроизводящих устройств (мониторам и принтерам). Такие разновидности цветовых моделей называют рабочими цветовыми пространствами. При создании новых изображений, открытии графических файлов без внедренных цветовых профилей, а также при преобразовании изображений с несовпадающими цветовыми профилями Photoshop использует заданные в настройках рабочие пространства.

Раскрывающийся список RGB позволяет выбрать рабочее пространство соответствующего типа. Пространство RGB определяет цвета, видимые на экране монитора. Несмотря на то что ваш конкретный монитор отображает ограниченное множество цветов, вы можете работать в более широком цпатовом диапазоне, доступном на других мониторах. При подготовке графики для Web обычно используется пространство sRGB (standart RGB). Если вы занимаетесь графикой как для Web, так и для печати, то рекомендуется выбрать рабочее пространство Adobe RGB (1998). Чтобы увидеть, как изображение выглядит на различных типах мониторов, закройте окно настройки цветов и выберите цветовое пространство в меню View> Proof Setup (Вид>Установки Просмотра). Варианты Windows RGB и Macintosh RGB соответствуют мониторам соответственно IBM-совместимого компьютера и компьютера Macintosh. При выборе варианта Monitor RGB параметры рабочего пространства RGB отключаются и появляется возможность увидеть, как будет выглядеть изображение на мониторе без преобразования цветов.

Значения параметра из раскрывающегося списка CMYK соответствуют типу принтера, на котором вы собираетесь печатать изображение. Описание выбранного значения, если навести на него указатель мыши, приводится в нижней части окна настройки цветов. Этот параметр определяет, каким образом изображение приводится к цветовой модели CMYK при выполнении команды Image>Mode>CMYK Color (Изображение>Режим>СМУК Цвет), а также каким образом преобразуются цвета CMYK при отображении на RGB-мониторе. Кроме того, этот параметр контролирует параметры предварительного просмотра CMYK при выполнении команды View>ProofSetup>Working CMYK (Вид>Установки Просмотра>Рабочий CMYK).

Выбор в раскрывающемся списке Gray (Серый) определяет способ отображения на экране изображения в оттенках серого, созданного с помощью команды Image>Mode>Grayscale (Изображение>Режим>Черно-белый). Обычно выбирают значения Gray Gamma 2.2 для IBM-совместимых компьютеров и Gray Gamma 1.8 — для Macintosh.

В раскрывающемся списке Spot (Точка) можно выбрать различные значения типа Dot Gain (Растискивание точек). Растискивание точек — параметр, определяющий степень расплывания краски при печати. Величина 25% позволяет увидеть, как будет выглядеть изображение на стандартном мониторе IBM-совместимого компьютера. Значение выбирается исходя из требований к печати (обычно выбирают 20%).

Если графический файл имеет собственный цветовой профиль, то при открытии этого файла в Photoshop 6.0 будет использоваться именно этот профиль, независимо от параметров, установленных в окне настроек цвета. Например, если вы открыли изображение с рабочим пространством sRGB, то изменение рабочего пространства, скажем, на Apple RGB никак не отразится на внешнем виде изображения. Заметим, что в Photoshop 5x это не так. Если все же вам требуется изменить рабочее пространство, воспользуйтесь командой Image>Mode>Assign Profile (Изображение>Режим>Назначить профиль). Обратим внимание на то, что эта команда не изменяет значения пикселов в файле, а просто отображает их в новое цветовое пространство.

Чтобы можно было оперативно изменять изображение в соответствии с текущим (активным) рабочим пространством, выполните команду Image>Mode>Assign Profile (Изображение>Режим>Назначить профиль) и выберите переключатель Don't Color Manage This Document (He выполнять управления цветами в этом документе). Теперь изображение не будет привязано к своему цветовому профилю. В заголовке окна изображения появится символ #. Символ * свидетельствует о том, что изображение использует цветовое пространство, указанное в профиле.

Рис. 51. Окно Assign Profile

Если команда Assign Profile (Назначить профиль) не изменяет пикселы в файле, из-за чего их вид на экране изменяется, то команда Image>Mode>Convert to Profile (Изображение>Режим>Преобразовать к профилю), наоборот, изменяет пикселы так, чтобы их вид на экране не изменялся. В диалоговом окне Convert to Profile (Конвертировать в профиль) параметры из группы Conversion Options присутствуют и в окне Color Settings (Настройки цветов) при использовании расширенного режима. Это параметры для продвинутых специалистов, и мы их не рассматриваем. Выберите в раскрывающемся списке Profile (Профиль) цветовое пространство, к которому вы решили привести изображение, и щелкните на кнопке ОК. Выбор значений в этом списке позволяет переключать цветовые модели. Например, если вы откроете RGB-изображение и, выполнив команду Convert to Profile (Преобразовать к профилю), выберете цветовое пространство CMYK, то Photoshop изменит цвета и, кроме того, выполнит преобразование RGB-каналов в CMYK-каналы. Таким образом, по сравнению с командой Image>Mode>CMYK (Изображение>Режим>СМУК) данная команда позволяет переключать цветовые модели и выбирать цветовое пространство за один шаг.

Рис. 52. Convert to Profile

Группа Управление цветом (Color Management Policies)

Следующая группа параметров в окне настроек цвета — Color Management Policies (Управление цветом). Точнее, политики управления цветом. Эти параметры определяют, какие действия должен предпринимать Photoshop при открытии файлов без цветовых профилей или с профилями, не совпадающими с теми, которые были указаны с помощью параметров группы Working spaces (Рабочие пространства). Оптимальный выбор значений параметров в группе политик управления цветом снижает количество сообщений об ошибках и усиливает автоматизацию управления цветом. На наш взгляд, это не самая важная задача. Поэтому мы не будем подробно рассматривать эту группу.
Значения, выбираемые в трех раскрывающихся списках, определяют стандар-ные политики управления цветом, которые Photoshop будет применять в зависимости от состояния переключателей, расположенных ниже.

Раскрывающийся список RGB. При открытии RGB-изображения без внедренного профиля имеет смысл присвоить ему рабочий профиль RGB, например, Adobe RGB (1998), указанный в первом раскрывающемся списке из группы Working spaces (Рабочее пространство). Поэтому в раскрывающемся списке RGB целесообразно выбрать значение Convert to Working RGB (Преобразовать в Рабочий RGB). Можно сбросить переключатель Missing Profiles (Пропущенные профили). В этом случае, если профиль не очевиден, то Photoshop без вопросов назначит профиль Adobe RGB (1998). Если же изображение содержит профиль, тоего всегда можно изменить. Изображения, пред-чазначенные для Web, если содержат профиль, то это обычно профиль sRGB. Такие Изображения следует открывать с использованием рабочего пространства sRGB.

Раскрывающийся список CMYK. Как известно, CMYK-изображения предназначены, главным образом, для вывода на печать, хотя и не только. Некоторые Web-дизайнеры используют модель CMYK как основную по особым причинам. Обычно CMYK-изображения содержат внедренные профили. Если такое изображение вы получили извне, то оно, скорее всего, согласовано с определенным типом печатающего устройства. Вам же может потребоваться вывод на другой принтер или использование этого изображения в Web. Так что следует внимательно отнестись к возможным преобразованиям. Если выбрать в раскрывающемся списке CMYK значение Preserve Embedded Profiles (Сохранить вложенные профили), то при открытии файла Photoshop будет использовать внедренный профиль и игнорировать параметры CMYK, установленные в группе Working spaces (Рабочее пространство).

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

Profile Mismatches (Допуски профиля). Эти параметры указывают действия Photoshop при открытии файла и вставке изображения из буфера обмена в случае несовпадения профиля с рабочим пространством. Вы можете заставить Photoshop спросить разрешения на выполнение преобразований.
Missing Profiles (Пропущенные профили). Сбросьте этот переключатель, если не хотите получать вопросы от Photoshop при открытии файлов без внедренных профилей.

 

50.gif

Изображение: 

51.gif

Изображение: 

52.gif

Изображение: 

26. Утилита Adobe Gamma

 

Утилита Adobe Gamma

Для настройки монитора и создания его профиля служит специальная утилита Adobe Gamma, ярлык которой помещается в Control Panel (Панель управления) Windows при установке пакета Photoshop на компьютер. При вызове этой утилиты может появиться предупреждающее сообщение о том, что ваша видеокарта не поддерживает расширенное управление цветопередачей. Не обращайте на него внимания и продолжайте работу.

В стартовом окне утилиты можно задать один из двух режимов ее работы: Step By Step (Wizard) (Пошаговый режим (Мастер)) и Control Panel (Панель управления). Возможности этих режимов одинаковы, однако пошаговый режим предлагает вам оптимальную последовательность настройки параметров. Для начала рекомендуется именно этот режим. В режиме Control Panel настройка всех доступных параметров производится в одном окне.

Сначала нужно задать название профиля (группы настраиваемых параметров) в поле Description (Описание). Вы можете принять предлагаемое название профиля или ввести его с клавиатуры. Можно также загрузить профиль из файла с расширением ice (кнопка Load (Загрузить)).

Затем следует выбрать тип люминофора (раскрывающийся список Phosphors), применяемого в вашем мониторе. Если монитор использует электронно-лучевую трубку типа Trinitron или Diamond, то можно выбрать значение Trinitron. Можно также выбрать значение Custom и в открывшемся диалоговом окне ввести значения, указанные в документации к вашему монитору. Если эти сведения отсутствуют в документации, просто проигнорируйте этот этап.

Рис. 53. Стартовое окно утилиты Adobe Gamma, в котором можно выбрать режим ее использования

Следующий этап заключается в настройке баланса красного, зеленого и синего цветов (группа параметров Gamma). Для этого снимите флажок View Single Gamma Only (Показать только Gamma). В результате появятся три цветных квадрата. Переместите ползунки таким образом, чтобы в каждом Квадрате цвета центральной и периферийной областей совпадали. Это и есть цветовая калибровка монитора. Можно ограничиться только выбором значения параметра Gamma. Что это такое, более подробно рассматривается в главе 2. Здесь же скажем, что Gamma определяет яркость средних тонов изображения. В раскрывающемся списке можно выбрать стандартные значения для IBM-совместимых компьютеров и Macintosh, а также ввести конкретное значение по своему выбору.

Наконец, задайте цветовую температуру белой точки (White Point). О цветовой температуре подробно рассказано выше в этой главе. Обычно устанавливают среднее значение — 6500 градусов по шкале Кельвина, соответствующее обычному дневному свету. Чтобы определить наилучшее значение, щелкните на кнопке Measure (Измерить). На черном экране появятся три квадрата. Выберите наиболее нейтральный серый квадрат. Щелкните на квадрате слева или справа, чтобы сделать его цвет «более холодным» или «более теплым». Затем щелкните на среднем квадрате, чтобы вернуться к окну настроек. Обратите внимание, что, как мы уже говорили, более холодному цвету (голубоватому) соответствует более высокая цветовая температура и, наоборот, теплым оттенкам (желтоватым) соответствует более низкая температура. Напомним, что «холодный голубой» цвет получается при нагреве абсолютно черного тела до более высокой температуры, чем «теплый желтый».

По завершении настройки параметров утилита предложит вам ввести имя файла с расширением ice, в котором она сохранит параметры созданного профиля монитора. Вы можете указать любое подходящее имя, например, мой_ профиль.ice, но не меняйте предлагаемое место расположения файла. Это должна быть папка Windows\System\Color или Windows\System32\Color. Сохранив на диске создан ный профиль монитора, утилита автоматически сообщит о нем редактору Photoshop, даже если он уже запущен. Если созданный вами профиль никак не изменил цвета монитора, то использование утилиты все равно было полезным: вы информировали Photoshop об ограничениях вашего монитора.

Рис. 54. Окно Adobe Gamma в режиме Control Panel. В отличие от пошагового режима здесь все параметры расположены в одном окне

Рис. 55. Окно Adobe Gamma в пошаговом режиме на этапе настройки цветового баланса

 

53.gif

Изображение: 

54.gif

Изображение: 

55.gif

Изображение: 

27. Внедрение цветовых профилей

 

Внедрение цветовых профилей

Внедрение цветового профиля в файл означает добавление к нему соответствующих данных. Не все форматы файлов позволяют сохранять информацию о профиле. В Photoshop внедрение профилей возможно для следующих форматов файлов: PSD, TIFF, JPEG, EPS и PIXT. Два варианта формата DCS также позволяют сохранять профили. Однако они поддерживают только CMYK-изображения, поэтому приводят RGB-изображения к модели CMYK и, следовательно, сохраняют только профиль CMYK.

Чтобы внедрить цветовой профиль, выполните команду File>Save As (Файл> Сохранить как). Откроется диалоговое окно Save As (Сохранить как), в котором можно не только указать имя сохраняемого файла, его местоположение и формат, но и установить флажок ICC Profile (ICC Профиль) (Внедренный цветовой профиль). Если вы выберете формат файла, не поддерживающий профили (например, GIF, PNG, BMP и т. д.), то этот флажок будет недоступен. Для внедрения профиля в файл изображения установите флажок ICC Profile и щелкните на кнопке Save (Сохранить).

Заметим, что описанным выше способом внедряется профиль, определенный в диалоговом окне Color Settings (Настройки цветов) и не зависящий от устройства вывода. Профиль монитора не внедряется. Photoshop осуществляет внутреннее преобразование цветовой модели монитора в цветовую модель RGB, что позволяет ему взаимодействовать с различными моделями мониторов, используя одно и то же рабочее пространство RGB.

Рис. 56. Окно Save As

 

56.gif

Изображение: 

3. ГЛАВА 5. СКАНЕРЫ И СКАНИРОВАНИЕ

 

ГЛАВА 5. СКАНЕРЫ И СКАНИРОВАНИЕ

 

1. Сканеры и сканирование

 

Сканеры и сканирование

Исходный материал для создания графических композиций можно найти в уже существующих графических файлах. Однако при этом следует помнить, что некоторые из них являются предметом защиты авторских прав и, следовательно, их нельзя свободно копировать. Можно также создавать свои произведения «с чистого листа», используя средства рисования графических редакторов. Но тогда нужны как художественные способности, так и навыки рисования с помощью компьютера. Есть еще один эффективный способ создания компьютерной графики. Он основан на использовании сканеров или цифровых фотокамер. Хорошие фотокамеры довольно дороги, а сканеры успешно завоевывают рынок товаров массового потребления и вполне доступны. С помощью сканера можно ввести в компьютер картинки из газет, журналов, книг и фотографий как целиком, так и частями, которые послужат вам строительным материалом для будущих композиций. Вы можете создавать эскизы и заготовки сначала на бумаге, а затем вводить их в компьютер посредством сканера и дорабатывать с помощью графических редакторов. Наконец, сканер просто незаменим, когда необходимо превратить бумажный печатный документ в текстовый, чтобы можно было открыть его в текстовом (а не в графическом) редакторе (например, в MS Word) для просмотра и редактирования.

Сканер является устройством для ввода изображений в компьютер. Исходные изображения (оригиналы) обычно находятся на непрозрачных (бумага) или прозрачных (слайды, фотопленка) носителях. Обычно это — рисунки, фотографии, слайды и/или тексты, но могут быть и объемные предметы. По существу сканер является устройством, которое воспринимает оптическую информацию, доступную для нашего зрения, и сначала преобразует ее в электрическую форму, а затем приводит к цифровому виду, пригодному для ввода в компьютер. Таким образом, процесс сканирования оригинала состоит в его оцифровке. Оцифрованное изображение (на жаргоне — «скан») в дальнейшем может быть обработано в компьютере с помощью графического редактора (например, Photoshop), если это рисунок, или с помощью программы распознавания символов (например, FineReader), если это текст.

Существует множество моделей сканеров, отличающихся как техническими характеристиками и возможностями, так и ценой. Совсем не факт, что вам нужен самый могущественный и самый дорогой сканер. Новички, как правило, испытывают затруднения при выборе модели сканера и, вдальнейшем, при его использовании. Ошибка в выборе сканера выражается либо в том, что вы недоплатили чуть-чуть, либо слишком переплатили. Выбирая сканер, следует исходить из задач, которые вы собираетесь решать с его помощью. Сканеры могут использоваться для текущих задач офисов, домашнего коллекционирования фотографий и профессиональной работы с графикой. Для Web-дизайна, например, вы можете обходиться и самыми дешевыми сканерами. Но для работ, предназначенных, в конечном счете, для полиграфии, вам, возможно, потребуется более мощное устройство.

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

 

2. Как устроены и работают сканеры

 

Как устроены и работают сканеры

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

Планшетный сканер (Flatbed scanner) представляет собой прямоугольный пластмассовый корпус с крышкой. Под крышкой находится стеклянная поверхность, на которую помещается оригинал, предназначенный для сканирования. Через это стекло можно разглядеть кое-что из внутренностей сканера. В сканере имеется подвижная каретка, на которой установлены лампа подсветки и система зеркал. Каретка перемещается посредством так называемого шагового двигателя. Свет лампы отражается от оригинала и через систему зеркал и фокусирующих линз попадает на так называемую матрицу, состоящую из датчиков, вырабатывающих электрические сигналы, величина которых определяется интенсивностью падающего на них света. Эти датчики основаны на светочувствительных элементах, называемых приборами с зарядовой связью (ПЗС, Couple Charged Device — CCD). Точнее говоря, на поверхности ПЗС образуется электрический заряд, пропорциональный интенсивности падающего света. Далее нужно только преобразовать величину этого заряда в другую электрическую величину — напряжение. Несколько ПЗС располагаются рядом на одной линейке.

Электрический сигнал на выходе ПЗС является аналоговой величиной (т.е. ее изменение аналогично изменению входной величины — интенсивности света). Далее происходит преобразование аналогового сигнала в цифровую форму с последующей обработкой и передачей в компьютер для дальнейшего использования. Эту функцию выполняет специальное устройство, называемое аналого-цифровым преобразователем (АЦП, Analog-to-digital Converter — ADC). Таким образом, на каждом шаге перемещения каретки сканер считывает одну горизонтальную полоску оригинала, разбитую на дискретные элементы (пикселы), количество которых равно количеству ПЗС на линейке. Все отсканированное изображение состоит из нескольких таких полос.

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

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

Выше мы описали принципы построения и работы так называемых однопроходных сканеров, которые сканируют оригинал за один проход каретки. Однако еще встречаются, хотя больше и не выпускаются промышленностью, трехпроходные сканеры. Это сканеры с однорядной матрицей ПЗС. В них при каждом проходе каретки вдоль оригинала используется один из базовых цветных светофильтров: за каждый проход снимается информация по одному из трех цветовых каналов изображения. Эта технология также устарела.

Кроме CCD-сканеров, основанных на матрице ПЗС, имеются CIS-сканеры (Contact Image Sensor), в которых применяется фотоэлементная технология.

Светочувствительные матрицы, выполненные по этой технологии, воспринимают отраженный оригиналом спет непосредственно через стекло сканера без использования оптических систем фокусировки. Это позволило уменьшить размеры и вес планшетных сканеров более чем в два раза (до 3—4 кг). Однако такие сканеры хороши только для исключительно плоских оригиналов, плотно прилегающих к стеклянной поверхности рабочего поля. При этом качество получаемого изображения существенно зависит от наличия посторонних источников света (крышка CIS-сканера во время сканирования должна быть закрыта). В случае объемных оригиналов качество оставляет желать лучшего, в то время как ССО-сканеры дают неплохие результаты и для объемных (до нескольких см в глубину) предметов.

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

Слайд-адаптер (Transparency Media Adapter, TMA) — специальная приставка, позволяющая сканировать прозрачные оригиналы. Сканирование прозрачных материалов происходит с помощью проходящего, а не отраженного света. Иначе говоря, прозрачный оригинал должен находиться между источником света и светочувствительными элементами. Слайд-адаптер представляет собой навесной модуль, снабженный лампой, которая движется синхронно с кареткой сканера. Иногда просто равномерно освещают некоторый участок рабочего поля, чтобы не перемещать лампу. Таким образом, главная цель применения слайд-адаптера заключается в изменении положения источника света.

Если же у вас есть цифровая камера (цифровой фотоаппарат), то слайд-адаптер, скорее всего, вам не нужен.

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

Автоподатчик — устройство, подающее оригиналы в сканер, которое очень удобно использовать при потоковом сканировании однотипных изображений (когда не нужно часто перенастраивать сканер), например, текстов или чертежей приблизительно одинакового качества.

Кроме планшетных, есть и другие типы сканеров: ручные, листопротяжные, барабанные, слайдовые, для сканирования штрих-кодов, скоростные для потоковой работы с документами.

Ручной сканер (Handheld Scanner) — портативный сканер, в котором сканирование осуществляется путем его ручного перемещения по оригиналу. По принципу действия такой сканер аналогичен планшетному. Ширина области сканирования — не более 15см. Первые сканеры для широкого применения появились в продаже в 80-х годах XX века. Они были ручными и позволяли сканировать изображения в оттенках серого цвета. Теперь такие сканеры нелегко найти.

Листопротяжный или роликовый сканер (Sheetfed Scanner) — сканер, в котором оригинал протягивается мимо неподвижной линейной CCD- или CIS-матрицы, разновидность такого сканера — факс-аппарат.

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

Слайдовый сканер (Film-scanner) — разновидность планшетного сканера, предназначенная для сканирования прозрачных материалов (слайдов, негативных фотопленок, рентгеновских снимков и т. п.). Обычно размер таких оригиналов фиксирован. Заметим, что для некоторых планшетных сканеров предусмотрена специальная приставка (слайд-адаптер), предназначенная для сканирования прозрачных материалов (см. выше).

Сканер штрих-кодов (Bar-code Scanner) — сканер, предназначенный для сканирования товарных штрих-кодов. По принципу действия он сходен с ручным сканером и подключается к компьютеру, либо к специализированной торговой системе. При наличии соответствующего программного обеспечения распознавать штрих-коды может любой сканер.

Скоростной сканер для работы с документами (Document Scanner) — разновидность листопротяжного сканера, предназначенная для высокопроизводительного многостраничного ввода. Сканеры могут быть оборудованы приемными и выходными лотками объемом свыше 1000 листов и вводить информацию со скоростью свыше 100 листов в минуту. Некоторые модели этого класса обеспечивают двустороннее (дуплексное) сканирование, подсветку оригинала разными цветами для отсечки цветного фона, компенсацию неоднородности фона, имеют модули динамической обработки разнотипных оригиналов.

Итак, для дома и офиса лучше всего подходит планшетный сканер. Если вы хотите заниматься графическим дизайном, то лучше выбрать CCD-сканер (на основе ПЗС-матрицы), поскольку он позволяет сканировать и объемные предметы. Если вы собираетесь сканировать слайды и другие прозрачные материалы, то следует выбрать сканер, для которого предусмотрен слайд-адаптер. Обычно собственно сканер и подходящий к нему слайд-адаптер продаются отдельно. Если не получается приобрести слайд-адаптер одновременно со сканером, то при необходимости вы сможете сделать это позже. Необходимо также определить максимальные размеры сканируемых изображений. В настоящее время типовым является формат А4, соответствующий обычному листу писчей бумаги. Большинство бытовых сканеров ориентированы именно на этот формат. Для сканирования чертежей и другой конструкторской документации обычно требуется формат A3, соответствующий двум листам формата А4, соединенным по длинной стороне. В настоящее время цены однотипных сканеров для форматов А4 и A3 сближаются. Можно предположить, что оригиналы, не превышающие по размерам формат А4, будут лучше обрабатываться сканером, ориентированным на формат A3.

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

 

119.gif

Изображение: 

3. Подключение сканера к компьютеру

 

Подключение сканера к компьютеру

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

Одним из наиболее распространенных является SCSI-интерфейс. Он обеспечивается специальной платой (адаптером, картой), вставляемой в разъем (слот) расширения на материнской плате компьютера. К этой плате можно подключать не только сканер с SCSI-интерфейсом, но и другие устройства (например, жесткие диски). Так что, SCSI-интерфейс обеспечивается отдельным устройством, которое уже, возможно, имеется на вашем компьютере. Почти все планшетные сканеры с SCSI-интерфейсом комплектуются усеченной модификацией SCSI-платы, к которой можно подключить только сканер. Таким образом, если на вашем компьютере нет SCSI-адаптера, но есть свободный подходящий слот на материнской плате, то с подключением сканера не возникнет принципиальных проблем. SCSI-интерфейс надежен и обеспечивает быструю передачу данных. Однако может потребоваться установка платы. Для этого следует при выключенном питании компьютера снять кожух системного блока компьютера и установить в один из свободных и подходящих разъемов интерфейсную плату. Подробности вполне понятно описаны в руководстве к сканеру.

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

Если вам часто приходится перемещать сканер, подключая его то к одному, то к другому компьютеру, то описанные выше способы могут показаться неудобными: каждый раз необходимо выключить компьютер, снять крышку, вынуть или установить интерфейсную плату. С другой стороны, все эти хлопоты при соответствующей сноровке требуют всего лишь 5 - 10 минут.

Есть сканеры, подключаемые к USB-порту (к универсальной последовательной шине) компьютера. Это — наиболее удобный и быстрый интерфейс, не требующий установки платы в системный блок, а иногда даже выключения компьютера. USB-порт обеспечивает не только обмен данными между компьютером и подключенным к нему внешним устройством, но и питание этого устройства от системного блока питания. Однако это справедливо не для всех устройств. Некоторые из них снабжены своими блоками питания и тогда, как правило, при соединении их кабелем с компьютером последний приходится выключать. В любом случае перед подключением сканера к USB-порту следует узнать из прилагаемого руководства, как именно это делается. Кроме того, нужно иметь в виду, что USB-порты отсутствуют на старых моделях компьютеров (первых Pentium и более ранних).
Многие модели планшетных сканеров подключаются к параллельному порту (LPT) компьютера, к которому обычно подключается принтер. В этом случае сканер подключается через кабель непосредственно к LPT-порту, а принтер — к дополнительному разъему на корпусе сканера. Этот интерфейс медленнее, чем описанные выше. Для подключения сканера к LPT-порту не требуется снимать крышку системного блока, но выключать компьютер на время этой операции все же необходимо.

Вообще говоря, сканеры с любым из рассмотренных выше интерфейсов могут использоваться для работы с графикой. Однако мы отдаем предпочтение интерфейсам SCSI и USB, исходя из соображений надежности, быстродействия и удобства эксплуатации.

 

4. Основные характеристики оптико-электронной системы сканера

 

Основные характеристики оптико-электронной системы сканера

Рассмотрим основные характеристики оптико-электронной системы сканера: разрешение, глубину цвета, разрядность, оптическую плотность и область высокого разрешения.

 

5. Разрешение

 

Разрешение

Разрешение (Resolution) или разрешающая способность сканера — параметр, характеризующий максимальную точность или степень детальности представления оригинала в цифровом виде. Разрешение измеряется в пикселах на дюйм (pixels per inch, ppi). Нередко разрешение указывают в точках на дюйм (dots per inch, dpi), но эта единица измерения является традиционной для устройств вывода (принтеров). Говоря о разрешении, мы будем использовать ppi. Различают аппаратное (оптическое) и интерполяционное разрешение сканера.

Аппаратное (оптическое) разрешение

Аппаратное (оптическое) разрешение (Hardware/optical Resolution) непосредственно связано с плотностью размещения светочувствительных элементов в матрице сканера. Это — основной параметр сканера (точнее, его оптико-электронной системы). Обычно указывается разрешение по горизонтали и вертикали, например, 300x600 ppi. Следует ориентироваться на меньшую величину, т. е. на горизонтальное разрешение. Вертикальное разрешение, которое обычно вдвое больше горизонтального, получается в конечном счете интерполяцией (обработкой результатов непосредственного сканирования) и напрямую не связано с плотностью чувствительных элементов (это так называемое разрешение двойного шага). Чтобы увеличить разрешение сканера, нужно уменьшить размер светочувствительного элемента. Но с уменьшением размера теряется чувствительность элемента к свету и, как следствие, ухудшается соотношение сигнал/шум. Таким образом, повышение разрешения — нетривиальная техническая задача.

Интерполяционное разрешение

Интерполяционное разрешение (Interpolated Resolution) — разрешение изображения, полученного в результате обработки (интерполяции) отсканированного оригинала. Этот искусственный прием повышения разрешения обычно не приводит к увеличению качества изображения. Представьте себе, что реально отсканированные пикселы изображения раздвинуты, а в образовавшиеся промежутки вставлены «вычисленные» пикселы, похожие в каком-то смысле на своих соседей. Результат такой интерполяции зависит от ее алгоритма, но не от сканера. Однако эту операцию можно выполнить средствами графического редактора, например, Photoshop, причем даже лучше, чем собственным программным обеспечением сканера. Интерполяционное разрешение, как правило, в несколько раз больше аппаратного, но практически это ничего не означает, хотя может ввести в заблуждение покупателя. Значимым параметром является именно аппаратное (оптическое) разрешение.

В техническом паспорте сканера иногда указывается просто разрешение. В этом случае имеется в виду аппаратное (оптическое) разрешение. Нередко указываются и аппаратное, и интерполяционное разрешение, например, 600х 1200 (9600) ppi. Здесь 600 — аппаратное разрешение, а 9600 — интерполяционное.

Различимость линий

Различимость линий (Line detectability) — максимальное количество параллельных линий на дюйм, которые воспроизводятся с помощью сканера как раздельные линии (без слипаний). Этот параметр характеризует пригодность сканера для работы с чертежами и другими изображениями, содержащими много мелких деталей. Его значение измеряется в линиях на дюйм (lines per inch, Ipi).

Какое разрешение сканера следует выбрать

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

Вырабатывая требования к разрешению сканера, важно уяснить общий подход. Сканер является устройством, преобразующим оптическую информацию об оригинале в цифровую форму и, следовательно, осуществляющим ее дискретизацию. Наданном этапе рассмотрения кажется, что чем мельче дискретизация (больше разрешение), тем меньше потерь исходной информации. Однако результаты сканировании предназначены для отображения с помощью некоторого устройства вывода, например, монитора или принтера. Эти устройства имеют свою разрешающую способность. Наконец, глаз человека обладает способностью сглаживать изображения. Кроме того, печатные оригиналы, полученные типографским способом или посредством принтера, также имеют дискретную структуру (печатный растр), хотя это может быть и не заметно для невооруженного глаза. Такие оригиналы обладают собственным разрешением.
Итак, есть оригинал с собственным разрешением, сканер со своей разрешающей способностью и результат сканирования, качество которого должно быть как можно выше. Качество результирующего изображения зависит от установленного разрешения сканера, но до некоторого предела. Если установить разрешение сканера больше собственного разрешения оригинала, то от этого качество результата сканирования, вообще говоря, не улучшится. Мы не хотим сказать, что сканирование с более высоким, чем у оригинала, разрешением бесполезно. Есть ряд причин, когда это нужно делать (например, когда мы собираемся увеличивать изображение при выводе на монитор или принтер или когда надо избавиться от муара). Здесь мы обращаем внимание на то, что улучшение качества результирующего изображения за счет повышения разрешения сканера не беспредельно. Можно увеличивать разрешение сканирования, не добиваясь при этом улучшения качества результирующего изображения, но зато увеличивая его объем и время сканирования.

О выборе разрешения сканирования мы еще неоднократно будем говорить в данной главе. Разрешение сканера — это максимальное разрешение, которое можно установить при сканировании. Так какая же величина разрешения нам нужна? Ответ зависит от того, какие изображения вы собираетесь сканировать и на какие устройства выводить. Ниже мы приведем лишь ориентировочные значения.
Если вы собираетесь сканировать изображения для последующего вывода на экран монитора, то обычно достаточно разрешения 72—l00ppi. Для вывода на обычный офисный или домашний струйный принтер — 100-150 ppi, на высококачественный струйный принтер — от 300 ppi.

При сканировании текстов из газет, журналов и книг с целью последующей обработки программами оптического распознавания символов (OCR — Optical Character Recognition) обычно требуется разрешение 200-400 ppi. Для вывода на экран или принтер эта величину можно уменьшить в несколько раз.

Для любительских фотографий обычно требуется 100-300 ppi. Для иллюстраций из роскошных типографских альбомов и буклетов — 300-600ppi.

Если вы собираетесь увеличивать изображение для вывода на экран или принтер без потери качества (четкости), то разрешение сканирования следует установить с некоторым запасом, т. е. увеличить его в 1,5—2 раза по сравнению с приведенными выше значениями.

Рекламным агентствам, например, требуется высококачественное сканирование слайдов и бумажных оригиналов. При сканировании слайдов для вывода на печать в формате 10x15 см потребуется разрешение 1200 ppi, а в формате А4 - 2400 ppi.
Обобщая изложенное выше, можно сказать, что в большинстве случаев аппаратного разрешения сканера 300 ppi достаточно. Если же сканер имеет разрешение 600 ppi, то это очень хорошо.

 

6. Глубина цвета и разрядность

 

Глубина цвета и разрядность

Глубина цвета, как мы уже говорили в главе 1, определяется количеством цветов, которые могут быть переданы (представлены), или количеством разрядов (битов) цифрового кода, содержащим описание цвета одного пиксела. Одно с другим связано простой формулой:

Количество цветов = 2Количество бит

В сканере электрический аналоговый сигнал с матрицы светочувствительных элементов преобразуется в цифровой посредством аналого-цифрового преобразователя (АЦП). Цифровой сигнал, несущий информацию о цвете пикселов, характеризуется разрядностью, т. е. количеством двоичных разрядов (битов), которыми кодируется информация о цвете каждого пиксела. АЦП и качество светочувствительных элементов сканера определяют глубину цвета, которую он может обеспечить. В настоящее время все цветные планшетные сканеры для широкого применения обеспечивают как минимум 24-битную глубину цвета (8 бит на каждую из трех базовых составляющих цвета). В пересчете на количество цветов это 224 = 16 777 216, чего вполне достаточно. В то же время существуют сканеры с 30-битным и 36-битным представлением цвета (10 и 12 бит соответственно на каждую составляющую). Реально вы будете работать с 24-битным цветом, но при большей разрядности АЦП, имея избыточную информацию, можно производить цветовую коррекцию изображения в большем диапазоне без потери качества. Сканеры, имеющие большую глубину цвета (разрядность), позволяют сохранить больше оттенков и градаций цвета в темных тонах. Кроме того, младшие разряды выходного кода АЦП обычно флуктуируют (содержат ошибки преобразования). Чем большую разрядность имеет АЦП, тем меньше влияние ошибок преобразования на конечный результат.

 

7. Оптическая плотность

 

Оптическая плотность

Понятие оптической плотности (Optical Density) относится прежде всего к сканируемому оригиналу. Этот параметр характеризует способность оригинала поглощать свет; он обозначается как D или OD. Оптическая плотность вычисляется как десятичный логарифм отношения интенсивностей падающего и отраженного (в случае непрозрачных оригиналов) или проходящего (в случае прозрачных оригиналов) света. Минимальная оптическая плотность (Dmin) соответствует самому светлому (прозрачному) участку оригинала, а максимальная плотность (Dmax) соответствует самому темному (наименее прозрачному) участку. Диапазон возможных значений оптической плотности заключен между 0 (идеально белый или абсолютно прозрачный оригинал) и 4 (черный или абсолютно непрозрачный оригинал).

Типичные значения оптической плотности некоторых типов оригиналов представлены в следующей таблице:

Тип оригинала Оптическая плотность
Изображения на газетной бумаге 0,9
Изображения на мелованной бумаге (высококачественные полиграфические издания) 1,5-1,9
Фотографии любительского и коммерческого качества 2,3
Цветные слайды 2,7-3,0
Негативные пленки 2,8
Высококачественные профессиональные диапозитивы и слайды с двойной эмульсией 3,0-4,0

Динамический диапазон сканера определяется максимальным и минимальным значениями оптической плотности и характеризует его способность работать с различными типами оригиналов. Динамический диапазон сканера связан с его разрядностью (битовой глубиной цвета): чем выше разрядность, тем больше динамический диапазон и наоборот. Для многих планшетных сканеров, главным образом, предназначенных для офисных работ, этот параметр не указывается. В таких случаях считается, что значение оптической плотности приблизительно равно 2,5 (типовое значение для офисных 24-битных сканеров). Для 30-битного сканера этот параметр равен 2,6—3,0, а для 36-битного — от 3,0 и выше.

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

 

8. Область высокого разрешения

 

Область высокого разрешения

Некоторые планшетные сканеры могут использовать дополнительный объектив с большой степенью увеличения. Для этого случая в техническом паспорте указываются размеры части области рабочего поля сканера, в которой может осуществляться сканирование с повышенным в несколько раз разрешением. Эта область высокого разрешения (High Resolution Area, HRA) обычно намного меньше рабочего поля.

 

9. Программное обеспечение сканера

 

Программное обеспечение сканера

Программное обеспечение сканера состоит из двух частей: программного интерфейса и пакета прикладных графических программ. Программный интерфейс обеспечивает управление сканером, а также его связь с графическими программами сторонних производителей. Это так называемый TWAIN-модуль или драйвер сканера. Говорят, что TWAIN — аббревиатура Toolkit Without An Interesting Name (Инструменты без интересного имени). По существу, спецификация TWAIN является стандартом прикладного программного интерфейса периферийных устройств, в том числе и сканеров. С TWAIN должны быть совместимы все выпускаемые сканеры, цифровые фотокамеры и другие периферийные устройства ввода данных. Стандарт TWAIN поддерживают практически все графические программы. В состав Windows 98 и более поздних версий включен TWAIN-модуль. Однако все же рекомендуется устанавливать TWAIN-модуль, поставляемый вместе со сканером (также, как лучше устанавливать драйвер производителя устройства).

Подключив сканер к компьютеру и установив TWAIN-модуль, вы получаете возможность вызывать процедуру сканирования из графической программы, например, Photoshop, MS PhotoEditor, ACDSee, FineReader и многих других. В различных программах команды сканирования называются по-разному: Import>TWAIN, Acquire, Сканировать и т. п. В графическом редакторе Photoshop команда сканирования выбирается в меню File>Import (Файл>Импорт), в ACDSee — File>Acquire.

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

Кроме TWAIN-модуля в программное обеспечение сканера обычно входит какой-нибудь, обычно весьма скромный по возможностям, графический редактор и, возможно, программа оптического распознавания символов (OCR). Если у вас на компьютере уже установлены солидные программы, например, графический редактор Photoshop и система OCR FineReader, то дополнительные программные средства, поставляемые вместе со сканером, вам не нужны.

Заметим, что есть сканеры с собственным программным интерфейсом, отличным от TWAIN. В этом случае результат сканирования сохраняется в файле графического формата (например, TIFF), который затем можно открыть для просмотра и правки в графическом редакторе.

 

10. Сканирование

 

Сканирование

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

 

11. Общие рекомендации

 

Общие рекомендации

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

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

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

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

Со временем характеристики сканера могут ухудшаться. Прежде всего это связано с изменением параметров лампы: интенсивность, стабильность и спектральный состав света изменяются (так бывает и с обычными люминесцентными лампами). Иногда это обусловлено просто загрязнением поверхности лампы, но может быть вызвано и другими причинами (в частности, естественным старением). Кроме того, засоряется оптика (линзы, зеркала) и ПЗС. Именно поэтому нельзя допускать попадания пыли и влаги внутрь корпуса.. Если же это случилось, то в большинстве случаев дело можно поправить самостоятельно, сняв стеклянную панель рабочего поля и осторожно очистив от грязи и влаги внутренние части корпуса, лампы и зеркал. Однако касаться электронных элементов, особенно светочувствительных элементов, мы вам не советуем. Пусть это сделают специалисты ремонтной мастерской.

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

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

Лампа сканера после его включения выходит на требуемый режим постепенно. Поэтому необходимо подождать несколько минут, прежде чем начать сканирование. Если сканируемое изображение меньше рабочего поля сканера, то лучше его расположить посередине, а не на краю, около линеек. Именно в средней части рабочего поля оптико-электронные характеристики сканера наиболее близки к заявленным в паспорте. Это несколько затрудняет выравнивание оригинала, но во многих графических редакторах имеется возможность повернуть изображение на нужный угол. Программы распознавания символов (OCR) обычно это делают автоматически.

 

12. Настройка основных параметров сканирования

 

Настройка основных параметров сканирования

Рассмотрим основные параметры сканирования, которые можно настраивать с помощью графического интерфейса TWAIN-модуля. Для конкретности мы взяли в качестве примера интерфейс сканера MFS 1200SP фирмы Mustek. Это — однопроходный цветной планшетный сканер на основе ПЗС с оптическим разрешением 600 ppi и интерполяционным разрешением 9600 ppi, глубиной цвета 30 бит, подключаемый к компьютеру посредством SCSI-адаптера или собственной интерфейсной платы; формат А4; масса 1 кг. Этим сканером мы, авторы книги, с удовольствием пользуемся последние пять лет.

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

Рис. 120. Диалоговое окно сканера MFS 1200SP фирмы Mustek

В Photoshop сканер вызывается командой File>Import (Файл>Импорт)> Название_сканера. При этом открывается диалоговое окно сканера (интерфейс его TWAIN-модуля). Кроме того, возможно, сразу же будет открыто еще одно окно для предварительного просмотра изображения и выбора области сканирования.
Если оно не открывается автоматически, нажмите кнопку Prescan (Предварительное сканирование) в диалоговом окне сканера.

Итак, диалоговое окно сканера на экране монитора. Следовательно, сканер установлен на компьютере и имеет связь с графической прикладной программой. Теперь можно приступить к собственно сканированию. Откройте крышку сканера, положите на рабочее поле (стекло) оригинал (изображением вниз), закройте крышку и щелкните на кнопке Prescan в диалоговом окне. В результате в окне предварительного просмотра появится изображение оригинала, отсканированное с низким разрешением. Это — черновой эскиз оригинала. До окончательного сканирования еще дело не дошло. Теперь можно выделить область сканирования, т. е. участок оригинала, который вам нужен. Для этого с помощью мыши переместите и/или измените размеры рамки, которая видна на фоне эскиза. Для более точного позиционирования рамки можно использовать клавиши со стрелками при нажатой клавише <Shift>. Чтобы отсканировать указанную область оригинала при текущих значениях параметров, щелкните на кнопке Scan (Сканировать). В диалоговом окне сканера отображаются размеры изображения в выбранных единицах измерения (пикселах, см, мм или дюймах), а также в килобайтах. В результате отсканированное изображение будет загружено в новое окно графического редактора. Вы можете обработать его, если необходимо, а затем сохранить в файле графического формата . Однако перед сканированием обычно производят настройку параметров? чтобы получить результат с нужным качеством.

При настройке параметров чаще всего пытаются найти компромисс между качеством результирующего изображения (скана), его объемом и временем сканирования. Обычно улучшение качества сопряжено с увеличением объема занимаемой памяти и времени. Затраты времени становятся весьма заметными, если требуется отсканировать подряд много оригиналов, например, несколько десятков фотографий или страниц журнала. Сканирование с большим запасом разрешения приводит к большим затратам памяти и дискового пространства. Например, цветная фотография размером 4x6 дюймов (примерно 10x15 см) при сканировании с разрешением 600 ppi потребует более 25 Мбайт. Такие большие изображения медленно обрабатываются.

Можно выделить два основных подхода к выбору параметров сканирования. Первый состоит в том, что качество результата должно определяться в первую очередь характеристиками устройств и материалов вывода (монитор, принтеры различного типа, полиграфическая техника, печать на газетной или мелованной бумаге и т. п.). Согласно этому подходу, не стоит создавать изображение очень высокого качества, если его вывод будет производиться устройствами с низкими характеристиками («не в коня корм»). Однако при смене типа устройства вывода часто оказывается, что нужно заново сканировать изображение, но уже при других значениях параметров. Данный подход характерен для офисных работ, но нередко применяется и дизайнерами. Согласно второму подходу, при сканировании следует получить максимально возможную графическую информацию об оригинале, а только затем обработать ее в редакторе применительно к типу устройства вывода. Девиз этого подхода: «от того, что мы имеем, всегда можно отказаться». Этот подход применяют, когда заранее не известно, где и как будет использовано изображение. Он типичен, прежде всего, для дизайнеров.

 

120.gif

Изображение: 

13. Выбор режима сканирования

 

Выбор режима сканирования

Прежде всего необходимо выбрать режим сканирования (Scan Mode), соответствующий типу оригинала и/или желаемого результата. Как правило, можно выбрать следующие режимы:

  • Color (Цветной ). Цветное изображение, представленное в модели RGB
  • Gray или Grayscale (В оттенках серого). Изображения с плавными переходами оттенков серого цвета
  • Artline (Произвольные линии). Черно-белое изображение без полутонов
  • Halftone (Полутон). Черно-белое изображение, сформированное регулярно расположенными точками различных размеров или штрихами (печатный растр)

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

Характеристики режимов в приведенном выше списке служат, главным образом, в качестве ориентиров для новичков. Опытные сканировщики легко выбирают режим в зависимости от того, с чем имеют дело и что хотят получить. Но свой опыт они почерпнули из множества экспериментов. Мы вам советуем идти этим путем. Вот некоторые общие рекомендации.

Рис. 121. Изображение типа Artline

Рис. 122. Изображение типа Halftone

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

В большинстве практически всех наиболее интересных случаев мы имеем дело с цветными изображениями. Это могут быть фотографии, отдельные иллюстрации или целые страницы из журналов, книг и газет, содержащие, кроме картинок, тексты. В конце концов, всканер вы можете положить лист акварели, холсте масляной живописью или какой-нибудь не очень тяжелый предмет. Если вы хотите получить в результате сканирования цветное изображение, то, очевидно, следует использовать режим Color (Цветной). В этом режиме один пиксел изображения представляется в памяти компьютера посредством 24 бит (8 бит на каждую из трех базовых составляющих цвета).

Если вам нужно получить изображение в оттенках серого (полутоновое) из цветного оригинала, выберите режим Gray. А можно отсканировать его и в режиме Color, и затем в графическом редакторе преобразовать в полутоновое. В Photoshop для этого есть специальная команда Image>Mode>Black&White (Изображение>Режим>Черно-белый). Кроме того, для получения полутонового изображения из цветного можно просто выбрать один из его цветовых каналов, который наилучшим образом передает графическую информацию. Вообще говоря, результат будет отличаться от полученного с помощью команды Image>Mode>Black&White (Изображение>Режим>Черно-белый), но попробовать стоит. Более подробно об этом уже говорилось вВпрочем, сканирование в режиме Gray требует меньше памяти и происходит быстрее, чем в режиме Color.
Нецветные, но с плавными переходами оттенков серого, изображения следует сканировать в режиме Gray. Как правило, это черно-белые фотографии и подобные им нецветные иллюстрации из книг, журналов и газет. Нередко в этом режиме сканируют текстовые документы не очень хорошего качества, чтобы потом обработать их программой OCR. Если ваша программа OCR допускает (а скорее всего это именно так) сканирование текстов в режиме Gray, то выберите именно этот режим. Со временем вы научитесь более тонко настраивать режимы сканирования.

Черно-белые (двухцветные) изображения без полутоновых переходов обычно сканируются в режиме Artline. Типичными примерами таких изображений являются чертежи и схемы, в которых преобладают линии, а не области, заполненные цветом. В этом режиме часто сканируют четкие отпечатки текстовых документов, чтобы потом обработать их программой OCR. Некоторые системы OCR требуют, чтобы исходное изображение было отсканировано в режиме Artline, но к FineReader это не относится. Хотя в режиме Artline на представление одного пиксела отводится всего 1 бит, сканирование всего изображения в этом режиме обычно требует большого разрешения (около 400 ppi) и, таким образом, экономия на представлении пиксела нивелируется. Главным образом, именно поэтому вместо режима Artline часто используют Gray.

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

Несмотря на некоторое разнообразие режимов сканирования, на практике чаше используются два режима: Color и Gray. Новички, желающие побыстрее получить хороший результат, могут начать с использования только этих режимов. Затем, на досуге, можно попробовать поэкспериментировать и с другими режимами сканирования.

Если вы легко различаете цветные и полутоновые (в оттенках серого) оригиналы, то этого еще не достаточно. С точки зрения сканирования нужно уметь различать источники получения оригинала. Изображения, которые вы собираетесь сканировать, могут быть получены различными способами, которые приходится учитывать. Так, фотоснимки, распечатки со струйных и лазерных принтеров, рисунки кистью, карандашом, пером и т. п., объемные предметы — это одно. А вот иллюстрации из печатных изданий — это другое. Оригиналы, созданные типографским способом, имеют собственную периодическую структуру — так называемый печатный растр. Если даже он не заметен на оригинале невооруженным взглядом, то в результате сканирования может отчетливо проступать. Это — следствие оптического эффекта взаимодействия двух и более периодических структур (интерференции), называемое муаром. Новичков иногда обескураживает, что картинка на плохой бумаге сканируется лучше, чем отличный типографский оттиск на мелованной бумаге из шикарных изданий. Дело в том, что на плохой, рыхлой бумаге краска лучше расплывается, затушевывая растровую структуру изображения. Как говорят полиграфисты, на такой бумаге высока степень растискивания. Наоборот, на высококачественной, плотной бумаге растискивание ниже, и печатный растр, незаметный для глаза, оказывается достаточно выраженным, чтобы взаимодействовать с дискретным по своей сути процессом сканирования. В результате получается картинка с нанесенным на нее паразитным периодическим узором — муаром. Заметим, что в струйных принтерах применяется специальная технология внесения элементов случайности в печатный растр, чтобы исключить муар. Муар подавляют различными способами и, в первую очередь, выбором надлежащего разрешения сканирования. Подробнее об этом будет рассказано ниже.

 

121.gif

Изображение: 

122.gif

Изображение: 

14. Выбор разрешения сканирования

 

Выбор разрешения сканирования

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

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

Чем меньше разрешение, тем меньше объем и временные затраты на сканирование и наоборот. Однако с качеством результата дело обстоит сложнее. Здесь напрашивается аналогия с выбором рыболовной сети. Какую сеть выбрать — с мелкими или крупными ячейками, зависит от размеров рыбы, которую вы хотите поймать. Сканер — это устройство, извлекающее информацию, содержащуюся в изображении. Нельзя получить информации больше, чем ее было в оригинале, но ее описание можно сделать избыточным. Избыточные описания графической информации обычно выражаются в чрезмерно больших объемах соответствующих файлов. В идеале нам нужно настроить сканер так, чтобы извлечь из оригинала как можно больше графической информации, или, по крайней мере, не меньше, чем нужно.

Умение правильно выбирать разрешение сканирования приходит с опытом. Однако эксперименты можно упорядочить, чтобы опытность пришла побыстрее. Изображения для простоты можно разделить на два основных типа: фотографии и рисунки. Изображения типа фотографии (фотоснимки, живопись и т. п.) характеризуются большим количеством оттенков и плавностью их переходов, а рисунки (плакаты, чертежи, гравюры и т. п.) — относительно небольшим количеством оттенков, наличием контуров и повышенной контрастностью. Таким образом, в класс фотографий попадают не только фотоснимки, а к классу рисованной графики относятся не только изображения, созданные карандашом, кистью или пером. Иногда встречаются изображения, которые трудно с уверенностью отнести к тому или иному типу. В этом случае попробуйте и так, и эдак. Далее, возьмите несколько картинок каждого типа и отсканируйте их при различных разрешениях. Начните с минимального значения 72 ppi, увеличивая его с некоторым шагом до величины оптического разрешения сканера. В процессе эксперимента нужно зафиксировать две величины разрешения:

  • начиная с которой качество изображения становится приемлемым;
  • начиная с которой качество изображения практически не изменяется.

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

Устанавливая разрешение сканирования, следует также учитывать, будет ли изображение увеличено в размерах при показе его на экране монитора или при выводе на печать. С увеличением размеров (т. е. при растяжении) качество изображения, вообще говоря, может ухудшиться. На этот случай создают изображение с некоторым запасом разрешения. Так, если предполагается увеличивать картинку в два раза, то и разрешение должно быть в два раза больше, чем то, которое было достаточным для исходных размеров. Сдругой стороны, если предполагается выводить на монитор или печать уменьшенное изображение, то, возможно, разрешение следует соответственно уменьшить. Маленькие изображения должны иметь небольшое разрешение. Эта ситуация часто возникает в Web-дизайне, где одна и та же картинка часто представляется в двух вариантах: маленькая (thumbnail, миниатюра) — с низким разрешением, и большая — с высоким разрешением.

Если ваш компьютер обладает достаточно большой памятью и затраты времени на сканирование для вас не критичны, то можно рекомендовать установку разрешения, равного аппаратному (оптическому) разрешению сканера. Затем, если потребуется, разрешение полученного изображения можно уменьшить средствами графического редактора. В Photoshop для этого используется команда Image>Image Size (Изображение>Размер изображения). Однако увеличение разрешения средствами графического редактора не повышает качество изображения. При уменьшении разрешения (downsample) из изображения удаляются пикселы и, таким образом, уменьшается количество графической информации. При увеличении разрешения графический редактор добавляет пикселы, используя для вычисления их значений некоторый алгоритм интерполяции (учета значений соседних пикселов).

Рис. 123. Окно установки размеров и разрешения изображения в Photoshop

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

В следующей таблице приведены в качестве примера затраты памяти при сканировании изображения размером 4x4 дюйма (11x11 см) в различных режимах и при различных разрешениях.

Тип изображения Объем изображения при различных разрешениях
100 ppi 150 ppi 300 ppi 600 ppi
Color 469 Кбайт 1 Мбайт 4,12 Мбайт 16,5 Мбайт
Gray 156 Кбайт 352 Кбайт 1,37 Мбайт 5,5 Мбайт
Artline 19,5 Кбайт 44 Кбайт 175 Кбайт 703 Кбайт

В заключение разговора о разрешении сканирования напомним обстоятельства, которые приходится дополнительно учитывать при выборе разрешения. Во-первых, если отсканированное изображение предназначается для вывода на печать с помощью лазерного или струйного принтера, то устанавливаемое разрешение может быть в 3—4 раза меньше разрешения принтера. Это справедливо в первую очередь для цветных или полутоновых (в оттенках серого) изображений. Для изображений типа Artline или Halftone разрешение сканирования следует выбирать, по возможности, равным разрешению принтера. Например, если у вас обычный струйный принтер с разрешением 300 ppi, то. попробуйте сначала отсканировать изображение с разрешением 75 ppi. Если результат окажется неудовлетворительным, увеличьте разрешение сканирования в 2 раза. Во-вторых, разрешение часто приходится менять при сканировании изображений из высококачественных печатных изданий. Причина тому так называемый муар — эффект взаимодействия нескольких периодических структур (в данном случае, дискретных структур сканирования и печатного растра). Часто этот побочный оптический эффект устраняется выбором более высокого разрешения сканирования. Подавление муара более подробно будет рассмотрено ниже. В-третьих, при выборе начального и, при необходимости, последующих значений разрешения сканирования следует стремиться к тому, чтобы выбранное разрешение было кратно оптическому разрешению сканера, деленному на целую степень двойки:

Устанавливаемое разрешение = Оптическое разрешение : 2 i, где i = 0, 1,2, 3,...

Например, если оптическое разрешение сканера равно 600 ppi, то устанавливаемое разрешение сканирования должно быть как можно ближе к 600, 300, 150, 75 ppi. Такой выбор способствует достижению наибольшей четкости результата сканирования.

 

123.gif

Изображение: 

15. Тоновая коррекция изображения

 

Тоновая коррекция изображения

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

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

Рис. 124. Окно настройки тональных параметров сканера MFS I200SP фирмы Mustek

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

Следует иметь в виду, что выбранные значения параметров сканирования сохраняются до тех пор, пока вы их снова не измените. Чтобы восстановить значения параметров, принятые по умолчанию, нужно щелкнуть на кнопке Reset (Восстановить), а чтобы посмотреть на результаты выбора параметров в окне предварительного просмотра, щелкните на кнопке Preview (Предварительный просмотр).

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

 

124.gif

Изображение: 

16. Борьба с муаром

 

Борьба с муаром

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

Рис. 125. Модель, иллюстрирующая механизм возникновения муара

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

Рис. 126. Мелкая сетка на изображении, особенно на его светлых участках, — муар

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

Линеатура (пространственная частота — screen frequency) измеряется как количество линий на дюйм (lines per inch, Ipi). Это — характеристика, в первую очередь, печатающих устройств и, во вторую очередь, изображений, полученных на них. Газеты обычно имеют линеатуру 85 Ipi, полиграфическая печать высокого качества — 133 Ipi, высшего качества — 300 Ipi (вариантов линеатур немного).
До сканирования печатного оригинала полезно узнать его линеатуру и выбрать разрешение сканирования, немного (на 5-10%) отличающимся от нее. Однако на практике, если вы не знаете линеатуру отпечатка или не хотите тратить время на ее выяснение, выбирайте разрешение сканирования просто в 1,5—2 раза больше, чем предполагаемая линеатура. Например, при сканировании оригиналов газетного качества разрешение устанавливают 100-170ppi; при сканировании изображений высококачественной печати — более 200 ppi. Иногда советуют сканировать с максимальным (оптическим) разрешением сканера. Это вполне согласуется с общей идеей борьбы с муаром путем выбора подходящего разрешения. Кроме того, этот совет очень хорош в случае высококачественного типографского отпечатка. Следуя ему, вы одновременно добиваетесь максимальной четкости и избавляетесь от муара. Если и в этом случае муар не исчез, попытайтесь немного изменить (уменьшить) разрешение. Однако не следует забывать, что при выборе разрешения приходится учитывать и другие критерии (четкость, объем, время, необходимость увеличения).

Другой способ борьбы с муаром состоит в том, чтобы слегка, на 5-15 градусов, наклонить оригинал. Однако последующее его выравнивание средствами графического редактора может снова привести к появлению муара. Для некоторых картинок этот прием вполне приемлем.

В диалоговом окне программного обеспечения большинства сканеров имеется команда (фильтр), специально предназначенная для подавления муара. Она может называться по-разному: Descreen, Demoire pattern и т. п. Однако пользоваться ими следует осторожно, поскольку они уменьшают четкость изображения (смотрите, как бы с водой не выплеснуть и ребенка!). Впрочем, прием, основанный на размытии изображения и последующем восстановлении четкости в графическом редакторе, применяют довольно часто. В Photoshop для удаления муара сначала добавляют к изображению монохроматический шум (меню Filter), затем применяют гауссовское размытие (фильтр Gaussian Blur) и, наконец, восстанавливают четкость с помощью фильтра Sharpen или Unsharp Mask (Нечеткая маска).

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

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

 

125.gif

Изображение: 

126.gif

Изображение: 

17. Кольца Ньютона

 

Кольца Ньютона

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

 

18. Сканирование фотографий

 

Сканирование фотографий

На практике чаще всего сканируются фотографии. Здесь речь пойдет о сканировании фотоснимков, полученных с помощью обычных фотокамер и отпечатанных на фотобумаге. Обычный пользователь компьютера приобретает сканер в основном именно для этой цели. Цветные фотографии, полученные где-то в 70-х и 80-х годах прошлого века, быстро выцветают. Они не выдерживают никакого сравнения с фотоснимками начала XX века. У нас, например, есть великолепные экземпляры отпечатков образца 1905 года. Со временем они испытали лишь некоторые механические повреждения (царапины, перегибы бумаги), но оставшиеся фрагменты восхищают своей четкостью. Современные фотоотпечатки, возможно, сохранят графическую информацию 20—25 лет. Поэтому лучший способ надежно и надолго сохранить свой домашний фотоархив — отсканировать снимки и записать их на магнитных носителях или лазерных дисках.

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

Обычные любительские фотографии сканируются, как правило, при разрешении 75-150 ppi, если предполагается выводить их на экран монитора. Для вывода на печать разрешение следует устанавливать примерно равным разрешению принтера. Результат сканирования приходится немного обработать в графическом редакторе (отрегулировать яркость, контрастность, цветовой баланс и т. п.). Если мы собираемся отправить отсканированные фотоснимки по электронной почте тому, кто умеет работать с графикой, то чаше всего мы не делаем обработку, рассчитывая на то, что получатель это сделает, как ему надо. Таким образом, мы пересылаем ему исходную графическую информацию. В Web-дизайне, наоборот, требуется обработать результат сканирования так, чтобы он и выглядел надлежащим образом, и места на диске занимал как можно меньше (загружался в браузер быстрее).

Одна из основных проблем сканирования отпечатков на фотобумаге заключается в так называемых «провалах в тенях». Иначе говоря, сканер не в состоянии зафиксировать детали в темных участках изображения. Эта проблема возникает из-за недостаточного динамического диапазона оптической плотности недорогих офисных сканеров. Попробуйте отпечатать фотографии в более мягком проявителе или на менее контрастной бумаге. Если при этом снимок не потерял насыщенности черного цвета, а проработка деталей в тенях улучшилась, то вы на верном пути. Особую сложность представляет собой сканирование снимков, выполненных в так называемом низком ключе, когда основные полутоновые переходы сконцентрированы в области теней (темных участков). Именно такие фотографии, снятые ночью в свете вспышки или днем при неярком освещении, очень часто создаются как художественные произведения, а не как фотодокументы. Таким фото обычно отдается предпочтение в Web-дизайне. Возможно, в этом случае вам придётся выбирать одно из двух возможных решений:

  • печатать фотографии обычным образом, а затем повышать контрастность темных участков в графическом редакторе (инструменты Curves (Кривые) и Levels (Уровни) в Photoshop);
  • печатать фотографии светлей и мягче, чем обычно (этим мы переносим теневые участки в более благоприятный для сканера диапазон), а затем повысить общую контрастность снимка в графическом редакторе (инструменты Levels (Уровни) и Brightness/Contrast (Яркость/Контрастность) в Photoshop).

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

 

19. Сканирование объемных предметов

 

Сканирование объемных предметов

Богатым источником исходного материала для художественных композиций является сканирование объемных предметов. Но не все сканеры могут это делать с приемлемым качеством. CCD-сканерам (т. е. сканерам на основе ПЗС-матрицы) это доступно, а CIS-сканерам — нет. Хотя глубина (третье измерение) объемных оригиналов, достижимая сканером, не превышает нескольких сантиметров, получаемый эффект может быть очень интересным. Однако сразу же предупредим, что попытка отсканировать свое лицо приведет, скорее всего, к ожогу глаз и потере зрения.

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

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

На следующих рисунках приведены примеры пограничных случаев сканирования объемных предметов — модели паровоза и часов. Изображение часов не обрабатывалось в графическом редакторе. А вот изображение паровоза пришлось, как говорят, «вытягивать» в Photoshop, поскольку оригинал — из черной матовой пластмассы, плохо отражающей свет. Конечно, для улучшения отражательных свойств можно было бы смочить паровоз растительным или машинным маслом, но мы не стали, поскольку он нам еще нужен, и, кроме того, мы не хотели ненароком испачкать стекло рабочего поля сканера.

Рис. 127. Модель пульта из черной пластмассы — трудный для сканера оригинал из-за слабых отражательных свойств

Рис. 128. Часы в блестящем металлическом корпусе. Блики вполне приемлемы

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

Рис. 129. Сетевая карта, отсканированная при разрешении 300ppi без специальной настройки сканера и обработки изображения в графическом редакторе

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

 

127.gif

Изображение: 

128.gif

Изображение: 

129.gif

Изображение: 

20. Сканирование текстов

 

Сканирование текстов

На практике часто приходиться вводить в компьютер информацию из текстовых документов, например, из книг; журналов и газет. Чтобы ускорить этот процесс, применяют сканеры. Однако результат сканирования, вообще говоря, есть просто графическое изображение (рисунок), хотя и содержащее буквы (нарисованные). Если вы сохранили его в файле графического формата, то сможете открыть потом лишь в редакторе или программе просмотра графики. Хотя редактировать тексты в графическом редакторе в принципе возможно, на практике, конечно, никто этого не делает (кроме того, изображение текста с точки зрения компьютера текстом не является, редактировать его придется как рисунок). К тому же хранить текстовую информацию в файлах графического формата — верх расточительности в использовании дискового пространства. Текстовая информация вместе с иллюстративной графикой сканируется, чтобы затем передать ее программе оптического распознавания символов (OCR), например, FineReader или CunieForm.

Рис. 130. Главное окно программы FineReader

С помошью программы OCR результат сканирования будет разделен на текст и рисунки (если они есть) и может быть сохранен в файле формата, доступного текстовым или табличным редакторам, например, MS Word или MS Excel.

Вы можете сначала отсканировать текстовый документ и сохранить результат в файле графического формата, например, JPEG или TIFF, а затем открыть его в программе OCR и выполнить распознавание (recognize) символов. Но можно поступить и иначе: выполнить сканирование прямо из программы OCR, а затем произвести распознавание. Мы предпочитаем именно этот путь. Кстати, многие программы OCR позволяют произвести сканирование и распознавание с помошью одной команды. Однако в случае, когда вы сканируете много фрагментов, а распознаете лишь некоторые из них, лучше разъединить эти процессы.

Современные программы OCR справляются с ситуацией, когда оригинал положен на рабочее поле сканера не очень прямо. Это удобно, поскольку можно просто небрежно бросать оригиналы на рабочее поле, не слишком заботясь об их выравнивании. Однако не советуем вам злоупотреблять этой возможностью.
Некоторые программы OCR требуют, чтобы текстовый документ был отсканирован в режиме Artline. Солидные и современные программы OCR не обременят вас этим ограничением.

Если оригинал представляет собой просто текст без графики, то сканировать его нужно в режимах Artline или Gray. Режим Artline обычно применяют к высококачественным отпечаткам текста без иллюстраций, полученным, например, с помошью лазерного или струйного принтера. Разрешение сканирования выбирается в зависимости от размера шрифта. Для шрифтов размеров 12 пт и менее разрешение в режиме Artline устанавливают около 400—450 ppi. Для более крупных шрифтов разрешение можно уменьшить до 200-300 ppi. В режиме Gray на один пиксел требуется в 8 раз больше памяти, чем в режиме Artline . Однако при сканировании текстов в этом режиме можно устанавливать меньшее разрешение, чем в режиме Artline , — примерно 150-300 ppi в зависимости от размера и гарнитуры шрифта. Если объем занимаемой памяти и время сканирования для вас не критичны, то советуем выбирать режим Gray. При сканировании документов, содержащих, кроме текста, картинки, следует выбирать режим Gray (или Color, если требуется получить цветные изображения картинок). В этих режимах сканирования удается получить больше графической информации об оригинале, которая важна для высококачественного распознавания символов.

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

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

Если вам предстоит сканировать множество страниц с текстовой информацией примерно одинакового качества, то целесообразно сначала не спеша правильно подобрать параметры сканирования. Это можно сделать с помощью экспериментов над небольшим фрагментом документа. Подобрав оптимальные значения параметров, можно затем поставить сканирование и распознавание на поток. Программное обеспечение сканеров и OCR обычно имеют специальную команду, задающую пакетный режим работы (Buth mode).

 

130.gif

Изображение: 

4. ГЛАВА 6. ИНСТРУМЕНТАРИЙ PHOTOSHOP

 

ГЛАВА 6. ИНСТРУМЕНТАРИЙ PHOTOSHOP

 

1. Интрументарий Photoshop

 

Интрументарий Photoshop

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

Сначала необходимо договориться, что все изложение основывается преимущественно на версии графического редактора Adobe Photoshop 6.0, некоторые особенности Photoshop 7.0 мы оговорим специально. Существенные изменения в Photoshop произошли при переходе от версии 4 к 5. В последующих версиях вводились некоторые усовершенствования, но концепция оставалась практически неизменной. Так что, если вы хорошо знакомы с версией 5.0, то перейти к следующей версии для вас не составит особого труда.

Внимание! При описании инструментов Photoshop, если специально не оговорено, имеется в виду версия 6.0. Особенности Photoshop 7.0 указаны специально.

Одна из досадных проблем Photoshop 6.0 заключается в том, что он не поддерживает кириллические шрифты. Но исправить положение можно с помощью редактора реестра Windows, т. е. файла regedit.exe. Для этого щелкните на кнопке Start (Пуск) на панели задач и в раскрывшемся меню выберите пункт Run (Выполнить), затем в открывшемся окне введите regedit, после чего щелкните на кнопке ОК. В окне редактора реестра откройте раздел:

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Nls\Codepage

В этом разделе измените значение параметра 1252, а именно: значение ср_1252.nls замените на ср_1251 .nls. По завершении операции перезагрузите компьютер. В результате все шрифты должны начать работать нормально. Правда, останется еще одна неприятность: нельзя установить размер шрифта путем выбора в раскрывающемся списке. Придется вводить его с клавиатуры.

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

Итак, как только мы загружаем графический редактор Photoshop, на экране открывается его рабочий стол — графический интерфейс, который делает работу в редакторе простой и удобной. Рабочий стол содержит панели, палитры и собственно рабочую область — то место, где размещается текущий документ (графическое изображение). При этом новый (пустой) документ автоматически не создается. Если вам требуется начать работу с нуля, то создайте новый документ с помощью команды File>New (Файл>Новый). Чаще открывают уже созданный документ, поскольку Photoshop в основном используется для редактирования, а не создания изображения. Вместе с тем, вы можете нарисовать картинку вручную на «чистом листе». Панели бывает стационарными (например, строка меню, панель параметров) и плавающими, т. е. их местоположение можно менять по своему усмотрению (например, панель инструментов, палитры).

Рис.131. Рабочий стол Photoshop

Самая верхняя строка под заголовком в окне редактора содержит меню, которое обеспечивает доступ к командам. Чуть ниже расположена панель параметров. Она непосредственно связана с выбранным инструментом и демонстрирует именно его параметры. Эти параметры можно изменять по своему усмотрению. Также на этой панели находится и панель присоединения (справа). К ней можно присоединять наиболее часто используемые палитры. Самая нижняя строка окна называется строкой состояния Photoshop. Здесь указываются активные (выбранные) инструмент и изображение. Слева расположено поле масштаба активного изображения. Рядом с ним — поле информации об объеме памяти, занимаемой активным изображением. Эти панели являются основными, они всегда присутствуют на рабочем столе.

Другой панелью, необходимой для работы в этом редакторе, является панель инструментов (ToolBox). Она располагается непосредственно на рабочем столе, обычно у левой его границы, и содержит кнопки с значками всех инструментов. Эти инструменты разделены на группы. Некоторые инструменты имеют целые семейства подобных себе инструментов, называемых модификаторами. Инструмент выбирается простым щелчком кнопкой мыши на соответствующем значке. Кнопка с значком активного инструмента «утоплена» (выглядит светлее остальных). Чтобы выбрать модификатор из семейства, который не виден сразу, надо нажать левую кнопку мыши на нужном инструменте и, удерживая ее, выбрать необходимый модификатор в открывшемся списке инструментов. Кроме того, любой инструмент можно активизировать, нажав соответствующую «быструю клавишу» (ниже при описании инструмента указывается в скобках около названия инструмента; на рисунке показана рядом с названием инструмента, без скобок). В этом случае кнопка инструмента может и не появиться на основной панели инструментов. Рассмотрим несколько подробнее инструменты этой панели.

Рис. 132. Панель инструментов. Некоторые инструменты образуют семейства подобных инструментов

 

131.gif

Изображение: 

132.gif

Изображение: 

2. Иструменты выделения

 

Инструменты выделения

В верхнем левом углу панели инструментов расположено несколько инструментов выделения.

Rectangular Marquee (<M>) («Прямоугольное выделение»). Как следует из названия инструмента, он предназначен для выделения прямоугольных областей изображения. Для выделения области при выбранном инструменте нажимаем левую кнопку мыши в одном углу изображения и, удерживая ее, перетаскиваем указатель мыши по диагонали прямоугольника в противоположный угол. У выделенной области появляется мерцающая пунктирная граница. Если вместе при работе с данным инструментом удерживать клавишу <Shift> нажатой, то выделение будет иметь форму квадрата. Если одно выделение уже сделано, то, удерживая туже клавишу и сделав новое выделение, можно добавить его к предыдущему. То есть выделенных областей будет уже две. Та же манипуляция, но с использованием нажатой клавиши <Alt>, позволяет, наоборот, удалить изображение из области выделения.

В рассматриваемом семействе инструментов также имеются 2 следующих инструмента.

Elliptical Marquee («Овальное выделение»)(<М>). Выделяет область в виде овала (эллипса).

Рис. 133. Пример использования инструмента Rectangular Marquee принажатой клавише <Shift>

Single-row Marquee («Одиночная строка») и Single-column Marquee («Одиночный столбец»). Выделяют область изображения в виде одной строки или одного столбца толщиной в 1 пиксел, проходящих по всему изображению.

Кроме вышеописанного семейства, к инструментам выделения относятся следующие.

Crop («Кадрирование») (<С>). Ограничивает часть изображения прямоугольной рамкой. Размер этой рамки можно изменять, меняя положение маркеров на рамке. Перетаскивание вне рамки приводит к вращению всей рамки.
Lasso («Лассо») (<L>). Позволяет выделять область изображения произвольной формы. В это семейство также входят два следующих инструмента.
Polygonal Lasso («Многоугольное лассо»). Выделяет область в виде многоугольника.
Magnetic Lasso («Магнитное лассо»). Контур выделения автоматически привязывается к краю изображения переднего плана.

Рис. 134. Пример использования Magnetic Lasso

Magic wand («Волшебная палочка») (<W>). Выделяет непрерывную область пикселов одного цвета.
Это все инструменты выделения. Но в эту же группу не случайно попал следующий инструмент:
Move («Перемещение») (<V>). Перемещает выделенную область в нужное место изображения.
Slice («Ломтик») (<К>). Используется при создании рисунков для Web. Рисунок разделяется на регулируемые вырезки прямоугольной формы (ломтики). К ним можно привязать необходимые функции — ссылки, анимацию и т. д. При нажатии клавиши <Ctrl> во время использования данного инструмента, он преобразуется в инструмент Slice Select («Выделение ломтика»).
Slice Select («Выделение ломтика»). Позволяет переопределить ломтики, неправильно созданные инструментом Slice.

 

133.gif

Изображение: 

134.gif

Изображение: 

3. Инструменты рисования и закрашивания ISO

 

Инструменты рисования и закрашивания

Airbrush («Аэрограф») (<J>). Имитирует работу обычного аэрографа — рисует, «распыляя краску по холсту». Действие инструмента состоит в формировании линии цвета переднего плана вдоль траектории перемещения указателя по области документа при нажатой кнопке мыши. Чем медленнее перемещается указатель, тем более насыщенной и толстой будет линия. Если одновременно с рисованием удерживать нажатой клавишу <Shift>, то можно рисовать ровные горизонтальные или вертикальные линии. Предусмотрена регулировка уровня прозрачности создаваемого изображения. Профиль аэрографа также можно менять, выбирая в имеющейся библиотеке профилей. Данный инструмент хорошо использовать для подсветки или наложения тени.

Рис. 135. Примеры использования инструмента Airbrush с разными профилями и цветами

Рис. 136. Панель параметров инструмента Airbrush

Все параметры для данного инструмента, как и для остальных, можно настроить с помощью панели параметров. Слева на этой панели есть значок выбранного инструмента. При щелчке на ней появляется меню из двух команд: Reset Tool (Восстановить инструмент) и Reset All Tools (Восстановить все инструменты). Результат этих команд в принципе аналогичен — происходит сброс установок параметров одного или всех инструментов в значения, принятые по умолчанию.
Правее расположен параметр Brush, который демонстрирует выбранный профиль инструмента. Щелкнув на профиле, можно из предложенной библиотеки выбрать новый профиль.


Рис. 137. Библиотеки профилей

Правее расположен раскрывающийся список для выбора значения параметра Mode (Режим), который устанавливает режим работы инструмента. Наиболее популярный режим — Normal, он же установлен по умолчанию.

Раскрывающийся список Pressure позволяет выбрать значение параметра, который характеризует прозрачность инструмента.
Paintbrush («Кисть») (<В>). Позволяет рисовать мягкие линии цвета переднего плана, незазубренные, похожие на мазки кистью, но более четкие, чем линии аэрографа.

Рис. 138. Примеры использования инструмента Paintbrush с различными параметрами

Толщина и размытость краев линии определяются выбранным профилем кисти, при этом цветовая насыщенность линии не зависит от скорости перемещения инструмента по области рисунка (как при работе с аэрографом). Все параметры аналогичны описанным выше для аэрографа. Однако прозрачность линии здесь задается процентным значением параметра Opacity. А установка параметра Wet Edges позволяет рисовать линию смешанного цвета (переднего и заднего плана) и имеющим окантовку основного цвета.

Pencil («Карандаш») (<В>). Имитирует след от обычного карандаша. Толщина линии определяется выбранным профилем, размытость линии отсутствует (в отличие от двух предыдущих инструментов). Возможна регулировка прозрачности линии, аналогично инструменту Paintbrush.

Рис. 139. Треугольник нарисован инструментом Pencil при нажатой клавише <Shift>

Clone Stamp («Штамп клонирования») (<S>). Копирует одну часть изображения в другое место документа. Сначала необходимо задать место, откуда будут браться «клоны». Для этого щелкните в выбранном месте, удерживая клавишу <AIt> нажатой. Как только нажали клавишу <Alt>, в этом месте появится значок инструмента «штампа». Затем переведите указатель мыши в то место, куда требуется поместить копию. Теперь у нас два указателя: один, в виде крестика, будет перемешаться по месту, с которого копируем (параллельно второму, которым мы будем управлять), а второй, в виде кружка, — там, куда копируем.

Этот инструмент очень удобно применять, когда необходимо подправить некоторые небольшие элементы изображения, имеющие сложный рисунок или фактуру.
Пример использования инструмента Clone Stamp. Это не близнецы. Один из них (левый) — клон!

Pattern Stamp («Штамп по образцу»). Еще один инструмент из семейства штампов. Он позволяет создавать мозаичный узор на основе заранее заданного шаблона. Шаблон задается командой Edit>Define Pattern (Редактирование>Определить образец).
History Brush («Кисть событий») (<Y>) иногда также называется «Исторической кистью». Она позволяет с легкостью вернуть в прежнее (на момент последнего сохранения) состояние выбранный участок изображения. Удобно применять этот инструмент в случае, когда какой-нибудь эффект (фильтр, например) нужно применить не ко всему изображению, а, например, только к фону.

Рис. 141. Здесь несколько раз применили фильтр (команда Filter>Wind) с разными параметрами, а затем к самолету применили инструмент History Brush. Таким образом, самолет сохранил свое первозданное состояние, в то время как фон существенно изменился

В параметрах инструмента предусмотрена регулировка прозрачности (параметр Opacity). Значение этого параметра лучше уменьшать при восстановлении мелких фрагментов изображения, либо при тонкой работе на границе фрагментов. Работа данного инструмента непосредственно связана с палитрой History (События). Именно здесь фиксируются все выполненные действия в процессе работы с данным документом. Более подробно о ее особенностях будет сказано в разделе, посвященном палитрам.
Art History Brush («Художественная кисть событий»). Еще один инструмент из семейства «исторических кистей». В принципе, он аналогичен предыдущему (History Brush) — восстанавливает пикселы предыдущего состояния фрагмента изображения. Однако он имеет множество разнообразных стилей, которые позволяют добиваться весьма интересных эффектов. Чаще всего этот инструмент используют для создания так называемой импрессионистской графики.

Рис. 142. Это — фотоснимок хорошего качества

Рис. 143. А это изображение создано из той же фотографии инструментом Art History Brush в стиле Thight Long

Все параметры, как обычно, устанавливаются на панели параметров.

Рис. 144. Панель параметров для инструмента Art History Brush

Кроме традиционных для многих инструментов параметров Brush (Профиль кисти), Mode (Режим) и Opacity (Прозрачность), здесь есть еще четыре оригинальных параметра, значения которых выбираются в раскрывающихся списках:

  • Stile (Стиль) — задает тип пучков мазков, которыми производится эффект. В сочетании с оптимально подобранными размерами и типами кистей, рисование разными стилями приводит к получению удивительных результатов.
  • Fidelity (Точность) — цвет пучков данной кисти. Основывается на исходном цвете данной точки зображения. Изменение этого параметра приводит к отклонению цвета от исходного.
  • Area (Область) — определяет область изображения, покрываемую кистью за одно применение. Большие значения соответствуют большим мазкам.
  • Spacing (Интервал) — ограничивает область рисования инструментом Art History Brush.

Следующее семейство данной группы инструментов можно обобщенно назвать «Ластики».
Eraser («Старатель») (<Е>). Обычный ластик. Его применение приводит либо к окрашиванию в цвет фона, либо к стиранию рисунка активного слоя так, что становится виден нижний слой. Применение данного инструмента с нажатой клавишей <Alt> активизирует «Волшебный ластик», который может вернуть стертое изображение.
Background Eraser («Стиратель фона»). Позволяет удалять фон рисунка, бережно относясь к границам изображения.

Рис. 145. Применение инструмента Eraser стирает верхний слой рисунка или закрашивает его цветом фона

Рис. 146. На этом рисунке инструментом Background Eraser мы удалили старый фон, оставив только изображение кошки. Теперь его можно использовать отдельно, например, вставив в другой рисунок или на Web-страницу

Magic Eraser («Волшебный ластик»). Относится к тому же типу инструментов, что и Magic Wand («Волшебная палочка»). После щелчка на рисунке удаляются области, залитые одним цветом (или подобными цветами). Принцип его действия отличается от принципадействия предыдущего инструмента тем, что по щелчку удаляется сразу вся окрашенная одним цветом область (т. е. возить инструментом по изображению не требуется).
Healing Brush («Лечащая книга») и Patch («Вставка, заплата»). Эти инструменты появились в Photoshop 7.0, они являются модификаторами одного и того же инструмента. Принцип действия инструмента Healing Brush аналогичен принципу действия инструмента Clone Stamp. Он применяется при ретуши изображений, удалении дефектов. В отличие от Clone Stamp, при «пересадке» пикселов учитываются текстура, освещение и затемнение корректируемой области. В результате, пикселы переносятся на новое место таким образом, что «швы» не образуются. Инструмент Patch тоже учитывает освещение и текстуру области при клонировании, но позволяет сначала выделить область-донор для «трансплантации», а затем — область-получатель и нажатием одной кнопки осуществить клонирование.

 

135.gif

Изображение: 

137.gif

Изображение: 

138.gif

Изображение: 

139.gif

Изображение: 

141.gif

Изображение: 

142.gif

Изображение: 

143.gif

Изображение: 

145.gif

Изображение: 

146.gif

Изображение: 

4. Инструменты заливки

 

Инструменты заливки

В Photoshop предусмотрено два инструмента заливки: Paint Bucket (Заливка) и Gradient (Градиент). Эти инструменты призваны выполнять заливки трех типов:

  • равномерная — раскраска области заливки одним цветом;
  • шаблонная — заполнение области заливки мозаичным узором, составленным из элементов выбранного шаблона;
  • градиентная — заливка плавным переходом цвета (градиентом), по заданному правилу.

Paint Bucket («Заливка; Ковш») (<G>) — щелчок этим инструментом приводит к заливке однородной области сплошным цветом переднего плана, или заранее заданным узором (т. е. равномерная и шаблонная заливка). Все параметры данного инструмента устанавливаются на панели параметров.

Рис. 147. Панель параметров для инструмента Paint Bucket

Fill (Заливка) — в этом раскрывающемся списке можно выбрать тип заливки: цветом переднего плана (Foreground) и шаблоном (Pattern). Если выбран именно этот способ заливки (Шаблонный), то тогда становится активным следующий параметр: Pattern. В этом меню можно выбрать шаблон, который предлагается по умолчанию редактором, либо созданный самим. Этот узор можно задать командой меню Edit>Define Pattern (Редактирование>Определитьузор).

Рис. 148. Заливка шаблоном (Pattern)

Рис. 149. Заливка цветом переднего плана (Foreground)

Кроме всего прочего, для данного инструмента можно задать режим смешения цветов (Mode), уровень непрозрачности (Opacity) и т.д.
Gradient («Градиент») (<G>). Заливает выделенную область плавным переходом цветов, который обычно и называется градиентом. Плавный переход цветов генерируется автоматически редактором, необходимо задать только крайние (ключевые) цвета. Эти цвета устанавливаются как цвет переднего плана и цвет фона.

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

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

Рис. 150. Здесь мы использовали инструмент Gradient, протянув его из левого верхнего угла в правый нижний

Чтобы успешно пользоваться инструментом Gradient, необходимо освоить панель его параметров. Она очень похожа на аналогичные панели для других инструментов заливки.

Рис. 151. Панель параметров для инструмента Gradient

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

Рис. 152. Вид градиента (поле просмотра) — здесь отображается выбранный тип градиента цветов. Если щелкнуть по самому полю вида градиента, то откроется окно редактирования вида градиента (Gradient Editor)

Рис. 153. Окно Gradient Editor

Здесь можно, изменяя различные параметры, создать свой, оригинальный градиент. А можно просто модифицировать уже имеющийся.
Возможно задание одного из пяти типов (стилей) градиента: линейный, радиальный, угловой, отраженный и ромбический.

Рис. 154. Возможные стили градиента

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

Рис. 155. Этот коллаж создан с использованием быстрой маски. Прозрачная область маски как раз задается с помощью градиента

 

148.gif

Изображение: 

149.gif

Изображение: 

150.gif

Изображение: 

152.gif

Изображение: 

153.gif

Изображение: 

154.gif

Изображение: 

155.gif

Изображение: 

5. Инструменты редактирования

 

Инструменты редактирования

Инструменты редактирования ничего не закрашивают и не рисуют. Они только воздействуют на уже созданное изображение. Таких инструментов всего шесть. И находятся они в седьмом ряду на панели инструментов.
Blur («Размытие») (<R>) — инструмент уменьшает контрастность, что приводит к потере резкости изображения. А если применить его совместно с нажатой клавишей <Alt>, то эффект будет прямо противоположным.

Рис. 156. На рисунке немного «поплыли» буквы. Но виновато не пиво — это результат действия инструмента Blur
Sharpen («Резкость») (<R>) — в этом же семействе инструментов — придает изображению резкость. Однако с помощью него вы не сможете восстановить то, что «испортили» инструментом Blur. Этот инструмент повышает контрастность между соседними пикселами.

Оба вышеописанных инструмента: и Blur, и Sharpen удобно применять в том случае, если требуется подправить небольшие участки изображения. В иных случаях полезнее будет применять аналогичные фильтры.
Smudge («Палец») — в этом же семействе инструментов — размазывает цвета внутри изображения. Его действие очень похоже на действие инструмента Blur (Размытие). Однако Smudge размывает цвета.
Dodge («Осветление») (<О>) — осветляет обрабатываемый участок изображения, при условии его вхождения в заданный тоновый диапазон: теней, полутонов или тонов.

Рис. 157. К этому рисунку был применен инструмент Dodge

Burn («Затемнение») — с точностью до наоборот повторяет действие предыдущего инструмента из этого же семейства — т. е. затемняет обрабатываемые участки изображения.
Sponge («Губка») — снижает насыщенность и контрастность цветов: цвета тускнеют, переходя в конце концов в серый цвет.
Переходим к следующей группе инструментов, содержащей четыре семейства и четырнадцать инструментов.

 

156.gif

Изображение: 

157.gif

Изображение: 

6. Инструменты выделения контура

 

Инструменты выделения контура

Path Component Selection («Выделение элементов контура») (<А>, <Ctrl>) — осуществляет полное выделение (вместе с узелками) контуров двумя способами; перемещение выделенного контура в другое место; создание и перемещение копии выделенного контура при нажатой клавише <Alt>.
Direct Selection («Непосредственное выделение») — применяется для редактирования контура. Щелчок при нажатой клавише <Alt> выделяет всю дорожку.
Туре («Текст») (<Т>) используется для добавления (создания) к рисунку векторного текста.

Инструмент позволяет созвать текст двух типов: простой и фигурный. Фигурный (Point type) позволяет набирать одну или несколько строк текста с любыми параметрами (атрибутами). Применяется обычно для логотипов, заголовков и других маленьких фрагментов текста. Простой (Paragraph type) позволяет устанавливать размер контейнера для набора. По мере заполнения текстом строк он автоматически распределяется, образуя колонку заданной ширины. В данном случае применяется любое возможное в программе форматирование, т. е. задание атрибутов. Этот тип текста пригоден для набора заметок, статей и пр.

Текст создается в отдельном, текстовом слое (Text Layer). Слою можно задавать эффекты, искажать его как обычный. Однако те кетовый слой имеет особые свойства. Во-первых, некоторые команды к нему неприменимы. Во-вторых, текст остается редактируемым, т. е. вы можете изменить его параметры — шрифт, размер символов и др.

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

Рис. 158.

Рис. 159.

Рис. 160.

Для создания простого текста сначала создается текстовый контейнер — область, в которой этот текст и будет размешаться. Контейнер создается простым перетаскиванием курсора по изображению после выбора инструмента. Внутри контейнера появится курсор, что означает готовность к набору текста. Сначала делаются все установки для текста, и только потом он набирается. Впрочем, изменить параметры текста можно и после его набора. Для этого выделяем текст внутри контейнера простым перетаскиванием курсора при нажатой левой кнопке мыши.

Рис. 161.

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

Параметры данного инструмента аналогичны параметрам для таких инструментов во многих других редакторах (не обязательно в графических).
Create Warped Text — этот параметр задает искривление текста. Его удобно __ использовать при создании эмблем (логотипов) или плакатов. Можно выбрать одну из пятнадцати доступных форм контуров, тип искажения кривой и искривление. Нельзя искривить только тот текст, к которому применялись стили Faux Bold и Faux Italic. Также нельзя искривить растровые шрифты.

Рис. 162. Окно Warp Text — здесь следует выбрать стиль искривления текста

Рис. 163. Тексты с различными стилями искривления

После того как текст создан, он растрируется. Если вы собираетесь печатать его на PostScript-устройстве, то символы текста выводятся как объекты, с максимальным качестгом. В этом случае способ растрирования не имеет большого значения. Однако если макет готовится к электронному распространению, выбор метода сглаживания при растрировании очень важен, особенно когда вы создаете текст малого кегля (размера). Следует учитывать — чем больше кегль текста, тем лучше он будет восприниматься в растрированием виде. Крупные символы сохраняют форму и без сглаживания. Символы среднего размера, если их контуры не сгладить, теряют четкость очертаний, наклонные линии в них становятся ступенчатыми. Если вы собираетесь применять сглаживание, то помните, что это очень сильно увеличит необходимое число цветов при переводе изображения в индексированное.

Совсем мелкие символы, как бы вы их ни набирали, не будут читаться после растрирования, их следует избегать. Лучше перестроить дизайн таким образом, чтобы информация оставалась в виде нерастрированного текста. Если вы решили сглаживать контуры текста при растрировании, вам необходимо выбрать один из пунктов раскрывающегося списка Set the anti-aliased method (Установить метод сглаживания) в панели свойств инструмента Туре (Текст). Возможны следующие варианты:

  • None (Нет) — не применять сглаживание;
  • Crisp (Резкость) — сглаживание визуально увеличивает резкость;
  • Strong (Толщина) — в результате сглаживания буквы становятся толще, тяжелее;
  • Smooth (Гладкость) — сглаживание проводится так, чтобы контуры букв были как можно более гладкими.

К параметрам сглаживания можно отнести и усреднение расстояний между символами. По умолчанию символы шрифта в наборе имеют дробные размеры по ширине. Это означает, что расстояние между символами не одинаково, а варьируется, причем промежутки отличаются между собой на доли пиксела. В большинстве случаев дробная ширина очень благотворно влияет на внешний вид текста — распределение символов кажется более равномерным. Однако для шрифтов небольшого кегля при подготовке электронной публикации эту функцию нужно отключать, иначе символы сольются или, напротив, расстояния между ними станут излишне велики. Чтобы активизировать режим дробной ширины, выберите команду-переключатель Fractional Widths (Дробная ширина) в меню палитры Character (Символ). Птичка напротив команды говорит об активности этого режима. Если режим отключен, то расстояния между символами станут одинаковыми и кратными пикселам.

Рис. 164. Используя настройки параметра Warp Text, можно писать текст по любой траектории

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

Реn (<Р>) («Перо») — формирует векторный контур по методу Безье, т. е. с помошью узелков и контрольных точек.
Freeform Pen («Произвольное перо») — формирует контуры и векторные маски произвольной формы.
Insert Point («Добавление узла») — как следует из названия инструмента, он служит для добавления на сегменте контура дополнительных узлов (точек привязки).
Remove Point («Удаление узлов») — служит для удаления узлов (точек привязки) на контуре, не разрывая контур.
Convert Point («Преобразование узла») — преобразовывает тип выделенного узла (точки привязки) векторного контура с одновременной регулировкой контрольных точек данного узла.

 

158.gif

Изображение: 

159.gif

Изображение: 

160.gif

Изображение: 

161.gif

Изображение: 

162.gif

Изображение: 

163.gif

Изображение: 

164.gif

Изображение: 

7. Инструменты создания геометрических фигур

 

Инструменты создания геометрических фигур

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

Rectangle («Прямоугольник») (<U>) — соответственно, позволяет рисовать прямоугольник (а с нажатой клавишей <Shift> — квадрат), залитый цветом переднего плана.
Rounded Rectsngle («Скругленный прямоугольник») — создает фигуры, подобные описанным выше, но позволяет задавать радиус скругления углов прямоугольника.
Ellipse («Эллипс») — создает овалы (в сочетании с нажатой клавишей <Shift> — круги).
Poligon («Многоугольник») — позволяет создавать геометрические фигуры с произвольным количеством углов, а также — многолучевые звезды. По умолчанию создает выпуклый пятиугольник.
Line («Линия») — рисует прямые линии заданной длины, толщины, цвета и направления.
Custom Shape («Произвольная фигура») — позволяет создать геометрическую фигуру произвольной формы и сохранить ее для использования вдальнейшем.

Рис. 165. Некоторые варианты геометрических фигур, которые можно создать, используя инструменты, описанные выше

 

165.gif

Изображение: 

8. Инструменты для работы с документом

 

Инструменты для работы с документом

Последняя группа инструментов на данной панели включает в свой состав четыре семейства. Все эти инструменты обеспечивают работу непосредственно с документом.

Notes («Примечания») (<N>) — позволяет создать примечания к текущему рисунку: кто, когда и где создал данный рисунок и т. д. Особенно полезен в случае работы над рисунком группы товарищей.

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

Рис. 166. Панель параметров инструмента Notes

Рис. 167. Вставка примечаний в документ — открыто поле Notes документа

Audio Annotation («Звуковые заметки») — создает те же примечания, но речевые (звуковые), а не письменные. Однако этим инструментом можно воспользоваться только если к компьютеру подключен микрофон.
Eyedropper («Пипетка») (<I>) — позволяет выбрать любой цвет пиксела изображения как цвет переднего плана (при нажатой клавише < Alt> — цвет фона).
Color Sampler («Выбор цвета») — Позволяет получить информацию о цвете, взяв до четырех проб из любой точки документа. Просто надо щелкнуть этим инструментом в любых (не более четырех - так уж установлено производителями данного продукта) интересующих точках изображения, и в палитре Info можно увидеть полную цветовую характеристику этих точек. Кроме того, можно уже выставленную пробу «перетащить» на другое интересующее место, дабы получить информацию уже о нем.
Measure («Измеритель») — позволяет измерять расстояния и направления в окне изображения.
Hand (<H>) («Рука») — позволяет двигать изображение в окне, чтобы увидеть те его части, которые не помещаются в окне.
Zoom (<Z>) («Масштаб») — позволяет изменять масштаб изображения. Простой щелчок данным инструментом на изображении увеличивает его. Щелчок с нажатой клавишей <Alt> — наоборот, уменьшает изображение, увеличивая обзор. А двойной щелчок возвращает изображение к нормальному размеру.

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

Рис. 168. Палитра Navigator позволяет изменять масштаб изображения с помощью ползунка

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

 

167.gif

Изображение: 

168.gif

Изображение: 

9. Средства управления панели инструментов

 

Средства управления панели инструментов

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

Эта группа элементов управления (всего четыре элемента) предназначена для установки цветов переднего плана и фона.
Верхний левый квадрат, по умолчанию залитый черным цветом, устанавливает цвет переднего плана (Set Foreground Color). Щелчок на нем открывает диалоговое окно Color Picker (Выбор Цвета). Для смены цвета просто с помощью кружочка в данном окне выбираем новый цвет и нажимаем клавишу <Enter>. Этот цвет определяется для таких инструментов, как Pen, Brush, Airbrush и Gradient. Нижний правый квадрат, по умолчанию залитый белым цветом, устанавливает цвет фона (Set Background Color) аналогично установке цвета переднего плана. Этот цвет используется для инструментов Eraser и Gradient.
Switch Foreground and Background Colors (Переключение цветов переднего плана и фона) (<Х>) — стрелочка в правом верхнем углу данной группы элементов управления цветом, служит для замены цвета переднего плана на цвет фона и наоборот.
Default Foreground and Background Colors (Цвета переднего плана и фона по умолчанию) (<D>) — миниатюрное изображение элементов установки цветов в левом нижнем углу данной группы элементов служит для установки цветов переднего плана и фона по умолчанию, т. е. черного и белого соответственно.
Следующая группа элементов устанавливает режим работы с изображением
Edit in Standart Mode (Редактирование в стандартном режиме) (<Q>) — этот режим включен по умолчанию и предназначен для обработки изображения в обычном режиме.
Edit in Quick Mask Mode (Редактирование в режиме Быстрой Маски) — включение этого режима переводит редактор в режим быстрой маски, в котором можно редактировать границы выделения с помощью инструментов рисования. В этом режиме изображение оказывается наполовину покрыто полупрозрачной красноватой пленкой. Она покрывает невыделенные (маскированные) области изображения. Рисование черным расширяет маскированные области за счет выделений. Рисование белым расширяет выделение и стирает маскирование.
Следующая группа, состоящая из трех элементов, устанавливает режимы экрана. Всего существует три таких режима (их также можно переключать горячей клавишей <F>).

  • Standart Screen Mode (Стандартный экранный режим). Редактор и изображение открываются в собственных окнах. Этот режим включен по умолчанию.
  • Full Screen Mode With Menu Bar (Полноэкранный режим со строкой меню). Эффективен в том случае, если изображение не помешается в стандартном окне. В этом режиме исчезает все лишнее.
  • Full Screen Mode (Полноэкранный режим) — отличается от предыдущего только тем, что с экрана исчезает еще и строка меню. Для того чтобы все же показать строку меню, необходимо нажать комбинацию клавиш <Shift>+<F>. Повторное нажатие этих клавиш снова удаляет строку меню. Чтобы убрать с экрана вообще все элементы, нажимаем клавишу <Таb>. Повторное нажатие этой клавиши — возвращает все на свои места. Комбинация клавиш <Shift>+<Tab> убирает с экрана только все палитры, оставляя панель инструментов. Линейки остаются видимыми в любом случае. Режим отображения линеек изменяется с помощью комбинации клавиш <Ctrl>+<R>.

Jump to Image Ready (Переход в Image Ready) (<Ctrl>+<Shift>+<M>)— последняя кнопка на панели инструментов осуществляет быстрый переход к программе Image Ready 3.0. Причем активный документ автоматически загрузится в окно этой программы.

 

10. Меню

 

Меню

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

Рассмотрим команды основного меню более подробно.

  • Команда File (Файл) открывает одноименное меню, которое содержит все необходимые команды для работы с файлами: создание, открытие и закрытие, сохранение файлов, импорт и экспорт изображений из других документов. Здесь же находятся команды для получения изображений с устройств ввода (со сканера, например), перехода к другим приложениям, автоматизации, проверки документа перед выводом и вывода документа на печать.
  • Команда Edit (Редактирование) открывает одноименное меню, которое содержит команды редактирования изображения: вырезание, копирование и др., изменение размеров и искажение всей иллюстрации и ее фрагментов. В этом же меню расположены команды определения узора, кисти и фигуры, команды очистки буфера и всех установок программы (настройки, управление цветом и наборами образцов), а также искажения отдельных областей.
  • Команда Image (Изображение) открывает одноименное меню, которое содержит команды, предназначенные для воздействия на изображение — тоновая и цветовая коррекция, изменение типа изображения, кадрирование, вырезание фрагментов из фона и пр.
  • Команда Layer (Слой) открывает одноименное меню, которое содержит команды для управления слоями изображения.
  • Команда Select (Выделение) открывает одноименное меню, которое содержит команды для работы с выделенной областью.
  • Команда Filter (Фильтр) открывает одноименное меню, которое содержит команды для специальной обработки изображений. Здесь обязательно есть фильтры из комплекта Photoshop и могут присутствовать дополнительно установленные фильтры.
  • Команда View (Вид) открывает одноименное меню, которое содержит команды управления внешним видом рабочей страницы — масштаб и цветовая модель отображения, направляющие, линейки и др.
  • Команда Window (Окно) открывает одноименное меню, которое содержит команды для управления видом главного окна — открытие/закрытие и организация палитр, размещение окон документов.
  • Команда Help (Помощь) открывает одноименное меню, которое содержит команды для получения справочной информации, помощи по программе, доступа к оn-лайновой службе поддержки.
 

11. Палитры

 

Палитры

Команды меню не исчерпывают всех возможностей Photoshop. Многие функции выполняются с помощью палитр. Палитры, в отличие от диалоговых окон, могут постоянно располагаться на экране, и тогда пользователь во время работы переходит от палитры к изображению и обратно, не тратя время на выбор команды. Если палитра не нужна, ее можно убрать с экрана, а в случае необходимости вызвать вновь. Кроме того, палитры можно собрать в группы, чтобы они занимали меньше места на экране, а также пристыковать к верхней части главного окна. Понятно, что такая организация работы очень удобна — вы получаете легкий доступ к функциям, экономите место в рабочей области, интерфейс легко настраивается под конкретный вид работы. Каждая палитра посвящена одной теме, например выбору цвета, работе с каналами изображения, выбору инструмента.
В Photoshop есть 15 специализированных палитр. Большинство из них имеют стандартное устройство. Внутри палитры размещены элементы управления — кнопки, ползунки, образцы, поля ввода. Кнопка со стрелкой вверху справа открывает меню палитры, где содержатся разные команды. Некоторые из них вынесены в виде кнопок в нижнюю часть палитры. Вверху палитры расположен ярлык с названием палитры, похожий на ярлык каталожной карточки. Он служит для активизации палитры и для ее перемещения.

Рис. 169. Типичный вид палитры Character

Рис. 170. Палитра Layers

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

 

169.gif

Изображение: 

170.gif

Изображение: 

12. Обозреватель файлов

 

Обозреватель файлов

В Photoshop 7.0 реализован так называемый обозреватель файлов, который вызывается из меню Window (Окно). В прежних версиях такого средства не было.


Рис. 171. Обозреватель файлов

Выбрать по имени нужный файл в большом списке обычно не легко. Поэтому, чтобы выбрать для открытия в Photoshop нужный файл, приходилось использовать внешние программы-обозреватели, представляющие помимо имен и характеристик графических файлов еще и их миниатюры (уменьшенные копии). Примерами таких программ являются проводник Windows в режиме Вид>Эскизы страниц и широко известный обозреватель (viewer, «вьюер») ACDSee. Теперь Photoshop обзавелся собственным обозревателем файлов. Вы можете выбрать нужную папку, посмотреть миниатюры и характеристики содержащихся в ней графических файлов. Щелчок правой кнопкой мыши на миниатюре раскрывает контекстное меню, в котором можно выбрать различные команды. Например, вы можете повернуть изображение, переименовать, удалить или открыть файл. Можно даже создать папку. Чтобы открыть файл Photoshop, достаточно просто перетащить мышью его миниатюру из окна обозревателя в рабочую область редактора.

 

171.gif

Изображение: 

5. ГЛАВА 7. УРОКИ PHOTOSHOP

 

ГЛАВА 7. УРОКИ PHOTOSHOP

 

1. Уроки Photoshop

 

Уроки Photoshop

В предыдущей главе вы познакомились с интерфейсом и инструментами редактора растровой графики Photoshop. Еще раз повторяем, что данная книга не является учебником по Photoshop. Поэтому подробной информации по применению всех описанных инструментов и возможностей данного редактора вы здесь не найдете.
Но кое-что вы все равно научитесь делать! Применение многих инструментов становится более эффективным, если их использовать совместно с другими инструментами, эффектами и настройками редактора. Результат может быть удивительным!

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

 

2. Обработка текста

 

Обработка текста

Создание и обработка текстов в графическом редакторе весьма актуальны в Web-дизайне, а также при разработке рекламных буклетов, объявлений и т. п. Речь идет о создании красивых и небольших (по количеству слов) заголовков. Этой задаче и посвящен данный раздел. Приведенные примеры следует рассматривать как опорные. Советуем вам поэкспериментировать с выбором параметров, фильтров и т. п.

 

3. Создание теней

 

Создание теней

Начнем с самой простой и часто встречающейся в Web-дизайне задачи — создания объемных заголовков (надписей). Эффект объемности легко получить за счет иллюзии тени, отбрасываемой буквами заголовка. Хотя это далеко не единственный путь, ведущий к указанной цели, рассмотрим данный прием подробнее.

Создадим новый файл с прозрачным фоном. Для этого выполним команду File>New (Файл>Новый) и в открывшемся диалоговом окне установим, кроме прочего, переключатель Transparent (Прозрачность) в группе параметров Contents (Содержание). В окне нового документа на клетчатом фоне (это свидетельствует о его прозрачности) напишем какое-нибудь слово, например «QWERTY». Его сакральный смысл заключается в том, что это — просто первые шесть клавиш слева в верхнем ряду клавиатуры.

Рис. 172. Слово на прозрачном фоне

Далее выполним команду Layer>Layer StyIe>Drop Shadow (Слой>Стиль слоя>Отбросить тень). Откроется диалоговое окно Layer Style (Стиль слоя), в котором можно выбрать параметры тени. Если установлен флажок Drop Shadow, то тень будут отбрасывать буквы заголовка. Если установить флажок Inner Shadow (Внутренняя тень), то цветом тени будет выделен контур букв. Можно одновременно установить оба названных флажка. Поэкспериментируйте с выбором различных значений параметров в окне Layer Style. В частности, вы можете задать угол падения света от виртуального источника (Angle), дистанцию между буквами и тенью (Distance), прозрачность (непрозрачность) тени (Opacity) и др. Вы увидите, сколько интересных эффектов можно создать для текста (и не только для текста). Вместо текста можно использовать любое изображение.

Рис. 173. Окно параметров стиля слоя, в котором можно задать параметры тени

Рис. 174. Текст отбрасывает тень

 

172.gif

Изображение: 

173.gif

Изображение: 

174.gif

Изображение: 

4. «Сверкающий текст»

 

«Сверкающий текст»

Для начала создаем новый документ (файл) примерно 600x600 пикселов, в режиме RGB, на прозрачном фоне. Затем заливаем черным цветом текущий слой.
Используя инструмент Туре (Текст), напишем (лучше светлым начертанием шрифта) свой текст. В настоящем примере мы использовали шрифт Arial Black размером 36 пунктов. Выровняем текст строго по середине нашего изображения. Это делается одним нажатием кнопки (C<enter> Text) в панели параметров инструмента Туре (Текст). Впрочем, это выравнивание и необязательно. Просто в процессе набора текста некоторые буквы могут «уйти» за границу документа и их не будет видно. А выравнивание позволит сделать весь текст видимым.

По умолчанию наш текст будет находиться в отдельном слое. Поэтому перед выполнением следующих операций «склеиваем» слой текста со слоем фона. Для этого выполним команду Layer>Merge Visible (Слой>Объединить с видимым) или воспользуемся комбинацией клавиш <Shift>+<Ctrl>+<E>.

Рис. 174. Исходный текст для эксперимента

Теперь применим фильтр Filter>Blur>Gaussian Blur (Фильтр>Размытие>Гауссовское размытие) с радиусом размытия 2 пиксела. В результате наш текст должен стать немного размытым. Далее, применив фильтр Filter>Stylize>Solarize, мы получаем изображение нерезкого контура нашего текста.

Рис. 175. Текст после применения фильтра Blur>Gaussian Blur

Рис. 176. Текст после применения фильтра Stylize >Solarize

Обратимся к палитре Layers (Слои). Для включения этой палитры выполняем команду Window>Show Layers (Окно>Показать Слои). Скопируем текущий слой в новый путем перетаскивания его миниатюры на значок Create a New Layer (Создание нового слоя). На той же палитре появится миниатюра нового слоя — в нашем примере — QWERTY Copy.

Рис. 177. Палитра Layers — здесь выполняем копирование текущего слоя QWERTY в новый слой QWERTY copy. Активный слой всегда выделен синим цветом
Далее все операции будем выполнять только с этим новым слоем. Однако первоначальный слой еще понадобится на заключительном этапе нашего эксперимента.

Теперь применим к текущему (новому) слою фильтр Filter>Distort>PoIar Coordinates. Устанавливаем параметр Polar to Rectangular для перевода нашего изображения в полярную систему координат. Исходный текст существенно преобразится, приняв причудливые, искаженные округленные формы. Причем некоторые слова могут даже разорваться пополам.

Рис. 179. Мы инвертировали а затем повернули на 90° по часовой стрелке исходное изображение

Рис. 178. Исходный текст после его перевода в полярную систему координат

Полученное изображение инвертируем. Самый удобный для этого способ — нажать комбинацию клавиш <CtrI>+<I>. Повернем изображение на 90° по часовой стрелке (команда Image>Rotate Canvas>90°CW).

Далее вновь обратимся к фильтру: Filter>Stylize>Wind.

В открывшемся диалоговом окне Wind (Ветер) устанавливаем значения параметров следующим образом: переключатель Method (Метод) — в положение Wind (Ветер), а переключатель Direction (Направление) — в положение From the Right (Справа налево). Настоящий фильтр с указанными параметрами создает имитацию дуновения ветра справа, который «уносит» наши корявые буквы, словно опавшие листья. Повторяем вышеописанную операцию дважды для усиления эффекта. Проще и быстрее это можно осуществить, дважды нажав комбинацию клавиш <Ctrl>+<F>. А потом нажимаем <Ctrl>+<Shift>+<L> для автоматической регулировки уровней. После трехкратного применения фильтра Wind текст стал совсем блеклым, слабо различимым на белом фоне. Автоматическая регулировка уровней позволит несколько выделить текст на белом фоне.

Теперь вернем нашему изображению первоначальный черный фон. Инвертируем его еще раз (<Ctrl>+<I>). После чего вновь трижды нажимаем комбинацию клавиш <Ctrl>+<F>, чтобы трижды применить фильтр Wind с прежними параметрами. В итоге наш текст приобретет нитевидные «хвосты» слева.

Выполняем команду: Image> Rotate Canvas для возврата нашего изображения в исходное горизонтальное положение. Однако теперь поворачивать следует, соответственно, против часовой стрелки — используем параметр 90°CCW. Возвращаем полученное изображение из полярной системы координат.

Рис. 180. Применение фильтра Filter>Stylize>Wind, который имитирует смазанность от дуновения ветра

Рис. 181. После автоматической регулировки уровней, текст получил темный оттенок

Для этого используем уже знакомый вам фильтр Filter>Distort>Polar Coordinates, но здесь обязательно изменяем значение параметра на противоположное — Rectangular to Polar. После правильного выполнения вышеуказанных манипуляций наш текст вернется в первоначальное горизонтальное положение, выровняется и станет почти читаемым. Однако проявятся и новые его качества, ради которых, собственно, все это и делалось.

Рис. 182. В результате всех действий мы получили прежний текст с интересным свечением (или сиянием)

Настало время вспомнить и о первом слое QWERTY. Получившийся у нас текст со свечением имеет размытые границы, что делает его неудобным для чтения. Чтобы оформить границы букв, мы и используем первоначальный слой с контуром. Обратимся к палитре Layers и перетащим миниатюру нижнего слоя (с контурной надписью) наверх так, чтобы он занял первую строку в списке слоев. Теперь зададим ему режим смешивания Screen (или <Ctrl>+<Shift>+<E>) для объединения слоев.

Рис. 183. Результат вполне читаемый текст со свечением

 

174.gif

175.gif

Изображение: 

176.gif

Изображение: 

177.gif

Изображение: 

178.gif

Изображение: 

179.gif

Изображение: 

180.gif

Изображение: 

181.gif

Изображение: 

182.gif

Изображение: 

183.gif

Изображение: 

5. «Стеклянный текст»

 

«Стеклянный текст»

Следующий способ представления текста называется «Стеклянный текст». Особенность его заключается в том, что текст не просто является прозрачным, но и создает некоторое преломление изображения подложки.

Для начала подбираем соответствующую картинку— фон, на котором будет расположен наш текст. Не имеет смысла делать этот фон однотонным, ибо весь эффект теряет смысл — никакого преломления мы там не заметим. Для примера мы взяли панорамную фотографию города N-ск. Она не слишком контрастна, но имеет достаточно много различных отдельных объектов.
После того как фон окончательно выбран, переходим собственно к работе\с текстом. Выберем на панели инструментов инструмент Туре (Текст) и набираем необходимый текст, расположив его непосредственно на нашем фоне. Для текста устанавливаем белый цвет, а шрифт пожирнее и покрупнее. Для примера мы использовали шрифт Ariai Black.


Рис. 184. Картинка, которая будет служить фоном

Как вы уже знаете, при использовании инструмента редактирования текста Тyре весь текст записывается в отдельный слой. Таким образом, наши фон и текст находятся в разных слоях.

Рис. 185. На фоновое изображение наносим текст, который будем делать стеклянным

Создаем копию получившегося документа. Для этого используем команду Image>Duplicate. Затем переключаемся в слой с фоновым изображением и заливаем его черным цветом: сначала нажимаем клавишу <D> (чтобы установить черный цвет как цвет переднего плана), а потом — комбинацию клавиш <Alt>+<Backspace>.

Рис. 186. Мы залили весь фон черным цветом, используя комбинацию клавиш <Alt>+<Backspace>

После правильно выполненных операций должен получиться белый текст на черном фоне. Выбираем команду Layer>Flatten Image (Слой>Выполнить сведение) для «склеивания» слоев. В палитре Layers (Слои) заметны изменения: у нас остался только один фоновый слой. Теперь, применив гауссовский шум (фильтр Filter>Blur>Gaussian Blur) с значением радиуса (параметр Radius) порядка 5 пикселов, мы получим некоторую размытость границ нашего текста. Сохраним полученные результаты в отдельном файле в формате psd (мы использовали для сохранения файл zapas.psd) — они нам еще пригодятся чуть позже! А пока закрываем этот файл (естественно, после сохранения с помощью команды File>Save As или комбинации клавиш: <Shift>+<Ctrl>-t-<S>). Для ускорения операций можно просто нажать <Ctrl>+<W>.

Рис. 186.

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

Сделаем невидимым слой с текстом, ибо дальнейшие действия предполагают работу исключительно с изображением, а текст нам будет только мешать. Напомним: для того чтобы сделать какой либо слой невидимым, в палитре Layers (Слои) в строке с миниатюрой соответствующего слоя просто щелкните мышью на значке глаза. Исчезнет глаз, а вместе с ним и видимость данного слоя.

Далее. Создаем копию слоя с исходным изображением. Просто перетаскиваем миниатюру соответствующего слоя на значок Create New Layer (Создать новый слой) на панели Layers (Слои). После копирования появится новый слой с тем же именем, что и первоначальный, только к этому имени будет добавлено слово Сору. Сразу после создания новый слой станет активным. Поэтому все последующие операции будут производиться именно с ним.

Снова обратимся к фильтру: Filter>Distort>Displace (Фильтр>Искажение>Перемешение). Как видно из названия данного фильтра, дальнейшие действия будут связаны с некоторым искажением имеющегося изображения.В открывшемся окне Displace (Перемещение) устанавливаем значение 20% для горизонтальной и вертикальной шкал. Остальные параметры несущественно влияют в этом примере на результат, а потому их можно не изменять. Нажимаем кнопку OK и выбираем файл, который мы сохранили совсем недавно (zapas.psd), в открывшемся окне Choose a displacement map (Выберите карту установок). В итоге мы получим искаженное начертание нашего текста на исходном фоне. Искажение уже будет каким-то жидко-стеклянным. Но это еще только намек на стеклянный текст.

Рис. 188. Используем фильтр Distort>Displace

Далее, удерживая нажатой клавишу <Ctrl>, щелкнем по текстовому слою на палитре слоев Layers. На искаженном изображении текста должно появиться еще одно изображение того же текста в пунктирном исполнении.

Рис. 189. Готовое изображение - стеклянный текст

Нужно проследить, чтобы активным по-прежнему оставался слой с фоновым изображением, а не с текстом! Дальнейшая работа будет связана с меню Layer (Слой). Сначала добавляем слой маски: Layer>Add Layer Mask>Reveal Selection. Пунктирное обрамление текста исчезнет. В меню Layer выбираем команду Layer Style (Слой>Стиль Слоя). Нашему вниманию откроется окно Layer Style (Стиль Слоя). Четыре завершающих операции нашего урока будут связаны именно с ним. В этом-то окне, точнее в его центральной части, необходимо изменить некоторые параметры, которые предлагаются по умолчанию. Какие конкретно параметры надо изменять, вы узнаете, внимательно изучив приведенные здесь рисунки. По окончании задания новых значений параметров нажимаем кнопку ОК для принятия новых установок.

В раскрывшемся списке необходимо выбрать стили. Для начала выберем стиль слоя Drop Shadow (Падение Тени). Настоящий стиль с указанными параметрами создаст соответствующую тень на изображении.

Следующий стиль, с которым мы будем работать, называется Inner Shadow (Внутренняя тень), так же, как и предыдущий, он связан с установкой тени.


Рис. 190. Окно Layer Style с новыми параметрами для стиля Drop Shadow

Теперь нам останется проделать аналогичные действия еще для двух стилей: Bevel and Emboss и Satin (Атлас). Их действие вы и сами сможете оценить.
При установке новых параметров для стиля слоя Satin обращаем внимание на отсутствие меток для параметра Contour (Контур). Здесь нам контуры не нужны!

Рис. 191.

Вот такой эффект у нас получился. Не бойтесь варьировать параметры — у вас может получиться и другой итог нашего примера.

Рис. 192. Окончательный вариант изображения со стеклянным текстом

 

184.gif

Изображение: 

185.gif

Изображение: 

186.gif

Изображение: 

186.gif

188.gif

Изображение: 

189.gif

Изображение: 

190.gif

Изображение: 

191.gif

Изображение: 

192.gif

Изображение: 

6. «Золотой текст»

 

«Золотой текст»

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

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

Создаем новый документ с белым фоном. Затем обращаемся к палитре каналов Channels (Каналы) и создаем новый канал, по умолчанию носящий имя Alpha 1. Выше неоднократно говорилось, как можно создать новый канал. Новый канал будет иметь черный фон. Именно в этом канале мы и будем писать наш текст. Как во всех предыдущих (впрочем, как и в последующих) уроках, связанных с обработкой текста, в качестве примера текста мы используем наше любимое слово QWERTY.

Итак, в канале Alpha 1 мы набираем наш текст. Как только мы активизируем инструмент для набора текста Турe (Текст), фон слоя станет красным, а цвет текста — черным. Однако как только мы отключим этот инструмент, фон приобретет свой первоначальный цвет, а текст станет белым, но будет иметь пунктирную окантовку.

Рис. 193. При отключении инструмента Туре, фон слоя приобретает свой первоначальный цвет, а текст — белым, но с пунктирной окантовкой

Теперь перейдем к палитре Слои (Layers). Здесь у нас пока есть только один слой, который автоматически появился при создании документа с белым фоном. Это слой Background (Фон), имеющий белый цвет. Именно сюда теперь надо загрузить маску из канала Alpha 1 (или, что то же самое, из четвертого канала). Помните пунктирную окантовку букв нашего текста? Это и есть маска, которая нам теперь так необходима! Для загрузки этой маски используем комбинацию клавиш <Ctrl>+<Alt>+<4> (4 — порядковый номер канала Alpha 1).

Рис. 194. Загружаем маску, используя комбинацию клавиш <Ctrl>+<Alt>+<4>

Как узнать, что маска уже загрузилась? Да очень просто: на первоначальном белом фоне появится пунктирное начертание того текста, что был в канале Alpha 1. Заливаем маску черным цветом. Если черный цвет уже установлен как основной цвет, то проще всего это сделать, нажав комбинацию клавиш <Alt> + <Del>. Как только маска окрасится черным, ее можно отключать (<Ctrl> + <D>).
Растушуем немного наш текст с помощью фильтра гауссовского размытия (Filter>Blur>Gaussian Blur). Радиус размытия можно подобрать экспериментально, однако опытным путем было установлено, что удачнее всего брать радиус в интервале от 2,4 до 3,2 пиксела. Мы в настоящем примере выбрали радиус 3 пиксела.

Рис. 195. Применение фильтра Filter >Blur > Gaussian Blur приводит к размытию текста

Для дальнейших операций нам понадобится еще один аналогичный слой. Поэтому необходимо его создать! Но сначала давайте переименуем наш слой Background в какой-нибудь другой, например New. Просто делаем двойной щелчок на миниатюре слоя Background в палитре Слои (Layers). Появится диалоговое окно New Layer (Новый слой), предлагающее ввести новое имя слоя. Сделав это, нажимаем кнопку ОК. Теперь уже можно создавать еще один аналогичный слой, о необходимости которого мы говорили чуть раньше. Для простоты операций и экономии времени просто дублируйте имеющийся слой New. Об этом мы уже тоже несколько раз говорили в предыдущих уроках (перенесите миниатюру слоя на значок Create a New Layer (Создать новый слой) в палитре Layers (Слои)). Если все сделано верно, то мы обнаружите новый слой со старым содержимым, который будет называться New copy и займет первое место среди имеющихся слоев.

Рис. 196.

Итак, мы имеем два абсолютно одинаковых слоя (но с разными названиями). Далее, нам необходимо сдвинуть эти слои относительно друг друга. Для этих целей используем команду Filter>Other>Offset. Причем для первого задаем положительные смещения по 4 пиксела как по вертикали, так и по горизонтали, а для другого, соответственно, отрицательные смещения (то есть, противоположные) по 4 пиксела, также в обоих направлениях.

Рис. 197. Для создания сдвига слоев относительно друг друга используем команду Filtet>Other>Offset. В новом окне устанавливаем значения смещения по горизонтали и вертикали

Таким образом, мы раздвигаем наши тексты относительно центральной точки по диагонали в верхний левый и нижний правый углы. Предложение замысловатое, но когда начнете осуществлять данный этап нашего урока, вам все станет ясно.
Вообще-то вы сразу не заметите никаких изменений нашего документа по итогам выполнения описанного выше этапа урока. Поэтому для верхнего слоя New сору изменим режим наложения с Normal на Difference (Разница). Это делается в палитре Слои (Layers), в левом верхнем окошке, где по умолчанию всегда стоит значение Normal. В заключение объединяем оба слоя в один (<Ctrl>+<E>). Объединенный слой получит название New.

Рис. 198. В результате объединения слоев мы увидим тексты из обоих слоев, но с установленным сдвигом

Выполняем команду Image>Adjust>Curves(<Ctrl>+<M>). Откроется окно Curves (Кривые). Как вы уже знаете из теоретического материала, изложенного в первой части книги, данное окно позволяет изменять яркость всех пикселов изображения. Здесь мы опытным путем добиваемся снижения яркости средних тонов.

Рис. 199. Окно Curves: Добиваемся снижения яркости средних тонов

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

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

В результате наш текст существенно преобразится, у него появятся какие-то новые свойства. Уже четко заметны оригинальные отблески на закруглениях букв. Создается эффект объемности и фактурноста текста. Другими словами, это уже не просто текст, а надпись, отлитая в каком-то металле. Однако это пока не конечный вариант и здесьещеочень много лишнего. Как и в действительности, после процесса отливки детали необходимо обработать, избавив их от оплоя.

Вновь вспомним про маску, сделанную в канале Alpha 1. Настало время загрузить ее в наш документ. Используем для этой цели команду Select>Load Selection. В области Source в списке Channel (Канал) устанавливаем наш канал, в котором содержится маска (это канал Alpha 1).

Рис. 201. В области Source в списке Channel устанавливаем канал, в котором содержится маска

В результате поверх имеющегося «суррогатного» текста будет нанесено пунктирное изображение маски. Инвертируем маску (<Ctrl>-f<Shift>+<I>). Путем инвертирования маски мы добиваемся того, что выделенным становится все, кроме того, что перекрывает маска. Об этом свидетельствует пунктирная линия по периметру всего документа. Нажимаем клавишу <Del>(<Delete>) для удаления ненужного изображения и фона.

Рис. 202. Клавишей <Del> удаляем лишний фон изображения

Вот мы уже получили вполне понятный текст с интересной заливкой. Нажимаем комбинацию клавиш <Ctrl>+<D> (для отмены выделения), а потом <Ctrl>+<I> (для инвертирования изображения).

Далее придется создать новый цветной слой. Для этого воспользуемся инструментом на панели Layers (Слои). Нам предложат выбрать в меню способ заполнения цветом. Мы использовали команду Color Balance. Опытным путем мы попытались создать наиболее похожую на золото раскраску.

Далее объединяем оба слоя в срезаемую группу. Для этого, удерживая нажатой клавишу <Alt>, нажимем правую кнопку мыши на границе миниатюр слоев в палитре Layers.

Рис. 203. В окне Color Balance подбираем оттенки так, чтобы создалась имитация золотого литья

Создаем новый слой Layer 1 и заливаем его черным цветом — это будет фон нашего конечного изображения. В завершение операции по изготовлению золотого текста необходимо всего лишь правильно расположить все наши слои. Делаем это в следующей последовательности: Color Balance 1, new, Layer 1. Вот и все. «Золотой текст» получен.

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

 

193.gif

Изображение: 

194.gif

Изображение: 

195.gif

Изображение: 

196.gif

Изображение: 

197.gif

Изображение: 

198.gif

Изображение: 

199.gif

Изображение: 

200.gif

Изображение: 

201.gif

Изображение: 

202.gif

Изображение: 

203.gif

Изображение: 

7. «Огненный текст»

 

«Огненный текст»

Следующий урок мы назвали «Огненный текст». Результатом нашего эксперимента будет статическое изображение текста в огне.

Рис.204. Создаем новый документ, выполнив команду File >New (<Ctrl>+<N> )

Итак, создаем новый документ, в котором будем разрабатывать изображение. Мы выбрали размер этого документа 489x202 пиксела. Этого вполне хватит для создания текста. Задаем черный цвет фона нашего документа. Для этого после создания нового документа фон можно просто залить черным цветом. Набираем нужный текст. Обратите внимание, что в данном случае текст лучше всего располагать ближе к нижней границе документа (ведь буквы у нас будут полыхать в огне, а для этого пламени нужно место). Как вы уже догадались, мы вновь используем свое любимое слово QWERTY. В данном случае мы использовали белый цвет букв, рубленый шрифт и полужирное начертание.

Рис. 205. Создаем новый документ, заполнив соответствующие поля окна New

Как обычно, сразу создается новый слой —текстовый. Поэтому тут же объединяем его со слоем фона, используя команду Layer>Flatten Image (Слой>Выполнить сведение) для объединения слоев. Проследим на палитре Layers (Слои), что у нас действительно остался только один слой Background (Фон).

Теперь выполняем команду Filter>Pixelate>CrystaIlize. Значение параметра Cell Size устанавливаем равным 1'. Применив данный фильтр, мы исказили свой текст: края букв станут сильно изломанными. Теперь повернем имеющееся изображение на 90° по часовой стрелке (команда Image>Rotate Canvas>90°CW). И мы получаем тот же текст, только читаемый сверху вниз.

Далее используем фильтр стилизации изображения с эффектом ветра: FiIter>Stylize>Wind.

Рис. 206. Ближе к нижней границе документа помещаем наше слово для эксперимента

Устанавливаем значения параметров фильтра Filter>Stylize>Wind, имитирующего ветер слева

Установим метод Wind (Ветер), а направление (Direction) — слева направо (From the Left). В результате текст приобретет смазанный вид, как будто ветер слева сдул буквы. Применим эффект еще два раза.

Теперь необходимо отрегулировать яркость «хвостов» букв. Это осуществляется командой Edit>Fade Wind или просто комбинацией клавиш <Shift> + <Ctrl> + <F>.

Рис. 207.

Рис. 208. Установим метод Wind (Ветер) для создания смазанного вида

Параметр Opacity (Непрозрачность) установим в пределах 80%. Еще раз применим фильтр Wind, но теперь с направлением (Direction) — справа налево (From the Right). Если раньше у нас имелись линии-следы только справа (сверху) от букв, то теперь они добавятся и слева (снизу), но меньшего размера. Используем фильтр Filter>Distort>Ripple с значением параметра Amount равным 48, а параметра Size — Large.

Рис. 209.

Рис. 210.

Применение данного фильтра создаст волнистость изображения. Вернем изображение в исходное горизонтальное состояние. Для этого применим команду Image>Rotate Canvas>90°CCW.

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

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

Рис. 211. Текст пылает — выглядит вполне реально!

В завершение операций необходимо использовать фильтр FiIter>Brush Strokes>Accented Edges со следующими значениями параметров: Edge Width — 2, Edge Brightness — 31, Smoothness — 5. Далее используем команду Edit>Fade с значениями параметров: Opacity (Непрозрачность) — 56%, Mode (Режим) — Normal.

 

204.gif

Изображение: 

205.gif

Изображение: 

206.gif

Изображение: 

207.gif

Изображение: 

208.gif

Изображение: 

209.gif

Изображение: 

210.gif

Изображение: 

211.gif

Изображение: 

8. «Текст в подтеках»

 

«Текст в подтеках»

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

Итак, создаем новый документ и вводим нужный текст. Обратить внимание следует на то, что фон необходимо установить черный, а цвет шрифта — белый. Отцентрируем текст. Используя команду Layer>FIatten Image (Слой>Выполнить сведение), объединяем текстовый слой со слоем фона.

Рис. 212. Набрав исходный текст, отцентрируем его командой Layer > Flatten Image

Командой Image>Rotate Canvas>90°CCW (Изображение>Повернуть холст>90° против часовой) поворачиваем исходное изображение на 90° против часовой стрелки. Так мы получим изображение, в котором текст читается снизу вверх. Такой поворот необходим для применения фильтра стилизации под ветер: FiIter>Stylize>Wind (Фильтр>Стилизация>Ветер).

Параметр Method устанавливаем равным Wind, направление (Direction)From the Left (Слева). Таким образом мы получаем эффект ветра, дующего с левой стороны. Для усиления настоящего эффекта повторяем всю процедуру еще дважды. И возвращаем изображение в первоначальное горизонтальное состояние.

Рис.213.

Рис. 214.

С помощью команды Image>Adjust>Invert инвертируем изображение. Затем к инвертированному изображению применяем фильтр Filter>Torn Edges.

Рис. 215. К инвертированному изображению применим фильтр Filter>Torn Edges

Здесь мы не можем посоветовать ничего конкретного. Попытайтесь сами подобрать необходимые параметры на свой вкус. От этих параметров будет зависеть вид подтеков букв. Значение параметра Contrast установите в интервале 14-17. поскольку большие или меньшие значения данного параметра будут существен но влиять на плотность заливки букв черным цветом. Параметр Image Balance лучше задавать в начальных значениях. Главное — чтобы сами буквы еще просматривались, а «не затекали». Параметр Smothness можете смело устанавливать в максимальное значение — 15.

Однако текст у нас остается по-прежнему черным. Если мы хотим создать текст, написанный кровью, то ему необходимо придать соответствующую красную окраску.
Используя инструмент из палитры инструментов Eyedropper («Пипетка») (<1>) , установим основной цвет — красный или красно-бордовый. Теперь инструментом с той же палитры Magic Wond («Волшебная палочка») (<W>) поочередно выделяем буквы, а с помощью инструмента Paint Bucket («Ковш») (<G>) также поочередно заливаем все буквы нужным цветом. Волшебную палочку мы используем для быстрого выделения всех, даже мелких, составляющих каждой буквы.
Для придания большей правдоподобности можно немного размыть края изображения, применив фильтр Filter>Blur>Gaussian Blur.

Значение радиуса размытия Radius вполне достаточно выставить в пределах 0,3—0,> пиксела. Все!

Рис. 216. Панель фильтра Filter>Blur>Gaussian Blur

Рис. 217. Конечный вариант изображения — текст в подтеках

 

212.gif

Изображение: 

213.gif

Изображение: 

214.gif

Изображение: 

215.gif

Изображение: 

216.gif

Изображение: 

217.gif

Изображение: 

9. «Ледяной текст»

 

«Ледяной текст»

Как обычно, создаем новый документ с белым фоном и черным шрифтом набираем нужный текст.

Рис. 218.

Используя команду Select>Load selection, задаем имя нашего выделения. Впрочем, можно оставить и то, что предлагается по умолчанию.

Рис. 219.

В итоге набранный текст будет побуквенно обведен бегущей пунктирной линией. Командой Layer>Flatten Image (Слой>Выполнить сведение) объединяем текстовый и фоновый слои.

После этого используем команду Select>Inverse и затем применяем фильтр Filter>Pixelate>Crystallize.

Рис. 220.

Коэффициент кристаллизации Cell Size подбираем чисто опытным путем. Значение около 7—9 будет вполне удовлетворительным. Повторяем команду Select>Inverse (<Shift> + <Ctrl> + <I>) и вновь применяем фильтр, на этот раз Filter>Noise>Add Noise (Фильтр>Шум>Добавить шум).

Коэффициент шума Amount устанавливаем около 70%. Обратите внимание, что параметр Distribution (Распределение) устанавливается в значение Gaussian (Гауссовский закон). Флажок Monochromatic в данном примере существенной роли не играет.

Рис. 221.

Рис. 222.

Далее размываем полученное изображение, для чего используем очередной фильтр: Filter>BIur>Gaussian Blur (Фильтр>Размытие>Гауссовское размытие).
Радиус размытия (Radius) устанавливаем в значение около 2 пикселов. После этого отменяем выделение командой Select>DeseIect (<Ctrl>+<D>). Теперь применим фильтр Filter>Blur>Blur, что приведет к еще большему размытию. Инвертируем наше изображение командой Image>Adjust>Invert (<Ctrl>+<I>).

Рис. 223.

Рис. 224.

Предварительно поворачиваем наше изображение на 90° по часовой стрелке (Image>Rotate Canvas>90°CW), а затем применяем фильтр Filter>Stylize>Wind.

Рис. 225. Поворачиваем наше изображение на 90° и применим фильтр Filter>Stylize>Wind для придания эффекта ветра

Метод (Method) устанавливаем в значение Wind (Ветер), направление (Direction) From the Right (Справа). И возвращаем изображение в первоначальное горизонтальное положение командой Image>Rotate Canvas>90°CCW.
Как вы понимаете, полученное изображение до сих пор имеет черно-белую окраску. Для придания ему реалистичного цвета, используем команду Image>Adjust>Hue/Saturation. Устанавливаем флажок Colorize, а далее, двигая ползунки Hue и Saturation, добиваемся реалистичной раскраски. Наиболее удачными являются значения примерно 187 и 92 соответственно.

Рис. 226. Для придания изображению реалистичного цвета, используем команду Image>Adjust> Hue/Saturation

В принципе, наш текст из льда уже принял окончательный вид. Однако хочется сделать еще несколько штрихов. Давайте добавим несколько искрящихся бликов — ведь это все-таки лед, который искрится на свету.

На панели инструментов выбираем инструмент Brush («Кисть»). В меню Brush, которое находится на панели параметров, нажимаем маленькую круглую кнопку с треугольной стрелкой.

Рис. 227.

Рис. 228. Выбираем отпечаток, кисти для инструмента Brush

В раскрывшемся меню выбираем команду Load Brushes. Далее выбираем файл Brushes\Assorted.abr, содержащий виды кистей (загрузив данный файл, вы заметите изменения в меню Brush). Выбираем вид кисти в виде искринок (например, №49 или 50). Основной цвет для кисти устанавливаем белый. Теперь выбранным видом кисти наносим однократные отпечатки в некоторых углах букв. Не очень усердствуем, дабы больше приблизится к реальности. Можно использовать несколько похожих видов кисти.

Рис. 229. Текст изо льда — переливается и сверкает на свету

 

218.gif

Изображение: 

219.gif

Изображение: 

220.gif

Изображение: 

221.gif

Изображение: 

222.gif

Изображение: 

223.gif

Изображение: 

224.gif

Изображение: 

225.gif

Изображение: 

226.gif

Изображение: 

228.gif

Изображение: 

229.gif

Изображение: 

10. Текст «в горошек»

 

Текст «в горошек»

Создаем новый документ. А потом создаем новый канал. В этом канале создаем квадратное выделение по центру. В результате первого этапа у нас должна получиться репродукция знаменитой картины Малевича «Черный квадрат». Снимаем выделение.

Применяем фильтр Filter>Blur>Gaussian Blur с радиусом размытия примерно 15 пикселов.

Рис. 230.

Рис. 231.

Теперь применим фильтр «Скручивание»: Filter>Distort>Twirl. Значение параметра Angle устанавливаем по собственному усмотрению.

Рис. 232. Применим фильтр «Скручивание». Установим значение параметра Angle, например, 336

К полученному изображению применяем другой фильтр: Filter>Pixelate>CoIor Halftone. Такой фильтр преобразует изображение в точечный узор.

На этом шаге еще можно вернуться назад. Оценив полученное изображение, мы можем понять, насколько удачно в предыдущем шаге применили «Скручивание». Если узор теперь получается ненаглядным, то можно вернуться на исходную — т. е. к моменту до создания «скрутки» (когда у нас имеется черный квадрат с размытыми границами). Возвращение назад на нужное количество шагов выполняется командой Edit>Backward (<Alt>+<Ctrl>+<Z>).

Если полученное изображение нас вполне устраивает, то продолжаем дальше.
На палитре Channels (Каналы) переходим в канал RGB (<Ctrl>+<~>). Мы увидим сплошной белый фон. Изменим по желанию цвет этого фона. Для этого можно применить просто заливку. В настоящем примере мы использовали голубой цвет заливки. Далее, загружаем выделение: Select>Load Selection. На голубом фоне появится пунктирное выделение в форме ранее созданного точечного рисунка. Кроме того, выделено будет и все изображение по периметру. Инвертируем выделение, чтобы выделенным осталось только точечное изображение. Установим с помощью инструмента из панели инструментов основной цвет — черный.
А теперь зальем выделение этим цветом. Для этого выполним команду Edit>Fill. Устанавливаем в списке Use в группе Contents значение Foreground Color (Основной цвет), в списке Mode в группе Blending — значение Normal. В поле Opacity (Непрозрачность) — значение 100%. Наш точечный узор окрасится черным цветом.

Рис. 233.

Рис. 234. В результате получили узор из множества точек на голубом фоне

В принципе, узор уже готов.
Аналогичным способом можно создать и текст. Для этого на самом начальном этапе вместо черного квадрата создаем текст (или просто букву). Лучше взять шрифт покрупнее. А когда дело дойдет до применения фильтра Filter>Pixelate>Color Halftone, максимальный радиус делаем минимальным — 4 пиксела.

Рис. 235.

 

230.gif

Изображение: 

231.gif

Изображение: 

232.gif

Изображение: 

233.gif

Изображение: 

234.gif

Изображение: 

235.gif

Изображение: 

11. Текст «в кирпичик»

 

Текст «в кирпичик»

При оформлении Web-страниц нередко используют специфическую заливку текста небольшим рисунком (текстурой). Как это сделать?

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

Рис. 236. На начальном этапе создаем текст, используя крупный шрифт

Теперь открываем файл, содержащий собственно текстуру, которую будем применять в качестве заливки. Мы выбрали текстуру «каменная кладка».

Рис. 237. Текстуру «каменная кладка» будем использовать для заливки букв текста

Выделяем все изображение текстуры: Select>AlI (<Ctrl>+<A>). Выполнив команду Edit>Define Pattern (Редактирование>Определить Образец), определяем выделенную текстуру как образец. В диалоговом окне задаем имя образца.

Рис. 238.

Возвращаемся к документу с набранным текстом. Выделим этот текст побуквенно, выполнив команду Selecr>Load Selection. Теперь объединяем имеющиеся слои с текстом и фоном: Layer>Flatten Image (Слой>Выполнить сведение). А потом заливаем выделенные области текстурой: Edit>FiIl. Для параметра Use устанавливаем значение Pattern, а в списке Custom Pattern выбираем миниатюру с нашей текстурой.

Рис. 239.

Рис. 240.

В итоге буквы текста получат заливку текстурой и станут «каменными».

Можно добавить к тексту тень, созданную с помощью фильтра Filter>BIur>Gaussian Blur. Она придает тексту некоторый объем.

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

 

236.gif

Изображение: 

237.gif

Изображение: 

238.gif

Изображение: 

239.gif

Изображение: 

240.gif

Изображение: 

12. Разжижение

 

Разжижение

Мы не можем не упомянуть еще один инструмент, позволяющий модифицировать изображение — фильтр Liquify (Разжижение). В Photoshop 6.0 соответствующая команда находится в меню Image (Изображение). Однако в Photoshop 7.0 эта команда уже перемещена в более подходящее для нее меню Filter (Фильтр).
Если вам требуется внести некоторое разнообразие, живость в текст или картинку, создать эффект вихря, волн и т. п., советуем попробовать применить этот инструмент. Мы не будем здесь его подробно описывать, поскольку будет лучше, если вы освоите его самостоятельно опытным путем. Отметим только, что в окне Liquify слева находятся значки выбора типа преобразования, а справа — параметры. Степень преобразования зависит от того, как долго вы будете удерживать нажатой кнопку мыши над преобразуемым объектом, а также от параметров кисти: Brush Size (Размер кисти) и Brush Pressure (Нажим кистью).

Рис. 241. Окно фильтра Liquify

 

241.gif

Изображение: 

13. Обработка фотографий

 

Обработка фотографий

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

 

14. Создание рамок

 

Создание рамок

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

Рис. 242. Исходная картинка

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

Теперь создаем новый канал. Для этого открываем палитру Channels (Каналы), используя кнопку внизу палитры Create new channel (Создать новый канал), создаем новый канал, который по умолчанию будет называться Alpha 1. В итоге на месте нашего первоначального изображения появится большой черный прямоугольник. Не пугайтесь — так и должно быть!

Рис. 243. Созданный новый канал будет носить имя Alpha 1 и сделается сразу активным, о чем свидетельствует выделение синим цветом его миниатюры на палитре Channels

Далее, с помощью инструмента Rectangular Marquee (Прямоугольное выделение) создаем прямоугольное выделение в нашем новом канале, отступив от краев ровно настолько, насколько широкую мы желаем получить рамку.
Теперь необходимо инвертировать полученное выделение, произведя следующую последовательность действий: выполняем команду Select>Inverse (Выделение>Инвертировать выделение) или просто нажимаем комбинацию клавиш <Shift>+<Ctrl>+<I>. Затем заливаем белым цветом образовавшееся между двумя пунктирными линиями пространство: Edit>Fill (Редактирование>Залить),авменю Contents>Use>White (Содержание>Использовать>Белый). В результате мы получаем черный прямоугольник в белой рамке.

Удаляем выделение командой Select>Deselect (Выделение>Убрать выделение (<Ctrl>+<D>)) и используем какой-нибудь фильтр, например: Filter>Pixelate>Color Halftone, а с параметрами можете поэкспериментировать сами.

Рис. 244. Создаем прямоугольное выделение по центру к инвертируем выделение, чтобы выделить рамку изображения

И, наконец, переходим обратно в RGB-канал и загружаем созданный нами шаблон — Select>Load Selection (Выделение>3агрузить выделение). Затем заполняем Edit>Fill (Редактирование>3алить) цветом фона, на котором будет лежать картинка.

Рис. 245. Заготовка рамки уже готова — осталось наложить само изображение

Вот в общем-то и все дела. Остается лишь отменить выделение, да не забыть сохранить полученное изображение.

Рис. 245. Окончательный результат — наша фотография обрела стильную рамку

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

Рис. 247. Несколько вариантов обрамления фотографии стильными рамками

 

242.gif

Изображение: 

243.gif

Изображение: 

244.gif

Изображение: 

245.gif

Изображение: 

245.gif

247.gif

Изображение: 

15. Другой способ создания рамок

 

Другой способ создания рамок

Описанный в предыдущем разделе способ обрамления подразумевает потерю части изображения, которая не попадает в рамку. А если рамка не сплошная, если в ней есть прозрачные участки? Следующий пример демонстрирует возможность сохранения изображения под «дырявой» рамкой.

Открываем фотографию (картинку), которую собираемся поместить в рамку.


Рис. 248. Эту фотографию мы собираемся поместить в очередную рамку

Инструментом Rectangular Marquee («Прямоугольное выделение») (<М>) выделяем прямоугольную область на изображении, устанавливая внутреннюю границу будущей рамки. Сохраняем выделение: Select>Save Selection. В палитре Channels (Каналы) появится новый канал с заданным именем (ramka).

Рис. 249. В палитре Channels создаем новый канал, который будет содержать будущую рамку

Активизируем этот канал, просто щелкнув на его миниатюре. Изображение на рабочем столе примет вид белого прямоугольника с черной рамкой по периметру. Инвертируем выделение командой Select>lnverse. Черная рамка будет выделена пунктиром изнутри и снаружи. Применяем фильтр Filter>Texture>Texturizer.

Параметр Scaling (Масштаб) устанавливаем в значение 190%, a Relief (Рельефность) — примерно в 45. Параметр Texture (Вид текстуры) выбираем в меню опытным путем (в примере мы выбрали Burlap, выбранная текстура чем-то напоминает мешковину). В результате применения настоящего фильтра рамка, которая еще недавно была абсолютно черной, примет свойства данной текстуры.

Рис. 250.

Рис. 251. Заготовка для будущей рамки

Включаем RGB-канал, щелкнув на его миниатюре в палитре Channels (Каналы). При этом канал с рамкой также должен оставаться активным.
Далее, канал с рамкой перетаскиваем на значок Load as selection (Загрузить как выделение) и снимаем выделение командой Select>DeseIect. Рамка готова. Как видите, эта рамка прозрачна, темные места изображения хорошо просвечивают. Таким образом, никакая часть изображения не теряется.

Рис. 252.

 

248.gif

Изображение: 

249.gif

Изображение: 

250.gif

Изображение: 

251.gif

Изображение: 

252.gif

Изображение: 

16. И еще одна рамка

 

И еще одна рамка

Настоящий пример демонстрирует еще один способ создания стильных рамок для фотографий. На этот раз рамка будет создаваться с использованием режима редактирования быстрой маски (Quick Mask).

Для примера открываем тот же файл с фотографией, который использовался в прошлый раз. Используя инструмент Rectangular Marquee («Прямоугольное выделение») (<М>), создаем прямоугольную внутреннюю границу будущей рамки, как и в прошлом примере. Далее переключаемся в режим редактирования быстрой маски — в нижней части панели инструментов щелкаем на значке Edit in Quick Mask Mode (Редактирование в режиме Быстрой маски) (<Q>). Теперь рамка приобретет полупрозрачный цвет, который был установлен как основной. Вместе с тем появится и новый канал, который будет содержать рамку. Выделение автоматически исчезнет. Поэтому его придется включать вновь: Select>Reselect (<Shift>+<Ctrl>+<D>). А затем сразу инвертируем выделение: Select>Inverse.
Теперь применим фильтр Filter>Pixelate>Mezzotint. В списке Туре (Тип) выбираем значение Fine dots (Хорошие точки).

Рис. 253.

Рис. 254.

Теперь возвращаемся в стандартный режим работы, щелкнув на значке Edit in Standard Mode. Выполняем команду Edit>Stroke (Редактирование>Обводка, Штрих). Устанавливаем ширину обводки (внутренней сплошной рамки — поле Width в группе Stroke) примерно 3 пиксела, а расположение (Location)Inside (Внутри).

В результате мы получаем рамку заданного цвета с полупрозрачной шумовой (штриховой) заливкой, обведенную внутри сплошной линией.

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

Рис. 255. Рамка с полупрозрачной шумовой (штриховой) заливкой, обведенная внутри сплошной линией

 

253.gif

Изображение: 

254.gif

Изображение: 

255.gif

Изображение: 

17. Фотомонтаж

 

Фотомонтаж

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

Рис. 256. Первое исходное изображение — из него «вырежем» девушку

Рис.257. Второе исходное фото послужит фоном

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

Первоначально работаем исключительно с первым рисунком. Инструментом Freeform Pen (Свободное перо) (<Р>), выбрав его из вариантов инструмента Рen (Перо) на палитре инструментов, выделяем из фотографии только тот фрагмент, который мы планируем переносить — девушку в кресле. Затем переходим в
палитру Paths (Контуры) и там, используя кнопку , Loads Path as a Selection (Загрузить контур как выделение), загружаем контур как выделение. Контур, который мы обвели, должен превратиться в типичное пунктирное выделение. Но тут нужно следить, чтобы наша картинка не имела заблокированный слой изображения. Иначе предварительно потребуется создавать копию такого слоя.

Рис. 258. Изображение девушки уже выделено контуром

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

Рис. 259. Окончательный результат — девушка помещена в пивной зал

 

256.gif

Изображение: 

257.gif

Изображение: 

258.gif

Изображение: 

259.gif

Изображение: 

18. Реставрация старинных фотографий

 

Реставрация старинных фотографий

В любом семейном фотоальбоме можно отыскать старинные снимки прадедушки или прабабушки. Время берет свое, а потому качество таких фотографий оставляет желать лучшего. Фотографии заметно выцвели, края пообтрепались, а некоторые уголки — и вовсе оторвались, фотобумага потрескалась. Короче, состояние действительно плачевное. И, если с натуральной фотографией уже ничего поделать нельзя, то вот цифровую ее версию еще можно попытаться реанимировать!

Рис. 260. Так выглядит фотография, сделанная в г. Осташков в 1920 году

Настоящую фотографию предварительно следует отсканировать. "Несмотря на то что изображение черно-белое, сканировать его необходимо в цвете. Затем очень внимательно осматриваем отдельно все цветовые каналы и выбираем только тот, в котором изображение в оттенках серого выглядит лучше всего. Ведь некоторые пятна будут видны только в одном из каналов.

В нашем случае лучше выглядел канал красного (Red). Здесь уже исчезла желтая окраска трещин.

Рис. 261.

Переключаемся в этот канал, а все остальные отключаем, используя команду lmage>Mode>Grayscale. Теперь наше изображение будет только в оттенках серого.
Для последующих работ по устранению царапин и трещин лучше увеличить масштаб изображения до 100-120%. Это позволит увидеть даже мельчайшие погрешности фотографии. Однако чтобы случайно не принять за царапину нужную деталь изображения, оригинальную фотографию будем держать всегда перед глазами.
Очень удобно использовать для реставрации инструменты клонирования — Clone Stamp (<S>). Если имеется достаточно большая трещина, то не нужно просто вести инструментом по ней. В этом случае все равно останется полоса на месте царапины. Лучше подбирать цвета хаотичным образом из разных частей изображения, но сходного оттенка. Тогда изображение становится более реалистичным.

Рис. 262. Левый нижний угол изображения до реставрации с использованием инструмента Clone Stamp

Рис. 263. Левый нижний угол изображения после реставрации с использованием инструмента Clone Stamp

Если в процессе работы произошла непредвиденная ошибка, не стоит сразу спешить воспользоваться командой Edit>Step Backward (<Alt>+<Ctrl>+<Z>) или <Ctrl>+<Z>. В этом случае лучше воспользоваться «Исторической
кистью» — History Brush. С ее помощью можно без труда убрать лишь действительно ненужные изменения.

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

Вышеописанный способ, конечно, не является единственным. Аналогичных результатов можно достичь, применяя фильтр размытия: Filter>BIur>Gaussian Blur.

Рис. 264. Это уже отреставрированная фотография — трещин и царапин практически не видно

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

Рис. 265. Применяем фильтр Gaussian Blur и размываем наше изображение до полного помутнения

Вместе с недостатками пропадет резкость всего изображения. Но это не беда! Далее будем пользоваться инструментом History Brush (Историческая кисть). Но применяем ее только там, где имеем заведомо хорошее качество изображение. То есть в тех местах, где были трещины и царапины данный инструмент не применяем. Это довольно долгая и кропотливая работа, требующая постоянной сверки с оригиналом.

Рис. 266. Фрагмент изображения — вот так возвращается из небытия исходное изображение

Рис. 267. Это изображение с размытым фоном - смотрится уже по-другому

Кстати, совершенно необязательно восстанавливать все изображение полностью. Можно восстановить только изображение первого плана, оставив фон размытым. Это придаст фотографии новое качество.

 

260.gif

Изображение: 

261.gif

Изображение: 

262.gif

Изображение: 

263.gif

Изображение: 

264.gif

Изображение: 

265.gif

Изображение: 

266.gif

Изображение: 

267.gif

Изображение: 

19. Имитация старинной фотографии

 

Имитация старинной фотографии

На предыдущем уроке мы говорили о том, как отреставрировать старинную фотографию, удалить с нее лишние трещинки, пятна и т. д. Однако в дизайне иногда требуется осуществить и абсолютно противоположные действия — из современной фотографии создать антиквариат.

Итак, подбираем интересную фотографию, которую будем старить. Здесь надо учесть, что нецелесообразно «старить» фотографию, на которой изображены ультрасовременные пейзажи.

Рис. 268. Исходная фотография, сделанная в наши дни

Выполняем команду Layer>New Adjustment Layer>Hue/Saturation.
Здесь нам предлагают ввести имя нового слоя, с которым будем работать далее. Оставляем то, что предлагают по умолчанию.

Рис. 269. Окно New Layer: создаем новый слой

В окне Hue/Saturation сразу устанавливаем флажок Colorize, что обеспечит черно-белые тона изображения. Теперь выставляем значения параметров: Hue — 143, Saturation — 26, значения параметра Lightness оставляем без изменений.

Рис. 270. В результате преобразований получаем черно-белое изображение

В результате преобразований мы получим черно-белое фото. Далее, в палитре Layers (Слои) активизируем слой с фотографией.

Выполняем команду Layer>New Adjustment Layer>Level. Задаем (или принимаем предложенное) новое имя слоя и переходим в окно Levels (Уровни). Здесь мы уменьшим контрастность изображения. Ползунками, которые соответствуют белым, серым и черным пикселам изображения, определяем их количество на нашем изображении.

Рис. 271. Окно Levels: уменьшаем контрастность изображения

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

Для усиления эффекта необходимо еще поработать над контрастностью. В палитре Layers (Слои) делаем активным слой с нашей фотографией (просто щелчком мыши на нем). Выполняем команду Layer>New Adjustment Layer>Curves (Кривые). Попытаемся несколько снизить яркость черных и белых тонов. Так мы усредняем яркость пикселов всех тонов.

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

Рис. 272.

Рис. 273.

Рис. 274. В результате работы с кривыми, добиваемся реальной мутности, низкой контрастности и яркости изображения

Вновь активизируем слой с исходным изображением цветной фотографии. Применим фильтр: Filter>Artistic>Film Grain. В открывшемся окне выставляем следующие значения параметров: Grain— 3, Highlight Area — 0, Intensity — 1. Если изображение не содержит слишком мелких деталей, то эти значения можно немного увеличить. Данный фильтр добавит в изображение шум, имитирующий крупнозернистость старинных фотографий.

Рис. 275. Фильтр Film Grain добавит в изображение шум, имитирующий крупнозернистость старинных фотографий

Далее объединяем слои командой Layer>Merge Visible (<Shift>+Ctrl+<E>). В палитре Layers (Слои) должен остаться только один слой Background.
В заключение можно просто добавить несколько трещин и царапин. Проще всего это делается с помощью обыкновенного «карандаша». Можно также изменить значение параметра Brush — след оставляемый карандашом. Для наглядного сравнения результатов нашего опыта с реальной старой фотографией приводим рядом фотографию 1920 года, использованную в предыдущем уроке.

Рис. 276. Состаренная фотография

Рис. 277. Реальная старинная фотография — трудно разобраться, где какая

 

269.gif

Изображение: 

270.gif

Изображение: 

271.gif

Изображение: 

272.gif

Изображение: 

273.gif

Изображение: 

274.gif

Изображение: 

275.gif

Изображение: 

276.gif

Изображение: 

276.gif

286.gif

Изображение: 

20. Эскиз с фотографии

 

Эскиз с фотографии

Допустим, у нас есть какой-нибудь фотоснимок. Но нам требуется оформить Web-страницу стилизованными рисунками, а присутствие фотографий на ней нежелательно вообще. На этом уроке мы как раз и будем решать задачу о преобразовании фотографии в карандашный или акварельный эскиз.

Рис. 278. Исходный фотоснимок

Для такого опыта наиболее удачно подходят фотографии с размытым фоном и относительно крупными объектами переднего фона с ярко выраженными границами (контурами). Если такую фотографию подобрать не удалось, то можно вывыделить отдельно фон и немного размыть его фильтром Filter>BIur> Gaussian Blur.
Для нашего эксперимента мы взяли фотографию кошки с мышкой в зубах. Здесь есть удачный однотонный фон. Поэтому сразу приступаем непосредственно к работе.

Создаем копию слоя с исходным изображением. Для этого просто перетаскиваем миниатюру данного слоя на палитре Layers (Слои) на значок Create a New Layer (Создать новый слой). Слой-копия займет первое место в списке имеющихся слоев и будет иметь имя Background Copy. Этот слой сразу становится активным.

Oбесцвечиваем изображение этого слоя командой Image>Adjust>Desaturate (<Shift>+<Ctrl>+<U>). Применяем фильтр Filter>Stylize>Glowing Edges с значениями параметров: Edge Width — 1, Edge Brightness — 12, Smoothness — 5.
Используем команду Image>Adjust>Levels (Уровни) (<Ctrl> + <L>). Изменяя здесь настройки, пытаемся высветить как можно больше значимых белых линий.

Рис. 279.

Рис. 280.

Инвертируем изображение командой Image>Adjust>lnvert (<Ctrl>+<I>) и применяем фильтр Filter>Artistic>Cutout с значениями параметров: No. of Levels — 7, Edge Simplicity — 3, Edge Fidelity — 3.

Рис. 281.

Вновь обратимся к уровням: Image>Adjust>Level (<Ctrl>+<L>). Здесь затемняем все темно-серые пикселы изображения до полностью черного цвета (значение параметра Input Levels — 121), а потом немного высветляем все изображение (Output Levels - 38).

Рис. 282.

Создаем копию этого слоя путем перетаскивания миниатюры слоя на палитре Layers (Слои) на значок . К слою-копии применяем фильтр FiIter>Blur>Gaussian Blur с радиусом размытия (Radius) 5 пикселов. Затем на палитре Layers (Слои) выставляем значение непрозрачности (Opacity) — 50%, а тип смешения — Screen. После чего группируем его с предыдущим слоем, расположенным на одну позицию ниже в той же палитре: Layer>Group with Previous (<Ctrl> + <G>). На миниатюре этого слоя появится стрелочка, направленная на слой, с которым произошла группировка.

Рис. 283.

Рис. 284.

В принципе, карандашный эскиз у нас уже готов. Да, он действительно не очень выразителен. Разукрасим его немного красками. Для этого сначала в палитре Layers (Слои) переходим к другому, тоже карандашному слою и задаем ему тип смешивания Overlay.

Теперь переходим в исходный (самый нижний) слой и применяем к нему фильтр Filter>Noise>Median с радиусом 2. Это значение подбирается чисто опытным путем и для каждой картинки будет оригинальным. Чем крупнее изображение, тем большим будет это значение. Данный фильтр создаст эффект применения акварели.

Рис. 285.

Рис. 286.

 

278.gif

Изображение: 

279.gif

Изображение: 

280.gif

Изображение: 

281.gif

Изображение: 

282.gif

Изображение: 

283.gif

Изображение: 

284.gif

Изображение: 

285.gif

Изображение: 

286.gif

21. Еще один портрет акварелью

 

Еще один портрет акварелью

Открываем документ, содержащий портретную фотографию.
Теперь выделяем все изображение: Select>All (<Ctrl> + <A>) и копируем это выделение в буфер: Edit>Copy (<Ctrl> + <C>). На палитре Layers (Слои) создаем новый слой щелчком на значке Create a New Layer (Создать новый слой). Новый слой автоматически получит имя Layer 2 (Слой 2) и будет активным. Вставляем в него из буфера хранящуюся там копию портрета. После этого возвращаемся к исходному изображению. Выполнив команду Image>Adjust>Hue/Saturation (<Ctrl>+<U>), придаем портрету тон, называемый «сепия». Включаем опцию Colorize и для параметра Saturation устанавливаем значение 23.

Рис. 287.

Рис. 288.

Далее к изображению применяем фильтр: Filter>Brush Strokes>Sumi-e. Устанавливаем следующие значения параметров: Stroke Width — 10, Stroke Pressure — 2, Contrast — 4.

Рис. 289.

Рис. 290.

Результат действия этого фильтра первоначально вас немного напугает. Но мы продолжаем — ведь это только промежуточный этап!

Затем выполняем команду Edit>Fade Sumi-e (<Shift> + <Ctrl> + <F>). Режим (Mode) устанавливаем в значение Multiply.

Рис. 291. Темные оттенки нашего изображения еще более усугубятся

Применяем фильтр Filter>Pixelate>Crystallize с значением 10 параметра Cell Size. А потом выполняем команду Edit>Fade Crystallize и устанавливаем значения параметров, соответственно Normal и 47.

Рис. 292. Фильтр Fade Crystallize преобразует изображение к мозаичному виду

Рис. 293.

Инструментом Eyedropper (Пипетка) (<I>) выбираем на нашем изображении один из светлых тонов. К изображению применяем фильтр: Filter>Sketch>Chalk & Charcoal со следующими значениями параметра»: Charcoal Aria— 6, Chalk Aria — 6, Stroke Pressure — I. И изображение изменится до неузнаваемости.

Рис. 294.

Выполняем команду Edit>Fade Chalk & Charcoal, установив значения Mode — Hard Light, Opacity Непрозрачность) — 57%.

Рис. 295.

Рис. 296.

Отрегулируем контрастность с помощью кривых: Image>Adjust>Curves.
Выделяем все полученное изображение и копируем его в буфер: Edit>Copy (<Ctrl>+<C>). Создаем новый слой, так же как мы это делали на первых этапах. В новый слой вставляем изображение из буфера.

Далее возвращаемся к слою с изображением, копию которого мы только что сделали. Здесь применяем фильтр: Filter>Artistic>Dry Brush с значениями параметров: Brush Size - 2, Brush Detail - 8, Texture —1.

Рис. 297. Применяем фильтр: Dry Brush

Рис. 298.

Затем применяем фильтр Filter>Artistic>Fresco с аналогичными параметрами (2,8, 1).

Рис. 299. Применяем фильтр: Fresco

Рис. 300.

Выполняем команду Edit>Fade Fasco и устанавливаем значения параметров 63 и Normal соответственно.

На завершающем этапе устанавливаем видимость всех трех имеющихся у нас слоев. Подрегулируем прозрачность двух верхних слоев. Сквозь них должен проступать первоначальный цветной слой. Он делает некоторые детали более точными. Объединяем все слои.

Рис. 301. Так будет выглядеть портрет в акварели

При желании здесь также можно использовать фильтр: Filter>Texture>Texturize, который придаст изображению эффект нанесения на холст.

Рис. 302. Изображение с использованием эффекта нанесения на холст

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

 

285.gif

285.gif

287.gif

Изображение: 

288.gif

Изображение: 

289.gif

Изображение: 

290.gif

Изображение: 

291.gif

Изображение: 

294.gif

Изображение: 

295.gif

Изображение: 

296.gif

Изображение: 

297.gif

Изображение: 

298.gif

Изображение: 

299.gif

Изображение: 

300.gif

Изображение: 

301.gif

Изображение: 

302.gif

Изображение: 

22. Паззл

 

Паззл

Эффект паззла позволяет сымитировать головоломку-мозаику, где все отдельные элементы имеют затейливые неровные формы и соединяются пазами. В осуществлении данного эффекта напрямую используются свойства непосредственно редактора Photoshop 6.0.

Ищем папку, в которой установлена программа Adobe Photoshop. Затем открываем файл, содержащий рисунок-шаблон паззла — Puzzle.psd. Обычно он располагается по следующему адресу:

C:\ProgramFiles\Adobe\Photoshop6.0\Presets\Textures\Puzzle.psd

У вас адрес может несколько отличаться, однако основные ориентиры для поиска мы вам дали.

Рис. 303. Так выглядит содержимое файла Puzzle.psd после его открытия а редакторе Photoshop

Выделяем все изображение, используя команду Select>All или комбинацию клавиш <Ctrl>+<A>. О выделении будет сигнализировать бегущая пунктирная линия по периметру рисунка.

Сохраняем выделенный фрагмент как шаблон, используя команду Edit>Define Pattern. В открывшемся окне выбираем имя файла, в котором мы собираемся сохранить сей шаблон. По умолчанию нам предложат то же самое имя, какое носит исходный файл (Puzzle.psd). В принципе, его можно и оставить.

Рис. 304.

Теперь подбираем файл, который мы хотим превратить в пазл. Открываем его в новом окне Photoshop.

Рис. 305. Именно это изображение мы и превратим в паззл

В палитре Layers (Слои) создаем новый слой. Далее используем инструмент Paint Bucket (Заливка) <G> из панели инструментов. Выполним команду Edit>Fill. Установим для параметра Use в группе Contents значение Pattern. А в меню Custom Pattern выбираем наш шаблон (Puzzle.psd). Изменим параметр слоя (Mode) с Normal на Multiply. Установим непрозрачность (Opacity) в значение 70—75%.

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

Рис. 306.

Рис. 307. Готовое изображение — осталось его напечатать и разрезать согласно разметке

 

303.gif

Изображение: 

304.gif

Изображение: 

305.gif

Изображение: 

306.gif

Изображение: 

307.gif

Изображение: 

23. Интересные примеры

 

Интересные примеры

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

 

24. Использование фильтра имитации 3D

 

Использование фильтра имитации 3D

Честно говоря, редактор Photoshop позволяет создавать только плоские рисунки. Однако в нем имеется фильтр, позволяющий создавать так называемые псевдотрехмерные изображения. Другими словами, используя фильтр Filter>Render>3D Transform, можно «натянуть» любое плоское изображение на тело заданной формы. Конечно, результат этой операции нельзя назвать трехмерной фигурой. Но кое-что все-таки можно попытаться сделать.

Создание бочонка

Как же сделать плоскую фигуру объемной? Для начала необходимо решить, какую фигуру мы собираемся создать. Затем выбираем подходящий фон, подойдя к этому этапу творчески. Но надо учесть, что из этого фона и будет изготовлена наша будущая фигура. На простом однотонном цветном фоне фигура будет плохо видна. Для этого случая лучше использовать фактурный фон.

Рис. 308. Исходный рисунок — плоский дощатый забор

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

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

Рис. 309. Рисуем черные линии — заготовки для колец бочонка

Эти линии наносятся с помощью инструмента «Кисть» (Brush) при нажатой клавише <Shift> (чтобы линии были прямыми).
Теперь применим указанный фильтр Filter>Render>3D Transform.

Рис. 310.

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

С помощью данного фильтра и имеющихся у него инструментов можно создать множество трехмерных геометрических фигур, которые можно разделить на три большие группы: кубы (Cube), сферы (Sphere) и цилиндры (Cylinder). Мы просто выбираем нужный инструмент и, удерживая кнопку мыши, рисуем, а точнее, растягиваем нужную фигуру на выбранном фоне. При этом первоначально получившаяся форма фигуры не очень-то и важна. Позднее ее можно без труда будет привести к нужному виду.

Рис. 311. В настройках фильтра 3D Transform выбираем группу цилиндров

Так как мы собрались делать бочонок, выбираем инструмент Cylinder («Цилиндр»). Его можно активизировать просто нажав клавишу <С>. Чтобы придать этому цилиндру форму бочонка, необходимо воспользоваться инструментами редактора цилиндра. Это три инструмента, которые добавляют или убирают узлы, с помощью которых и меняется фигура. Внешний вид и действие этих инструментов очень близки инструментам Реn («Перо»). Добавим пару таких узлов посредине правой стороны цилиндра. Много узлов добавлять не следует, ибо их обилие может помешать модернизации фигуры.

Рис. 312. Контур цилиндра планируем по центру фона

Модернизацию фигуры осуществляем инструментом Direct Selection (<A>) — это белая стрелка в самом верху палитры инструментов в дкне данного фильтра. Мы просто указываем на нужный узел и оттягиваем его в нужном направлении, придав цилиндру форму, более или менее похожую на бочонок.

Рис. 313. Придаем цилиндру форму бочонка

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

Итак, все подготовительные операции закончены. В принципе, объемная фигура уже готова. Но мы ее еще не видим. Для того чтобы бочонок стал действительно виден в пространстве, имеет смысл несколько сместить его. Для этого используются инструменты перемещения в трехмерном пространстве. Таких инструментов два — «Панорамная камера» (Pan Camera) и «Трекбол» (Trackball).

Рис. 314.

Рис. 315.

Теперь подбираем нужное положение бочонка и сохраняем получившийся результат. Фигура будет «вклеена» на первоначальный фон. Впрочем, можно сохранить результат и на прозрачном фоне. Для этого нужно нажать кнопку Options и в открывшемся окне снять флажок Display Background.

Рис. 316. Для сохранения результата на прозрачном фоне, в окне Options необходимо снять флажок Display Background

После некоторой доработки изображения мы получаем вполне правдоподобный бочонок.

Рис. 317. Готовый бочонок

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

Создание планеты

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

Рис. 318. Одно из простейших применений фильтра ЗD-шар

Далее, создадим обруч, опоясывающий наш шар. Для этого используем инструмент Cylinder (Цилиндр) фильтра. Но высоту цилиндра делаем минимальной, а радиус — побольше (должен получиться «блин»). Затем ориентируем этот блин относительно шара, опираясь на чувство вкуса. На заключительном этапе осуществляем поворот получившейся фигуры так, чтобы стал виден объем фигуры.

Рис. 319. А вот что получается при совместном использовании нескольких элементов, полученных при помощи фильтра 3D

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

Рис. 320. То же самое изображение, но после дополнительного применения фильтра Filter>Render>Difference Clouds

Рис. 321. Продолжение эксперимента — ко всему уже созданному мы применили фильтр Hlter>Render>Lans Flare. Он создает солнечный блик

Рис. 322.

Рис. 323. Применен фильтр Fttter>Render>Lightmg Effects. Сего помощью можно сделать еще и не такую подсветку!

Рис. 324. А это мы сделали, применив ко всему прочему еще и фильтр Filter>Brush Strokes>Accented Edges

Рис. 325. Импровизация на тему любимого авторами пива, хотя это больше похоже на стаканчик мороженного...

 

308.gif

Изображение: 

309.gif

Изображение: 

310.gif

Изображение: 

311.gif

Изображение: 

312.gif

Изображение: 

313.gif

Изображение: 

314.gif

Изображение: 

315.gif

Изображение: 

316.gif

Изображение: 

317.gif

Изображение: 

318.gif

Изображение: 

319.gif

Изображение: 

320.gif

Изображение: 

321.gif

Изображение: 

322.gif

Изображение: 

323.gif

Изображение: 

324.gif

Изображение: 

325.gif

Изображение: 

25. Пулевое отверстие

 

Пулевое отверстие

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

Итак, создаем новый документ. Нам не нужны слишком большие размеры этого документа: 200x200 пикселов вполне хватит для начала. Фон подберите на свое усмотрение. Вы даже можете использовать для фона какой-нибудь готовый рисунок, который хотите изрешетить пулями. Мы же для примера решили выбрать военный фон цвета хаки.

Далее, создаем новый слой. Инструментом Rectangular Marquee («Прямоугольное Выделение») выделим прямоугольную область, шириной примерно 50 пикселов от левого края рисунка. Выполнив команду Edit>Fill, устанавливаем параметр Use в значение White (Белый) и заливаем выделенную область белым цветом.

Рис. 326.

Рис. 327.

Отключаем выделение, иначе ни одна последующая операция у нас просто не получится. Теперь используем фильтр (предварительно повернув изображение на 90° против часовой стрелке), уже хорошо знакомый вам по другим урокам, Filter>Stylize>Wind, установив переключатель Direction (Направление) в положение From the Left (Слева). Если покажется, что действие фильтра недостаточно видно на нашем рисунке, можно повторить его, использовав для этого комбинацию клавиш <Ctrl>+<F>. Затем возвращаем изображение в исходное вертикальное положение: поворачиваем изображение с помощью команды Image>Rotate canvas>90°CW.

Рис. 328.

Далее еще раз повторим фильтр Filter>Stylize>\Vind слева (From the Left), и снова этот же фильтр, но уже справа (From the Right).

Рис. 329.

В итоге мы получим несколько смазанное (потрескавшееся) изображение. Теперь инвертируем наше изображение, используя команду Image>Adjust>Invert (Изображение>Настройка>Инверсия). Тогда все то, что у нас было белым, станет черным, и наоборот. Вновь применяем фильтр: Filter>Distort>Ripple (Фильтры>Искажение>Рябь).

Рис. 330.

Установим значение параметра Amount около 70%.

Рис. 331.

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

Ну а теперь переведем полученное изображение в полярную систему координат, используя фильтр Filter>Distort> Polar coordinates, установив флажок Rectangular to Polar (Прямоугольные в полярном).

Рис. 332. В принципе — это уже готовое отверстие, но не помешало бы придать больше реализма

В принципе, мы уже получили требуемое отверстие. Оно даже рваное. Однако не хватает еще реализма. Чтобы его добавить, используем эффекты слоя: Layer>Layer Style>Bevel and Emboss.

Рис. 333.

Обратите внимание: параметр Style в группе Structure устанавливаем в значение Outer Bevel, а переключатель Direction (Направление) — в положение Down (Вниз). Данные установки позволят нам создать видимость того, что данное отверстие является для пули входным. Кроме того, образуется рельефность материала, в который вошла пуля.

Рис. 334. На последнем этапе создаем видимость того, что отверстие является входным

Вот, в общем-то, и все. Отверстие готово! Для того чтобы это действительно было пулевое отверстие, а не черный кружок с рваными краями, можно осуществить данный эксперимент, уже взяв в качестве фона подходящий рисунок. Изменяя первоначальные размеры документа, а также прочие настройки, мы можем добиться изменения диаметра и усиления «рваности» отверстия.

 

326.gif

Изображение: 

327.gif

Изображение: 

328.gif

Изображение: 

329.gif

Изображение: 

330.gif

Изображение: 

351.gif

Изображение: 

352.gif

Изображение: 

353.gif

Изображение: 

354.gif

Изображение: 

26. Штрих-код

 

Штрих-код

Штрих-код — сугубо технический товарный символ-код, в котором зашифрована вся полезная и полная информация о продаваемом товаре. Цифрами и полосками здесь кодируется информация о фирме-производителе, товаре, его цене т. д. Такие знаки есть и на отечественных продуктах. Они облегчают обслуживание покупателей во многих магазинах. Существует множество специальных программ, которые непосредственно кодируют информацию о товаре по существующим правилам.

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

Итак, создаем новый документ. Не стоит определять требуемы и размер штрих кода в реальном масштабе. А главное — данный документ не должен иметь прозрачный фон! Это главное начальное условие, иначе у нас просто ничего не полу чится.
Применим фильтр зашумления: Filter>Noise>Add Noise с следующими значе ниями параметров: в поле Amount — 400%, переключатель Distribution — в положении Gaussian, флажок Monochromatic — установлен.

Рис. 335.

Рис. 336. Просто зашумляем все рабочее поле документа, используя окно Add Noise (Добавим шум)

Теперь применим фильтр FiIter>Blur>Motion Blur. Значение параметра Angle устанавливаем равным 90 — это позволит размыть шум вертикально. Ползунок Distance передвигаем в максимальное (самое правое) положение 999 пикселов.

Рис. 337.

Рис. 338. Фильтр Motion Blur с значением Angle=90 позволяет «растянуть» шум сверху вниз

После выполнения этих установок вы получите нечто, напоминающее штрих-код — но это еще только заготовка!

Далее немного поработаем над контрастностью. Сначала выполняем команду Image>Adjust>Curves (<CtrI>+<M>). Устанавливаем кривую, аналогичную той, что приводится в примере на рисунке. О том, что отображает эта кривая, мы подробно рассказывали в начале главы, экспериментируя с надписями (например, когда делали золотой текст).

Рис. 339. Диалоговое окно Curves. Изменяя вид кривой, можно изменить и вид штрих-кода

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

Рис. 340.

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

Рис. 341.

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

 

Рис. 342. Готовый штрих-код

Теперь полученное изображение можно применять как элемент оформления для вашего дизайна.

 

335.gif

Изображение: 

336.gif

Изображение: 

337.gif

Изображение: 

338.gif

Изображение: 

339.gif

Изображение: 

340.gif

Изображение: 

341.gif

Изображение: 

342.gif

Изображение: 

27. Эффект молнии

 

Эффект молнии

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

Создаем новый небольшой (400x200 пикселов) документ. В качестве фона создаем вертикальный градиент серых тонов. Для этого выбираем инструмент Gradient (его можно найти в семействе Paint Bucket). На появившейся вверху окна Photoshop панели параметров данного инструмента выбираем нужный вид
черно-белого градиента.

Рис. 343.

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

Заливаем фон черно-белым градиентом так, чтобы черный цвет оказался вверху.

Рис. 344.

Используем команду Filter>Render>Difference Clouds. В результате получаем своеобразное размытие созданного до этого градиента. Обратите внимание: где-то посредине нашего рисунка должна проходить неровная, но почти горизонтальная, черная линия. А высветления будут расходиться соответственно вверх и вниз от этой линии.

Рис. 345. Размытие градиента получается в результате применения команды Difference Clouds

Инвертируем полученное изображение, используя команду Image>Adjust>Invert (<Ctrl>+<I>).

Рис. 346.

Результат настоящей инверсии уже чем-то будет напоминать черно-белый фотоснимок неба во время грозы. Теперь увеличим контрастность в данном изображении. Командой Image>Adjust>Levels (<Ctrl>+<L>) открываем окно Levels (Уровни).

Рис. 347.

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

Рис. 348. Уже готовое изображение молнии, но черно-белое. Осталось подкрасить его в реальные цвета

Итак, мы получили ярко выраженную белую неровную линию молнии на фоне черного неба. Но до сих пор наше изображение имеет черно-белый цвет. Для придания более реалистичного вида нашему изображению, добавим немного синевы — все-таки разряд электрический!

Выполнив команду Image>Adjust>Hue/Saturation (<Ctrl>+<U>), в открывшемся окне Hue/Saturation устанавливаем флажок Colorize, а затем ползунками добиваемся необходимого эффекта (синевы).

Рис. 349.

Рис. 350.

 

344.gif

Изображение: 

345.gif

Изображение: 

346.gif

Изображение: 

347.gif

Изображение: 

348.gif

Изображение: 

349.gif

Изображение: 

370.gif

Изображение: 

28. Создание кнопок

 

Создание кнопок

Кнопки часто встречаются на Web-страницах, имеющих навигационную систему. Конечно, вполне можно обойтись средствами HTML, а также редакторов Web-страниц, которые уже имеют довольно широкий выбор стандартных кнопок. Но если вы желаете сделать Web-страницу действительно стильной, то вам придется сотворить кнопки самостоятельно.

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

Прямоугольная кнопка

Открываем новый документ. Командой Image>Mode>Grayscale переводим документ в режим градаций серого цвета. Создаем изображение прямоугольника с параметрами будущей кнопки. Для этого используем инструмент из палитры инструментов . Теперь переводим изображение в режим RGB. На палитре Color (Цвет) значения параметров R, G и В устанавливаем около 170. Заливаем наш прямоугольник серым цветом, используя инструмент Paint Bucket (Ковш) <G>.

Рис. 351.

Рис. 352.

После этого переводим наше изображение в режим Bitmap с помощью команды Image>Mode>Bitmap. Устанавливаем в списке Use в группе Method (Метод) значение Halftone Screen.

Рис. 353.

Рис. 354.

В открывшемся окне устанавливаем значения параметров для Halftone Screen: Frequency — 256 lines/inch (линий на дюйм); Angle — 45; Shape — Round. В результате преобразований прямоугольник будет залит мелкими серыми звездочками.

Теперь вновь переведем наше изображение в режим Grayscale с помощью команды Image>Mode>Grayscale. Отношение размеров Size Ratio устанавливаем — 1, т. е. один к одному. После этого переведем наше изображение в режим RGB. В э-том режиме применяем фильтр: Filter>Stylize>Find Edges. Наш прямоугольник должен обрести темную окантовку.

Рис. 355. В режиме RGB применяем фильтр Stylize >Fmd Edges, что придаст прямоугольнику темную окантовку

Применяем фильтр Filter>Blur>Motion Blur с значениями параметров: Angle — 36°, Distance — 19 пикселов. Параметр Angle регулирует, угол падения тени, а Distance — глубину этой тени. Приведенные здесь значения параметров не являются обязательными (как, впрочем, и во всех остальных примерах). Вы можете подобрать их экспериментально на свое усмотрение, регулируя выпуклость вашей кнопки.

Рис. 356. Параметр Distance устанавливает глубину тени

Разукрашиваем изображение, используя команду Image>Adjust>Hue/Saturation. Однако первоначальный цвет делаем спокойным: не яркий и не слишком тусклый. Настраиваемый здесь цвет в будущем будет цветом окантовки кнопки.

Рис. 357.

Выделяем инструментом Rectangular Marquee (Прямоугольное выделение) выпуклую область кнопки. Немного высветляем ее, применяя кривые: Image> Adjust>Curves (<Ctrl>+<M>).

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

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

Рис. 359.

Это вполне готовая кнопка. Основные операции по ее подготовке уже закончены. Но мы видим, что наша кнопка имеет срезанные левый верхний и правый нижний углы. Для того чтобы сделать форму кнопки правильным прямоугольником, выделяем прямоугольный фрагмент правой верхней части кнопки — там, где кнопка имеет вид, который нас вполне устраивает. Для выделения используем инструмент Rectangular Marquee (Прямоугольное выделение). Затем копируем этот фрагмент в буфер: Edit>Copy (<Ctrl>+C). Обратите внимание: должен быть активным слой с основным изображением, иначе ничего не получится. Вставляем изображение из буфера: Edit>Paste (<Ctrl>+<V>). Оно должно образовать новый слой. А располагаться будет на том же месте, где было выделено. Удерживая левую кнопку мыши, сдвинем этот фрагмент на пустой фон.

Командой Image>Rotate Canvas>FIip Horizontal развернем изображение зеркально в горизонтальной плоскости. Вновь выделяем наш фрагмент (теперь он принял вид своего зеркального отражения) и вновь копируем его в буфер. После чего еще раз выполняем команду Image>Rotate Canvas>Flip Horizonval, чтобы вернуть изображение в исходное состояние. А затем удаляем слой, содержащий выделенный фрагмент: миниатюру с его изображением (обычно самая верхняя) на панели Layers (Слои), удерживая левую кнопку мыши, перетаскиваем на значок корзины .

На холсте у нас осталось только изображение заготовки кнопки. Используя команду Edit>Paste (<Ctrl>+<V>), вставляем фрагмент из буфера. Мышью перетаскиваем его в левый край кнопки и ориентируем так, чтобы верхний левый угол стал прямоугольным. Аналогичным образом исправляем нижний правый угол.
Настало время добавить на заготовку кнопки текст. Выбираем инструмент и в светлом прямоугольнике набираем текст. Предварительно меняем цвет текста на более подходящий (ведь по умолчанию у нас выбран цвет, которым мы заливали все изображение кнопки). Текст размещаем ровно посредине внутреннего прямоугольника.

Для выравнивания граней кнопки можно их немного размыть. Для этого выделяем центральный прямоугольник инструментом выделения (<М>), а потом командой Select>Inverse инвертируем выделение. Далее фильтром Filter> Blur>Gaussian Blur немного размываем грани кнопки. Вот и все.

Рис. 360. Еще одна кнопка

Есть еще один, принципиально отличающийся от рассмотренного выше, способ создания прямоугольных кнопок. Итак, создаем новый документ небольшого размера (в зависимости от габаритов будущей кнопки). Главное условие — документ должен иметь прозрачный фон. Поэтому, выполнив команду File>New, для параметра Contents устанавливаем значение Transparent. Когда новый документ откроется, он будет иметь серый клетчатый фон.

Рис. 361. Создаем новый документ, в зависимости от габаритов будущей кнопки

На палитре инструментов выбираем инструмент Rectangular Marquee (Прямоугольное выделение) (<М>). Для него задаем параметры: Style (Стиль) — Fixed Size (Фиксированный размер), Width (Ширина) — 1>0 pixels (пикселов), Height — 40 pixels (пикселов). Такие настройки создают прямоугольное выделение с фиксированными размерами.

Мы получили пунктирный прямоугольник. Теперь создадим к нему окантовку с немного скругленными углами. Выполнив команду Select>Modify>Smooth, скругляем углы прямоугольника выделения. При этом значение радиуса округления (Sample Radius) устанавливаем примерно в 10 пикселов.

Рис. 362. Значение радиуса округляем примерно в 10 пикселов

Таким образом, мы получили прямоугольник с закругленными углами. Теперь заливаем выделение нужным цветом (у нас — красным).

Далее расширяем границы нашего выделения, примерно на 10 пикселов: Select>Modify>Expand (Выделение>Модификация>Расширение). В результате пунктирное выделение расширится на 10 пикселов во все стороны, между красным объектом и новым выделением образуется пространство шириной 10 пикселов.
Создаем бордюр (границу, окантовку) нашей кнопки, используя команду: Select>Modifity>Border. Ширину бордюра устанавливаем 5 пикселов. Теперь у нас есть двойное наружное выделение. Теперь выбираем цвет для заливки пространства между границей и серединой. Для него выбираем цвет немного посветлее (бледно-красный), чтобы отличался. В заключение набираем необходимый текст и центрируем его на кнопке.

Рис. 363. В заключение набираем и центрируем нужный текст

Для того чтобы применить кнопку на Web-странице с прозрачным фоном, сохраняем изображение в файле GIF-формата (команда FiIe>Save As).

Панель с кнопками (меню)

Ранее мы рассмотрели примеры создания кнопок. Однако отдельные кнопки в Web-страницах используются редко. Наиболее популярны группы кнопок, организующие меню.
Создаем новый документ, вытянутой вертикальной формы. Фон заливаем темным цветом мягких оттенков. Далее, создаем новый слой, щелкнув на значке Create a New Layer (Создать новый слой) в палитре Layers (Слои). Теперь выбираем инструмент Rectangular Marquee («Прямоугольное выделение») (<М>). Для того чтобы создать квадратное выделение, необходимо удерживать нажатой клавишу <Shift>. После создания квадратного выделения выбираем инструмент Gradient («Градиент») (<G>). Для градиента на панели параметров выбираем выпуклую заливку «от центра к углам» (коническую).

Рис. 364.

Для заливки выделения выбранным градиентом нажимаем левую кнопку мыши и, удерживая ее, протягиваем направляющую градиента из левого нижнего угла в правый верхний.

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

Рис. 365. Заливаем квадратик градиентом из левого нижнего в правый верхний угол

Выполняем команду Selection>Modify>Contract. Устанавливаем значение параметра Contract — 4 пиксела. Эта установка уменьшает ранее установленное выделение по диагонали на 4 пиксела. Затем, используя инструмент Paint Bucket <G> («Ковш»), заливаем выделение каким-либо оттенком серого цвета. Примененный эффект создает объемность кнопки. Снимаем выделение: Select>Deselect (<Ctrl>+<D>).

Теперь вновь выбираем инструмент прямоугольного выделения (<М>). Выделяем правую половину нашей квадратной кнопки. Удерживая комбинацию клавиш <Shift>+<Ctrl>+<Alt>, нажимаем клавишу <> до тех пор, пока кнопка не обретет необходимую длину.

Рис. 366. Подгоняем клавишами управления курсором необходимый объем кнопки

Снимаем уже не нужное выделение: Select>Deselect. Выделяем всю кнопку целиком. Удерживая комбинацию клавиш <Shift>+<Ctrl>+<Alt>, копируем созданную кнопку. Полученную копию мышью перетаскиваем ниже первой кнопки. Следует обратить внимание на то, что между кнопками не должно быть просвета фона. Повторяем вышеописанные операции необходимое число раз.

Рис. 367. Путем копирования маленького фрагмента увеличиваем кнопку до нужного размера

В результате мы получили колонку из нескольких (в нашем примере из семи) кнопок будущего меню.

Рис. 368. Составляем колонку из необходимого числа кнопок — это основа будущего меню.

Создаем новый слой, щелкнув на значке Create a New Layer (Создать новый слой) на палитре Layers (Слои). В этом слое создаем вертикальное овальное выделение с правой стороны будущего меню, используя инструмент Elliptical Marquee (<M>). Форму и размер овала выбираем по вкусу.

Рис. 369. Выделенную овальную область заливаем вертикальным серым градиентом так, чтобы более темный цвет был ближе к кнопкам

Заливаем выделенную область вертикальным серым градиентом так, чтобы темный цвет находился ближе к кнопкам. Удерживая нажатой клавишу <Ctrl>, щелкаем на миниатюре слоя с меню. Тем самым мы выделяем всю панель кнопок. Затем инвертируем выделение: Select>Inverse (<Shift>+<Ctrl>+<I>), а потом удаляем выделенный фрагмент (<Delete>). В результате имеем серую градиентную заливку в рамках панели меню.

Рис. 370. Выделяем область образованной фигуры, а лишнее — удаляем

Создаем новый слой. На верхней кнопке делаем прямоугольное выделение так, чтобы до границ кнопки оставалось немного места. Заливаем выделение горизонтальным линейным градиентом серых оттенков.

Для большего эффекта можно добавить еще по углам черные точки — «винтики». Они выполняются с помощью простого карандаша.

Рис. 371. Для большего эффекта по углам кнопок расставляем черные точки — «винтики»

Используя команду Image>Adjust>Hue/Saturation (<Ctrl>+<U>), изменяем цвет заливки кнопок. Затем, используя инструмент Туре (Текст), набираем на каждой кнопке соответствующий текст.

Рис. 372. На заключительном этапе вписываем необходимые пункты меню

Вот все и готово. Полученную картинку можно использовать на Web-странице. Соответствующие текстовые ссылки можно сделать уже в HTML.

 

364.gif

Изображение: 

365.gif

Изображение: 

371.gif

Изображение: 

372.gif

Изображение: 

373.gif

Изображение: 

374.gif

Изображение: 

375.gif

Изображение: 

376.gif

Изображение: 

377.gif

Изображение: 

378.gif

Изображение: 

379.gif

Изображение: 

380.gif

Изображение: 

381.gif

Изображение: 

382.gif

Изображение: 

383.gif

Изображение: 

386.gif

Изображение: 

387.gif

Изображение: 

388.gif

Изображение: 

389.gif

Изображение: 

390.gif

Изображение: 

391.gif

Изображение: 

392.gif

Изображение: 

29. Работа с цветом

 

Работа с цветом

Выделение цветом

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

Рис. 373. Открываем документ, содержащий цветное изображение.

Сразу же делаем копию этого изображения: Image>DupIicate. Командой Image>Mode>GrayscaIe преобразуем изображение-копию в режим оттенков серого цвета. Далее выделяем все изображение командой Select>AlI (<Ctrl>+<A>) и копируем командой Edit>Copy (<CtrI>+<C>).

Теперь возвращаемся к исходному (цветному) изображению и вставляем из буфера его черно-белую копию: Edit>Paste (<Ctrl>+<V>). Все изображение примет черно-белый цвет.

В палитре инструментов выбираем инструмент Eraser (Ластик) (<Е>). На панели свойств инструмента значение параметра Opacity (Непрозрачность) устанавливаем в пределах 80-90%, Mode (Вид) — в значение Paintbrush (Кисть). В меню следов кисти (Brush) выбираем подходящий вид оттиска. Если изображение, которое следует выделить цветом, маленькое, то и оттиск должен быть соответствующим.

Рис. 374. На этом рисунке цвет имеют только котенок и третья рюмка

Начинаем тереть «ластиком» то место, где расположен выделяемый объект. Постепенно он начнет приобретать свой цвет, в то время как все остальное изображение будет оставаться черно-белым. В процессе стирания можно менять вид кисти. В нашем примере мы выделяли цветом котенка и этикетку средней бутылки.

Замена цвета

Настоящий урок демонстрирует возможность замены цвета на необходимом элементе изображения. Конечно, настоящую операцию можно осуществить простым использованием инструмента заливки Paint Bucket («Ковш») (<G>). Но в этом случае теряются оттенки исходного изображения.

Итак, открываем исходное изображение. Здесь изображен пес в красном костюме Сайта-Клауса. У нас задача «переодеть» пса в аналогичный костюм, только синего цвета.

Выполняем команду Image>Adjust>Replace Color. В открывшемся окне активизированной (крайней левой) пипеткой выбираем цвет, который будем заменять. Он тут же появится в квадратном окошке Sample (Образец).
Теперь, изменяя положения ползунков Hue (Цветовой тон), Saturation (Насыщенность) и Lightness (Яркость), добиваемся «посинения» образца. Результат тут же будет отображаться и на изображении.

Рис. 395. Исходное изображение — песик одет в красный костюм Санта-Клауса

Рис. 396.


Рис. 398.

Кроме того, окончательной перекраски добиваемся изменением значения параметра Fuzziness (Разброс). Он определяет границы, в которых и будут изменяться оттенки цвета. При минимальном значении данного параметра перекрашиваться будут только те пикселы, которые абсолютно соответствуют выбранному образцу. В нашем случае мы установили значение этого параметра -140.

Замена цвета элемента изображения

А вот еще один способ изменения цвета конкретного фрагмента изображения. Этот способ практически не отличается от описанного выше. Он демонстрирует возможность перекрашивания отдельного маленького объекта на общем изображении.

Рис. 378. Исходный рисунок — все помидоры красные

Для начала выделяем объект, цвет которого будем изменять. Мы будем менять цвет второго верхнего красного помидора.

На панели инструментов выбираем инструмент Magnetic Lasso («Волшебное лассо») (<L>). Им очень удобно выделять однотонные объекты неправильной формы. Используя этот инструмент, аккуратно выделяем второй сверху помидор. Выполняем команду Image>Adjust>Replace Color (Изображение>Установка>Замена цвета), а далее выполняем аналогичные действия, описанные в предыдущем примере. В результате помидор получает кислотно-зеленый цвет.

Рис. 379.

Рис. 380.

To же самое можно сделать, используя команду Image>Adjust>Hue/Saturation (Оттенок/Насыщенность) (<Ctrl>+<U>).

Рис. 381.

 

393.gif

Изображение: 

394.gif

Изображение: 

395.gif

Изображение: 

396.gif

Изображение: 

398.gif

Изображение: 

398.gif

399.gif

Изображение: 

400.gif

Изображение: 

401.gif

Изображение: 

30. Создание текстуры

 

Создание текстуры

Для создания фона Web-страницы, для заливки некоторых полей таблиц или меню в Web-дизайне иногда используют так называемые текстуры. Существуют довольно обширные коллекции текстур. Однако сейчас вам предлагается один из простейших способов создать собственную текстуру.

Создаем новый документ 200x200 пикселов с белым фоном в режиме RGB. За-шумляем фон, используя фильтр Filter>Noise>Add Noise (Фильтр>Шум>Добавить шум). Устанавливаем следующие значения параметров: Amount — 86, 63%, Distribution — Gaussian.

Рис. 382.

Теперь используем другой фильтр: FiIter>Stylize>Emboss.

Рис. 383. Фильтр Emboss немного смягчит эффект, полученный на первом этапе

Параметры устанавливаем в следующие значения: Angle (Угол) — 53°, Height (Высота) — 2 (пиксела), Amount (Суммирование) — 70%. Этот фильтр немного сгладит установленный на первом этапе эффект. Изображение приобретет некоторую фактурность.

Но все это только заготовка (хотя и ее уже можно отдельно применить). Для того чтобы придать изображению нужный цвет (и оттенок), воспользуемся командой Image>Adjust>Hue/Saturation>Brightness.

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

Рис. 384.

Рис. 385

 

402.gif

Изображение: 

403.gif

Изображение: 

404.gif

Изображение: 

405.gif

Изображение: 

31. Плавный переход в другую картинку

 

Плавный переход в другую картинку

Подбираем две более-менее подходящие друг к другу картинки и последовательно открываем их.

Рис. 386. Это две исходные картинки

Теперь активизируем нашу первую картинку. На ней изображен самолет в полете. Но самолет летит в нижней части картинки, что не очень подходит для нашего будущего слияния. Необходимо самолет приподнять. Для этой цели будем использовать метод клонирования и инструмент Clone Stamp (<S>). Выбираем инструмент на палитре инструментов. Затем переходим на то место картинки, с которого собираемся начать клонирование. Удерживая нажатой клавишу <Alt>, щелкаем мышью. Курсор примет вид штампа, а затем вновь кружочка. Переводим кружочек в верхнюю часть картинки — туда, куда будет перемещен самолет. Удерживая левую кнопку мыши, водим перекрестием по старому самолету, а кружочком рисуем новый.

Рис. 387. Инструментом Clone Stamp переносим самолет немного повыше

После того как новый самолет будет готов, на место старого аналогичным способом клонируем облака. Материал для клонирования лучше брать из разных мест неба.
Наконец, выделяем все изображение: Select>All (<Ctrl>+<A>). Затем копируем его в буфер обмена: Edit>Copy (<Ctrl>+<C>).

Переходим ко второй картинке. Включаем режим редактирования быстрой маски (Quick Mask) инструментом Edit in Quick Mask mode (<Q>). Рисуем горизонтальный градиент от черного к белому. Так как мы находимся в режиме быстрой маски, белый цвет будет казаться прозрачным, а черный — красным. Причем чем краснее, тем прозрачнее будет это место в нормальном режиме.

Рис. 388. В режиме редактирования быстрой маски белый цвет будет прозрачным, а черный — красным

Отключаем режим быстрой маски: для этого щелкаем на значке Edit in Standard Mode (<Q>). Все «покраснения» тут же исчезнут, но появится выделенная область. Теперь вспомним о том изображении, которое мы недавно копировали в буфер. Пришло время вставить его в выделенную область. Для этого используем команду Edit>Paste Into (Редактирование>Вставить в).

Рис. 389. Вот и готов наш коллаж. Об ассоциациях умолчим

Наложение изображений

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

Рис. 390. Первое изображение, которое будет участвовать в нашем коллаже

Рис. 391. Второе изображение, которое будет участвовать в нашем коллаже

Открываем для примера две картинки. Активизируем одну из них. Здесь выделяем инструментом выделения нужный для совмещения фрагмент. (Впрочем, можно выделить и всю картинку.) Копируем его в буфер обмена: Edit>Copy (<Ctrl>+<C>). Переходим к следующей картинке и вставляем в нее содержимое буфера: Edit> Paste (<Ctrl> + <V>). В итоге мы имеем два слоя в одной картинке. Но виден только верхний.

Рис. 392. Окончательный вариант коллажа — гора на переднем плане, как будто так и было!

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

Загибающийся уголок

Настоящий эффект имитирует завернувшийся уголок бумажного листа. Это интересный способ оформления картинок на Web-странице.

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

В этом документе выделяем лучший фрагмент, с которым будем работать далее. Копируем его в буфер: Edit>Copy (<Ctrl>+<C>). Он пригодится нам чуть позже.

Рис. 393. Оригинальная фотография

Теперь создаем новый документ приблизительно таких же размеров, как выделенный фрагмент. Первоначально он будет иметь абсолютно белый фон. Именно этот фон и будет выглядывать из-под загнувшегося уголка. Поэтому сейчас есть возможность сделать «подложку» нужного оттенка. Не стоит засовывать туда какое-нибудь другое изображение. Лучше зальем фон розовым цветом, а потом добавим шума: Filter>Noise>Add Noise.

Затем, используя соответствующий значок в палитре Layers (Слои), создаем новый слой (Create a New Layer). В этот слой загружаем нашу первую картинку из буфера: Edit>Paste.

Рис. 394. Зальем фон подложки розовым цветом и добавим шума

Используя инструмент Elliptical Marquee (<M>), рисуем большой круг (или овал). А потом выравниваем его так, чтобы правый нижний угол изображения отсекался частью дуги этого круга. Таким образом, должен образоваться треугольник, катетами которого являются две границы изображения, а гипотенузой — та самая дуга от круга. Причем остальные части круга нигде больше появляться не должны.
Теперь используем команду Layer>Add Layer Mask>Reveal Selection. По ее выполнении исчезнет часть изображения, попавшая внутрь треугольника.

Рис. 395.

Нажав и удерживая нажатой клавишу <Ctrl>, щелкаем на миниатюре активного слоя в палитре Layers (кстати, эта миниатюра несколько изменилась — добавилось изображение маски). Так мы загрузили область выделения, которую создали чуть раньше. Переходим в режим редактирования «быстрая маска» (Quick Mask) (<Q>). Наше выделение приобретет характерную для этого режима красноватую окраску. А созданное ранее выделение опять исчезнет.

Вновь загружаем выделение, повторяя операции, описанные выше. Инвертируем это выделение, выполнив команду Select>Inverse (<Ctrl>+<Shift>+<I>). Теперь мы имеем выделение в виде треугольника. Переходим в режим свободного деформирования изображения: Edit>Free Transform (<Ctrl>+<T>). Появится прямоугольная рамка с квадратными узлами по углам и мишенью в центре. Мышью перетаскиваем этот центр в правый верхний угол. В панели параметров устанавливаем значения параметров: W — 200%, Н — 110%, V— 15°. Остальные параметры можно оставить нулевыми.

Рис. 396.

Рис. 397. В режиме свободного деформирования изображения Free Transform растягиваем треугольное выделение в сторону изображения

В итоге наше треугольное выделение немного растянется в сторону изображения. Чтобы закрепить сделанные изменения, делаем двойной щелчок внутри рамки (можно просто нажать клавишу <Enter>). Тогда рамка исчезнет, а останется только красноватое выделение.

Возвращаемся в нормальный режим редактирования, нажав клавишу <Q>. Краснота в выделении сразу исчезнет.

Создаем новый слой: Layer>New>Layer (<Shift> + <Ctrl> + <N>). Инвертируем выделение (<Ctrl> + <Shift>+<I>), чтобы выделенным был только треугольник. Устанавливаем цвет переднего фона (Foreground Color) таким, каким хотим видеть обратную сторону нашего изображения. В примере мы использовали розовый цвет. Заливаем этим цветом выделенную область. Для этого необязательно использовать инструмент Paint Bucket («Ковш») (<G>). Можно просто воспользоваться комбинацией клавиш <Alt>+<Backspace> (это равносильно выполнению команды Edit>Fill с параметром Use Foreground Color). Но кроме нужной части у нас оказался залит этим же цветом и кусок фонового изображения. Удерживая нажатой клавишу <Ctrl>, щелкаем на миниатюре слоя с значком маски (на палитре Layers (Слои) он такой один (двойная миниатюра)). Тем самым мы загрузим наше самое первое выделение в виде части круга (овала). Инвертируем данное выделение, чтобы получить новое выделение в виде треугольника (<Shift>+<Ctrl>+<I>). Удаляем теперь область изображения, попавшую в это выделение. Вновь станет виден слой — фон. Снимаем выделение: Select>Deselect (<Ctrl>+<D>). На этом этапе мы уже создали уголок листа с картинкой. Однако создается впечатление, что этот уголок уже загнут.

Рис. 398.

На палитре инструментов в левом верхнем углу выбираем инструмент Elliptical Marquee (<M>) — выделение в виде овала. Удерживая клавишу <Shift>, создаем круглое выделение.

Рис. 399. Для создания свободно загибающегося уголка, сделаем выделение в виде овала

Затем переходим в режим редактирования быстрой маски (<Q>). Входим в режим свободного деформирования изображения: Edit>Free TVansform (<Ctrl>+<T>). Как и в прошлый раз, появится прямоугольная рамка с квадратными узлами по углам. Удерживая клавишу <Ctrl>, оттянем левый верхний узел рамки чуть влево и вверх.

Рис. 400.

Чтобы применить созданные изменения, нажимаем клавишу <Enter>. Выходим из режима редактирования быстрой маски, повторно нажав клавишу <Q>. Удаляем все, что содержится в выделении. Снимаем все выделения. На всякий случай обычным ластиком убираем все лишние детали.

Создаем корректирующий слой: Layer>New Adjustment Layer>Brightness/Contrast. В новом окне ставим флажок в пункте группировки с предыдущим слоем — Group with Previous Layer. Предыдущим слоем, как вы понимаете, должен быть Layer 2. В следующем окне производим коррекцию контрастности и яркости для части загибающегося уголка. Выставляем значения параметров: Brightness —90, Contrast +50 (или около того). Из розового уголок станет темно-бордовым.

Рис. 401.

Рис. 402.

В палитре инструментов выбираем градиент (Gradient). В корректирующем слое рисуем типичный линейный градиент на изображении уголка. Целью использования данного инструмента является создание тени и блика у загибающегося уголка. Блик должен находиться в верхней части уголка.

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

Рис. 403.

Рис. 404. Конечный результат: вполне правдоподобно завернувшийся уголок

 

406.gif

Изображение: 

407.gif

Изображение: 

408.gif

Изображение: 

409.gif

Изображение: 

410.gif

Изображение: 

411.gif

Изображение: 

412.gif

Изображение: 

413.gif

Изображение: 

414.gif

Изображение: 

415.gif

Изображение: 

417.gif

Изображение: 

418.gif

Изображение: 

419.gif

Изображение: 

420.gif

Изображение: 

421.gif

Изображение: 

422.gif

Изображение: 

423.gif

Изображение: 

424.gif

Изображение: 

32. Имитация описка штампа

 

Имитация оттиска штампа

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

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

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

Обычно в штампах используют простой шрифт. К тому же в одном штампе редко используют несколько разных шрифтов. В нашем примере мы применим шрифт Arial Black. Заметим также, что слова (если их несколько) в любом штампе размешаются симметрично относительно краев рамки. Не должно образовываться лишних пустот между словами и рамками.

Для начала создаем заготовку печати. Выбираем инструмент «Карандаш» (Pencil) (<B>). Удерживая нажатой клавишу <Shift>, рисуем прямоугольную рамку будущего штампа.

Рис. 405. Сначала создаем форму будущего штампа

Затем выбираем инструмент Text (Текст) и внутри рамки пишем нужный текст с учетом оговоренных условий.

Рис. 406. Для написания текста в штампе лучше использовать самые простые шрифты

Обычно никто штампы ровно горизонтально не ставит. Поэтому, используя команду Image>Rotate Canvas>Arbitrary, поворачиваем изображение на 20" против часовой стрелки (CCW).

Рис. 407.

В принципе, заготовка штампа готова. Осталось придать ей реалистичный вид. Так как это будет «отпечаток на бумаге», то естественно, что не во всех местах он пропечатается одинаково хорошо. Поэтому нашей задачей является создание неровностей отпечатка.

Переключаемся в режим редактирования быстрой маски (Quick Mask (<Q>)). Выбираем инструмент Pencil (<B>), стержень потоньше, и рисуем хаотичные линии черного цвета прямо по всему изображению. Однако особо усердствовать не будем, так как чем больше таких линий, тем хуже получится оттиск.

Рис. 408. В режиме редактирования быстрой маски рисуем хаотичные тонкие линии, для «ухудшения» будущего оттиска

Выходим из режима редактирования быстрой маски, нажав клавишу <Q>. Выбираем инструмент Move (<V>). Один раз нажимаем клавишу <> и один раз — клавишу <>. Затем снимаем выделение (<Ctrl>+<D>). Наш оттиск сильно изменился. Появились нечитаемые и плохо читаемые буквы. Применим фильтр Filter>Brush Strokes>Spatter с значениями параметров: Spray Radius — 2, Smoothness — 14.

Рис. 409. Изображение станет еще хуже. Осталось разместить оттиск штампа в нужном месте документа.

 

425.gif

Изображение: 

426.gif

Изображение: 

427.gif

Изображение: 

428.gif

Изображение: 

429.gif

Изображение: 

6. ПРИЛОЖЕНИЕ 1. ГОРЯЧИЕ КЛАВИШИ PHOTOSHOP

 

ПРИЛОЖЕНИЕ 1. ГОРЯЧИЕ КЛАВИШИ PHOTOSHOP

 

1. Горячие клавиши Photoshop

 

Горячие клавиши Photoshop

Горячие клавиши (hotkey) редактора растровой графики Photoshop призваны ускорить работу с изображением. Большинство таких клавиш (или комбинаций клавиш) заменяют собой команды меню. Запомнить все эти клавиши, естественно, невозможно. В качестве подсказок многие из них указаны рядом с соответствующей командой меню. Целесообразнее всего применять такие горячие клавиши в случаях наиболее часто употребляемых команд меню.

 

2. Работа с меню

 

Работа с меню


Команда или действие


Комбинация клавиш

Actual Pixel (Реальный размер) <Ctrl>+<Alt>+<0&gt
Auto Levels (Автоуровни) <Ctrl>+<Shift>+<L>
Передвинуть слой вверх <Ctrl>+<]>
Установить слой сверху <Cirl>+<Shift>+<]>
Очистить < Backspace > или < Delete >
Закрыть <Ctrl>+<W> или <Ctrl>+<F4>
Color Balance (Цветовой баланс) <Ctrl>+<B>
Color Balance, прежняя установка <Ctrl>+<Alt>+<B>
Сору (Копирование) <Ctrl>+<C> или <F3>
Copy Merged (Копирование со слиянием) <Ctrl>+<Shift>+<C>
Curves (Кривые) " <Ctrl>+<M>
Curves, последние установки <Ctrl>+<Alt>+<M>
Cut (Вырезать) <Ctrl>+<X> или <F2>
Desaturate (Уменьшить насыщенность) <Ctrl>+<Shift>+<U>
Exit (Выйти) <Ctrl>+<Q> или <Alt>+<F4>

Fade Filter (Ослабить фильтрацию)


<Ctrl>+<Shift>+<F>


Растушевать выделенную область


<Ctrl>+<Alt>+<D> или <Shift>+<F6>


Fill (Заливка)


<Shift>+<Backspace> или <Shift>+<F5>


Заливка из предыдущих состояний


<Ctrl>+<Alt>+<Backspace>


Повторить фильтрацию с последними установками


<Ctrl>+<F>


Повторить фильтрацию с новыми установками


<Ctrl>+<Alt>+<F>


Screen (По размерам экрана)


<Ctrl>+<0>


Free Transform (Свободное преобразование)


<Ctrl>+<T>


Gamut Warning (Предупреждение о выходе из диапазона)


<Ctrl>+<Shift>+<Y>


Отобразить/скрыть сетку


<Ctrl>+<">


Сгруппировать с предыдущим слоем


<Ctrl>+<G>


Отобразить/скрыть направляющие


<Ctrl>+<;>


Оглавление справки


<F1>


Контекстная справка


<Shift>+<F1>


Скрыть края выделения


<Ctrl>+<H>


Скрыть дорожку


<Ctrl>+<Shift>+<H>


Hue/Saturation (Тон/Насыщенность)


<Ctrl>+<U>


Hue/Saturation (Тон/Насыщенность), прежние установки


<Ctrl>+<Alt>+<U>


Размер изображения


<F11>


Инвертировать выделение


<Ctrl>+<Shift>+<j> или <Shift>+<F7>

Invert (Инвертировать) <Ctrl>+<I>

Layer>New>Layer Via Copy (Слой>Создать>Слой посредством копирования)


<Ctrl>+<J>


Layer>New>Layer Via Cut (Слой>Создать>Слой посредством вырезания)


<Ctrl>+<Shift>+<J>


Levels (Уровни)


<Ctrl>+<L>


Levels (Уровни), прежние установки


<Ctrl>+<Alt>+<L>

Зафиксировать направляющие <Ctrl>+<Alt>+<;>

Merge Visible (Слияние видимых слоев)


<Ctrl>+<Shift>+<E>


Merge Down (Слияние с нижележащим)


<Ctrl>+<E>

New (Новый) <Ctrl>+<N>

New (Новый), установки по умолчанию


<Ctrl>+<Alt>+<N>


Новый слой


<Ctrl>+<Shift>+<N>


Open (Открыть)


<Ctrl>+<0>


Open As (Открыть как)


<Ctrl>+<Alt>+<0>


Открыть изображение, которое редактировалось последним


<Alt>+<Р>+<клавиши цифровой клавиатуры> (от<1>до<4>)


Page Setup (Параметры страницы)


<Ctrl>+<Shift>+<P>


Paste (Вставить)


<Ctrl>+<V> или <F4>


Paste Into (Вставить в)


<Ctrl>+<Shift>+<V>


Preferences (Установки)


<Ctrl>+<K>


Preferences (Установки), последняя вкладка


<Ctrl>+<Alt>+<K>


Предварительный просмотр CMYK Print (Печать)


<Ctrl>+<Y> <Ctrl>+<P>


Redo (Повторить операцию)


<Ctrl>+<Z>


Revert (Возврат)


<F12>


Отобразить/скрыть линейки


<Ctrl>+<R>


Save (Сохранить)


<Ctrl>+<S>


Save as (Сохранить как)


<Ctrl>+<Shift>+<S>


Сохранить копию


<Ctrl>+<Alt>+<S>


Select All (Выделить все)


<Ctrl>+<A>


Select none (Отменить выделение)


<Ctrl>+<D>

Переместить слой назад <Ctrl>+<[>

Сделать слой последним


<Ctrl>+<Shift>+<[>


Шаг назад


<Ctrl>+<Alt>+<Z>


Шаг вперед


<Ctrl>+<Shift>+<Z>


Привязать к сетке


<Ctrl>+<Shift>+<">


Привязать к направляющим


<Ctrl>+<Shift>+<;>


Undo (Отменить операцию)


<Ctrl>+<Z>


Разгруппировать слои


<Ctrl>+<Shift>+<G>

Увеличить <Ctrl>+<+>

Уменьшить


<Ctrl>+<->

 

3. Работа с цветом

 

Работа с цветом

Команда или действие
Комбинация клавиш или действие мышью
Выбрать основной цвет из изображения
<Alt>+щелчок инструментом рисования или "Пипетка"
Выбрать цвет фона из изображения
<Alt>+щелчок инструментом "Пипетка"
Отобрать цвет в изображении
Щелчок инструментом выборки цвета
Удалить цветовую выборку
<Alt>+щелчок на удаляемой цветовой выборке инструментом выборки цвета
Отобразить/скрыть палитру Color (Цвет)
<F6>
Выбрать цвет переднего плана в линейке цветов внизу палитры Color (Цвет)
Щелчок на линейке цветов
Выбрать цвет фона в линейке цветов внизу палитры Color (Цвет)
<Alt>+щелчок на линейке цветов
Сменить цветовую панель
<Shift>+щелчок на цветовой панели
Задать новую цветовую панель
Щелчок правой кнопкой мыши на цветовой панели или <Ctrl>+щелчок для открытия диалогового окна
Выбрать цвет переднего плана в каталоге Swatches (Образцы)
Щелчок на образце
Выбрать цвет фона в каталоге Swatches (Образцы)
<Alt>+щелчок на образце
Удалить образец цвета из каталога Swatches (Образцы)
<Alt>+щелчок на образце
Заменить образец основным цветом
<Shift>+щелчок на образце
Ввести новый образец цвета в каталог Swatches (Образцы)
Щелчок на свободном месте каталога или <Shift>+<Alt>+щелчок на образце
Заполнить выделение или слой цветом переднего плана
<Alt>+<Backspace>
Заполнить слой цветом переднего плана, сохранив прозрачность
<Shift>+<Alt>+<Backspace>
Заполнить выделение на фоновом слое цветом фона
<Backspace> или <Delete>
Заполнить выделение на любом слое цветом фона
<Ctrl>+<Backspace>
Заполнить слой цветом фона, сохранив прозрачность
<Ctrl>+<Shift>+<Backspace>
Заполнить выделение исходным состоянием в палитре предыдущих состояний
<Ctrl>+<Alt>+<Backspace>
Открыть диалоговое окно Fill (Заполнение)
<Shift>+<Backspace> или <Shift>+<F5>
 

4. Выделение

 

Выделение

Команда или действие
Комбинация клавиш или действие мышью
Выделить все
<Ctrl>+<A>
Отменить выделение
<Ctrl>+<D>
Восстановить выделение после деселектирования
<Ctrl>+<Shift>+<D>
Включить/выключить режим выделения
<Ctrl>+<H>
Растушевать выделенную область
<Ctrl>+<Alt>+<D> или <Shift>+<F6>
Инвертировать выделение
<Ctrl>+<Shift>+<I> или <Shifl>+<F7>
Сменить инструмент выделения области (включая инструмент кадрирования)
<Alt>+щелчок на значке инструмента выделения области
Переключение между инструментами выделения прямоугольной и эллиптической области
<Shift>+<M>
Выделение области движением из центра наружу
<Alt>+перетаскивание
Ограничение области квадратом или кругом
Вычерчивая форму, удерживать нажатой клавишу <Shift>
Перемещение выделяемой области в ходе ее вычерчивания
< Пробел>
Смена инструмента из семейства "Лассо"
<Alt>+щелчок на значке инструмента "Лассо", или <Shift>+<L>
Добавить угол к контуру выделения с прямыми сторонами <Alt>+щелчок инструментом "Лассо", или щелчок инструментом "Лассо" в режиме многоугольника
Добавить точку к магнитному выделению Щелчок инструментом "Магнитное лассо"
Удалить последнюю точку, добавленную инструментом "Магнитное лассо" <Backspace>
Увеличить или уменьшить ширину "Магнитного лассо <[>или <]>
Закрыть выделение инструментом "Лассо" в многоугольном или магнитном режиме Щелкнуть дважды соответствующим инструментом "Лассо", или <Enter>
Закрыть выделение инструментом "Лассо" в магнитном режиме с прямым сегментом
<Alt>+двойной щелчок, или <Alt>+<Enter>
Отменить выделение инструментом "Лассо" в многоугольном или магнитном режиме
<Esc>
Добавить к выделенной области
<Shift>+перетаскивание, или <Shift>+щелчок инструментом выделения
Вычесть из выделенной области
<Alt>+перетаскивание, или <Alt> +щелчок инструментом выделения
Оставить пересечение выделенных областей
<Shift>+ <Alt>+перетаскивание, или <Alt>+<Shift>+щелчок инструментом выделения
Добавить в выделенную область контуры символов
<Shift>+щелчок текст-маской
Вычесть из выделенной области контуры символов
< Alt >+ щелчок текст- маской
Пересечение контуров символов с выделением
<Shift>+ <Alt>+щелчок текст-маской
Активировать инструмент "Перемещение"
<V>, или нажать и удерживать <Ctrl>
Переместить выделение
Перетаскивание инструментом перемещения, или <Ctrl>+перетаскивание другим инструментом
Ограничить перемещение по вертикали или горизонтали Перетаскивать выделение, удерживая <Shift>
Перемещать выделение с шагом в 1 пиксел
<Ctrl>+<клавиши управления курсором>
Перемещать выделение с шагом в 10 пикселов
<Ctrl>+<Shift>+<клавиши управления курсором>
Клонировать выделение
<Alt>+перетаскивание инструментом перемещения, или <Ctrl>+ <Alt>+перетаскивание другим инструментом
Клонировать выделение с шагом в 1 пиксел
<Ctrl>+<Alt>+<клавиши управлением курсором>
Клонировать выделение с шагом в 10 пикселов
<Ctrl> +<Shift>+<Alt>+<клавиши управления курсором >
Клонировать выделение в другое изображение
<Ctrl>+перетаскивание выделения из одного окна в другое
Переместить контур выделения без содержимого
Перетаскивание инструментом выделения
Перемещение контура выделения с шагом в 1 пиксел
<клавиши управления курсором> при активном инструменте выделения
Перемещение контура выделения с шагом в 10 пикселов
<Shift>+<клавиши управления курсором> при активном инструменте выделения
Копировать пустой контур выделения в другое изображение
Перетащить выделение из одного окна в другое инструментом выделения
Менять непрозрачность плавающего выделения
<Ctrl>+<Shift>+<F>
Paste Into (Вставить изображение в выделение)
<Ctrl>+<Shift>+<V>
Вставить изображение позади выделения
<Ctrl>+<Shift>+<Alt>+<V>
 

5. Преобразование и кадрирование

 

Преобразование и кадрирование

Действие
Комбинация клавиш или действие мышью
Выбрать инструмент кадрирования
<С>
Перемещение границ кадра
Перетаскивание внутри рамки
Изменение размеров кадра
Перетаскивание маркера рамки
Вращение кадра
Перетаскивание за пределами рамки
Принять кадр
Двойной щелчок внутри кадра, или <Enter>
Отменить кадр
<Esc>
Произвольное преобразование выделения или слоя
<Ctrl>+<T>
Дублировать выделение и произвольное преобразование
<Ctrt>+<Alt>+<T>
Перемещение изображения в режиме произвольного преобразования
Перетаскивание внутри границы
Перемещение начальной точки преобразования
Перетаскивание перекрестия
Изменение размеров изображения
Перетаскивание маркера рамки
Изменение размеров относительно начальной точки
<Alt>+перетаскивание маркера рамки
Вращение изображения (всегда относительно начальной точки)
Перетаскивание вне границы
Масштабирование относительно центральной точки
<Alt>+перетаскивание угла
Скос изображения
<Ctrl>+перетаскивание бокового маркера
Скос изображения вдоль определенной оси
<Ctrl>+<Shift>+перетаскивание бокового маркера
Скос изображения относительно начальной точки
<Ctrl>+<Alt>+перетаскивание бокового маркера
Скос изображения вдоль определенной оси относительно начальной точки <Ctrl>+<Shift>+<Alt>+перетаскивание бокового маркера
Искажение изображения
<Ctrl>+перетаскивание углового маркера
Симметричное искажение противоположных углов
<Ctrl>+<Alt>+перетаскивание углового маркера
Ограниченное искажение для получения эффекта перспективы
<Ctrl>+<Shift>+перетаскивание углового маркера
Ограниченное искажение для получения эффекта симметричной перспективы
<Ctrl>+<Shift>+<Alt>+перетаскивание углового маркера
Применить указанное преобразование в режиме произвольного преобразования
Щелчок правой кнопкой мыши в окне изображения
Принять границы преобразования
Щелкнуть дважды внутри границ, или <Enter>
Отменить преобразование
<Esc>
Повторить последнее преобразование
<Ctrl>+<Shift>+<T>
Дублировать выделение и повторить последнее преобразование
<Ctrl>+<Shift>+<Alt>+<T>
 

6. Маски и каналы

 

Маски и каналы

Команда или действие

Комбинация клавиш или действие мышью
Переключение между независимыми каналами цветов и масок
<Ctrl>+<клавиши цифровой клавиатуры> (от<1>до<9>)
Просмотр составного (композитного) цветного изображения
<Ctrl>+<~>
Активизировать или деактивизировать цветовой канал
<Shift>+щелчок на имени канала в палитре Channels (Каналы)
Создать маску канала, заполненную черным цветом
Щелчок на значке страницы внизу палитры Channels (Каналы)
Создать маску канала, заполненную черным цветом, и установить опции
<Alt>+щелчок на значке страницы внизу палитры Channels (Каналы)
Создать маску канала из контура выделения
Щелчок на значке маски внизу палитры Channels (Каналы)
Создать маску канала из контура выделения и установить опции
<Alt>+щелчок на значке маски внизу палитры Channels (Каналы)
Просмотр маски канала в виде рубилитового покрытия
Щелчок на верхнем значке с изображением глаза в палитре Cannels (Каналы), или <~>
Преобразовать канал маски в контур выделения
<Ctrl>+щелчок на имени канала в палитре Channels (Каналы), или <Ctrl>+<Alt>+<клавиши цифровой клавиатуры> (от <1 > до <0>)
Заменить маску канала на контур выделения
<Ctrl>+щелчок правой кнопкой на имени канала в палитре Channels (Каналы)
Добавить маску канала в выделение
<Ctrl>+Shift>+щелчок на имени канала в палитре Channels (Каналы)
Убрать маску канала из выделения
<Ctrl>+<Alt>+щелчок на имени канала в палитре Channels (Каналы)
Сохранить пересечение маски канала и выделения
<Ctrl>+<Shift>+<Alt>+щелчок на имени канала в палитре Channels (Каналы)
Переключить цвет покрытия над маскированной и выделенной областью
<Alt>+щелчок на кнопке быстрого маскирования в панели инструментов
Изменить цвет покрытия в режиме быстрого маскирования
Двойной щелчок на кнопке быстрого маскирования в панели инструментов
Просмотр быстрой маски вне изображения
Щелчок на верхнем значке с изображением глаза в палитре Channels (Каналы), или <~>
Создать маску слоя, закрашенную белым цветом
Щелчок на значке маски внизу палитры Layers (Слои)
Создать маску слоя, закрашенную черным цветом
<Alt>+щелчок на значке маски
Создать маску слоя на контуре выделения
Щелчок на значке маски
Создать маску слоя, которая скрывает выделение
<Alt>+щелчок на значке маски
Переключить фокус со слоя маски на изображение
<Ctrl>+<~>
Переключить фокус с изображения на слой маски
<Ctrl>+<\>
Просмотр маски слоя вне изображения
<Alt>+щелчок в окне предварительного просмотра слоя маски палитры Layers (Слои) или <\>, а затем <~>
Просмотр маски слоя в виде рубилитового покрытия
<Shift>+<Alt>+щелчок в окне предварительного просмотра слоя маски или <\>
Установить/снять связь между слоем и маской слоя
Щелчок между изображением предварительного просмотра слоя и маски в палитре Layers (Слои)
Преобразовать маску слоя в контур выделения
<Ctrl>+<Alt>+<\>
Добавить маску слоя в выделение
<Ctrl>+<Alt>+щелчок в окне предварительного просмотра маски слоя
Убрать маску слоя из выделения
<Ш>+<Alt>+щелчок в окне предварительного просмотра маски слоя
Сохранить пересечение слоя маски и выделения
<Ctrl>+<Alt>+<Shift>+щелчок в окне предварительного просмотра маски слоя
Добавить цветовой канал
<Ctrl>+щелчок на значке страницы внизу палитры Channels (Каналы)
 

7. Корректировка цвета

 

Корректировка цвета

Команда или действие
Комбинация клавиш или действие мышью
Добавление точки в диалоговом окне Curves (Кривые)
Щелкнуть на графической линии
Добавление определенного цвета в качестве новой точки на составной кривой
<Shift>+щелчок в окне изображения
Добавление цвета в качестве новой точки на независимых кривых канала
<Ctrl>+<Shift>+щелчок в окне изображения
Продвинуть выделенную точку кривой
<Клавиши управления курсором>
Выделить следующую точку кривой
<Ctrl>+<Tab>
Выделить предыдущую точку кривой
<Ctrl>+<Shift>+<Tab>
Удалить точку кривой
<Ctrl>+щелчок на точке
Выделить несколько точек кривой
<Shift>+щелчок на точке
Деселектировать все точки
<Ctrl>+<D>
Переместить диапазон Hue/Saturation

(Тон/Насыщенность) на новое место

Щелчок в окне изображения
Добавить цвет в диапазон Hue/Saturation (Тон/Насыщенность)
<Shift>+щелчок или перетаскивание в окне изображения
Вычесть цвета из диапазона Hue/Saturation (Тон/Насыщенность)
<Alt>+щелчок или перетаскивание в окне изображения
Редактирование всех цветов в диалоговом окне Hue/Saturation (Тон/Насыщенность)
<Ctrl>+<~>
Редактирование заранее определенного цветового диапазона
<Ctrl>+<клавиши цифровой клавиатуры> (от<1>до<6>)
 

8. Измерения, линейки и направляющие

 

Измерения, линейки и направляющие

Команда или действие
Комбинация клавиш или действие мышью
Отобразить/скрыть линейки
<Ctrl>+<R>
Отобразить/скрыть палитру Info
<F8>
Изменить единицу измерения
Перетаскивание из раскрывающегося списка X, Y в палитре Info или двойной щелчок на линейке
Активировать инструмент "Измеритель"
<U>
Измерение расстояния и угла
Перетаскивание инструментом "Измеритель"
Перемещение измерительной линии
Перетаскивание измерительной линии
Изменение длины и угла измерительной линии
Перетаскивание точки на любом конце измерительной линии
Изменение угла между двумя линиями (опция транспортира)
<Alt>+перетаскивание конечной точки
Отобразить/скрыть направляющие Создать направляющую
<Ctrl>+<;> Перетаскивание из линейки
Перемещение направляющей
Перетаскивание направляющей инструментом перемещения, или <Ctrl>+перетаскивание другим инструментом
Превращение вертикальной направляющей в горизонтальную и наоборот
Нажатие <Alt> при перетаскивании направляющей
Привязка направляющей к меткам на линейке
<Shift>+перетаскивание направляющей
Включить/выключить "намагниченность" направляющей
<Ctrl>+<Shift>+<;>
Зафиксировать/освободить направляющую
<Ctrl>+<Alt>+<;>
Отобразить/скрыть сетку
<Ctrl>+<">
Включить/выключить "намагниченность" сетки
<Ctrl>+<Shift>+<">
Изменение цвета направляющих и шага сетки
<Ctrl>+двойной щелчок на направляющей
 

9. Отмена и повторение операций

 

Отмена и повторение операций

Действие
Комбинация клавиш или действие мышью
Отменить или повторить последнюю операцию
<Ctrl>+<Z>
Отменить операцию перед последней выполненной
<Ctrl>+<Alt>+<Z>
Повторить отмененную операцию
<Ctrl>+<Shift>+<Z>
Отменить до определенной точки
Щелчок на элементе в палитре предыдущих состояний
Продублировать ранее выполненную операцию
<Alt>+щелчок на элементе в палитре предыдущих состояний
Указать состояние, к которому следует вернуться, с помощью кисти предыдущих состояний
Щелчок перед элементом в палитре предыдущих состояний
Создать снимок из активного состояния
Щелчок на значке страницы внизу палитры предыдущих состояний
Создать дубликатное изображение из активного состояния
Щелчок на значке рамки внизу палитры предыдущих состояний
Возврат к запомненному изображению
<F12>, или щелчок на первом элементе в палитре предыдущих состояний
 

10. Редактирование и рисование

 

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

Команда или действие
Комбинация клавиш или действие мышью
Открыть палитру Options
<Enter>, или двойной щелчок на значке инструмента
Установить курсор "перекрестие"
<Caps Lock>
Вернуть изображение в прежнее состояние 'Волшебным ластиком"
<Alt>+перетаскивание ластиком
Активизировать инструмент "Карандаш", 'Кисть" или "Аэрограф"
<N>, <B> или <J>
Смена инструмента семейства "Ластик"
<Alt>+щелчок на значке "Ластик" или <Shift>+<E>
Задание области для клонирования
< Alt >+ щелчок штампом
Смена типа штампа
<Alt>+щелчок на значке "Штамп", или <Shift>+<S>
Смена инструмента фокусировки
<Alt>+щелчок на значке инструмента фокусировки
Настройка резкости инструментом "Размытие" или размывка инструментом "Резкость"
<Alt>+перетаскивание
Погружение в цвет переднего плана при размазывании
<Alt>+перетаскивание инструментом "Палец"
Смена инструмента тонирования
<Alt>+щелчок на значке инструмента тонирования или <Shift>+<O>
Затемнить осветлителем или осветлить затемнителем
<Alt>+перетаскивание
Рисование или редактирование прямой линии
Щелчок, затем <Shift>+щелчок
Изменение непрозрачности , нажима или экспозиции с шагом в 1%
<клавиши цифровой клавиатуры> (от <1> до <0>)
Изменение непрозрачности, нажима или экспозиции в 1 %
Нажать две < клавиши цифровой клавиатуры > подряд
Выбрать режим кисти
Щелчок (правой кнопкой мыши) инструментом рисования или редактирования, или <Shift>+<Alt>+<буква>
Смена режимов кисти
<Shift>+<+>, или <Shift>+<->
Возврат в режим нормальной кисти
<Shift>+<Alt>+<N>
Отобразить или спрятать палитру Brushes (Кисти)
<F5>
Сменить форму кисти
<[>или <]>
Выбрать первую форму в палитре Brushes (Кисти)
<Shift>+<[>
Выбрать последнюю форму
<Shift>+<]> в палитре Brushes (Кисти)
Удалить форму из палитры Brushes (Кисти)
<Shift>+щелчок на форме кисти в палитре Brushes (Кисти)
Создать новую форму кисти
Щелчок на свободном месте в палитре Brushes (Кисти)
Редактировать форму кисти
Двойной щелчок на форме кисти в палитре Brushes (Кисти)
 

11. Работа со слоями

 

Работа со слоями

Команда или действие
Комбинация клавиш или действие мышью
Отобразить или спрятать палитру Layers (Слои)
<F7>
Просмотреть отдельный слой
<Alt>+щелчок на изображении глаза в палитре Layers (Слои)
Создать новый слой и установить параметры смешивания (Blend)
<Alt>+щелчок на значке страницы внизу палитры Layers (Слои), или <Ctrl>+<Shift>+<N>
Создать новый слой и обойти установку параметров смешивания (Blend)
Щелчок на значке страницы внизу палитры Layers (Слои), или <Ctrl>+<Shift>+<Alt>+<N>
Клонировать выделение в новый слой
<Ctrl>+<J>
Преобразовать выделение в новый слой, удалив его из фонового слоя
<Ctrl>+<Shift>+<J>
Преобразовать плавающее выделение в новый слой
<Ctrl>+<Shift>+<J>
Дублировать слой в новый слой
Перетащить имя слоя на значок страницы, или <Ctrl>+<A>, <Ctrl>+<J>
На один слой вверх
<Alt>+<]>
На один слой вниз
<Alt>+<[>
Перейти на верхний слой
<Shift>+<Alt>+<]>
Перейти на нижний слой
<Shitt>+<Alt>+<(>
Перейти на слой, содержащий указанное изображение
<Shitt>+<Alt>+щелчок правой кнопкой на изображении любым инструментом
Сохранить прозрачность активного слоя
</>
Преобразовать маску прозрачности слоя в контур выделения
<Ctrl>+щелчок на имени слоя в палитре Layers (Слои)
Добавить маску прозрачности слоя в контур выделения
<Ctrl>+<Shift>+щелчок на имени слоя в палитре Layers (Слои)
Вычесть маску прозрачности из выделения
<Ctrl>+<Alt>+щелчок на имени слоя в палитре Layers (Слои)
Пересечение маски прозрачности и выделения
<Ctrl>+<Shift>+<Alt>+щелчок на имени слоя в палитре Layers (Слои)
Переместить целый слой
Перетаскивание инструментом перемещения, или <Ctrl>+перетаскивание другим инструментом
Перемещать целый слой с шагом в 1 пиксел
<Ctrl>+<клавиши управления курсором>
Перемещать целый слой с шагом в 10 пикселов
<Ctrl>+<Shift>+<клавиши управления курсором>
Переместить слой на один уровень вперед
<Ctrl>+<]>
Переместить слой на передний план
<Ctrl>+<Shift>+<]>
Переместить слой на один уровень назад
<Ctrl>+<[>
Переместить слой назад, расположив перед фоновым слоем <Ctrl>+<Shift>+<[>
Связать слой с активным слоем
Щелчок перед именем слоя
Разорвать связь между слоем и активным слоем
Щелчок на значке цепочки перед именем слоя
Разорвать связи всех слоев с активным слоем
<Alt>+щелчок на значке кисти перед именем активного слоя
Менять непрозрачность активного слоя с шагом в 1 0%
<клавиши цифрой клавиатуры> (от <1> до<0>) при активном инструменте выделения
Менять непрозрачность активного слоя с шагом в 1 %
Нажать подряд две < клавиши цифрой клавиатуры> при активном инструменте выделения
Редактирование опции смешивания для слоя
Двойной щелчок на имени слоя в палитре Layers (Слои)
Активизировать режим смешивания
<Shift>+<Alt>+<буква>
Смена режимов смешивания
<Shift>+<+> или <Shift>+<-> при активном инструменте выделения
Вернуться в режим нормального смешивания
<Shift>+<Alt>+<N>
Настройка "расплывчатости" в диалоговом
<Alt>+перетаскивание треугольного ползунка в окне Layer Options
Объединение слоя со следующим
<Ctrl>+<E>
Объединение связанных слоев
<Ctrl>+<E>
Объединение всех видимых слоев
<Ctrl>+<Shift>+<E>
Копировать объединенный вариант выделения в буфер обмена
<Ctrl>+<Shift>+<C>
Клонировать содержимое слоя в следующий слой
<Ctrl>+<Alt>+<E>
Клонировать содержимое связанных слоев в активный слой
<Ctrl>+<Alt>+<E>
Клонировать содержимое всех видимых слоев в активный слой
<Ctrl>+<Shift>+<Alt>+<E>
Сгруппировать соседние слои
<Alt>+щелчок на горизонтальной прямой в палитре Layers (Слои), или <Ctrl>+<G>
Разгруппировать соседние слои
<Alt>+щелчок на пунктирной прямой в палитре Layers (Слои), или <Ctrl>+<Shift>+<G>
Переключение между эффектами слоя
От <Ctrl>+<1> до <Ctrl>+<5> в диалоговом окне Effects (Эффекты)
Переключение между эффектами слоя вне диалогового окна
Щелчок правой кнопкой мыши на [ f ] в палитре Layers (Слои)
Редактирование эффекта слоя
Двойной щелчок на [ f ] в палитре Layers (Слои)
Перемещение тени при открытом диалоговом окне Effects (Эффекты)
Перетаскивание в окне изображения
Заблокировать эффект последнего слоя
<Alt>+двойной щелчок на [ f ] в палитре Layers (Слои)
Заблокировать эффект определенного слоя
<Alt>+команда Layers>Effects
Создать слой настройки
<Ctrl>+щелчок на значке страницы внизу палитры Layers (Слои)
Сохранить "плоскую" копию изображения со слоями
<Ctrl>+<Shift>+<S>
 

12. Работа с текстом

 

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

Действие Комбинация клавиш или действие мышью
Редактировать текстовый слой
Щелкнуть дважды на "Т" в палитре Layers (Слои) или щелкнуть на тексте инструментом "Текст"
Выделить слово в диалоговом окне Text Tool
Двойной щелчок на слове
Выделить слово слева или справа
<Ctrl>+<Snift>+<> или <>
Выделить весь текст
<Ctrl>+<A>
Увеличить кегль на два пиксела (или пункта)
<Ctrl>+<Shift>+< > >
Уменьшить кегль на два пиксела
<Ctrl>+<Shift>+< < >
Увеличить кегль на 10 пикселов
<Ctrl>+<Shift>+<Alt>+< > >
Уменьшить кегль на 10 пикселов
<Ctrl>+<Shift>+<Alt>+< < >
Ужать два ведущих пиксела
<Alt>+<>
Расширить два ведущих пиксела
<Alt>+<>
Ужать 10 ведущих пикселов
<Ctrl>+<Alt>+<>
Расширить 10 ведущих пикселов
<Ctrl>+<Alt>+<>
Уменьшить кернинг х 2/100 em
<Alt>+<>
Увеличить кернинг х 2/100 em
<Alt>+<>
Уменьшить кернинг х 1/10 em
<Ctrl>+<Alt>+<>
Увеличить кернинг х 1/10 em
<Ctrl>+<Alt>+<>
Поднять базовую линию шрифта на два пиксела
<Shift>+<Alt>+<>
Опустить базовую линию шрифта на два пиксела
<Shift>+<Alt>+<>
Поднять базовую линию шрифта на 10 пикселов
<Ctrl>+<Shift>+<Alt>+<>
Опустить базовую линию шрифта на 10 пикселов
<Ctrl>+<Shift>+<Alt>+<>
Выйти из диалогового окна Type Tool
<Enter> (на цифровой клавиатуре), или <Ctrl>+<Enter>
Выровнять текст по левому краю
<Ctrl>+<Shift>+<L>
Выровнять текст по центру
<Ctrl>+<Shift>+<C>
Выровнять текст по правому краю
<Ctrl>+<Shift>+<R>
Увеличить масштаб в диалоговом окне Text Tool
<Ctrl>+<+>
Уменьшить масштаб в диалоговом окне Text Tool
<Ctrl>+<->
 

13. Работа с фильтрами

 

Работа с фильтрами

Команда или действие
Комбинация клавиш или действие мышью
Повторить фильтрацию с прежними установками
<Ctrl>+<F>
Повторить фильтрацию с новыми установками
<Ctrl>+<Alt>+<F>
Прокрутка в поле предварительного просмотра диалогового окна корректирующих фильтров
Перетаскивание в поле предварительного просмотра, или щелчок в окне изображения
Масштабирование в поле предварительного просмотра диалогового окна корректирующих фильтров
<Ctrl>+щелчок, <Alt>+щелчок
Увеличить значение в поле опции на 1 (или 0, 1 )
<->
Уменьшить значение на 1 (или 0,1)
<>
Увеличить значение на 10 (или 1)
<Shift>+<>
Уменьшить значение на 10 (или 1 )
<Shift>+<>
регулирование угла с шагом в 15
<Shift>+перетаскивание в круге
Сброс опций в диалоговых окнах корректирующих фильтров
<Alt>+щелчок на кнопке Cancel (Отмена)
Клонирование источника света в диалоговом окне Lighting Effects
<Alt>+перетаскивание источника света
Удаление источника света в диалоговом окне Lighting Effects
<Delete>
Регулировка размера освещенной области без изменения угла освещения
<Shift>+перетаскивание маркера
Регулировка угла освещения без изменения размера освещенной области
<Ctrl>+перетаскивание маркера
Переходы между инструментами "Стрелка" в диалоговом окне пространственного преобразования
<V> или <А>, или <Ctrl>+<Tab>
Активизировать инструмент "Куб", "Сфера" или "Цилиндр"
<М>, <N> или <С>
Редактирование формы с помощью камеры или трекбола
<Е> или <R>
Удаление выделенной формы пространственного преобразования
<Backspace>
 

14. Разное

 

Разное

Команда или действие
Комбинация клавиш или действие мышью
Отобразить/скрыть палитру Actions
<F9>
Отобразить/скрыть все палитры, панель инструментов и строку состояния
<Tab>
Отобразить/скрыть палитры, за исключением панели инструментов
<Shift>+<Tab>
Скрыть панель инструментов и строку состояния
<Tab>, <Shift>+<Tab>
Извлечь вкладку из палитры
Перетаскивание ярлыка вкладки
Закрепить палитру у края окна
<Shift>+щелчок на заголовке палитры
Полностью свернуть палитру
<Alt>+щелчок на кнопке свертывания или двойной щелчок на ярлыке вкладки
Воспроизвести сценарий
<Ctrl>+двойной щелчок на элементе в палитре Actions
Навсегда удалить элемент из палитры, в которой предусмотрена мусорная корзина
<Alt>+щелчок на значке мусорной корзины внизу палитры
Просмотреть расположение изображения на печатной странице
Щелчок в информационном поле
Просмотреть размер и разрешение изображения
<Alt>+щелчок в информационном поле
Изменить установки
<Ctrl> + <K>
Вернуться к последней используемой вкладке диалогового окна Preferences
<Ctrl>+ <Alt>+<K>
Открыть диалоговое окно с прежними установкам
<Alt>+команда из меню lmaqe>Adjust
Дублировать изображение, не обращаясь к диалоговому окну
<Alt>+команда lmage>Duplicate
Отмена текущей операции
<Esc>
Активизация кнопки No при закрытии изображения
<N>
Активизация кнопки Don't Flattern
<D>
 

7. ПРИЛОЖЕНИЕ 2. МАЛЕНЬКИЕ ХИТРОСТИ ПРИ РАБОТЕ С PHOTOSHOP

 

ПРИЛОЖЕНИЕ 2. МАЛЕНЬКИЕ ХИТРОСТИ ПРИ РАБОТЕ С PHOTOSHOP

Загружайте поменьше дополнительных модулей

Если вы готовы избавиться от ненужных дополнительных модулей (plug-ins) для Photoshop, занимающих ценные системные ресурсы, наберите тильду (~) и пробел перед именем фильтра или модуля Import/Export (Импорт/Экспорт) в папке Plug-Ins на жестком диске. Во время запуска Photoshop будет игнорировать помеченные тильдой файлы, что приведет к повышению производительности и сделает более компактными меню Filter (Фильтр) и Import/Export (Импорт/Экспорт).

Как двигать изображение

Для того чтобы превратить курсор в «руку», когда активен другой инструмент, надо нажать и удерживать клавишу <Пробел>. Когда вы отпустите эту клавишу, курсор примет прежний вид.

Эффект размытости картинки

Для получения красивых эффектов размытости картинки можно взять два слоя с одним изображением, нижний размыть Гауссом (Filter>Blur>Gaussian Blur (Фильтр>Размытие>Гауссовское размытие)), а верхний сделать слегка прозрачным.

Быстрое изменение прозрачности

Клавиши < I >, <2>, <3>,..., <0> устанавливают параметр Opacity (Прозрачность) выбранного инструмента соответственно в значение 10, 20, 30,..., 100 процентов. При выбранном инструменте Move (Перемещение) прозрачность устанавливается для слоя.

Как выровнять наклоненное изображение

В Photoshop реализован легкий способ выравнивания криво отсканированных изображений. Выберите инструмент < ?j Measure (Измеритель) и нарисуйте линию вдоль края того элемента фотографии, который должен располагаться точно по горизонтали или вертикали. Войдите в меню Image (Изображение) и выполните команду Arbitrary (Произвольно) подменю Rotate Canvas (Поворот холста). Значение угла, на который должно быть повернуто изображение, появится в поле Angle (Угол) автоматически. Все, что осталось сделать, чтобы выровнять изображение — щелкнуть на кнопке ОК. После этого можно выполнить кадрирование.

Смягчение результатов настройки цветов

Вы вероятно знаете, что можно уменьшить эффект воздействия последнего выполненного фильтра, выбрав команду Fade (Ослабить) меню Filter (Фильтр) пакета Photoshop (по крайне мере до того момента, пока с изображением больше ничего не было сделано). Но знаете ли вы, что функция Fade срабатывает также для команд подменю Adjust (Настройка) меню Image (Изображение)? Например, можно снизить эффект последней из примененных настроек Curves (Кривые), Hue/ Saturation (Тон/Насыщенность), Levels (Уровни) или даже Color Balance (Цветовой баланс). Если был использован уровень Adjustment (Настроечный), функция Fade не подействует, но того же эффекта можно достичь, уменьшив непрозрачность для настроечного уровня.

Настройка тонов без изменения изображения

Чтобы с помощью Photoshop слегка настроить тона в определенных частях изображения без внесения изменений в изображение, применяем инструменты Dodge (Осветлитель) и Burn (Затеменитель) на новом слое, созданном в режиме Overlay (Наложение) и заполненном 50-процентным серым цветом, который в режиме Overlay является нейтральным (невидимым). Этот новый слой можно создать с помощью всплывающего меню палитры Layers (Слои) или, удерживая клавишу Alt, щелкнуть на значке New Layer (Новый слой) в нижней части палитры -появится диалоговое окно New Layer.

 

8. ПРИЛОЖЕНИЕ 3. СПРАВОЧНИК ПО HTML

 

ПРИЛОЖЕНИЕ 3. СПРАВОЧНИК ПО HTML

 

1. Тэги HTML

  

Тэги HTML

Здесь упорядочены по категориям наиболее часто употребляемые тэги.

Структура документа
<!> Определяет комментарий, который игнорируется анализатором HTML
<!DOCTYPE> Объявляет тип и формат содержимого документа
<BASE> Устанавливает URL-адрес исходного документа
<BODY> Определяет начало основной части страницы
<COMMENT> Описывает комментарий, который не отображается
<DIV> Осуществляет логическое разделение документа, создавая фрагмент внутри него
<HEAD> Заключает в себе тэги, содержащие невидимую информацию о документе
<HTML> Идентифицирует документ как содержащий элементы HTML
<LINK> Используется для обозначения связей между документами
<МЕТА> Предоставляет различные типы невидимой информации и инструкций для браузера
<NEXTID> Определяет параметр в тэге <HEAD> для использования текстовыми редакторами
<SPAN> Используется с таблицей стилей для определения нестандартных атрибутов текста на странице
<STYLE> Заключает в себе таблицу стилей
Заголовки и названия
<Н1> Заголовок 1-го уровня
<Н2> Заголовок 2 -го уровня
<НЗ> Заголовок 3-го уровня
<Н4> Заголовок 4-го уровня
<Н5> Заголовок 5-го уровня
<Н6> Заголовок 6-го уровня
<TITLE> Название документа, показываемое в заголовке окна браузера
Абзацы и строки
<BR> Вставка конца строки
<CENTER> Выравнивает заключенные в него компоненты по центру
<HR> Помещает горизонтальную перекладину на страницу
<NOBR> Устанавливает невозможность обтекания текстом
<?> Обозначает абзац
<WBR> Вставляет мягкий перенос строки в блоке текста в тэге <NOBR>
Стили текста
<ADDRESS> Определяет информацию об адресе, контрольной сумме и авторстве
<В> Делает текст жирным, где он доступен
<BASEFONT> Устанавливает шрифт, используемый по умолчанию
<BIG> Делает шрифт на один пункт больше текущего
<BLOCKQUOTE> Обозначает отступ в тексте
<СIТЕ> Выделяет текст курсивом; часто используется для утверждений об авторском праве
<CODE> Вставляет код в виде текста с фиксированной шириной шрифта
<DFM> Данный тэг используется для пометки терминов, используемых в первый раз
<ЕМ> Выделяет текст, обычно курсивом
<FONT> Определяет вид, размер и цвет шрифта для текста
<I> Преобразует шрифт текста в курсивный, где это возможно
<KBD> Используется для отображения на экране текста, который должен ввести пользователь
<LISTING> Возвращает текст со шрифтом фиксированной ширины
<PLAINTEXT> Представляет текст шрифтом фиксированной ширины без обработки тэгов
<PRE> Представляет текст шрифтом фиксированной ширины
<S> Выводит текст зачеркнутым
<SAMP> Показывает текст как пример программы
<SMALL> Определяет, что текст должен быть показан уменьшенным шрифтом относительно основного
<STRIKE> Выводит текст зачеркнутым
<STRONG> Выделяет текст жирным шрифтом
<STYLE> Заключает в себе таблицу стилей
<SUB> Выделяет текст, переводя его в нижний регистр
<SUP> Переводит текст в верхний регистр, как степень
<ТТ> Устанавливает шрифт фиксированной ширины
<U> Делает текст подчеркнутым
<VAR> Устанавливает мелкий шрифт, иногда курсив, фиксированной ширины, используемый обычно для обозначения переменных
<ХМР> Показывает текст шрифтом фиксированной ширины
Списки
<DD> Используется внутри списка определений для задания текста в тэге <DT>
<DIR> Возвращает текст как список каталога
<DL> Используется для создания списка элементов со связанными описаниями
<DT> Обозначает определение, описание которого находится в следующем за ним тэге <00>
<L l> Обозначает один элемент в нумерованном или маркированном списке <MENU>
<OL> Преобразует строки текста с тэгами <L l> в нумерованный список
<UL> Преобразует строки текста с тэгами <L l> в маркированный список
Таблицы
Перечисленные ниже тэги определяют:
<CAPTION> Заголовок таблицы
<COL> Вид столбцов таблицы по умолчанию
<COLGROUP> Контейнер для группы столбцов
<ТАВLЕ> Раздел тэгов <TR>, <TD> и <ТН>, организованных по строкам и столбцам
<TBODY> Раздел, содержащий тэги <TR> и <TD>, который формирует основную часть таблицы
<TD> Ячейки таблицы
<TFOOT> Набор строк для использования в нижней части таблицы
<ТН> Строку заглавия таблицы; содержимое выровнено по центру и выводится жирным шрифтом <THEAD> Набор строк, используемых как заголовок таблицы
<TR> Строку таблицы
Ссылки
Следующие тэги определяют:
<А> Гиперссылку; обязательно задавать атрибуты HREF или NAME
<А HREF="url"> Гиперссылку на элемент другого документа
<А> МАМЕ="имя"> Гиперссылку на элемент этого же документа
Графика, объекты, мультимедиа и сценарий
<APPLET> Помещает апплет Java или другой выполняемый элемент на страницу
<AREA> Определяет форму активного участка изображения-карты клиента
<BGSOUND> Определяет фоновое звуковое сопровождение страницы
<EMBED> Внедряет документы любого типа на страницу для просмотра соответствующим приложением
<IMG> Используется для вставки графического элемента или видеоклипа на страницу
<МАР> Задает коллекцию активных участков изображения-карты клиента
<MARQUEE> Создает на странице бегущую строку текста
<NOSCRIPT> Определяет, что будет показывать'браузер, не поддерживающий сценарии
<OBJECT> Встраивает объект или другой элемент управления, не встроенный в HTML, на страницу
<PARAM> Используется в тэге <OBJECT> для установки свойств объекта
<SCRIPT> Определяет раздел страницы, который должен обрабатываться интерпретатором кода сценария
Формы
<BUTTON> Создает на странице кнопку HTML
<FIELDSET> Рисует прямоугольник вокруг содержащихся в нем элементов для обозначения связанных объектов
<FORM> Описывает форму на странице, которая может содержать другие компоненты и элементы управления
<INPUT> Задает параметры элемента управления формы
<LABEL> Определяет текст метки или заголовка для блока элементов управления
<LEGEND> Определяет текст, помещаемый в прямоугольник, созданный тэгом<FIELDSET>
<OPTION> Обозначает одну из альтернатив в элементе SELECT
<SELECT> Определяет поле списка или выпадающий список
<TEXTAREA> Обозначает поле ввода, состоящее из нескольких строк
Фреймы
<FRAME> Определяет конкретный фрейм внутри набора фреймов
<FRAMESET> Определяет набор фреймов, который содержит фреймы или подчиненные наборы
<IFRAME> Используется для создания встроенных «плавающих» фреймов на странице
<NOFRAMES> Определяет, что именно будет показывать браузер, не поддерживающий фреймы
   

2. Таблицы стилей

 
  

Таблицы стилей

Cуществует более 70-и свойств, предназначенных для применения в каскадных таблицах стилей Dynamic HTML. Их можно условно разделить на несколько групп. Начнем со сводной информации о единицах измерения, используемых для определения значений свойств.

Едeницы измерения

Есть две основные категории единиц: относительные и абсолютные (плюс процентные). Лучше использовать относительные единицы, поскольку определение абсолютных требует знания конкретной системы отображения: на какой принтер, монитор или другое устройство будет выводиться информация. Относительные единицы Значения em, en и ex являются типографскими терминами и соотносятся с размерами других символов, рх обозначает пикселы — элементы экрана, размер которых зависит от установок монитора и видеокарты пользователя. В Internet Explorer, начиная с версии 4, em и ех заменены на pt, en — на рх. Абсолютные единицы Значения in, cm, mm, pt, pc in дает значение в дюймах, cm — в сантиметрах, mm — в миллиметрах, pt -в пунктах (72 пт на дюйм) и рс - в пиках (1 пика равна 12 пт). Эти единицы стоит использовать только в том случае, если вы знаете, каким будет размер рабочей области устройства вывода, т. к. браузеры будут пытаться показать все в натуральную величину.

Проценты

Эти цифровые значения задаются как числа (с десятичной точкой или без нее), показывающие отношение к единице длины (обычно размер шрифта текущего элемента). Свойства Dynamic HTML

Свойства шрифта

font  
Свойства font
Значения <font-size>, [ /<line-height>], <font-family>
Значение по умолчанию He определено
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Только для <font-size>, <line-height>
Это свойство позволяет устанавливать сразу несколько свойств шрифта в одном месте, с начальными значениями, определенными для используемых свойств (т. е. значение, определенное по умолчанию для <font-size>, отличается от значения по умолчанию <font-family>). Данное свойство может быть использовано с соответствующими значениями, разделенными пробелами или запятыми, если устанавливается несколько шрифтов.
fontFamily  
Свойства fontFamily
Значения Название семейства шрифта (например, Anal)
Значение по умолчанию Устанавливается браузером
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Вы можете установить несколько возможных значений в порядке предпочтения (на тот случай, когда в браузере нет нужного шрифта). Для этого просто разделите их запятыми. Вы должны закончить родовым названием шрифта (допустимые значения serif, sans-serif, cursive, fantasy или monospace). Если имя шрифта состоит из нескольких слов, вы должны заключить эти слова в кавычки.
font-size  
Свойства fontSize
Значения <absolute>, <relative>, <length>, <percentage>
Значение по умолчанию medium
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Да (относительно родительского размера шрифта)

Значения для этого свойства могут быть выражены несколькими способами:

  • абсолютным размером, допустимые значения хх-small, x-small, small, medium, large, x -large, xx-large;
  • относительным размером, допустимые значения larger, smaller;
  • длиной в любых из описанных в начале раздела единицах измерения;
  • процентным отношением: значения представлены в процентах от родительского размера шрифта.
font-style  
Свойства fontStyle
Значения normal, italic, oblique
Значение по умолчанию normal
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Это свойство используется для определения стиля вашего шрифта. Если существует уже готовый вариант шрифта (например, New York Oblique), то он будет применен, в противном случае изменение шрифта будет произведено программно.
font-variant  
Свойства fontVariant
Значения normal, small-caps
Значение по умолчанию normal
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Normal — это стандартный вид, установленный по умолчанию, small-caps использует прописные буквы того же размера, что и обычные строчные.
font-weight  
Свойства fontWeight
Значения normal, bold, bolder, lighter или числовые значения от 100 до 900
Значение по умолчанию normal
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет жирность шрифта текста, которая зависит от толщины линии. Если используется числовое выражение, то число обязательно должно быть кратным 100: 400 — то же, что и normal, 700 — то же, что и bold.

Свойства цвета и фона

color  
Свойства color
Значения Название цвета или его номер
Значение по умолчанию Зависит от броузера
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Устанавливает цвет текста элемента страницы. Цвет может быть задан названием (например, green) или номером в соответствии со шкалой RGB. Это значение может быть задано несколькими способами: в шестнадцатеричной системе, например "#FFFFFF", процентами -"80% ,20% ,0%" или в десятичной системе - "245, 0, 20".
Background  
Свойства background
Значения transparent, <color>, <URL>, <repeat>, <scroTl>, <posltion>
Значение по умолчанию transparent
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да (относительно размера самого элемента)
Определяет параметры фона документа. Transparent означает отсутствие фона. Вы можете использовать для фона либо цвет, либо картинку с заданным адресом URL. Адрес может быть абсолютным или относительным, но обязательно должен быть заключен в скобки и располагаться непосредственно за словом url: BODY { background: url (http://mumu.com/image/picture.gif) } Можно использовать и цвет фона, и картинку. В таком случае картинка будет лежать поверх цветного фона. Цвет может быть либо чистым, либо смешанным из двух. Картинка имеет несколько настроек: <repeat> может иметь значения repeat, repeat -х, repeat-у и no-repeat; если эти значения не указаны, значением по умолчанию является repeat; <scroll> определяет при прокручивании страницы, будет ли картинка оставаться на месте или прокручиваться вместе с ней; возможные значения: fixed, scroll; <position> определяет расположение картинки на странице; значения могут быть процентными (горизонтальное, вертикальное), абсолютным расстоянием (горизонтальное, вертикальное) или определенными с помощью ключевых слои (допустимые значения: top, middle, bottom, left, center, right). Также есть возможность определить свойства фона по частям:
background-attachment
Свойства backgroundAttachment
Значения fixed, scroll
Значение по умолчанию scroll
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет, будет или нет фоновая картинка прокручиваться при прокрутке страницы.
background-color  
Свойства backgroundСolor
Значения transparent, <color>
Значение по умолчанию transparent
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет цвет фона. Может быть один цвет или два смешанных цвета. Цвет задается названием (например, green) или номером по шкале RGB. Это значение может быть задано несколькими способами: в шестнадцатеричной системе например "#FFFFFF", процентами - "80%, 20%, 0%" или в десятичной системе "255,0,0". Синтаксис для использования двух смешанных цветов такой: BODY { background-color: red/blue }
background-image
Свойства backgroundimage
Значения <URL>,none
Значение по умолчанию none
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
С помощью этого свойства можно определить URL-адрес фоновой картинки. Адрес можно задавать абсолютным или относительным, но обязательно он должен быть заключен в скобки и идти непосредственно за словом url.
background-position  
Свойства backgroundposition
Значения <position>, <length>, top, center, bottom, left,right
Значение по умолчанию top, left
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Указывает начальное положение фоновой картинки с помощью двух значений, определяющих занимаемую часть страницы (по горизонтали, по вертикали), абсолютное расстояние (в соответствующих единицах измерения, сначала по горизонтали, потом по вертикали) или используя два ключевых слова из возможных.
background-repeat  
Свойства backgroundrepeat
Значения repeat, repeat-x, repeat-у, no-repeat
Значение по умолчанию repeat
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет, повторяется ли фоновая картинка для заполнения страницы или элемента. Если используются значения repeat -x, repeat-у, то картинка повторяется лишь вдоль одного направления. По умолчанию устанавливается повторение по обоим направлениям.

Свойства текста

letter-spacing
Свойства letterSpacing
Значения normal, <length>
Значение по умолчанию normal
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет расстояние между буквами, length обозначает добавочное расстояние между буквами. Оно должно быть выражено с указанием единиц измерения.
line-height
Свойства lineHeight
Значения <число>, <length>,<percentage>, normal
Значение по умолчанию normal
Поддерживается В зависимости от браузера
Работает ли механизм наследования Да
Возможна ли процентная запись Да, по отношению к размеру шрифта текущего элемента
Опрелеляет высоту текущей строки. Числовые значения интерпретируются как размер шрифта текущего элемента, умноженный на соответствующий коэффициент (например 1,2). Если используется length, должны указываться единицы измерения. Процентное соотношение используется в сравнении с текущим размером шрифта и должно быть больше 100%.
list-style
Свойства listStyle
Значения <ключевое слово>, <position>, <url>
Значение по умолчанию normal
Поддерживается В зависимости от браузера
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет, как должны изображаться элементы списка. Может быть использовано для установки всех свойств. Их можно также установить по частям, пользуясь следующими свойствами.
list-style-image
Свойства listStylelmage
Значения none,<url>
Значение по умолчанию none
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет адрес картинки, используемой в качестве маркера или пиктограммы для каждого элемента списка.
list-style-position
Свойства listStylePosition
Значения inside, outside
Значение по умолчанию outside
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Указывает, внутри или вне тела списка должен находиться маркер.
list-style-type
Свойства listStyleТype
Значения none,circle,disk, square,decimal,lower-alpha, upper-alpha, lower -roman, upper-roman
Значение по умолчанию disk
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет вид маркера списка, используемого перед каждым элементом.
text-align
Свойства textAlign
Значения left, right, center, justify
Значение по умолчанию disk
Поддерживается В зависимости от браузера
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет, как текст будет выровнен относительно содержащего его элемента. По существу, делает то же, что и тэг <DIV AUGN= ...>.
text-decoration
Свойства textDecoration, textDecorationLineThrough, textDecorationUnderLine, textDecorationOverUne
Значения none,overline, underline,line-through
Значение по умолчанию none
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Позволяет добиться специального вида текста. Открыт для расширений, неопознанные расширения интерпретируются как подчеркивание. Это свойство не наследуется, но обычно распространяется на дочерние элементы, лежащие внутри родительских.
text-indent
Свойства Тypetextlndent
Значения <length>,<percentage>
Значение по умолчанию Zero
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Да, относительно ширины родительского элемента
Устанавливает величину отступа в единицах измерения или в процентах от ширины родительского элемента.
text-transform
Свойства textTransform
Значения capitalize,uppercase,lowercase,none
Значение по умолчанию none
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
  • capitalize делает заглавной первую букву каждого слова в элементе;
  • uppercase делает все буквы в словах элемента заглавными;
  • lowercase делает все буквы в словах элемента строчными;
  • nonе снимает все установки, приобретенные в результате наследования
vertical-align
Свойства verticalAlign
Значения baseline, sub, super, top, text-top,middl bottom, text-bottom, <percentage>
Значение по умолчанию baseline
Поддерживается Встроенными элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да, по отношению к высоте строки

Определяет расположение текущего элемента по вертикали:

  • baseline устанавливает выравнивание по образцу родительского элемента;
  • middle устанавливает вертикальную среднюю линию элемента на основе родительского элемента плюс половина строки последнего;
  • super переводит элемент в верхний регистр;
  • sub переводит элемент в нижний регистр;
  • text-top выравнивает элемент по верху текста, набранного шрифтом родительского элемента;
  • text-bottom выравнивает элемент по низу текста, набранного шрифтом родительского элемента;
  • top выравнивает верх элемента по верху самого высокого элемента текущей строки;
  • bottom выравнивает по низу самого низкого элемента текущей строки.

Свойства, связанные с размером и рамкой

Значения этих свойств используются для установки характеристик ласти вокруг элемента. Это может быть применено к символам, картинкам и т. д.
border-top-color, border-right-color, border-left-color, border-bottom-color, border-color
Свойства borderTopColor, borderRightColor,borderleftColor, borderBottomColor, borderColor
Значения <color>
Значение по умолчанию <нет цвета >
Поддерживается Блоками элементов и замещаемыми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет цвет четырех сторон рамок. Подставив вместо цвета URL картинки, вы сделаете так, что картинка будет повторяться, создавая рамку.
border-top-style, border-right-style, border-left-style, border-bottom-style, border-style
Свойства borderTopStyle, borderRightStyle, borderLeftStyle, borderBottomStyle, borderStyle
Значения none, solid, double, groove, ridge, inset,outset
Значение по умолчанию none
Поддерживается Блоками элементов и замещаемыми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет стиль четырех сторон рамок.
border-top, border-right, border-left, border-bottom, border
Свойства borderTop, borderRignt, borderLeft, borderBottom, border
Значения <border-width>, <border-style>, <color>
Значение по умолчанию medium, none, <нет цвета>
Поддерживается Блоками элементов и замещаемыми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет

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

  • <border-width> (ширина рамки) может быть medium, thin, thick или задана в единицах измерения;
  • <border-style> (стиль рамки) может быть nonе или solid.

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

border-top-width, border-right-width, border-left-width, border-bottom-width, border-width
Свойства borderTopWidth, borderRightWidth, borderLeftWidth, borderBottomWidth, borderWldth
Значения thin, medium, thick <length>
Значение по умолчанию medium
Поддерживается Блоками элементов и замещаемыми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет ширину рамки вокруг элемента. Каждая сторона может быть задана соответствующим свойством. Мы можем также заменить установку четырех индивидуальных свойств установкой одного свойства border-width так же, как и для свойств отступа margin.
clear
Свойства clear
Значения none, both, left, right
Значение по умолчанию none
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Указывает, что следующие элементы должны быть показаны ниже элемента, выровненного по левому или правому краю. По умолчанию текст обтекает такие элементы.
clip
Свойства clip
Значения rect (<top><rightxbottoinxlef t>), auto
Значение по умолчанию auto
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет, какая часть элемента видна. Все, что находится за пределами области, указанной этим свойством, увидеть нельзя.
display
Свойства display
Значения " ", none
Значение по умолчанию " "
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Это свойство указывает, будет ли показан элемент.
float
Свойства styleFloat
Значения none, left, right
Значение по умолчанию none
Поддерживается DIV, SPAN и замененными элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет обтекание элемента другими элементами слева или справа вместо помещения их под ним.
height
Свойства height, pixelHeight, posHeight
Значения auto, <length>
Значение по умолчанию auto
Поддерживается DIV, SPAN и замененными элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Устанавливает высоту элемента и измеряет ее, если это необходимо. Значение возвращается в виде строки, включающей единицы измерения (рх, % и т. д.). Для получения числового значения используется свойство posHeight.
left
Свойства left, pixelLeft, posLeft
Значения auto, <length>, <percentage>
Значение по умолчанию auto
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да, относительно ширины родительского элемента
Задает горизонтальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (рх, % и т. д.). Для получения значения в виде числа используется свойство posLeft.
margin-top, margin-right, margin-left, margin-bottom, margin
Свойства marginTop, marginRight, marginLeft, marginBottom, margin
Значения auto, <length>, <percentage>
Значение по умолчанию Zero
Поддерживается Блоками элементов и замещаемыми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да, относительно ширины родительского элемента
Определяет размер отступов вокруг данного элемента. Свойство margin служит для задания четырех отступов. Если используется несколько значений, но меньше, чем четыре, оставшиеся противоположные стороны будут равными. Эти значения устанавливают минимальное расстояние между текущим элементом и остальными.
overflow
Свойства overflow
Значения none, clip, scroll
Значение по умолчанию none
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет

Это свойство управляет тем, что произойдет, если содержимое элемента выйдет за его границы:

  • none - если элемент выйдет за пределы своего фрагмента, то он все равно будет изображен (например, часть текста, для которой не хватило места в отведенной полосе);
  • clip — выступающие части элемента будут обрезаны;
  • scroll — пользователь сможет увидеть выходящие за пределы элемента части с помощью прокрутки.
padding-top, padding-right, padding-left, padding-bottom, padding
Свойства paddingTop, paddingRight, paddingLeft, paddingBottom, padding
Значения auto, <length>, <percentage>
Значение по умолчанию Zero
Поддерживается Блоками элементов и замещаемыми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да, относительно ширины родительского элемента
Определяет расстояние между содержимым и рамкой элемента. Свойство padding используется для задания четырех таких расстояний. Если имеется несколько значений, но меньше четырех, оставшиеся противоположные стороны будут равными.
position
Свойства position
Значения absolute, relative, static
Значение по умолчанию relative
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет

Устанавливает, каким образом вычисляется положение элемента в плоскости экрана:

  • absolute — элемент будет поставлен в некоторое положение относительно фона и будет двигаться вместе с ним;
  • static— элемент будет поставлен в некоторое положение относительно фона, но не будет двигаться при прокручивании страницы;
  • relative — элемент будет помешен в обычное положение относительно других, в соответствии с положением в исходном коде (это значение установлено по умолчанию).
top
Свойства top, pixelTop, posTop
Значения auto, <length>, <percentage>
Значение по умолчанию auto
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да, относительно ширины родительского элемента
Устанавливает или возвращает вертикальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (рх, % и т. д.). Для получения значения в виде числа используется свойство posTop.
visibility
Свойства visibility
Значения visible, hidden, inherit
Значение по умолчанию inherit
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет

Позволяет элементу быть видимым или невидимым на странице. Невидимые (hidden) элементы занимают то же место и так же влияют на расположение других элементов, как и видимые (visible), но становятся прозрачными. Это свойство может быть использовано для отображения лишь одного из элементов, занимающих одно и то же место:

  • visible - элемент виден на экране;
  • hidden - элемент не виден;
  • inherit — элемент виден, если его родительский элемент является видимым.
width
Свойства width, pixelWidth, posWidth
Значения auto,<length>, <percentage>
Значение по умолчанию auto за исключением элементов с внутренними установками размера
Поддерживается тэгами DIV, SPAN и замещаемыми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да, относительно ширины родительского элемента
Устанавливает ширину элемента и измеряет ее, если это необходимо. Значение возвращается как строка, включающая тип единиц измерения (рх, % и т. д.). Для получения значения в виде числа используется свойство posWidth.
z-index
Свойства zlndex
Значения <число>
Значение по умолчанию В зависимости от контекста в исходном тексте HTML
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Свойство z-lndex указывает, в каком порядке элементы будут перекрывать друг друга. Элементы с более высоким z-индексом появятся поверх элементов с более низким z-индексом. При положительных значениях элемент ставится перед обычным текстом, при отрицательных - позади него. Таким образом, на страницах создается набор плоских слоев, для которых задается порядок перекрывания.

Свойства печати

page-break-after
Свойства pageBreakAfter
Значения <auto>, <always>, <left>, <right>
Значение по умолчанию <auto>
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Управляет началом и концом страницы, разрывом страницы и тем, где на странице содержание продолжится, т. е. слева или справа.
page-break-before
Свойства pageBreakBefore
Значения <auto>, <always>, <left>, <right>
Значение по умолчанию <auto>
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Управляет началом и концом страницы, разрывом страницы и тем, где на странице содержание продолжится, т. е. слева или справа.

Свойства фильтров

Все фильтры вызываются с помощью ключевого слова filter. Есть два вида фильтров: статические и динамические. Динамические фильтры разделены на две группы: управляющие переходом (переходные) и управляющие появлением объекта на экране. Фильтры первой группы предназначены для того, чтобы объект накладывался на другие объекты или уходил с соседних объектов. Фильтры второй группы заставляют объекты появляться или исчезать одним из 23-х возможных способов. Все фильтры вызываются одинаково из каскадной таблицы стилей:

filter: имя фильтра (параметр1, параметр2, и т. д.}

Есть 14 типов статических фильтров и 2 типа динамических.

Visual filters
Свойства объект.style.<имя фильтра> (параметр1 и т. д.)
Значения <имя фильтра> (параметр1 , параметр2 и. т. д.)
Значение по умолчанию Нет примененного фильтра
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Управляет внешним видом объектов при помощи набора встроенных фильтров. Приведем список доступных фильтров и укажем их функции:

Фильтр
Функция
alpha
Задает постоянный уровень прозрачности
blur
Создает эффект движения
chroma
Создает одноцветный транспарант
dropshadow
Обводит силуэт объекта
fliph
Делает горизонтальное отражение картинки
f lipv
Делает вертикальное отражение картинки
glow
Создает эффект «тления»
grayscale
Преобразует объект в черно-белый
Invert
Инвертирует цвета, оттенки и яркость
light
Освещает объект от источника
mask
Делает из объекта маску-транспарант
shadow
Создает силуэт объекта отдельно от объекта
wave
Создает «волнистое» искажение объекта
xray
Показывает только контур объекта
revealtrans
Свойства объект .style. revealtrans
Значения (duration = <длительность>, transition = <тип перехода>)
revealtrans (duration = < длительность>, transition = <тип перехода>)
Значение по умолчанию Нет примененного фильтра
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет

Позволяет открывать или закрывать одни элементы другими, используя 23 встроенных шаблона.

  • <длительность> — время, за которое превращение с помощью фильтра произойдет полностью (в миллисекундах);
  • <тип перехода> — целое число, соответствующее номеру применяемого фильтра.
Тип превращения
Номер фильтра
Box In (стягивающийся прямоугольник)
0
Box Out (расширяющийся прямоугольник)
1
Circle In (стягивающийся круг)
2
Circle Out (расширяющийся круг)
3
Wipe Up (стирание вверх)
4
Wipe Down (стирание вниз)
5
Wipe Right (стирание вправо)
6
Wipe Left (стирание влево)
7
Vertical Blinds (вертикальные жалюзи)
8
Horisontal Blinds (горизонтальные жалюзи)
9
Checkerboard Across («сужающиеся» клетки шахматной доски)
10
Checkerboard Down («закрывающаяся» шахматная доска)
11
Random Dissolve (случайный наплыв)
12
Split Vertical In (вертикальное деление внутрь)
13
Split Vertical Out (вертикальное деление наружу)
14
Split Horisontal In (горизонтальное деление внутрь)
15
Split Horisontal Out (горизонтальное деление наружу)
16
Strips Left Down (стирание влево/вниз)
17
Strips Left Up (стирание влево/вверх)
18
Strips Right Down (стирание вправо/вниз)
19
Strips Right Up (стирание вправо/вверх)
20
Random Bars Horisontal
(случайно расположенные полосы по горизонтали)
21
Random Bars Vertical (случайно расположенные полосы по вертикали)
22
Random selection of (0-22) (случайный выбор из предыдущих)
23
blendtrans
Свойства объект, style,
Значения (duration= <длительность>) blendtransblendTrans(duration=<длительность>)
Значение по умолчанию Нет примененного фильтра
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет

Позволяет управлять появлением и исчезновением выбранных видимых объектов. Здесь <длительность> — время, за которое действие фильтра произойдет полностью (в миллисекундах).

Другие свойства

cursor
Свойства cursor
Значения

auto, crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize,se-resize,sw-resize, s-resize,w-resize,text,wait, help

Значение по умолчанию auto
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяет вид курсора мыши.

События Dinamic HTML

Событие
Описание
onabort
Возникает, когда пользователь прерывает загрузку картинки
onafterupdate
Возникает при окончании передачи данных
onbeforeunload
Происходит перед выгрузкой страницы, что позволяет сохранить данные
onbeforeupdate
Возникает перед выгрузкой страницы
onblur
Выход окна из фокуса
onbounce
Происходит в элементе <MARQUEE>, когда значение свойства BEHAVIOR — ALTERNATE и содержимое доходит до конца
onchange
Происходит при изменении содержимого элемента
onclick
Происходит при щелчке на документе
ondataavailable
Возникает периодически, когда данные приходят из асинхронного источника
ondatasetchanged
Происходит при изменении порядка данных, например, во время фильтрации данных
ondatasetcomplete
Возникает, когда все данные из источника становятся доступными
ondblclick
Происходит, когда пользователь дважды щелкает на документе
ondragstart
Происходит, когда пользователь начинает перетаскивание
onerror
Ошибка при передаче
onerrorupdate
Возникает при отмене изменения данных событием onbeforeupdate, заменяя событие onafterupdate
onfilterchange
Возникает при смене состояния статического фильтра или при окончании перехода динамического
onfilterevent
Происходит, когда завершен данный переход фильтра
onfinish
Происходит при окончании цикла в элементе MARQUEE
onfocus
Элемент становится активным
onhelp
Нажатие пользователем клавиши <F1> или <Не1р>
onkeydown
Возникает при нажатии клавиши
onkeypress
Возникает при нажатии клавиши и продолжается при удержании клавиши в нажатом состоянии
onkeyup
Возникает, когда пользователь отпускает клавишу
onload
Возникает при полной загрузке элемента
onmousedown
Происходит, когда пользователь нажимает кнопку мыши
onmousemove
Происходит, когда пользователь двигает мышь
onmouseout
Происходит, когда курсор мыши выходит с элемента
onmouseover
Происходит, когда курсор мыши впервые входит на элемент
onmouseup Происходит, когда пользователь отпускает кнопку мыши
onreadystatechange Возникает при изменении свойства readystate
on reset Происходит при очистке формы
on resize Изменение пользователем размеров окна
onrowenter Происходит при изменении данных в текущей строке; доступны новые данные
onrowexit Происходит перед изменением данных в текущей строке источником
onscroll Прокрутка окна пользователем
onselect Происходит при изменении текущего выделения
onsetectsart Происходит, когда пользователь в первый раз запускает выделенную часть документа
onstart Происходит при начале прокрутки бегущей строки элемента MARQUEE
onsubmrt Происходит при отсылке формы на сервер или нажатии кнопки SUBMIT (отправка)
onunload Возникает непосредственно перед выгрузкой страницы
  
 

9. ПРИЛОЖЕНИЕ 4. СПРАВОЧНИК ПО JAVASCRIPT

 

ПРИЛОЖЕНИЕ 4. СПРАВОЧНИК ПО JAVASCRIPT

 

1. Сценарий

 

Сценарий

Сценарий на JavaScript включается в документ с помощью тэга <SCRIPT>. Например:

<HTML>
<HEAD>
<!— заключаем сценарий в тэги комментария
<script language= "JavaScript">
... Код сценария ...
</SCRIPT>
—>
</HEAD> <BODY>
... Код HTML ...
</BODY>
</HTML>

Необходимо иметь в виду следующее:

  • Поместив сценарий на JavaScript в раздел <HEAD> документа, вы делаете так, что весь сценарий будет загружен до того, как потребуется его выполнить.
  • Код сценария должен быть заключен в тэги комментария HTML для того, чтобы старые браузеры, не понимающие JavaScript, не отображали код на экране.
  • Регистр букв в JavaScript имеет значение.
 

2. Типы данных

 

Типы данных

В JavaScript существуют такие типы данных:

  • string (строка ) — последовательность символов, заключенных в кавычки;
  • numbers (число) — целые числа и десятичные дроби;
  • boolean (логическое ) —True или False;
  • null — отсутствие данных.

Кроме того, JavaScript поддерживает специальные символы, как и C++.

Символ Функция
\n Новая строка
\t Табуляция
\f Новая страница
\b Забой
\r Возврат каретки

Вы можете не писать другие символы: нужно просто поставить перед каждым из них косую черту (\). Тем самым вы запретите браузеру их интерпретировать. Чаще всего это используется для кавычек, косой черты или для включения восьмеричного значения символа:

document.write("Здесь показаны \"кавычки\" внутри строки");
document.write("Это обратная косая черта \\");
document.write("Это символ пробела: \040.");

 

3. Переменные

 

Переменные

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

х=55; //х -- числовая переменная, имеющая значение 55
у="55"; // у -- строковая переменная, имеющая значение"55"
z=l+y;
<! .. Если у -- строковая переменная, то она будет
автоматически преобразована в ближайшее целое значение так,
чтобы 1 могла быть прибавлена к ней. ->
document.write(x)
< 55 выводится на экран. Если х - целое число, а не строковая
переменная, то Javascript выполнит необходимые
преобразования. ->
n=3.1459; // назначение действительного (дробного) числа п=0785; // числа, начинающиеся с 0, - восьмеричные n=OxFA8B; // числа, начинающиеся с Ох, — шестнадцатеричные п=5.236Е-7 // экспоненциальное представление десятичного числа (с плавающей точкой)

Имена переменных должны начинаться с буквы или символа подчеркивания, второй и последующие символы имени переменной могут быть буквой, цифрой и подчеркиванием. Язык JavaScript чувствителен к регистру. Например, variable и Variable— это разные переменные. Переменная считается объявленной с момента ее упоминания в программе, так что специальных объявлений делать не нужно. Для исключения недоразумений можно использовать ключевое слово var. Например:

var x=15

 

4. Операторы присваивания

 

Операторы присваивания

Для присваивания значений в JavaScript используются следующие операторы:

Оператор
Пример
Результат
=
х=у
х равно у
+=
х+=у
х равно x+ у
=
х-=у
х равно x-у
*=
х*=у
х равно x*у
/=
х/=у
х равно x/у
%=
х%=у
х равно остатку от деления х на у

Каждый из этих операторов присваивает значение справа переменной слева. Пример:

Х=200;
Y=10;
Х+=у; // х теперь равен 210

 

5. Операторы сравнения

 

Операторы сравнения

Оператор
Значение
==
Равно
!=
Не равно
>
Больше, чем
>=
Больше или равно
<
Меньше, чем
<=
Меньше или равно
 

6. Другие операторы

 

Другие операторы

Оператор Значение
+ Сложение
- Вычитание
* Умножение
Уменьшение на 1
& или AND Поразрядное логическое И
|или OR Поразрядное логическое ИЛИ
^ или ХО Сложение по модулю 2
<< Сдвиг на один разряд влево
/ Деление
% Деление по модулю
++ Увеличение на 1
>> Сдвиг на один разряд вправо
>>> Сдвиг вправо с заполнением нулями
&& Логическое И
I Логическое ИЛИ
! Логическое НЕ
 

7. Строковые операторы

 

Строковые операторы

Оператор Значение
+ Склеивание строк
>
>=
Сравнивает строки путем сравнения кодов ASCII, начиная с правого конца
<
<=
Сравнивает строки путем сравнения кодов ASCII, начиная с левого конца
 

8. Комментарии

 

Комментарии

Оператор Значение
// Комментарий — занимает одну строку
/*
*/
Комментарий — занимает несколько строк
 

9. Ввод/вывод

 

Ввод/вывод

В JavaScript есть три метода ввода информации пользователем или вывода ее на экран.

Alert

Этот метод позволяет выводить окно сообщения с кнопкой ОК.

alert("Привет!")

Рис. 684.

Confirm

Выводит окно сообщения с кнопками ОК и Cancel. Возвращает True, если нажата кнопка ОК, и False, если нажата кнопка Cancel.

confirm ("Вы хотите закончить работу?")

Рис. 685.

Prompt

Выводит окно сообщения и текстовое поле, предназначенное для ввода информации пользователем. Первый аргумент в формате строки определяет текст, который будет находиться над текстовым полем. Второй аргумент — это строка, целое число или свойство существующего объекта, формирующее значение, по умолчанию отображаемое в текстовом поле. Если второй аргумент не задан, внутри текстового поля появится надпись <underlined>.

Если нажата кнопка ОК, возвращается напечатанный в поле текст, если нажата кнопка Cancel— возвращается False.
prompt("Введите ваше имя", " ")

Рис. 686.

 

684.gif

Изображение: 

685.gif

Изображение: 

686.gif

Изображение: 

10. Управление выполнением программы

 

Управление выполнением программы

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

Условные выражения

В JavaScript есть лишь одна конструкция условного выражения — Если. . то ... иначе .... Она используется для работы различных блоков кода в зависимости от условий. Синтаксис этой конструкции:

if (условие)
{ код работает, если условие выполнено
}
else
{
код работает, если условие не выполнено
};

Свойства

  • Часть, определяемая словом else, необязательна П Конструкция допускает вложенные условия
  • Если указываются одновременно несколько условий, они должны быть заключены в скобки

Ниже приведен пример:

lang=prompt("На каком языке Вы говорите?",")
if (lang=='английский')
alert("I am speake English a little")
else
{
if (1апд="русский")
alert("Я тоже говорю по-русски") else
alert("Я не говорю на этом языке") };

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

Циклы

for — выполняет блок кода указанное количество раз.

for (i= 0; i = 10; i++)
{
document.write(i);

while — блок кода работает, пока выполняется условие.

while (условие)
{
выполняемые команды...
}

break — выход из цикла.

х = 0;
while (x != 10)
{
n—prompt ("Введите число или нажмите "q" для выхода", "")
if (n == "q")
{
alert("Увидимся позже");
break;

continue — переход в место непосредственно за условным выражением.

х = 0;
while (х !- 1)
if (!(confirm ("Прибавить к n единицу?")))
.{continue
// следующая команда не будет выполнена
Х++;
}
alert ("До свидания!");

 

11. Встроенные функции

 

Встроенные функции

В JavaScript существует набор встроенных функций, доступных при выполнении кода:

Функция Описание
escape (символ) Возвращает строку в виде % XX , где XX —код ASCII символа в скобках
eval (выражение) Возвращает результат вычисления выражения
в скобках
isNaN (значение) Возвращает True, если значение в скобках не является числом
parseFloat (строка) Преобразует строку в число с плавающей запятой
parselnt (строка, основание) Преобразует строку в целое число в системе счисления с указанным основанием
typeOf (объект) Возвращает тип указанного объекта как строку, например boolean, function и т. д.
 

12. Встроенные объекты

 

Встроенные объекты

JavaScript предлагает для работы с различными типами данных ряд встроенных объектов, каждый из которых имеет свой собственный набор свойств и методов, доступных в коде JavaScript.

Объект Array

Объект Array определяет метод создания массивов и способ работы с ними. Для создания нового массива используется такая конструкция:

x=new ArrayO; // создание нового массива
x=new Array(lO); //создание массива из 10 элементов
// создание массива и одновременно заполнение его значениями
x=new Array("Мурка", "Васька", "Толстопуз",."Барсик");

Свойство Описание
length Целое число с возможностью изменения, указывающее количество элементов массива
Метод Описание
join ( [строка] ) Возвращает строку, содержащую все элементы массива, строка в скобках — необязательный разделитель
reverse () Изменяет на обратный порядок следования элементов
sort ([функция]) Сортирует массив; если в скобках указана функция — по результатам ее вычисления

Объект Boolean

Объект Boolean предназначен для хранения простых значений типа да/нет, true/false. Чтобы создать новый объект типа Boolean, используется такой синтаксис:

MyAnsver=new Boolean([ значение});

Если значение равно 0, null, пропущено или является пустой строкой, новый объект будет иметь начальное значение false. Все другие значения этого аргумента, включая строку false, приведут к созданию объекта, имеющего значение true.

Метод
Описание
toStrlng() Возвращает значение объекта как строку true или false
valueOf() Возвращает численное значение объекта

Объект Date

Объект Date поддерживает метод для работы с датами и временем в JavaScript. Новые экземпляры объектов Date создаются так:

newDateObject = new Date([значение])

Значение — необязательные установки даты и времени для нового объекта. Если они не заданы, используются текущие дата и время. Значение может иметь такой вид:

  • миллисекунды — начиная с полуночи по Гринвичу 1 января 1970 года;
  • год, месяц, день (например, 1997,0,27 — 27 января 1997);
  • год, месяц, день, часы, минуты, секунды;
  • месяц день, годчасы:минуты:секунды (например, September 23,1997 08:25:30).
Метод Описание
getDate ( )
Возвращает число месяца как целое числоот 1 до 31
getDay ()
Возвращает день недели как целое число от 0 (воскресенье) до 6 (суббота)
getHours ( )
Возвращает часы как целое от 0 до 23
getMlnutes ( )
Возвращает минуты как целое от 0 до 59
getMonthO
Возвращает месяц как целое от 0 (январь) до 1 1 (декабрь)
getSeconds ( )
Возвращает секунды как целое от 0 до 59
geTime ( )
Возвращает количество миллисекунд между 1 января 1970 года в 00:00:00 по Гринвичу и текущим объектом Date как целое число
getTimeZoneOf f set ( )
Возвращает разницу в минутах между местным и гринвичским временем как целое число
getYear ( )
Возвращает год без первых двух разрядов как целое число
parse (дата)
Возвращает количество миллисекунд между 1 января 1970 года в 00:00:00 по Гринвичу да- той (дата;
setDate ( значение)
Устанавливает день месяца с помощью цело- го числа значение от 1 до 31
setHours ( значение)
Устанавливает часы с помощью целого числа значение от 0 до 23
setMinutes ( значение)
Устанавливает минуты с помощью целого числа значение от 0 до 59
setMonth ( значение)
Устанавливает месяц с помощью целого числа значение от 0 до II
setSeconds ( значение)
Устанавливает секунды с помощью целого числа значение от 0 до 59
setTime ( значение)
Устанавливает значение объекта Date с помощью целого числа значение, которое отражает количество миллисекунд между 1 января 1970 года в 00:00:00 по Гринвичу
set Year ( значение)
Устанавливает часы с помощью целого числа значение, большего 1900
toGMTStringO
Преобразует данные местного времени во время по Гринвичу и возвращает как строку
toLocaleString ( )
Преобразует время по Гринвичу в данные местного времени и возвращает как строку
UTC( год, месяц)
Возвращает количество миллисекунд между 1 января 1970 года в 00:00:00 по Гринвичу и текущим объектом Date как целое число [, часы] [, минуты] [, секунды])

Объект Function

Объект Function предоставляет механизм для компиляции кода JavaScript в виде функции. Новая функция создается так:

functionName = new Function(аргумент1, аргумент2, ... код функции),

где аргумент1, аргумент2 и т. д. — аргументы для создаваемого объекта Function, а код функции — строка, содержащая тело функции. Это может быть несколько выражений JavaScript, разделенных точкой с запятой.

Свойство Описание
arguments [ ] Ссылка на массив Arguments, содержащий аргументы вызванной функции
caller Определяет функцию, вызываемую объектом Function
prototype Предоставляет способ для добавления свойств объекту Function

Объект Arguments

Объект Arguments — список (массив) аргументов объекта Function.

Свойство Описание
length Целое число, определяющее количество аргументов, необходимых вызванной функции

ОбъектMath

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

MyArea= Math.PI * MyRadiuS * MyRadius;
MyResult = Math.floor(MyNumber);
X=Math.sin(6.28)

Свойство
Описание
E
Постоянная Эйлера
LN10 Значение натурального логарифма числа 10
LN2 Значение натурального логарифма числа 2
LOG10E Значение десятичного логарифма экспоненты (числа е)
LOG2E
Значение двоичного логарифма экспоненты
PI
SORT1_2
SORT
Значение постоянной п
Значение квадратного корня из '/2
Значение квадратного корня из 2
Метод
Описание
Abs ( число)
Возвращает модуль числа число
acos ( число)
Возвращает арккосинус числа число
as in ( число)
Возвращает арксинус числа число
a tan ( число)
Возвращает арктангенс числа число
atan2 (x, у)
Возвращает угол в полярных координатах точки
ceil ( число)
Округляет число вверх до ближайшего целого
cos ( число)
Возвращает косинус числа число
ехр ( число)
Возвращает экспоненту в степени число
floor ( число)
Округляет число вниз до ближайшего целого
log ( число)
Возвращает натуральный логарифм числа число
max ( число1 , число1 )
Возвращает большее из чисел число1, число2
mi п( число 1, число2)
Возвращает меньшее из чисел число1, число2
pow ( число 1 . число2 )
Возвращает число1 в степени число2
random ( )
Возвращает случайное число в диапазоне 0 и 1
round ( число)
Округляет число до ближайшего целого
sin ( число)
Возвращает синус числа число
sqrt (число)
Возвращает квадратный корень из числа числе
tan ( число)
Возвращает тангенс числа число

Объект Number

Объект Number предоставляет набор свойств, полезных при работе с числами.

Свойство
Описание
MAX_VALUE
Максимальное численное значение в JavaScript (~1,79Е+308)
MIN_VALUE
Минимальное численное значение в JavaScript (~2,22Е-308)
NaN
Значение, не являющееся числом
NEGATIVE_INFINITY
Минус бесконечность
POSITIVE_INFINITY
Плюс бесконечность
Метод
Описание
oString( [основание] )
Преобразует число в десятичную системусчисления (или в число в системе по основанию основание,) и возвращает в виде строки
valueof ( )
Возвращает двоичное численное значениечисла

Объект String

Объект String дает вам набор методов для работы с текстом. Для создания объекта String используется такой синтаксис:

MyString = new String ( [значение] )

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

Свойство Описание
Lenth Целое число, указывающее количество символов в строке
Метод Описание
anclor ("name") Возвращает исходную строку окруженную тегами <A> и </A> с атрибутом NAME, равным name
big () Возвращает исходную строку заключенную в теги <BIG> и </BIG>
blink () Возвращает исходную строку заключенную в теги <BLINK> и </BLINK>
bold () Возвращает исходную строку заключенную в теги <B> и </B>
charAt (позиция) Возвращает символ, стоящий в позиции позиция строки
fixed ( )
Возвращает исходную строку, заключенную в тэги <ТТ> и </ТТ>
fontcolor ( " color" )
Возвращает исходную строку, заключенную в тэги <FONT> и </FONT> с атрибутом COLOR, равным color
fontsize ( " size" )
Возвращает исходную строку, заключенную в тэги <FONT> и </FONT> с атрибутом SIZE, paвным size
indexO f ( значение [ , позиция] )
Возвращает позицию первого появления строк! значение, начиная с позиции позиция
italicsO
Возвращает строку, заключенную в тэги <I> и </I>
lastlndexOf ( значение [ , позиция] '.
) Возвращает позицию первого с конца строки появления строки значение, начиная с позиции позиция
link ("href")
Возвращает исходную строку, окруженную тэгами <А> и </А>, с атрибутом HREF, равным href.
small ()
Возвращает исходную строку, заключенную в тэги <SMALL> и </SMALL>
Метод
Описание
split (разделитель)
Возвращает массив строк, созданный разделением всех встретившихся строк разделительным символом разделитель
strikeO
Возвращает исходную строку, заключенную в тэги <STRIKE> и </strike>
sub()
Возвращает исходную строку, заключенную в тэги <SUB> и </SUB>
substring (номер 1 , номер2)
Возвращает подстроку данного объекта String начинающуюся символом в позиции номер1 и заканчивающуюся символом в позиции перед номер2
sup( )
Возвращает исходную строку, заключенную в тэги <SUP> и </SUP>
toLowerCase ( )
Возвращает исходную строку со всеми символами, преобразованными в строчные
toUpperCase ( )
Возвращает исходную строку со всеми символами, преобразованными в прописные
 

13. Зарезервированные слова

 

Зарезервированные слова

Здесь представлены слова, которые нельзя использовать для названия функции, метода, переменной или объекта. Слова, которые не используются сейчас как ключевые в JavaScript, зарезервированы на будущее.

Abstract
boolean

break
byte
case
catch
char
class
const
continue
default
delete
do
double
else
extends
false
final
finally
float
for
function
goto
if
Implements
import
in
instanceof
int
interface
long

native
new
null
package
private
protected
public
reset
return

short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
while
with
 

10. ПРИЛОЖЕНИЕ 5. СПРАВОЧНИК ПО ACTIONSCRIPT

 

ПРИЛОЖЕНИЕ 5. СПРАВОЧНИК ПО ACTIONSCRIPT

 

1. Основные операции (Basic Actions)

 

Основные операции (Basic Actions)

В данном разделе собраны сведения о действиях (операциях), которые включены в список Basic Actions (Основные действия) панели действий.

  • FSCommand. Передает проигрывателю фильмов команду категории FS Command. Примеры:
    fscommand ("allowscale", true);
    fscommand ("fullscreen", true);
  • Get URL. Осуществляет переход по заданному URL-адресу; соответствующая страница открывается в окне, задаваемом необязательным параметром. Пример:
    on (release) (
    getUrl ("http:// www.admiral.ru/~dunaev",
    self);
  • Go To. Осуществляет переход (с последующим воспроизведением или остановкой) к кадру, заданному номером или меткой. Примеры:

    gotoAndPlay (5) ;
    gotoAndStop ("My_label");
  • If Frame Is Loaded. Cм. ifFrameLoaded в разделе «Прочие операции (Actions)».
  • Load Movie. Загружает фильм, находящийся по указанному URL-адресу на заданном уровне, либо производит загрузку этого фильма в заданный клип. Если новый фильм должен быть размещен на том же уровне, где находится фильм, осуществляющий операцию загрузки, загружаемый фильм вытесняет его. Пример:
    on (release) {
    loadMovie ("My_movie.swf", 1);
    }

  • On Mouse Event. Подключает сценарий обработки события мыши или клавиатуры. В качестве обработчика события выступает инструкция, заключенная в фигурные скобки ({}). Пример.

    on (release) f
    inloadMovie (44);
    }
    on (press) {
    on (releaseOutside) {
    on (rollover) (
    on (rollout) {

  • Tell Target. Данная операция служит для передачи команды клипу. Эта операция обладает рядом недостатков, за которые ее критикуют многие разработчики. Второй из приведенных ниже примеров демонстрирует предпочтительное альтернативное решение, позволяющее обойтись без данной операции, — применение механизма адресации. Кроме этого, в настоящее время вместо операции Tell Target рекомендуется использовать инструкцию with.
    on (release) {
    tell Target(_root.My_clip) { gotoAndStop (10);
    on (dragOver) {
    on (dragOut) {
    on (keyPress "D") {
  • Play. Воспроизводит фильм. У этой операции нет никаких параметров. Пример:
    play ();
  • Stop. Останавливает воспроизведение фильма. У этой операции нет никаких параметров. Пример:

  • stop ();
  • Stop All Sounds. Полностью отключает воспроизведение звука в фильме.
    stopAHSounds ();
    on (release) f
    _root.My_clip.gotoAndStop (10); }

  • Toggle High Quality. Позволяет включать и отключать режим сглаживания неровностей экранных шрифтов. У этой операции нет никаких параметров. Пример:

    on (press) {
    toggleHighQuality (); }

  • Unload movie. Позволяет выгрузить любой фильм, находящийся на заданном уровне. При этом нет необходимости указывать URL-адрес выгружаемого фильма. Пример:
    on (release) { unloadMovie(1);
 

2. Прочие операции (Actions)

 

Прочие операции (Actions)

В данном разделе собраны сведения об операциях, включенных в список Actions (Действия, операции) панели действий.

  • break. Прекращает выполнение никла. В следующем примере значение переменной box будет равно 7:

    on (release) ( do {
    k = k + 1; if (k>6) (
    break; }
    } while (k<9); box = k; }

  • call. Вызывает сценарий определенного кадра, причем сам целевой кадр при выполнении данной операции не открывается. Сценарий просто заимствуется. У этой операции всего один параметр, в котором задаются имена клипа и кадра. Имя кадра предваряется двоеточием. В настоящее время вместо операции call рекомендуется использовать механизм пользовательских функций. Пример:

    on (release) {
    call
    ("_root.My_clip:my_frame23"); }
  • comment. Позволяет вставлять в текст сценариев комментарии. Комментарии никак не влияют на выполнение сценария. Начало комментария обозначается в тексте программы двойным слэшем (//). Пример:
    //При добавлении нового клипа здесь понадобится внести изменения
  • continue. Эта операция до некоторой степени схожа с операцией break. Однако в отличие от последней она прекращает выполнение не всего цикла, а лишь текущей его итерации. В приведенном ниже примере переменная box получит значение 9:
    on (release) { do {
    k = k + I; if (k > 6) {
    continue; I
    ) while (k < 9); box = k; }
  • delete. Удаляет указанную переменную или заданный объект и в случае успешного выполнения возвращает значение true. Пример:

    delete (k);
  • do while. Тело цикла будет исполняться до тех пор, пока не выполнено условие выхода из цикла. Инструкции, заданные в фигурных скобках в конструкции do { . . . }, будут повторно выполняться до тех пор, пока условие, заданное в скобках в конструкции while (...) остается истинным. Это цикл с постусловием, то есть тело цикла обязательно будет выполнено хотя бы один раз (ср. while). Пример:
    on (release) {
    do {
    k = k + 1;
    } while (k < 9);
    box = k; }
  • dupIicateMovieCIip. Создает копию клипа с заданным именем экземпляра. Требуется указать уровень и имя нового экземпляра. Пример:

    on (rollover) {
    _root.mcCool.dupIicateMovieCIip ("moreCool", 1) ;
    moreCool. x = 8;

  • else. Данная операция позволяет задать альтернативную последовательность действий для инструкции if. Эти действия будут выполняться при ложном значении условия. Пример:
    if (k != 8) {
    gotoAndPlay(1); } else (
    gotoAndPlay(15); }
  • else if. Позволяет задать для инструкции if дополнительное условие, значение которого будет проверяться при ложном основном условии. Пример:
    if (k != 8) {
    gotoAndPlay (1); } else if (name == "Иван") {
    gotoAndPlay ("Василий"); }
  • for. Позволяет организовать цикл, в котором предусмотрены начальная инструкция присваивания и условие завершения, как правило, связанные с значением переменной параметра цикла, причем значение этой переменной увеличивается в инструкции инкремента на каждом шаге цикла. Постфиксная форма инкремента (<имя переменной>++) соответствует увеличению значения переменной после выполнения тела цикла, а префиксная форма (+ + <имя переменной>) — перед его выполнением. Пример:
    on (release) {
    for (k = 1: k < 10; k++) {
    box = k; }
  • for... in. Перебирает все поля объекта, последовательно возвращая значения всех переменных, существующих в этом объекте. Пример:
    on (release) {
    dog = {breed: 'спаниэль', class: 'старшие', name: 'Дружок');
    for (breed in fog) {
    out *-= dog [breed] + newline;

    }
    }
    На выходе получим следующее значение переменной out:
    спаниэль
    старшие
    Дружок
  • FSCommand. См. раздел «Основные операции (Basic Actions)».
  • function. Определяет функцию — набор операций, которые будут выполняться в рамках некоторой новой команды. Определение функции задает этот набор, но не приводит к немедленному выполнению входящих в него операций. Вызов функции в настоящее время рекомендуется использовать вместо операции call.
    Пример:
    function My_func (xvar) (
    _root.myclip._rotation.xvar;
    }

    Чтобы вызвать функцию, необходимо включить ее имя в сценарий кнопки, клипа или кадра. Если функция определена с параметрами, при ее вызове нужно использовать фактические параметры — литералы или переменные. Пример:
    on (release) {
    My_func (35); }
  • getURL. См. get URL в разделе «Основные операции (Basic Actions)».
  • gotoAndPlay. См. Go To в разделе «Основные операции (Basic Actions)».
  • gotoAndStop. См. Go To в разделе «Основные операции (Basic Actions)».
  • if. Позволяет задать условие, при котором будет выполнена некая операция.
    Пример:
    if (k == 35) {
    gotoAndPlay (7) ;
  • ifFrameLoaded. Определяет, загружен ли указанный кадр. Эта операция часто применяется и начальных кадрах фильма в процессе его предварительной загрузки. Пример:
    ifFrameLoaded ("Scenel", 15) { gotoAndPlay (4);
    )
  • include. Обращается к текстовому файлу, содержащему сценарий ActionScript, и выполняет этот сценарий. Для файлов с внешними сценариями рекомендуется использовать расширение as. Пример:

    on (release) (
    #include "remote.as";
    Next Frame() ;
  • nextScene. Переход к следующей сцене. Эта команда доступна только в экспертном режиме. Пример:

    NextScene();
  • on. См. On Mouse Event в разделе "Основные операции (Basic Actions)».
  • onClipEvent. Позволяет задать сценарий обработки событий для выделенного клипа. Допускается использование девяти различных событий. Пример:
    onClipEvent(load) score = 1;
    I
    onClipEvent(enterFrame) {
    onClipEvent(unload) {
    onClipEvent(mouseDown) {
  • loadMovie. Cм. Load Movie в разделе «Основные операции (Basic Actions)».
  • loadVariables. Загружает текстовый файл, содержащий описание переменных в определенном формате, на заданный уровень либо в указанный объект. Описание каждой переменной должно иметь вид <имя переменной-> = <значение>. Если в файле присутствуют описания нескольких переменных, между ними следует помещать разделитель — символ & (амперсанд). Кроме того, в файле не должно быть ни пробелов, ни символов возврата каретки. Пример:
    loadVariables("message.txt" , 0) ;
    Q nextFrame. Переход к следующему кадру. Эта команда доступна только в экспертном режиме. Пример:
    onClipEvent(mouseUp) {
    onClipEvent(mouseMove) {
    onClipEvent(keyDown) {
    onClipEvent(keyUp) (
    onClipEvent(data) {
  • play. Cм. Play в разделе «Основные операции (Basic Actions)».
  • prevFrame. Переход к предыдущему кадру. Эта команда доступна только в экспертном режиме. Пример:
    PrevFrame();
  • prevScene. Переход к предыдущей сцене. Эта команда доступна только и экспертном режиме. Пример:
    revScene();
  • print. Направляет копию заданного рагмента, находящегося на указанном ювне или в указанном объекте, на печать виде векторного графического изображения. В качестве обрабатываемого фраг-гнта может выступать фильм, кадр или тределенная область экрана. Пример:
    on (release) {
    print (0, "bmovie"):
  • printAsBitmap. Направляет копию данного фрагмента, находящегося на указанном уровне или в указанном объекте, на печать в виде растрового афического изображения. В качестве срабатываемого фрагмента может вы— упать фильм, кадр или определенная шасть экрана. Пример:

    i (release) {
    printAsBitmiap(3, "bframe");
    removeMovieClip. Удаляет из фильма азанный клип. Пример:
    (release) {
    removeMovieClip(_root.shorts./ angeShorts);
  • return. Эта необязательная операция ным образом возвращает из функции азанное значение либо константу .11, если отсутствует фактический па-метр. Пример:
    notion doTax(price, rate) ( return price + (price * rate);

    Применение операции return noзволяет генерировать выходное значение функции; это значение может быть сохранено в переменной. Переменная out в следующем примере получит значение результата описанных выше вычислений, произведенных над переданными ей фактическими параметрами, то есть значение 42.12.

    on (release) {
    out = doTax(39, .08) ; I
  • setProperty. Изменяет значение свойства указанного клипа. При использовании этой операции необходимо задавать путь к имени экземпляра клипа, а не к метке символа. Для фильмов в формате Flash 4 можно использовать следующий формат:
    onClipEvent (mouseDown) (
    setProperty("/mcCool", _rotation, 43); }

    В пакете Flash 5 подобные сценарии рекомендуется записывать иначе:
    onClipEvent (mouseDown) {
    _root.mcCool._rotation = 43: }
  • set variable. Позволяет задать или изменить значение переменной. В качестве присваиваемого значения можно использовать лишь значения и составные выражения, совместимые с типом переменной. Если инструкцию присваивания выбрать в списке Actions (Операции), то в тексте сценария появится строка следующего вида:
    set (name, value);
    Подставив конкретные фактические параметры, мы можем пол учить следующую строку:
    Set (k, (x/k)* 100) ;
    Однако для установки значений переменных и системе Flash 5 рекомендуется использовать иной формат присваивания:
    k = ( (x/k) * 100);
  • startDrag. Позволяет задать начальные условия перетаскивания клипа. Область перетаскивания может быть ограничена определенными значениями, задающими селевую, правую, верхнюю и нижнюю границы. Логический параметр при задании значения true обеспечивает привязку указателя мыши к центру объекта.
    onClipEvent (mouseDown) {
    _root.mcCool.startDrag (false, 100, 250, 200, 250); I
  • stop. Cм. Stop в разделе «Основные операции (Basic Actions)».
  • stopAllSounds. Cм. Stop All Sounds в разделе «Основные операции (Basic Actions)».
  • stopDrag. Позволяет определить условия завершения перетаскивания клипа. У этой операции нет никаких параметров. Пример:

    onClipEvent (mouseUp) {
    stopDrag (); }

  • tellTarget. См. Tell Target в разделе «Основные операции (Basic Actions)».
  • toggleHighQuality. См. Toggle High Quality в разделе «Основные операции (Basic Actions)».
  • trace. Отладочная инструкция, обеспечивающая отображение значения указанной переменной в окне Output (Вывод). Пример:

    do {
    va r k = k + 1 ; } while (k <= 10); trace (k);
  • unloadMovie. Cм. Unload Movie u разделе «Основные операции (Basic Actions)».
  • var. Определяет некоторую переменную каклокальную. Эта операция особенно часто используется в функциях, когда в сценарии обрабатывается несколько кнопок, кадров или клипов. Пример:
    function counter () (
    var k = 1; }
  • while. Инструкция цикла, которая позволяет определить условие выхода из цикла перед началом его выполнения; выполнение цикла продолжается, пока заданное условие является истинным. Если перед первой итерацией цикла условие не выполняется, тело цикла не будет выполнено ни разу. Таким образом, это цикл с предусловием. См. также do while. Пример:
    on (release) {
    while (k < 9) { k = k + 1;
    }
    box = k; )
  • with. Данная инструкция позволяет адресовать определенный объект; этот объект используется по умолчанию для всех инструкций, заключенных в фигурные скобки ({ }), следующие за ключевым словом with. Эта операция рекомендуется в качестве альтернативы устаревшей операции tellTarget. В фигурных скобках может находиться несколько инструкций. Пример:
    on (release) (
    with(_root.show) { _rotation = 35; _alpha = "76;
 

3. Операторы

 

Операторы

  • ! (восклицательный знак) — служит для обозначения логической операции отрицания. Превращая логическое значение (true или false) в его противоположность, оператор отрицания позволяет проверить отсутствие определенного условия. Пример:
    if (!Key.isDown(Key.ESCAPE))
    { Display = "Нажмите клавишу <Escape>."; }
  • ! = (проверка условия неравенства). Пример:
    m = 10;
    j = 12;
    if (m != j) {
    box = " Они не равны."; }
  • % (результат деления по модулю). Целочисленное деление с остатком называется делением по модулю. В следующем примере остаток от деления, припаиваемый переменной box, равен 6 (50/11 = 4 с остатком 6):
    k = 50;
    j = 11;
    bох = k % j ;

  • && (логическая конъюнкция (И)). Применяется в условных выражениях. Выражение true&&true дает в результате true; true&&false дает false; false&&.f alse дает false. Этот oneратор широко применяется при провер-<е множественных условий. Пример:
    < = 50; j = 11; С - (k > j) ;
    / = (j > 5); Lf (x && у) {
    box = "Все правильно!";

    В инструкциях с проверкой множественных условий оператор конъюнкции применяется следующим образом:
    if ((total == all) && (total >= lastO) {
    output = "Баланс подведен; в третьем квартале он положительный."; }
  • ( и ) (круглые скобки). Применяются для группировки операций с целью изменить порядок их выполнения. Пример:
    (5 + w) * (34 - v);
  • * (умножение). Применяется в операции умножения чисел или числовых переменных. Пример:
    k = 12 * х;
  • + (сложение). Применяется в операции сложения чисел или числовых переменных, а также для конкатенации строк. Пример:

    k = х + 7;
    xyz = "Быстродействие" + "Память"

  • ++ (операция инкремента для переменных). Чаще всего используется в цикле for. Конструкция + + <имя переменной выполняется перед исполнением тела цикла, а конструкция <имя переменной>++ - после тела цикла. Пример:
    for
    (k = 1; k box = k;
    <= 521; k++) {
  • - (минус). Применяется в операции вычитания чисел или числовых переменных. Уменьшаемое находится слева, а вычитаемое — справа. Пример:
    k = k - 2;
  • — (операция декремента для переменных). Чаше всего используется в цикле for. Конструкция —<имя переменной> выполняется перед исполнением тела цикла, а конструкция <имя переменной> — — после тела цикла. Пример:
    for (k = 1000; k >= 521: k -) ( box = k;
    )
  • / (деление чисел или числовых переменных). Делимое находится слева, а делитель — справа. Пример:

    k = 250 / 50;
  • < (оператор сравнения «меньше чем»); значение выражения будет равно true, если значение слева от оператора меньше, чем значение справа. Пример:
    var k = 20;
    var j = 15;
    if (j < k) {
    box = "Вы моложе."; }
  • <= (оператор сравнения «не больше чем»); значение выражения будет равно true, если значение слева от оператора меньше или равно значению справа. Пример:
    var k = 1;
    do (
    k = + + k;
    box = k; } while (k <= 50);
  • <> (оператор сравнения «не равно»); значение выражения будет равно true, если значение слева от оператора не равно значению справа. Этот оператор считается устаревшим, он вполне допустим в сценариях, но лучше использовать оператор ! =. Пример:
    var k = -15; var x = 52; if (k о х) {
    box = "Нет ничего общего.
  • == (оператор сравнения «проверка равенства»); значение выражения будет равно true, если значение слева от оператора равно значению справа.
    Одиночный знак равенства (=) используется для присваивания; в условных выражениях требуется двойной знак (==). Пример:
    var k = 29; var x = 29; if (k == x) {
    box = "Они точно равны."; }
  • > (оператор сравнения «больше чем»); значение выражения будет равно true, если значение слева от оператора больше, чем значение справа. Пример:
    var kid = 15; var parent = 40; if (kid > parent) (
    box = "Такого не может быть!";
    }
  • >= (оператор сравнения «не меньше чем»); значение выражения будет равно true, если значение слева от оператора больше или равно значению справа. Пример:

    var k = 17; var x = 17; if (x >= k) {
    box = "Больше или лучше?"; }
  • and (логическая конъюнкция (И)). Этот оператор позволяет получить значение true, когда истинны оба условия. Логическая конъюнкция часто используется при обработке двух условий в рамках одной условной инструкции. См. также && . Пример:

    var k = 15; var x = 40;
    if ((x > k) and (x = 40)) { box = "Годятся оба.";
    )
  • not (логическое отрицание (HE)). Этот оператор позволяет получить значение true, если условие неверно. Авторы полагают, что это похоже на отрицание отрицания. Пример:
    var k = 15; var x = 40; if (not (k > x) ) {
    box = "Нет на нет будет да."; }
  • or (логическая дизъюнкция (ИЛИ)). Этот оператор позволяет получить значение true, когда выполняется хотя бы одно из двух условий. Обратите внимание на то, что в следующем примере истинным является только одно из условий. Пример: var k = 15;
    var x = 40;
    if ( (k = 15) or (x = 99) ) {
    box = "Хотя бы что-то одно...";
  • typeof (определение типа переменной). Различаются строковый, числовой и логический типы. Пример:

    var k = (3 > 6) ;
    if (typeof k == "boolean") {
    box = "Это логическая переменная . " ;
  • void. Данный оператор делает значение выражения неопределенным и используется для проверки на существование неопределенных объектов. Может применяться для сброса значений переменных. Пример:

    counter += counter; void (counter);
    Ниже приведен пример использования этого оператора для проверки суще-ствова-ния неопределенного значения.
    if (j == void (j) ) {
    display = "Значение переменной не определено. ";. )

  • I I (логическая дизъюнкция (ИЛИ)). Используется в условных инструкциях. Если хотя бы одно из условных выражений в операции дизъюнкции является истинным, данный оператор возвращает значение true. Пример:

    k = 37; ] = 27; if ((k > j) || (j < 26)) {
    box = "Достаточно и одного.";
 

4. Поразрядные операторы

 

Поразрядные операторы

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

  • & (поразрядная конъюнкция)
  • «, », >» (операторы поразрядного сдвига)
  • " (поразрядная исключительная дизъюнкция)
  • I (поразрядная дизъюнкция)
  • ~(поразрядное дополнение)
 

5. Составные операторы

 

Составные операторы

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

X += 1;
X *= Y;

Приведенные выше инструкции эквивалентны следующим операциям:

X = X 4- 1;
X = X * Y;

Привыкнув к формату записи составных операторов, вы наверняка оцените их по достоинству.

  • %= (составное деление по модулю)
  • &= (составная поразрядная конъюнкция)
  • *= (составное умножение)
  • -= (составное вычитание)
  • /= (составное деление)
  • <<= (составной поразрядный сдвиг влево)
  • >>= (составной поразрядный сдвиг вправо)
  • >>>= (составной поразрядный сдвиг вправо без знака)
  • ^ = (составная исключительная дизъюнкция)
  • I = (составная поразрядная дизъюнкция)
 

6. Строковые операторы

 

Строковые операторы

К числу строковых операторов относятся строковые эквиваленты операторов сравнения, применяемых для чисел. Для большинства строковых операторов в настоящее время есть универсальные эквиваленты — операторы, которые применяются для обработки как строковых, так и нестроковых выражений. Сравнение строк производится на основе алфавитного порядка. Наименьший пес при сравнении имеет буква А, наибольший — буква Z. Следовательно, строка «Z» больше строки «А». Символы нижнего регистра считаются большими, нежели символы верхнего регистра. Поэтому «а» больше «Z».

Перечисленные ниже строковые операторы следует применять, если вы работаете нал фильмом, который должен быть совместим с форматом Flash 4.

  • add (конкатенация (склейка) строк). В приведенном ниже примере переменная box получит значение "Привет ! ». Наряду с оператором add можно использовать оператор +.
    Данный оператор пришел на смену оператору &, который выполнял аналогичные функции в системе Flash 4. Пример:
    k = "При";
    j = "вет!";
    var welcome = k add j;
    box = welcome;
  • eq (проверка условия равенства двух строк). Наряду с оператором eq можно использовать оператор ==. Пример:
    var Apples = "яблоки"; var Oranges = "апельсины"; if (Apples eq Oranges) {
    box = "Одно и то же!"; } 5lse {
    box = "Разные вещи!"; }
  • ge (оператор «не меньше» для строк). Учтите, что сравниваются зна-1ения строковых переменных, а не их шена. Наряду с оператором ge можно 1спользовать оператор >=. Пример:
    vаr Z = "Антилопы"; 'ar A = "Зебры";
    f (A ge Z) {
    box = "Важны лишь значения перееменных! ";
  • gt (оператор «больше» для строк). Наряду с оператором gt можно использовать оператор >. Пример:

    var 1с = "а"; var uc = "W"; if (lc gt uc) {
    box = "Нижний регистр больше верхнего"; }
  • lе (оператор «не больше» для строк). Наряду с оператором можно использовать оператор <=. Пример:
    var Same = "Двойня"; var Osame = "Двойня"; if (Same le Osame) (
    box = "Двойня это хорошо!";
    )
  • It (оператор «меньше» для строк). Наряду с оператором It можно использовать оператор <. Пример:
  • var Fatso = "Толстяк"; var TooSlim = "Тощий"; if (TooSlim It Fatso) {
    box = "Съешьте что-нибудь!";
    }

  • ne (оператор «не равно» для строк).

Наряду с оператором пе можно использовать оператор ! =. Пример:

var A = "яблоки";
var Oranges = "апельсины";
if (A ne Oranges) {
box = "И все-таки они разные!";

 

7. Функции

 

Функции

  • Boolean. Приводит значение выражения к типу Boolean (логическому). > приведенном ниже примере переменная box получит значение true:
    var var var
    "Иван"; "Василий"; Boolean (a !!
    k)
    box = j
  • escape. Возвращает значение ASCII-кода для задан ногосимнола, вхо-дяшего в набор ISO Latin-1. Например, следующая инструкция возвратит код «%21», который и будет присвоен переменной а:
    var a = escape (" ! ") ;
  • eval. Возвращает значение переменной или свойства, либо ссылку на объект. При создании псевдомассивов (например, clipl, с 1 ip2, с 1 ip3 и т. д.) имя переменной и число (как правило, числовая переменная) конкатенируются и составляют новое имя переменной. Впрочем, в фильмах в формате Flash 5 рекомендуется отказаться от псевдомассивов, применяя вместо них средства объекта Array. В первом из приведенных ниже примеров будет возвращено значение свойства _alpha, во втором - адрес:
    out = eval
    ("_root.My_clip._alpha"); display = eval ("_root.My_clip");
  • false. Литерал, соответствующий логическому значению «ложь». Обратите внимание на то обстоятельство, что идентификатор false не заключается в кавычки. Пример:

    var n = false;
  • getProperty. Возвращает значение указанного свойства заданного объекта. Пример:

    var k = getProperty ("/My_clip", _x) ;

В Flash 5 предпочтительно использовать иную конструкцию, эквивалентную данной функции:

  • var k = root.My clip, x;
  • getTimer. Возвращает количество миллисекунд, прошедших с момента начала воспроизведения текущего фильма. Пример:

    timer = getTimer ();
  • int. Возвращает значение, полученное отбрасыванием дробной части числового параметра. В следующем примере эта функция возвращает значение 34. В настоящее время вытесняется функцией parselnt. Пример:

    var k = 34 .875; var x = int (k) ;
  • isFinite. Проверяет факт конечности заданного числа. Возвращает логическое значение (true или false). В следующем примере переменная box получает значение true, поскольку 56 — число конечное:

    var k = 56;
    var j = isFinite (k) ; box = j;
  • isNan. Проверяет, действительно ли переданное в качестве параметра значение не является числом. Если это нечисловое значение, возвращается значение true. В следующем примере возвращается true, так как "Флэш" — это строка, а не число:
    var k = "Флэш"; var j = isNan (k) ; box = j;
  • maxscroll. Данная функция фактически представляет собой предназначенное только для чтения свойство, связанное с текстовым полем через имя переменной. Возвращает некоторое максимальное значение, для вычислении которого используется информация о допустимом размере упомянутого текстового поля. Допустим, переменная, связанная с текстовым полем, имеет имя display, а значение функции maxscroll помещается в переменную topScroll:
    topScroll root.display.maxscroll ;
  • newline. Применяется для вставки символа перевода строки (или возврата каретки). Пример:
    var k = "Верх";
    var b = "Низ";
    var с = (k + newline + b) ;
    box = c;
  • number. Преобразует значение выражения в число с плавающей точкой, либо в логическое число. Возвращает значение 0, если в качестве параметра было передано нечисловое значение. Данная функция рекомендуется только для использования в совершенно определенных целях. Она была задумана как одно из средств, обеспечивающих преобразование файлов Flash 4 в формат Flash 5. В большинстве случаев вместо нее лучше использовать функции parselnt или parseFloat. Пример:
    k = "145.76"; j = number (k) ; box = j * 2;
  • parseFloat. Преобразует строку в число с плавающей точкой. Если строка не является допустимым представлением числа, возвращается значение NaN (в приведенном примере именно такая ситуация). Знак доллара ($) не позволяет рассматривать строку п как число. В результате при попытке осуществить преобразование значения п в число будет возвращено значение NaN. Чтобы обрабатывать ошибки преобразования строк в числа, можно использовать функцию isNan. Пример:
    n = "$935.63";
    j = parseFloat (n) ;
    box = j * 3;

  • parselnt. Преобразует строку в целое число; цифры после десятичной точки при этом просто отбрасываются. В следующем примере данная функция возвратит значение 874:

    n = "874.87";
    j = parselnt (n);
    box = j;
  • random. Генерирует случайное число в диапазоне от 0 до -1, где n — некоторое положительное целое число, передаваемое данной функции в качестве параметра. В следующем примере будет возвращено случайное число, находящееся в диапазоне от 0 до 8:
    var x = random (9); box = x; .
  • scroll. При прокрутке устанавливает значение номера первой строки, отображаемой на экране в текстовом поле, с которым связана заданная переменная. Обновлять отображение прокручиваемого текстового поля на экране можно, изменяя значение данной функции (увеличивая его при прокрутке текста вверх и уменьшая при прокрутке вниз). Например, при каждом обращении к следующему сценарию текст будет прокручиваться на четыре строки вверх:
    on (release) {
    _root.MyJText.scroll = x + 4; }
  • string. Преобразует число в строку. Такое преобразование необходимо, например, для добавления символа национальной валюты к числу, выражающему денежную сумму. Пример:
    bar money = 782.21;
    var cmoney = string (money);
    var showmoney = cmoney •»• " руб."; box = showmoney;
  • target Path. Возвращает путь к заданному клипу в виде строки. При этом допускается косвенная адресация. Пример:
    targetPath (_root.fender[j+2]) {
  • true. Литерал, соответствующий логическому значению «истина». Пример:

    var flag = true;

  • unescape. Обратная функция для функции escape. Данная функция применяется для преобразования ASCII-кода в символ, входящий в набор ISO Latin-1. В следующем примере будет возвращен символ ! (восклицательный знак), поскольку его ASCII-код равен %21:

    var a = unescape("%21");
  • updateAf terEvent. Обеспечивает обновление содержимого экрана при выпол-нении операций с клипами независимо от текущей частоты кадров. Помогает более плавно представлять зрителю операции перетаскивания. Примеры:

    onClipEvent (mouseDown) {
    startDrag (mcCool, true, 100, 250, 200, 250);
    updateAfterEvent (mouseDown) } onCHpEvent (mouseUp) {
    stopDrag ();
    updateAfterEvent (mouseUp)
 

8. Строковые функции

 

Строковые функции

Для всех строковых функций существуют эквивалентные методы объекта string. Строковые функции использовать в фильмах формата Flash 5 не рекомендуется.

  • chr. Возвращает символ, ASCII-код которого передан функции в качестве параметра. У строчных и прописных букв разные коды. В следующем примере использован код буквы А:
    v = chr (65);
  • length. Возвращает длину строки. В следующем примере функция возвращает число 11:

    k = length ("Иванов Иван");
  • ord. Возвращает ASCII-код символа. В следующем примере переменная v получит значение 97:
    v = ord ("а") ;
  • substring. Возвращает подстроку, заданную комбинацией параметров <имя строковой переменной>, <начальная позиция> и <длина>. Под начальной позицией понимается номер символа, за которым начинается нужная подстрока. Длина — это количество символов, которые должны быть включены в подстроку. В следующем примере из строки «Электропаяльник» извлекается подстрока «паяльник»:
    k = substring ("Электропаяльник",7,8);
  • mbchr. Мультибайтная версия функции chr.
  • mblength. Мультибайтная версия функции length.
  • mbord. Мультибайтная версия функции ord.
  • mbsubstring. Мультибайтная версия функции substring.

9. Свойства

   

Свойства

  • _alpha. Степень прозрачности объекта (хотя лучше бы называть степенью непрозрачности). Шкала прозрачности находится в диапазоне от 0 (для полностью прозрачных объектов) до 100 (для совершенно непрозрачных объектов). Таким образом, прозрачность выражается в процентах. Пример:

    SetProperty (My_clip._alpha. 50);

  • _currentf rame. Свойство только для чтения, которое содержит информацию о текущем кадре фильма (клипа). Пример:
    k = _root.My_clip._currentframe;
  • _droptarget. Свойства только для чтения; содержит имя клипа, на который перетаскивается другой клип. Пример:

    k = _root.My_clip._droptarget;
  • _focusrect. Используется для отображения на экране желтого прямоугольника, появляющегося вокруг кнопок по нажатию клавиши табуляции при переклю-чении между ними. Это глобальное свойство, принимающее значения true и false. Пример:
    _root.My_clip._focusrect = true;
  • _framesloaded. Свойство только для чтения, которое содержит текущее число кадров, загруженных в клипе. Пример:
    k = _root.My_clip._framesloaded;
  • _height. Возвращает высоту клипа в пикселах (первый пример). Значение высоты может быть изменено (второй пример). Примеры:
    а = _root.My_clip._height;
    box = а;
    onClipEvent (keyDown) (
    _root.My_clip._height = 120;
    I
  • _highqualitV - Позволяет включать и отключать режим высокого качества экранных изображений. Принимает логические значения. Пример:

    _highquality = false;
  • _name. Позволяет задавать имя и переименовывать клип в тексте сценария. Операции, выполняемые над этим свойством, применяются к имени выделенного экземпляра. В следующем примере клип My_clip получает имя sam. Затем новое имя используется при выполнении операции поворота этого клипа на 55 градусов:
    _root.My_clip._name = "sam"; _root.sam._rotation = 55;
  • _quality. Глобальное свойство, которое определяет качество экранных изображений. Принимает строковые значения LOW (низкое), MEDIUM (среднее), HIGH (высокое) и BEST (самое высокое); использование прописных
    букв обязательно. Возможно, данное свойство со временем полностью вытеснит свойство_highqualit у. Примеры:
    _quality = BEST; whatQuality = _quality;
  • _rotation. Определяет угол поворота в градусах (от 0 до 360). Для поворота против часовой стрелки можно использовать отрицательные значения. Для задания угла поворота необходимо указать путь к клипу. Пример:
    _root.My_clip._rotation = 210;
  • _soundbuf time. Глобальное свойство, задающее время предварительной загрузки, предшествующей началу воспроизведения звука. По умолчанию это время равно пяти секундам. Пример:
    _soundbuftime = 12;
  • _target. Имя экземпляра клипа. При необходимости имя экземпляра можно изменить. В следующем примере клип с именем экземпляра My_clip получает имя new_clip:

    _root.My_clip._target "new_clip";
  • _totalf rames. Возвращает общее число кадров в клипе. Пример:
    on (release) {
    tf = My_clip._totalframes; box = tf;

  • _width. Возвращает ширину клип; в пикселах. Значение этого свойства мо жет изменяться. Пример:
    on (release) {
    _root.My_clip._width = 50; }

  • _x. Возвращает горизонтальную по зицию заданного клипа. Пример:
    on (release) (
    _root.My_clip._x = 250; )
  • _xmouse. Текущая позиция указате ля мыши на горизонтальной оси коор динат (оси X), задаваемая относитель но центра указанного клипа. При пере мешении клипа меняется и относитель ное значение свойства _xmouse. Пример:

    var mposX = _root.My_clip._xmouse,

  • _xscale. Относительная ширина за данного клипа по горизонтальной oci координат (оси X). В следующем приме ре производится увеличение масштаб; клипа по горизонтали до 200%. Пример:
    _root.My_clip._xscale = 200;
  • _y. Возвращает вертикальную пози цию заданного клипа. Пример:
    on (release) {
    _root.My_clip._y = 118;

  • _url. Свойство только для чтения, содержит URL-адрес клипа. Пример:

    location = _root.My_clip._url;
  • _visible. Возвращает логическое значение, указывающее, является ли видимым заданный клип. Пример:
    on (release) (
    _root.My_clip._visible = false;

  • _ymouse. Текущая позиция указате ля мыши по вертикальной оси (оси Y) задаваемая относительно центра ука занного клипа. При перемещении кли па меняется и относительное знамени свойства _ymouse. Пример:

    on (release) (
    yHere = _root.My_clip._ymouse
    Q _yscale. Относительная высота за- on (release) { данного клипа по вертикальной оси. В _root.My_ciip._yscaie = 50;

  • _yscale. Относительная высота заданного клипа по вертикальной оси.
    следующем примере производится установка вертикального масштаба, равного 50%. Пример:
    on (release) {
    _root.My_ciip._yscaie = 50;
    }