Как сделать логотип с тенью

Обновлено: 04.07.2024

Если у вас есть ощущение, что в вашем логотипе что-то не так — статья подскажет, в чём дело.

Устаревшую графику тяжело распознать и измерить. Даже очень хороший дизайнер не всегда сможет объяснить, почему одна графика — устарела, а другая — нет.

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

Вот топ-3 устаревших приема, которые легко распознать в логотипе. Возьмем в качестве примера логотип Burger King:

Тень — крайне неуместный прием в логотипе: зачем симулировать отбрасывание объектом тени в ненатуральных для этого сценариях?

Как и с тенью, симуляция свечения логотипа смотрится нелепо и создает массу неудобств в его использовании:

Все та же логика относится и к симуляции 3D в логотипе — использовать такой вариант на различных носителях будет крайне неудобно:

Конечно, встречаются случаи, когда тень, иллюзия 3D или свечение смотрятся уместно в логотипах, но только если эти приемы дополняют концепцию и использованы с умом:

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

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

Вот несколько самых частых ошибок, связанных с подбором цветов в логотипе на примере Chupa Chups:

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

Слишком насыщенные цвета раздражают глаза пользователя, людям тяжело на них смотреть:

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

Чтобы проверить свой логотип на контрастность, примените эффект ч/б — менее контрастные цвета станут ближе друг к другу по уровню серости:

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

Broklin Onjei for Creative Invention Studio on Behance / Chase Turberville for Focus Lab on Dribbble / Mihai Dolganiuc on Dribbble

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

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

Возьмем в качестве примера логотип NETFLIX:

Если графика не помогает, а мешает воспринимать информацию, её нужно чистить:

Если посмотреть на логотип в размытии, перегруженность становится еще более очевидной:

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

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

Лучше ограничиться одним шрифтом либо сочетающейся шрифтовой парой.

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

Слабую композицию непросто распознать при беглом взгляде, будучи не дизайнером. Мы выделили 4 самые частые причины проблем в композиции, рассмотрим их на примере логотипа Microsoft:

Иногда брендам удается выделиться за счет игр с композицией, но с такими приемами важно быть осторожными:

Используются устаревшие графические приемы: тень, свечение, 3D?

Цвета слишком насыщенные для человеческих глаз? В ч/б варианте слишком мало контраста? В градиентах есть грязь?

Я просто оставлю это здесь

ставьте плашку 18+

Боже, какая красота.

Какой логотип сделают, такой и будет.

Что получили по итогу: так делать нельзя, но вот у некоторых компаний так сделано, но вы так не делайте, вам нельзя, вы не сможете.

Типичная ситуация - так плохо, что уже хорошо и узнаваемо)

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

Значит новый логотип Питера, норм, да? 😅

Насколько я помню, после ноябрьской презентации, информация об Этом больше не обновлялась))

Советы из серии "Травку надо рисовать зеленым фломастером, а солнышко - желтым"

хватит трындеть, где обещанный логотип для моего магазина "жопа слона"?

(~q:p~) вот вам прототип в ASCII

извините,
но вместо слона - слониха

Еще забыли упомянуть про совершенно нелепые и устаревшие знаки авторских прав - всякие ТМ, (R), (C)

Щас вообще бизнесу не до логотипов :)) Приходите после 2025

Нетфликс: cancel anytime. У меня не получилось. Из-за сбоя у них удалилась моя учётная запись, но не удалилась привязанная карта. Техподдержка подтвердила, что косяк у них, но они технически не могут отвязать мою карту, хотя видят, что она привязана и списания идут. И посоветовала заблокировать карту.

Майкрософт: по-моему хоть как располагай символ и логотип друг с другом или по отдельности, всем будет ясно, о чём речь. Хоть плитки суй в шапку, а лого в подвал — ничего не изменится.

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали авторы-волонтеры.

Изображение с названием Add a Shadow in Illustrator Step 1

Изображение с названием Add a Shadow in Illustrator Step 2

Откройте существующий документ или создайте новый печатный или веб-документ в диалоговом окне, которое появится.

Изображение с названием Add a Shadow in Illustrator Step 3

Выберите слой, содержащий объект, к которому вы хотите добавить тень. Вы можете выбрать слой на Layers Palette (Палитра слоев). Для доступа к этой палитре перейдите в меню "Window" на верхней горизонтальной панели инструментов. Нажмите пункт "Layers" в выпадающем списке.

Изображение с названием Add a Shadow in Illustrator Step 4

Изображение с названием Add a Shadow in Illustrator Step 5

Выберите меню "Effect" (Эффект) на верхней горизонтальной панели инструментов. Выберите "Stylize" в выпадающем меню под заголовком "Illustrator Effects". (Есть также опция "Stylize" под пунктом "Photoshop Effects," но она не будет создавать тень).

Изображение с названием Add a Shadow in Illustrator Step 6

  • Если вы используете старую версию Illustrator, вы можете найти диалоговое Drop Shadow, выбрав "Object" (Объект) в верхней горизонтальной панели инструментов и выбрав "Drop Shadow" из выпадающего меню. Должно появиться диалоговое окно Drop Shadow.

Изображение с названием Add a Shadow in Illustrator Step 7

Выберите пункт "Mode" для вашей выпадающей тени. Это способ, с помощью которого тень будет смешиваться. Это включает в себя такие опции, как "Hard Light (Жесткий свет), Multiply (Затенение), Soft Light (Мягкий свет), Color Burn (Затемнение основы), Overlay (Наложение)" и многое другое. Поэкспериментируйте с этими режимами, если вы не знаете, как ваша тень должна смешиваться.

Выберите процентное соотношение для "Opacity" (Непрозрачность). Чем выше процент, тем больше ваша тень будет выделяться.

Изображение с названием Add a Shadow in Illustrator Step 9

Выберите смещения вдоль X и Y. Они определяют, как далеко тень будет смещаться, или от самого изображения. Они измеряются в пунктах (pt), которая является стандартной единицей измерения в типографии (1pt приблизительно ==> 0,035 см). Например, размер шрифта измеряется так же на компьютере, то есть 12 pt.

Изображение с названием Add a Shadow in Illustrator Step 10

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

Изображение с названием Add a Shadow in Illustrator Step 11

Выберите цвет вашей тени. Хотя многие тени черного цвета, вы можете выбрать другой цвет на цветовой шкале.

Изображение с названием Add a Shadow in Illustrator Step 12

Выберите для изменения темноту тени вместо ее цвета. Если вы щелкните круг рядом с "Darkness," то можете выбрать, сколько черного цвета появится в тени. Если вы выбираете 100 % темноту, то будет полностью черная тень. Если вы выбираете 0 %, то тень станет такого цвета, как сам объект.

Изображение с названием Add a Shadow in Illustrator Step 13

Нажмите на кнопку "Ok", или включите опцию "Preview" (Предварительный просмотр), чтобы посмотреть, что вы сделали, прежде чем внести изменения в объект.

Всем привет! Мы поговорим о том, как сделать тень в фотошопе.

Программа Adobe Photoshop имеет широкую гамму инструментов и функций, при помощи которых можно добавлять тени к объектам, мы рассмотрим два наиболее распространённых способа создания теней в фотошопе – при помощи Стилей слоя (Layer Style) и с помощью Выделения (Select).

Тень является неотъемлемой частью любой фотоманипуляции, логотипа и т.п. Без тени соединенные объекты выглядят нереалистично, как склеенная аппликация.

Несколько советов перед созданием тени

  • Главное, что нужно запомнить новичку: в природе нет абсолютно черных теней, всегда присутствует какой-то дополнительный цвет, разбавляющий густоту черного.
  • Учитывайте, что чем ближе тень к объекту, тем она насыщеннее, чем дальше – тем прозрачнее.
  • Присмотритесь к окружающему вас миру, почаще обращайте внимание, каким образом объекты отбрасывают тень – это поможет вам избежать ошибок при создании своих коллажей.

Как сделать тень при помощи Стилей слоя (Layer Style)

как открыть изображение в фотошопе

Поместим (Файл-Поместить (File–Place)) на холст изображение с картиной, оно уже отделено от фона,

как поместить изображение в фотошопе

Левой кнопкой мыши тянем за уголки внутрь изображения для уменьшения картины, зажимаем при этом клавиши Shift и Alt чтобы сохранились пропорции картины и масштабирование происходило с центра:

разместить изображение в фотошопе

При помощи инструмента Перемещение (Move tool), быстрая клавиша вызова инструмента V, перетаскиваем картину чуть выше:

где находится инструмент move tool на панели - фотошоп

фотошоп

На панели слоев делаем активным слой с картиной, кликаем по нему два раза левой кнопкой мыши – откроется окно с настройками Стилей слоя (Layer Style):

панель слоев в фотошопе

Ставим галочку у Стиля слоя Тень (Drop Shadow):

добавляем тень в фотошопе

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

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

настройка тени в фотошопе

Вот как преобразился наш маленький коллаж после добавления тени:

добавили тень в фотошопе

Исчез эффект плоскости, и коллаж приобрел реалистичность.

Как сделать тень в фотошопе при помощи Выделения (Select)

Этот способ, несомненно, посложнее, но, уверенна, вы справитесь!

Создаем новый файл (Файл-Создать (File—New)) с такими параметрами:

фотошоп создаем документ

Помешаем в новый документ изображение с девушкой (Файл-Поместить (File–Place)). Девушка уже отделена от фона, так что нам не придется её вырезать.

фотошоп тень

Как и в предыдущем шаге, масштабируем изображение до нужных нам размеров. Не забываем о клавишах Alt и Shift для сохранения пропорций и масштабирования с центра.

уменьшаем в фотошопе

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

выделегние слоя в фотошопе

выделили объект в фотошопе

Создаем новый слой между фоновым белым слоем и слоем с девушкой, Слои-Новый-Слой (Layer—New—Layer) или клик по иконке создания нового слоя в панели слоев:

слои

слои

Переходим к Редактирование-Выполнить заливку (Edit—Fill), в окне выбора цвета выбираем темный цвет и заливаем им выделение. Для примера и хорошего контраста с белым фоном я залила черным, но, напоминаю, для реалистичности коллажа лучше не использовать чисто черный цвет.

Вот как на данный момент выглядит наша будущая тень:

тень

Снимаем выделение (Ctrl + D), активируем инструмент Свободное трансформирование (Free Transform Tool), горячие клавиши для его вызова Ctrl + T, также перейти к нему можно через меню Редактирование-Свободное трансформирование (Edit- Free Transform Tool):

трансформирование в фотошопе

делаем тень в фотошопе

добавили тень в фотошопе

Как мы помним, тень у объекта имеет высокую насыщенность, по мере отдаления от объекта тень становится полупрозрачной. Для плавного снижения прозрачности тени будем использоватьинструмент Градиент (Gradient), горячая клавиша вызова инструмента – G.

градиент на тень в фотошопе

Добавляем к слою с тенью маску слоя, кликаем на значок ее создания в панели слоев:

слои в фотошопе

На клавиатуре нажимаем клавишу D, чтобы вернуть цвета переднего и заднего плана к установленным по умолчанию. После этого действия при выборе инструмента Градиент (Gradient) в качестве стиля градиента будет предложен стиль от черного к белому.

тень в фотошопе

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

как сделать тень в фотошопе

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

Вот мы и узнали, как сделать тень в фотошопе. Надеемся, урок был для вас полезным. Творческих успехов!

Если вы нашли ошибку/опечатку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

Шаблоны теней от Turbologo

Вдохновитесь нашей коллекцией шаблонов теневых логотипов. Создайте свой брендинг на их основе или создайте теневой логотип с нуля. Доступ к библиотеке идей дизайна логотипов Turbologo бесплатный. Просто выберите значок тени и соответствующие цвета и посмотрите различные варианты теневых логотипов.

После того как вы окончательно разработаете логотип, которым вы будете гордиться, загрузите ваше пользовательское векторное изображение теневого логотипа.

Изучите лучшие идеи логотипов

Создайте теневой логотип с помощью онлайн-конструктора логотипов Turbologo

Большое разнообразие шаблонов дизайна и простой интерфейс. Создайте свой уникальный бренд здесь и сейчас.

Читайте также: