Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

VCard

не нравится   +3   нравится


Что такое VCard?
VCard это обычная электронная бизнес-карта, содержащая адрес, информацию владельца, номер телефона, логотип, фотографию и даже аудиозаписи. Обычно она прикреплена к e-mail сообщению.

Конечный результат:


VCard


1. Создайте новый документ размером 1200х1200 пикселей (не волнуйтесь из-за большого размера, мы обрежем холст позже). Установите цвет заливки - #fdfefd и цвет фона - #d6d6d6. Потом выберите инструмент Градиент (Gradient Tool), тип – радиальный градиент:


VCard


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


VCard


3. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) в режиме контуров и введите значение радиуса – 10 пикселей.


VCard


4. Создайте фигуру шириной 850 пикселей, высота фигуры зависит от количества контента этой карточки.


VCard


5. Поместите прямоугольник в центре холста на созданном свечении и примените эти стили в меню Стилей слоя (Layer Style - Blending Options):

Параметры наложения:


VCard


Отбрасывание тени (Режим – Умножение):


VCard


Внутренняя тень (Режим – Нормальный):


VCard


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


VCard

VCard


6. Сделайте выделение слоя с прямоугольником (Ctrl+Click) и примените Сжатие (Modify – Contract) со значением 10 пикселей. Создайте новый слой (Create New Layer) и залейте его любым цветом.


VCard


7. Назовите этот слой “Content” и примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):

Внутренняя тень (Режим – Нормальный):


VCard


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


VCard


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


VCard

VCard


8. Займёмся созданием навигационной панели. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение в левой части прямоугольника и в новом слое залейте его любым цветом. Назовите этот слой “Navigation”.


VCard


9. Сделайте выделение слоя с прямоугольником, который находится под слоем “Navigation” (область контента), выберите слой “Navigation” и примените Инверсию выделения (Select – Inverse), нажмите Delete.

Сделайте выделение слоя с навигационным прямоугольником (Ctrl+Click) и примените Сжатие (Modify – Contract) со значением 1 пиксель. Сделайте Инверсию выделения (Select – Inverse) и нажмите Delete.


VCard


К этому слою примените такие стили:

Внутренняя тень (Режим – Нормальный):


VCard


Наложение градиента (Режим – Нормальный, Стиль – Зеркальный):


VCard


Обводка (Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет):


VCard

VCard


10. На правой стороне навигационного прямоугольника создайте белую линию толщиной 1 пиксель на всю высоту.


VCard


11. На навигационную панель добавьте иконки. Можете найти их здесь.


VCard


12. Подпишите каждую иконку:


VCard


И примените к тексту стиль Отбрасывание тени (Layer Style - Drop Shadow):

Режим – Мягкий свет


VCard


13. Между разделами навигации создайте разделители. Это должны быть две линии (чёрная и белая) толщиной 1 пиксель. Установите Режим наложения слоя с разделителями – Мягкий свет (Blending Mode – Soft Light):


VCard


14. Нужно подсветить один из разделов панели. Создайте новый слой под слоем с текстом и иконкой, создайте выделение, как показано ниже:


VCard


15. Залейте его любым цветом и примените такие стили слоя:

Внутренняя тень (Режим – Точечный свет):


VCard


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


VCard

VCard


16. Инструментом Перо (Pen Tool) создайте выделение, как показано ниже, и залейте его белым цветом в новом слое. Установите Непрозрачность – 15%.


VCard


17. Заполните область справа контентом. В данном случае информацией о владельце.


VCard


18. Теперь создадим отражение. Выберите слои с рамкой карточки, областью контента и панелью навигации. Сделайте копии этих слоёв и примените Отражение по вертикали (Transform – Flip Vertical), затем спустите копии ниже. Объедините эти три копии и примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2 пикселя.


VCard


19. Добавьте маску слоя (Layer Mask) и сделайте заливку линейным градиентом от чёрного к белому снизу вверх:


VCard

VCard


20. Вам осталось подсветить остальные разделы и добавить нужный контент. Все 4 раздела можете посмотреть здесь


VCard





Ссылка на источник урока

написал : 7hp

Спасибо огромное за урок!!!

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: