Конструирование и дизайн тары и упаковки: Методические указания к самостоятельной работе студентов

Федеральное агентство по образованию ВОСТОЧНО-СИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ

Методические указания составили преподаватели кафедры «Технология и дизайн упаковочного производства»: Ханхасаев Г.Ф., Беликова Е.В., Боронцоев А.А. Указания предназначены для студентов очной и заочной формы обучения специальности 261201 «Технология и дизайн упаковочного производства». Рассмотрено и утверждено на методическом семинаре кафедры ТДУП.

МЕТОДИЧЕСКИЕ УКАЗАНИЯ к самостоятельной работе студентов «Конструирование и дизайн тары и упаковки»

Ключевые слова: логотип, визитка, анимация, товарный знак, композиция, имидж, деловая информация, баннер.

Редактор Стороженко ТА

Подписано в печать 19.05.2006. Формат 60x84 1/16. Усл.п.л. 0.93. Уч.изд.л. 0,7. Тираж 50 экз. Заказ №76. Издательство ВСГТУ, г. Улан-Удэ, ул. Ключевская,40в. Улан-Удэ 2006

Лабораторная работа 1 Тема: «Разработка товарного знака» Товарный знак - это знак, который представляет вашу фирму или организацию, и поэтому от того, как он выглядит, зависит следующее: поможет он вам в продвижении бизнеса, или, наоборот, повредит. Конечно, нельзя сказать, что все дело в маленьком значке, в конце концов, это товар приносит популярность товарному знаку , а не наоборот . Но тем не менее , качественный товарный знак, узнаваемый и не вызывающий негативных ассоциаций, занимает ведущую роль в процессе создания фирменного стиля. По внешнему виду все товарные знаки разделяются на три основные группы: 1. Только текст. 2.Только знак. 3. Комбинация знак + текст. Только текст Логотип изготавливается путем написания названия фирмы/товара выбранной шрифтовой гарнитурой. Данную группу можно разделить на две подгруппы: классическое исполнение и декоративное исполнение. Написать название фирмы выбранной гарнитуройсамый простой и быстрый способ изготовить логотип . Выделить свой логотип можно: 1 .Высоким качеством продукции или услуг. 2.Высокими затратами на рекламу. 3.Использованием необычной шрифтовой гарнитуры. Только знак 3

Второй способ создания логотипов - создание знака. Как правило , это название фирмы и готовой марки , превращенное в знак. Заметим, что данный вариант реален, только если название фирмы не длинное - как правило 3-4 буквы и менее. Слово «San», например, легче превратить в знак, чем название «Украина-Русь». Текст + знак Этот тип логотипов объединяет в себе два предыдущих и является наиболее распространенным. Во первых, использование изобразительного элемента в логотипе делает его более запоминающимся и, во - вторых, позволяет сделать длинное имя фирмы визуально более привлекательным Для логотипа важен вопрос его будущей «прописки». Если логотип предполагается использовать, например, на упаковке медпрепаратов , то мелкие /тонкие элементы логотипа визуально превратятся в серое пятно , а использование шрифтов с засечками или декоративных шрифтов сделает текст практически нечитабельным. И наоборот, на крыше высотного здания или на вывеске магазина лучше будут смотреться классические или декоративные шрифты с засечками, а также найдут свое применение различные узоры или прочие подробные детали. Композиционный момент Неправильная композиция - одна из основных причин, по которой внешний вид логотипа может вызвать некий дискомфорт. Главное , чтобы логотип был уравновешен , не «заваливался». Цвета и эффекты Что касается использования цветов в логотипе , то лучше не конкретизировать их. Черно-белый логотип

4

впоследствии можно будет решить в любом оформлении, он отлично разместится на любом поле Если же вы твердо решили раскрасить логотип, используйте как можно меньше красок (как правило, до трех), причем краски должны быть контрастны друг к другу и к предполагаемому фону. Цвета в логотипе несут не только декоративную нагрузку , но и ассоциативную . Если деятельность организации связана с морем, имеет смысл задействовать «морские» цвета, синий, голубой, лазурный или их сочетания. Способы создания логотипов Самый простой способ сделать логотип нам уже известен - это обычный набор текста выбранной гарнитурой. И основным недостатком этого способа , как мы уже говорили , является его неоригинальность . Улучшить положение может Способ одной буквы, заключающийся в том, что одну любую букву в слове названия нужно сделать отличной от других размером и ( или) цветом , и ( или) гарнитурой и (или) чем - либо еще. Способ слияния букв, который заключается в том, что две и более соседних буквы естественно переходят одна в другую. Способ заполнения букв(ы), который заключается в том , что буква ( буквы ) слова заполняются некоторой заливкой: от простой текстуры до рисунка. Как говорилось выше, лучше всего для заливки подходят буквы ( как правило плотных гарнитур), обладающие большой площадью закраса: Q, О, D, I. Способ втискивания в фигуру , заключающийся в том, что текст помещают внутрь геометрической фигуры, как правило, правильной, т.е. симметричной и по горизонтали, и по вертикали. 5

Самыми популярными из таких фигур являются круг и эллипс, менее популярен квадрат, практически не встречаются многоугольники с количеством углов более шести. Способ первых букв (способ аббревиатур ). Заключается этот способ в том, что в качестве знака, сопровождающего текст, выступает обыгранная первая буква названия организации либо обыгранные первые буквы, если слов в названии несколько. Ассоциативный знак. Знак, содержащийся в логотипе, призван вызвать положительные и не вызвать отрицательных ассоциаций. Поэтому, прежде чем включить какой - либо знак в свой логотип, подумайте, а не вызовет ли он отталкивающих ассоциаций, например, у людей другой национальности, политических взглядов или вероисповедания. В качестве удачного во всех отношениях ассоциативного знака можно привести логотип LG Electronics. Улыбающееся лицо не может вызвать отрицательных эмоций. Рассмотрим несколько примеров логотипов . Попробуйте по поставленным задачам создать свой оригинальный логотип. 1. Задача: фармацевтическая фирма, специализирующаяся на производстве глазных капель. 2. Задача: производитель упаковки 3. Задача: Фирма, занимающаяся компьютерами + Интернет.

6

Лабораторная работа 2 Создание визитки Визитная карточка - это один из атрибутов имиджа, будь то человек или фирма. Это как раз один из элементов одежки, по которой встречают. Формат . Жестких нормативов в выборе формата визитной карточки нет, но наиболее привычен и популярен размер 50x90 мм. Визитка может быть как горизонтальная, так и вертикальная. Что касается формата, возможно создание визитки со сгибом или большого формата - это только выделит вас из общей массы, конечно при условии, что визитка не будет при этом неаккуратной и безвкусной. Информация . Обычно на визитке содержится информация о фирме и о ее представителе. Информация о владельце визитки состоит из трех блоков - фамилия, имя, отчество; должность или профессия; контактная информация. Информация о фирме в такой визитке содержится в логотипе, фирменном стиле оформления и, конечно же, обязательно должна указываться деловая информация: адрес, телефон, факс, телекс и т.д. Иногда на визитке размещают рекламный слоган фирмы, направление деятельности. Шрифты. Так как в визитке информация содержится большей частью текстовая, остановимся на выборе шрифта и написании. Ввиду того , что площадь визитки невелика , вам придется набирать текст мелким шрифтом, что практически исключает возможность использования в визитных карточках шрифтов с засечками . Так же стоит иметь в виду , что увлекаться большим разнообразием гарнитур не нужно 7

визитка будет выглядеть неаккуратной. Так что, лучше ограничиться одним шрифтом ( максимум двумя, если второй входит в логотип или фирменный стиль), а выделять особо важную информацию можно, изменяя кегль и начертание шрифта. То, как написать ФИО ( строчными или прописными, полужирным шрифтом или обычным) зависит, прежде всего, от длины фамилии, имени и отчества. Допустимы, например, такие написания: ФАМИЛИЯ Имя Отчество

Фамилия Имя Отчество

А вот так нежелательно: ФАМИЛИЯ ИМЯ ОТЧЕСТВО Персона - это не только ФИО, но еще и служебное положение, профессия, звание. Поэтому шрифтовое решение должно быть одинаково хорошо для всей информации. Вот например использования разных начертаний и кеглей одного шрифта: ФАМИЛИЯ Имя Отчество Должность Звание Набор текста. При наборе текста визитной карточки нужно учитывать многочисленные типографские традиции, сложившиеся еще до появления компьютеров. 1. Пробелы ставятся: после точки, точки с запятой, 8

двоеточия, вопросительного и восклицательного знаков ( и их сочетаний ), в конце фразы , предложения , после закрывающейся скобки , слэша и закрывающей кавычки ; перед открывающей скобкой, кавычкой и многоточием ( если оно открывает предложение). 2. Пробелами с двух сторон окружается длинное тире (в английском не окружается). Текстовые выделения . Правила использования курсивного или полужирного начертания: 1. Кавычки должны быть того же начертания , что и выделенный текст. 2. Скобки, окружающие выделенный фрагмент, имеют очертание основного текста. 3. На стыке прямого и курсивного текстов скобки всегда прямые. 4. Знаки препинания , следующие за выделенным фрагментом, остаются прямого начертания. Логотип. Один из главных составляющих элементов визитной карточки - логотип. Вся композиция строится на нем. Принципы сочетания элементов логотипа должны быть в единстве с элементами визитки. Это самая сложная часть работы над визиткой - вписать в композицию логотип. Поэтому начинать нужно именно с него и, внимательно изучив его форму, нешрифтовые элементы, перейти к общей композиции визитки. Важно помнить о законах композиции и не стремиться заполнить текстом и рисунками все пространство визитки свободное пространство ( воздух) также является средством оформления. Рассмотрим теперь этапы создания простой визитки. 1. Первым делом размещается логотип. Мы решили, что главную роль будет играть фирма, а не персона, поэтому

логотип достаточно большой 2. Теперь фамилия , имя, отчество и должность представителя фирмы, для которого мы создаем визитку. Для этой информации выбран противоположный логотипу угол, дабы «уравновесить» визитку. 3. Далее - деловая информация. Она зрительно разделена на «реальную» и «виртуальную ». Это сделано для лучшего восприятия информации. 4. Заключительный штрих - направление деятельности фирмы. Здесь использован прием расположения текста вдоль кривой. Композиционно кривая позволила заполнить пустое пространство на визитке и уравновесить ее, т.к. в правой части скопилось очень много информации. Лабораторная работа 3 Создание анимированного изображения Программа ImageReady во многом уступает программе Photoshop. Большинство средств ImageReady представляют собой усеченные по возможностям средства Photoshop. Но с другой стороны, ImageReady имеет ряд отличительных особенностей, касающихся работы с изображениями для Веб, именно с этой целью и создавалась данная программа. Перед тем как начать изучение этих возможностей , сделаем небольшое замечание . Вы можете переключаться между программами, редактируя изображения поочередно в каждой из них. Для такого перемещения из Photoshop в ImageReady используется кнопка Edit in ImageReady (Редактировать в программе ImageReady), расположенная на панели интрументов программы Photoshop , для обратного 10

9

перемещения - кнопка Edit in Photoshop (Редактировать в программе Photoshop), находящаяся на панели инструментов программы ImageReady. А теперь перейдем к практике. Программа ImageReady обладает средствами создания анимированных изображений и использует для этого специально разработанный формат GIF89a. Вам, наверняка, приходилось сталкиваться с такими изображениями при просмотре веб -страниц . Итак , попробуем создать анимированный баннер. Будем использовать готовые изображения из системных файлов, поскольку в данный момент нас интересует только разработка анимации. При этом проще и удобнее подготовить изображения в Photoshop, а остальное доделать в программе ImageReady. 1. Запустите программу ImageReady и откройте файл Weather.psd. Он расположен в папке ImageReady Files, находящейся в папке Samples, которой вы постоянно пользовались. 2. Этот документ содержит практически все необходимые для работы изображения, добавить нужно совсем немного. Посмотрите на палитру Layers (Слои). Шесть слоев ( по порядку от слоя partly cloudy до слоя sunny) содержат изображения значков различных состояний погоды . Слой PARTLY CLOUDY включает информацию об одном из • состояний погоды в текстовом виде. В него должны быть внесены некоторые изменения. 3. В палитре Layers (Слои) активизируйте текстовый слой PARTLY CLOUDY и замените текст названием какогонибудь города ( выберите, например PARIS) - наш баннер будет показывать погоду в шести различных городах. Задайте для текста какой-нибудь более яркий цвет. 4. Создайте пять копий текстового слоя PARIS и в 11

каждом из этих слоев введите название другого города, скажем LONDON, ATHENS, BRUSSELS, ROME, OSLO Итак, у вас есть шесть слоев с названиями различных городов. Отключите просмотр всех слоев, кроме слоя PARIS. 5. Далее переходите к заданию значений температуры. Два слоя отображают дневную и ночную температуры (60° и 30°). Сделайте из них один слой, скопировав текст из одного слоя в другой , а затем удалите лишний . Замените значения температуры ( они указаны в градусах по Фаренгейту ) значениями, более приемлемыми для вашего восприятия. 6. Теперь создайте пять копий полученного текстового слоя и введите различные значения температур для каждого слоя. 7. Все готово для создания анимации . С помощью команды Window-Animation (Окно Анимация) откройте (если она не открыта) палитру Animation (Анимация). 8. Создайте пять новых кадров , пять раз щелкнув на кнопке Duplicates current frame (Дублировать текущий кадр). Ваш баннер будет содержать шесть кадров для шести городов и шести различных состояний погоды, при этом первый кадр уже присутствует в окне. Секрет создания анимированного изображения очень прост : в текущем кадре должны отображаться только требуемые слои , а просмотр остальных нужно отключить . Посмотрим , как это выглядит применительно к вашему баннеру. 9. Первый кадр в палитре Animation (Анимация) активен по умолчанию, для него и будет формироваться изображение. Оставьте в палитре Layers (Слои) видимыми слои weater-box, partly-cloudy, один из слоев со значениями температуры ( по вашему усмотрению), а также слои HIGW, LOW и PARIS. Просмотр остальных слоев отключите. 10. Активизируйте второй кадр. Для него в палитре 12

Layers (Слои) отключите слой PARTS и включите просмотр слоя LONDON, отключите просмотр слоя partly cloudy, вместо него включите слой rain. Также включите просмотр слоя с другими значениями температуры. 11. Проделайте те же операции для остальных кадров «создайте» различную погоду для других городов. 12. Далее необходимо настроить параметры анимации. Предварительно посмотрите , как она работает на данный момент. Щелкните на кнопке Plays/stops animation (Проигрывать / остановить анимацию) в палитре Animation (Анимация ), и изображение начнет « проигрываться ». Как видите , оно воспроизводится слишком быстро , поэтому следует изменить скорость смены кадров. Сначала остановите воспроизведение, пользуясь той же кнопкой Plays/stops animation (Проигрывать / остановить анимацию), которая теперь выглядит несколько иначе. 13. Внимательно посмотрите на палитру Animation (Анимация). Под каждым кадром сейчас находится надпись О sec - это время задержки при показе кадра. Щелкните на этой надписи правой кнопкой мыши и задайте в раскрывшемся списке требуемое значение задержки, например 5 секунд. Можно установить произвольное время задержки. Для этого выберите в списке элемент Other (Другое), после чего отобразится диалоговое окно Set Frame Delay (Установить время задержки). Укажите в нем время задержки в секундах (с точностью до десятых долей). 14. Проделайте ту же операцию для остальных кадров установите одинаковое время задержки. Снова « проиграйте » документ и подкорректируйте время задержки, если оно вас не устраивает Осталось рассмотреть несколько дополнительных настроек. Удаление фреймов осуществляется при выборе 13

команды Delete (Удалить) всплывающего меню палитры, которое открывается, если щелкнуть на кнопке с изображением стрелки вправо . Количество циклов воспроизведения изображения задается в списке Select looping options (Установить параметры повторения ), находящемся в левом нижнем углу палитры Animation (Анимация). Чтобы открыть список, щелкните на стрелке , направленной вниз. Список содержит три элемента: Once (Один раз), Forever (Все время), Other (Другое). В первом случае изображение будет проиграно один раз, во втором случае оно будет проигрываться без остановки, в последнем случае откроется диалоговое окно Set Loop Count (Установить количество повторений), в котором следует установить количество циклов воспроизведения. 15. Работа закончена , теперь вам требуется выполнить последнюю операцию - сохранить документ. Активизируйте команду File - Save Optimized As (Файл- Сохранить оптимизированный как) либо нажмите клавиши Ctrl+Shift+Alt+S. Откроется диалоговое окно Save - Optimized As (Файл-Сохранить оптимизированный как). 16. В раскрывающемся списке этого окна выберите элемент Images Only (.gif)- Выделите требуемую папку и щелкните на кнопке Save (Сохранить). Файл будет сохранен в формате GIF 89 а. После этого вы можете вставлять в веб страницу, указав для файла обычное расширение gif. Рассмотренный способ разработки анимации предполагает создание всех кадров вручную - вы сами определяете, что будет отображаться в каждом их них . Существует еще один вид анимации , для которого требуется всего два кадра , а промежуточное изображение программа сформирует самостоятельно.

14