Photoshop for WEB

       


Работа с текстом в FreeHand

FreeHand имеет превосходные средства обработки текста. Этот арсенал средств форматирования и верстки текста не только превосходит возможности многих векторных редакторов, например, Adobe Illustrator и Corel Draw, но и позволяет программе успешно конкурировать с некоторыми специализированными текстовыми редакторами и настольными издательскими системами.

Ввод и редактирование
FreeHand имеет превосходные средства обработки текста. Этот арсенал средств форматирования и верстки текста не только превосходит возможности многих векторных редакторов, например, Adobe Illustrator и Corel Draw, но и позволяет программе успешно конкурировать с некоторыми специализированными текстовыми редакторами и настольными издательскими системами.

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

Photoshop for WEB

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



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

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

Форматы web-графики
В этом разделе книги мы подробно рассмотрим три формата изображений, используемых в настоящее время для сохранения графического оформления web-страниц и для его доставки на компьютер пользователя. Это форматы GIF, JPEG и PNG.

Цветовые режимы и модели
После знакомства с форматами файлов, применяемых в web-дизайне, можно перейти к рассмотрению тонкостей подготовки графического оформления web-страниц. Работая с Adobe PhotoShop, вы, наверное, не раз обращали внимание на то, что и заголовке окна документа, кроме его имени, отображаются различные дополнительные символы.

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

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

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

Подготовка макета web-страницы в Adobe PhotoShop
Для подготовки web-страницы надо решить две задачи — разработать внешний вид (оформление) и написать HTML-код, реализующий его. В обязанности web-дизайнера часто входит только первая задача — разработка и реализация идеи оформления страницы, отвечающей требованиям заказчика. Подготовка описания страницы на языке HTML во многих фирмах, занимающихся разработкой сайтов, возлагается на плечи специалистов в области web-программирования

Сохранение файлов в форматах GIF и JPEG
Использование форматов GIF и JPEG обусловлено тем, что web-специфика заставляет считаться с таким основополагающим критерием, как размер файла. Все изображения, которые встречаются на web-страницах, упрощенно можно разделить на две группы: фотографии и логотипы. Фотография — многоцветное изображение с непрерывным фоном, логотип — высококонтрастное изображение с текстом, содержащее ограниченное количество цветов.

Подготовка и оптимизация изображений
Программа Adobe ImageReady дополняет Adobe PhotoShop, начиная с версии 5. Она включает в себя не только большинство инструментов редактирования изображений, имеющихся в PhotoShop, но также средства подготовки и оптимизации web-графики. Кроме того, ImageReady позволяет создавать динамические изображения: анимированные графические ссылки и кнопки. В этом уроке мы рассмотрим вопросы подготовки изображений непосредственно в Adobe ImageReady и их оптимизации.

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

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

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

Экспорт изображений
К экспорту изображений в ImageReady можно отнести несколько групп команд. В первую очередь, это, конечно, команда File Export Original... (Файл Экспорт Оригинала...), затем File Save (Файл Сохранить), File t Save As... (Файл Сохранить как...), File Save Optimized (Файл Сохранить оптимизированное) и File Save Optimized As... (Файл Сохранить оптимизированное как), несомненно, Edit Copy HTML Code (Правка Копировать код HTML) и, наконец, команды Edit Cut (Правка Вырезать) и Edit Сору (Правка Копировать)

Дополнительные возможности ImageReady
К дополнительным возможностям можно отнести просмотр изображений в браузере, переход в другие графические и HTML-редакторы и создание текстур. В этом уроке подробно рассматриваются следующие вопросы: как выбрать браузер для просмотра и что получится в результате выполнения соответствующей команды, как перейти в другое приложение, как и из чего создать подходящую текстуру для фона web-страницы.

Краткий обзор возможностей HTML
Вы уже ознакомились с возможностями и функциями Adobe PhotoShop, которые позволят вам разработать и подготовить к дальнейшему использованию графическое оформление web-сайта. Но сама по себе графика еще не является web-страницей. Для того чтобы страница могла быть представлена пользователям Интернета, она должна быть описана на специальном языке, позволяющем задать нужную структуру документа. Этот язык называется HTML — Hypertext Markup Language — язык разметки гипертекста. При помощи этого языка задается текст, помещаемый на сайте, ссылки на другие документы, расположение Изображений и многое другое.

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

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

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

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

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

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

Алгоритмы сжатия изображений

Изображения (как и видео) занимают намного больше места в памяти, чем текст. Так, скромная, не очень качественная иллюстрация на обложке книги размером 500x800 точек, занимает 1.2 Мб — столько же, сколько художественная книга из 400 страниц (60 знаков в строке, 42 строки на странице). В качестве примера можно рассмотреть также, сколько тысяч страниц текста мы сможем поместить на CD-ROM, и как мало там поместится качественных несжатых фотографий. Эта особенность изображений определяет актуальность алгоритмов архивации графики.

Продолжение