|
Главная / ШКОЛА НАДПРОФ / АЛЬХААФ — Школа Дизайна / Глава 8.
Глава 8
Логотип «ЛТ Терминал». Дизайн сайта «Промкраска». Банер проекта «Семинары Ш2Л». Анимировать банер.
Логотип «ЛТ Терминал»
Игуана:
То, что происходит в конференции, оказалось весьма полезным. К примеру, я уменьшила этот гиф, подглядывая в твое руководство по оптимизации размеров файлов. Плюс к тому у меня появился
ученик — я передаю дао рисования руками.
Высылаю варианты логотипа для компании «ЛТ Терминал», над которым думаю в данный момент. Это мой первый настоящий логотип, раньше я придумывала их только для зачетов в университете.
Заказчики пожелали, чтобы их новый логотип был похож на прежний — но не слишком, чтоб не было претензий. Я так поняла, что это какое-то отделение решило отпочковаться. «Похож, но не
похож» — это коан, и цвета оставались фирменные — белый и синий. А также, чтобы было два варианта написания логотипа — по-английски и по-русски.
Сначала я нарисовала несколько «технократических» вариантов. Потом мне показалось, что они скучноватые и «неживые» и я решила повеселиться — нарисовала тележку. Компания занимается хранением и перевозкой грузов — складская деятельность. Если ты сможешь что-нибудь посоветовать мне, будет очень хорошо.
Хааф:
Логотип — одна из самых интересных задач в дизайне. Нужно минимальными средствами передать МАКСИМУМ энергии. Нужно, чтобы логотип хорошо запоминался и легко идентифицировался. Передавал главное сообщение в сжатой форме. Кроме того, нужно чтобы логотип легко читался в любых масштабах и в любом окружении.
Поэтому логотип — это не «картинка». Это —«символ».
И рассматривать, и создавать его нужно с этих позиций. В частности, не хорошо делать в логотипе много мелких деталей. Не стоит использовать невыразительные, стандартные формы. Лучше применять сочные цвета, контрастные сочетания, но цветов должно быть по минимуму. Хорошо придумывать какие-то очень простые, но неожиданные стилизации и ходы. Логотип — это больше креатив и угар, чем непосредственно дизайн.
Игу, по твоим вариантам:
- Опять какашечки. Только прочитав твое описание, я осознал, что это тележка. Лучше так не делать.
- Очень много мелких деталей, размазывающих восприятие.
- Невыразительная, не характерная форма и композиция. Нет динамики.
- Двух цветов — черного и голубого — вполне достаточно, чтоб создать динамику, напряжение, энергию. Но твой способ их использования этого не дает. Лучше их распределить небольшим количеством четких крупных пятен.
Игуана:
Привет, о, Хааф. Я учла твои….ммм…. в общем, учла. Вот,что у меня получилось. Фирменные цвета — не голубой и черный, а голубой и белый. Т.е. черный — неясно. Я стараюсь не злоупотреблять им.
Я хотела, чтобы это было похоже на углы контейнеров. Складская деятельность, все же. Подскажи, пожалуйста, в какую сторону еще подумать. Спасибо.
Клейн:
Возьми первый в нижнем ряду или последний в нижнем ряду — и преврати их в след тигра, в отпечаток лапы.
Я хотела, чтобы это было похоже на углы контейнеров. Складская деятельность, все же. Подскажи, пожалуйста, в какую сторону еще подумать.
Отражать в товарном знаке (эмблеме) «образ деятельности компании» — совсем не обязательно. В общем-то, это даже — примитивный подход (как со стороны заказчиков, так и со стороны художников). Найди в интернет коллекцию товарных знаков и проанализируй их
какое-то количество на этот предмет. Привет, Игуана!
Хааф:
О! Я нами доволен. Привет, Игу!
Вот, что у меня получилось. Фирменные цвета — не голубой
и черный, а голубой и белый. Т.е. черный — неясно.
Я стараюсь не злоупотреблять им.
В исходном варианте логотипа у них есть черный. Предлагаю и тебе его использовать. Ибо «голубой и белый» означает «иключительно голубой», а одного цвета очень мало. Хотя и можно обойтись, в случае создания «крайне солидного» имиджа (см. например логотип Микрософта) или при использовании необычных геометрических решений (см. логотип Coca Cola).
Я хотела, чтобы это было похоже на углы контейнеров. Складская деятельность, все же.
«Углы контейнеров» не читаются. В принципе это не страшный недостаток, можно и не отображать, чем занимается компания. Главное — «энергетическое» ощущение. Но идея потерялась. Мне больше всего нравится правый верхний вариант. Он самый цельный. Чтобы сделать его лучше — можно:
- Сделать средний (или два крайних) кусочек символа черным.
- Взять более строгий и легкий шрифт.
Если решишь делать новые варианты, предлагаю тебе начать с придумывания метафоры, которую ты сможешь понятно изобразить и/или необычного визуального хода.
Игуана:
Привет всем. Привет, Хааф. В левом столбике — непохожие на старый логотип варианты. В правом — ну как-то. По крайней мере, квадратик и загогулину я оставила.
Хааф:
Мне очень нравятся все варианты! Единственный комментарий — в правом столбце надпись очень тяжелая и забивает собой значок. Можно попробовать ее облегчить (сделать поменьше? поиграть с расстояниями от значка до «ЛТ» и от «ЛТ» до «ТЕРМИНАЛ»?
поменять шрифт? перекомпоновать как-то?). Привет!
Дизайн сайта «Промкраска»
Катя:
Привет! Сайт фирмы «Промкраска» (торгует лакокрасочными материалами). Прошу сделать замечания.
- №20
- №19
Клейн:
20-й мне больше нравится — жестче, стройнее, масштабнее.
Хааф:
Привет, Катя, Клейн! Варианты — хорошие!
20-й мне больше нравится — жестче, стройнее, масштабнее.
А мне — 19-й. Он мягче, теплее, открытее. Более цельный и лучше сбалансирован по цветам. Но выбирать, конечно, нужно исходя из того, какой имидж хочет создать себе компания «Промкраска». Нижняя часть лучше решена в 20-м варианте. Она четко
проработана, не содержит необоснованных элементов и создает гораздо более сильное ощущение за счет аналогий с реальным миром. Граница с основным полем очень грамотно проработана. А если слева от белых надписей поставить какую-нибудь простую иконку, такого же цвета и,
соответственно, сдвинув все это вместе чуть правее, чтобы не уменьшилось поле — вообще будет высший класс.
Название краски лучше поставить на высоту логотипа «Промкраска». Сейчас оно ни к чему не привязано и повисает в непонятности. Мне пришлось совершить усилие, чтобы понять, что это название краски, и что оно не имеет никакого отношения к фотографиям в шапке.
Блоки текста: если ты сделаешь расстояние от заголовков до начала текста чуть меньше, а расстояние от конца текста до следующего заголовка больше — будет, во-первых, красивее,
во-вторых, появится более четкая логическая структура. Линейка навигации сплюснута, а подчеркивание ссылок в ней вылезает за ее край, на тень. В 19-м варианте надпись, вылезающая на фотографию, плохо читается. Если сделать красную полоску чуть шире — она, во-первых, лучше отчертит шапку, а во-вторых, написи на ней будут лучше смотреться и читаться. В 20-м варианте не очень хорошо решено с е-мэйлом, он засоряет шапку. Я бы убрал его вниз, к контактам. Затемнение в правом нижнем углу фоток смотрится «грязно», неаккуратно. Как будто его там забыли. Хорошо бы придумать что-то еще. Мне не очень нравится, как решено наложение фоток, красной полоски и белых областей в шапке, но конкретно сейчас ничего посоветовать не могу, нужно пробовать.
Банер проекта «Семинары Ш2Л»
Игорь:
Прошу заценить банер для проекта «СЕМИНАРЫ Ш2Л». Спасибо.
Клейн:
Мы еще не доросли до такого содержания. Вот когда начнем заниматься с корпоративными клиентами «Второй логикой» — тогда, да. Симпатичный банер. Даже, можно сказать, прикольный (в связи со Второй логикой). По поводу композиции шрифтов — к Хаафу.
Игорь:
ОК. Понял. Спасибо. Хааф, прокомментируй, пожалуйста. Привет!
Any:
Приветы. Осмелюсь тоже сказать. Понравился тон, тонкость и динамика. Но при всех достоинствах, баннер выглядит несколько «клипартно». От слова «clip art» — набор общедоступных бесплатных изображений, которые всем известны и использование которых в публичных материалах
не есть хорошо. Больно уж дядька бегущий — неродной.
Игорь:
Привет, Any! Да, с тобой согласен. Спасибо.
Any:
А потом я подумала — просто замечания делать негоже. Надо предлагать что-то. Так что — делюсь идеей. Тут, правда, картинки тоже не мои.
Игорь:
Всем привет! Предлагаю ЗАДАНИЕ для участников «Школы дизайна»и «Практикума Шухова».
ЦЕЛЬ: сделать банер для проекта «Семинары Ш2Л».
ЗАДАЧИ:
- Посмотреть банеры на главной странице сайта www.zen.ru.
- Сделать свой вариант банера для проекта «Семинары Ш2Л».
Размер банера: 131x77 пикселей. Формат: GIF или JPG. Объем файла: не более
6-ти килобайт.
- Отправить свой вариант банера в конференции «Школы дизайна»
и «Практикума Шухова».
СРОК: до 15.06.2004.
Самбул:
Привет!
Дождик:
Вот. Честно говоря, не успела доделать!!!
Светлан:
Привет! Высылаю свои первые банyеры. Мне понравилось. Не могу остановиться.
Клейн:
Классная идея баннер №2! Я ее подточил. Высылаю.
Привет, Самбул!
Хааф, я бы хотел анимировать этот банер. У него есть 5 слоев,
я бы хотел, чтобы они появлялись по очереди, складываясь в общую
надпись. Как это сделать простейшими средствами?
Вот. Честно говоря, не успела доделать!
Хорошая визуальная идея. Можно использовать для какой-нибудь
обложки книги издательства НадПроф. Привет!
Хааф:
Вот. Честно говоря, не успела доделать!
Привет, Дождик!
Мне очень нравится твое чувство цвета и пространства! Ты отлично ориентируешься в деталях. Чтобы делать еще лучше — тебе стоит дополнительно обратить внимание на более высокий уровень абстракции — пространство дизайна в целом. Как бы отходить на несколько метров и смотреть, что вышло целиком. Подробнее про уровни абстракции расскажу в понедельник.
Привет, Светлан! Рекомендую обратить внимание на то, как ты работаешь с цветами. Ты их совсем не боишься и это хорошо! Но их, все же, надо как-то подбирать друг к другу.
С точки зрения дизайна мне больше всего нравится вариант под номером 5, если с него убрать желтые и синие плашки и надпись «Вторая Логика». Но тогда людям не в теме будет непонятно, что это за фигня, Ш2Л. Нужно придумать какое-то иное решение, как это донести.
Маша:
Привет, Хааф! Я собиралась просто в первое время понаблюдать за процессом, поскольку рисовать не умею, фотошопа не знаю и т.п. Но, как оказалось, дизайн — штука очень заразительная. Поэтому высылаю свой первый эксперимент.
Татьяна Кузик:
Привет! Кажется, я немного торможу. Надеюсь, еще не очень поздно. В процессе изготовления баннеров выяснилось, что я забыла то, чего толком не знала (Фотошоп, в смысле). Спасибо, что заставили вспомнить. Что касается гениальных идей, то меня они посещают во время катания на качелях или на велике.
Анимировать банер
Хааф:
Хааф, я бы хотел анимировать банер baner_Emc.gif. Как это сделать
простейшими средствами?
Самый простой способ — Adobe ImageReady. Эта программа входит в поставку Adobe Photoshop. Там, в общем, не сложно, достаточно создать несколько кадров на панельке анимации и в каждом кадре
включить/выключить нужные слои. Если не разберешься — я готов встретиться и показать.
Я поставил себе ImageReady, но у меня старая версия, что-то может немного отличаться. Вот подробная инструкция как делать анимированные баннеры:
- При установке Фотошопа есть опция, позволяющая установить на компьютер вместе с ним программу ImageReady. Если она установлена — ее иконка должна быть в меню. Пуск рядом с самим Фотошопом. Если этой программы на компьютере нет — нужно запустить дистрибутив Фотошопа и установить её.
- Открыть psd-файл баннера в ImageReady.
- На экране, внизу слева должна быть открыта панелька «Animation». Если ее там нет — она включается в меню Window -> Show Animation.
- На этой панельке, нажимая на иконку изображающую чистый лист нужно создать столько кадров, сколько планируется использовать.
- На этой же панельке надо выбрать по очереди или все вместе (с клавишей Shift) кадры и установить им задержку в секундах, щелкнув по цифрам под изображением кадра. Задержка может быть разной для разных кадров.
- Теперь нужно по очереди выбирать созданные кадры на панельке Animation и для каждого скрывать и/или показывать нужные слои. Делается это точно так же, как в Фотошопе, на панельке Layers. Слои можно также двигать отдельно в каждом кадре.
- Теперь анимация задана. Осталось указать ей параметры сжатия. Это делается на панельке Optimize (Window -> Show Optimize). Параметры точно такие же, как в Save for Web в Фотошопе. Формат нужно выбрать обязательно GIF, только он поддерживает анимацию. В случае с баннером, который ты хочешь сейчас анимировать, можно все оставить по умолчанию, т.к. в нем мало цветов и все будет сделано автоматически.
- Чтобы сохранить результат трудов нужно выбрать в меню команду File -> Save Optimized… и в открывшемся окне нажать кнопку «Сохранить».
- Можно также сохранить настройки анимации в исходнике-psd,выбрав обычную команду Save.
- Всё.
Клейн:
Банер «Е = Ш2Л». Привет!
Самбул:
Клейн, а что такое Е?
Клейн:
Есть такая формула:
Е = mc2 (е равняется м, ц квадрат). Выведена Эйнштейном. "Е" — это полная энергия. "М" — масса объекта. "Ц" — скорость света (300.000 км/сек). «Квадрат» — это значит «во второй степени». Формула означает: Если полностью перевести кусок какого-нибудь вещества в излучение (поле), то полная энергия "Е", которая при этом выделится равна: Е = mc2 Полнее не бывает! Самая полная энергия, заключенная в веществе! Предел энергии для этого куска вещества! Поэтому: формула полной энергии для человека выглядит так:
Е = ш2л
Очень просто похоже на то, что в свое время вывел Эйнштейн. И, в общем-то, на ту же тему. Привет!
АЛЬХААФ — Школа Дизайна
главная страница НадПроф
Сутра помоста Шестого Патриарха
Практикум Шухова
Школа Делового Петрова
Главы Школы Дизайна
Глава 1.
Вступление и открытие.
ЗАДАНИЕ #1: Выбор навыков и проектов.
Командная работа: Дизайнер и Менеджер.
Глава 2.
Оптимизация картинок.
Обрисовка фотографий и иллюстрация.
Глава 3.
Логотип для рекламного агентства «Brand stayer».
Глава 4.
Композиция.
Теория цвета.
Уровни абстракции.
Кубик Рубика и тупики.
Об образах и ассоциациях.
Смотрите много красивых работ.
Глава 5.
Баннер «Практикум Дизайна».
Глава 6.
Человечество уже располагает опытом по вашей теме.
Конец семестра.
Полезные ссылки.
Преподаватели.
Естетическое преступление.
Глава 7.
Преобразование фотографий из цветных в черно-белые.
Замыливание взгляда.
Генерация идей.
Корпоративная открытка, пример работы: идея… иде я нахожусь?
Можно ли использовать несколько почти похожих вариантов?
Глава 9.
Типографика и полезные ссылки.
Любителям каллиграфии.
Про логотипы.
Красивые ссылки.
Смешные трёхмерные мульты про карму.
Как рисовать людей.
Типографика и полезные ссылки
Глава 10.
Еженедельные дизайнерские игрища
Глава 11.
Дизайн сайта от и до. ЛИТРЕДАКТОР.РУ
Глава 12.
Серия Психотропных Тренингов по креативу (Чертова дюжина Хаафа)
Свободное ассоциативное мышление. Попросту говоря — Гон
Выбор и переключение состояний. Гон гону рознь
Модальности ассоциации: повествование, визуализация, звук, эмоции и т.д.
Восприятие информации «ощущениями». Загрузка данных и точная настройка на цель
Создание сложных объектов («реальностей») из пустоты. Образное мышление
Целостность (consistence) и диапазон (scope) проекта
Основы системного мышления (уровни абстракции, связи, процесс/система). Разрешение конфликтов
Общие структуры в сценариях, режиссуре, дизайне. Способы думать об этом как о системах
Создание структур, моделей мышления. Креатив. Think different
Почему ограничения это хорошо, как они помогают креативу, и почему без них креатива нет
Работа в команде. Ограничения и сильные стороны членов команды. Мозговые штурмы
Функциональные требования. Тренды. Симуляция процессов и систем в голове
Собираем всё вместе
Отзывы участников
История Одного Креативщика
|
