VCard

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

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

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

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

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

Изменить

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

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

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

Изменить

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

Изменить

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

Изменить

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

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

Изменить

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

Создан: 21 февраля 2010

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

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

24 января 2011 10:51 | ICQ: -- | [цитировать]