Как сделать баннер для сайта в paint.net
Как сделать баннер для сайта в Paint.NET
Часть первая. Статичный баннер.
Часть вторая. Анимированный баннер.
Многие начинающие веб-дизайнеры сталкиваются с задачей сделать собственный баннер.
Для тех, кто не знает, что такое баннер, согласно Википедии баннер представляет собой графическое изображение, являющееся гиперссылкой на сайт или отдельную страницу с дополнительной информацией.
Традиционные интернет баннеры представляют собой FLASH-баннеры или графические изображения в форматах GIF или JPEG. Использование формата GIF позволяет размещать на баннерах не только статические рисунки, но и анимированные (в формате GIF эффект движения достигается чередованием нескольких изображений).
Самым распространенным интернет-баннером является баннер размером 468х60 точек. Баннер такого формата размещается на большинстве сайтов, а так же является основным для баннерообменных сетей.
Кроме этого, менее распространены, но так же востребованы баннеры:
Итак, попробуем самостоятельно создать баннер наиболее популярного формата размером 468х60 точек.
Поскольку идеи для создания баннера у нас нет, то сделаем, как говориться баннер «ни о чем». В качестве изображения воспользуемся фотографией главных героев из фильма «Сумерки»
И изображение ночного города.
Итак, создаем новый рисунок в Paint.NET размером 468х60 пикселей. Заполняем фон черным цветом. Создаем новый прозрачный слой. Откроем фотографию главных героев Paint.NET уменьшим ее размер так, чтобы значение высоты фотографии было 60, т.е. равно высоте нашего баннера. Скопируем эту фотографию в буфер обмена и вставим на новый слой в изображении нашего баннера.
Теперь нужно оставить на фотографии только главных героев и удалить окружающий их фон. Тому, как вырезать нужный рисунок на фотографии, посвящен специальный урок от участника этого форума VanGog Учимся аккуратно вырезать объект. Кроме того изображение с фотографии для баннера стало совсем маленьким, поэтому вырезать рисунок не представляет особых сложностей. Итак у нас получилось вот такое изображение.
Поскольку заметно, что фотография, использованная нами для создания баннера, освещена справа, то разумно сделать правую часть баннера более светлой. Воспользуемся еще одним уроком от участника форума VanGog Рисуем логотип Windows и эффектные обои. Используя принципы, описанные VanGog’ом в этом уроке совсем несложно сделать наш баннер таким:
Теперь осталось заполнить чем-то левую часть баннера. Поскольку этот урок больше учебный и никакой смысловой нагрузки наш баннер не несет, то, учитывая, что правая часть баннера у нас светлая, логично предположить, что левая часть должна остаться темной. Воспользуемся второй фотографией ночного города. Уменьшим эту фотографию так, что бы ее высота стала 60 пикселей. Создадим на изображении новый слой, на который вставим уменьшенную копию фотографии с городом. Для того что бы фотография лучше вписалась в баннер, удалим небо вокруг небоскребов. Воспользуемся инструментом Paint.NET «градиент» типа «круговой» в режиме прозрачности. С помощью градиента сделаем плавно растворяющиеся края ночного города.
Из использованного нами урока VanGog Рисуем логотип Windows и эффектные обои воспользуемся способом создания светящихся точек – это будут огни небоскребов. Не будем повторяться, описывая то, что подробно рассказал в своем уроке VanGog. Напомним вкратце, что для этого мы создали новый слой, используя инструмент Paint.NET «кисточка» поставили несколько точек белого цвета на рисунках домов – это светящиеся окна. А потом применили к слою с точками стандартный эффект Paint.NET «свечение». Итак статический баннер готов.
