Читать


Главная » 2014 » Декабрь » 1 » Урок 4. Рисуем заглавие сайта/логотип
01:02
Урок 4. Рисуем заглавие сайта/логотип
В четвёртом уроке веб-дизайна предлагаю создать логотип опять же с имитацией объёма. Если вы хотите, чтобы наименование вашего ресурса лучше запоминалось у посетителей, несомненно оно должно быть оформлено в шапке в виде логотипа. Не затрагиваю сейчас тему маркетинга и фирменного стиля для ресурсов, занимающихся онлайн-продажами товаров и услуг; опишу простой урок создания логотипа для рядового сайта, имеющего свой опрятный стиль.

Итак, для примера возьму старое наименование собственного ресурса - когда-то он носил имя "Логово Дракона".
Создадим новый документ (напомню, Ctrl+N) нужного вам размера (логотипы обычно большими не бывают - сохраняйте пропорции). Для фона я сделал набросок фрагмента шапки сайта, который вы можете найти в приложенном заархивированном psd-файле, ссылка для скачивания которого указана в конце урока. Фон может быть по сути любым, так как наш логотип будет располагаться на плашке. Её-то сейчас и нарисуем.
Выберем на панели инструментов "Фигуру" - "Прямоугольник" и нарисуем его по центру, а чтобы грани его потом не поправлять "Стрелкой", двигая точки (как мы это делали в предыдущем уроке), кликните на стрелочку вверху на панели фигур и поставьте галочку "Привязать к пикселам"



Цветом плашки я выбрал: #005773.



Щёлкнем дважды на слое с фигурой, чтобы открыть стили слоя и перейдём во вкладку "Наложение градиента". Выставляем настройки как на изображении:



Плашка стала выпуклой. Теперь очертим границы. Для этого нужно зажать Ctrl и кликнуть на фигуру на панели слоёв, чтобы выделить контур прямоугольника. Создадим новый слой над фигурой Shift+Ctrl+N  и зальём выделенную область белым цветом (Ctrl+Backspace).



Теперь уменьшим выделение на один пиксель. Для этого зайдём в меню "Выделение - Модификация - Сжать" и уменьшив выделение на 1 пиксель, удалим область (Delete).



Выставим режим наложения для данного слоя на "Перекрытие":



Плашка почти готова!.. Правда про тень я забыл!) Возвращаемся к слою с фигурой и двойным кликом открываем вновь Стили слоя. Во вкладке "Тень" выставляем:
Непрозрачность: 30%
Угол: 90
Остальные параметры в данном случае трогать не приходится.



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



Далее следует настроить текст так как вам нужно. Все настройки сосредоточены на панели текста, которая вызывается через пункт меню "Окно" - "Символ".



1 - шрифт (подберите нужный - не переусердствуйте - логотип должен легко читаться);
2 - размер шрифта;
3 - цвет (берите наиболее контрастный оттенок, чтобы надпись не терялась на подложке);
4 - сглаживание для шрифта (обычно используется "резкое").

Теперь придадим выпуклости надписи. Для этого уже в знакомых стилях слоя проставим галочки на вкладках "Тень" (изменим там только настройки "Смещения" - 1 и  "Размер" - 2) и "Наложение градиента" (поправим только значение "Непрозрачность" - 20)



Добавим ещё одну надпись, под основную, которая будет объяснять впервые заглянувшему, что это за проект. Её, в отличии от главной, что выглядит у нас выпуклой, мы сделаем вдавленной в плашку. Для этого выберем второму тексту тёмно-синий или чёрный цвет (а лучше градиент из этих цветов) и добавим снизу каёмочку. Делается это так. Дублируем слой с текстом (Ctrl+J), перемещаем его под оригинал, выбираем инструмент "Перемещения" (V) и двигаем на один пиксель вниз. Теперь определяем для него белый цвет, на панели слоёв выставляем ему режим наложения "Перекрытие", а "Непрозрачность" - 30%. Готово!



Теперь нужно добавить какой-то графический элемент, в моём примере это будут обыкновенные фигуры "Звёздочки"



Но разместить я их решил по кругу. Для этого нарисовал фигурой круг и определил с помощью линеек его центр (о работе с линейками я рассказывал в предыдущем уроке http://denofdragon.ru/news/knopka_na_glavnuju/2013-03-10-993) .



Нарисуем звёздочку в верхней точке круга. Нажмём Ctrl+T (включив режим трансформирования), зажав Alt перенесём крестик, которым обозначался центр звёздочки, в точку пересечения линеек, а угол отклонения выставим - 20.



Теперь время чудес!) Комбинацией клавиш Shift+Ctrl+Alt+T мы создадим дубликаты звёздочки, которые автоматически будут располагаться по заданному для первой фигуры отклонению.



Удалим слой с кругом, служившим нам ориентиром, скроем линейку (Ctrl+H) и удалим несколько звёздочек, налегающих на текст. Для этого выбираем инструмент стрелка (A) и выделяем точки лишних нам звёздочек, после чего жмём Delete.

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

Скопируем стиль слоя нашего главного текста (для этого правой кнопкой кликнем по слою с текстом и в выпадающем списке выберем "Скопировать стиль слоя"), и вставим на слой со звёздочками (также клик правой кнопкой мыши и "Вклеить стиль слоя"). И последний штрих! Цвет для звёздочек выставим светло-голубой, кликнув дважды по миниатюре слоя со звёздочками.



И всё! Готово! Надеюсь вы узнали что-то новое из этого урока!



Файл запакован в архив весом 262Кб
Скачать


Категория: Уроки | Просмотров: 397 | Добавил: M-Wizard | Теги: уроки, конверт, Веб-дизайн, фотошоп | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА