Как создать удивительный логотип

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

Я использовал технику, с помощью которой разрабатывал многие логотипы. Здесь только некоторые из них:

Adobe Photoshop

Для разработки этого логотипа я буду использовать Adobe Photoshop CS2. Многие настаивают на том, что для этого нужен только Illustrator, но я считаю, что в целях удобства большей части аудитории лучше использовать Photoshop.

Проект

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

Название bluelaguna.net вместе со слоганом фактически является логотипом. Я подумал, что нужно показать всю шапку, чтобы увидеть, как логотип сочетается с общим дизайном.

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

Чтобы логотип был эффективным, он должен содержать изображение "бренда", которое должно засесть вам в голову. Этот же логотип - просто надпись шрифтом Times New Roman в верхнем регистре.

Сбор информации

Перед началом разработки логотипа заказчик должен ответить на несколько вопросов:

• Название услуги / продукта: BlueLaguna.Net.
• Используете ли вы слоганы?: "Your #1 Source for RPG Media".
• Есть ли у вас предпочтительная цветовая схема?: Совпадает с текущим проектом.
• Что вы пытаетесь донести через логотип?: Серьезный сайт игровой тематики.
• Еще какие-нибудь пожелания?: Вы не должны использовать текущий дизайн шапки.

Этого вполне достаточно, теперь мы знаем, как сделать логотип для сайта.

1. Настройка документа в Photoshop

В Photoshop перейдите в Файл> Создать. Затем укажите имя логотипа и задайте ширину 600 и высоту 500 пикселей. Затем нажмите кнопку ОК (Смотрите скриншот ниже):

После этого ваш документ должен выглядеть следующим образом:

Слева у меня открыты палитры «Слои» и «Символы».

2. Эксперименты с выбором шрифтов

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

Выберите в меню слева инструмент «Текст»:

Настройте в панели параметров сверху «Свойства текста», как показано на рисунке ниже:

В панели «Символ» справа установите для трекинга (AV) значение -60. Это просто сократит расстояние между каждым отдельным символом:

Введите в поле документа "BLUE LAGUNA". Сначала, убедитесь, что цвет фона у вас белый, и вы можете использовать для него инструмент «Заливка». Я решил начать с заглавных букв, так как они выглядят более «серьезно»:

При выбранных инструменте «Текст» и слое 1, перейдите в меню списка шрифтов:

Вы можете изменить шрифт тремя способами.

• Нажать стрелку вниз, чтобы изменить вид шрифта надписи "BLUE LAGUNA";
• Нажать стрелку вниз и просмотреть маленькие превью каждого из шрифтов;
• Скачать программу для просмотра шрифтов.

Лично я использую первый метод, хотя иногда использую и программу для просмотра шрифтов. Наша цель - найти шрифты, которые могли бы подойти для логотипа.

После того, как вы определитесь со шрифтом, нужно продублировать слой в палитре, а затем скрыть предыдущий слой. Кликните по слою правой кнопкой мыши и выберите из открывшегося меню пункт «Создать дубликат слоя». Так вы сохраните выбранный шрифт (скрытый слой), и получите новый слой, чтобы попробовать другие шрифты:

3. Удачный и неудачный выбор шрифта

Так как мы хотим создавать серьезные логотипы сайтов, то нам нужны определенно выглядящие шрифты.

Вот несколько примеров неудачно выбранных шрифтов для этого проекта:

• Первый логотип (верхний) не подходит, потому что выглядит слишком весело/непрофессионально;
• Второй логотип просто "глупый", кроме того не стоит выбирать для логотипа шрифт, который уже содержит тень;
• Третий логотип с завитушками слишком "рваный";
• Каллиграфические логотипы, как правило, являются устаревшими, особенно этот, со странными "каплями", стекающими вниз;
• Последний логотип читается с трудом. Помните, логотип должен быть легко читаемым.

Вот несколько примеров хорошего выбора шрифта, который нужно осуществить перед тем, как создать свой логотип:

• Все эти логотипы, за исключением 4 и 6 являются в значительной степени похожими;
• Номера 1, 2, 3 и 5 все простые и «серьезные» на вид;
• Логотип 4 все еще выглядит «серьезно», хотя и значительно отличается от остальных. Я выбрал этот шрифт, чтобы поэкспериментировать с сочетанием шрифтов для слов "BLUE" и "LAGUNA";
• Логотип 6 написан жирным скошенным шрифтом, но он все равно выглядит как нужно.

4. Окончательный выбор шрифта

Для логотипов, которые состоят более чем из одного слова, лучше, если мы сделаем слова отличными друг от друга на вид. В этом проекте у нас есть два слова "BLUE" и "LAGUNA". Мы попробуем сделать их отличными друг от друга с помощью двух разных шрифтов. Можно также разделять слова, сохраняя тот же шрифт, но изменяя цвет слов. Поэтому я поэкспериментирую с шестью отобранными выше шрифтами.

Для слова "BLUE" я использовал «нежирную» версию шрифта, использованного для написания слова "LAGUNA". Это позволяет сохранить целостность всего логотипа PSD и разделить слова:

5. Добавление символа

Иногда логотипы хорошо выглядят, если состоят только из слов, но в большинстве случаев добавление какого-то соответствующего символа позволяет сделать логотип выделяющимся. Давайте начнем с первого из отобранных нами ранее шрифтов:

Давайте подумаем, что можно добавить к логотипу, чтобы сделать его выразительным. Первое, что я делаю в таких случаях, это просто сажусь и смотрю на выбранный шрифт. И думаю о том, что собой представляет сайт. Ну, BlueLaguna.Net - сайт об играх, который предлагает медиа-материалы по RPG (Role Playing Game). Таким образом, мы имеем две основных черты «характера» ресурса: RPG и медиа. Я думаю, логично было бы сосредоточиться на аспекте RPG, так как медиа и так окружает нас повсюду, и это совсем не уникальная концепция.

Теперь давайте проведем некоторые исследования по ролевым играм. Мы должны установить, символ, который действительно ассоциируется с RPG. В данный момент на BlueLaguna.Net представлен женский персонаж в 3D. Изображение женщины в логотипе - это, возможно, лучший выбор. Кроме этого мир оружия и магии также связан с RPG.

Теперь нужно придумать несколько идей для нашего символа. Я думаю, можно представить на логотипе лицо одной из этих девушек в стиле RPG с намеком на магию.

Инструмент «Перо» - ваш верный друг

Если существует какой-нибудь инструмент, который полностью понятен всем без исключения, то это именно инструмент «Перо». Он позволяет создавать любую форму и поддерживает векторный формат, что очень важно, если нужно изменять размер логотипов для сайтов - при профессиональной печати, например.

Всегда лучше рисовать логотип вручную, без обводки контуров картинки (векторной трассировки), но если вы не очень талантливый художник, то трассировка может оказаться единственно возможным для вас вариантом.

Поиск подходящей картинки

К сожалению, на istockphoto я не нашел ничего похожего на RPG или "аниме". Поэтому я зашел на images.google.com и нашел там картину, которая мне подходит:

После того, как вы нашли изображение, которое хотите трассировать, сохраните его на жестком диске, откройте в Photoshop. Затем нажмите Ctrl-A, Ctrl -C, чтобы выделить его и скопировать выделение, а затем вернитесь к основному документу логотипа и нажмите Ctrl -V.

Теперь мы импортировали эту картинку в документ логотипа. Выберите инструмент «Прямоугольная область», выделите нижнюю половину тела девушки и нажмите клавишу Delete. Ваш документ сейчас должен выглядеть примерно так:

Векторная трассировка

Теперь выберите инструмент «Лупа» и увеличьте масштаб:

Далее выберите инструмент «Перо»:

Убедитесь, что цвет переднего плана (черный квадрат в нижней части палитры) совпадает с темно-синим цветом текста, который мы указали.

Создайте новый слой и измените его непрозрачность до 0%. Это делается для того, чтобы, когда мы начнем обводить контурами изображение, синий цвет не перекрывал расположенную ниже картинку девушки.

Далее при выбранном инструменте «Перо» нажмите в точке, расположенной на внешнем контуре волос девушки (в верхней части), а затем еще раз нажмите на внешнем контуре в другой точке, чтобы между этими двумя точками можно было создать линию. Вы можете нажать и потянуть за край линии, чтобы создать кривую определенной формы.

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

Непрозрачность 100%

Перед тем, как разработать логотип полностью, я создам другие фигуры, изображающие черты лица. Вот, что у меня получилось:

Как видите, для лица я использовал другой цвет (голубой). Теперь у меня есть около 15 различных слоев. Отдельный слой для верхней части каждого глаза, нижней части каждого глаза, середины и небольших бликов. Также на отдельном слое располагаются фон лица и ухо.

Давайте продолжим и добавим немного теней. Вот, что у меня получилось после 20 минут работы с тенями:

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

После этого я добавил светлые и темные участки для лица и шеи.

На данный момент наш символ проекта готов. Давайте сделаем исходный слой текста видимым и посмотрим, как мы можем объединить символ и текст.

Удерживая клавишу Shift, нажмите последний и первый векторные слои, чтобы выбрать их все. Затем в палитре слоев кликните по иконке маленького круга и в появившемся окне выберите «Новая группа из слоев». Это позволит собрать все слои девушки в одну группу, чтобы ими легче было управлять. Таким образом, мы можем работать с различными слоями этой группы, и при этом они будут сохранять свою позицию относительно друг друга, чтобы не исказить лицо девушки:

Уже сейчас все выглядит неплохо. Но голова девушки непропорционально велика по отношению к надписи "BLUE LAGUNA". Поэтому нам нужно немного ее уменьшить. Давайте попробуем переместить ее влево и добавить к слогану текст ".net". Вот как все это будет выглядеть:

Единственное, что я еще сделал бы, это с помощью инструмента «Перо», я добавил бы белую обводку для буквы "B", чтобы она не сливалась с лицом.

К сожалению, я упустил из виду, что bluelaguna.net и так уже имеет синий фон, и выполнил весь логотип в этих же цветах. Поэтому мне нужно изменить цвета логотипа, чтобы они соответствовали фону шапки сайта:

Изменив цвета, мы можем существенно поменять весь внешний вид логотипа. Я думаю, на этом мы можем остановиться.

6. Заключение

Если вы первый раз используете инструмент «Перо», то у вас не получится все так красиво, как у меня. Для этого потребуется время и терпение. Но теперь вы знаете, как создать логотип для сайта.