Главная » Дизайн » Как сделать логотип для сайта в фотошопе
как сделать логотип сайта через фотошоп

Как сделать логотип для сайта в фотошопе

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

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

Пример логотипа сайта.

Давайте рассмотрим на конкретном примере как создается отличное и простое лого для сайта через программу фотошоп. Как и в прошлой мы будем создавать логотип, в котором доминирует словосочетание “Fashion store”. За основу был взят макет заграничного сайта:макет сайта

Нетрудно заметить, что логотип встречается в двух местах:

  • В шапке: левый верхний угол макета;
  • В подвале: правый нижний угол макета.

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

  • Это является весьма ощутимым плюсом к методу создания логотипа в фотошопе – лого всегда можно изменить и доработать.

Делаем логотип сайта в фотошопе.

Сделав такой логотип один раз, вы с легкостью сможете создать что-то подобное самостоятельно! Поэтому советую открыть фотошоп и повторять все действия. Если же у вас на компьютере нет такой программы, то обязательно скачайте – она обязательно пригодится!

Я немного упрощу и сокращу те действия, которые использовались при создании данного логотипа в оригинале (например у нас не будет сетки).

Итак, делаем логотип для сайта через программу фотошоп по шагам:

1. Открываем фотошоп и создаем новый файл (быстрые клавиши ctrl+N) разрешением 240 пикселей в ширину и 90 в высоту, фон ставим прозрачный:создаем новый логотип сайта

Такого разрешения нам вполне хватит для логотипа.

2. Далее делаем следующее:направляющие

  1. Создаем новый слой для удобства;
  2. Выбираем инструмент “заливка”;
  3. Выбираем белый цвет и заливаем “слой 1″;
  4. Ставим горизонтальные направляющие на расстоянии в 15 пикселей от верха и низа (зажав левую кнопку мышки тащим их вниз от линейки);
  5. Ставим вертикальные направляющие в 20 пикселах от левого и правого края.

3. Рисуем круг 60 х 60 пикселей:эллипс

  1. Выбираем нужную фигуру;
  2. Рисуем ее (для этого я поставил еще одну направляющую, чтобы получился ровный круг диаметром 60 пикселей);
  3. Кликаем по цвету;
  4. Ставим код цвета #2d2d2d;

4. Рисуем букву F в круге со следующими параметрами и выравниванием:большая буква F

Обратите внимание, что используется нестандартный шрифт Avant Quelombre, который вам скорее всего придется скачать и добавить к шрифтам в Windows. Именно за счет этого шрифта и достигается весь эффект логотипа.

5. Пишем слово Fashion со следующими параметрами (цвет #2d2d2d) и месторасположением:fashion

6. Пишем слово store со следующими параметрами (цвет #767676):store

7. Удаляем белый фоновый цвет и сохраняем проект и картинку для логотипа.

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

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

Так же букву F в круге будет здорово использовать в качестве фавикона для сайта – об этом уже упоминалось в статье про 5 правил создания логотипа.

Какой вариант логотипа вам нравится больше? Те, что были созданы через онлайн сервисы или логотип сделанный в фотошопе.

Комментировать через ВКонтакте:
Отзывов к посту "Как сделать логотип для сайта в фотошопе" уже 17:
  • Дмитрий | 26.03.2013 в 13:28

    Простецкий лого, хотя у меня на блоге так-же очень простой логотип)

  • Serpent | 26.03.2013 в 17:22

    Сделанное своими руками всё-таки лучше. Да и дополнительный повод для гордости самому себе – “я сам сделал”. ))

    • admin | 27.03.2013 в 16:17

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

  • Алексей Фомичев | 29.03.2013 в 6:31

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

  • Юлия | 02.04.2013 в 17:38

    Мне урок понравился. Все наглядно расписано и показано, справится даже новичок в фотошопе. Да и сам логотип стильненький такой. :)

    • admin | 02.04.2013 в 17:39

      Угу простенький и ничего лишнего, и главное выдержан в стиле сайта :)

  • Vasili70 | 04.04.2013 в 19:24

    Не раз читал в Инете о том, что логотип свой нужно создавать…Как оказывается, блоговедение – это самый обычный бизнес, только в режиме “он-лайн”…

  • dragon6827 | 06.04.2013 в 15:47

    Спасибо, отличная статья! В фотошопе удобно работать, хорошая программа.

  • Иван | 09.04.2013 в 17:17

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

  • Денис | 12.04.2013 в 7:34

    Радует, что все подробно расписано и в примерах русского интерфейса программы фотошоп. Молодец!

  • Сергей | 02.11.2013 в 0:04

    Хороший урок, с достойным результатом простого читабельного и запоминающегося логотипа! :|

  • Ирина | 17.06.2014 в 12:50

    Вот объясните мне, новичку из новичков, как можно прозрачную ОСНОВУ окрасить в какой-либо цвет? у меня только выходит, если в новом слое и то отдельно от созданных слоев. Заливка вообще бесполезна, сколько не нажимай… а могу только слой-маску создать и все. так как вы прозрачность окрасили? или нужно все таки создать белый фон? лишняя работа получается

    • Елена | 11.12.2015 в 0:00

      Ирина, не надо прозрачную основу красить, изначально фон просто белый, а прозрачным он становится после сохранения в png формате. Если этот же лого сохранить в jpg, то фон будет белый. Думаю разберетесь, как изменять цвет фона.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: