Как сделать охранное поле логотипа в фотошопе
Обновлено: 07.07.2024
Вступительное слово: в этой статье я расскажу, как создать качественный логотип в Photoshop, используя определенный набор действий. Для начинающих я приведу шесть основных правил, которые следует соблюдать при разработке логотипа, чтобы убедиться, что вы находитесь на правильном пути дизайна логотипа перед использованием фотошоп.
В конце мы расскажем про наш онлайн конструктор «Логотип онлайн» - как легкую альтернативу создания логотипа в Photoshop.
Вы считаете что самостоятельно придумать дизайн свеого логотипа сложно? Да, никто никогда и не говорил, что это будет легко.
Логотип для вашего бренда и компании — это как лицо человека. Поэтому нет необходимости подчеркивать важность создания хорошего лого. В следующих параграфах мы будем использовать версию Photoshop - PS CC в качестве главного инструмента. Вы также узнаете про полезные быстрые клавиши в PS.
При разработке или редизайне логотипа учитывайте план компании, маркетинг и видение, поскольку эти компоненты имеют основополагающее значение для успеха вашего бизнеса. Верьте или нет, логотип, как зеркало, невообразимо влияет на ваш бизнес. Прежде чем перейти к следующему шагу, я хотел бы поделиться шестью основными правилами оформления логотипа:
- Согласованность. Убедитесь, что зрители воспринимают ваш логотип и бренд одинаково. Когда люди видят новый логотип, они сразу же задумаются и представят ваши услуги, качество и видение. Нежелательно кардинально изменять дизайн вашего логотипа, так как это может показаться ненадежным для ваших клиентов.
- Простота запоминания. Сделайте ловушку простой для клиентов. Как правило, у всех нас есть кратковременная память. Вложение слишком большого объема информации в дизайн логотипа не будет разумным вариантом, намного разумнее будет использовать простые и понятные формы.
- Узнаваемость - сделайте логотип уникальным. Важно гарантировать, что дизайн логотипа уникален. Люди не откладывают в памяти что-то похожее на то, что они уже видели.
- Тематика. Убедитесь, что изображения в логотипе связаны с вашим сервисом и темой. Используйте графику, похожую на символы, ассоциирующиеся с вашей категории. Не используйте абстрактную графику в логотипе, иначе никто не поймет, что она означает.
- Подарите эстетическое наслаждение - убедитесь, что ваш фирменный знак правильно сделан с точки зрения дизайна, композиции, колористики и других аспектов. Более качественный дизайн – отличное конкурентное преимущество и еще один шаг к доминированию на рынке. Кто скажет «Нет» компании, которая решает ваши проблемы и ведет себя как прирожденный лидер?
- Чувство владения - подарите пользователям чувство чего-то нового и того, на что они не могут не согласиться. Дайте волю эмоциональному аспекту, что бы фирменный знак заставлял на секунду затаить дыхание.
Показ ваших ценностей и видения вашим клиентам через дизайн логотипа — это умный ход.
Проверьте свой логотип с помощью предыдущих шести правил: если у него есть все эти преимущества, будьте уверенными и смело используйте свой новый лого. В противном случае доработайте его.
Как создать логотип в Photoshop?
Эта часть представляет собой инструкцию по дизайну логотипа, основанную на использовании Photoshop CC.
Что делать, если вы установили другие версии Photoshop? Не волнуйтесь, скорее всего это никак не повлияет на процесс и вы не заметите разницы! Просто имейте в виду, что функции PS остаются теми же и шаги будут примерно одинаковыми.
А теперь давайте насладимся процессом самостоятельной разработки логотипа в Photoshop и возьмем лого кофейни в качестве примера для инструкции.
Шаг 1. Исходный уровень.
Откройте PS CC и нажмите [Файл] - [Создать новый].
Либо вы просто можете нажать клавиши [Ctrl] + N.
Введите название вашего проекта логотипа и выставите ширину и высоту документа.
Обычно я устанавливаю ширину 1920 пикселей и высоту 1080 пикселей. Но вы можете ввести свой размер для необходимого логотипа здесь. Выберите цвет фона, например ffffff (это белый цвет), для своего логотипа и нажмите [Создать].
Как создать фоновый слой в PS.
Шаг 2: Добавляем кофейный слоган - текст нашего логотипа.
Добавьте новый слой, выбрав [Слой] - [Новый].
Или используя комбинацию клавиш Photoshop: [Ctrl] + [Shift] + N.
Выберите инструмент [Текст] из панели инструментов слева. Введите свой слоган - текст вашего логотипа, выберите стиль шрифта и цвет шрифта.
Также вы можете изменить текст на изогнутый, опция находится рядом с опцией [Цвет шрифта] сверху. Но в нашем примере мы не будем использовать эту функцию.
Помимо этого, Photoshop предлагает более широкий набор расширенных опций для текста, который можно легко найти в разделе [Дополнительно]. Здесь мы просто используем эти функции и настраиваем наш логотип, чтобы он выглядел стильно.
Чтобы изменить положение текста, дважды щелкните английскую [T] на слое текста логотипа, переместите курсор мыши вне текста (вы увидите изменение формы курсора) и перетащите его для перемещения.
Что еще? Щелкните правой кнопкой мыши на слой «Текст логотипа», нажмите на [Параметры наложения], затем вы увидите окна Стили слоя. Просто попробуйте поэкспериментировать с данными стилями и заметить, что логотип стал лучше.
Шаг 3. Добавьте иконку кофе в наш логотип.
Для нашего логотипа мы собираемся использовать изображение кофейных зерен.
Используйте [Файл] + [Поместить встроенное], чтобы открыть ваше изображение с кофейными зернами внутри нашего файла.
Изменяем размер и выравниваем изображение так, чтобы органично смотрелось с нашим названием.
Шаг 4. Пересматриваем текст логотипа и его композицию.
Отдохните буквально 5 минут, чтобы взглянуть на свою работу свежим взглядом. Часто после добавления изображения нужно снова поменять шрифт или размер названия, а также пересмотреть его положение в композиции фирменного знака.
Шаг 5: Сохраняем свой логотип.
Идем [Файл] - [Быстрый экспорт в PNG] или одновременно нажимам клавиши [Alt] + [Shift] + [Ctrl] + W.
Полезный совет: Сделали что-то плохое на предыдущем шаге, когда фотошопили? Нажмите [Ctrl] + [Alt] + Z.
После прохождения данных шагов мы осознали, что использование Photoshop для самостоятельной разработки логотипа вполне реально, но не настолько эффективно.
Является ли Photoshop идеальным инструментом для дизайна логотипа? Есть ли лучшие альтернативы?
Многие выдающиеся дизайнеры выступили и высказались за то, что создание логотипа в Photoshop может привести вас к повторной разработке логотипа снова и снова, так как большинство пользователей не могут правильно выставить физический размер фирменного знака и требованиям к разрешению, что бы логотип не «покрылся пикселями».
Предположим, вы также хотите создать логотип для кофейной компании. Сервис сгенерирует для вас десятки профессиональных вариантов, учитывая ваши критерии. Несмотря на то, что данный способ наиболее прост и самостоятельно предлагает варианты лого, конструктор имеет полную возможность вывода дизайна лого в векторном формате.
Все логотипы, разработанные на нашем сайте, могут быть загружены в формате SVG без потери качества.
Photoshop абсолютно точно поможет вам успешно создать логотип, но это может быть не лучшим инструментом именно для вас.
Особенно если вы не хотите тратить собственное время на изучение функционала программы и правил дизайна для брендинга.
Надеюсь данная статья оказалась для вас полезной, если это так, поделитесь ей в социальных сетях, спасибо!
В первый год работы в рекламном агентстве я познал дзен. BTL, CTR, Marketing Guide, Огилви — я узнавал столько нового, сколько вообще мог узнать. И сегодня я расскажу вам про термин «logobook» — всё, что когда-то сам узнал от одного маркетолога.
Итак, начнём с главного…
Что включает в себя логобук и что в нём содержится
Logobook — это, если переводить с английского, книга о логотипе. Если быть более точным, то это свод определённых правил, которые устанавливают ограничения на использование логотипа в работе компании. Да-да-да, звучит как в учебнике по маркетингу от Котлера, согласен. Дальше станет понятнее.
Итак, логобук состоит из нескольких разделов, каждый из которых является важным помощником при решении о размещении логотипа где-либо.
В основном, в логобуке встречаются следующие разделы:
- Описание.
- Используемые цвета.
- Варианты.
- Использование.
- Дополнительные рекомендации
А теперь подробнее.
Описание
В этом разделе изображен сам логотип, его геометрические формы, основные цвета, шрифтовое написание и, если есть, дескриптор (короткая фраза под логотипом). Также в блоке «Описание» рассказывается о том, какие конкретно смыслы доносит нам само изображение, почему выбрано именно такое графическое решение.
Базовая информация про логотип «Альфабанка» размещается вот в таком виде
Используемые цвета
В логобуке обязательно рассказывается про основные фирменные цвета. Также включается блок про альтернативные цветовые решения: монохром, негативная версия, оттенки серого. Разные цветовые решения важно предусмотреть, чтобы логотип хорошо смотрелся на разных фонах, был адаптирован к разным требованиям печати, при этом оставаясь читабельным.
В логобуке к каждому цвету также прописаны коды из цветовых схем Pantone, RGB и CMYK. Вбив эти коды в фотошопе или другом графическом редакторе, мы получим оригинальные цвета бренда и можем правильно их использовать в дальнейшем.
У «Tele2» можно онлайн посмотреть их логобук.
Варианты
В этом разделе рассматриваются варианты отображения логотипа: помимо основного вертикальная, горизонтальная, экстрагоризонтальная, компактная версии, а также цветная, монохромная.
Вот так выглядит логобук «Американского Красного креста». Можете изучить его здесь.
Все это зависит от контекста его использования. Например, «круглая» компактная версия логотипа часто используется для аватарок в социальных сетях. На официальном сайте в шапке обычно отражают горизонтальный или экстрагоризонтальная версию.
Не стоит забывать и про языки. К примеру, придумали мы бренд «Привет Вася», сделали логотип. В русском начертании он так и пишется. Но, если я захочу выйти на рынок Европы, то понятнее для аудитории будет бренд на английском языке — «PRIVET VASYA». Бренд один, а написание логотипа для разных рынков разное. Так вот вариативность использования логотипа также показана в логобуке.
Особенности международного написания логотипа «M.Video»
Использование
Итак, мы понимаем как выглядит наш логотип, какие цвета в нем и с ним используются, как он может выглядеть в разном исполнении. Что нам еще нужно? Размеры, конечно, размеры! И еще особенности охранного поля, размещение изображений.
Во-первых, в этом разделе здесь указывается минимальный размер логотипа, в основном в миллиметрах. Это нужно, чтобы логотип был различим на печатных и цифровых носителях.
Вот так заданы размеры лого «Burger King»
Во-вторых, размер охранного поля, которое образуется вокруг логотипа. В это поле нежелательно размещать дополнительные графические элементы, а иногда и вовсе запрещено. Но вспоминаю случай из практики, когда к новому году на логотип была натянута новогодняя шапка, хотя это и не было официально разрешено в логобуке. Это был клиент агентства и он сам инициировал такое решение.
Так в логобуке «Лукойл» отображается охранное поле. Здесь можно увидеть полную версию.
В-третьих, в логобуке обязательно прописывают правила недопустимого использования логотипа. Например, запрет деформировать логотип и изменять его пропорций, использовать только части лого или вставлять его на фотоизображения, на которых логотип не будет читаться.
А здесь «Spotify» показывает, как нельзя использовать логотип
Дополнительные рекомендации
В конце логобука обычно прописываются какие-то дополнительные детали: основные и дополнительные шрифты для разных типов документов, основные начертания, цветовое использование шрифтов.
Особенности типографики в логобуке «М.Видео»
Вот из этих основных разделов и состоит логобук. Этой информации вполне достаточно, чтобы правильно использовать логотип в любой презентации или на рекламной поверхности.
Зачем нужен логобук?
Если кратко и ёмко, то логобук нужен для правильного использования логотипа. Если нужен фантазийный пример из жизни, то он ниже.
Итак, молодой дракон специалист пришёл работать в маркетинговый отдел крупной организации. У этой организации крупный бренд, большие бюджеты и они уже много лет укрепляют лояльность к бренду через использование, в том числе, логотипа в разных рекламных активностях. Чтобы уменьшить вероятность ошибки начинающего специалиста и в сотый раз не объяснять новому сотруднику как должен быть расположен логотип, условно, на новых визитках, специалисту дают логобук. В нём и показано, что логотип должен находиться тут-то, на таком-то фоне, с такими-то отступами. Молодой специалист идет заказывать новые визитки уже с пониманием дела и не отвлекает других сотрудников от работы.
В логобуке «Аэрофлота» указано правильное расположение элементов бренда на визитке.
Вот случай из моей практики — работаю я значит с брендом, который своё приложение продвигает. Просят сделать ролик короткий и в конце чтобы логотип появился. Ну, так помимо ТЗ и самого логотипа высылают мне сразу и логобук, чтобы я понимал, как в ролике могу и как не могу использовать логотип. Да и с вопросами к ним лишний раз не приставал. Им удобно и мне удобно.
Как происходит процесс разработки логобука?
Чтобы разработать логобук нужно упорядочить ту информацию, которая есть на данный момент и расставить её таким образом, чтобы человек, который впервые в жизни возьмёт в руки эту книгу о логотипе, понимал о чем идет речь.
Конечно, создание логотипа связано с брендированием, когда в первую очередь идет смысловая работа, а уже дальше визуализация.
Но что делать, когда у нас уже что-то есть по факту, но информации явно не достаточно для оформления логобука? Ответ в самом вопросе — конечно, собирать информацию.
Когда информация собрана и хоть немного упорядочена, нужно понять чего не хватает. Здесь важно задавать правильные вопросы себе и, если логобук нужен заказчику, то заказчику. Будет ли дескриптор? Будет ли монохромное исполнение логотипа? На каких поверхностях вообще планируется размещение логотипа? Важно собрать как можно большее количество данных и задавать правильные вопросы.
После того, как собрана дополнительная информация и сделаны выводы об использовании логотипа, создаётся структура. Структура логобука может быть разной в зависимости от количества вариантов использования логотипа, но обязательными пунктами являются:
- Используемые цвета.
- Варианты.
- Правила использования.
- Рекомендации.
Такая структура даёт полное понимание о правилах использования логотипа.
Логобук, в котором точно прописана информация по всем этим разделам, можно смело передавать в руки сотрудникам компании, фрилансерам и рекламным агентствам.
С такими правилами можно быть точно уверенным в том, что при размещении логотипа на любом носителе он будет выглядеть так, как это было задумано изначально.
В этой статье мы постараемся ответить на два самых важных вопроса:
— Что такое «вылеты под обрез»?
— Что такое «охранное поле», «безопасное поле» или «зона безопасности»?
Итак, начнем с первого пункта.
Что такое «вылеты под обрез»?
Есть универсальный термин и называется он «Bleed Margin», с английского языка он переводится разными компаниями по-разному:
«вылеты НА обрез», «вылеты ЗА обрез», «вылеты ПОД обрез», «припуски на обрез», а если дословно, то слово «Bleed», переводится как «кровоточить» и сразу не сулит ничего хорошего! ;)
Назовем их «вылеты ПОД обрез».
Говоря понятным языком — это часть вашего макета, которая в процессе изготовления срежется и в итоге получится изделие именно того размера, который вы планировали.
Вот простая иллюстрация на пример листовки А4 формата (210x297 mm.)
Размер А4 и размер А4 с учетом «вылеты ПОД обрез»
Разберемся подробнее, зачем файл, который мы отправляем в типографию должен быть бОльшего размера, чем нам нужно:
• При печати и последующей резке есть техническая погрешность 0,5-1 мм. Если не сделать «вылеты ПОД обрез», то в 90% готовых изделий будет белая рамка, из за особенностей резки.
• К погрешности резки так же добавляется усадка материала (бумаги) в процессе печати и /или в процессе ламинирования и других вариантов постпечатной обработки.
Что такое «охранное поле», «безопасное поле» или «зона безопасности»?
Охранное поле или «Safety area» — это поле внутри вашего макета, в котором мы рекомендуем разместить все важные элементы. Так они будут находиться на оптимальном расстоянии от края изделия.
Охранное поле визитки.
Что нужно «охранять»?
— Иллюстрации или графика
Всё то, что должно оставаться в целостности и не должны быть срезано.
Вот пример 2х макетов.
1) Элементы расположены с учетом охранного поля.
2) Элементы расположены без учета поля, но эти элементы не должны обрезаться
Как избежать ошибки?
В нашей инструкции мы покажем как правильно создать шаблон макета в трех популярных графических редакторах с учетом «вылетов» и «охранного поля»:
Пошаговая инструкция.
Дальше много текста и картинок:
Пошаговая инструкция по созданию стандартной визитки на примере редактора CorelDraw.
Выставляем размер страницы 90x50 мм.
Выделяем элементы и задаем им размер, на примере назначаем размер птички - 47х40 мм.
Размещаем элементы на визитке.
Создаем фон визитки, для этого левой кнопкой мыши два раза нажимаем на кнопку - "Прямоугольник".
Левой кнопкой мыши, в правой части экрана, назначаем заливку. На примере 20% серый цвет.
Добавляем "П оля под обрезку" по 4 мм (по 2 мм во все четыре стороны).
Убираем черную внешнюю рамку, для этого правой кнопкой мыши нажимаем на верхний значок в панели палитры.
Создаем прямоугольник в готовый размер визитки, для этого дважды нажимаем на кнопку - "прямоугольник".
По умолчанию прямоугольник появляется под всеми элементами, перемещаем его, зажимая левую кнопку мыши и перетягивая наверх.
Видим, что на визитке появилась разметка окончательного размера - 90х50 мм. Скопируем прямоугольник для создания "Охранного поля".
Вставляем поверх всех элементов, нажимая правую кнопку мыши на "Слой 1".
"Охранное поле" должно быть на 4 мм меньше, чем готовый размер.
Правой кнопкой мыши, для удобства, задаем цвета прямоугольников. На примере синим цветом указана "Охранное поле", а зеленым - окончательный размер визитки (90х50 мм).
Располагаем важную информацию (текст, изображения и др. элементы, которые не должны быть обрезаны) в границы "Охранного поля" - внутрь синей рамки.
После верстки визитки, удаляем вспомогательную разметку, которую мы делали ранее. После этого визитка готова к печати, осталось экспортировать PDF файл.
Выбираем: Файл - Опубликовать в PDF
Выбираем любой путь на вашем компьютере (п.17), прописываем любое имя файла (п.18). Открываем меню - "Параметры" (п.19).
Во вкладке - "Допечатная подготовка" ставим галочку в пункте - "Порог выхода за обрез" и прописываем значение - 2 мм.
Подтверждаем действие кнопкой - "ОК".
Визитка 90x50 мм готова к печати.
Как правило, считается что разработкой логотипов занимаются специальные студии, в которых работают квалифицированные художники-иллюстарторы. Но в некоторых случаях создание логотипа не является особо трудоемким процессом, поэтому быстрее и выгоднее будет заняться этим самому.
В этой статье представлено подробное руководство, как создать логотип в Фотошопе самостоятельно и в хорошем качестве. Стоит отметить, что в практически во всех версиях графического редактора, включая CS5 и CS6, алгоритм действий почти не отличается.
Photoshop отлично подходит для создания логотипов, благодаря тому что в нём можно рисовать в векторе или добавлять растровые заготовки. А возможность создания множества слоев позволяет работать с огромным числом объектов и быстро их редактировать.
А теперь давайте перейдем к содержанию самого урока:
Создаем и настраиваем холст
Перед началом работы, необходимо задать параметры для рабочего стола. Переходим в пункт “Файл”, далее “Создать”. В окне выбираем поле “Имя” — сюда пишем название для вашего проекта. Размер холсту задаем квадратный, 500×500 (вы можете выбрать любой другой квадратный размер). Разрешение лучше делать высоким, но оптимальным будет 300 пикселей/дюйм. В пункте “Содержимое фона” выбираем белый цвет. Применяем все настройки, нажав “ОК”.
Рисуем простые векторные формы
В панели слоев выбираем пункт “Создать новый слой”. (Показать и скрыть эту панель можно при помощи клавиши “F7”). Можно сделать это быстрее, нажав на кнопку, на которую указывает стрелка на скриншоте:
Как создать логотип в Фотошопе самому в хорошем качестве
На панели инструментов, которая по умолчанию находится слева, выбираем “Перо”.
Создаём любую свободную форму, а затем корректируем её, использую узловые точки, благодаря “Углу” в раскрывшемся списке, как показано на скриншоте:
И “Стрелке”. см. скриншот ниже:
Возможно для новичка овладеть этими инструментами в самом начале будет не так просто, но спустя некоторое время тренировок, рисовать пером станет намного легче, а за счёт этого быстрее и красивее.
Нажав пкм (правой кнопкой мыши) по контуру объекта, в контекстном меню следует найти пункт “Выполнить заливку контура” и подобрать необходимый для этого цвет. Можно долго не думать над выбором, т.к. цвет всегда можно будет поменять в панели параметров слоя.
Но если вы решили сразу залить фигуру нужным цветом, то делаем так, как показано на скриншоте. Стрелка указывает на палитру, где можно выбрать цвет заливки:
Копируем формы
Если необходимо скопировать в буфер обмена слой с объектом, то нужно выделить его, далее в инструментах выбрать “Перемещение”, зажать “Alt” и передвинуть фигуру в необходимую сторону. Если повторить эти действия еще раз, то в итоге получится три абсолютно идентичных фигуры, находящихся на трех различных слоях, которые благодаря ранее отмеченной комбинации клавиш были созданы автоматически. После этого контур, который был нарисован ранее, можно удалить.
Масштабируем и компонуем элементы на слоях
Нужно выделить необходимый слой, зайти в “Редактирование”, далее “Трансформирование” и наконец “Масштабирование”. Затем зажать “Shift” и уменьшить объект, путем перемещения угловой точки, возникшей вокруг него рамки. Если не применять шифт, то масштабирование будет происходить хаотично, т.е. без пропорциональности. Аналогично можно уменьшить другой объект.
Если нужно быстро активировать такую трансформацию, то можно нажать “Ctrl” + “C”.
Далее следует подобрать подходящую форму фигур, выделить слой с ними, нажать пкм на панели слоев и выбрать пункт “Объединить слои”.
После этого можно, используя трансформацию, увеличить фигуру под размер холста.
Заливаем объекты цветом
Пришло время подобрать заливку к каждой фигуре. Нажимаем пкм на слой и выбираем пункт “Параметры наложения”. Далее откроется окно, в котором нужно найти “Наложение градиента” и затем выбрать его тип, который подойдет для заливки объекта. В поле, с названием “Стиль”, выбираем “Линейная”. Подбираем цвет для крайних точек градиента и параметры масштаба градиента. Все применяемые изменения мгновенно показываются на самом холсте. Путем подбора нужно остановиться на наиболее подходящем варианте.
Добавляем текст
Теперь в логотип следует добавить текст, если он вообще вам нужен. В инструментах для этого есть специальный пункт, с названием “Текст”. Затем пишем необходимую аббревиатуру или же слова, выделяем написанное и подбираем шрифт, наиболее подходящее положение. Для передвижения текста следует выбрать инструмент “Перемещение”.
В слоях автоматически создается слой с текстом. У него можно выбирать параметры наложения, как и любого другого слоя.
Быстрый экскурс по созданию логотип в фотошопе подошел к концу! Последним шагом будет его сохранение в нужном формате. В Photoshop их очень большое количество. Самые популярные это PNG, а также JPEG.
Это был элементарный способ создания логотипа, при помощи векторного рисования. Если попрактиковаться и изучить другие функции программы, то можно будет легко создавать более сложные логотипы. До создания сложных логотипов мы еще дойдем в наших следующих уроках Photoshop.
Читайте также: