Рамочки для вирусных открыток

Обновлено: 27.03.2024

После тщательной подготовки в несколько этапов к созданию вирусной открытки, наконец, пришла пора приступить к её сборке.

Друзья, безусловно, я могла бы написать для Вас меньше статей, но бОльшего размера. Или же записать серию видео уроков, в которых из-за качества записи Вы бы не увидели всех нью ансов, и при этом у Вас осталась бы куча вопросов.

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

Итак… сегодняшняя статья станет итоговой. Не переживайте, если Вы до этого не успели изучить весь остальной материал. Поверьте, даже в этом случае по ходу Вы овладеете всем материалом.

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

* Создать папку на хостинге для Ваших будущих открыток. Подготовить папку для новой открытки на компьютере, именно в этой папке и будет храниться открытка, которую Вы сегодня создадите. Подготовить стихи, фоновое изображение и просто картинки для вставки непосредственно в основной лист Вашей открытки. Подготовить музыку. Подробная информация обо всем этом ждет Вас ЗДЕСЬ и ЗДЕСЬ.

* Подготовить ударный файл, в котором предварительно сохранить: заголовок и описание для Вашей музыкальной открытки, скрипты для запрета копирования и просмотра исходного кода страницы, фавикон для Вашей открытки, код социальных кнопок, копирайт. Подробнее обо всем этом я писала для Вас ВОТ ЭТУ статью.

* Приготовить рамку для Вашей открытки, или же, скажем так, если не хотите возиться с её созданием, взять готовую. Статья на эту тему ждет Вас ЗДЕСЬ.

Если Вы все это сделали, самое время собрать Вашу поздравительную вирусную открытку.

Откройте программу NVU (если вы её еще не скачали и не установили, установочный файл программы можно взять ЗДЕСЬ ). Затем откройте для дальнейшего редактирования файл index с рамкой, который, я надеюсь, Вы создали про прошлому уроку.

Чтобы открыть этот файл нажмите на панели управления кнопку Открыть. Затем во всплывшем окне выберите файл index у себя на компьютере и нажмите уже во всплывшем окне кнопку Открыть.

sozdanie_virusnoj_otkrytki_2

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

Перейдите во вкладку Код и вставьте код скриптов запрета копирования и просмотра исходного кода сразу после тега .

sozdanie_virusnoj_otkrytki_3

Затем, если Вы создали фавикон, Вам нужно вставить код для его отображения. Этот код также вставляется сразу после тега и взять Вы его можете ЗДЕСЬ. Надеюсь, Вы сделали все правильно и сохранили изображение фавикона с названием favicon.ico в папку img.

sozdanie_virusnoj_otkrytki_4

Вставьте рамку, как создавать рамку я рассказывала Вам в этой статье.

После тега
пропишите копирайт, пример копирайта можно посмотреть ЗДЕСЬ. Сразу после текста Вашего копирайта опять таки поставьте два тега
(назначение тега такое же, как и в первом случае).

sozdanie_virusnoj_otkrytki_5

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

Я плеер вставляю всегда внизу страницы перед кнопками соц закладок, мне кажется это очень гармонично смотрится по дизайну. Поэтому готовый код плеера и Вам предлагаю вставить перед кодом скрипта социальных закладок, т.е. перед…

sozdanie_virusnoj_otkrytki_15

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

sozdanie_virusnoj_otkrytki_6

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


Давайте пропишем эти данные. Перейдите во вкладку Обычный и щелкните мышкой в рамке рядом с надписью Ваш текст. Затем в верхнем меню Формат выберите в выпадающем списке пункт Заголовок и свойства страницы.

sozdanie_virusnoj_otkrytki_8

Дайте название Вашей открытке . В описании можете, например, написать отрывок стихотворения. Этот ход даст Вам плюс при публикации Ваших музыкальных открыток в соц. сетях ( они будут красиво отображаться в ленте)

sozdanie_virusnoj_otkrytki_9

После внесения данных нажмите кнопку ОК для сохранения внесенных изменений.

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

Чтобы Ваша открытка приобрела фон выберите в верхнем меню Формат в выпадающем списке пункт Цвета и фон страницы…

sozdanie_virusnoj_otkrytki_10

А затем во всплывшем окне, нажав кнопку Выбрать файл, выберите заранее подготовленное изображение. После его выбора и нажатия кнопки ОК оно вставится и распределится по всей странице.

sozdanie_virusnoj_otkrytki_11

Осталось совсем немного, наполнить лист Вашей открытки содержанием и она будет готова.

Почему именно так? Дело в том, что, когда Вы вставляете код социальных кнопок через редактор кода, кнопки не отображаются. Увидеть отображение кнопок можно только если просмотреть создаваемую, редактируемую страницу Вашей вирусной открытки через браузер.

sozdanie_virusnoj_otkrytki_12

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

Для вставки изображений используйте кнопку Изображение. Во всплывшем окне с помощью кнопки Выбрать файл Вы будете выбирать изображения у себя на компьютере в папке img.

Настройку Не использовать альтернативный текст задайте, чтобы не создавать дополнительную нагрузку при загрузке Вашей вирусной открытки.

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

Если же Вы захотите, чтобы при клике по Вашему изображению человек попадал на какой-то сайт, перейдите во вкладку Ссылка и там поставьте ссылку.

sozdanie_virusnoj_otkrytki_13

Если Вы решите писать текст открытки непосредственно в программе NVU, а не подготавливать заранее в виде картинок для дальнейшей вставки, как я рассказывала ЗДЕСЬ, Вам стоит отметить для себя и запомнить несколько важных моментов по работе с текстом.

Запомните, для того, чтобы производить какие-либо изменения с текстом прежде всего его необходимо выделить. Затем все свое внимание переключите на панель настроек текста.

Выделив текст, Вы можете настроить: 1- цвет текста, 2 — размер, 3 — вид шрифта, 4 — выравнивание.

sozdanie_virusnoj_otkrytki_14

Для изменения типа шрифта Вам потребуется в меню Формат выбрать пункт Шрифт.

Возьмите себе за правило, для удобства вставки изображений (помимо, разумеется, фоновых) давать им названия izobragenie_1, izobragenie_2, izobragenie_3 … izobragenie_10 и т.д.

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

У меня на рабочем столе создана папка drugu, в ней создана папка для изображений img. Есть favicon.ico изображение, изображения для рамки, фоновое изображение и еще несколько изображений под номерами для удобства формирования картинки. Ничего лишнего/

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

sozdanie_virusnoj_otkrytki_17

Если Вы последовательно выполнили все действия, могу Вас поздравить с созданием поздравительной вирусной открытки. Осталось несколько штрихов. Программу NVU можете закрыть, более она Вам не понадобится.

Введите название. Обратите внимание*: название пишется с маленькой буквы, вместо пробела ставится нижний прочерк (зажимаете на клавиатуре клавишу Shift и одновременно прочерк, находящийся рядом с клавишей Backspace, получается _ )? мягкий знак в названии не пишется.

Чтобы перевести русский текст в латиницу нажмите кнопку Б-В.

sozdanie_virusnoj_otkrytki_18

Копируйте полученный в результате транслитерации текст и переименуйте свой файл index. Думаю, это у Вас получится сделать и без моей подсказки.

Для того, чтобы загрузить созданную Вами вирусную открытку на хостинг Вам необходимо папку с её содержимым(в нашем случае это папка drugu) заархивировать, если быть более точной создать zip архив.

Для архивации я использую программу winRAR( скачать для 32-системы здесь , скачать для 64-системы здесь , скачать ключ здесь , скачать инструкцию по активации здесь ).

После установки и активации программы щелкните по папке с открыткой, которую Вам необходимо заархивировать, правой кнопки мыши и в выпадающем меню выберите пункт Добавить в архив…

sozdanie_virusnoj_otkrytki_21

Обязательно выберите формат архива ZIP и нажмите кнопку ОК для архивации.

sozdanie_virusnoj_otkrytki_22

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

— Причем здесь открыточки и уроки по заработку в сети?

kak-sdelat-virusnuyu-otkrytku-besplatno

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

Я уже писала статью о том, как заработать на sms поздравлениях. Эта моя статья поможет вам в выборе прикольного поздравления коллеге, мужу, жене, детям, одноклассникам и вы сможете оценить мою вирусную открытку, которую я сделала к новому году. А сегодня вы узнаете, что такое вирусное поздравление и какую роль оно несет при раскрутке Вашего блога.

merlin

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

Как создать?

Первый способ

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

Люблю я творить и удивлять, и мое увлечение позволяет делать оригинальные подарки друзьям! В открытку можно вставить личную фотографию друга, а можно записать, например, в программе Camtasia Studio поздравление вашим голосом. А если такое поздравление украсить анимированными изображениями (цветы, море, бабочки, машины и т.д.), то такому подарку цены не будет!

— Почему на моем плейкасте нет ссылки на ресурс?

pleikast

Второй способ

Мне больше по душе программа Adobe Muse, с такой программой никакой чужой ресурс, тем более премиум — аккаунты вам не нужны! Создать свою страничку в интернете сможет каждый, не говоря уже о какой-то там открытке.

Вы наверняка уже догадались, почему такие открытки называют вирусными. Один человек чихнул, а второй подхватил. Так и вирусные открытки! Если ваш друг из соц. сети одобрил ваше произведение искусства и поставил лайк, то наверняка кому-нибудь тоже покажется ваше поздравление милым и приятным, тогда и он перенаправит поздравление своему другу и т. д.

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

otkritka

Наверняка, Вы часто встречаете поздравительные вирусные открытки … Ведь последнее время этим чудом сложно кого-то удивить.

Однако, скажу честно, часто можно наблюдать за открытками, скажем так, которые можно было бы подредактировать, и тогда они, безусловно, давали бы еще большую отдачу и результат.

Большим плюсом при оформлении вирусных открыток может послужить использование рамки для поздравительной открытки. Именно о её создании, правильной установке и настройке сегодня я Вам подробно и расскажу.

Надеюсь, Вы помните, что это за папка. Если же нет, то ЗДЕСЬ Вас ждет подробная информация на эту тему.

При создании вирусных открыток я использую программу NVU. Она бесплатная и очень простая в работе.

Процесс установки на сей раз я описывать не буду, поскольку в нем нет ничего сложного. Активации программа не требует.

Предположим, программу Вы скачали и установили. Давайте перейдем к процессу формирования кода рамки. Я дам Вам несколько кодов для разных рамок.

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

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

Каждая картинка, занимающая свой слой рамки, считается фоновым изображением и имеет свое название.

Следует выделить следующие виды фонов: блестящий фон (blestychii_fon), верхний блестящий фон (verhnij_blestychii_fon), нижний блестящий фон (niznij_blestychii_fon), основной фон(osnovnoj_fon), средний фон( srednij_fon), цветной фон(cvetnoj_fon).

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

Итак, возьмем для подробного рассмотрения готовый код рамки в два слоя:

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

font-family - это тип шрифта.
width - это ширина листа. Практика показала, что 800 пикселей, как в представленном примере, это наиболее удобная для восприятия глазом ширина.
font color - это основной цвет текста, который Вы будете использовать для своей вирусной открытки.

Дело в том, что при задании такой настройки в коде это средний размер шрифта. В общем размер колеблется от 1 до 7. Соответственно, 1 — самый маленький шрифт, 7 — самый большой.

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

Получается, что в представленном варианте Вам потребуются нижний блестящий фон (niznij_blestychii_fon) и основной фон(osnovnoj_fon). Дайте своим изображениям при сохранении соответствующие названия.

Сохраняя изображения к себе на компьютер, сразу обратите внимание на их тип.

sozdanie_virusnoj_otkrytki_2

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

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

Как я уже обмолвилась просто скопировать и вставить код для получения готовой рамки Вам недостаточно. В этом случае вместо фонов в слоях рамки у Вас будет пустое пространство.

Поэтому после того, как Вы выберите и сохраните себе необходимые изображения, Вам и нужно в данном коде прописать пути к картинкам с правильными их названиями и указанием их типа. Вот так они будут правильно выглядеть:

Таким образом Вы укажите папку (img), в которой находятся Ваши фоновые изображения для слоев рамки. И, разумеется, укажите не просто название картинок, а и их тип.

Теперь откройте двойным щелчком программу NVU. Приступим непосредственно к созданию Вашей вирусной открытки. Назначение открытки выберем Для друга.

Пришло время установить подготовленный код рамки. Вот только давайте сначала сохраним пустой html документ, как шаблон для Вашей будущей открытки.

После открытия программы в верхнем меню нажмите кнопку Сохранить

sozdanie_virusnoj_otkrytki_5

Пока что название своей странице дайте index, в дальнейшем мы с Вами её переименуем. Соответственно, для сохранения нажмите кнопку ОК.

sozdanie_virusnoj_otkrytki_6

Наверное, у Вас уже возник вопрос, куда сохранять. Когда я описывала Вам процесс подготовки к созданию вирусной открытки, то подробно рассказывала о создании папки для Вашей открытки, напоминаю, статья об этом находится ЗДЕСЬ.

Именно в эту рабочую папку Вам и нужно сохранить файл index. В рассматриваемом примере папка с названием drugu и содержащая в себе дополнительную папку img, в которую я уже сохранила изображения для рамки, находится на рабочем столе.

sozdanie_virusnoj_otkrytki_7

Вообще… Вы сейчас создали свою первую открытку, правда она еще совсем пустая. Перейдем к её наполнению.

Откройте вкладку Код

sozdanie_virusnoj_otkrytki_3

Вставьте готовый код рамки вместо тега
. Код простой рамки в два слоя находится вверху статьи, копируйте его для вставки. Только вот вставлять, конечно же, нужно с Вашими данными.

sozdanie_virusnoj_otkrytki_4

С учетом всех внесенных изменений, в рассматриваемом примере вставка кода выглядит следующим образом:

sozdanie_virusnoj_otkrytki_8

Для внесения изменений вновь нажмите кнопку Сохранить. Если же Вы сейчас перейдете во вкладку Обычный, то сможете увидеть, как выглядит Ваша рамка.

sozdanie_virusnoj_otkrytki_9

Отдельное внимание я хотела бы уделить еще шрифту, а точнее сказать настройке font-family. Программа NVU может дать Вам возможность задать для Вашего текста любой из шрифтов, установленных у Вас на компьютере.

Для изменения типа шрифта Вам достаточно в представленном коде рамки заменить тип шрифта Monotype Corsiva на нужный Вам, выбрав его из списка и записав, НО…

Друзья, хочу поделиться с Вами очень важным своим наблюдением. На разных компьютерах стоят разные шрифты. Одинаковых шрифтов, которые читались бы на каждом компьютере единицы (Arial, Times New Roman, Tahoma, Verdana, Monotype Corsiva и еще некоторые).

Шрифт Monotype Corsiva - один из немногих рукописных красивых шрифтов, который читается практически всегда и везде, потому использовать его для оформления текста своих музыкальных открыток Вы можете смело (кстати, и в коде менять ничего не придется).

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

Если же представленная информация оказалась для Вас сложной и у Вас не получается, к сожалению, создавать свои рамки, Вы можете взять готовые коды рамок ЗДЕСЬ .

Только хочу дать Вам маленький совет: копируя код готовой рамки обязательно проверяйте, чтобы вначале кода рамки стоял тег , а в конце кода рамки стоял код . Иначе при вставке рамки в Вашу вирусную открытку она будет стоять криво, а не по центру.

Набор прямоугольных каллиграфических рамок

user13147375

user13147375

Набор декоративных старинных рамок и бордюров

Набор декоративных старинных рамок и бордюров

Коллекция декоративных украшений

Коллекция декоративных украшений

Каллиграфические рамки устанавливают углы otborders декоративные рамки.

Каллиграфические рамки устанавливают углы otborders декоративные рамки.

Комплект золотой рамы

Комплект золотой рамы

Рамки декоративные этикетки.

Рамки декоративные этикетки.

Золотой вектора старинных набор цветочных элементов

Золотой вектора старинных набор цветочных элементов

Рамка цветочные границы шаблон

Рамка цветочные границы шаблон

Набор старинных декоративных рамок или старинных прямоугольных орнаментов или каллиграфических рамок в стиле ретро

Набор старинных декоративных рамок или старинных прямоугольных орнаментов или каллиграфических рамок в стиле ретро

user25362786

user25362786

Набор прямоугольных каллиграфических рамок

user13147375

user13147375

Набор декоративных старинных рамок и бордюров

Набор декоративных старинных рамок и бордюров

Коллекция декоративных украшений

Коллекция декоративных украшений

Каллиграфические рамки устанавливают углы otborders декоративные рамки.

Каллиграфические рамки устанавливают углы otborders декоративные рамки.

Комплект золотой рамы

Комплект золотой рамы

Рамки декоративные этикетки.

Рамки декоративные этикетки.

Золотой вектора старинных набор цветочных элементов

Золотой вектора старинных набор цветочных элементов

Рамка цветочные границы шаблон

Рамка цветочные границы шаблон

Набор старинных декоративных рамок или старинных прямоугольных орнаментов или каллиграфических рамок в стиле ретро

Набор старинных декоративных рамок или старинных прямоугольных орнаментов или каллиграфических рамок в стиле ретро

user25362786

user25362786

Читайте также: