Общий обзор Интернета
Серверы
Понятия страницы и сайта
НТМL
Программные средства
Средства работы с графикой
О дизайне
Раскрутка сайта
Некоторые советы
Полезная графика
Музыка МИДИ
Полезные скрипты

СРЕДСТВА РАБОТЫ С ГРАФИКОЙ

      Без графических компонентов современный сайт просто не мыслим. Назначение этих компонентов по крайней мере следующее:
    -Развлекательно-эстетическое (сделайте нам красиво);
    -Информационное - графики, таблицы, образцы товаров, номограммы и т.д.
    -Баннеры.
    Если без первых хотя бы в принципе можно обойтись, то без баннеров никак.
    Короче говоря, или осваивай это дело сам, либо найми. А я так думаю, какой же ты вебмастер-любитель, если дизайн не сможешь освоить. Ты обязан это сделать. В Интернете море всякой графики и изображений. От космоса до порнухи. Все что нужно , так это так или иначе переделать. Вырезать интересный кусочек. Повернуть, изменить размеры, сделать контрастнее, изменить формат, добавить текст, скомпоновать и т.д. И все это поможет тебе сделать набор программных средств о котором мы говорили выше. Главным из них я считаю Adobe Photoshop.
    Он может работать в большинстве форматов - jpg, gif, bmp и др.
    Если у тебя русифицированная версия, ты с ним быстро разберешься.  Потыкай кнопочками и очень скоро освоишься.  Но особенно обрати внимание на следующие функции:
    В меню изображение:
        - режим, позволяет из цветного перейти в черно-белый и наоборот а также в 8-битный режим и в режим индексированных цветов;
        - коррекция - (яркость-контраст, цветовой баланс);
        - размер изображения;
        - размер холста;
        - повернуть холст;
        - кадрировать;
        - пастеризовать.
    Вот например мой баннер слева, справа его прототип.

    Что я сделал? Инструментом "Область" (слева табличка) выделил девочку и в меню "Изображение" кликнул "Кадрировать". Уменьшил по высоте до 60 пиксел (такая единица в полиграфии), что соответствует требованиям баннерообменной сети. (Запомни, что если картинка большая, не следует ее уменьшать в 10 раз. Испортит. Лучше уменьшать в два раза, но несколько раз). Затем в команде "Размер холста" увеличил размер по ширине до 120 пиксел. Затем инструментом "Перемещение" сдвинул изображение к левому краю. В меню "Слой" кликнул команду "Выполнить сведение". Снова инструментом "Область" выделил кусочек картинки от девочки справа и скопировал в меню "Редактирование". Затем оттуда же трижды вклеил и разместил кусочки изображения так, что они скрыли пустое место. Снова выполнил сведение слоев. Чуть чуть поправил инструментом "Палец". Затем командой "Пастеризовать" уменьшил до минимума градацию цветов и преобразовал  в индексированные цвета. Инструментом "Текст" ввел построчно текст  и, наконец, "Сохранил как..." в меню Файл.  При этом и изображение смотрится не плохо, и объем его минимален (а требуют не более 10 kb). Полученный баннер всего около 2 kb.
    Так что как видишь не так уж и сложно. Так же ты сможешь обрабатывать и другие свои изображения, по крайней мере для того, чтобы они были минимального объема и страницы быстро грузились. Кроме того, ты сможешь объединять и разделять фото и рисунки, окрашивать их, менять окраску, контраст, подчищать огрехи и т.д. и еще один момент. Если ты будешь размещать на сайте большие изображения, позаботься, чтобы объем их был минимален. Для этого прежде всего, размеры изображения должны быть в пределах разумного. Когда после обработки изображения в Фотошопе будешь его сохранять, указывай низкое качество. Визуально это будет мало заметно, зато объем будет минимален. После размещения изображения на странице кликни правой кнопкой мышки, выбери Picture propeties  и в Progressive passes поставь "8". Это во-первых, позволит браузеру не ждать полной загрузки страницы, а загружать ее по частям, а во-вторых, почти вдвое уменьшает размер файла. Если изображение формата gif, то поставь галочку в Interlaced.
    Спрашивается, зачем тогда тебе Corel Photo Paint. А затем, что  из двух-трех изображений можно сделать мультик. Правда это очень большая и дорогая программа. Но мультики можно делать и бесплатной программой GIF_ANI_setup.EXE. Найди через поиск в интернете, скачай. Там всё очень просто.
    Кстати о форматах. - bmp - это формат штатной программы Виндоуз Paint. В ней удобно рисовать что ни будь самому. Затем через Фотошоп можно перевести в любой формат. jpg - один из самых распространенных форматов, довольно компактен по объему. gif - позволяет во-первых, делать мультики,  во-вторых, этот формат позволяет делать кое какие вещи, например выбранный цвет делать прозрачным в редакторе Фронтпейдж. Фотошоп может перевести формат jpg в формат gif только когда если выбран режим индексных цветов. Можно перевести и обратно. В режиме gif  нельзя сменить гамму цветов. А в jpg можно.

    Еще раз напоминаю, при сохранении рисунка Фотошоп будет подставлять расширение типа JPG. Сотри его и напиши jpg. Фронтпейдж запишет в текст HTML все равно jpg или gif ,  И тогда, если ты загрузишь рисунок с расширением JPG или GIF, то в броузере в документе, полученном с сервера, рисунков ты не увидишь. Для сервера, где, как правило используется UNIX,  JPG и jpg совершенно разные вещи!

     Что такое индексированные цвета? Это когда ты нарисовал картинку в два, скажем, цвета, то фиксируются только эти цвета. И тогда объем баннера в 100 на 60 пиксел можно будет довести до сотен байт. А следовательно можно будет в мультике использовать до десяти картинок. Это очень тонкая технология. Нужен немалый опыт, чтобы ловко делать баннеры в виде мультиков.
    Вот тебе несколько советов, как это сделать.
    Не пытайся сделав несколько баннеров отдельно и объединить их в мультик. У них могут быть разные индексированыые цвета и получится черт знает что.
 Вот мой анимированный баннер:  Как я его сделал. Я сделал отдельные баннеры в Фотошоп в формате jpg, Затем увеличил размеры холста одного из них настолько, чтобы перенести на него через клипбоард все остальныее. Свел слои. Затем - меню "Изображение" > "Коррекция" > "Пастеризовать". На запрос сколько уровней, выбрал 3 . В меню режим выбрал "Индексированные цвета" Получилось вот что:

    Сохранил это в формате gif. Затем по кусочку вырезал отдельные части. Уточнил их размеры до 120 на 60 пиксел и на уровне пиксел, то есть при сильном увеличении, инструментом "Карандаш" поправил как мог. Далее посмотри что получилось:

    После этого перешел на Корел. Загрузил первую картинку, перевел ее в режим Muvie. Добавил остальные картинки командой Insert frame from. Еще кое какие манипуляции и баннер готов. (Ушло правда на это два дня труда и куча нервов.) Да, если будешь делать мультики, учти, что интервал между сменой картинок в Corel и реально разный. Реально в 10 раз медленнее. Понятия не имею почему. Там есть еще возможность весь пакет изображений в мультике обрабатывать как одно. Таким образом я сделал полоску внизу баннера и сделал на ней надпись. В итоге у меня получился баннер в шесть кадров и объемом всего в семь килобайт! Аналогично можно сделать и в GIF_ANI, но полоска с надписью должна быть одинаковой на каждой картинке.
    Еще одно, gif формат с прозрачным с цветом имеет неприятное свойство. Если страница небольшая, так, что скроллбар не позволяет сдвинуть картинку за пределы окна браузера, то изображение может и не появится. Такое безобразие я наблюдал на многих и профессиональных сайтах. Поэтому будь внимателен и старайся обойтись форматом jpg. Но есть и небольшая хитрость. Её я обнаружил. Если gif - изображение уже установлено на страницу, в табло свойства изображения уменьши или увеличь его большую сторону на один пиксел. Тогда прозрачная и непрзрачная части будут немного не совпадать. Браузер попытается их свести, и непрозрачная часть высветится. Не всегда это работает хорошо, но чаще всего вполне эффективно.
    Вот пожалуй все. Еще раз напоминаю, главное при приемлемом качестве минимальный объем. Ну вот, сайт твой готов. Ты нашел приемлемый сервер. Заполнил форму, тебе выделили память. Ты получил свой URL. Тем или иным способом загрузил свой сайт на сервер. Теперь у тебя одна проблема, как сделать так, чтобы посмотрели на него не только ты и твои друзья. Чтобы обсудить этот вопрос перейдем на следующую страницу: 

  

 

Раскрути свою страничку Бесплатно:: 1ps.ru Web-KatoK - каталог интернет ресурсов