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

В данной статье я опишу, как создать логотип от начала до самого конца, в полном объеме задокументировав его. Советую вам открыть 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. Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *