Веб дизайн

Это должно быть известно всем, кто хоть раз пытался создать абсолютно идентичные цвета в HTML и на картинке. А кто не пытался, должен был хотя бы догадываться об этом Итак. Задача чаще всего возникает слудующая: необходимо наложить картинку, скажем, с фоном синего цвета на такой же синий фон на страничке. Многие попытки подогнать цвет на глаз приводили к тому, что цвета все же подло отличались. Не помогла и прозрачная основа картинки – опять же, подло вылезает эффект “алясинга”, то есть эффект наложения на границах изображения. Вот так и возникает задача, которая повергат в уныние незадачливых веб-строителей.

Известно, что в Фотошопе для определения цвета используется три цифровые составляющие: RGB [Red Green Blue], тогда как в HTML используются цвета шестнадцатиричного формата, такие, как: 00D0FF. Настало время предложить вам два способа перевода этих цветов из формата RGB в HEX (шестнадцатиричный) и обратно:

Способ номер раз.
Открываем старый-добрый калькулятор, который поставляется стандартно с любой версией Windows. Переключам его в инженерный режим. Допустим, необходимо перевести цвет из режима RGB (Photoshop) в шестнадцатиричный режим (html). Открываем фотошоп и в палитре узнаем три пары чисел, соответствующик R, G и B. Вводим первую пару чисел в калькулятор, переходим в режим HEX и узнаем первые две составляющие. Так же поступаем с остальными двумя парами цифр.

Вот примерчик, кто не догоняет.
Есть синий цвет в Photoshop, RGB=267485, т.е R=26, G=74, B=85. Открываем калькулятор в инженерном режиме, переходим в режим Dec и вводим первую пару цифр 26, переходим в режим HEX и получаем 1A. Потом так же поступаем с остальными двумя парами. В итоге плучается вот что.
RGB: 26 74 85
HEX: 1A4A55
Вводим в теге color=”#1A4A55″ и получаем абсолютно идентичный цвет. Можете проверить. Таким же макаром цвета преобразовываются и в обратном направлении.

Способ второй
И более простой (он же ламмерский) способ. Делаете скриншот вашей веб-страницы. Открываете скиншот в Фотошопе и пипеткой узнаете цвет. Гарантия попадания практически 100%. Однако, такой способ действует только в одну сторону, то есть переводит цвет из формата Html (HEX) сразу в формат Фотошопа RGB. Зато очень быстро. Вот и все.

Для того, чтобы сохранить картинку в Adobe Photoshop в формате JPG надо нарисовать картинку, затем перейти в режим RGB [Изображение/Режим/RGB] в меню файл выбрать [Соханить копию] откроется менюшка, в которой вы назовете файл, а ниже в строке [Тип файлов] выберете JPEG. После нажатия на ОК вылетит еще менюшка, где вы сможете выбрать уровень сжатия картинки. Чем уровень больше тем картинка красивее и “тяжелее” и наоборот. Жмем ОК и картинка сохранена. Не забывайте, что формат JPEG не поддерживает прозрачные участки/слои. Если у вас изображение содержит прозрачные участки, то лучше сохранить в формате GIF.

Для того, чтобы сохранить картинку в Adobe Photoshop в формате GIF надо нарисовать картинку, затем в меню файл выбрать [Экспорт/GIF] откроется менюшка, где вы сможете задать то кол-во цветов, которое будет использовать Фотошоп для оптимизации картинки. Если графика сложная выбирайте больше цветов. Если простая-можно и поменьше. Например я пользуюсь значениями от 32 до 64. Помните, что GIF хорош тем , что он поддерживает, в отличие от JPEG, прозрачные участки изображения.

Мне часто задавали вопросы, как сделать, чтобы Photoshop 5.0 понимал кириллицу. Отвечаю раз и навсегда. =)) Для этого необходимо отредактировать системный реестр. Если вы этого делать не умеете, то лучше туда не лезть, а то все это может плохо кончится. Итак.

Запускаете системный реестр ( Пуск / Выполнить / Regedit). Далее ищете строку: HKEY_LOCAL_MACHINE \ SYSTEM \ CurrentControlSet \ Control \ Nls \ CodePage. Далее просто правим вручную строку: 1252 – cp_1252.nls на следующие значения:

Для юзеров Win95 или 98 изменяем на: cp_1251.nls

Для юзеров Win NT меняем на: c_1251.nls

Теперь закрываем REGEDIT и перезагружаемся…

Для того чтобы установить дополнительные Actions (действия/операции) откройте Photoshop, далее открываете меню ОКНО и жмете (Показать операции(acnions)). Вылетит менюшка, на ней найдете маленький треугольничек и нажмете на него. Вылетит еще менюшка и вы выберете (Загрузить операции(actions)) и выберете файл, который собственно и содержит “экшны”. Обычно это файл с расширением *.atn. Вот и все.

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

Так. Открываем исходную картинку. Теперь жмем [Просмотр / Показать линейки] или просто [Ctrl+R]. Теперь поднапряжемся и мышкой из показавшихся линеек вытаскиваем вертикальные и горизонтальные полоски, которые ставим в место предполагаемого разреза. Эти полоски называются направляющие или по-буржуйски: “guides”. Расставляем их по изображению, как требуется. Расставили? Теперь их необходимо закрепить. [ Просмотр / Закрепить направляющие]. Теперь любой инструмент выделения (лучше, конечно, прямоугольник) будет “прилипать” к направляющим. Выделяете каждый кусочек и вручную сохраняете. За точность можно не опасаться, инструмент прилипает с точностью до пикселя.

Чтобы установить дополнительные фильтры, зайдите в директорию с дистрибутивом самих фильтров и жмите там что-нибудь типа setup.exe. Откроется окно, где вы должны указать путь инсталляции, вы должны указать там директорию Plugins в директории Photoshop ( Например C:\PHOTOSHOP\PLUGINS ) Так устанавливаются фильтры типа EyeCandy и KPT. Далее у вас пройдет инсталляция, после чего в Фотошопе в меню Фильтры появится ваш сборник фильтров, который уже можно применять к изображениям… Если при инсталляции вы укажите иную директорию то фильтры просто-напросто работать не будут.

Если же у вас есть уже “готовые” файлы с фильтрами, то их необходимо просто переписать в директорию ../Photoshop/Plugins и при следующем запуске Фотошопа он сам найдет эти фильтры и инициализирует их.