Как сделать баннер для сайта в Paint.NET

Часть первая. Статичный баннер.

картика к уроку paint.net

Часть вторая. Анимированный баннер.

картика к уроку paint.net

Введение

Многие начинающие веб-дизайнеры сталкиваются с задачей сделать собственный баннер.
Для тех, кто не знает, что такое баннер, согласно Википедии баннер представляет собой графическое изображение, являющееся гиперссылкой на сайт или отдельную страницу с дополнительной информацией.
Традиционные интернет баннеры представляют собой FLASH-баннеры или графические изображения в форматах GIF или JPEG. Использование формата GIF позволяет размещать на баннерах не только статические рисунки, но и анимированные (в формате GIF эффект движения достигается чередованием нескольких изображений).
Самым распространенным интернет-баннером является баннер размером 468х60 точек. Баннер такого формата размещается на большинстве сайтов, а так же является основным для баннерообменных сетей.
Кроме этого, менее распространены, но так же востребованы баннеры:

Размером 100х100 точек. На сайтах такой баннер обычно размещается в верхних углах (ушках) страницы.
Размером 88х31. Часто называют «кнопкой». Используется обычно для обмена ссылками между сайтами или для размещения логотипа. Размещается он, как правило внизу страницы.
Размеры 150х400, 100х600 и т.д. Один из новых форматов баннеров, обычно называют "Небоскреб" или "Башня". Основная особенность, высота баннера больше его ширины. Такой формат часто применяется для рекламы.

Часть 1. Как сделать статичный баннер в Paint.NET

Итак, попробуем самостоятельно создать баннер наиболее популярного формата размером 468х60 точек.
Поскольку идеи для создания баннера у нас нет, то сделаем, как говориться баннер «ни о чем». В качестве изображения воспользуемся фотографией главных героев из фильма «Сумерки»

картика к уроку paint.net

И изображение ночного города.

картика к уроку paint.net

Итак, создаем новый рисунок в Paint.NET размером 468х60 пикселей. Заполняем фон черным цветом. Создаем новый прозрачный слой. Откроем фотографию главных героев Paint.NET уменьшим ее размер так, чтобы значение высоты фотографии было 60, т.е. равно высоте нашего баннера. Скопируем эту фотографию в буфер обмена и вставим на новый слой в изображении нашего баннера.
Теперь нужно оставить на фотографии только главных героев и удалить окружающий их фон. Тому, как вырезать нужный рисунок на фотографии, посвящен специальный урок от участника этого форума VanGog Учимся аккуратно вырезать объект. Кроме того изображение с фотографии для баннера стало совсем маленьким, поэтому вырезать рисунок не представляет особых сложностей. Итак у нас получилось вот такое изображение.

картика к уроку paint.net

Поскольку заметно, что фотография, использованная нами для создания баннера, освещена справа, то разумно сделать правую часть баннера более светлой. Воспользуемся еще одним уроком от участника форума VanGog Рисуем логотип Windows и эффектные обои. Используя принципы, описанные VanGog’ом в этом уроке совсем несложно сделать наш баннер таким:

картика к уроку paint.net

Теперь осталось заполнить чем-то левую часть баннера. Поскольку этот урок больше учебный и никакой смысловой нагрузки наш баннер не несет, то, учитывая, что правая часть баннера у нас светлая, логично предположить, что левая часть должна остаться темной. Воспользуемся второй фотографией ночного города. Уменьшим эту фотографию так, что бы ее высота стала 60 пикселей. Создадим на изображении новый слой, на который вставим уменьшенную копию фотографии с городом. Для того что бы фотография лучше вписалась в баннер, удалим небо вокруг небоскребов. Воспользуемся инструментом Paint.NET «градиент» типа «круговой» в режиме прозрачности. С помощью градиента сделаем плавно растворяющиеся края ночного города.

Из использованного нами урока VanGog Рисуем логотип Windows и эффектные обои воспользуемся способом создания светящихся точек – это будут огни небоскребов. Не будем повторяться, описывая то, что подробно рассказал в своем уроке VanGog. Напомним вкратце, что для этого мы создали новый слой, используя инструмент Paint.NET «кисточка» поставили несколько точек белого цвета на рисунках домов – это светящиеся окна. А потом применили к слою с точками стандартный эффект Paint.NET «свечение». Итак статический баннер готов.

картика к уроку paint.net

Обсудить этот урок на форуме paint.net

добавить на Яндекс Rambler's Top100

Этот сайт посвящен всему, что связано с бесплатным графическим редактором paint.net и вообще с рисованием в целом. На этом сайте вы найдете форум paint.net, в котором есть раздел схемы рисования, по которым можно рисовать обычными красками и простым карандашом. А вообще в интернет можно найти много интересного. Например, детям игры для детей или, родители, вы знаете, что квитанция сбербанка на оплату штрафа, налога или квитанция на загранпаспорт доступна для заполнения через интернет? А знаете вы, где найти образец заполнения 3-НДФЛ или где купить программу 1с бухгалтерия. И еще много того, что может оказаться полезным.