Как делать ХОРОШИЕ баннеры.

[

]

Страница 1 из 1 1
Модератор форума: Хмурая_сова

Как делать ХОРОШИЕ баннеры. (Внимание)

Как делать ХОРОШИЕ баннеры.

ПИВЗ

Дата: Четверг, 12 Май 2011, 22:29 | Сообщение # 1

Аристократ

Баннер... Почему-то большинство сайтостроителей считают что баннер - это второстепенное. Но как они ошибаются! Я пишу данный урок не из чужих готовых, но добросовестно-переделанных, а из своего личного опыта.

Принцип 1.
Хороший баннер - заметный баннер.
Но как разгуляться, если размер у всех 88 на 31 пиксель?
Ответ прост. Оригинальный дизайн. Для этого нужно немного - сделайте несколько баннеров. Один - для светлых сайтов, другой - для темных. Прелесть заключается в том, что светлый баннер необходим для темных дизайнов, а темный - ну вы догадались.
Ваш баннер должен быть заметным.
Но не слишком навязчивым.
Если речь идет о магии, сделаем баннер с замахом на магический. С эффектом фильма. Сделаю нечто мрачно-готичное.
Исходники:
Любая картинка. ( При маленьком расширении или уменьшении она не должна сильно терять в качестве.)
Клипарт. (Любой)
Прикольный, но читабельный шрифт.
Кисти.
Что у меня есть:

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

Итак. Приступим.

Подпись

Не бойся своих желаний! Бойся моих!
***
- Какие Ваши любимые мифические персонажи?
- Сон, спокойствие, адекватность.
***
Преобразую никотин и кофеин в программный код.

Послать сову

ПИВЗ

Дата: Пятница, 13 Май 2011, 01:16 | Сообщение # 2

Аристократ

Этап первый. Создайте документ с расширением 88 на 31 пиксель.
Фе! А что туда влезет? Совсем мааасенькая дырочка! Ну, я расскажу маленькую тайну.
Тайна первая.
Используйте качественный клипарт. Пиксельарт прямо создан для подобных экспериментов.
Итак, ставим фон.

Я его сделал контрастнее и темнее. Так смотрится лучше.
Спецэффект достигается путем резкого увеличения или уменьшения ракурса. Это - один из приемов.
Поставьте баннеру тоненькую рамочку - это немного сделает его четче.

Подпись

Послать сову

ПИВЗ

Дата: Пятница, 13 Май 2011, 01:21 | Сообщение # 3

Аристократ

Второй слайд я сделаю, увеличив ракурс, сфокусировав внимание на луне.

А потом - сделаю еще проще! Я уменьшу картинку на 50%.

Второй прием кино - камера медленно ползет вниз.
Ну и мы воспользуемся этим делом.

Но как же моя красавица Изабель? (Я ее решил назвать для удобства красивым именем, ибо у нас она - главная актриса.

Подпись

Послать сову

ПИВЗ

Дата: Пятница, 13 Май 2011, 01:33 | Сообщение # 4

Аристократ

Что я имею?
Два минибаннера без подписи, но с эффектами.

Я специально во втором баннере поставил разделителем слово "Баннер"

Пункт первый:
Не используйте других эффектов кроме fade или обыкновенного перехода. Никаких часиков, промоток, уголков. Тогда теряется ощущение фильма. В редких случаях это возможно. Например книга -уголки.
Пункт второй:
Приблизительное время действия 0,2 сек на каждый переход. Если кадров много, то можно 0,1 сек.

Подпись

Послать сову

ПИВЗ

Дата: Пятница, 13 Май 2011, 01:48 | Сообщение # 5

Аристократ

Усложним задачу!
Добавим черные завитушки. Я применил Invert, чтобы сделать их белыми и четкими.
Суть анимации такая:
Делаем завитушки все ярче, а камера сползает вниз. Завитушки немного отвлекают внимание.

Результат:Я взял промежуток в 0,5 сек., чтобы вы рассмотрели суть:

Прикола ради, я использовал одну анимацию несколько раз в разной очередности

Подпись

Послать сову

ПИВЗ

Дата: Пятница, 13 Май 2011, 01:53 | Сообщение # 6

Аристократ

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

Подпись

Послать сову

ПИВЗ

Дата: Пятница, 13 Май 2011, 02:02 | Сообщение # 7

Аристократ

Узор прост:

Результат:

Подпись

Послать сову

Арианна

Дата: Пятница, 13 Май 2011, 18:38 | Сообщение # 8

Леди Малфой/Мисс Хогсмит 2012

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

Подпись

Каждому воздастся по его вере. (с)

Береза и волос единорога 13 дюймов

ПИВЗ

Дата: Суббота, 14 Май 2011, 21:32 | Сообщение # 9

Аристократ

Пришло время для еще одного интересного урока:)
Для этого мне нужна моя черная роза.
Баннер получился женским, но я имел дело с различными заказами:)
Скопируйте ее в другой слой и поменяйте ему цвет, то есть, как сказала Алетиш, сделайте "цветокоррекцию"

- исходник

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

И так до конца... Я не буду показывать еще два слайда, но в суть вы уловили:)

Подпись

Послать сову

ПИВЗ

Дата: Суббота, 14 Май 2011, 21:38 | Сообщение # 10

Аристократ

И... Вуаля!
Я, как и Алетиш, пользуюсь другой программой, которая удобна для анимации.
Поэтому, показываю порядок:

И результат:

Вы сами не замечаете, как роза меняет цвет.

Подпись

Послать сову

Как делать ХОРОШИЕ баннеры. (Внимание)

Страница 1 из 1
1