Перейти к содержимому
  • записей
    13
  • комментариев
    350
  • просмотров
    1 289

Как создать крутое лого для формы!

Met

217 просмотров

Чтобы сделать хороший логотип нужна программа которая может работать с прозрачный фоном. Если лень качать Photoshop, то подойдёт Paint.Net http://paintnet.ru/download/, это хорошая бесплатная программа, хорошо подходит чтобы быстро что-то сделать небольшое. Мало весит, систему не грузит. Неплохой функционал. Я устанавливал её через настраиваемую установку, мусора никакого с ней не ставится.

Качаем нужное лого из интернета. Если получится найти без фона, то половина работы уже сделана. Возьмём для примера логотип омского Авангарда (лого удалось найти без фона):

Avangard_Omsk.png

Размер логотипа для свитера указан когда его ставишь - 80х30 (Ширина х Высота). Меню: Менеджер - Спонсор - Форма команды. Максимальный вес 15 килобайт.

1_l.png

Открываем лого в Paint.Net. Жмём вверху на панели - Изображение - Изменить размер:

2_l.png

Ставим галку, если не стоит в Сохранять пропорции. Выбираем Ширину 80 пикселей. Жмём ОК:

3_l.png

Затем идём снова во вкладку Изображение, но теперь выбираем Размер полотна.
Убираем галку, если стоит, с Сохранять пропорции. Прописываем Высоту 30 пикселей. Привязку можно оставить так, потому что с боку мы отрезать ничего не будем. Жмём ОК:

4_l.png

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

Выбираем инструмент Перемещение - просто кликнуть по нему. Жмём стрелку на клавиатуре, в данном случае влево (<--) и смещаем лого чтобы оно было плюс минус в центре.
Одно нажатие стрелки смещает изображение на 1 пиксель.

5_l.png

Сохраняем, называем как хотите. Загружаем в игру.

Левый вариант, это если не сдвинуть лого Авангарда. Правый, если сдвинуть:

6_l.png

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

Можно просто смотреть на форму в браузере и на глазок подобрать цвет пока не получите похожий.
В проге жмём вверху на панели Коррекция - Оттенок и насыщенность. Откроется такое окно. Я сделал лого темнее через уменьшение осветлённости, поставил -50, но можно. Экспериментируйте:

9_l.png

Загружаем в игру наше новое лого. Названия лучше менять каждый раз, когда грузите новое лого, а то иногда не обновляется. Я обычно просто цифру меняю рядом с буквой =)

10_l.png

В Фотошопе можно просто наложить цвет, если это однотонный логотип или подвигать ползунки в Коррекции, если лого с несколькими деталями. Чтобы подобрать однотонному логотипу цвет один в один как у формы, нужно скачать картинку формы или сделать скриншот.

7_l.png

Открыть картинку с формой в фотошопе. Выбрать инструмент Пипетка и ткнуть на нужный цвет на форме. Затем жмём на маленький квадратик с цветом возле большой палитры. У меня Photoshop CC 2018, плюс немного перенастроенный, поэтому положение окон будет отличаться, но принцип не меняется:

11_l.png

Копируем название цвета:

12_l.png

Открываем наш логотип в Фотошопе, если ещё не открыт. Справа на панели выбираем вкладку Слои (она скорее всего по умолчанию будет открыта, но чуть ниже).
Два раза кликаем на слой с логотипом. Откроется меню Стиль слоя. В нём выбираем Наложение цвета. Чуть правее оставляем Режим наложения - Нормальный. Непрозрачность 100%. Кликаем на прямоугольник с цветом. Откроется Палитра цветов. В неё копируем название цвета, которое скопировали ранее и жмём ОК и там и там.
Сохраняем лого.

13_l.png

Загружаем в игре и радуемся :dance4:

Можно сделать обводку и поместить лого на тёмную форму! Это актуально когда лого может сливаться или стать плохо различимым, а нам нужно к примеру поместить наше тёмное лого на чёрную форму. Или можно сделать так для красоты, сделать обводку 3-м цветом, к примеру!

Я добавил новый слой Shift+Ctrl+N и залил чёрным, чтобы было видно белую обводку. Кликаем на слой с логотипом. Выбираем слева в панели инструмент Перемещение. Жмём на клавиатуре стрелку вниз один раз (это смещение логотипа вниз на 1 пиксель). Мы будем добавлять обводку толщиной 1 пиксель, но логотип у нас расположен впритык, поэтому если не сдвинуть, то обводка с угла крыла обрежется.

Два раза кликаем по слою с логотипом и заходим в меню Стиль слоя. Выбираем Выполнить обводку. Настраиваем справа как на скриншоте и жмём ОК:

143_l.png

Жмём на глаз рядом со вторым слоем, чёрным, чтобы скрыть его (если создавали слой). Жмём Файл - Сохранить как или просто Shift+Ctrl+S. В окне там где пишите Имя файла, ниже выбираем Тип файла - PNG. Сохранить. ОК.

14_l.png

Добавляем в игру:

15_l.png

Всё готово!

Редко, но бывает - Если вес картинки получился больше допустимого, то можно:

1.При сохранении уменьшить качество. Вы увидите когда будете сохранять, что там можно выбрать качество и в Paint.Net и в Photoshop.
2.В поисковике вбить - уменьшить вес картинки PNG. Вылезет куча сайтов, там на любой загружаете её. Сайт обрабатывает и скачиваете обработанное. Возможно чуть в качестве где-то потеряет, но там незаметно глазу будет скорее всего =)

В принципе всё просто!

Если логотип с фоном, то качайте хорошее качество и самый большой размер. Желательно белый фон, на крайняк просто однотонный. Возьмём к примеру логотип хабаровского Амура! Оригинал 800х800:

16_l.png

Выбираем слева на панели инструмент Волшебная палочка. Кликаем вокруг тигра по белому фону. Если весь фон за один клик не выделить, как тут т.к. он прерывается из-за ушей и подбородка, то зажимаем клавишу Ctrl и жмём левой кнопкой мыши (ЛКМ) по всем участкам фона, который нужно удалить.

17_l.png

Когда всё выделили, жмём кнопку Delete. Получаем картинку без фона:

18_l.png

Какие могут быть проблемы:

Если картинка небольшая или не чёткая, то вокруг картинки будет коцанная полоска цвета фона после удаления фона. Всё это убирается в Фотошопе, но для начала хватит и такой информации думаю =) Если что добавлю.

Дальше делаем что написано выше. Также можно поменять цвета лого, как я уже говорил, но т.к. у логотипа несколько цветов, то наложить цвет не получится как делали в Фотошопе, нужно будет делать Коррекцию. В Paint.Net можно сделать так, к примеру - на верхней панели жмём Коррекция - Оттенок и насыщенность. Я поставил оттенок 25 и вот что получил:

19_l.png

Картинку советую всегда сохранять в PNG!

20_l.png

Примечания:

Я обычно всё делаю в Фотошопе, но для примера сделал в Paint.Net т.к. он не такой громоздкий и большинство возможно будет делать в нём.
Обводку в Paint.Net не сделать. Если только кустарными методами. Можно попытаться найти лого с обводкой и без фона или качайте Фотошоп, он не сложный, а просто многофункциональный.
Отступ снизу в 2 пикселя на форме не убрать, игра так размещает логотип, так заложено Ико.
Лучше не выбирать продолговатые логотипы, например меч т.к. при обрезке на лого будет только рукоять, это такое себе =) Лучше выбирать логотип, который будет занимать достаточно много места на отведённом размере, на мой взгляд так выглядит лучше.
Не оставляйте отступы на и так небольшой высоте в 30 пикселей, если конечно вы не хотите сделать логотип уже.

Если не получается, то я могу вам сделать лого, только пишите какое нужно =)

Вот несколько готовых лого:

atl1.png - Атлант KaT1.png- Казцинк-Торпедо Ava2.png - Авангард

mmg1.png - Магнитка tig1.png- Амур (с белой обводкой) spa1.png - Спартак

lada1.png - Лада dyn1.png- Динамо sib1.png - Сибирь

avt1.png - Автомобилист ks1.png-Крылья Советов

 spa3.png - Спартак (Гладиатор - белый) Выглядит так --> spa2.png

  • Плюсую 5
  • Спасибо 1


7 комментариев


Recommended Comments

Обновлено:

НХЛ:

tml.png - Торонто Мэйпл Лифс njd1.png - Нью-Джерси Дэвилз (цвет внутри лого белый)

nyi1.png - Нью-Йорк Айлендерс (белая обводка) + Алтернативная nyi2.png

Россия + соседи (Включая старые лого):

Ugr1.png - Югра sp1.png - Спутник l_a1.png - Лада (Альтернативная новая - фона нет, чисто контуры совы)

sk1.png - СКА (Старое) + ska1.png + sk4.png

dmsk1.png - Динамо Минск ks2.png - Крылья Советов

izh1.png- Ижсталь hm1.png - Химик + hmk1.png

dr1.png + dr_o1.png - Динамо Рига diz1.png - Дизель

T_Y1.png Торпедо Ярославль + T_Y2.png

cska1.pngЦСКА + cska2.png + cska3.png


Другие лого из интернета (не обязательно хоккейные):

Mtb1.pngsh1.png hor1.png hn2.png lynx1.png

mct1.pngk1.png

  • Спасибо 1

Поделиться комментарием


Ссылка на комментарий
29 минут назад, Alexeitch сказал:

Хакуна Матата! 

hmtt1.png - Без обводки.

hmt1_2.png - С белой обводкой.

49 минут назад, Kandey сказал:

АМУР!!!

amur1_o.png - С белой обводкой amur1.png- Без обводки

amur3.png- Без обводки amur3_o.png- С белой обводкой

Amur2.png- Без обводки

Поделиться комментарием


Ссылка на комментарий
1 час назад, Met сказал:

hmtt1.png - Без обводки.

hmt1_2.png - С белой обводкой.

amur1_o.png - С белой обводкой amur1.png- Без обводки

amur3.png- Без обводки amur3_o.png- С белой обводкой

Amur2.png- Без обводки

Ух, пасябо! 

Поделиться комментарием


Ссылка на комментарий

НХЛ:

pit1_o.png - Питтсбург Пингвинз pit1_o.png - С белой обводкой

pit2.png + pit2_o.png (С обводкой) + pit3.pngpit3_o.png (С обводкой)

wj1.png - Виннипег Джетс  ott1.png - Оттава Сенаторз nyr1.png- Рейнджерс

mtl1.png- Монреаль Канадиенс buf1.png - Баффало Сэйбрз stl1.png- Сент Луис Блюз

tbl1.png- Тампа Бэй Л. anh1.png- Анахайм Дакс + amd1.png + anh2.pnganh3.png

atw1.png- Атланта

КХЛ + ВХЛ:

sch1.png- Сочи vtz1.png- Витязь sev1.png- Северсталь +sev1_o.png(Обводка)

tor1.png - Торпедо НН syu1.png- Салават Юлаев  mnk1.png + Металлург Новокузнецк

mnk2.png + mnk2_o.png(С обводкой) akb1.png - Ак Барс bur1.png - Буран

mpk1.png- Молот Прикамьеmpk2.png(С обводкой) nfa1.png - Нефтяник Альметьевск

mmk2.png - Металлург Магнитогорск + mmk3.png + mmk3_o.png(С обводкой)

nh2.png - Нефтехимик tr1.png- Трактор + tr2.png(С обводкой)

brs1.png - Барыс + brs2.png av1.png - Авангард Омск lok2.pnglokm1.png - Локомотив

Другие:

tig2.png

Поделиться комментарием


Ссылка на комментарий

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

Добро пожаловать, уважаемый Гость!

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

Тем не менее, приятного чтения!

 

×