|
|
Подготовка фоновых изображений "BACKGROUND" с помощью графического редактора ADOBE PHOTOSHOP - Фотошоп
часть 1
Фоновый рисунок интернет страницы или BACKGROUND - это изображение, которое Вы видите на многих страницах и сайтах "за текстом". Например, на этой странице фоновым рисунком служит фотография моей внучки Машеньки.
На примере этой фотографии мы и рассмотрим порядок работы. Но сначала поговорим немного о самом BACKGROUND - что это такое и с чем его едят. Я уже рассказывал вкратце о BACKGROUND в
статье про тело документа, но, как говорится: повторение - мать учения. А может, и нового что добавлю  .
Фоновые рисунки можно разделить на две группы:
- Большой рисунок или фотография, которая занимает всю страницу. Как это выглядит, можете посмотреть здесь.
Преимущество: можно подобрать симпатичное изображение в тему, которое уже само по себе будет украшать страницу.
Недостаток: файл, содержащий изображение получается довольно объемный, что может довольно сильно увеличить время загрузки страницы, особенно на медленных серверах (как правило, на бесплатных хостингах). Причем, в формате jpg,
например, величина файла сильно увеличивается с увеличением размера изображения и мало уменьшается при ухудшении качества.
- Маленький рисунок или фото, которые размножаются по странице в большом количестве. Как это выглядит, можете посмотреть здесь.
Здесь как раз наоборот - преимущество - малый размер файла, который при использовании однородного фона, как, например, здесь, может быть вообще размером
1 - 2 килобайта и загружаться практически мгновенно.
Есть также два способа фиксации рисунка на странице:
- При прокрутке страницы рисунок двигается вместе с текстом и всем остальным, что на нем расположено. Так, как это происходит на странице, которую Вы сейчас читаете.
- При прокрутке страницы рисунок остается на месте. Как это выглядит и чем достигается опять же описано здесь.
Какой из способов выбрать - следует решать в каждом конкретном случае отдельно. Это зависит, в основном, от используемого рисунка. На некоторых рисунках, если они закреплены неподвижно, текст при прокрутке создает неприятную для глаз рябь.
Вставляется фоновый рисунок на страницу тоже двумя способами:
- При помощи параметра background тега BODY. Значением параметра background является URL, то есть путь к файлу, который хранит фоновый рисунок. Вы можете посмотреть, как это выглядит,
например, на этой странице, щелкнув по ней правой кнопкой мыши и выбрав
"посмотреть HTML-код".
- При помощи CSS, указав в файле стилей для тега BODY background: url(путь к файлу). Например, для этой страницы это выглядело бы так: <BODY style="BACKGROUND: url(img/masana.jpg)">
Теперь, собственно, о самом рисунке. Сразу хочу подчеркнуть, что все критерии выбора, которые я буду здесь перечислять, относятся чисто к техническим характеристикам изображений. Выбор в художественном смысле ессно остается
за Вами и ограничен только вашим воображением .
Итак, критерии выбора рисунка или фото для BACKGROUND:
- При выборе "большого" рисунка, то есть на всю страницу, следует отдавать предпочтения изображениям шириной не менее 600 пикселей. Это связано с тем, что при попытке увеличения размеров изображения в формате JPG теряется качество. Можно, конечно, и из фото размером
200*100 пикселей сделать BACKGROUND с хорошим качеством, но трудозатраты при этом будут неоправданно высоки, да и потребует это дело приличного знания и умения обращаться графическими редакторами. Мы в такие дебри не полезем (пока ).
- При выборе "маленького" рисунка, который будет размножаться по экрану в неимоверных количествах - основной критерий - размер файла, в котором хранится этот рисунок. Впрочем, в сети есть куча сайтов, где Вам предложат сколько угодно уже готовых фоновых рисунков такого рода,
поэтому больше я их упоминать здесь не буду.
На этом, собственно, можно закончить первую часть статьи. Во второй части разговор пойдет непосредственно о работе с графическим редактором ADOBE PHOTOSHOP - Фотошоп.
|
