Photoshop for WEB



         

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

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

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

Пример с картинкой 1
Пример с картинкой 2
Пример с картинкой 3
Пример с картинкой 4
Автоматические текстовые блоки
Пример с картинкой 1
Пример с картинкой 2
Пример с картинкой 3
Текстовый редактор
Пример с картинкой 1

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

Переопределение стиля
Применение стиля
Пример с картинкой 1
Пример с картинкой 2
Пример с картинкой 3
Исключения
Импорт и экспорт стилей
Пример с картинкой 1
Стилевые маски
Траекторный текст

Photoshop for WEB

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

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

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

Формат PSD
Формат PSD - 2
Формат PSD - 3
Формат TIFF
Формат TIFF - 2
Формат TIFF - 3
Формат TIFF - 4
Формат BMP
Формат BMP - 2
Формат TGA

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

Формат GIF
Формат GIF - 2
Формат GIF - 3
Формат GIF - 4
Формат GIF - 5
Формат GIF - 6
Формат GIF - 7
Формат GIF - 8
Формат JPEG
Формат JPEG - 2

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

Цветовые режимы и модели
Цветовые режимы и модели - 2
Цветовые режимы и модели - 3
Цветовые режимы и модели - 4

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

Сканирование и коррекция изображений
Сканирование и коррекция изображений - 2
Сканирование и коррекция изображений - 3
Сканирование и коррекция изображений - 4
Сканирование и коррекция изображений - 5
Сканирование и коррекция изображений - 6
Сканирование и коррекция изображений - 7
Сканирование и коррекция изображений - 8
Сканирование и коррекция изображений - 9
Сканирование и коррекция изображений - 10

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

Выделение фрагментов изображения
Выделение фрагментов изображения - 2
Выделение фрагментов изображения - 3
Выделение фрагментов изображения - 4
Выделение фрагментов изображения - 5
Выделение фрагментов изображения - 6
Выделение фрагментов изображения - 7
Выделение фрагментов изображения - 8
Выделение фрагментов изображения - 9
Выделение фрагментов изображения - 10

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

Подготовка графических элементов web
Подготовка графических элементов web - 2
Подготовка графических элементов web - 3
Подготовка графических элементов web - 4
Подготовка графических элементов web - 5
Подготовка графических элементов web - 6
Подготовка графических элементов web - 7
Подготовка графических элементов web - 8
Подготовка графических элементов web - 9
Подготовка графических элементов web - 10

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

Подготовка макета web в PhotoShop
Подготовка макета web в PhotoShop - 2
Подготовка макета web в PhotoShop - 3
Подготовка макета web в PhotoShop - 4
Подготовка макета web в PhotoShop - 5
Подготовка макета web в PhotoShop - 6

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

Сохранение в формате GIF
Сохранение в формате GIF - 2
Сохранение в формате GIF - 3
Сохранение в формате GIF - 4
Сохранение в формате JPEG
Сохранение - Save For Web-
Сохранение - Save For Web - 2
Сохранение - Save For Web - 3
Сохранение - Save For Web - 4
Экспорт файлов GIF для Web

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

Отличия команд PhotoShop и ImageReady
Отличия команд PhotoShop и ImageReady - 2
Отличия команд PhotoShop и ImageReady - 3
Отличия команд PhotoShop и ImageReady - 4
Отличия команд PhotoShop и ImageReady - 5
Отличия команд PhotoShop и ImageReady - 6
Отличия команд PhotoShop и ImageReady - 7
Отличия команд PhotoShop и ImageReady - 8
Отличия команд PhotoShop и ImageReady - 9
Отличия команд PhotoShop и ImageReady - 10

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

Работа с кадрами
Работа с кадрами - 2
Работа с кадрами - 3
Использование слоев для редактирования кадров
Метод удаления фона
Оптимизация анимированных изображений
Сохранение анимированных изображений
Что нового мы узнали?

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

Создание карт-изображений
Создание карт-изображений - 2
Конвертирование карт-изображений
Просмотр карт-изображений
Выбор типа карты-изображения
Что нового мы узнали?

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

Состояния анимированных кнопок
Состояния анимированных кнопок - 2
Работа со слоями
Что нового мы узнали?

Экспорт изображений
К экспорту изображений в 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-страницы.

Дополнительные возможности ImageReady
Просмотр изображений в браузере
Переход в другие приложения
Создание текстур
Создание текстур - 2
Что нового мы узнали?

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

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

Структура HTML-документа и текста
Структура HTML-документа и текста - 2
Структура HTML-документа и текста - 3
Структура HTML-документа и текста - 4

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

Использование маркированных списков
Использование маркированных списков - 2
Использование маркированных списков - 3
Использование маркированных списков - 4
Использование таблиц
Использование таблиц - 2
Использование таблиц - 3
Использование таблиц - 4
Использование таблиц - 5
Использование таблиц - 6

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

Использование изображений
Использование изображений - 2
Использование изображений - 3
Использование изображений - 4

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

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

Использование фреймов
Применение фреймов
Применение фреймов - 2
Что нового мы узнали?

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

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

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

Продолжение


Чудинова Елена - Ларец
Основы программирования на C#
Описание функций Си
BASH Programming - введение
Turbo Assembler 3.0. Руководство пользователя
История киноискусства
Cinema 4D
Операционная система Windows -Пособие для начинающих
Путь художника
СПРАВОЧНАЯ КНИГА КИНОЛЮБИТЕЛЯ
Cinema 4D
Шифрование и секретность в Linux
Язык программирования Форт
Язык программирования C++
С для профессиональных программистов
Справочная система C guide
Локальные сети персональных компьютеров. Работа с сервером Novell NetWare
Принципы организации IP-телефонии на базе решений Cisco Systems
Компьютерные сети
Руководство по сервису печати для NetWare