Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Декабрь, 2015

Если даже при создании иллюс­трации использовались цвета па­литры браузера , по-прежнему остается задача со­хранения этих цветов неизмен­ными в процессе преобразования формата и сохранения файла.

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

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

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

Иллюстрации на основе фотографий

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

ПРИМЕЧАНИЕ

Не используйте палитры для JPEG-изображений.’

При сохранении фотографии в формате JPEG нет надобности выбирать палитру для оптимизированного изображения. Формат JPEG не использует палитры и справоч­ные таблицы цветов. Он способен отображать любой из 16,7 миллионов цветов. Если фотография сохраняется в формате GIF (ради функций прозрачности либо GIF-ани­мации), следует использовать адаптированную (adaptive) палитру. Она создается на основе цветов изображения, а не фиксированных цветов из не связанной с кар­тинкой цветовой схемы. Вместо этого можно попытаться применить перцептуальную (perceptual) либо селективную (selective) палитру при оптимизации фотографичес­ких GIF-изображений в программе Photoshop 6.0 или ImageReady 3.0. Эти новые палитры также основаны на цветах исходного изображения.

HTML4

Проблемы, возникающие при публикации в Web, впервые заставили компью­терных дизайнеров задуматься о размерах файлов. Трудности заключаются в том, что многие не знают, как получать графические файлы небольшого размера. По­этому изображения в Web, в основном, просто громадные. Большие файлы замед­ляют загрузку страниц. Считается (хотя это не на 100% верно), что среднестати­стический пользователь на обработку каждого килобайта данных затрачивает около одной секунды. (Следовательно, на 30 Кб уйдет приблизительно полминуты.) Этот факт, скорее, характеризует низкоскоростные подключения (скорость передачи данных 28800 бит/с и меньше), а не высокоскоростные каналы (ISDN и т.д.). Однако несмотря на широкую рекламу высоко скоростных каналов, большая часть аудитории Web по-прежнему относится к категории пользователей низкоскорос­тными соединениями.

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

Размеры Web-изображений измеряются в килобайтах. Напомним, что килобайт включает 1024 байта, мега­байт ~ 1048576 байтов (1024 Кб), а гигабайт — 1073741824 байтов (1024 Мб). Очевидно, что графика, размер которой измеряется мегабайтами и гигабайта­ми, неприемлема для публикации в Web. Поэтому (пожелания клиентов) размеры файлов должны укладываться в определенные границы. Кроме того, желательно, чтобы объем каждой страницы не превосходил 30 Кб (еще одна хорошая практи­ческая рекомендация). Не существует правил относительно размеров отдельных изображений, однако следует придерживаться определенных ограничений.

В системе Macintosh единственный способ узнать действительный размер фай­ла — воспользоваться командой Get Info (см. рис. 3.4). Сначала выделите файл в окне поиска (Finder), а затем выберите команду Get Info (Получить сведения) из меню File (Файл).

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

Со значком или без него

В системе Macintosh программа Photoshop обычно сохраняет изображения вместе со значками (icon). Значок — это небольшое визуальное представление целого изоб­ражения, на которое ссылается файл. Они занимают малое дополнительное про­странство жесткого диска. В конечном счете, это не имеет значения, поскольку при отправке файлов на сервер последние передаются в исходном виде, в результате чего значки утрачиваются. Если требуется более точно определять размеры фай­лов, следует настроить параметры Photoshop таким образом, чтобы значки не со­хранялись в автоматическом режиме.

Произношение аббревиатуры GIF

Правила произношения аббревиатуры GIF от самого автора этого формата. Отправлено: среда, 6 августа 1997 2:37 AM Получатель: Стив Уилхайт (Steve Wilhite) Тема: произношение термина «GIF»

Надеюсь, вы не против моего обращения. Я получила ваш адрес электронной по­чты от Джека Паулюса (Jack Paulus), который слышал мое высказывание о противо­речии в произношении термина «GIF в SIGGRAPH. Я автор ряда книг по Webгра­фике и очень заинтересована в том, чтобы вы разрешили это противоречие для меня и моих читателей. Следует ли первую букву произносить мягко, как в слове «jiffy» [джифи], или твердо, как в слове «gift» (гифт)? Любознательным это интересно! Бла­годарю за внимание

В HTML числовые значения RGB-состав­ляющих представлены в шестнадцатирич­ной системе счисления. Подобно тому, как в десятичной системе используется 10 цифр (от 0 до 9), в шестнадцатиричной су­ществуют 16 цифр (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F). Для обозначения цифр, больше 9, используются буквы латинского алфавита, чтобы не придумы­вать совершенно новый набор символов с оригинальным начертанием и произ­ношением.

Шестнадцатиричным цифрам, больше девяти, соответствуют эквивалентные десятичные числа от 10 до 15 (см. табл. 4.1).

Если система счисления с основанием 10 естественна для людей, то с основа­нием 16 она «родная» для компьютеров, которым проще работать с числами, крат­ными двум. Диапазон 0-F представляет 16 возможных значений.

В HTML цвета представляются тремя парами шестнадцатиричных цифр. Каждая пара цифр соответствует красной (red), зеленой (green) и синей (blue) составляющим спектра соответ­ственно. Поскольку шестнадцатиричные значе­ния всегда состоят из двух цифр, для их разграничения не нужны запятые (см. рис. 4.2).

Ниже приводится таблица преобразований RGB-значений (0—255) из десятич­ных в шестнадцатиричные. Значения, соответствующие правильно отображаемым в браузере цветам, выделены.

Табл. ПреобразованияRGBзначений.

10-ое 16-ое   10-ое 16-ое      10-ое 16-ое

0      = 00          051 = 33           102 = 66

1         = 01          052 = 34           103 = 67

2      = 02          053 = 35           104 = 68

3      == 03         054 = 36           105 = 69

4      = 04          055 = 37           106 = 6А

5      = 05          056 = 38           107 = 6В

6      = 06          057 = 39           108 = 6С

7      = 07          058 = ЗА          109 = 6D

8      = 08          059 = ЗВ          110 = 6Е

9      = 09          060 = ЗС          111 = 6F

10    = ОА        061 = 3D          112 = 70

11      = ОВ        062 = ЗЕ          113 = 71

12    = ОС        063 = 3F          114 = 72

13    = 0D         064 = 40           115 = 73

14    = ОЕ        065 = 41           116 = 74

15    = OF        066 = 42           117 = 75

16    = 10          067 = 43           118 = 76

17=11         068 = 44                   119 = 77

18    = 12          069 = 45           120 = 78

19    = 13          070 = 46           121 = 79

20    = 14          071 = 47           122 = 7А

21      = 15          072 = 48           123 = 7В

22    = 16          073 = 49           124 = 7С

23    = 17          074 = 4А          125 = 7D

24    = 18          075 = 4В          126 = 7Е

25    = 19          076 = 4С          127 = 7F

26    = 1А          077 = 4D          128 = 80

27    = 1В          078 = 4Е          129 = 81

28    = 1С          079 = 4F          130 = 82

29     = 1D         080 = 50          131 = 83

30    = 1Е          081 = 51           132 = 84

31      = 1F          082 = 52           133 = 85

32    = 20          083 = 53           134 = 86

33    = 21          084 = 54           135 = 87

34    = 22          085 = 55           136 = 88

35     = 23          086 = 56          137 = 89

36    = 24          087 = 57           138 = 8А

37    = 25          088 = 58           139 = 8

10-ое 16-ое   10-ое 16-ое      10-ое 16-ое

153  = 99          204 = СС_______________

154  = 9А         205 = CD_______________

155  = 9В         206 = СЕ_______________

156  = 9С         207 = CF_______________

157  = 9D         208 = DO_______________

158    = 9Е         209 = D1_______________

159  = 9F         210 = Р2________________

160  = АО        211 = РЗ_______________

161    = А1         212 = Р4________________

162    = А2         213 = Р5________________

163  = A3         214 = Р6________________

164  = А4         215 = Р7________________

165    = А5         256 = D8___________ .

166       = А6        217 = D9_______________

167  = А7         218 = РА________________

168  = А8         219 = DB_______________

169    = А9         220 = DC           255 = FF

170  = АА         221 = PD_______________

171    = АВ         222 = РЕ_______________

172    = АС         223 = DF_______________

173  = АР         224 = ЕО_______________

174  = АЕ         225 = Е1________________

175    = AF         226 = Е2________________

176    = ВО        227 = ЕЗ_______________

177  = В1         228 = Е4________________

178    = В2         229 = Е5________________

179    = ВЗ         230 = Е6________________

180    = В4         231 = Е7________________

181    = В5         232 = Е8________________

182    = В6         233 = Е9________________

183    = В7         234 = ЕА_______________

184  = В8         235 = ЕВ________________

185  = В9         236 = ЕС_______________

186  = ВА         237 = ЕР_______________

187  = ВВ         238 = ЕЁ_______________

188  = ВС         239 = EF_______________

189    = ВР         240 = F0________________

190    = BE         241 = F1

10-ое 16-ое 10-ое 16-ое 10-ое 16-ое 10-ое 16-ое 10-ое 16-ое 10-ое 16-ое
038 = 26 089 = 59 140 = 8С 191 = BF 242 = F2  
039 — 27 090 = 5А 141 = 8D 192 = СО 243 = F3  
040 = 28 091 = 5В 142 — 8Е 193 = С1 244 = F4  
041 = 29 092 = 5С 143 — 8F 194 = С2 245 = F5  
042 = 2А 093 = 5D 144 = 90 195 = СЗ 246 = F6  
043 — 2В 094 = 5Е 145 = 91 196 — С4 247 = F7  
044 = 2С 095 = 5F 146 = 92 197 = С5 248 = F8  
045 = 2D 096 = 60 147 = 93 198 = С6 249 — F9  
046 = 2Е 097 = 61 148 = 94 199 = С7 250 — FA  
047 — 2F 098 = 62 149 = 95 200 — С8 251 = FB  
048 = 30 099 = 63 150 = 96 201 = С9 252 = FC  
049 = 31 100 — 64 151 = 97 202 = СА 253 = FD  
050 = 32 101 = 65 152 = 98 203 = СВ 254 = FE  

Ресурсы Web | HTML4

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

Шестнадцатиричные конвертеры Web

Ряд Web-сайтов позволяет вводить десятичные RGB-значения и генерировать для них шестнад­цатиричный код «на лету». Это удобно при необ­ходимости немедленной визуализации определенной цветовой схемы. Некоторые сайты допускают ввод десятичных RGB-значений, а затем автоматически выво­дят шестнадцатиричный эквивалент и HTML-код.

Калькуляторы, поддерживающие шестнадцатиричные числа

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

Пользователям Macintosh рекомендуется программа-калькулятор с поддерж­кой шестнадцатиричной системы, Calculator II, созданная Джозефом Цицинелли (Josef Cicinelli). Это приложение можно загрузитьи выполнив поиск по ключевому слову «Calculator II».

В состав ОС Windows включен калькулятор, обеспечивающий выполнение вы­числений в шестнадцатиричной системе. Обычно эта утилита находится в группе Accessories (Стандартные). Откройте программу Calculator (Калькулятор) и вы­берите команду меню View | Scientific (Вид | Инженерный). В результате вместо стандартного будет отображен калькулятор, применяемый для инженерных рас­четов. Чтобы начать преобразование RGB-значений достаточно установить пере­ключатель Hex.

Когда необходимо использовать правильно отображаемые браузером цвета?

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

Атрибуты TABLE BGCOLOR не входят в спецификацию HTML до версии 4.0. Однако они поддерживаются браузером Netscape Navigator 3.0 и более поздни­ми версиями, а также стандартом MSIE 3.0 и выше (поэтому многие использу­ют эти атрибуты).

РЕЗЮМЕ

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

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

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

□     Для фотографий приведение к палитре браузеров не должно выполняться. Сжатие фотографических изображений наилучшим образом осуществляет­ся в формате JPEG с 24-разрядной глубиной цветопередачи, который под­держивает миллионы цветов. В случае необходимости сохранения фотогра­фии в формате GIF следует использовать палитру цветов, являющуюся производной от самого изображения. (В программе Photoshop 8.0 для это­го используются опции палитры Adaptive, Perceptual и Selective.) To же относится и к другим видам изображений, которые содержат большие об­ласти плавных цветовых переходов, таких, как градиенты и свечения.

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

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

Атрибут BGCOLOR применим как к телу HTML-документа, так и к ячейкам таблиц.

Duck.s   in a Row Homepage

    1. «rrJRXTHXFONT SIZE=»5″>Welcome to Ducks in a Row Online!

Rubber stamps or rubber duckies? Feel free to splash

around to find out what we’re about. . .

Check out the

RUBBER STAMP ZONE an out-of-site rubber stamp page!

Дескриптор TABLE задает начало таблице. Атрибут BORDER задает объемный вид границе таблицы.

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

HTMLдескрипторы, устанавливающие цвета

Ниже приводится список HTML-деск­рипторов, которые могут изменять цве­та отображаемых элементов:

Таблица дескрипторы, устанавливающие цвета.

Дескриптор Атрибут(ы) Описание
BODY BGCOLOR Устанавливает цвета фона/текста/ ссылок/посещенных ссылок/активных ссылок документа.
1. FONT COLOR Устанавливает цвет шрифта.
BASEFONT COLOR Устанавливает цвет стандартного шрифта для документа.
2. TABLE BGCOLOR Устанавливает цвет фона для таблицы в целом.
TR2 BGCOLOR Устанавливает цвет фона для строки таблицы.
TD2 BGCOLOR Устанавливает цвет фона для ячейки таблицы.
TH2 BGCOLOR Устанавливает цвет фона для заголовка таблицы.

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

2012 Ноябрь | HTML4

28 Ноябрь 2012

 С целью корректного отображения графики на раз­личных платформах без потерь контрастности и яр­кости в процессе преобразования формат PNG также поддерживает коррекцию гаммы изображений. Разли­чия в контрастности между платформами влияют на яркость отображения картинки, отличной от той, в которой изображение созда­валось. Формат PNG позволяет сохранить значение, представляющее степень кон­трастности для системы, в которой изначально создавалось это […]

28 Ноябрь 2012

Общепринято использовать формат GIF для изображе­ний, содержащих большие области чистого цвета либо штриховых рисунков (см. рис. 3.38), а JPEG — для фо­тографий либо изображений, содержащих области плавных цветовых переходов (расплывчатые пятна, тени, цветовые переходы и др.) . Существуют веские аргументы для сохранения фотографии в формате GIF (возможности ани­мации, достижения эффекта прозрачности и чересстрочного отображения). Од­нако […]

28 Ноябрь 2012

Формат JPEG рекомендован для фотографичес­ких изображений либо иллюстраций, использую­щих плавные переходы тонов. Ключевое различие между форматами GIF и JPEG состоит в возмож­ности сохранять JPEG-изображения с различны­ми уровнями сжатия. Это означает, что к изобра­жению можно применить более высокую или низкую степень сжатия — в зависимости от требуемого качества изображения. Следует отметить, что уменьшить размер GIF-файла намного […]

28 Ноябрь 2012

Ниже представлены два HTML-документа (см. рис. 3.29), которые демонстрируют уменьшение разме­ра файлов, достигаемое за счет настройки глубины цветопередачи и выбора оптимального метода раз­мытия границ. Все изображения являются GIF-файлами, оптимизированными в программе Photoshop 6.0 с применением палитры Adaptive. Картинки с эффек­том размытия оптимизированы с помощью опции 100% Diffusion. Параметры размытия границ ■ программе Photoshop Программа Photoshop […]

28 Ноябрь 2012

Часто предполагается, что иллюстрация всегда выглядит лучше, если приме­няется эффект сглаживания неровностей. Это неверно! Художникам никогда не приходилось учитывать размеры файлов в процессе работы. Не стоит отказываться от возможности загружать файл на 24% быстрее. Во многих случаях рисунок без сглаживания смотрится почти так же хорошо, как рисунок со сглаживанием не­ровностей . Поэтому в случае необходимости […]

28 Ноябрь 2012

Алгоритм сжатия GIF-файлов эффективно уменьшает их размер, но достигаемый эф­фект во многом зависит от метода создания F-изображений. На начальном этапе необходимо понимание функционирова­ния внутренней схемы сжатия GIF-файлов, т.е. алгоритма LZW — Lempel Ziv Welch. (Аббревиатура составлена по именам разработчиков этого формата. Прим. перев.). Алгоритм сжатия LZW осуществляет поиск повторяющихся фрагментов изоб­ражения, которые можно представить в […]

28 Ноябрь 2012

Проблемы, возникающие при публикации в Web, впервые заставили компью­терных дизайнеров задуматься о размерах файлов. Трудности заключаются в том, что многие не знают, как получать графические файлы небольшого размера. По­этому изображения в Web, в основном, просто громадные. Большие файлы замед­ляют загрузку страниц. Считается (хотя это не на 100% верно), что среднестати­стический пользователь на обработку каждого килобайта […]

28 Ноябрь 2012

Вместо цвета для фона можно использовать рисунок. Для этой цели служит атрибут BACKGROUND дескриптора BODY. Фоновое изображение повторяется на странице, заполняя всю ее область подобно мозаике, что создает как трудности, так и преимущества для Wcb-дизайнсров. В следующем упражнении будет показано, как включить в страницу фоновую иллюстрацию. Все тонкости этого приема рассматриваются в главе 6. Ниже […]

13 Ноябрь 2012

Язык HTML 4.01 позволяет украшать стра­ницы, указывая цвета различных элементов. С помощью атрибутов дескриптора BODY южно делать цвета фона, текста и ссылок отличными от устанавливаемых по умолчанию. Примером служит следующий дескриптор BODY: Цвета в HTML указываются в шестнадцатиричной системе счисления (hex). Каж­дый цвет представляется тремя парами шестнадцатиричных […]

13 Ноябрь 2012

Часть имени файла после точки называет­ся расширением. Оно часто используется для определения области применения фай­лов. Например, в файле index.html расши­рением является составляющая имени .html. Именно такое расширение (или .htm, если операционная система не позволяет использовать расширения длиной более трех символов) должны иметь файлы, содержащие HTML-код. В большинстве слу­чаев браузеры не распознают файлы в качестве источников […]

Присваивать определенные цвета от­дельным строкам текста можно с помощью дескриптора FONT.

Ducks   in a Row Нотераде

Welcome to Ducks in a Row Online!

Rubber stamps or rubber duckies? Feel

free to splash around to find out what we’re about...

Check out th&

RUBBER STAMP Z ONE

— an out-of-site rubber stamp page

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

Цветовое оформление ссылок

Под цветом ссылок подразумевается цвет рам­ки вокруг графических ссылок либо цвет тексто­вых ссылок.

Duc’ks   in a Row Нотераде

1.     

Welcome to Ducks in a Row Online!

Rubber stamps or rubber duckies? Feel free to splash

around to find out what we’re about…

2.

Check out the