Давайте откроем наш графический редактор и создадим новый документ размером в 1000 пикселей. Мы будем делать наш шаблон vCard на 476 пикселях, и поэтому нам не нужно создавать полотно на 1680 или 1920 пикселей, какими обычно пользуются при создании стандартных шаблонов.
Давайте установим направляющие линии на 212 пикселей от краёв, тогда наш контейнер размером в 476 пикселей окажется ровно по этим направляющим.
Давайте начнём с того, что зададим слой в качестве фона. Нам нужно создать простой и элегантный шаблон vCard, поэтому мы будем держаться четких цветов: белого или серого.
Далее нам нужно установить градацию от серого (#d3d1d1) к более светлому серому (#f4f2f2) и выбрать опцию «радиальный слой» в окошке стилей слоя. Далее мы инвертируем слой так, чтобы основным цветом был серый со светло-серым свечением, а затем нам нужно вручную передвинуть слой вверх так, чтобы бы смогли разместить часть нашего свечения в верхней части документа, как это показано на скриншоте ниже.
Теперь нам нужно установить небольшой водяной знак (его вы можете скачать здесь) на фоне. Как это сделать? Откройте текстуры и создайте шаблон (Modify >> Define pattern). В нашем документе продублируйте фоновый слой, удалите выставленный стиль слоя и примените заливку текстурой, выбрав только что созданную текстуру. У вас должно получиться нечто вроде этого:
Далее нам нужно определить способ, который позволит нам видеть сразу и водяной знак и радиальное затухание на слое ниже. В нашем случае лучше всего подойдет стиль «suffused light». Далее нужно понизить уровень отображения слоя до 30%, что приведёт к подобному результату:
Теперь водяной знак очень прозрачен и светел. Это как раз такой эффект, который нам требовался.
Далее начинаем работать над созданием нашего контейнера шаблона vCard: с помощью инструмента создания многоугольника мы создаем область белого цвета с шириной равной 476 пикселей (от направляющей к направляющей) и с высотой равной 615 пикселей (в дальнейшем мы всегда можем изменить этот параметр).
Теперь нам нужно установить направляющие на 5 пикселей от каждого края нашего прямоугольника изнутри, и создать еще один внутри него.
На этот раз нам нужно установить параметр наполнения на 0% (будьте внимательны, именно наполнение, а не уровень плотности отображения):
Далее, в окошке стилей слоя на нужно выставить контур на 1 пиксель, серого цвета (#e7e6e6). Эффект получится нечто вроде этого:
Теперь давайте добавим контейнеру немного динамики. Нам нужно добавить немного теней в нижней части. Возьмём кисть, установим размер на 40 пикселей и жёсткость на 0%.
Теперь давайте возьмём чёрный цвет и, удерживая кнопку Shift, нарисуем линию, которая идет от центра контейнера к правой части так, как показано на скриншоте:
С помощью инструмента Modify >> Transform >> Rotate мы переворачиваем линию к правой стороне (угол в 3 градуса должен идеально подойти):
Дублируем слой и отражаем его в горизонтальном направлении (Modify >> Transform >> Reflect horizontally), что даёт следующий эффект:
Далее нам нужно переместить эти слои под слой с нашим контейнером, что позволяет достичь вот такого эффекта:
Далее мы понижаем уровень плотности отображения кистей и размещаем их так, чтобы достичь максимально реалистичного эффекта:
Пришло время расположить наш логотип. Взяв во внимание то, что vCard – это нечто отличное и от визитной карточки и от крупного делового веб-сайта, мы разработаем страничку для нашего клиента – индивидуального предпринимателя (Роберто Росси), который хочет немного рассказать о себе.
Подбираем приятный шрифт. В нашем случае мы будем использовать одинаковый шрифт по всей странице.
Зададим тексту небольшую светлую тень, что придаст яркости имени нашего клиента:
Далее последует информация о квалификации Роберто. Мы будем использовать стандартный шрифт (Verdana), в котором мы увеличим параметр междустрочного расстояния:
Теперь мы можем начать наполнять наш шаблон. Начнем с создания простого, но эффективного навигационного меню. Учитывая, что на наша цифровая визитка поделена на 4 отдела: Главная (назовём этот раздел About), Резюме (куда будет вставлено резюме Роберто), Проекты (этот раздел представляет собой портфолио) и Контакты, в которых будут указаны контактные данные, а также ссылки на социальные сети.
Мы также добавим небольшие иконки для того, чтобы меню стало еще привлекательнее. Для этого мы воспользуемся набором иконок под названием Mono – простенько, но очень эффектно. Далее мы вставим тонкую линию под меню, чтобы было видно разделение между содержимым и меню.
Далее внесем заголовок и небольшое описание. Для заголовка применим шрифт Bebas – светлый и утонченный.
На этом этапе мы подошли к самому интересному – каким образом внедрить вашу фотографию в шаблон vCard. Существует несколько методов для отображения изображений в цифровой визитной карточке, и все эти методы очень полезны.
Возможно, вы предпочитаете фотографию в строгом классическом стиле или нечто забавное и привлекательное, но здесь мы посоветуем лишь одно: выбирайте очень качественную фотографию, сделанную в фас (это помогает завоевать доверие потенциальных клиентов). Не забудьте, что ваши глаза всегда должны быть на виду (никаких солнечных очков ради стиля!). Возможно, стоит немного улыбнуться, чтобы уверить клиентов в том, что вы открытый в общении человек.
Вкратце: сделайте привлекательное фото, на которое приятно смотреть (чтоб подробнее изучить, как этого добиться, рекомендуем вам прочесть данную статью!)
Вот что мы выбрали для нашего Роберто. Ну как вам?
Ниже мы разместили маленький текст описания:
И, в качестве заключения, добавим небольшой подвал, в котором содержится информация об авторском праве, а также иконки на социальные сети.
И вот теперь наш шаблон vCard готов!
Простенько, но с изюминкой!
Конечно, возможно ради более приятной и удобной навигации можно было бы добавить сюда слайдер контента на javascript, но на это ушла бы еще одна новая статья!
Можете сами поэкспериментировать и рассказать нам о результатах!
Скачать (244,67 кб)
