Красивая форма подписки для WordPress из PSD макета? Легко! (Часть 1)

Опубликовано ,

 Доброго времени суток, дорогие читатели!

Сегодня я хотела бы вам показать, как довольно просто сделать красивую форму подписки на e-mail рассылку из PSD макета. Урок, на мой взгляд, даже чересчур подробный, кто не хочет читать текст – смотрите картинки =) Повторить сможет каждый!

Примечание: полученная форма не будет адаптивной.

Материалы урока и шаблоны форм вы можете скачать в конце статьи.

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

Стандартные формы, предоставляемые сервисами по умолчанию, довольно унылы. Вот, например, форма от FeedBurner:

форма подписки feeburner

Значительно лучше у SmartResponder’а, там есть встроенный генератор форм:

В любом случае, свое родное, сделанное специально под сайт – всегда лучше, не так ли? Пусть даже вы не умеете рисовать и пользоваться Фотошопом, в сети есть достаточно готовых форм или просто подходящих картинок, которые так и ждут, чтобы их применили в дело =)

Вот такая форма подписки временно стоит у меня на блоге:
moya-forma-podpiski

Итак, из данного урока вы узнаете:

Часть первая

  1. Как вырезать необходимые элементы из PSD макета.

Часть вторая

  1. Как сделать HTML форму подписки из готового макета;
  2. Как добавить форму подписки в сайдбар WordPress или в конец поста;
  3. Как добавить социальные кнопки в окошко формы.

Также сможете скачать материалы урока и шаблоны форм в формате PSD.

Примечание: почти все изображения в уроке увеличиваются по клику.

 

1. Как вырезать необходимые элементы из PSD макета

 

Я буду использовать Adobe Photoshop CS5 версия 12.0.1, на русском языке.

Для начала определимся с видом формы подписки и откроем выбранный шаблон в Фотошопе. Скачайте ЗДЕСЬ мой макет, если хотите повторять шаги урока следом за мной.
psd-maket-formi-podpiski
Учтите, PSD шаблон дает нам представление о внешнем виде, он включает в себя не только изображения, но и элементы, которые задаются при помощи HTML и CSS. Данный макете я, пожалуй, разделю три части:

  • Собственно «тело» формы;
  • Поле для ввода e-mail’а;
  • Кнопка отправки данных.

Для большей наглядности я обозначила их на картинке.
opisanie_formi_podpiski
Что ж, приступим.

«Тело» формы

Первым делом нашу форму надо немного подправить – изменить английский заголовок на аналогичный русский. Для этого нам понадобится более-менее подходящий шрифт – их легко можно найти в интернете. Я использовала DisneyPark, если вы скачивали материалы в начале статьи, этот шрифт найдете в архиве.
vibiraem-shrift-dlya-formi
Следующим этапом станет выделение и сохранение формы. Для этого скроем лишние слои, нажимая на изображение глаза в панели слоев.

Вот поэтому и так удобны PSD макеты – они разделены на слои и при необходимости можно легко разделить на нужные элементы (если конечно, сам дизайнер правильно нарисовал). Если использовать просто изображение формы, ее скорее всего придется редактировать и опять же разделять на элементы.
skrivaem-lihnie-sloi-v-psd
Для выделения объекта есть два способа. Выбирайте, какой вам удобнее:

  1. Для элементов, состоящих из одного слоя, можно использовать инструмент «Прямоугольная область» (М).

Выделяем необходимую область и копируем ее при помощи комбинации клавиш Ctrl+C(либо Редактирование/Копировать). Затем идем в Файл/Создать (Ctrl+N), по умолчанию новый документ будет таких же размеров, как и выделенная область. Делаем фон прозрачным и вставляем в новый файл нашу картинку.

  1. Выделяем изображение при помощи инструмента «Рамка» ( С ) или «Раскройка» и нажимаем Enter. Этот способ подойдет как для одиночных элементов, так и для состоящих из нескольких слоев.
  2. Также для элементов, состоящих из одного слоя, можно ПКМ нажимать на иконку слоя, удерживая Ctrl.

После сохранения изображения отменяем последние шаги Alt+Ctrl+Z и возвращаемся к исходному изображению.

 

И в первом и во втором случае помощью тримминга (Изображение/Тримминг) можно дополнительно удалить пустоты вокруг нашей формы. Я выбираю тримминг на основе обрезки прозрачных пикселей. На этом вырезание нашего объекта можно считать оконченным =)

Остается только сохранить.
kak-virezat-fragment-iz-psd
Заходим в Файл и выбираем пункт «Сохранить для Web и устройств» (Alt+Shift+Ctrl+S). У нас появляется следующее окно:
sohranit-dlya-web
Как вы видите, изображение можно сохранить в нескольких форматах. Браузеры поддерживают в основном GIF, PNG & JPEG. Причем, PNG-8 уже довольно устарел.

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

JPEG хорош для фотографий и градиентов (например, фон), с его помощью можно сохранить всю цветовую гамму изображения.

Формат PNG также сохраняет все цвета на изображениях, однако сжимает хуже JPEG, поэтому использовать его для фотографий не рекомендуется – изображение будет весить значительно больше. PNG поддерживает прозрачность не только фона, но и пикселей. Его хорошо использовать для изображений с мелкими деталями и прозрачными областями.

Таким образом, исходя из выше написанного, для нашей формы подписки мы выбираем формат PNG-24.

В этом же окошке можно задать размеры нашего изображения. При этом надо следить за его весом – желательно, чтобы картинка была не больше 70Кб.

Сохраняем.

Кнопка «Отправить»

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

Я сделала два варианта:

  • С затемнением фона;
  • С изменением цвета галочки – с помощью «параметров наложения» слегка изменила градиент.

Исходной кнопке при помощи «Тиснения» придала объем. Если не хотите редактировать изображение, можно потом в CSS просто изменить настройки прозрачности или добавить\убрать тень.

Вырезаем и сохраняем аналогично предыдущему пункту.
vidi-knopok
Что ж, все элементы нашей формы подписки подготовлены, о том, как сделать HTML форму подписки из нашего макета, вы узнаете из второй части урока.

Скачать МАТЕРИАЛЫ и ФОРМЫ

Перейти ко второй части урока «Форма подписки из PSD»

С уважением, Анастасия

2 комментария

  1. Александр

    А еще варианты исходников есть??

    Ответить
    1. Анастасия

      Здравствуйте, может и лежат где, но я все из интернета скачивала. Что-то типа «subscribe form psd» запрос

      Ответить

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован.

Добавить в комментарий код: CSSHTMLPHP