среда, 6 апреля 2011 г.

Занятие 16. Как поменять шапку сайта на юкозе (часть 2)

превью2 Надеюсь, вы справились с домашним заданием и подготовили картинки-шаблоны со своего сайта.

Теперь ваша задача в любом графическом редакторе (фотошопе, Paint или Paint.NET) изменить их или создать новые, но таких же размеров.

 Затем положить новые рисунки в папку с рисунками шаблона, заменяя шаблонные на свои, обновленные.


Рассмотрим весь этот процесс на примере сайта Пирожок.Кулинарные рецепты.

1. Структура шапки сайта (хедера)
Итак, шаблонную шапку этого сайта составляли рисунки 2.gif, 3.gif, 4.gif, 5.jpg,
исходники для хедера Пирожок размеры
Отсюда видно, что структура хедера выглядит так:
 структура сайта Пирожок
Автор сайта решила первые два блока (апельсинки) оставить без изменений, а блоки №3 и №4 (рис 4.gif, 5.gif) заменить другим рисунком.
исходник 2. Подготовка рисунка

Проведем обработку рисунка-исходника бокалов в программе Paint.NET.
Подгонка размеров
Обрежем лишнее и приведем к нужному размеру. В нашем случае важно, чтобы высота рисунка была 210рх. Поэтому ставим галочку Сохранить пропорции и выставляем размер рисунка по высоте – 210.
 обработка исходника
Создаем рисунок на прозрачном фоне
Нужно убрать фон рисунка. Дело это кропотливое и небыстрое.
Работать можно стиралкой или волшебной палочкой. Не спеша, шаг за шагом, убирая все лишнее.
Вот что в результате получилось:
бокалы
Этот рисунок будет располагаться справа и захватит область двух блоков: 4.gif и 5.gif. Но его размеры меньше этой области, поэтому нужно создать новый документ шириной 364рх и высотой 210рх. (Рисунки 4.gif и 5.gif сначала объединим (126+268=364рх) для рисования, а затем разрежем для вставки на сайт.) Вставляем рисунок бокалов на прозрачном фоне и сохраняем полученный как рисунок 45.gif.
 исходник45 на прозрачном фоне 

Подготовка рисунков 4.gif и 5.gif для вставки на сайт
Открываем рисунок 45.gif.
1. Выбираем инструмент Выделение,
2. Задаем параметр Выделение по размеру.
3. Указываем нужные размеры в пикселях! (в оранжевых квадратиках).
4. Выделяем нужную часть рисунка.
5. Нажимаем кнопку Обрезать по выделению (в зеленом квадратике).
6. Сохраняем получившийся рисунок в формате .gif (желательно), .jpg или .png
 45 для сайта пирожок
Аналогично создаем рисунок 4.gif.

 Создаем фоновый рисунок
Чтобы рисунок органично смотрелся на сайте, нужно подобрать соответствующий фон.фоновый рисунок
Для этого создаем новый документ шириной 90рх (ширина должна быть как можно меньше, вплоть до 1-2 рх) и высотой 210рх. Зальем его желтым цветом и создадим произвольный фоновый рисунок из кругов.
Сохраняем новый фоновый рисунок как 1.gif.







Готово!
Структура новой шапки сайта выглядит так:
структура нового хедера
Теперь у нас все подготовлено, чтобы перейти к самому ответственному этапу – замене хедера в шаблоне сайта. Но об этом – в следующем занятии.

Комментариев нет:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...