—»     —»   Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов
  Раздел: Образование и Изучение   Нет комментариев  

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Около недели назад мы уже рассказывали вам о vCard: что это такое, для чего это можно использовать, и какие преимущества представляет собой наличие vCard. Сегодня же мы хотим опробовать на практике то, о чем мы вам рассказывали, попробовать разработать собственный привлекательный шаблон vCard. Итак, нельзя терять ни секунды. Открывайте Photoshop и мы приступаем!

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Давайте откроем наш графический редактор и создадим новый документ размером в 1000 пикселей. Мы будем делать наш шаблон vCard на 476 пикселях, и поэтому нам не нужно создавать полотно на 1680 или 1920 пикселей, какими обычно пользуются при создании стандартных шаблонов.

Давайте установим направляющие линии на 212 пикселей от краёв, тогда наш контейнер размером в 476 пикселей окажется ровно по этим направляющим.

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Давайте начнём с того, что зададим слой в качестве фона. Нам нужно создать простой и элегантный шаблон vCard, поэтому мы будем держаться четких цветов: белого или серого.

Далее нам нужно установить градацию от серого (#d3d1d1) к более светлому серому (#f4f2f2) и выбрать опцию «радиальный слой» в окошке стилей слоя. Далее мы инвертируем слой так, чтобы основным цветом был серый со светло-серым свечением, а затем нам нужно вручную передвинуть слой вверх так, чтобы бы смогли разместить часть нашего свечения в верхней части документа, как это показано на скриншоте ниже.

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Теперь нам нужно установить небольшой водяной знак (его вы можете скачать здесь) на фоне. Как это сделать? Откройте текстуры и создайте шаблон (Modify >> Define pattern). В нашем документе продублируйте фоновый слой, удалите выставленный стиль слоя и примените заливку текстурой, выбрав только что созданную текстуру. У вас должно получиться нечто вроде этого:

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Далее нам нужно определить способ, который позволит нам видеть сразу и водяной знак и радиальное затухание на слое ниже. В нашем случае лучше всего подойдет стиль «suffused light». Далее нужно понизить уровень отображения слоя до 30%, что приведёт к подобному результату:

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

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

Далее начинаем работать над созданием нашего контейнера шаблона vCard: с помощью инструмента создания многоугольника мы создаем область белого цвета с шириной равной 476 пикселей (от направляющей к направляющей) и с высотой равной 615 пикселей (в дальнейшем мы всегда можем изменить этот параметр).

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Теперь нам нужно установить направляющие на 5 пикселей от каждого края нашего прямоугольника изнутри, и создать еще один внутри него.

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

На этот раз нам нужно установить параметр наполнения на 0% (будьте внимательны, именно наполнение, а не уровень плотности отображения):

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Далее, в окошке стилей слоя на нужно выставить контур на 1 пиксель, серого цвета (#e7e6e6). Эффект получится нечто вроде этого:

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Теперь давайте добавим контейнеру немного динамики. Нам нужно добавить немного теней в нижней части. Возьмём кисть, установим размер на 40 пикселей и жёсткость на 0%.

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Теперь давайте возьмём чёрный цвет и, удерживая кнопку Shift, нарисуем линию, которая идет от центра контейнера к правой части так, как показано на скриншоте:

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

С помощью инструмента Modify >> Transform >> Rotate мы переворачиваем линию к правой стороне (угол в 3 градуса должен идеально подойти):

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Дублируем слой и отражаем его в горизонтальном направлении (Modify >> Transform >> Reflect horizontally), что даёт следующий эффект:

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

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

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

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

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Пришло время расположить наш логотип. Взяв во внимание то, что vCard – это нечто отличное и от визитной карточки и от крупного делового веб-сайта, мы разработаем страничку для нашего клиента – индивидуального предпринимателя (Роберто Росси), который хочет немного рассказать о себе.

Подбираем приятный шрифт. В нашем случае мы будем использовать одинаковый шрифт по всей странице.

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Зададим тексту небольшую светлую тень, что придаст яркости имени нашего клиента:

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

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

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Теперь мы можем начать наполнять наш шаблон. Начнем с создания простого, но эффективного навигационного меню. Учитывая, что на наша цифровая визитка поделена на 4 отдела: Главная (назовём этот раздел About), Резюме (куда будет вставлено резюме Роберто), Проекты (этот раздел представляет собой портфолио) и Контакты, в которых будут указаны контактные данные, а также ссылки на социальные сети.

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Мы также добавим небольшие иконки для того, чтобы меню стало еще привлекательнее. Для этого мы воспользуемся набором иконок под названием Mono – простенько, но очень эффектно. Далее мы вставим тонкую линию под меню, чтобы было видно разделение между содержимым и меню.

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Далее внесем заголовок и небольшое описание. Для заголовка применим шрифт Bebas – светлый и утонченный.

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

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

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

Вкратце: сделайте привлекательное фото, на которое приятно смотреть (чтоб подробнее изучить, как этого добиться, рекомендуем вам прочесть данную статью!)

Вот что мы выбрали для нашего Роберто. Ну как вам?

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Ниже мы разместили маленький текст описания:

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

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

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

И вот теперь наш шаблон vCard готов!

Уроки Photoshop: Создание профессионального шаблона vCard за несколько шагов

Простенько, но с изюминкой!

Конечно, возможно ради более приятной и удобной навигации можно было бы добавить сюда слайдер контента на javascript, но на это ушла бы еще одна новая статья!

Можете сами поэкспериментировать и рассказать нам о результатах!

Скачать (244,67 кб)
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: V-Card, Photoshop
Опубликовал Mysterious Master   Прочитано (раз): 9148   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031