Думаю, практически всем нужны подписчики! Для этого владельцы сайтов стараются писать интересный контент и делать разные другие вещи. Но иной раз бывает так, что читатель смотрит статьи и возможно даже находит их полезными и интересными… а форму для подписки на обновления сайта как-то не замечает. И правда, большинство таких форм в интернете ничем не примечательны. Они не привлекают внимания. Сегодня я покажу Вам один из вариантов как привлечь внимание к форме подписки.
Привлечь внимание – это отнюдь не значит, что нужно заключать форму в ярко красную рамки и писать заголовок нереально большими буквами, или рисовать красные стрелки указывающие на нее. Нет! Мы будем делать все красиво и интересно. Мы сами сделаем дизайн нашей формы, а потом сверстаем ее. Вы можете проходить этот урок вместе со мной, а можете параллельно делать тоже самое, только с использованием своих рисунков (в зависимости от Вашей тематики сайта). В любом случае, на основе этого примера можно сделать сколько угодно своих вариантов и каждый будет выглядеть индивидуально. Давайте начнем!
Делаем дизайн формы.
1. Предположим, мой сайт про собак. Придерживаясь этой темы я и буду делать дизайн. Итак, открываю Photoshop и создаю новый документ размером: 450px на 450px. И поставим сразу 4 направляющие: 2 горизонтальные и 2 вертикальные, так, чтобы они образовали квадрат, который и будет занимать вся форма. Этот квадрат я расположила в правой части, так как левее предполагается разместить картинку. Вы же должны исходить из вашей задумки (например если задумано, что картинка будет выше формы, значит нужно оставить немного места вверху и т.д.). Не забывайте учитывать и то, сколько пикселей по ширине и высоте вы можете выделить Вашей форме на сайте. То есть если под эту форму Вы оставили на сайте колонку шириной 200 px, а сами сделаете форму шириной в 300 px, то при вставке в готовый дизайн столкнетесь с проблемой несоответствия. Этот размер нужно учитывать вместе с картиной, которая будет стоять левее (в моем случае).
2. Теперь берем инструмент «Rounded Rectangle Tool» (Прямоугольник со скругленными углами). В настройках инструмента я поставила Радиус округления на 10 px (Вы же можете сделать и меньше, как Вам больше нравится), Заливку светло-коричневого цвета (#fdf9c8) и обводку темно-коричневого цвета (#362526), шириной 2 px. После всех этих настроек рисуем прямоугольник по области, образованной направляющими.
3. Теперь поставим еще одну направляющую для того чтобы выделить область заголовка нашей формы. Я ставлю ее где-то на 50 px ниже, чем верхняя граница нашей фигуры. Опять возьмем «Rounded Rectangle Tool» (Прямоугольник со скругленными углами), в настройках Заливку (Fill) поменяем на темно-коричневую (#362526) и нарисуем область заголовка (между верхней и только что поставленной направляющими).
Примените к этому слою стили как на скриншотах ниже:
В итоге Вы должны получить что-то подобное:
4. Возьмите инструмент «Custom Shape Tool» и в настройках выберите фигуру собачьей лапки. Уберите Заливку, а контур сделайте светло-серым (#e1e1e1) и размеров в 3 px. Теперь нарисуйте эту лапку в правой верхней части нашей формы:
5. Теперь выбираем инструмент «Текст». Я установила для него светло-коричневый цыет (#fdf9c8) и шрифт Georgia (жирный курсив). Пишем заголовок для формы:
6. Давайте займемся установкой картинки. Из дополнительных материалов Вы можете загрузить файл dog.png или воспользоваться своей графикой. Если Вы не знаете где взять подходящую графику для сайта можете прочитать мою статью “Где брать графику и фото для сайта», там я рассказываю о некоторых ресурсах как платных, так и бесплатных.
Итак, загружаем в наш файл изображение, регулируем его размеры с помощью свободной трансформации (если нужно) Ctrl + T, и размещаем изображение слева.
7. Теперь поставим 2 горизонтальные направляющие примерно посередине формы, там, где будет поле для ввод e-mail адреса. Берем «Прямоугольник со скругленными углами». Радиус округления уменьшаем до 3px, Заливку делаем белой, Обводку – темно-коричневой, 1px толщиной. Перед тем как рисовать можно еще поставить 2 вертикальные направляющие, чтобы проконтролировать расположение поля строго посередине. И теперь в пределах получившегося квадрата можно рисовать прямоугольное поле.
8. После этого над полем темно-коричневым цветом и тем же шрифтом что и раньше, пишем о том, что в это поле нужно ввести e-mail адрес.
9. Давайте сделаем кнопочку для отправки запроса. Поставим опять 2 горизонтальные направляющие чуть ниже нашего поля для ввода. И 2 вертикальные направляющие чуть уже чем предыдущие (пусть кнопка будет не такой широкой как поле для ввода). Возьмем «Прямоугольник со скругленными углами» темно-коричневого цвета и с радиусом округления 5 px. Между поставленными направляющими нарисуем прямоугольную кнопочку.
10. Сделаем кнопке небольшой глянец. Для этого создаем новый слой над слоем с кнопкой. Берем инструмент «Перо» (P). В настройках выставляем параметр Shape, Заливка светло-коричневая (#fdf9c8), обводку убираем. И рисуем примерно такую фигуру как на скриншоте ниже:
Встаем на новый слой, зажимаем клавишу Alt и щелкаем левой кнопкой мыши. Наша фигура должна вписаться в контуры кнопки. После этого уменьшаем Непрозрачность слоя (Opacity) до 9%.
11. Добавим стилей нашей кнопочке. Для этого переходим на слой с кнопкой и добавляем стили как на скриншотах ниже:
Получиться должно так:
12. Сделаем надпись на кнопочке. Я делаю ее все тем же светло-коричневым цветом (#fdf9c8) и добавляю слою стиль тени:
13. Вот практически и все. В конце я добавляю еще 2 лапки, только теперь на саму форму и темно-коричневого цвета. Одну делаю залитой, а у другой оставляю только Обводку. И меняю им угол наклона с помощью Свободной Трансформации (Ctrl + T).
По-моему, получилась очень симпатичная и привлекательная форма. Теперь нужно ее сверстать. Вот этим мы сейчас и займемся. Но сначала давайте подготовим изображения для верстки.
Готовим изображения к верстке.
14. Для того чтобы правильно подготовить изображения к верстке делаем следующее. Скроем все слои. Оставим видимыми только слои с фоном заголовка, текстом заголовка и белой лапкой на нем. Выберем инструмент прямоугольного выделения и выделим область вокруг прямоугольника заголовка. Далее нажимаем Edit – Copy Merged.
Создаем новый файл Ctrl+N, Background Contents ставим на Transparent.
В новый файл вставляем выделенный фрагмент Ctrl+V. После этого нажимаем File – Save for web. Выбираем формат сохранения png-24, нажимаем сохранить и сохраняем в папку, где у Вас будет храниться графика для сайта (в моем случае это будет папка img), не забываем дать имя файлу.
15. Теперь ту же самую процедуру делаем для кнопки (вместе с бликом и надписью), для нашей картинки с собачкой, и для двух коричневых лапок (для каждой по отдельности). В итоге должно быть 5 файлов с картинками, все в формате png-24.
Верстка формы.
16. Открываем редактор для написания кода. Я буду пользоваться редактором Dreamweaver. Создаем новый html документ и сохраняем его (я назову его forma_dog.html). И также создаем файл таблицы стилей. Можно конечно прописывать стили и в том же файле, но лучше сразу привыкать разделять эти файлы. Так меньше путаницы и вообще это считается хорошим тоном написания кода. Итак, файл стилей я назову style.css. Он будет расположен у меня в той же папке, что и основной файл. В html файле подключим наши стили. Пока что код нашей страницы выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Форма подписки, привлекающая внимание!</title> </head> <body> </body> </html>
17.
Давайте будем верстать нашу форму на основе таблиц. Итак, между тегами body создаем таблицу (у меня она будет 370 пикселей в ширину) с одним рядом и двумя колонками. Таблица будет без рамки и без отступов. Так как нам нужно будет работать со стилями таблицы давайте дадим атрибуты id ее строкам и столбцам. В коде ниже Вы можете увидеть имена для атрибутов id и вообще всю реализацию кода таблицы на данном этапе:
<table id="main_tab" width="370" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="pic"> </td> <td id="form_content"> </td> </tr> </table>
18.
Теперь давайте немного поработаем со стилями. Переходим в файл style.css и задаем стили нашим элементам:
body{background:#FAFAE7;} #main_tab{margin:0 auto;} #form_content{background-color:#fdf9c8; width:255px; border:2px solid #362526; border-radius:10px; height:220px;}
Здесь я задала цвет всей нашей страницы. Если Вы будете вставлять форму в уже готовый дизайн сайта, то body{background:#FAFAE7;} Вам не понадобится. Также я выравниваю для наглядности всю форму по центру экрана (#main_tab{margin:0 auto;}), в остальных стилях задаются цвета, высота, ширина, рамка и ее радиус округления. Если Вы сейчас откроете html файл в браузере, то увидите следующее:
19. Вернемся в html файл и немного изменим строку с id=”form_content”. Мы добавим к ней атрибут valign=”top”, а между тегами td вставим нашу картинку заголовка. Сейчас эта строка должна выглядеть вот так:
<td valign="top" id="form_content"><img src="img/header_form.png"></td>
А на экране, если обновить браузер мы увидим следующее:
20. Теперь в другой наш столбец вставим картинку с собачкой:
<td id="pic"><img src="img/dog.png"></td>
21. Вставляем надпись о том, что человек должен ввести свой e-mail. Для этого сразу после картинки с заголовком вставляем эту надпись заключенную в теги p. Тегу p присвоим класс, который назовем form_text.
<td valign="top" id="form_content"><img src="img/header_form.png"> <p class="form_text">Введи E-mail</p> </td>
В файле style.css пропишем стили для этого элемента:
.form_text{font:16pt Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:500; color:#362526; padding-left:60px; margin:0px;}
22. Добавим верхнюю коричневую лапку. Для этого перед только что добавленным тегом p добавим тег картинки лапки. Присвоим тегу класс под названием leg1.
<img class="leg1" src="img/leg1.png">
А в стилях добавим вот такую строчку:
.leg1{padding-left:210px; padding-top:10px;}
23. Теперь займемся самой формой. Для того, чтобы вставить поле формы и ее кнопочку, после тегов p пропишите следующий код:
<form name="forma" id="forma" action="" method="post"> <input type="text" name="email" id="email" size="30"> <input type="image" id="btn" src="img/btn.png"> </form>
А потом перейдите в файл style.css и добавьте форме необходимых стилей:
#email{margin-left:30px; margin-top:10px; border:1px solid #362526; height:30px;} #btn{margin-top:15px;}
Не переживайте, что кнопка пока стоит криво. Скоро мы это исправим.
24. У нас остался последний штрих – последняя не вставленная лапка. Итак, перед нашей кнопкой вставляем картинку со второй лапкой и присваиваем ей класс под названием leg2. Полный код тега form смотрите ниже:
<form name="forma" id="forma" action="" method="post"> <input type="text" name="email" id="email" size="30"> <img src="img/leg2.png" class="leg2"> <input type="image" id="btn" src="img/btn.png"> </form>
Идем в стили и прописываем следующую строчку:
.leg2{margin-left:5px;}
Вот так, легко и просто мы сделали дизайн и сверстали нашу форму для подписки. Все исходные файлы Вы можете найти в дополнительных материалах. Теперь Вы можете вставлять готовую красивую форму на Ваш сайт и знать, что она обязательно привлечет внимание Ваших посетителей. Они оценят Вашу оригинальность и будут подписываться на обновления куда охотнее.
Если урок был Вам полезен оставьте свой комментарий или поделитесь им с друзьями. Также пишите в комментариях какие бы Вы хотели видеть уроки на блоге. И предлагаю Вам подписаться на обновление блога, так как в ближайшем будущем будет выпущено много новых статей и уроков.
P.S: Если тема создания сайтов Вам интересна, но Вы новичок и не знаете с чего начать, советую Вам почитать про видеокурс «Все Технические Моменты онлайн бизнеса в видеоформате». В свое время этот курс очень помог мне, поэтому могу его рекомендовать.
Спасибо за внимания и удачи! Делайте уникальные сайты! И до встречи в новых уроках!