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

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

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

Книга посвящена компьютерной графике. Однако не всей. Мы рассматриваем методы и средства создания и обработки изображений, предназначенные преимущественно для вывода на монитор компьютера и публикации в Интернете. Специальные вопросы предпечатной подготовки (например, цветоделение) и создание трехмерной графики здесь не рассматриваются. Это, конечно, не означает, что вы не сможете распечатать свою картину на принтере. Просто все предпечатные изыски мы оставляем без особого внимания. Подготовка буклетов, рекламных плакатов, обложек и шикарных иллюстраций книг на высоком уровне требует особых знаний, навыков и опыта, которыми обладают специалисты верстки.
Из всех программных средств работы с графикой мы выбрали 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, если это вам понадобится.
Кроме того, мы хотели написать книгу небольшого объема, доступную многим, посвященную одновременно и растровой, и векторной графике («два в одном»), содержащую и элементы теории, и практические рекомендации.

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

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

Первые три главы являются базовыми. Здесь вы узнаете, что такое цвет, как с ним работать, как корректировать изображения и сохранять их в файлах. Хотя материал в этих главах ориентирован преимущественно на 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-сайт.

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

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

Конечно же, нужен компьютер. Чтобы начать заниматься графикой, достаточно иметь компьютер, весьма скромный по своим техническим характеристикам. Все рассмотренное в настоящей книге относится к 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.

Что такое 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-дизайнеры стремятся к этому, чтобы посетитель сайта, на какой бы странице он ни находился, постоянно чувствовал, в какой епархии находится — все в том же сайте, или уже за его пределами. Не забывайте, что многие путешественники и сети испытывают чувства заблудившегося в лесу или покинутого в пустыне. Стиль сайта создается не только средствами графического дизайна. Однако именно с помощью графики легче всего добиться ощущения стилевого единства множества страниц. Может быть поэтому графическому дизайну сайта уделяется столь высокое внимание.

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

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

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

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

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

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

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

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

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

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

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

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