Как сделать логотип бэтмена
Логотип бэтмена
Он вселяет ужас в ночи во всех злодеев Готем-сити. Он борется с постоянно возрастающей преступностью, и полагается только на свои физические возможности и сверх умственные способности. Он Бэтмен — человек летучая мышь.
А следующий урок в гимпе посвящен созданию знаменитого логотипа бэтмена. Из урока вы узнаете как использовать важный инструмент рисования в гимпе — «Контур» 
, с помощью которого будет создан контур летучей мыши.
Создаем новое изображение с размером 300×200 пикселей и закрашиваем его черным цветом. Далее создаем новый прозрачный слой и с помощью инструмента «Овальное выделение» рисуем овал, как показано на скриншоте и закрашиваем данное выделение желтым цветом (#ffff00),
после этого снимаем выделение Выделение — Снять.
Создаем вертикальную направляющую «Изображение — Направляющие — Новая направляющая».
С помощью инструмента «Контур» рисуем предварительный контур
Затем щелкаем в точках и устанавливаем кривые как показано на изображении
нажимаем enter. Создаем новый слой и так как выделение еще активно заливаем его черным цветом. Таким образом у нас получилась одна часть логотипа бэтмена.
Далее создаем копию данного слоя, а после чего воспользовавшись инструментом «Зеркало» , отобразим данный слой по горизонтали.
Если вам понравился урок или статья, то пожалуйста поддержите меня нажав на социальные кнопочки ниже. Тем самым вы поделитесь информацией о блоге GimpArt.Org со своими друзьями в социальных сетях. Спасибо!
За 10 лет обучил работе в фоторедакторе Gimp более 12000 пользователей, мои видео-уроки и мастер-классы на одноименном YouTube канале посмотрели более 1 400 000 раз.
👉Посмотрите другие уроки:
3 комментария к “Логотип бэтмена”
спасибо за простой урок
Спасибо за отличный урок.
дайте ссылочку на готовое изображени 😐
Оставьте комментарий Отменить ответ
Нажимая на кнопку «Комментировать», вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности
21 сентября 2014 | Опубликовано в css | 1 Комментарий »
В этом уроке мы постараемся воссоздать знаменитый логотип Бэтмена. Ранее мы рассмотрели создание логотипа Pepsi, который оказался относительно простым, так как в нем нам нужно было работать всего с тремя цветными блоками, придав им определенную форму и разместив их соответствующим образом. Логотип Бэтмена несколько сложнее, так как использует более сложные формы, чем логотип Pepsi.
Мы использовали в этом уроке псевдоэлементы :before и :after, чтобы уменьшить количество блоков. Этот оказалось очень полезно для создания логотипа Бэтмена, так как изначально нам понадобилось 11 блоков, чтобы воссоздать этот логотип. А с помощью вышеупомянутых псевдоэлементов мы смогли уменьшить это количество всего до 6.
Поддержка браузеров
Поддержка этого логотипа на CSS3 старыми версиями браузеров несколько ограничена, но почти во всех современных браузерах она работает хорошо.
Важно заметить, что основная причина, по которой логотип не отображается правильно в некоторых браузерах, — то, что псевдоэлементы :before и :after в этих браузерах не поддерживают определенные свойства CSS3, например, такие, как border-radius и transform.
Браузеры, начиная от версий Firefox 4, Chrome 11, Opera 11.1 и Safari 5, отображают логотип правильно, но Internet Explorer даже версии 11 страдает от псевдоэлементов. Вы можете видеть, что свойство трансформации у псевдоэлементов все так же не поддерживается, так что элементы отображаются без поворота. В старой версии браузера Internet Explorer 9 кроме того не поддерживается скругление у псевдоэлементов :before и :after, хотя у других элементов есть закругленные углы.
У старых версий браузеров Firefox и Safari тоже есть проблемы с отображением свойств CSS3 при использовании псевдоэлементов.
Они бы отображали этот логотип правильно, если бы мы использовали дополнительную разметку HTML вместо использования псевдоэлементов, но цель этого урока — эксперимент с CSS3 и воссоздание логотипа наиболее эффективным способом, а затем выяснение, как результат поддерживается браузерами, а не попытка любыми способами добиться работоспособности во всех браузерах.
Насколько это похоже на оригинал?
На первый взгляд логотип выглядит довольно похоже, но если сравнить его детально с настоящим, можно заметить некоторые различия. Приведение нашего логотипа в состояние, когда его невозможно было бы отличить от оригинала, было бы очень трудоемко, так что в целом мы довольны результатом. Вы сразу понимаете, что это логотип Бэтмена, и только когда вы смотрите одновременно на оригинал и наш логотип, вы можете увидеть разницу.
Псевдоэлементы
Мы уже упоминали их много раз, но что же именно они делают? Они довольно простые: те, которые мы используем в этом уроке, просто добавляют содержимое до или после элемента. В этом случае мы создали один блок для желтых областей в верхней части логотипа Бэтмена, как показано ниже.
Обычно можно было бы использовать три блока, чтобы создать каждый из этих трех желтых элементов, но в этом случае мы создадим только один блок
Это просто, не так ли? И напоследок: когда мы используем псевдоэлементы, нам нужно определить содержимое следующим образом:
Обычно можно вставить содержимое между кавычками, например «Это желтый блок», и после этого этот текст появится непосредственно перед каждым элементом с идентификатором #top-yellow. В этом случае мы просто задаем стили псевдоэлементам, так что нам не требуется содержимое.
И вот у нас есть логотип Бэтмена, воссозданный с использованием CSS3, псевдоэлементов и 6 блоков.
МозгоЧины
#самоделки #инструкции #ремонт_техники #изобретения
МозгоЧины
#самоделки #инструкции #ремонт_техники #изобретения
Эмблема Бэтмена своими руками
Эмблема Бэтмена своими руками
Используемые материалы
• Дерево на ваш выбор (я использовал орех)
• Эпоксидная смола (Famowood Glaze Coat)
• Акриловая краска (синего цвета)
• Вазелиновое масло или антиадгезионная смазка для форм
• Финишное покрытие (на базе полиуретана)
• Полоски с клеевым слоем для плакатов типа 3M
Шаг 1: Подготовка шаблона
Начнем с изготовления шаблона эмблемы Бэтмена. Я выполнил трассировку изображения эмблемы в программе Inkscape с помощью инструмента «кривая Безье» и затем экспортировал полученный линейный чертеж в paint.net, чтобы выполнить масштабирование до нужного мне размера. Я остановился на размере эмблемы 20 см по ширине и примерно столько же по высоте.
Я вырезал шаблон и приклеил его к деревянной заготовке с помощью клея.
Для эмблемы была выбрана деревянная заготовка из ореха толщиной 1,9 см.
Несколько перемычек были вручную начерчены на шаблоне для улучшения его стабильности.
Шаг 2: Вырезание эмблемы
Перед началом вырезания внутренней части эмблемы я просверли несколько отверстий в пустом пространстве, чтобы вставить лезвие лобзиковой пилы. Затем я вырезал внутреннюю часть так, чтобы перемычки, которые были нарисованы ранее, остались на месте. При отсутствии лобзиковой пилы можно также использовать лучковую пилу.
Внешнюю часть эмблемы вырежьте с помощью ленточной пилы.
Каждую оставленную на месте перемычку сточите с помощью стамески до половины толщины деревянной заготовки.
Шаг 3: Подготовка эмблемы для нанесения смолы
Положите эмблему на кусок ДСП и проклейте по периметру, пытаясь создать герметичный барьер. Также добавьте вазелиновое масло в качестве смазки для форм. Как вы увидите в следующем шаге, данная идея имеет свои изъяны.
Вы можете использовать вощеную бумагу вместо вазелинового масла или просто купите антиадгезионную смазку для форм. Вы также можете прижать эмблему с помощью зажима к подкладному листу вместо создания барьера методом горячего приклеивания.
Шаг 4: Смешивание и выливание смолы
Мы часто использовали смолу под названием Famowood Glaze Coat. Она представляет собой двухсоставную эпоксидную смолу, смешанную в соотношении 1:1, и используемую для столешниц / столов. Она также отлично подходит в качестве герметизирующей / заливочной смолы. Кроме того вам следует добавить в смолу немного синей акриловой краски для придания ей нужного оттенка.
Медленно вылейте и убедитесь, что перемычки полностью покрыты смолой. Кроме того, вам следует удалить появившиеся пузыри на поверхности с помощью зажигалки. Просто водите пламенем вблизи смоляного пузырька, но прикасайтесь к нему и тогда он лопнет.
После удовлетворения результатом внешнего вида, оставьте эмблему застывать на 12-24 часов перед ее отделением от подкладного листа.
Шаг 5: Снятие и финишная обработка
При возникновении проблем при отделении эмблемы от подкладного листа и/или если некоторые части эмблемы прилипли из-за просачивания смолы, не волнуйтесь. Просто оторвите, как сможете, и затем счистите остатки. При использовании ДСП или твердого картона в качестве подкладного листа удаление остатков смолы не будет проблемой. Данный материал очень быстро шкурится с помощью наждачной бумаги с зерном 60-80.
После завершения процесса очистки и ошкуривания можно приступить к нанесению финишного покрытия для придания более темного оттенка нашей деревянной эмблеме. Для этой цели можно использовать смывку на базе полиуретана.
Шаг 6: Крепление и наслаждение своей работой
Наилучшим средством для крепления подобных предметов к стене являются съемные полоски с клеевым слоем для плакатов типа 3M. Подобные эмблемы не тяжелые, поэтому такой тип крепежных элементов прекрасно подойдет. На каждую эмблему достаточно три штуки.
Надеюсь, вам понравился наш проект. Удачи!
Логотип Бэтмена: как менялась летучая мышь
Обновлено Июнь 23, 2020
Первый талисман Бэтмена появился больше 80 лет назад и с тех пор пережил около 30 трансформаций. Как менялась эмблема и почему она всегда оставалась узнаваемой, расскажем в статье.
История создания лого
Супергерой Брюс Уэйн (Бэтмен) впервые появился на обложке детективного комикса в 1939 году. Его история объясняет необычный выбор логотипа.
По легенде, в детстве мальчик оказался свидетелем убийства своих родителей, и решил посвятить жизнь борьбе с преступниками. Воплощением этой миссии стала летучая мышь как олицетворение битвы против зла и стремления к справедливости. Каждый раз, преодолевая себя и совершая подвиг, герой становится сильнее, и никогда не прибегает к нечестным методам борьбы.
Первая версия логотипа была минималистичной. У животного отсутствовали уши и голова, а само изображение занимало небольшую площадь на костюме по сравнению с будущими версиями.
Эволюция эмблемы в фильмах и комиксах
Черная летучая мышь превратилась в неизменный атрибут Бэтмена на долгие десятилетия. Тем не менее, это изображение менялось около 30 раз — в основном за счет количества перепонок, формы и деталировки. Причем талисманы супергероя в комиксах и фильмах часто отличались.
Эксперименты с формой
Вскоре после появления размер лого увеличился вдвое, животному добавили голову и уши, а количество перепонок выросло с пяти до семи (в последующие годы оно постоянно варьировалось). В 1941 году картинка обрела готический стиль — крылья вытянулись и заострились.
В 1943 году супергерой впервые появился в телесериале. Хотя эмблема на его груди была небольшой, деталировку проработали более тщательно, чем в журналах. А в сериале конца 40-х, кроме синих прожилок на крыльях, мыши впервые добавили круглые уши. К тому времени логотип приобрел похожий вид и в журналах.
50-е годы ознаменовались изменениями формы: сначала ее скруглили, а затем сделали тоньше и шире.
Желтый овал
Знаковым для логотипа стал 1964 год, когда его впервые поместили в ярко-желтый овал. Хотя о причинах такого решения ходит множество легенд, на самом деле мотив был простым: открыть новую эру в дизайне эмблемы. Через два года изображение усовершенствовали: летучая мышь «расправила крылья», адаптировавшись к форме овала. Тогда же иконка появилась и в новом телесериале о Бэтмене.
Конец XX века стал экспериментальным. В 80-е годы от желтого цвета решили отказаться: на костюме Бэтмена нарисовали огромную летучую мышь с широкими крыльями, напоминающими плащ. Затем дизайнеры представили более изящный вариант, вдохновленный ретро-версиями. А в журналах 90-х Бэтмену вернули желтый цвет.
В боевиках того периода герой неизменно появлялся с узнаваемым цветным овалом. А с киноленты «Бэтмен навсегда» 1995 года начинается новая эпоха дизайна экранного лого. Он становится черным, и теперь его не рисуют, а выбивают на костюме, что придает картинке объем.
Новое тысячелетие
В 2000 году дизайнеры решили окончательно отказаться от желтого цвета. Форма приобрела классический вид, который хорошо знаком фанатам персонажа: сочетание изящных изгибов и заостренных деталей контура. Но через 16 лет в боевике «Бэтмен против Супермена» летучая мышь вновь раскрыла свой плащ: лого стал настолько большим, чтобы на нем мог уместиться красный талисман Супермена «S».
Как нарисовать логотип самостоятельно
Повторить контуры знаменитого лого несложно: все нюансы вы узнаете из видео с пошаговой инструкцией.
Обновлено Июнь 23, 2020
Email-курс «Как создать фирменный стиль за 7 шагов»
Вы узнаете, как создать свой фирменный стиль. 7 писем, в которых передаем 8 летний опыт команды Логастер.
Создавайте свой дизайн сейчас
Приступите к разработке своего фирменного стиля прямо сейчас. Введите название своей компании — и всего через минуту логотип будет у вас! Попробуйте сами! Нет ничего проще!
Как сделать логотип бэтмена
How to Create the Batman Dark Knight Logo in Adobe Illustrator
Создаем логотип Бэтмена из «Темного рыцаря»
От переводчика. Некоторые изображения пришлось ужать для соответствия правилам форума.
В ходе выполнения урока вам понадобится:
Начнем мы с настройки сетки, которая поможет в создании основы логотипа по технике «pixel perfect». Маски, основные режимы смешивания и методы «строительства» фигур помогут нам добавить блеск и текстуру. Далее задействуем возможности панели Appearance для добавления цвета, теней и дополнительных текстур на фон и логотип. В самом конце мы добавим несколько светящихся точек.
1. Создаем новый документ и настраиваем сетку
Нажмите Ctrl+N для создания нового документа размерами 600×410 пикселей, в режиме RGB, с разрешением 72 ppi, снимите галочку напротив пункта «Align New Objects to Pixel Grid». Включите отображение сетки (View> Grid; Ctrl+”) и привязку к ней (View> Snap to Grid; Shift+Ctrl+”). Настройте размер сетки: для этого зайдите в пункт меню Edit> Preferences> Guides & Grid и введите в поле «Gridline every» значение 5 пикселей и в поле «Subdivisions» – 1. Вы также можете открыть панель Info (Window> Info) для просмотра размеров и координат положения ваших форм. Не забудьте установить основными единицами измерений пиксели, если этого еще не сделано (Edit> Preferences> Unit> General). Все эти манипуляции значительно помогут в работе.
2. Создаем основную фигуру
На панели инструментов задайте для обводки значение «None», а заливке цвет R=247 G=148 B=30 (#f7941e). Инструментом Rectangle Tool (M) просто щелкните в монтажной области и задайте размеры 310×100 пикселей.
На панели инструментом измените цвет заливки на R=39 G=170 B=225 (#27aae1). Инструментом Ellipse Tool (L) создайте фигуру размерами 170×90 пикселей. Разместите овал как показано на изображении ниже, под цифрой 1. Обратите внимание на количество ячеек сетки между границами фигур – это облегчит точность позиционирования. Чтобы видеть сетку сквозь заливку овала, уменьшите его непрозрачность. Когда первый овал будет правильно расположен, не снимая выделения продублируйте его (Ctrl+C, Ctrl+F). Копию сместите на 170 пикселей вправо при помощи команды Object> Transform> Move (Shift+Ctrl+M).
Создайте еще один овал размерами 175×100 пикселей. Для удобства различения зальем его цветом R=0 G=148 B=68 (#009444). Не снимая выделения сместите фигуру командой Object> Transform> Move на 375 пикселей по горизонтали. По окончании нажмите на кнопку «Copy», дабы сразу создать дубликат фигуры.
Для этого шага понадобится вид сетки «каждый 1 пиксель». Для этого зайдите в меню Edit> Preferences> Guides & Grid и введите в поле «Gridline every» значение 1 пиксель. На панели инструментом измените цвет заливки на R=127 G=63 B=152 (#7f3f98) и нарисуйте прямоугольник размерами 55×45 пикселей, разместив его как показано на изображении ниже.
Масштабируйте изображение, чтобы хорошо видеть нижнюю часть фиолетового прямоугольника. Инструментом Direct Selection Tool (A) выделите правую нижнюю опорную точку и сместите ее на 10 пикселей влево, затем выделите левую нижнюю опорную точку, которую сместите на 15 пикселей вправо и на 5 пикселей вверх.
Если вы используете версию программы отличную от CC, то здесь вам понадобится скрипт Round Any Corner (ссылка в начале урока). Сохраните его на своем компьютере, распакуйте и поместите файл Round Any Corner.js по адресу c:\Program Files\Adobe\Adobe Illustrator CS6 (64 Bit)\Presets\%language%\Scripts\, где %language% – язык интерфейса программы; по умолчанию «en_US».
Инструментом Direct Selection Tool (A) выделите правую нижнюю опорную точку и примените скрипт File> Script> Round Any Corner с радиусом скругления 8 пикселей. Затем выделите левую нижнюю опорную точку и примените тот же скрипт с радиусом скругления 25 пикселей.
Если вы используете версию CC, то просто также по отдельности выделите эти точки и введите радиус скругления на контрольной панели. В конце концов должна получится изображенная ниже фигура.
Не снимая выделения с фиолетовой фигуры, примените к ней эффект Effect> Distort & Transform> Transform с указанными ниже настройками. Затем выполните команду Object> Expand Appearance. Получившуюся группу дважды разгруппируйте (Shift+Ctrl+G).
Нарисуйте прямоугольник размерами 17×15 пикселей. Залейте его цветом R=237 G=28 B=36 (#ed1c24) и расположите как показано на изображении ниже, под цифрой 1. Правую нижнюю опорную точку этого прямоугольника выделите инструментом Direct Selection Tool (A) и сместите на 4 пикселя влево. Левую нижнюю опорную точку сместите на 4 пикселя вправо.
Нарисуйте овал размерами 17×6 пикселей. Разместите его так, как показано на изображении ниже, под цифрой 1. Выделите этот эллипс вместе с трапецией полученной в предыдущем шаге и нажмите кнопку «Minus Front» на панели Pathfinder (Window> Pathfinder; Shift+Ctrl+F9). Должно получится показанное на картинке ниже, под цифрой 2.
Выделите все имеющиеся фигуры (Ctrl+A) и просто нажмите кнопку «Minus Front» на панели Pathfinder. В результате должна получится фигура показанная на изображении ниже под цифрой 2. В панели слоев измените ее имя на «logo».
3. Дорабатываем основную фигуру и добавляем фон
Инструментом Direct Selection Tool (A) выделите три опорные точки отмеченные синим цветом на изображении ниже, под цифрой 1. Примените скрипт Round Any Corner с радиусом скругления 0,2 пикселя. Или – для версии CC – введите это значение на контрольной панели. Затем выделите четыре опорных точки отмеченных на изображении ниже, под цифрой 2. Задайте им радиус скругления 1 пиксель. Наконец, выделите две опорные точки отмеченные на изображении ниже, под цифрой 3, и закруглите их на 3 пикселя.
Создайте прямоугольник с размерами 610×420 пикселей. Залейте его цветом R=67 G=71 B=82 (#434752) и отправьте на самый задний план (Shift+Ctrl+[).
Откройте панель Align (Window> Align; Shift+F7). В ее выпадающем меню выберите пункт «Show Options». В списке «Align to» укажите метод «Align to Artboard». Затем просто нажмите на кнопки «Horizontal Align Center» и «Vertical Align Center». В панели слоев именуйте эту фигуру «background».
4. Добавляем блеск и текстуру основной фигуре
Выделите 11 отмеченных ниже опорных точек красного контура и просто нажмите кнопку Delete на клавиатуре (чтобы случайно не задеть основную фигуру временно заблокируйте ее.). Должно получится показанное на изображении ниже, под цифрой 2.
Примечание переводчика. Обратите внимание, что в некоторых местах отметки обводят по две опорные точки. Во всех местах кроме одного нужно удалять только по одной точке из этих двух. Лучше не спешите и проверьте свой окончательный результат на соответствие оригиналу.
Активируйте инструмент Scissors Tool (C ) и разрежьте самую длинную часть красного контура в отмеченной ниже точке. Или же сначала выделите точку и нажмите кнопку «Cut path» на контрольной панели, если вы пользуетесь версией CC.
Выделите одну из частей красного контура и примените команду Select> Same> Stroke Color, чтобы выделить остальные. Измените цвет обводки на белый, уменьшите ее толщину до 0,5 пикселя и примените профиль «Width Profile 1». Не снимая с контуров выделения, сгруппируйте их (Ctrl+G) и уменьшите непрозрачность группы до 35%.
Сделайте копию группы белых контуров (Ctrl+C, Ctrl+F). К дубликату примените эффект Effect> Blur> Gaussian Blur с радиусом размытия 5 пикселей. Режим смешивания этой группы измените на Color Dodge и увеличьте непрозрачность до 80%.
Нужно маскировать выходящее за пределы основной фигуры размытие, сделанное в предыдущем шаге. Для этого продублируйте эту самую основную фигуру (Ctrl+C, Ctrl+F) и отправьте копию на самый передний план (Shift+Ctrl+]). Измените имеющийся цвет заливки фигуры на белый, затем выделите ее вместе с группой размытых контуров и в выпадающем меню панели Transparency (Window> Transparency; Shift+Ctrl+F10) выберите пункт «Make Opacity Mask».
Отключите привязку к сетке (View> Snap to Grid; Shift+Crtl+”), затем перейдите к пункту меню Edit> Preferences> General и убедитесь что смещение при помощи клавиатуры (Keyboard Increment) равно 1 пикселю.
Сделайте две копии логотипа (Ctrl+C, Ctrl+F, Ctrl+F). Верхнюю сместите на 1 пиксель вверх нажатием кнопки «Стрелка вверх» на клавиатуре. Затем выделите оба дубликата и нажмите кнопку «Minus Front» на панели Pathfinder. В результате должна получиться группа фигур. Объедините их в комбинированный контур, нажав Ctrl+8. Измените цвет полученной в результате фигуры на черный, уменьшите ее непрозрачность до 50% и измените режим смешивания на Soft Light.
Сделайте копию логотипа (Ctrl+C, Ctrl+F). У дубликат удалите заливку и назначьте обводку цветом R=237 G=28 B=36 (#ed1c24). Инструментом Direct Selection Tool (A) выделите отмеченные на изображении ниже, под цифрой 1, две опорные точки и затем просто нажмите Delete на клавиатуре. В итоге вы получите две части красного контура. Нам нужна будет только нижняя, верхнюю же удалите.
Выделите часть красного контура, оставшуюся после предыдущего шага. Измените ее цвет на черный, затем примените к ней в качестве обводки кисть «Chalk», найти которую можно в разделе Window> Brush Libraries> Artistic> Artistic_ChalkCharcoalPencil. Непрозрачность готового контура уменьшите до 20% и измените его режим смешивания на Soft Light.
Маскируем действие кисти, примененной в предыдущем шаге, выходящее за пределы логотипа. Продублируйте основную фигуру (Ctrl+C, Ctrl+F). Отправьте копию на самый передний план (Shift+Ctrl+]), затем измените у нее цвет заливки на белый. Выделите ее вместе с «меловым» контуром и выберите пункт «Make Opacity Mask» в выпадающем меню панели Transparency.