Превращаем открытку в форму для комментирования

Формы для комментариев позволяют посетителям оставлять свои впечатления о контенте страницы. Всем известно, что хороший контент - это король, но общее впечатление никто не отменял. Каждый элемент дизайна может дополнять внешний вид. Это относится и к формам комментирования.

В этом уроке я научу Вас как делать потрясающие формы для комментирования используя старые фотографии открыток.

Кроме формы для комментариев, применив полученные знания, Вы можете легко сделать любую форму, в т.ч. контактную.

Создание необходимых изображений в Фотошоп

1. Скачайте фото старой открытки

Прежде всего нам понадобится фото открытки. Его можно скачать тут.

2. Измените размер

Такие фото обычно очень большие, так что нам необходимо его немного уменьшить. Image -> Image Size или (Alt + Ctrl + I) и Вы сможете придать любой размер изображению. Нам необходима ширина  в 500 пикселей.

3. Поверните изображение

Наше изображение слегка повернуто влево, так что нам надо это исправить. Image -> Rotate Canvas -> Arbitrary и в поле ANGLE введите 2.5 и выберите по часовой стрелке. Вот и все готово.

4. Создайте разметку

Как Вы видели вначале урока на картинке, главная идея заключается в том, чтобы разместить ярлыки с левой стороны открытки, а кнопку отправки в правом нижнем углу. Мы определим фоновые изображения для полей ввода: имя, емейл, вебсайт и комментарий. Эти фоны будут немного темнее основного фона.

Итак, далее мы добавляем новый слой поверх открытки - рисуем прямоугольник 121 на 24 пикселя, заполненный черным. Это будет фоном для поля с именем. Черный прямоугольник? Разве это красиво? Мы это сейчас исправим. Выставите "Blending" на Soft Light и прозрачность на 50%.

Теперь вышло уже лучше! Повторите эти шаги для каждого поля ввода.

У каждого поля есть соответствующий ярлык. Здесь мы не будем вводить ярлыки с помощью стандартного <label>, а просто введем названия полей в фотошопе.

5. Режем изображения

Теперь после создания всех элементов - можно их резать. Открытка у нас будет как отдельное изображение + фоны для каждого поля ввода также будут отдельно. У нас получатся такие изображения:

comment_form.jpg

name_bkg.jpg

email_bkg.jpg

website_bkg.jpg

comment_bkg.jpg

Создаем HTML разметку

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

<div class="commentForm">
    <input type="text" id="nameField" class="nameField" />
    <input type="text" id="emailField" class="emailField" />
    <input type="text" id="websiteField" class="websiteField" />
    <textarea id="commentField" class="commentField" cols="10" rows="5"></textarea>
    <input type="submit" id="sendButton" value="Send" class="sendButton" />
</div>

Как Вы видите по коду, поля для ввода находятся друг за другом. Но не переживайте, со всем справится абсолютное позиционирование. Давайте взглянем на CSS:

.commentForm
{
    width: 497px;
    height: 324px;
    position: relative;
    background-image: url('comment_form.jpg');
    background-repeat: no-repeat;
}
.commentForm input[type="text"], .commentForm textarea
{
    width: 210px;
    left: 32px;
    position: absolute;
    background-repeat: no-repeat;
    border-width:0px;
    font-weight:bold;
    font-family:Arial, Sans-Serif;
    font-size:0.9em;
}
.nameField
{
    top: 44px;
    height: 22px;
    background-image: url('name_bkg.jpg');
}
.emailField
{
    top: 90px;
    height: 22px;
    background-image: url('email_bkg.jpg');
}
.websiteField
{
    top: 133px;
    height: 22px;
    background-image: url('website_bkg.jpg');
}
.commentField
{
    top: 178px;
    height:122px;
    background-image: url('comment_bkg.jpg');
}
.sendButton
{
    position:absolute;
    top:268px;
    left:362px;
    width:100px;
    height:30px;
    border:solid 2px #000000;
    background-color:#7c6852;
    color:#e1cdae;
}

Код предельно прост. Контейнер формы позиционирован относительно с фоном в виде нашей открытки. Все обычные атрибуты полей ввода описаны в одном классе (.commentForm input[type="text"], .commentForm textarea).

Вот и все готово! Хотите верьте - хотите нет :)

Заключение

Как Вы могли убедиться красивую форму комментирования создать не так уж и сложно. Немного фотошопа и базовые знания HTML + CSS и у Вас все получится. Можете экспериментировать с этой техникой и у Вас получатся классные результаты!