Dangels Blog » Советы » Создаем красивое лого в стиле Веб 2.0

Создаем красивое лого в стиле Веб 2.0

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

Создаем красивое лого в стиле Веб 2.0


Создайте новый документ размерами 1000 на 1000 пикселей с белым фоном.
Напечатайте свой текст логотипа. Шрифт выберите по вкусу (я использовал Trebuchet MS). После этого задайте цвет Вашего текста (я выбрал #0042ff). Размер шрифта установите в 160pt. Расположите текст в центре холста.
Создаем красивое лого в стиле Веб 2.0

Сейчас нам нужен значок логотипа. Выберите инструмент Custom Shape и найдите там фигуру “flower 5“.
Создаем красивое лого в стиле Веб 2.0

Выберите в панели опций инструмента значок Paths
Создаем красивое лого в стиле Веб 2.0

Зажав клавишу SHIFT, чтобы сохранить пропорции, растяните фигуру до таких размеров, как на рисунке ниже. Выберите инструмент Path Selection и кликните внутри фигуры правой кнопкой мыши и выберите пункт Make Selection. Отправляйтесь в Select > Modify > Expand и вводите там 8 пикселей. Создайте новый слой и залейте выделение цветом #ff00ae. Назовите этот слой Logo Mark.
Создаем красивое лого в стиле Веб 2.0

Совместите два объекта так, чтобы они выглядели как на рисунке:
Создаем красивое лого в стиле Веб 2.0

Выберите текстовый слой и отправляйтесь в Select > Load Selection, где сразу нажимайте ОК. Создайте новый слой и назовите его “Bottom text gradient“. Выберите инструмент Gradient (G) и заливку от белого к прозрачному:
Создаем красивое лого в стиле Веб 2.0

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

Создайте новый слой, выберите инструмент Elliptical Marquee и выделите область, как показано на рисунке:
Создаем красивое лого в стиле Веб 2.0

Залейте ее белым цветом. Понизьте прозрачность слоя до 20% (или около того). Зажмите клавишу CTRL и кликните по иконке текстового слоя в палитре слоев, чтобы выделить текст. Нажмите CTRL+SHIFT+I, чтобы инвертировать выделение (можно также Select > Inverse), а затем клавишу DELETE (перед этим убедитесь, что выделен слой с белым эллипсом).
Теперь повторите то же самое и с фигурой слева от текста. Но здесь нарисуйте немного другой эллипс
Создаем красивое лого в стиле Веб 2.0

Теперь примените к текстовому слою следующие стили:
Создаем красивое лого в стиле Веб 2.0

Создаем красивое лого в стиле Веб 2.0

Кликните правой кнопкой по текстовому слою в палитре слоев и выберите пункт Copy Layer Style. Выберите слой с фигурой (Logo Mark), щелкните по нему правой кнопкой мыши и выберите пункт Paste Layer Style.
Вот, что у Вас доолжно было получиться на этом этапе:
Создаем красивое лого в стиле Веб 2.0

Разместите объекты на своих окончательных местах, т.к. сейчас мы займемся слиянием слоев. Выберите все слои, кроме слоя Background и нажмите CTRL+E. Создайте копию получившегося слоя. Зажмите клавишу CTRL и щелкните по иконке оригинального слоя, чтобы выделить его содержимое. Создайте новый слой и назовите его “Shadow“. Залейте выделение (на новом слое Shadow) черным цветом. Нажмите CTRL+T, чтобы вызвать инструмент Free Transform. Зажмите клавишу SHIFT и двигайте рамку вокруг объектов так, чтобы в итоге получилось нечто подобное изображенному на рисунке ниже. Понизьте непрозрачность слоя “Shadow” до 15%
Создаем красивое лого в стиле Веб 2.0

Выберите скопированный ранее слой, подвиньте его немного вниз и отправляйтесь в Edit > Transform > Flip Vertical. Переместите слой Shadow в палитре слоев так, чтобы он располагался сразу над слоем Background. Измените непрозрачность слоя с получившимся отражением до 40%
Создаем красивое лого в стиле Веб 2.0

Создайте маску слоя с отражением. Затем выберите инструмент Gradient и проведите полоску заливки так, чтобы получить нечто подобное:
Создаем красивое лого в стиле Веб 2.0

Добавьте текст:
Создаем красивое лого в стиле Веб 2.0

Все!

  • 85
 (голосов: 1)
  От: Eizan Просмотров: 1575 Опубликовано: 10 января 2008
Сообщение от: dangels, 10 января 2008 16:35
Новостей: 204, комментариев: 20, Администраторы
ICQ: --
Лого для нашего сайта хоть сделано и не по этому уроку, но выглядет не хуже smile
    
Сообщение от: Стил, 20 февраля 2008 18:44
Новостей: 0, комментариев: 1, Посетители
ICQ: не скажу
lol
    
Сообщение от: foo, 26 апреля 2008 03:49
Новостей: 0, комментариев: 3, Посетители
ICQ: --
ЗдОрово !Спасибо большое Eizan , очень интересно и наглядно, обязательно пригодится. smile

PS сайт ваще летает, как реактивный, приятно проводить время на таком портале wink

PPS я когда регистрировался заметил очепятку в каком-то слове (уже и не помню tongue ) на странице, где говорится что: информация о вас является не полной ... и т.д.
вот wink
    

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Аккаунт

Логин 
Пароль 
 



Календарь

«    Ноябрь 2008    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Подпишись на RSS

Будь в курсе событий





Интересное


Опрос

Совершаете ли вы покупки в интернет?

Да охотно, если это выгодно
Только когда нет другого выбора
Нет, я не доверяю интернету
Нет, просто не понимаю как это сделать


Реклама




2008 © Dangels. Копирование материала без разрешения запрещено.
Главная страница Регистрация Новое на сайте Статистика Предупреждение

youseo.ru - сервис проверки доменов