Как сделать логотип для сайта самому (онлайн бесплатно)

Как сделать логотип для сайта самостоятельно, если нет таких навыков и соответствующих программ? К счастью, в наше время – это вполне решаемая задача. Не нужно никакого специализированного софта, создать логотип для своего блога можно самому в режиме ONLINE, с помощью специальных сервисов. О них как раз и пойдет речь в этой статье, но и кроме этого, вы узнаете о том, как сделать логотип в виде надписи или кнопки, графического элемента или просто текста, с помощью фотошопа или онлайн-сервисов, а также как его установить на блог wordpress.

Как сделать логотип для сайта самому (онлайн и бесплатно)Логотип (лого, logo) – это фирменный знак блога, отличающий его от других. Это важнейший элемент, который должен присутствовать на каждом сайте, практически все успешные web-сайты имеют свой уникальный логотип! Он может представлять собой как обычную надпись (url-адрес или название сайта), так и графический элемент (животное, растение или любой предмет).

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

1. Что такое логотип

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

С появлением интернета логотип стал появляться у многих сайтов. Так вебмастеры старались выделиться. А сейчас ситуация кардинально изменилась: популярность логотипа так возросла, что он стал неотъемлемой частью любого сайта. И теперь лого нужен для того, чтобы «не выделяться из толпы» – в плохом смысле фразы.

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

Логотипы можно разделить на три вида:

  • текстовые;
  • графические;
  • и текстовые, и символьные.

К логотипу предъявляется большое число требований:

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

2. Как сделать текстовый логотип (онлайн)

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

2.1 Logaster.ru

Начинает наш список русский онлайн генератор логотипов Logaster
Этот сервис позволяет быстро создавать бесплатные логотипы.

Logaster - создание логотиповПроцесс создания логотипа очень прост. Все что вам нужно сделать — это ввести название фирмы и выбрать тематику бизнеса.
Далее, конструктор сам сгенерирует множество различных вариантов, а вам остается только выбрать наиболее понравившейся.
При желании, логотип можно отредактировать, кликнув на “Редактировать лого”.
Основные преимущества сервиса — это простота, русский интерфейс, поддержка кириллицы и огромная база качественных иконок и шрифтов.

Logaster - генерация логоЗа отдельную плату логотип можно скачать в растре (PNG, JPEG) и векторе (SVG, PDF)

2.2 Creatr.cc

Удобный и простой генератор лого, отлично подойдет для тех, кто желает быстро создать логотип, не вдаваясь во все тонкости этого дела. Вы сможете сделать себе логотип менее, чем за минуту – вам нужно будет лишь ввести надпись, которую вы желаете видеть в логотипе, выбрать подходящий стиль и нажать на кнопку [Enter]. Другими словами, создание лого проходит в 3 шага:

  • шаг 1: выбираем понравившийся стиль и кликаем на него;
  • шаг 2: вводим желаемую надпись, при необходимости меняем некоторые настройки стиля;
  • шаг 3: нажимаем на кнопку [Create Logo] и скачиваем логотип.

Как работать с генератором логотипов creatr.ccВ результате вы получите незамысловатый logo небольшого размера (около 50 килобайт). Расширение – png. Вот как у меня получилось:

Логотип с помощью creatr.cc

2.3 Cooltext.com

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

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

Конструктор лого cooltext.comПосле этого вы перейдете на страницу с параметрами стиля, где вы сможете настроить:

  • шрифт;
  • цвет шрифта;
  • цвет фона (если есть);
  • градиент фона;
  • параметры градиента;
  • расширение логотипа.

Конструктор cooltext.com - настройкаЕсли вы решите поменять шрифт текста или фон, на котором он расположен – кликните по ним и выберите более подходящие.

Лучше всего сохранять логотип в формате gif (хуже качество, меньше размер) или png (лучше качество, но больше размер).

Настроив параметры, нажимайте на [Render Logo]. После этого вы попадете на страницу с изображением вашего логотипа. Скачайте его с помощью ссылки Download Image.

Вот такой логотип я сделал для своего сайта с помощью данного генератора:

Конструктор cooltext.com - итог

2.4. Simwebsol.com

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

Конструктор simwebsol.com[Text] – надпись на логотипе.

Галочка [Bold] – жирный, [Italic] – курсив, [Underline]подчеркнутый.

[Background Color] – цвет фона, справа от него находится палитра. Нажав на нее, вы сможете выбрать подходящий. Аналогично для полей [Color A] и [Color B] – это другие цвета логотипа.

[Font] –вид шрифта.

[Font size] – размер шрифта.

[Reflection Proximity] – это поле можно пропустить, оно отвечает за прозрачность лого.

[Add Symbol] – здесь можно выбрать красивый символ и добавить его в логотип.

[Symbol Position] – расположение символа: [Left] – слева; [Right] – справа.

[DPI] – разрешающая способность, чем она выше, тем больше размер файла и выше качество. Я использую стандартное значение.

[Type] – тип расширения. Я рекомендую сохранять файл в форматах png или gif.

Настройте параметры и нажмите на кнопку [Create Logo], через несколько секунд страница перезагрузится, и вы увидите свой логотип в верхней части странички. Чтобы скачать его, нажмите на него правой кнопкой мыши и выберите «Сохранить картинку на компьютер» или что-то аналогичное.

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

Помимо обычных генераторов, существуют также и конструкторы кнопок. В этом случае ваш логотип может красоваться на фоне кнопки. Такие logo оригинальные и красивые, поэтому есть смысл их использовать.

3.1 Web20badges.com

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

Итак, вы увидите три поля:

Генератор кнопок Web20badges.comПервое поле содержит шаблоны кнопок. Выбирайте любой понравившийся и нажимайте на него левой кнопкой мыши. Через несколько секунд в третьем поле картинка обновится. Кстати, учтите, что цвет шаблона поменять нельзя!

Второе поле содержит параметры надписи. Поле [Text] – надпись на логотипе. Кнопка [Aply] – применить изменения.

[Font] – вид шрифта; [Font size] – размер шрифта; [Font color] – цвет шрифта. Ниже распологается палитра, с ее помощью вы можете поменять цвет надписи.

[X, Y coordinate] – координаты надписи (по умолчанию – центр). Если вы хотите сместить надпись, измените эти значения.

[Angle] – вращение надписи в градусах (против часовой стрелки).

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

3.2 Dabuttonfactory.com

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

Генератор кнопок Dabuttonfactory.comГенератор кнопок состоит из трех областей. Здесь кнопки создаются в виде прямоугольников.

В первом поле находятся параметры надписи logo-картинки:

[Text] – надпись лого.

[Font] – размер шрифта.

Галочки [Bold] и [Italic] – жирный и курсив.

[Size] – размер надписи.

[Color] – цвет надписи.

[Text shadow] – тень надписи.

[Distance to text] – отдаленность тени от надписи.

[Color] – цвет тени.

[Output type] – выходной тип (выберите css background, чтобы получить css-код).

[Image format] – формат изображения.

Во втором поле находятся настройки кнопки:

[Style] – вид углов.

[Background] – стиль заливки.

[Bolder] – наличие рамки.

[Shadow] – наличие тени от рамки.

[Size] – размер кнопки (либо фиксированный, либо резиновый).

В третьем поле отображается сам логотип. Вы можете его сохранить на компьютер в любой момент.

4. Как создать логотип в фотошопе

Не обязательно использовать онлайн-сервисы для создания логотипа. Вы также можете воспользоваться фотошопом, программа позволяет создать очень красивые варианты logo-картинок и фавиконок. Давайте попробуем сделать мини-логотип в виде кнопки.

Запустите фотошоп и выберите Файл—>Создать, здесь выберите ширину и высоту нового документа. Выбирайте их размеры такими, какой хотите видеть кнопку. Я, к примеру, взял их равными по 250 пикселей. Теперь выбираем форму кнопки: это может быть прямоугольник с обычными или острыми углами, круг, овал, ромб и т.д. Я выбрал круг. Стрелочками показано, где можно найти формы (сначала нажмите туда, куда указывает цифра «1», а затем выбирайте форму там, куда показывает цифра «2» на рисунке ниже):

Создание кругаКстати, если захотите сделать круг, то выберите овал (как на картинке), зажмите [Shift] и рисуйте. Также не забудьте указать подходящий цвет кнопки.

Теперь нужно немного украсить получившийся овал. Выбирайте Слои—> Стиль слоя—>Внутренняя тень. Тут нужно выставить смещение и размер тени. Я выбрал смещение равным 5 пикселям (стандарт), а размер тени – 50 пикселям. Можете экспериментировать с этими цифрами, попробуйте также и добавить стягивание.

Создание внутренней тени в фотошопеТеперь я немного деформирую кнопку, чтобы она выглядела неровной. Для этого я выбираю Фильтр—>Искажение—>Искривление и настраиваю его. Добиваюсь того, чтобы кнопка выглядела не слишком криво. Кстати, вы можете попробовать какой-нибудь другой эффект.

Искривление

Теперь добавим лучик света на кнопку, заходим в Фильтр—>Рендеринг—>Блинк, выбираем место, где он будет:

Блинк в лого

Почти все, осталось добавить надпись. Я выбрал url-адрес своего блога. Вот и все, у меня например получилось следующее (я лучик добавлять не стал):

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

5. Как сделать графический логотип

Логотип может содержать не только надпись, но и какой-нибудь графический элемент. Для этого дела подойдет отличный конструктор, находящийся по адресу onlinelogomaker.com. Перейдите на этот сайт, найдите сылку online logo maker, на нее и нужно нажать для того, чтобы попасть в генератор лого.

Сервис onlinelogomaker.com

Как только конструктор загрузится, вы можете начать работу. Он достаточно мощный, функций много, поэтому не торопитесь – разбирайтесь с ним потихоньку. Генератор имеет 5 полей (нажмите на картинку для увеличения):

Как сделать самому графический лого

Первое поле содержит в виде списка объекты логотипа (на англ. языке).

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

Третье поле содержит ссылки, которые, в принципе, вам не понадобятся. На них не обращайте внимания.

Четвертое поле содержит такие параметры, как вращение, затемнение, позиция элемента и т.д. Вы можете использовать параметры этого поля, но все это можно сделать с помощью мыши.

Пятое поле – внешний вид получившегося логотипа, рабочая панель.

6. Где заказать хороший логотип

Увы, но у таких генераторов есть существенный недостаток – вы получаете логотип среднего качество. Если же вы хотите создать для своего сайта действительно качественный logo, тогда вам лучше обратиться к профессионалам и заказать у них разработку логотипа. Найти таких специалистов вы можете на биржах фрилансеров:

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

В общем, логотип обойдется вам где-то в 1000-1500 рублей. Дороговато, но оно того стоит!

Если вы не можете найти подходящего логотипа, тогда воспользуйтесь услугами этого веб-дизайнера. И закажите его здесь: polimax.com.ua. Цена примерно такая же, но вы можете быть уверены в качестве работы этого исполнителя.

7. Как добавить логотип на блог wordpress

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

  • тема поддерживает замену логотипа в своих настройках;
  • тема не поддерживает замену лого, но имеет стандартный логотип logo.png;
  • тема не поддерживает замену и не имеет логотипа.

Первый случай самый простой: зайдите в настройки темы и замените стандартный логотип на собственный.

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

/wp-content/themes/имя_вашей_темы/images/

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

Третий случай наиболее сложен. Вам придется «заставить» тему воспринимать логотип. Для этого зайдите в редактор темы (через админку wordpress) и отредактируйте Заголовок (header.php). Вставьте в нужном месте (внутри тегов <body> </body>) такую строчку:

<?php bloginfo ('template_url')?>/images/logo.jpg

Теперь проделайте все действия, описанные во втором случае. Если все выполните, то картинка появится.

И вот вы знаете, как сделать логотип для сайта самому и добавить его на блог wordpress. Дерзайте!

Ваш комментарий

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

  2. Спасибо за статью — подробная, а главное нужная как раз логотип поменять хотел.

  3. Еще одна статья «Как создать логотип» на сайте — http://stardap.ru/create-a-logo/

  4. Станислав, а как быть если мой логотип больше по размеру?. Логотип темы очень короткий. Где прячутся эти размеры в кодах. В файле (header.php) размеры логотипа не указаны. Где их можно изменить, чтобы мой логотип был виден полностью. Сейчас он только частично виден на сайте.

    • Размеры, как правило, вообще не прописываются, вставляйте ту картинку, которая у вас есть. Или у вас как-то неправильно отражается логотип?

      • Именнно! Его видно только частично. Примерно на 2/3 длины. Я уже обыскалась как это устранить. А автор шаблона только за деньги устраняет. И недешево. :).

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

        • все размеры и цвета в css там же и ваше лого по размеру изменяется и его расположение.если не используется css для шаблона,то в общем файле блоков.для шапки header,для контента content или другой,зависит от шаблона и имени файла разработчиком,ну и подвал footer,в этих файлах и заложен общий параметр.а блоки могут выводится и с явки.так что трудитесь и ваш труд оценят

  5. Juituatapep:

    Хочу заказать рекламу у вас, куда писать?

  6. Имя:

    Спасибки автору! Нормальный сайт вот только дизайн не самый подходящий, малость не удобный.

  7. Недавно нашел в нете хороший онлайн сервис по созданию лого http://logaster.com

    Результатом доволен

  8. Статья оч понравилась. Как раз, блог доделал, оптимизировал, теперь осталось логотип поменять. Думаю даже обращусь к спецам!

  9. =) У вас классный блог, четкий дизайн :) мне нравится, добавлю от себя есть еще одна программка AAA logo, тоже неплохой вариант

  10. Да, статья полезная. Я воспользовался одним из предложенных сайтов и обновил себе логотип. Страничку в закладки однозначно!

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

  12. Как отмечено на главной странице нашего сайта, «знаки, которые мы создаем, должны быть живыми»!

  13. Еще надо учитывать, что в будущем может понадобиться нанесением логотипа. А то в вышивке, например, с мелкими деталями проблема, для нее нужно что-то вроде: http://www.promvishivka.ru/logotip.html Лучше заранее подумать.

  14. Спасибо! Будем пробовать разные варианты сделать Лого.

  15. Благодарю за статью, она помогла в создании логотипа для моего ресурса http://irazvitie.com/

  16. Логотип — это лицо проекта, компании. И лучше не скупиться и заказать у дизайнеров !
    Профессиональная разработка логотипа, фирменного знака и стиля компании: http://di56.ru/razrabotka-logotipa

  17. На всех этих сервисах-генераторах можно найти классные идеи для своего логотипа, но всё же лучше обратится к дизайнерам. Сейчас делают за 2-5к рублей, вот же раньше были цены.

  18. thomson airways live flight information cheap flights hnl to hilo airline sg india xtranormal airline pilot airline shirts rtw flights from usa airline guitar kit cheap airline tickets to odessa ukraine mg airlines airport.lk arrivals cheap flights rci
    cheap tickets hunter hayes airport post office united airlines flight 175 youtube airfare more expensive on weekends airline from singapore to taipei american airlines iqaluit cheap airline tickets http://www.smartfares.com cheap tickets seoul ljk airlines flight status xl 538 flight status pvr flights udon thani to bangkok airfare kolkata to chennai airfares jetstar discount tickets soak city palm springs
    kzr airlines airport router mode airline avianca discount tickets nfl airport sdq dominican republic southwest airlines tickets specials mk airlines kemble bj’s airline tickets airports upstate ny vz airlines code flights to kwajalein atoll airfare metasearch
    southwest airlines book flight over phone airline first officer salary tax return date chart find flights any destination airport bdg flight status smf airport cheap flights ndola to lusaka flights las vegas to los angeles united airlines flight to hnl hotel online booking south africa qantas airfares gold coast javascript return utc date

  19. jal flight information airline dk find cheap flights australia airports weather airports timetables change return date ryanair when airfares are low buy tickets online india vs west indies airlines service branson mo cheap tickets peru lima jmc airlines
    flight information terminal 1 delta airlines ticket support email flight information zurich airport cheap tickets hungary american airlines flights curacao cheap tickets phantom opera london bsa airlines zz flights oceanic airlines united airlines flight departure gates united airlines international flight pet policy ktvu airline report airlines dba united express vueling flights from heathrow yda airport
    airport ski transfers flight status vx71 book hotel suites online discount airfare kauai flights nsw south coast book hotel online perth airport hro cheapest air ticket rates flights jaipur to delhi airport wmi airport aoi flight information thailand airport
    cheap flight agents airports eire online hotel booking kochi airlines olbia airlines cheap znz flights airports nrw american airlines flight purchase expedia change flight date policy southwest airlines xbox airline search and rescue airfare buenos aires

  20. qr airline tracking mac flights jblm cheap airline tickets notification thomson airways flight updates iinet airport extreme book online flight from ghana to nigeria airline pjs cheapest airline tickets to oahu hawaii american airlines international flight rules search flight code airline zy sitzplatzreservierung
    book flight online australia airports vietnam american airlines flight delays dallas ouat return date airport gym zurich airports near akihabara mvp airline cheap rtw airfares cheap tickets blackhawks cheap flights yul to pop united airlines flights mco delta airlines flight change due to death in family airline epaulettes cheap airline tickets aaa discount airfare ft myers
    airfare notification southwest airlines flight attendant alex funny cheap tickets sg dbs airfares vancouver to london airlines yangon return date ny court find flights by date and time vxworks airport extreme cheap tickets london to manchester vat return date in gujarat fh airlines airfare sfo to paris
    cheap flights dbn to cpt cheap air tickets from qatar to chennai cheapest air tickets pune to bangalore airport wuerzburg cheap tickets paul mccartney cheap air tickets round trip airfare doha to dubai cheap airline tickets cheapoair discount tickets bmw championship ek airlines cargo airports niagara falls canada flights to npl

  21. tony:

    Поделитесь мнением.

  22. мгновенный онлайн кредит — сервис быстрых кредитов, онлайн кредит на карту.

  23. газпромбанк — Бик 046311751, ооо мфо цфп.