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

Этот раздел предназначен для уроков, посвященных кнопочкам, юзербарам, баннерам, шапкам и т.д., в общем, всему, что может помочь в создании и дизайне сайтов.
Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 17 апр 2010, 18:01

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

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

Изображение

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

Изображение

Введение

Многие начинающие веб-дизайнеры сталкиваются с задачей сделать собственный баннер.
Для тех, кто не знает, что такое баннер, согласно Википедии баннер представляет собой графическое изображение, являющееся гиперссылкой на сайт или отдельную страницу с дополнительной информацией.
Традиционные интернет баннеры представляют собой FLASH-баннеры или графические изображения в форматах GIF или JPEG. Использование формата GIF позволяет размещать на баннерах не только статические рисунки, но и анимированные (в формате GIF эффект движения достигается чередованием нескольких изображений).
Самым распространенным интернет-баннером является баннер размером 468х60 точек. Баннер такого формата размещается на большинстве сайтов, а так же является основным для баннерообменных сетей.
Кроме этого, менее распространены, но так же востребованы баннеры:
  • Размером 100х100 точек. На сайтах такой баннер обычно размещается в верхних углах (ушках) страницы.
  • Размером 88х31. Часто называют «кнопкой». Используется обычно для обмена ссылками между сайтами или для размещения логотипа. Размещается он, как правило внизу страницы.
  • Размеры 150х400, 100х600 и т.д. Один из новых форматов баннеров, обычно называют "Небоскреб" или "Башня". Основная особенность, высота баннера больше его ширины. Такой формат часто применяется для рекламы.
Часть 1. Как сделать статичный баннер в Paint.NET

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

Изображение

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

Изображение

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

Изображение

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

Изображение

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

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

Изображение

Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 17 апр 2010, 18:57

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

Анимацию сделанного нами баннера будем осуществлять путем использования возможностей формата анимированный GIF. Как вы уже, наверное, знаете, анимированный GIF представляет собой несколько изображений (кадров), сохраненных в одном файле. Веб-браузеры понимают, что анимированный GIF необходимо отображать как чередование имеющихся в нем кадров. Поэтому наша задача сводится к созданию этих самых кадров.

На этом сайте уже есть урок «Как сделать движущийся рисунок в Paint.NET». На этом уроке соединение подготовленных в Paint.NET кадров в анимированный GIF файл осуществлялось при помощи бесплатной программы «UnFREEz».

В этот раз мы воспользуемся более простым способом и для создания анимированного GIF-файла используем дополнительный эффект Animated Image – анимированное изображение. Этот эффект позволяет сохранить изображение в Paint.NET прямо в формате анимированный GIF. При этом каждый отдельный слой изображения представляет собой отдельный кадр. Соответственно очередность кадров соответствует очередности расположения слоев.

Итак, в качестве идеи для анимации, сделаем появляющуюся поверх изображения надпись «Этот баннер сделан в paint.net». Для этого откроем сделанный в первой части этого урока статичный баннер в Paint.NET. Создадим новый прозрачный слой, на который нанесем надпись, например белым цветом.

Для того чтобы белая надпись не сливалась со светлыми участками баннера, применим к слою с надписью дополнительный эффект Paint.NET «Тень» (Drop Shadow). Получилось вот так.
Изображение

Теперь создаем кадры. Первым кадром будет просто баннер. Появление на нем надписи сделаем путем увеличения прозрачности слоя с надписью от 0 до 255. Пусть второй кадр будет представлять собой баннер с наложенной на него надписью с уровнем прозрачности 10. Копируем слой с текстом и слой с баннером. Помещаем копию слоя с тестом выше копии слоя с баннером. Устанавливаем в настройках слоя с копией текста прозрачность равную 10 и объединяем эти два слоя. Полученный слой можно назвать 2. Напомним, что первый кадр - это просто баннер, что соответствует уровню прозрачности текста 0.

В итоге мы сделали 9 (девять) кадров. Первый – баннер, второй - баннер с текстом прозрачностью 10, третий - баннер с текстом прозрачностью 30, четвертый - баннер с текстом прозрачностью 50, далее прозрачность 70, 100, 150, 200 и 255. Например, пятый кадр выглядит так:

Изображение

В принципе после того как наше изображение содержит девять слоев, каждый из которых представляет собой отдельный кадр и расположены они по порядку от одного до девяти, считая снизу, то уже можно делать анимированный GIF-файл. Однако мы планируем, что наш баннер будет проигрываться в режиме нон-стоп, т.е. кадры будут чередоваться по кругу без остановки. Т.о. после девятого кадра с полной надписью следующим будет кадр номер один, где надписи нет. Т.е. появляясь плавно, исчезать надпись будет быстро. Давайте сделаем, что бы и исчезала надпись тоже плавно. Самый очевидный способ добавить кадры, такие как 2-8, после девятого кадра в обратном порядке. Наглядно можно увидеть в окне слои:

Изображение

К сожалению, все кадры в это окно все равно не поместились, поэтому перечислим их порядок: 1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2.
После этого, если у вас установлен эффект Paint.NET Animated Image – анимированное изображение, в пункте главного меню Paint.NET «Файл» - «Сохранить как…» выберете формат Animated GIF (*.agif).

Вот результат. Уровень задержки delay мы установили 20. Количество повторений – параметр replay – ноль, что значит по кругу.

Изображение

Аватара пользователя
zxcvvcxz
Сообщения: 60
Зарегистрирован: 19 апр 2010, 22:29
Репутация: 0
Откуда: SIBIR'-ALTAY
Контактная информация:

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

Сообщение zxcvvcxz » 29 апр 2010, 22:26

Всё получилось спасибо!
Можно добавить такой урок Рисование Юзер-баров для сайта например таких:
Изображение
И
Изображение

Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 29 апр 2010, 23:29

Это вопрос или предложение? ;)

Если хотите разместить свой урок, то всегда, пожалуйста, эта тема ровно для этого. Кстати, если получилось, чего не похвастались? Показали бы результат? :Search:

Аватара пользователя
zxcvvcxz
Сообщения: 60
Зарегистрирован: 19 апр 2010, 22:29
Репутация: 0
Откуда: SIBIR'-ALTAY
Контактная информация:

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

Сообщение zxcvvcxz » 30 апр 2010, 02:23

Это предложение - вам, чтобы cделали несколько уроков по этой теме!
Первый я ещё могу cделать, а вот второй юзербар(Тот ,что зелёный) Ни как- там где слой с косыми линиями - пробовал конечно, но почему-то у меня проблема с текстом пробовал и сверху его ставить и с низу и между и всё равно у меня получается и текст какой-то "разрезанный" этими линиями При обьединении слоёв!
А на счёт "Часть 2. Как сделать анимированный баннер в Paint.NET" Вот здесь я запарился раз несколько перечитовал:
_____________________________________________________________________________________
Теперь создаем кадры. Первым кадром будет просто баннер. Появление на нем надписи сделаем путем увеличения прозрачности слоя с надписью от 0 до 255. Пусть второй кадр будет представлять собой баннер с наложенной на него надписью с уровнем прозрачности 10. Копируем слой с текстом и слой с баннером. Помещаем копию слоя с тестом выше копии слоя с баннером. Устанавливаем в настройках слоя с копией текста прозрачность равную 10 и объединяем эти два слоя. Полученный слой можно назвать 2. Напомним, что первый кадр - это просто баннер, что соответствует уровню прозрачности текста
______________________________________________________________________________________________________________________________________
Напутанооооо В итоге получилось 8 слоёв +Для повтора Получилось как-то каряво Резко появляется и так же резко изчезает

Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 30 апр 2010, 09:32

Про кадры.

Наверное, так будет нагляднее. Вот все кадры этого баннера из урока. Первый сверху, последний, соответственно внизу.

Изображение

Если обратите внимание, то последний очень похож на первый, поэтому, когда после последнего, по кругу будет снова показываться первый, то резкого скачка не будет.

Плавность показа обеспечивается, например, увеличением количества кадров в секунду. Этот баннер тоже можно сделать плавнее, но он учебный и мне это делать было лениво. И еще, чем больше кадров, тем больше "весит" файл.

Про юзербар

Сделать второй юзербар не сложно. Сначала фон с градиентом, потом слой с полосами. Потом на новом слое два шарика и текст. К шарикам можно применить Гауссово размытие. Потом световой блик, как в уроке "Как нарисовать прозрачную стеклянную кнопку на сайт".

Я думал про урок с юзербаром, но меня останавливает то, что я не вижу отличий между юзербаром и баннером, кроме размера, конечно. ;) Может просветите?

Аватара пользователя
zxcvvcxz
Сообщения: 60
Зарегистрирован: 19 апр 2010, 22:29
Репутация: 0
Откуда: SIBIR'-ALTAY
Контактная информация:

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

Сообщение zxcvvcxz » 30 апр 2010, 09:58

Нет я не чего не говорю урок отличный я сегодня заново его сделаю!
Но если уж быть честным -то предлогаемый плагин, который сохроняет в Jif - анемацию -портит итоговое изображение. :sorry:
Ну вот к примеру вот эту картинку я рисовал в Paint-e (Отдельное изображение) Изображение
А затем посредствам этого сайта сделал анимацию.http://gifsun.org/ru/animator/save
Я не призываю делать это постоянно просто охота зделать самому
А вот от пару бы уроков по юзер бару я бы всё таки не отказался! :)

Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 30 апр 2010, 10:11

Прикольная картинка! :Bravo:

А что такое Jif? Имелся в виду Gif?
Если так, то GIF не поддерживает полупрозрачность. Возможно вы сделали кадру в виде прозрачных слоев, которые должны были наложиться на первый кадр со слоем фона. Тогда такое поведение плагина вполне логично. :D Способ решения? формат PNG, кстати этот же плагин умеет делать и анимированные PNG.

Кроме этого, на этом сайте есть описание бесплатной утилиты UnFREEz, которая тоже собирает отдельные кадры в один анимированный GIF.

Ну, и конечно же можно воспользоваться онлайн сервисами. Спасибо за ссылку! :good: чем больше способов, тем лучше! :Yahoo!:

Аватара пользователя
zxcvvcxz
Сообщения: 60
Зарегистрирован: 19 апр 2010, 22:29
Репутация: 0
Откуда: SIBIR'-ALTAY
Контактная информация:

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

Сообщение zxcvvcxz » 30 апр 2010, 10:24

. Возможно вы сделали кадру в виде прозрачных слоев, которые должны были наложиться на первый кадр
Так и есть Но тогда я вобще не понял как тогда понять полупрозрачные слои :o Ну вот я так делал фон+текст -дублирую пременяю к нему прозрачность 10 сново дублирую и т.д в итоге они слои и получаются полупрозрачными :unknown: Или надо применять эти свойства только к тексту?
Вобщем ладно сегодня покраплю над этим ...

Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

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

Сообщение xmario » 30 апр 2010, 10:29

Не-е.. все делаете в принципе правильно. Просто, попробуйте сохранить даже просто в GIF (не анимированный), картинку, у которой плавный переход прозрачности... GIF умеет только да и нет, т.е. либо фон прозрачный, либо непрозрачный. А все потому, что GIF 8-ми разрядный, а PNG - 32-х. В PNG есть тоже 8 разрядный вариант, так он ничем не лучше GIF'а.

Когда будете экспериментировать с прозрачностью, то поймете, почему я сделал в баннере кадры не в виде прозрачных слоев, а каждый прозрачный слой кадра, наложил на фон. Т.е. каждый кадр у меня это непрозрачное полноценное изображение. См. рисунок выше.

Ответить

Вернуться в «Уроки для web-дизайна»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя