Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Новый проект Юрия Мороза" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Черный ящик. Эпизод первый: от компьютера - к бизнесу
| Информационный Канал Subscribe.Ru |
Черный ящик. Эпизод первый: от компьютера - к бизнесу
Стиль "Чёрного ящика"
или
кнопку - своими руками
Сегодня у нас день проверки - перед стартом нужно убедиться, что черный ящик действительно работает.
Для наземных испытаний я выбрал достаточно простую операцию - создание кнопки с названием проекта.
Что такое кнопка?
Это небольшой прямоугольный рисунок размером 88 на 31 точку. Такие часто используется для обмена с другими сайтами. (Мою кнопку ставят на другой сайт и оттуда идут посетители ко мне, а у меня кнопка того сайта направляет туда моих посетителей.)
Как и с кем лучше обмениваться кнопками - это совершено особый разговор. Статей и заметок на тему раскрутки сайтов написано уже слишком много.
Итак приступим.
Вводная. Дано:
адрес сайта: http://blackbox.mailru.com
код рассылки: http://subscribe.ru/catalog/comp.soft.prog.blackbox
название проекта: Чёрный ящик. Эпизод первый: от компьютера - к бизнесу
Инструменты: уже далеко не первой молодости компьютер с только что переустановленной Win98SE, MS Office 2000 и Adobe Fotoshop 6.0
Поехали.
Есть два основных распространенных в сети формата графических файлов: jpg - для больших полноцветных картинок и gif - для маленьких, где есть только несколько цветов. Картинки gif бывают: статические (неподвижные) и анимированные (движущиеся).
Наш рисунок должен выделяться и привлекать внимание,
а внимание привлекает то, что необычно, что выделяется на фоне, что отличается от окружающих деталей.
Что получается - если кнопка будет вставлена в обычную текстовую страницу, то она должна быть яркой, и должна двигаться.
Человек конечно не лягушка и может заметить даже что-то неподвижное.
А если наоборот, попадет наша кнопка в стадо других кнопок? Тогда что - слиться с фоном и не шевелиться?
К тому же слишком яркие цвета могут не понравиться веб-дизайнерам других сайтов, и правильно - такая деталь отвлечет внимание посетителей и они не прочитают то, что им уготовано...
Оставим ненужные домыслы, будем делать ярко и, возможно, с движениями.
Что изобразить на кнопке?
Варианты такие: текст или картинку(и): - сменяющиеся, движущиеся, с разными эффектами.
Какой будет текст - понятно (не зря выбирал длинное название для проекта).
А если рисунок?
Вот это проблема.
Одно дело набросать какую-нибудь схему из блоков со стрелочками, а вот сделать что-то высокохудожественное, тем более на очень малом пространстве...
Вспоминаю, что как-то в анонсах видел рассылку - что-то вроде "как стать художником", стоп, сейчас поздно им становиться, сначала надо кнопку сделать.. ;)
Что же тут нарисовать? да и как его нарисуешь этот черный ящик? как можно будет понять что это именно он?
Вывод: прийдется давать текст!
Посмотрим какие-нибудь руководства.
На последней чистке винчестера весь этот хлам я удалил :( Записанная матрица почему-то не читается на моем CD-ROM'e:(( Диск с завлекательным названием "Как делать рекламу" тоже не виден :(((
Что делать?
Бросить все и заняться чисткой CD-ROM'а от пыли?
Жарко. Посмотрим по телевизору - сколько градусов сейчас в тени - 35? 38?
Жареное солнце больших городов - в тему поет Чичерина.
Да, тут и пиво не поможет.
Подкралась мысль - бросить все это, вспомнить знакомых девочек-дизайнеров, зайти в гости, там заодно и нарисуют все что надо :)
Но уж не терпится получить результат, и все-таки интересней самому попробовать - да и по идеологии проекта надо быстренько сварганить своими руками, а не к специалистам обращаться.
Итак, нужны картинки, но где же их взять? Помню, пробегали как-то мимо сборники клип-артов на четырех, на десяти дисках - вот их бы сейчас сюда!
Ладно, в интернете, как в Греции все есть.
Включаю модем, звоним, звоним... - соединиться не можем. 8(
Которые тут временные? Караул устал!
Закончились деньги на интернет-карточке ;(
Что ж, вот и пришло, когда совсем не ждали, это "обострение противоречия": нужны картинки, а есть только текст.
Эврика! Есть же шрифты с картинками - wigdinds и webdings
(все помнят сентябрьские шуточки с номерами самолетов?)
Отлично, начинаем искать и выбирать то, что нужно.
По привычке пользуюсь Word'ом, меню Вставка/символ.
Ура - здесь есть и компьютер и сеть, мышь и клавиатура, что-то похожее на принтер и даже мобилка (это уже лишнее).
Направление "от... - к ..." обозначим стрелочкой.
Смотрим дальше - теперь надо нарисовать бизнес!
Что такое бизнес? это что-то!
Нет, картинка с виселицей не подходит ;)
А вот то, что может подойти:
Да, карты мира, дороги к дому и т.д. - это абстракция. Какая первая ассоциация со словом бизнес? - конечно деньги! берем знак доллара.
Записываем формулу
Переводим обратно с языка образов на язык слов и выражений.
Получаю фразу и стойкое ощущение: "продай свой компьютер!"
А если тот кто сидит / смотрит - за чужим компьютером? Это что получается, призыв утащить комп с фирмы и продать его? Что-то тут не то.
Может усилим тему бизнеса? Покажу, что надо получать деньги постоянно и много. Рисую мешок с деньгами, нет, лучше два мешка
Так, здесь читается - "продай, в натуре, за большие бабки!".
Вывод: бизнес - это не только деньги (по крайней мере для меня ;).
Так что же такое этот бизнес?
Бизнес - это постоянное движение. В правильном бизнесе это всегда движение вперед, движение вверх. Бизнес - это успех!
Так и запишем:
Вот она, наша формула! (не формула изобретения, но тоже неплохо)
Теперь добавляем текст - пишем сверху название и ...
Но что это, что? Вместо букв на экране какие-то кракозябры!
Опять вмешательство темных сил? внешних обстоятельств? Бред какой-то!
А, понятно, это у шрифтов не тот кодовый набор, нужно изменить на кириллицу.
Как с этим бороться - не помню (или не знаю?), метод научного тыка (и вытыка) дает отрицательный результат (который тоже, конечно, результат, но делу от этого не легче).
Скопировать и вставить как текст - тоже не помогает. Что ж, будем вставлять символы как графику.
Вновь обратимся к простейшему средству - Word'у от тов. Билла Гейтса. А может в нем и обработаем рисунок, обойдемся без Photoshop'а?
Выбираем шрифт, подбираем цвета, а есть еще и WordArt.
Меню Вставка/рисунок/объект WordArt.
Опять те же грабли - так тщательно подобранные картинки-символы не отображаются!
Оказывается, для текста в WordArt'е можно использовать только один шрифт.
Хорошо, делим на две части. Ай-яй стрелка-то от другого шрифта - меняем ее.
Подбираем эффекты, пусть цвет будет ярким - желтым, а фон - светлым - голубым
Смотрим, что получилось
Конечно не шедевр, но уже что-то.
Теперь уменьшаем размер до нужного и...
Разве можно тут что-то разобрать? :(
Надо что-то в консерватории подправить.
С самого начало нужно было помнить про размеры изображения.
Что делать? - на статической картинке всю формулу не запишешь - слишком мелко.
Будем делать динамическую картинку.
Изучение особенностей формата анимированного gif'а отложим на когда-нибудь потом, а сейчас надо выяснить, чем же они делаются.
Была тут в архиве какая-то утилита ... Не эта, и не эта, и не эта...
А что Photoshop?
Ура! как я мог забыть - здесь есть программа Adobe ImageReady - специальная для этого!
Теперь надо продумать - как разделить формулу по кадрам.
Будем отдельно показывать "откуда" и отдельно "куда".
Тогда можно будет разобрать изображение.
Обязательно в отдельном кадре дадим заголовок.
Рисунок "бизнес" расшифровывается совсем не так однозначно, придется повторить текстом, тогда напишем текстом и "от компьютера".
Для закрепления материала покажем всю формулу целиком.
Время показа выберем на глазок - не слишком медленно, чтоб не успел отвлечься, но и не слишком быстро - чтоб разобрался.
По-хорошему, надо бы поэкспериментировать с этими временами, но это все потом.
Начнем рисовать. Сначала выберем цвет фона.
Какой цвет у настоящих черных ящиков? - оранжевый, и это наизусть уже знает каждый, кто слушает новости!
Когда вставляем новый слой, он почему-то становится видимым во всех кадрах. Где это отключается?
Не очень удобно подбирать шрифты, копировать, а потом масштабировать - все выглядит как-то не так.
Чёрный ящик пишем с буквой Ё. Вообще, совершенно напрасно забывают эту букву - она не просто показывает ударение и произношение, но и делает текст более читаемым, а в нашем случае - ещё и привлекает к нему внимание.
Яркие детали рисуем желтым, контраст дает черный цвет.
Текст "от компьютера" если сжать по горизонтали выходит неразборчивым - повернем его на диагональ, под углом.
Картинка "бизнес" из трех элементов выходит слишком сложной - разделим ее и сделаем два варианта.
В первом еще подправлю график - пусть он идет вверх! а не колышется, как в исходном рисунке
В последнем кадре надо как-то выделить символ успеха - кубок.
Пусть он станет светящимся, добавляю лучи света.
Может такая неочевидная замена (график на кубок) привлечет дополнительное внимания того, кто будет смотреть на кнопку?
Все почти готово. Теперь то, что нарисовали, нужно сохранить
Сохраняем результат в оптимизированном виде. Если брать только два цвета, то теряется желтый. С тремя цветами не очень хороша граница оранжевый-черный, добавим еще чего-нибудь промежуточного.
Итого - четыре цвета.
Картинка занимает всего 3071 байт. Замечательно! цель достигнута.
Конечно, сколько-нибудь "продвинутые" дизайнеры сейчас могут сказать мне, что все это сделано не на "высоком профессиональном уровне", и надо было лучше подобрать цвета и текст сделать более контрастным, а на рисунках убрать мелкие невидимые детали, добавить красочные эффекты и проч. И надо было заказать такую работу за недорого, а еще лучше - у них же за дорого комплексный дизайн и т.д.
Но видимая "самодельность" кнопки - это совсем не недостаток, а наоборот - достоинство.
Должен быть дополнительный полезный эффект - показать, что это не PR-акция какого-нибудь нового МММ, и не фирма какая-то пытается завлечь на свой сайт чтобы что-то продать. Такая кнопка должна вызвать доверие и даже долю симпатии, а значит возрастут шансы прихода новых людей. Посмотрим, насколько это оправдается.
Да, потрачено очень много времени - больше чем полдня, но теперь я лучше разбираюсь в такой мелкой (но важной) графике, да и заготовки пригодятся для следующего раза.
Заканчиваем. Я не описывал здесь мелкие технические детали - клавиши, операции с инструментами, работа со слоями и проч. - им здесь не место.
Первый блин должен быть комом!
Очень желательны ваши отзывы - как улучшить и сделать интересным/удобным для восприятия такой поток сознания. :)
Ведущий проекта -Алексей
Связаться со мной можно по е-mail: blackbox@mailru.com
Внимание! Все (или часть того), что вы напишете, может быть использовано для/за/против вас в рассылке. Если вы не желаете, чтобы ваше письмо попало в рассылку, укажите в теме письма "секретно".
Для всех, кто еще не подписался - форма быстрой подписки:
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
