Содержание

Как Вконтакте создать динамическое меню с эффектом навигации | DesigNonstop

Веб-дизайн / Практика

27054

21-03-2016

Многочисленные просьбы моих настойчивых читателей и просто любознательных пользователей возымели свое действие. Я наконец то создала урок, в котором мы будем учиться делать динамическое меню Вконтакте с эффектом нажатых кнопок! По аналогии с обычными сайтами интернета, когда посещенная ссылка маркируется особым способом (нажатая кнопка, подчеркивание итд) — мы будем создавать такую же конструкцию Вконтакте, с помощью созданных страниц и графического оформления. Для начала мы сделаем графические заготовки в фотошопе — создадим шапку меню и кнопочки двух видов. Потом создадим несколько страниц Вконтакте, согласно пунктам нашего меню. И напоследок сделаем хитрый прием, который, собственно, и создаст нам иллюзию перехода по ссылке. Урок достаточно сложный и подходит для тех, кто уверенно себя чувствует в функционале Вконтакта. Все манипуляции я буду производить на примере своей группы Вконтакте, где этот эффект реализован вживую. Итак, за дело!

Шаг 1. Создаем в фотошопе шапку меню
Создаем в фотошопе документ шириной 600 пикселей. Высота может быть разная, на ваше усмотрение. Вы можете поместить в шапку любую видовую фотографию, коллаж, информационный баннер и прочие графические картинки. В данном сучае я использовала такой вот рекламный баннер размером 600х172 пикселя.

Шаг 2. Создаем в фотошопе строку навигации
Теперь нам надо создать строку навигации. В данном примере я использовала в качестве кнопок только текст. Но на ваше усмотрение можно создать цветные кнопки и уже на них написать текст. Делаем так — создаем в фотошопе прямоугольник 600х56 пикселей и в данном случае заливаем его белым цветом. Потом в строку пишем пункты меню — где-то порядка 5-6 пунктов, не больше. Большее количество пунктов будет смотреться зажато.

Шаг 3. Создаем в фотошопе строку навигации в нажатом состоянии
Теперь нам надо создать активные ссылки, так, как-будто по ним нажали. Я использовала обычное подчеркивание, но можно использовать другой цвет текста или фона для маркировки посещенной ссылки.

Шаг 4. Нарезаем готовые картинки
На данном этапе нам надо нарезать картинки из Шага 2 и Шага 3. У нас должно получиться два комплекта по пять кнопок — одна кнопка без подчеркивания, другая кнопка с подчеркиванием. Кнопки каждого отдельного пункта (с подчеркиванием и без подчеркивания) должны быть одинакового размера. На картинке ниже представлено все наше графическое оформление — десять кнопок и одна шапка меню.

Шаг 5. Создаем Вконтакте страницу Меню
Теперь переходим ВКонтакт. Наша задача — создать отдельную страницу под названием «Меню». Для этого мы воспользуемся таким кодом
http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
где вместо ХХХ мы подставим id нашей группы, а вместо текста «Название страницы» мы напишем Меню. Теперь надо выяснить id группы. Как это сделать? Заходим на главную страницу группы и смотрим на наши записи на стене — прямо под блоком «Добавить запись» будет написано «Все записи» — нажимаем на эту ссылку.

Шаг 6. Определяем id группы и редактируем код
Переходим на страницу и видим урл такого вида https://vk.com/wall-78320145?own=1, где цифры 78320145 в данном примере и есть id группы. Подставляем наши данные в исходный код и получаем запись такого вида:
http://vk.com/pages?oid=-78320145&p=Меню (с вашими цифрами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Так мы создали новую страницу Вконтакте и изначально она выглядит так.

Шаг 7. Создаем Вконтакте остальные страницы навигации
Аналогичным образом мы создаем еще четыре страницы навигации: Цены, Как заказать, Техзадание и Вопросы. То есть еще четыре раза копируем в адресную строку браузера соответствующий код (с вашими цифрами id в примере ниже мои цифры):

http://vk.com/pages?oid=-78320145&p=Цены

http://vk.com/pages?oid=-78320145&p=Как_заказать

http://vk.com/pages?oid=-78320145&p=Техзадание

http://vk.com/pages?oid=-78320145&p=Вопросы
Обратите внимание, в названии страницы из двух слов (Как заказать) пробел между словами заменен на нижнее подчеркивание Как_заказать. Теперь у нас есть пять готвых страниц под каждый пункт меню. Страницу Портфолио мы не создавали поскольку она размещается на странице Меню

Шаг 8. Загружаем фотографии на первую страницу меню
На созданной, пока еще пустой странице (см. Шаг 6) Меню нажимаем на ссылку Редактировать или на ссылку Наполнить содержанием. После этого мы видим панель редактирования. Здесь нам надо нажать на значок фотоаппарат с функцией Загрузить фотографию. Важно! Обратите внимание на то, чтобы у вас стоял режим wiki-разметки. Переключение режимов регулируется значком у правого края страницы.

Шаг 9. Результат после загрузки картинок
Загружаем наши картинки, которые мы создавали в Шаге 1 и Шаге 2. После загрузки мы видим такой код, как на картинке ниже, а само меню выглядит так. После каждого изменения кода не забываем нажимать Сохранить страницу, а потом нажать предпросмотр для просмотра результата.

Шаг 10. Редактируем код картинок
Теперь наша задача заменить все свойства noborder на свойство nopadding. А у первой картинки проставить реальные размеры, поскольку Вконтакт при загрузке ужал картинку до 400 пикселей. После всех изменений мы должны получить такой код и такое меню.

Шаг 11. Проставляем ссылки для картинок
Теперь мы должны проставить ссылки для каждой картинки. Ссылку надо вставлять после nopadding| вместо пробела перед закрывающими скобками. Для первой картинки (шапка меню из Шага 1) можно дать ссылку на главную страницу группы, а можно воспользоваться свойством nolink (ставится через ; после nopadding без пробелов). Для второй картики вставляем адрес страницы формата

page-78320145_49821289. То есть полный урл картинки https://vk.com/page-78320145_49821289, до первую часть с доменом можно опустить. А вот для ссылок на внешние сайты урл ссылки надо указывать полностью.

Шаг 12. Копируем код на остальные страницы навигации
На этом, достаточно простом шаге, мы копируем последний код из предыдущего шага и вставляем его на остальные созданные страницы — Цены, Как заказать, Техзадание и Вопросы.

Находимся на странице, нажимаем Редактировать или Наполнить содержанием (находимся в режиме wiki-разметки), вставляем код и нажимаем Сохранить. И потом также на следующей странице. То есть сейчас у нас есть пять страниц, на каждой из которых меню выглядит абсолютно одинаково. Но зато уже можно осуществлять навигацию по меню — при нажатии на ссылку например Цены, мы переместимся на страницу Цены итд.

Шаг 13. Делаем эффект нажатой кнопки
Теперь нам предстоит на каждой из пяти страниц поменять одну картинку (кнопку без подчеркивания заменим на кнопку с подчеркиванием). Например, на первой странице Меню мы загружаем новую картинку и потом заменяем в коде адрес старой картинки на новый (подчеркнуто красным). Потом переходим на страницу Цены, загружаем картинку с подчеркнутыми Ценами и меняем в коде на адрес новой картинки. Потом заходим на страницы Как заказать, Техзадание и Вопросы и делаем туже самую операцию аналогичным образом.

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

 

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

Как в Фотошопе сделать сайт Вконтакте

Продолжая срывать покровы Фотошопа, в этом уроке мы создадим сайт Вконтакте. Конечно, не весь Вконтаке а лишь макет одной из его страниц. Впрочем, все они похожи друг на друга. Долгое время я пропагандировал векторные инструменты Фотошопа, в частности в своей статье Зачем Фотошопу нужен вектор. Пришла пора применить его на практике. Для наших экспериментов я выбрал, что неудивительно, страничку нашей группы вконтаете. По окончанию урока мы воссоздадим все её элементы и получим готовый файл, который каждый из вас сможет скачать. По понятным причинам я не смогу расписывать каждый свой шаг на 5 абзацев, но очень постараюсь охватить все аспекты создания сайта в Фотошопе. Мы будем пользоваться шрифтами, масками, вектором, стилями. Расписывать азбуку каждого инструмента невозможно, но я постараюсь.

Как в фотошопе сделать сайт?

Как в фотошопе сделать любой сайт? Я выбрал Вконтакте из-за популярности и достаточной простоты. Прежде всего, вы открываете Photoshop и рисуете макет сайта. В сложных и дорогих проектах макет создают специально нанятые люди с системным мышлением. Они создают пустой фреим или каркас, где размещают кнопки, меню и контент сайта. Далее фреим передается дизайнеру, и дизайнер «одевает» каркас, рисуя дизайн и его элементы поверх каркаса. Почему именно так? Не все дизайнеры способны соединить в себе логику, здравомыслие и чувство прекрасного. Особенно страдают данным недугом дизайнеры с обостренным чувством прекрасного. Они, дизайнеры, не в состояние понять, что их навороченной красотой, банально неудобно пользоваться. Что в этой красоте, невозможно найти ни нужный раздел, ни нужное меню, ни нужные материалы. Поэтому внешний вид и эргономика сайта (понятность и простота) — разное.

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

Создание аватарки на мобильных устройствах

Если вы хотите создать аву для сообщества ВК с устройств на iOS или Android, то вам стоит обратить внимание на специализированные онлайн-сервисы.

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

Перейдите в раздел «Аватар».

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

Таким образом создается классическое оформление следующего формата.

Для создания обложки перейдите в соответствующий раздел.

Графические элементы и текст добавляются в правой колонке.

Для сохранения финального варианта нужно оплатить лицензию. Один день лицензии стоит 50р.

Создаем рабочую область

Прежде всего создаем правильную рабочую область. Сайт Вконтакте выровнен по центру, тянущиеся задние фона отсутствует. Ширина Вконтакте 790px Длина — бесконечна. Ширина не случайна. Вконтакте рассчитан на просмотр с самых древних мониторов с самым древним разрешением 800 на 600px. 10 дополнительных пикселей — запас для полосы прокрутки браузера. В отдельных случаях Вконтакте расширяется в разделе Приложений. Расширяется он за счет пространства между логотипом и меню, но нам это не важно. В диалоговом окне File > New создаем рабочую область на 800 х 600 пикселей.

Размечаем рабочую область

Воспользуемся Направляющими Guides. Включите линейку Windows > Rulers или Ctrl+R, кликните по линейке мышкой, и не отпуская кнопки перетяните направляющую в начало рабочей области. Вторую направляющую поставим точечно, View > New Guides. В появившемся окне выберите Вертикальную направляющую и 790 px, такой же ширины сайт Вконтакте. Между этими направляющими мы будем рисовать наш сайт Вконтакте в Фотошопе.

Выравниваем рабочую область

С размерами порядок, но сайт придавлен к одной стороне, а с другой сторону у него 10px зазора. Давайте выравним рабочую область прибавив немного пикселей с обоих сторон. Откройте Image > Canvas Size. В области Anchor направьте расширение в левую сторону. Поставьте галочку Relative. Тогда изменение размера области будет происходить относительно тех размеров, которые уже есть. В области ширины Width добавьте 10px и нажмите OK.

Теперь проделайте все тоже самое, но на этот раз стрелки в Anchor оставьте по центру, чтобы расширение происходило в обе стороны. И расширьте рабочую область ещё на 40px что бы сайту визуально не было тесно.

Создаем элементы сайта

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

Нам понадобится панель слоев Layers, которую можно открыть в Windows > Layers. Нам понадобится умело перемещать элементы. Для этого пригодится инструмент Move Tool, о котором подробнее можно прочесть в моей статье Работа с Move Tool. И я бы сказал что Move Tool вам понадобится особенно, так как большее время вы будете распихивать элементы макета по нужным местам, да выравнивать между ними расстояние. Итак, выберем первый инструмент Rounded Rectangle Tool и нарисуем шапку сайта. В настройках инструмента поставим не более 5px округлости и не забудьте про Snap to Pixels, с этой галочкой вектор будет привязан к размерам пикселей, что очень важно при создании графики для Web.

Шапка вконтакте округлая лишь с одной стороны и вот как я срежу края. Я выберу инструмент Rectangle Tool, в настройках инструмента выберите Subtract from Shape area (-) C этой настройкой инструмент будет отсекать части нарисованного вектора, а не создавать новые. Подробнее читайте в моих статьях о настройках Add, Subtract и Intersect. С включенной опцией Subtract выделите векторную маску в слоях и просто отсеките ненужную часть прямоугольника. Почему это выгодно? во первых у вас остается контроль за маской, так как вы создаете сложную фигуру. Если вам понадобятся округленные края с обратной стороны фигуры, вы всегда сможете их достать, удалив второй прямоугольник.

Создаем стиль

Что такое стиль? Стиль это графическая одежда, которая надевается на любой элемент графики, будь то векторный объект, растровый объект или шрифт. Стили в фотошопе включают в себя рад эффектов, которые не видоизменяются начиная с царя Соломона. Это тени, градиенты, заливки, 3D выдавливание, текстуры, окантовки, свечения и эффекты смешивания слоев. В целом этого набора хватает чтобы создать практически любую графику для сайта, и не только для неё. Я предлагаю работать со стилями очень бережно. Для этого урока мы создадим и сохраним несколько стилей, которые просто будем доставать в нужный момент из сундучка и применять по необходимости. Начнем с шапки.

Вызовите Менеджер настроек Edit > Preset Manager и выберите в выпадающем меню стили Styles. Выделите все при помощи SHIFT и удалите. Подробнее о Preset Manager можно почитать в моей статье Все о Preset Manager. Мы вычищаем все лишние стили, чтобы они нас не путали и создаем пространство для новых стилей. Удаленные же стили являются шаблонными, и их можно вызвать назад в любой момент. Если у вас там сохранены свои стили, не удаляйте их. Этот шаг я выполняю для простоты демонстрации, не более.

В панели слоев Layers выберите слой с шапкой. Теперь вызовите окно Стилей слоев. Layers > Layer Style > Gradient Overlay. Начнем с главного. Создадим правильный градиент.

Кликните по полоске градиента. Появится редактор градиентов. В редакторе кликните по ползункам градиента и выберите правильные цвета — #6185ad и #406287.

При ближайшем рассмотрении можно заметить что у шапки есть небольшая двойная окантовка из 1px темной линии и 1px светлой линии. Не выходя из Стилей слоев переключитесь на Stroke. Stroke создает окантовку вокруг объекта. В размерах поставьте 1 px в Position поставьте Inside, то есть внутрь. В типе заливки выберите градиент, с цветами #416184 и #4a6a91. Проявляйте внимание к деталям, если выбрать не градиент а сплошной цвет, то он будет теряться к вершине шапки, так как там цвет темнее. Если выбрать темнее цвет, чтобы он не терялся к вершине, то у основания он будет чрезмерно выразителен.

Наконец полосочка второго уровня, Выберите Inner Shadow, он создает внутреннюю тень, цвет тени #7e9fc8. Угол -90. Все ползунки на 0 и только Distanse — 2px.

С правой стороны мы видим изображение стиля. Это и есть «графическая чешуя», надеваемая на любой объект к которой будет применяться стиль. Нажмите на кнопку New Style и назовите стиль VK Style 1. Если вы переключитесь из левого меню в графу стилей Style, то увидите, что наша коллекция пополнилась первым стилем.

Преимущества и недостатки шаблонов

Преимущества:

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

Недостатки:

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

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

Создаем логотип

Точнее копируем логотип, ведь Вконтакт уже любезно предоставил его каждому желающему на своей спец странице. Скачайте версию в PDF и откройте её в Фотошопе. Первое что вам бросится в глаза — логотип несоразмерно большой. Конечно сейчас мы его уменьшим, однако, если вы уже собрались уменьшить его при помощи Edit > Free Transform, будьте готовы к тому, что его стили, рассчитанные именно на такие размеры, останутся неизменными. Конечный результат получится неприглядным.


Конечно настройки стилей всегда можно подкрутить в сторону уменьшения. Я так и сделал в первый раз, переделав стили «на глаз». Но вот что я предлагаю вам. Вместо того, чтобы открывать стили, и начинать методично подбирать на глаз все параметры или же растрировать графику лишаясь контроля за стилями, просто откройте логотип, зайдите в
Image > Image Size убедитесь что в меню у вас выбраны галочки Scale Styles и Constrain Proportions и уменьшите высоту логотипа с 600px до 40px. Маловато? Уменьшите ещё.

Теперь выберите слои с логотипом и перенесите их на рабочую область сайта, и вот как это сделать быстрее всего. Выделите слои в панели слоев, инструментом Move Tool кликните по рабочей области и как бы, перетяните слои на вкладку с сайтом.

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

Если Вы решили добавить к Записи ВК ссылку на сторонний ресурс, эта ссылка будет отображаться в специальном блоке – сниппете.

Минимальный размер сниппета для внешней ссылки VK – 537 х 240 pixel. Мы рекомендуем использовать изображение разрешением 1200 х 536, формат png.

«Ну так они сами загружаются с сайтов» — скажете Вы. Только самые любознательные, кликали на иконку камеры. Именно она позволяет изменить изображение сниппета ВКонтакте.


Размеры обложки сниппета для внешней ссылки ВКонтакте

Создаем меню шапки

Пришла очередь меню. Для создания меню нам понадобится инструмент Type Tool, панель настроек шрифтов Character которую можно найти в Windows > Characte, а для создания других текстов в перспективе нам понадобится панель Paragraph, которую тоже можно найти в меню Windows > Paragraph. Выберите инструмент Type Tool и напишите текст. Эмпирическим путем я установил что Вконтакт использует шрифт Verdana. Возможно установил ошибочно, но визуально они один в один. Напишите первый пункт меню маленькими буквами — «Поиск». Размер шрифта 11pt стиль шрифта Bold. Вконтакт и более тесное расположение букв при помощи CSS. Учтем и этот нюанс, измените расстояние между буквами (tracking) до -55.

Когда вы закончите с одной надписью, продублируйте слой и напишите вторую Layers > Dublicate Layers Затем третью, четвертую. Затем выделите все созданные слои и рассортируйте их при помощи функций инструмента Mover Tool, котором мы уже говорили в этой статье. Но есть более простой способ создания меню. Чем создавать по 5 слоев, перегружая панель слоев, а затем возиться, расставляя их ровно инструментом Move Tool, создайте все на одной строчке. Напишите «Поиск» поставьте 4-5 пробела, напишите «Пригласить», опять 4-5 пробела и так далее. В итоге, все меню на одном слое, стили тоже надеваем на один слой, а не на 5 слоев. Удобно.

Создав меню, создаем правильные стили. Совет: либо задавайте шрифтам заранее правильный цвет, либо не думайте о цвете вообще, раскрашивая все после создания макета через стили. Откройте стили слоя, конечно, не забыв выделить шрифт меню Layer > Layer Style > Color Overlay Этот стиль просто и непринужденно натягивает на объект цвет. Вот и натяните белый цвет, #FFFFFF. У меню Меню Вконтакте имеется нехитрая тень, создаваемая силами CSS, мы же, рисуя макет в фотошопе создаем её через стили, и только потом верстальщик отобразит её языком верстки. Зайдите в Drop Shadow, в настройках тени выберите цвет #2f5076, невидимость 100% Угол падения любой приемлемый на ваш взгляд. Главное, везде отключайте опцию Use Global Light. Эта галочка соединяет в себе угол падения света всех стилей. Что это значит? Это значит, что если вам взбредет в голову поменять угол наклона тени в одном из объектов на следующий день, этот угол сменится у всех объектов, к которым применялся стиль с этой галочкой. Удобно, когда нужно регулировать общий угол падения тени для всех стилей из одного места, не удобно, когда этого не нужно делать.

Закончив со стилем, сразу сохраняйте её известным методом в этом же окне New Style. Стиль назовите VK Type Style 1.

Создаем общий макет для сайта

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

Вы наверняка заметили, что Вконтакт разделяет области 1px полосками графики. Они едва заметны, но все же различимы. Для их рисования мы не будем использовать векторный вариант Line Tools и вот почему. Векторные инструменты работают вне пиксельной сетки. Векторная линия может сесть ровно на пиксель, левее пикселя, правее, Фотошопу придется графически как то отобразить это. Мы помним, Фотошоп программа растровая и всю графику фотошоп отображает Растром. Это не плохо, потому что браузеры тоже отображают сайты растром. Проблема инструмента Line Tool проста, у него нет привязки к пикселям Snap to Pixels. Поэтому нарисовать ровную полоску, которая не будет заступать ни за один пиксель можно только случайно либо в режиме Fill Pixels при отключенной настройке Anti-Alias, подробнее о которых можно прочитать в моей статье Все о режимах Shape Layers, Path и Fill Pixels.

Никаких проблем, рисуйте полосочки в растре, заранее создав пустой слой. Но вот, почему я все же выбираю Вектор в Фотошопе. Векторные объекты на основе заливки в разы проще перекрашивать. В растровых надо пользоваться выделениями и Edit > Fill либо постоянно залезать в стили Color Overlay. Векторные объекты гибче и заметнее в панели слоев, их легко модифицировать и растягивать. Растровые же постоянно расплываются, либо их нужно перерисовывать. Выбор за вами, но я предпочитаю максимальный контроль за макетом.

Я выберу инструмент Rectangle Tool и нарисую все объекты макета, места для аватарок, разделительные полоски, разделительные блоки. Получится пустой сайт с объектами на которые я натяну стили. Конечно, не забудем о известной опции Snap to Pixels

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

Примеры успешных работ

На самом деле, хороших примеров очень много. Мы покажем лишь несколько работ.

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

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

  1. Статическое изображение, оформленное под определенный бренд. Стильно и красиво.

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

Эти примеры – лишь капля в океане. ВКонтакте полно групп с красивым оформлением, на которые Вы можете равняться.

Стилизация объектов сайта в Фотошопе

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

Выберите первый блок Фотографий, и кликните дважды по слою с прямоугольником. Появится диалоговое меню Стилей, которое так же можно вызвать в основном меню — Layer > Layer Style. В Стилях слоя выберите Color Overlay, залейте объект светло голубым цветом #e1e7ed. Теперь разберемся с верхней и нижней полосками. Верхнюю полоску создадим через Drop Shadow. Цвет — #d3dae0 Угол наклона -90, то есть тень направится сверху вниз. И конечно нам нужна не тень, в полном смысле, а лишь 1px полосочка, поэтому убейте все параметры, отвечающие за величину и растушевку тени Spread и Size. Оставим лишь 1 для Distanse, то есть тень выступает на 1 пиксель.

Аналогично для нижней полоски, её мы создадим с помощью внутренней тени Inner Shadow. Цвет тени #d3dae0, угол наклона -90, галочку Global Lights, как я писал выше убирать везде. С остальными настройками тоже самое. И конечно сохраняем стиль через New Style.

Создадим свой стиль и для формы поиска. Она находится в разделе Стены Вконтакта и представляет из себя белое поле с 1px окантовкой. Выбираем этот элемент, заходим в Стили слоев эффект Stroke. Перво наперво создаем цвет окантовки — #c0cad5. В настройках позиционирования Position выбираем Inside. Это важно, полоска внутрь создает острые края, полоска наружу округлые. Так устроен Фотошоп. Размер окантовки 1 px. Cнова сохраняем стиль.

Теперь у нас следующая ситуация. В макете остались не задизайненные объекты, но не повторять же для каждого квадратика уже созданный стиль? В фотошопе есть 100500 возможностей копировать стили с одного объекта на другой, в том числе не сохраненные стили. Тема эта скорее для статьи о работе со стилями. Я лишь расскажу об одном из них для которого мы специально и сохраняли все стили. Откройте панель Стилей через Windos > Style. Если вы делали все правильно, вы увидите пустое поле и сохраненные для сайта Вконтакте стили. Выделите нужный слой из панели слоев и щелкните по нужному стилю. Чтобы анулировать стиль, щелкните по белой иконке с красной линией.

Шрифты для сайта Вконтакте в Фотошопе

Разобравшись с дизайном объектов перейдем к шрифтам. Оставшиеся шрифты не представляют из себя особенной сложности. Выберите инструмент Type Tool и создайте боковое меню со следующими настройками. Размер шрифта 11pt, расстояние между строками 21pt, цвет #416288, шрифт Arial обычный. Похожие настройки используются и для меню с правой стороны сайта.

Для блоков текста используйте Параграфы. Для создания параграфа кликните инструментом Type Tool по рабочей области и не отпуская мышку протяните указатель, создав область для печати. Так вам не придется переносить текст «на глаз». При этом мы сможете воспользоваться настройками из панели параграфа Paragrapg из Windows > Paragraph, где можно регулировать позиционирование, расстояние между параграфами, красные строки, отступы и многое другое.

Ту же технику я применил для создания постов Ленты.

Размер обложки для сообщества или группы ВКонтакте

Рекомендованный размер обложки для десктоп (ноутбука, PC) версии ВКонтакте – 1590 х 400 pixel.

С десктопом все понятно, но для мобильной версии не все изображение видно на экране.


Размеры обложки Вконтакте Targbox

Самый простой способ сделать правильно оформленную обложку сообщества Вконтакте – воспользоваться нашим шаблоном. Просто сохраните шаблон к себе на ноутбук и используйте его как фон в любой программе для обработке изображений. Платные программы: Photoshop – лидер на рынке, corel painter. Бесплатные программы: GIMP, Paint 3D – стандартная программа Windows 10 + Paint.NET. Или закажите разработку дизайна обложки у профессиональных дизайнеров.


Шаблон размер обложка Вконтакте от Targbox

Как установить обложку для сообщества ВКонтакте?

Чтобы установить обложку для сообщества выберите пункт Управление в правой части экрана. Откроется меню Настройки. В блоке Основная информация найдите пункт Обложка сообщества и кликните на активную ссылку добавить/управлять. В отрывавшемся блоке можно установить обложку и живые обложки для мобильного приложения ВКонтакте.


Как добавить обложку ВКонтакте


Как добавить обложку ВКонтакте

Создание других элементов для сайта Вконтакте

Других элементов откровенно говоря не много. Это загнутая стрелочка для ссылок в постах ленты, и сердечко — вариация кнопки «нравится». Оба элемента я создал из обычного стандартного набора фигур Фотошопа — инструмент Custom Shape Tool. Подробнее о его работе можно прочитать в моей статье о Custom Shape Tool, подробно посмотреть его в действии можно в моем видео уроке о работе Custom Shape Tool.

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

Заполнение фотографий при помощи Clipping Mask

У нас остались пустые формы макета, означающий графику и картинки, которые будут загружать пользователи. Но ведь намного лучше продемонстрировать их в действии. Как это сделать самым простым образом? Дайте подумать, я бы открыл все фотографии, которые использую на сайте, затем нашел бы их размер, уменьшил, обрезал, доведя до одинаковых размеров. Ах да, там ведь ещё разные шаблоны макетов, есть фото для фотографий, есть иконки для раздела Участники, есть большой аватар, есть иконки в постах. Все разных размеров. Не проще ли открыть нужную графику а затем одним щелчком заставить её «сесть» в эти созданные формы? Конечно проще. Откройте необходимые фотографии и перетяните их на рабочую область. В панели слоев разместите каждую фотографию над своим прямоугольником.

Способов создать Clipping Mask много. Выделите слой с фотографией, и выберите в меню Layer > Create Clippig Mask или нажмите Alt+Ctrl+G. Более простые способы — выделите слой фотографии в панели слоев, кликните по нему правой кнопкой мышки и в меню выберите Create Clippig Mask. Более быстрый и элегантный способ — наведите указатель мышки между двумя слоями, на панели слоев и нажмите Alt. Указатель превратится в восьмерку. Кликните и это тоже создаст Clippig Mask.

Смысл Clippig Mask в том, что изображение выше, встраивается в объект ниже. Соответственно фотография может быть любого размера, но объект ниже обрезает ненужные края. Если фотография слишком большая просто уменьшите её при помощи Edit > Free Transgorm что называется на лету. Если вы не слышали про такое, читайте мою статью Free Transform в Фотошопе

Размер фото и видео для историй.

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

ВКонтакте рекомендует размер видео – 720 х 1280 pixel.

  • Хронометраж до 15 секунд,
  • Размер не должен превышать 10 мегабайт
  • Рекомендуемый видеокодек – h.264
  • Аудиокодек – AAC.

Размер для фотографий — 1080 х 1920 pixel.


Размеры Истории вконтакте

Организация сайта в Фотошопе

Пожалуй последнее, на чем я хотел бы остановиться — организация слоев. Организация важна, постольку поскольку фаил будет передан верстальщику, а ему разбираться с вашими слоями. Если вы и дизайнер и верстальщик правильная организация не будет лишней, и в стократ упростит для вас поиски нужного в старом фаиле через месяц. Организуйте слои по смысловой нагрузке. Размещайте их по порядку. Выделяйте ряд слоев и нажимайте Ctr+G. Это помещает их в папку. Создавайте папку в ручную из панели слоев, давайте файлам правильные имена, что бы легко узнавать их в меню Move Tool и на панели Слоев Layers. В конце концов раскрашивайте слои и группы по смысловой нагрузке. Сделать это можно через Layer > Group Properties

B вот так вы можете сделать сайт Вконтакте. И не только Вконтакте, но и любой другой сайт. Пожалуй в следующих статьях я продолжу практику воссоздания популярных в интернете сайтов. На повестке для Twitter, Facebook или Однокласники. Если вы хотите получить готовый макет сайта Вконтакте, кликните по кнопке Like для Фэйсбука, чтобы появилась ссылка на скачку. В конце концов, это меньшее что можно сделать, чтобы получить готовый макет для в формате PSD для сайта. Я надеюсь что теперь вы знаете, как сделать сайт в Фотошопе. Хорошего вам дня.

Похожие записи:

  1. Как сделать курсор для мыши?
  2. Как сделать флаер [часть 2]
  3. Как сделать визитку в Фотошопе?
  4. Как установить экшен в Фотошоп

Автор:

Положительные эффекты от использования шаблонов

– Экономия времени. С помощью шаблона пост подготавливается за 10 секунд.

– Улучшение восприятия сообщества. Шаблон позволяет создать стиль постов, которые со временем будут у пользователя вызывать плотную ассоциацию именно с данным сообществом.

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

– Использование хорошо оформленных уникальных шаблонов делает сообщество в глазах подписчиков более серьезным и презентабельным.

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

softolet — интернет-сервисы для бизнеса. Ссылка на материал обязательна!

Автор – Дмитрий Каяфюк

Оцените текст:

Автор публикации

не в сети 1 месяц

merchant

Merchant — первый из авторов сайта, практик и кудесник цифрового мира.

Комментарии: 164Публикации: 350Регистрация: 26-01-2014

Создание и оформление группы в контакте. Как сделать меню группы вконтакте

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

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

Оформляю группы Вконтакте
Качественный дизайн групп и пабликов ВК, закрепленное меню, раскрывающееся меню, внутреннее графическое меню, каталоги, внутренняя навигация — цены и портфолио .

Внимание!
В связи с очередным апдейтом ВКонтакта от 31.10.2016 данный вариант оформления групп стал неактуален. Отчасти подобное меню можно реализовать на вкладке Свежие новости в блоке под строкой статуса. Но это будет отдельное меню, а не единая композиция с аватаром.

Шаг 1.
Создаем в фотошопе новый документ размером где то 850х700 пикселей, заливаем его белым цветом. В данном примере я сразу наложила сверху интерфейс ВКонтакта для наглядности. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя и нажимаем Del. Потом выделяем прямоугольник размером 510х309 и также нажимаем Del.

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

Шаг 2.
Теперь под этим слоем располагаем все наше графическое оформление. В данном случае я положила картинку с основным фоном, потом написала текст, и потом в левом прямоугольнике .

Шаг 3.
Теперь правый прямоугольник (аватар) сразу же сохраняем отдельной картинкой размером 200х500 пикселя. Это уже готовая картинка для оформления группы. Она загружается в блок в правом верхнем углу группы, где написано «Обновить фотографию». А левую картинку надо нарезать на несколько картинок по количеству пунктов меню. В данном случае это 5 картинок шириной 510 пикселя.

Шаг 4.
На этом шаге нам надо загрузить наши нарезанные картинки ВКонтакт. Для этого сразу под описанием группы выбираем блок «Свежие новости», по-моему так он называется в оригинале. Я его переименовала в «Меню». Нажимаем «Редактировать». Важно! Во-первых, у вас должна быть именно Открытая группа, а не Страница. Поскольку на Странице такого пункта просто нет. И второе, в меню Управление сообществом > Информация > Материалы должен быть выбран пункт «Открытые».

Шаг 5.
Итак, во вкладке «Редактирование» мы нажимаем на иконку фотоаппарата и загружаем наши пять нарезанных картинок меню. ВКонтакт загрузит их по-своему, уменьшив размер до 400 пикселей по ширине и присвоив картинке тег noborder. В следующем шаге нам предстоит немного поправить код.

Шаг 6.
А именно, мы выставляем оригинальные размеры картинок и меняем тег noborder на тег nopadding. Также нам надо проставить урл ссылок с каждого пункта меню. В данном случае первая ссылка ведет на внутреннюю страницу Вконтакта, а остальные четыре ссылки ведут прямо на страницы моего сайта.

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

[][][]

Шаг 7.
Еще раз повторяю, чтобы открыть данное меню надо щелкнуть по надписи «Меню». А так оно всегда находится в свернутом виде. Читайте комментарии к посту, там много вопросов разобрано. Ну и присоединяйтесь к моей группе В Контакте .

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

Чтобы вы сразу поняли о чем идет речь – выкладываю пример оформленной группы:


Если в 2-х словах, то в графическом редакторе (том же эдоб фотошоп) создаются в 2 картинки. Одна из них нарезается на несколько фрагментов и с помощью вики разметки вконтакте проставляются ссылки. Если не испугались этих страшных слов – я продолжу.

Шаг 1 . В графическом редакторе (лучше всего использовать adobe photoshop) нужно создать документ размером 630 на 725 пикселей. Далее в первом слое вырезаем 2 окна, которые и будут являться меню и аватаркой. Первым делом выделаем прямоугольник размером 200 на 500 пикселей и нажимаем клавишу DEL.
__________________
Сразу оговорюсь, что в уроках на других сайтах вы можете найти советы, где говорят о том, что обрезать нужно прямоугольник размером 200*710. ЭТО НЕ ПРАВИЛЬНО. Сейчас в социальной сети вконтакте есть ограничение на высоту авы и в случае использования высоты в 710 px – она получится обрезанной.

__________________

Теперь вырезаем меню – еще один прямоугольник размером 382 на 232 и жмем также клавишу “делит”. Прямоугольники должны быть соединены внизу.

Заготовка готова.

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

Шаг 3 . Правый прямоугольник можно сохранять. Не забывайте про размер 200 на 500. Это готовая аватарка для вашей группы. Можете сразу загрузить ее в правом верхнем углу группы/паблика.

Что касается прямоугольника с размеченными пунктами меню, то его нужно будет нарезать на несколько картинок (в данном случае 5). Ширина 382, а вот высота рассчитывается индивидуально, но должна быть не менее 50 пикселей.


Шаг 4 . Теперь нужно 5 получившихся фото загрузить в альбом сообщества.


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


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

Шаг 5 . Во вкладке “редактирование” вставляем cследующий код:
[]
[]
[]
[]
[]

Начинаем его править.
photo – представление ссылки на фотографию. Откройте одну из 5 загруженных вами фото с меню группы и в строке браузера в увидите что-то вроде этого –
http://vk.com/photo72120765_272239411

72120765_272239411 – и есть тот самый необходимый код фотографии. Можно просто использовать имя файла.


Шаг 6 . Необходимо совместить картинки от аватарки меню, если они разъехались. Для этого нужно сделать 3 вещи:
Название группы должно быть в одну строчку
Описание в 10 строк (тут иногда нужен подгон)
Вебсайт также в одну строчку.

Вот что примерно должно у вас получиться:

Как видите, сделать оформление для группы вконтакте совсем несложно. Если у вас есть вопросы – задавайте их в комментариях, а если не хотите “париться” – вам прямая дорога на фриланс.

Создание оформления, описанного в данной статье обойдется Вам в 15-25 у.е.

), сделать меню.

Сейчас я покажу вам, как сделать меню в группе вконтакте, и правильно ее оформить .

Делаем красивую графику

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

  • Аватар для группы — 200×300 пикс
  • Баннер в описании — 510×271 пикс

Подготовьте изображения в нужных размерах. Я возьму уже готовые картинки, чтобы показать вам на их примере.

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

Для начала загружаем аватарку. Идем в группу, и нажимаем «Загрузить фотографию» .

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

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

Идем на стену. Здесь в блоке «Добавить запись» , нажмите на значок «Фотография» .

Загрузите вторую подготовленную картинку. Обязательно выберите публикацию от имени сообщества. И затем нажмите «Отправить» .

Теперь запись нужно закрепить (см. ). Возвращаемся к новой записи, и в правом верхнем углу разворачиваем меню. Здесь нажимаем «Закрепить» .

Теперь обновите страницу, и посмотрите результат.

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

Как создать меню в группе вконтакте

Давайте вернемся к нашему примеру и представим, что необходимо сделать кнопку «Подробнее» . Она уже есть на картинке. Как нам сделать ее именно кнопкой, чтобы при нажатии, человек попадал на наш основной сайт? Сейчас покажу.

Чтобы сделать активные кнопки меню, мы должны их вырезать отдельными картинками. Для этого нам понадобится Photoshop .

Открываем нашу картинку в редакторе, и активируем инструмент «Раскройка» .

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

Теперь нажимаем Alt+Ctrl+Shift+S , чтобы сохранить готовые изображения.

Https://vk.com/pages?oid=-120208137&p=меню

Смотрите, после символов «odi=- » , вам нужно вставить id своей группы (см. ). А в самом конце ссылки, напишите название для вашей страницы с меню. В примере мы так и оставим «Меню» .

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

Теперь переходим непосредственно к созданию меню для группы в вк. Должно получиться нечто похожее.

Далее переходим в раздел «Редактирование» . Здесь для каждого изображения нам нужно убрать отступы, чтобы они слились в единую картинку. Для этого в коде добавьте вот такое значение «nopadding;» . И добавьте ссылку на нужную страницу или сайт, прописав значение «https://site.ru/page.html» (указывайте свои адреса!). В нашем примере кнопка «Подробнее» , должна вести на сайт сайт. Вот что должно получиться.

[] []

Сохраняем страницу. Не забываем скопировать ее адрес из адресной строки. Она должна быть вида:

Https://vk.com/page-120208137_52523487

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

Вот такое меню у нас получилось в итоге.

Тема этой статьи — новый дизайн ВКонтакте. Снова поменялось , теперь можно установить горизонтальную обложку в группе. Оформление вашего сообщества ВК с такой шапкой намного интереснее. Откровенно говоря, здесь не требуются знания Photoshop. А можно без особых навыков сделать красивую картинку даже в PowerPoint, Fotor, Canva, Pixlr Editor.

Перейдя в группу можно заметить, что в тех группах стали видны кнопки «Закрепленная запись», «Информация» и «Жмите меню». А раньше они были скрыты. Естественно, всё оформление групп сразу поехало.

Загрузка новой обложки

А теперь давайте разберемся, как же включить возможность установки горизонтального шапки. Давайте мы кликнем на кнопку«Управление».

Затем кликаем на последнюю, и загружаем новую обложку группы ВКонтакте. Вот тут и можно понять, что файл загрузки может быть любой величины! Но не меньше, чем размер 1590×400 px. Создаем прототип обложки в любом редакторе. Далее мы можем выделить и сохранить ту область, которая соответствует требованиям ВК. Вот подсказка, где найти изображение для обложки, каким редактором воспользоваться, чтобы

Чем интересен новый дизайн ВКонтакте?

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

Когда вы будете оформлять горизонтальную обложку то заметите, что внутреннее меню теперь как-то выпадает из общего контекста. Думаю, лучше будет закрепить картинку для перехода в меню. И использовать его для размещения wiki-страниц в группе.

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

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

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

Как сделать обложку группы Вконтакте онлайн

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

P.S. Надеюсь эта информация Вам пригодится.

P.S.S. Включайте свою креативность и удачи Вам во всех начинаниях!

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

Как красиво оформить группу в Контакте

Создание баннера

При просмотре группы пользователь в первую очередь обращает внимание на аватару и меню. Ниже будет рассказано о том, как создать две картинки в программе Photoshop, правильно одну из них нарезать и написать специальный код с указанием

Этап 1

Открываем Photoshop, создаем новый документ с размерами 630х725 пикселей. Заливаем его белым цветом. Вырезаем в слое два окна. Сквозь эти окошки будет выглядывать графическое оформление Контакта. Вначале выделим прямоугольную область размером 200х710 пикселей, нажмем кнопку «Del». Далее выделяем прямоугольную область размером 382х442 пикселя, совмещаем получившиеся прямоугольники понизу и нажимаем клавишу «Del».

Этап 2

Под полученным слоем расположим графическое оформление группы. Лучше всего на картинке с основным фоном заранее написать нужный текст, а кроме этого создать нужное количество пунктов меню.

Этап 3

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

Для чего же левая картинка? Мы разрезаем ее на несколько частей (зависит от количества пунктов меню). К примеру, у нас меню имеет 5 пунктов, значит, на выходе получится 5 картинок 382х50 пикселей.

Этап 4

Пять полученных картинок нужно загрузить в альбом группы. Далее заходим на страничку группы и выделяем блок «Новости», переименовываем его в «Меню группы», после чего нажимаем «Редактировать».

Этап 5

Вот мы и подошли к заключительному этапу руководства «Как красиво оформить группу в Контакте». Открываем вкладку с названием «Исходный который находится в нижнем окошке, необходимо скопировать, а затем вставить в «Исходный код». В тексте кода заменяем photo на наименования файлов и отмечаем высоту файла (382 пикселя). Теперь вставляем адреса ссылок меню. Наименование файла берется из альбома.

Этап 6

Для идеального совмещения картинок нужно выполнить несколько условий:

Наименование группы должно умещаться в одну строку;

Адрес сайта — тоже одна строка.

Описание должно содержать 10 строк.

Wiki-разметка Вконтакте

Чтобы понять, как красиво оформить нужно также ознакомиться с понятием Wiki-разметки.

Что это такое?

Итак, Wiki-разметка — это система, предназначенная для редактирования страниц аналогично HTML. Перед началом оформления группы Вконтакте, определитесь с его видом. Оформление бывает графическое и текстовое.

Оформление текстового меню

Код для меню будет выглядеть вот так:

Начало и конец кода обозначаются тегами. Каждая иконка будет иметь вид [], затем описание.

Графическое меню

Код такого меню будет составляться по такому принципу:

! !! !!

Конечно, эта информация лишь поверхностно затрагивает тему Wiki-разметки. Узнать о ней больше можно, посетив официальную группу Вконтакте. Там представлено много полезной информации и видеоуроков о том, как красиво оформить

как сделать меню в группе вконтакте

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

Сегодня я покажу, как создать красивый единый блок “Аватар+Меню”. Вы наверняка видели вот такие красиво оформленные группы, где меню и аватар представляют собой одну картинку.



Смотрится весьма красиво, не правда ли? Не смотря на кажущуюся сложность сделать такой блок в своей группе сможет каждый. При этом вам не нужно знание секретов Фотошопа . Я покажу, как сделать это в обычном графическом редакторе Paint , который есть на каждом компьютере.

Итак, нам понадобятся:

  • картинка, из которой мы сделаем аватарку группы и меню;
  • графический редактор Paint;
  • программка Rect, для измерения ширины и высоты меню.

Открываем редактор Paint и нашу заготовленную картинку. Картинка должна быть не более 799 px по высоте и не менее 600 px по ширине. Стрелкой №1 на скриншоте я указал место, где можно глянуть текущие размеры картинки. А стрелкой №2 – инструмент, которым можно эти размеры изменить.

Получив подходящие нам размеры картинки, вырезаем из нее аватарку. Для этого используем инструмент “Выделить” (стрелка №3). Выделяем область шириной 200 px (стрелка №4 показывает, где можно следить за шириной выделяемой области). Вырезаем эту часть картинки (стрелка №5).

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

После этого аватар уже можно загрузить в нашу группу Вконтакте.

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

Идем на страницу нашей группы и замеряем расстояние в пикселях от кромки поля с заголовком “Обсуждения” или “Опросы” (смотря что у вас будет идти первым после ссылки на меню группы) до нижнего края аватарки. Ширину и высоту программа Rect нам покажет посредине окошка. Кстати, ширина блока меню должны быть исключительно 388 пикселей.


Итак, нужная в данном случае высота – 295 пикселей. Кстати, советую вам заранее подготовить описание вашей группы, потому как от его объема будет зависеть высота блока меню.

Возвращаемся в Paint с оставшейся картинкой и вырезаем из правого нижнего угла блок меню размером 388*295 пикселей.

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

Теперь уже знакомыми нам инструментами “Выделить” и “Вырезать” выделяем и вырезаем каждый пункт меню. Вставляем картинку каждого пункта в новый Paint и сохраняем как изображение в формате PNG.

Итого, у нас должно получится 5 картинок, составляющие одно целое. Почему пять, если ссылок 4? Нижнюю часть я вырезал как отдельную картинку без ссылки. Эти картинки мы загружаем в отдельный альбом нашей . Они нам очень скоро понадобятся.

Переходим на главную страницу группы и жмем на ссылку “Редактировать” в строке меню. Она должна появиться там при наведении курсора мышки.


В редакторе меню включаем режим wiki-разметки. И вписываем туда следующие строки.


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

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

В коде я выделил:

  • розовым – id картинки. Где его взять? В адресной строке вашего браузера при просмотре картинки.
  • зеленым – размеры картинки и команда “nopadding”, которая показывает картинку без отступов.
  • желтым – ссылка на желаемую страницу группы.


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

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

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

Сейчас я покажу вам, как сделать меню в группе вконтакте, и правильно ее оформить .

Делаем красивую графику

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

  • Аватар для группы — 200×300 пикс
  • Баннер в описании — 510×271 пикс

Подготовьте изображения в нужных размерах. Я возьму уже готовые картинки, чтобы показать вам на их примере.

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

Для начала загружаем аватарку. Идем в группу, и нажимаем «Загрузить фотографию» .

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


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

Идем на стену. Здесь в блоке «Добавить запись» , нажмите на значок «Фотография» .


Загрузите вторую подготовленную картинку. Обязательно выберите публикацию от имени сообщества. И затем нажмите «Отправить» .

Теперь запись нужно закрепить (см. ). Возвращаемся к новой записи, и в правом верхнем углу разворачиваем меню. Здесь нажимаем «Закрепить» .


Теперь обновите страницу, и посмотрите результат.


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

Как создать меню в группе вконтакте

Давайте вернемся к нашему примеру и представим, что необходимо сделать кнопку «Подробнее» . Она уже есть на картинке. Как нам сделать ее именно кнопкой, чтобы при нажатии, человек попадал на наш основной сайт? Сейчас покажу.

Чтобы сделать активные кнопки меню, мы должны их вырезать отдельными картинками. Для этого нам понадобится Photoshop .

Открываем нашу картинку в редакторе, и активируем инструмент «Раскройка» .

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



Теперь нажимаем Alt+Ctrl+Shift+S , чтобы сохранить готовые изображения.

Http://vk.com/pages?oid=-120208137&p=меню

Смотрите, после символов «odi=- » , вам нужно вставить id своей группы (см. ). А в самом конце ссылки, напишите название для вашей страницы с меню. В примере мы так и оставим «Меню» .



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


Теперь переходим непосредственно к созданию меню для группы в вк. Должно получиться нечто похожее.


Далее переходим в раздел «Редактирование» . Здесь для каждого изображения нам нужно убрать отступы, чтобы они слились в единую картинку. Для этого в коде добавьте вот такое значение «nopadding;» . И добавьте ссылку на нужную страницу или сайт, прописав значение «http://site.ru/page.html» (указывайте свои адреса!). В нашем примере кнопка «Подробнее» , должна вести на сайт сайт. Вот что должно получиться.

[] []


Сохраняем страницу. Не забываем скопировать ее адрес из адресной строки. Она должна быть вида:

Https://vk.com/page-120208137_52523487

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

Вот такое меню у нас получилось в итоге.


Гораздо проще все это понять, если посмотреть видео урок.

Видео урок: как сделать меню в группе вконтакте

Заключение

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

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

Правда, не все люди уделяют так много внимания картинке своей страницы. Скажем так, всех пользователей (если вести речь конкретно об этом вопросе) можно разделить на две группы: тех, кто устанавливает на аватарку свою фотографию, и тех, кто не заботится об изображении профиля. Они либо оставляют стандартное изображение, либо же пользуется какой-то сторонней картинкой.

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

Какой должна быть аватарка группы?

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

Очевидно, что фотография в группе должна быть соответствующей контенту, который размещен в сообществе. Это базовое требование к картинке: ее содержание должно быть связано с тем, о чем вы пишете. Вторым требованием является привлекательность изображения. Поскольку все, что посетитель видит о вашей группе, — это название и картинка, то, соответственно, последняя должна быть максимально привлекательной, чтобы пользователю хотелось нажать и зайти на страничку самого сообщества. Когда вы захотите сделать аватарку для группы «ВКонтакте», пожалуйста, учитывайте это. Последним требованием к фото группы следовало бы назвать информативность. Грубо говоря: на аватарке было бы целесообразно изобразить то, что намекнет пользователю, чем занимается группа. Сделать это можно, например, с помощью надписей.

Ищем готовую картинку

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

Делаем аватарку с помощью онлайн-редакторов

Второй вариант — редактирование готовых изображений (или создание новых) с помощью онлайн-редакторов. К счастью, сейчас существует много сервисов, позволяющих разработать свой аватар как «с нуля», так и с помощью одного из готовых шаблонов. Вам достаточно определиться с тем, что вы хотели бы видеть на изображении для авы, а дальше о том, как сделать аватарку для группы «ВКонтакте» без «Фотошопа», можете даже не переживать — ресурс сделает все в автоматическом режиме. Таких готовых решений сейчас в Сети достаточно много. Они бесплатны и многофункциональны. Единственный минус работы с такими сайтами — это — адрес ресурса, который сделал вам аватар, размещенный где-нибудь в нижнем углу.


Делаем аватарку в «Фотошопе»

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

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

Наконец, после того как мы ответили на вопрос «Как сделать аватарку для группы «ВКонтакте»?», настало время подумать о том, что будет изображено на фотографии в группе. Как уже отмечалось, это должно быть что-то тематичное, привлекательное и информативное. Предлагаем вам взять лист бумаги и ручку и схематично набросать логотип своего сообщества. После этого можете приступать к созданию изображения.


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

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

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

Итак, давайте по порядку.

Как создать вики-страницу?

1. Создайте в адресной строке вашего браузера ссылку вида:

  • ххх – id вашей группы или публичной страницы;
  • Название_страницы – любое слово, которым вы назовете свою страницу.

Как узнать id вашего сообщества? Если id не содержится в ссылке, например, https://vk.com/make_community , его можно узнать следующим образом. Нажимаете на заголовок стены группы, где написано количество публикаций.


Откроется отдельно стена вашего сообщества. В адресной строке будут цифры. Это и есть id вашего сообщества.


2.
Перейдите по созданной вами ссылке и нажмите “Наполнить содержанием”.


3. Наполните вашу страницу содержанием. К примеру, нам необходимо графическое меню в виде отдельных кнопок. Сначала создаем всю картинку целиком.


Затем разрезаем ее на отдельные кнопки. В данном конкретном случае у нас должно получится четыре картинки-кнопки.

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


После загрузки всех картинок должно получится вот так:

Нажав на любую из картинок, можно указать ссылку на страницу, куда будет вести этот пункт меню. Это может быть как страница вашего сообщества, так и страница внешнего сайта или интернет-магазина.


Создаем меню.


Должна получится вот такая запись на стене вашей группы Вконтакте:


Как закрепить меню?

Нам остается закрепить меню наверху группы. Для этого жмем на текст перед картинкой в записи. В открывшемся окне внизу справа нажимаем “Закрепить”.


Все. Теперь у нас должно получится вот так:


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

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

Всем привет, с вами Роман Литвинов, дизайнер команды Ardens. pro. Сегодня я к вам пришел с гайдом-туториалом, как создать единый блок аватара и меню Вконтакте (единым целым). Для начала примеры на что это будет похожим.

Примеры:



Разметка аватара для группы Вк

Для старта нам нужна сетка. Чтобы её сделать, мы делаем скриншот страницы группы и забрасываем в проект, в моем случае в Photoshop.


После чего сочетанием клавиш CTRL+R вызываем линейки и расставляем направляющие по краям аватара и закрепа. Для того, чтобы вытянуть направляющую, нужно зажать ЛКМ на линейке и потянуть в сторону нашего макета.


Размер аватара, который мы видим в браузере без масштабирования, 200х500 пикселей. А закреп в таком виде 395х237 пикселей.

Порезка

Мы сделали разметку, теперь приступим к порезке. Почему сейчас? Да потому, что это уже почти конец моего гайда.
Для порезки нам нужен инструмент «Раскройка» (в англ. версии «Slice tool»)


С помощью этого инструмента делаем нарезку по нашим направляющим, конкретно внутри аватара и закрепа по краям.

Должно получиться так.

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


После работы над нашим дизайном сохраняем порезанные части с помощью CTRL+SHIFT+ALT+S или Файл->Сохранить для web…

В данном окне с зажатым Shift выбираем наш аватар и закреп нажимаем сохранить

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

В папке куда мы сохраняли порезку мы увидим примерно такое.

Единый блок аватара и меню для группы Вконтакте

Смело заливаем наш аватар и закреп в тестовую группу, чтобы посмотреть результат

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

Завершение

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

Полезные статьи на похожей тематики:

Забавное видео (местами и не поймешь «фотошоп» или нет)

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

Ставьте лайки, оставляйте комментарии, бросайте маффины или помидоры в нашей группе

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

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

Чтобы вы сразу поняли о чем идет речь – выкладываю пример оформленной группы:


Если в 2-х словах, то в графическом редакторе (том же эдоб фотошоп) создаются в 2 картинки. Одна из них нарезается на несколько фрагментов и с помощью вики разметки вконтакте проставляются ссылки. Если не испугались этих страшных слов – я продолжу.

Шаг 1 . В графическом редакторе (лучше всего использовать adobe photoshop) нужно создать документ размером 630 на 725 пикселей. Далее в первом слое вырезаем 2 окна, которые и будут являться меню и аватаркой. Первым делом выделаем прямоугольник размером 200 на 500 пикселей и нажимаем клавишу DEL.
__________________
Сразу оговорюсь, что в уроках на других сайтах вы можете найти советы, где говорят о том, что обрезать нужно прямоугольник размером 200*710. ЭТО НЕ ПРАВИЛЬНО. Сейчас в социальной сети вконтакте есть ограничение на высоту авы и в случае использования высоты в 710 px – она получится обрезанной.

__________________

Теперь вырезаем меню – еще один прямоугольник размером 382 на 232 и жмем также клавишу “делит”. Прямоугольники должны быть соединены внизу.

Заготовка готова.

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

Шаг 3 . Правый прямоугольник можно сохранять. Не забывайте про размер 200 на 500. Это готовая аватарка для вашей группы. Можете сразу загрузить ее в правом верхнем углу группы/паблика.

Что касается прямоугольника с размеченными пунктами меню, то его нужно будет нарезать на несколько картинок (в данном случае 5). Ширина 382, а вот высота рассчитывается индивидуально, но должна быть не менее 50 пикселей.


Шаг 4 . Теперь нужно 5 получившихся фото загрузить в альбом сообщества.


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


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

Шаг 5 . Во вкладке “редактирование” вставляем cследующий код:
[]
[]
[]
[]
[]

Начинаем его править.
photo – представление ссылки на фотографию. Откройте одну из 5 загруженных вами фото с меню группы и в строке браузера в увидите что-то вроде этого –
http://vk.com/photo72120765_272239411

72120765_272239411 – и есть тот самый необходимый код фотографии. Можно просто использовать имя файла.


Шаг 6 . Необходимо совместить картинки от аватарки меню, если они разъехались. Для этого нужно сделать 3 вещи:
Название группы должно быть в одну строчку
Описание в 10 строк (тут иногда нужен подгон)
Вебсайт также в одну строчку.

Вот что примерно должно у вас получиться:

Как видите, сделать оформление для группы вконтакте совсем несложно. Если у вас есть вопросы – задавайте их в комментариях, а если не хотите “париться” – вам прямая дорога на фриланс.

Создание оформления, описанного в данной статье обойдется Вам в 15-25 у.е.

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

Отметим, что примерно в двадцатых числах октября администраторы Вконтакте обрезали аватарки групп, сделав их 200*500 пикселей. Исходя из этого немного подправьте урок. Или же просто сделайте невысокое меню: 382*232 и 200*500.

Оформление группы Вконтакте

В фотошопе создаем новый документ белого цвета 630*725 пикселей. В слое вырезаем два окна, через которые будет виднеться графическое оформление, а именно прямоугольник 200*710 и нажмите Del и прямоугольник 382*442, прямоугольники соединяем внизу и опять нажимаем Del.

Под этим слоем расположим наше графическое оформление. Мы положили картинку, далее текст, в левом прямоугольнике создаем пять пунктов (количество зависит от того сколько вам нужно).

Правый прямоугольник сохраняем отдельной картинкой 200*710. Вот и готова первая картинка для оформления. Ее необходимо загрузить в блок, расположенный в правом верхнем углу группы «Загрузить фотографию». Левую картинку нарезаем по количеству пунктов. У нас получается 5 картинок 50*382.


Загружаем все пять картинок в основной альбом страницы группы («Мои фотографии» — «Мои альбомы» — «Добавить фотографии»). Переходим на страницу группы и под описанием видим блок «Новости» (можно его переименовать) — «Редактировать».


Так во Вконтакте произошли некоторые изменения, после предыдущего пункта переходим в закладку «Редактировать» и нажимаем на кнопку справа «Режим вики разметки». В открывшееся окно помещаем следующий код:


Переходим в закладку «Исходный код» и вставляем туда следующий код (визуальным редактором лучше не пользоваться, он сбивает настройки):

[]
[]
[]
[]
[]

Не забудьте в коде изменить слово photo, на название своих файлов и укажите высоту файла (ширина уже задана), а так же выставьте url ссылок меню.

Для того чтобы картинки были совмещены, название группы должно помещаться в одну строку, описание группы в 10 строк, а url веб сайта в 1. Кликните по картинке, что бы наглядно увидеть, как это работает.

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

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

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

Но если Ваше сообщество будет не привлекательно и как у всех то, кто захочет там остаться? Я думаю никто!!! Так давайте украсим свои группы качественным дизайном и научимся делать это очень быстро. Перед тем как начать создавать графику и наше будущее меню необходимо установить программу фотошоп на свой компьютер для дальнейшей нарезки картинок. Многие спросят зачем вообще нужно нарезать картинки. Тут дело в том, что для каждой ссылки меню мы должны будем создать отдельную полоску из общего баннера.

Существует на сегодня несколько видов создаваемого меню:

  • Открытое с активными пунктами;
  • Закрытое в виде закрепленной записи;
  • С отдельными картинками или общей смежной картинкой баннера и меню.

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

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

Закрытое меню группы ВК

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

Вид меню, будет следующим:

Открытое меню группы (закрепленный материал)

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

Как сделать красивое меню для группы ВКонтакте: пошаговая инструкция

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

  • Для аватарки 200х332 пикселя;
  • Для основного баннера меню 395х282 пикселей.

Как вы могли заметить высота изображений отличается и это сделано для того, чтобы картинки не съезжали по высоте и были на одном уровне так как высота названия сообщества и статус занимают около 50 px и как раз эту величину нам необходимо будет убрать из высоты меню.

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

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

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

Создадим новое полотно в фотошопе размерами 600х350 пикселей которое мы будем использовать в качестве трафарета вырезав в нем проемы для наших картинок. Для работы нам необходимо перевести размеры всех элементов и линеек в пикселе и делается это по следующему пути: «Редактировать-установка-основное» и тут уже выставляем пиксели.

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

Используя левую кнопку мыши, как будто вы выделяете область, необходимо выделить блоки нужных нам размеров и после каждого выделения нажимаем кнопку удалить «Delete» и выбираем 50% серого . Такие действия приведут к тому, что блоки будут нужных размеров и выделены цветом отличным от основного фона.

Должно получиться следующее:

А теперь просто выбираем ластик и функцией «волшебный ластик» жмем на каждый серый блок и получим трафарет с вырезами. Следующим шагом мы выбираем наше основное изображение и подкладываем под фон и получим готовые картинки на который можно будет написать текст с названием меню ли прочие рекламные элементы.

Отлично. После того как вы поместили картинку нашего дизайна нам остается выбрать «сохранить для Web» и на выходи мы получаем 2 наши картинки. Теперь идем снова в нашу группу и можем заливать главную аватарку (вертикальную). Баннер для меню мы будем использовать чуть позже при работе с кодом wiki-разметки.

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

Итак, переходим снова в фотошоп и создаем новый холст с размерами 400х300 пикселей. После чего выбираем в разделе: файл-поместить и выбираем картинку для фона меню.

На картинке размещаем кнопки нашей будущей менюшки и нарезаем картинку как мы делали выше путем выделения нужных блоков. После чего также выбираем «сохранить для web» и получаем папку с нашими нарезками. В моем случае получилось 4 картинки в отдельной папке.

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

Обратите внимание что у вас должно быть:

  • Открыты материалы в режиме «ограниченные»;
  • Включены обсуждения;
  • Папка с фотографиями открыта для всех.

Теперь остается настроить нашу страницу где и будет отображаться на менюшка. Для этого переходим на главную страницу сообщества и выбираем свежие материалы и редактировать и называем «НАШЕ МЕНЮ».

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

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

Совет: Важным моментом после загрузки изображений является удаление отступов. Решается это вставкой «nopadding» перед размерами изображений.

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

[]
где xxxxx — id вашей картинки
yyyyy — ширина в пикселях (не более 388)

Должно в итоге получиться вот так:

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

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

http://vk.com/page-116682062_51411604?act=edit&hid=183950676&section=edit

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

Переходим на главную страницу и делаем следующее:

Шаг №1.

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

Шаг №2.

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

Шаг №3.

Теперь после публикации записи нажимаем на время создания в нижней левой части записи и выбираем «ЗАКРЕПИТЬ».

Отлично!!! На этом заканчиваем. Теперь вы умеете создавать классные меню и можете зарабатывать на этом неплохие деньги. Советую все делать в следующем порядке:

  • Придумываем структуру и заказываем дизайн изображений меню;
  • Делаем подгонку размеров и нарезку всех изображений;
  • Вставляем в альбомы картинки;
  • Редактируем в редакторе все нарезки и публикуем на главные страницы группы.

В итоге работы мы получим вот такое меню.

А вот само меню при нажатии оно будет выскакивать с активными ссылками. Стоит поиграть с размерами и подогнать под свой экран, но не забываем и про отображение в мобильных устройствах.


ВАЖНО: После смены дизайна ВК в 2016 году внесены новые изменения при создании изображений и требования к картинкам о которых .

Скачать шаблон меню группы ВК + все исходники урока

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

Прикладываю видеоролик для закрепления прочитанного -))).

В этой статье мы пошагово рассмотрим, как правильно создать, настроить и качественно оформить сообщество «ВКонтакте»

Создание сообщества

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

Вид сообщества и тематика

Для начала вам необходимо будет определиться с видом сообщества, в зависимости от ваших целей и выбрать тематику сообщества.

Оформление группы

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

На обложке можно разместить:

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

Обложка в сообществе «МТС»

Обложка в сообществе «Тинькофф Банк»

Обложка в сообществе «HeadShot»
Размеры изображений для оформления сообщества ВКонтакте.
Размер обложки для группы ВКонтакте 1590x400px
Размер миниатюры аватара — круг диаметром 200px

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

Описание сообщества

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

Лайфхак: Для того, чтобы сделать описание сообщества более подробно (с фото, ссылками и красивой версткой), необходимо поставить в закрепленную запись вики-пост, в котором будет яркая картинка и призыв к действию.

Примеры вики-постов:


Аватар группы

Аватар сообщества — это важная деталь в общем построении качественного оформления, в этой статье мы выделили несколько очень важных моментов, которые нужно учесть при создании аватара сообщества.
С учетом того, что сейчас преимущественно используют обложки сообществ, то сам автар в группе отображается как миниатюра. Поэтому здесь мы поговорим о том, как важно оформить именно миниатюру аватара. Как уже говорилось выше, размер миниатюры аватара — круг диаметром 200px.

    1. Текст
      Если вы размещаете текст на миниатюре аватара, важно, чтобы он был крупным и не выходил за пределы аватара.
    2. Понимание
      На аватаре необходимо разместить изображение, на котором будет понятно, что изображено.
    3. Минимализм
      Для того, чтобы вашa аватаркa смотрелась актуально, можно сделать её в стиле минимализм: меньше слов и излишних элементов, не несущих практически никакой смысловой нагрузки. Миниатюра аватара обязана быть максимум простой и читабельной.
    4. Привлечь внимание
      Чтобы миниатюра аватарки привлекала внимание. Нужно оформить её так, чтобы она не была слишком белой и скучной, иначе она потеряется на фоне более красочных аватарок конкурентов.

Что разместить на миниатюре аватара?

Рассмотрим варианты использования миниатюры аватара в качестве привлечения подписчиков в сообщество.


Настройки сообщества

Перейдя во вкладку «управление сообществом», вы можете придумать короткий адрес страницы и указать дополнительную информацию.

Далее во вкладке «ссылки» указать ссылки на вашу страницу в других соцсетях и ссылку на ваш сайт.

Во вкладке «разделы» включить необходимое. Стену сообщества удобнее ставить ограниченную, чтобы в дальнейшем не разгребать её от публикаций спам-ботов.

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

Также в сообщество можно добавить приложения и настроить их для своих целей. Например, приложение «Заявки» наиболее удобное для работы с лидами. Это онлайн-запись и прием заказов. Или, например, приложение «Карты», с адресами ваших магазинов, офисов, мероприятий. С помощью приложения «Купить билет» можно продавать билеты на мероприятия прямо на странице сообщества, т.е. подписчики/клиенты смогут купить билет, не переходя на ваш сайт.

Вики-меню — красиво и информативно

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

Примеры вики-меню:



Подробное руководство по созданию вики-меню вы можете посмотреть тут —

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

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

Продуманный дизайн группы ВКонтакте вызывает доверие у покупателя. Группа начинает работать как полноценный сайт. Правда есть несколько отличий – это менее сложные условия содержания и с ведением и раскруткой справиться легче. Это является значительным преимуществом.

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

Основные элементы дизайна группы ВКонтакте

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

Обложка

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

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

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

Аватар

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

Миниатюра

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

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

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

Меню

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

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

Что же можно включить в меню? Это, прежде всего, информация о вас, история возникновения компании или обратная связь с вами, ответы на часто задаваемые вопросы (FAQ), рейтинги, бланки заказов и многое другое.

Баннер

Это картинка, которая ведет к основному оформлению меню. Обычно ее закрепляют сверху и создают целостную композицию с аватаром группы.

Как правильно создавать дизайн группы ВКонтакте?

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

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

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

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

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

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

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

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

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

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

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

Как подготовить сообщество ВКонтакте к продвижению — Маркетинг на vc.ru

В этой статье поделимся советами, как красиво упаковать сообщество и подготовить его к рекламе.

2550 просмотров

Зачем это нужно?

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

Также и с вашим сообществом во ВКонтакте. Прежде чем запускать рекламу, проведите аудит сообщества по нашему чек-листу. И если есть необходимость, приведите его в порядок. Иначе вы спустите рекламный бюджет в трубу — пользователь кликнет по вашему объявлению, но в группе не останется.

Почему сообществом самое время заниматься в период пандемии:

  • Заказы онлайн. Если есть возможность принимать заказы онлайн, работать на доставку, сообщество может стать самым главным каналом связи с заказчиками.
  • Репутация. Пока нет возможности работать над продуктом или услугой, можно заниматься репутацией компании, создавать новостной фон. После окончания карантина вы получите прогретую аудиторию.
  • Внимание людей. Охваты публикаций увеличатся, потому что сейчас внимание большинства людей приковано к социальным сетям. Если, конечно, посты будут качественными.
  • Анализ рынка, спроса и потребителей. Сейчас лучшее время, чтобы узнать что-то новое о своих клиентах и о своем продукте. После снятия карантина новые знания можно будет использовать с выгодой для бизнеса.

Успех вашей рекламной кампании напрямую зависит от:

  • настроек сообщества;
  • внешнего вида;
  • контента.

По этим пунктам и пробежимся.

Настройка сообщества

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

Пункт «настройки»

Название сообщества. Оно должно отражать суть вашего дела и подходить под поисковый запрос. Если вы занимаетесь установкой окон, не надо называть группу названием компании: Олимпус. Вологда. Нужно назвать: Установка окон в Вологде| Олимпус. Именно так в поиске ищут данную услугу.

Описание сообщества. Оно должно быть четким и кратким. Человек, прочитав его, должен понять, чем вы занимаетесь. Не нужно сюда писать прайс-лист. Только кто вы, чем занимаетесь и в чем ваше преимущество. Здесь поможет блог создателя сервиса «Главред» Максима Ильяхова. Прочитайте у него, как писать текст о компании.

Вот пример хорошего текста о компании:

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

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

Кнопка действия. Нужно ее настроить. Можно выбрать вариант позвонить или открыть. Указываем номер телефона или ссылку на сайт.

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

Пункт «Разделы»

Здесь вы настраиваете под себя. Например, в ивент-сфере можно включить мероприятия. Если вы публикуете много статей, включите статьи.

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

Пункт «Комментарии»

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

Пункт «Ссылки»

Здесь важно указать ссылки на все социальные сети, где есть страничка компании, а также на сайт компании и партнерские проекты. Важно: пишите название ссылок, например, «мы в Instagram», чтобы человек понимал, куда она его приведет.

Пункт «Адреса»

Указываем адрес офиса, включаем кнопку «показать карту». Она будет выводиться на главной странице сообщества под описанием группы. Если у вас несколько офисов, можно добавить еще адреса. Также рекомендуем написать часы работы. Они тоже будут видны пользователям на главной.

Пункт «Меню»

Это один из самых сложных пунктов. Здесь можно создать разделы «отзывы», «товары», «фотографии» и многое другое. Вставляете ссылку и пишите название. Сложность заключается в том, что нужно оформить меню в одном стиле. Можно обойтись без фотошопа, поможет бесплатный сервис Canva.

Пункт «Участники»

Здесь назначаются редакторы, администраторы и модераторы сообщества, виден список участников группы, список приглашенных людей. Можно заносить пользователей в черный список, если это необходимо. Также можно скрыть участников сообщества на странице. Это делается для того, чтобы конкуренты не смогли рекламироваться на вашу аудиторию. Один нюанс: вы не будете отображаться в списке групп у ваших подписчиков.

Пункт «Сообщения»

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

Можно настроить персональное приветствие в сообщениях для всех написавших.

Пункт «Беседы»

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

Пункт «Приложения»

Подключаем и настраиваем. С помощью них вы сможете вынести отзывы на главную страницу, сделать персональное приветствие, настроить рассылку и многое другое. Нюанс: сообщество может подключить не более 5 приложений и вывести только 1 виджет на главную. Виджет — это как раз и есть блок данных из приложения, который выводится на главной странице сообщества, например, отзывы.

Важно!

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

​Виджет Отзывы

Пункт «Денежные переводы»

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

Пункт «Журнал действий»

В этом пункте можно посмотреть, кто работал с контентом, что было изменено: например, кто и какую запись удалил. Сюда же попадают страйки — жалобы на неоригинальный контент, опубликованный в вашей группе. За оригинальностью контента следит специальный алгоритм Немезида, он ищет неуникальные материалы. Обжаловать страйк можно в течение 48 часов. Если у вас будет более 5 страйков, ваши посты убирают из рекомендаций. Из-за этого снижается их видимость. Подробнее про страйки и Немезиду читайте в статье.

Оформление сообщества

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

Обложка

Обложка — эта ваша визитная карточка сообщества, как и описание. Она задает тон общения и значительно влияет на то, останется ли человек с вами или нет.

  • Размер изображения обязательно 1590х400. Если для телефона не планируете делать отдельную обложку, тогда все важные элементы и картинки должны находиться приблизительно в центре. На фото ниже отмечена область, в которую нужно поместить все самые важные элементы.

Аватар

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

Обсуждения

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

Фотоальбомы

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

Видеоальбом

Если есть возможность — снимайте видео. Показывайте свой товар, процесс работы, сотрудников. Создавайте доверительное отношение к компании.

Товары

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

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

Контент

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

Стена

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

Публикации

  • Текст должен быть простым и понятным для пользователей. Перед тем как писать, спросите себя: чем он будет полезен вашему читателю? Здесь опять же поможет блог Ильяхова и его сервис «Главред» .
  • Текст должен быть без орфографических ошибок. Если есть с этим проблемы, проверяйте в специальных сервисах.
  • Текст должен быть уникальным. Так умная лента покажет его большему количеству пользователей. Опять же проверяйте в специальных сервисах.
  • Избегайте большого количества смайлов в тексте, чтобы пост не смотрелся, как новогодняя елка. Если вы вдруг решите рекламировать пост, где более 6 смайлов в тексте, он не пройдет модерацию ВКонтакте.
  • Ссылки и хештеги в публикациях снижают охваты. Просмотров будет меньше. Так что по возможности откажитесь от них. Если ссылку все равно нужно указать, включите ее в источник.
  • Не используйте в тексте стоп-слова: купи, напиши, позвони, оставь комментарий, поставь лайк и любые другие призывы к действию. Они тоже снижают охваты. То же самое касается и репостов. Не стоит их делать в свое сообщество. Если все-таки хочется опубликовать информацию, скопируйте текст и укажите источник.

Контент-план

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

Можно делать контент-план по рубрикам:

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

Вывод

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

Справочник Eatwell — NHS

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

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

Ешьте не менее 5 порций различных фруктов и овощей в день.

Кредит:

Поставляемая модель

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

Старайтесь съедать не менее 5 порций различных фруктов и овощей каждый день. Выбирайте из свежих, замороженных, консервированных, сушеных или выжатых соков.

Помните, что фруктовые соки и смузи не должны превышать 150 мл в день.

Фрукты и овощи являются хорошим источником витаминов, минералов и клетчатки.

Узнайте больше о том, как получить 5 в день

Основные приемы пищи на картофеле, хлебе, рисе, макаронах или других крахмалистых углеводах.

Кредит:

Поставляемая модель

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

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

Крахмалистые продукты являются хорошим источником энергии и основным источником ряда питательных веществ в нашем рационе.

Узнайте больше о крахмалистых продуктах

Употребляйте молочные продукты или молочные альтернативы (например, соевые напитки и йогурты)

Кредит:

Поставляемая модель

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

По возможности старайтесь выбирать продукты с низким содержанием жира и сахара, такие как 1%-ное молоко, обезжиренный сыр или простой обезжиренный йогурт.

Узнайте больше о молоке и молочных продуктах

Ешьте немного бобовых, бобовых, рыбы, яиц, мяса и других белков.

Кредит:

Поставляемая модель

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

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

Каждую неделю съедайте как минимум 2 порции рыбы, 1 из которых должна быть жирной, например, лосось или скумбрия.

Узнайте о бобовых, рыбе, яйцах и мясе.

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

Кредит:

Поставляемая модель

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

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

Узнайте больше о различных типах жиров в нашем рационе

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

Кредит:

Поставляемая модель

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

Они не нужны в нашем рационе, поэтому их следует есть реже и в меньших количествах.

Получите советы по сокращению потребления сахара

Пейте много жидкости — правительство рекомендует от 6 до 8 чашек или стаканов в день.

Кредит:

Поставляемая модель

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

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

Узнайте больше о воде, напитках и здоровье

Как работает руководство Eatwell?

Справочник Eatwell делит продукты, которые мы едим и пьем, на 5 основных пищевых групп.

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

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

Ненасыщенные жиры из растительных источников (например, растительное масло или оливковое масло) являются более полезными типами жиров.

Но все виды жиров содержат много энергии (калорий), поэтому их следует есть только в небольших количествах.

В среднем женщины должны потреблять около 2000 калорий в день (8400 кДж), а мужчины — около 2500 калорий в день (10500 кДж). Большинство взрослых потребляют больше калорий, чем им нужно.

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

Комбинированные пищевые продукты

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

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

Руководство Eatwell применимо ко всем?

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

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

Дети в возрасте до 2 лет

Руководство Eatwell не распространяется на детей в возрасте до 2 лет, поскольку у них другие потребности в питании.

В возрасте от 2 до 5 лет дети должны постепенно переходить к употреблению тех же продуктов, что и остальные члены семьи, в пропорциях, указанных в Руководстве Eatwell.

Узнайте больше о потребностях в питании младенцев, детей ясельного возраста и детей младшего возраста в разделе Первая твердая пища для вашего ребенка.

Загрузите буклет Eatwell Guide

Для получения дополнительной информации, в том числе сведений о том, какие продукты включены в группы продуктов питания, загрузите The Eatwell Guide от GOV.UK.

Поддержка здорового питания

Рекомендации по питанию и диете на веб-сайте NHS включают:

  • 8 советов по здоровому питанию
  • Сбалансированное питание
  • Маркировка пищевых продуктов
  • Советы по снижению веса
  • Подать заявку на получение гранта Центр 4kin 90 Riv

    Поговорите со своей семьей

    Поговорите со своей семьей и определите рак в своем генеалогическом древе, это может быть хорошим индикатором рисков для вашего здоровья. Загрузите наш рабочий лист «Семейное древо» здесь. Не забудьте включить себя, детей, родителей, братьев и сестер, тетей, дядей, бабушек и дедушек.

    Получите образование

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

    Trusted Healthcare Provider

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

    Найти провайдера

    Более высокий риск среди еврейского населения ашкенази

    В общей популяции примерно 1 из 400 человек является носителем мутации BRCA1 или BRCA2. Люди еврейского происхождения ашкенази имеют шанс 1 из 40 нести мутацию BRCA, что делает их в 10 раз более вероятной носительницей мутации BRCA, чем кто-либо в общей популяции. Независимо от того, мужчина вы или женщина, если у вас есть мутация BRCA, то вероятность передачи мутации вашим детям, будь то мальчики или девочки, составляет 50%. Важно отметить, что эти мутации значительно увеличивают риск, но не являются гарантией того, что человек заболеет раком.

    Почему еврейское население ашкенази подвергается повышенному риску?

    Более 90% мутаций BRCA, обнаруженных в еврейской общине, являются одной из трех «мутаций-основателей». Мутация-основатель — это специфическая генная мутация в популяции, которая была основана небольшой группой предков, которые были географически или культурно изолированы. Поскольку популяция была изолирована, частота мутаций основателей у потомков намного выше, чем была бы, если бы популяция была больше и смешивалась с более генетически разнообразными популяциями. Большое расширение популяции вызвало нынешнюю высокую частоту мутаций в еврейском населении ашкенази. Если вы еврейского происхождения ашкенази, вероятность наличия мутации гена BRCA по сравнению с населением в целом увеличивается в десять раз. Мутации BRCA могут передаваться по материнской или отцовской линии и могут быть связаны с любым из следующих видов рака:

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

    Готовы действовать? Знание — сила. Пройдите этот короткий тест, чтобы быть активными в отношении своего здоровья.

    Гены 101

    Наши тела состоят из множества крошечных строительных блоков, называемых клетками. Наши клетки содержат копию нашего генома — весь генетический код ДНК, который мы унаследовали от наших родителей. Наш геном состоит из 46 хромосом, 23 унаследованных от мамы и 23 от папы. Каждая хромосома имеет сотни или тысячи генов. У каждого гена есть инструкции по созданию белка, который может контролировать структуру или функцию клеток, может определять многие вещи, включая наш рост или цвет наших глаз. Гены также содержат инструкции для многих вещей внутри нас, которые мы не можем видеть, например, как формируются наши кости или как работает наше сердце. Каждый ген состоит из молекул, называемых нуклеиновыми кислотами (A, T, C и G). Определенная последовательность нуклеиновых кислот содержит инструкции, которые контролируют все компоненты и их функции в клетках.

    Если последовательность ДНК изменена, например, из-за орфографической ошибки, инструкции могут не иметь смысла. Технический термин для этого изменения — «мутация», означающий изменение обычного генетического кода, которое может изменить инструкции, хранящиеся в гене. Мутация в гене, который восстанавливает повреждения ДНК или контролирует рост клеток, может увеличить риск развития рака.

    Спорадический и наследственный рак:

    Рак яичников и молочной железы может быть как спорадическим, так и наследственным. Спорадические формы рака составляют подавляющее большинство (85-90%) рака яичников и молочной железы и не связаны с семейным анамнезом рака или наследственными мутациями, связанными с раком. Спорадические виды рака возникают в результате генетических мутаций, приобретенных в некоторых клетках организма в результате нормального метаболизма и факторов окружающей среды. Этот тип рака может случиться с каждым. Большинство приобретенных генных мутаций не передаются родственникам и детям.

    Наследственный (также известный как наследственный или семейный) рак — это рак, возникающий из-за генетических мутаций, унаследованных от мамы или папы. Другие кровные родственники также могут иметь те же генные мутации. Родители передают по одной копии каждого гена своим детям. Если у родителя есть генетическая мутация в гене, каждый из его детей имеет 50% шанс унаследовать эту мутацию. Следовательно, даже в семьях с наследственным раком не все члены семьи наследуют мутацию, вызывающую рак, и их риск заболеть раком аналогичен среднему человеку в общей популяции. Людям, у которых подозревается наличие в семейном анамнезе высокой частоты рака яичников, молочной железы и других видов рака, может быть предложено генетическое тестирование, чтобы попытаться найти конкретную генетическую мутацию, которая может подвергнуть их риску. Важно отметить, что люди, у которых нет известной генетической мутации, но у которых в семье часто встречаются рак яичников, молочной железы или другие виды рака, по-прежнему считаются подверженными более высокому риску развития этих видов рака.

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

    BRCA 1 и BRCA 2: наиболее распространенный наследственный рак молочной железы и яичников

    Гены, наиболее часто вовлеченные в развитие наследственного рака молочной железы и яичников (HBOC), — это BRCA1 и BRCA2. Эти гены названы в честь их связи с раком груди (BR) (CA), но они также связаны с риском рака яичников, а также других видов рака. И женщины, и мужчины могут наследовать мутации в этих генах HBOC. BRCA1 и BRCA2 — это гены-супрессоры опухолей, которые выполняют в нашем организме обычную роль, предоставляя инструкции по восстановлению повреждений ДНК и предотвращению рака. Когда в семье есть унаследованная мутация в BRCA1 или BRCA2, это приводит к увеличению риска развития рака. Не у каждого мужчины или женщины, унаследовавших мутацию в гене BRCA1 или BRCA2, разовьется рак, но у людей, у которых есть мутация, значительно повышена вероятность развития рака, особенно рака молочной железы или яичников.

    Хотя рак молочной железы и яичников являются наиболее распространенными видами рака, диагностируемыми у людей с мутациями BRCA1 и BRCA2, риск некоторых других видов рака также повышен. Мужчины с мутациями BRCA1 и BRCA2 имеют более высокий риск рака предстательной железы с ранним началом, чем мужчины без мутаций ни в одном из генов. Другие виды рака, наблюдаемые чаще, особенно у людей с мутациями BRCA2, включают рак поджелудочной железы и меланому. Исследователи продолжают находить новые гены, которые связаны с наследственным раком груди и/или яичников, поэтому важно регулярно наблюдаться у генетического консультанта, если в вашей семье есть вероятность наследственного рака груди и яичников.

    Поговорите со своей семьей о своей истории болезни и пройдите тест «Оцените свой риск» здесь

    Cilicaine VK — NPS MedicineWise

    1 Название лекарства

    Феноксиметилпенициллин (в виде калия).

    2 Качественный и количественный состав

    Каждая капсула Cilicaine VK содержит 250 мг или 500 мг феноксиметилпенициллина (в виде калия) в качестве активного ингредиента.
    Полный список вспомогательных веществ см. в Разделе 6.1 «Список вспомогательных веществ».

    3 Фармацевтическая форма

    Силикаин ВК. Капсулы по 250 мг представляют собой твердые желатиновые капсулы размера 2, непрозрачные, темно-бордового цвета.
    Капсулы Cilicaine VK 500 мг представляют собой твердые капсулы размера 0, непрозрачные, темно-бордового цвета.

    4 Клинические данные

    4.1 Терапевтические показания

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

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

    4.2 Доза и способ применения

    Взрослые.

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

    4.3 Противопоказания

    Повышенная чувствительность к пенициллинам и/или цефалоспоринам.

    4.4 Специальные предупреждения и меры предосторожности при использовании

    При наличии следующих медицинских проблем следует учитывать соотношение риска и пользы.

    Чувствительность в анамнезе (аллергия на пенициллины/цефалоспорины).

    Сообщалось о серьезных и иногда летальных реакциях гиперчувствительности (анафилактоидных) у пациентов, получавших терапию пенициллином. Хотя анафилаксия чаще возникает после парентеральной терапии, она возникает у пациентов, принимающих пероральные пенициллины. Эти реакции более вероятны у лиц с гиперчувствительностью к пенициллину и/или чувствительностью к нескольким аллергенам в анамнезе.
    Имеются сообщения о случаях гиперчувствительности к пенициллину у лиц с тяжелыми реакциями при лечении цефалоспоринами. Перед началом терапии любым пенициллином следует тщательно выяснить, были ли у него ранее реакции гиперчувствительности на пенициллины, цефалоспорины или другие аллергены. При возникновении аллергической реакции следует отменить препарат и назначить соответствующую терапию. Серьезные анафилактоидные реакции требуют немедленного экстренного лечения адреналином. Кислород, внутривенные стероиды и обеспечение проходимости дыхательных путей, включая интубацию, также должны вводиться по показаниям.

    Желудочно-кишечные заболевания (псевдомембранозный колит).

    Сообщалось о развитии псевдомембранозного колита, ассоциированного с применением антибиотиков, при применении многих антибиотиков, включая феноксиметилпенициллин. Токсин, продуцируемый Clostridium difficile , по-видимому, является основной причиной. Тяжесть колита может варьироваться от легкой до опасной для жизни. Важно учитывать этот диагноз у пациентов, у которых развилась диарея или колит в связи с применением антибиотиков (это может произойти в течение нескольких недель после прекращения антибактериальной терапии). Легкие случаи обычно реагируют только на прекращение приема препарата. Однако в умеренных и тяжелых случаях целесообразна терапия подходящим пероральным антибактериальным средством, эффективным против Следует рассмотреть Clostridium difficile .
    Жидкости, электролиты и белковая замена должны быть предоставлены по показаниям.
    Препараты, замедляющие перистальтику, напр. опиаты и дифеноксилат с атропином (ломотил) могут продлить и/или ухудшить состояние и не должны использоваться.
    Феноксиметилпенициллин не рекомендуется применять при хронических, тяжелых или глубоких инфекциях, поскольку терапевтические концентрации могут не достигаться в соответствующих тканях.
    Не следует полагаться на пероральное введение для достижения терапевтических уровней у некоторых пациентов с тяжелым заболеванием или с тошнотой, рвотой, дилатацией желудка, кардиоспазмом или повышенной перистальтикой кишечника. Иногда пациенты не усваивают терапевтическое количество перорального пенициллина. Этим пациентам рекомендуется парентеральное введение подходящих антибиотиков.
    При стрептококковой инфекции терапию следует продолжать не менее десяти дней. После завершения лечения необходимо провести посев, чтобы определить, были ли эрадикированы стрептококки.
    Настоятельно рекомендуется использовать альтернативный или дополнительный метод контрацепции, если одновременно принимается противозачаточное средство, содержащее эстроген (см. Раздел 4.5 «Взаимодействие с другими лекарственными средствами и другие формы взаимодействий»).

    Нарушения свертываемости крови в анамнезе.

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

    Длительное использование.

    Длительное применение пенициллинов может привести к развитию кандидоза полости рта.

    Тяжелые кожные побочные реакции.

    Сообщалось о тяжелых кожных побочных реакциях (SCAR), таких как синдром Стивенса-Джонсона (SJS), токсический эпидермальный некролиз (TEN), лекарственная реакция с эозинофилией и системными симптомами (DRESS) и острый генерализованный экзантематозный пустулез (AGEP). прием бета-лактамных антибиотиков. При подозрении на СКАР следует немедленно прекратить прием феноксиметилпенициллина и рассмотреть альтернативное лечение.

    Применение при печеночной недостаточности.

    Период полувыведения у этих пациентов значительно увеличивается.

    Применение при почечной недостаточности.

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

    Применение у пожилых людей.

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

    Использование в педиатрии.

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

    Влияние на лабораторные тесты.

    С результатами диагностических тестов.
    Глюкоза, моча: высокие концентрации пенициллина в моче могут давать ложноположительные или повышенные результаты тестов с сульфатом меди (тесты Бенедикта, Клинитест или Фелинга).
    Прямые антиглобулиновые (Кумбса) тесты.
    Ложноположительные результаты могут возникать при терапии любым пенициллином.
    Подсчет лейкоцитов.
    Лейкопения или нейтропения связаны с применением всех пенициллинов; эффект более вероятен при длительной терапии и тяжелом нарушении функции печени.

    4.5 Взаимодействие с другими лекарствами и другие формы взаимодействий

    Бактериостатические препараты могут противодействовать эффекту пенициллина.
    Пробенецид снижает канальцевую экскрецию пенициллина, тем самым повышая концентрацию в кровотоке одновременно вводимого пенициллина.
    Пища оказывает переменный эффект, обычно замедляя всасывание.
    Антациды могут снижать всасывание препарата.
    При одновременном применении с эстрогенсодержащими пероральными контрацептивами эффективность пероральных контрацептивов может снижаться из-за стимуляции метаболизма эстрогенов или уменьшения кишечно-печеночной циркуляции эстрогенов, что приводит к нарушениям менструального цикла, межменструальным кровотечениям и незапланированной беременности. Это взаимодействие может иметь большее клиническое значение при длительном применении этого пенициллина; пациентам следует рекомендовать использовать альтернативный или дополнительный метод контрацепции при приеме этого пенициллина.

    Аминогликозиды.
    Смешивание пенициллинов с аминогликозидами in vitro привело к значительной взаимной инактивации.
    Метотрексат.
    Одновременное применение с пенициллинами привело к снижению клиренса токсичности метотрексата; вероятно, из-за конкуренции за почечную канальцевую секрецию; пациенты должны находиться под пристальным наблюдением.

    4.6 Фертильность, беременность и лактация

    Влияние на фертильность.

    Репродуктивные исследования, проведенные на мышах, крысах и кроликах, не выявили признаков нарушения фертильности из-за феноксиметилпенициллина.
    (категория А)
    Опыт применения пенициллинов во время беременности у людей не выявил каких-либо положительных доказательств неблагоприятного воздействия на плод. Однако адекватных и хорошо контролируемых исследований у беременных женщин, убедительно доказывающих, что можно исключить вредное воздействие этих препаратов на плод, не проводилось. Поскольку исследования репродукции животных не всегда предсказывают реакцию человека, пенициллин следует использовать во время беременности только в случае крайней необходимости.
    Препарат выделяется с грудным молоком в концентрациях ниже уровня в плазме. Поскольку безопасность для новорожденных не установлена, кормящим матерям не рекомендуется, если польза не перевешивает любой потенциальный риск.

    4.

    7 Влияние на способность управлять автомобилем и работать с механизмами

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

    4.8 Побочные эффекты (нежелательные эффекты)

    Наиболее частыми реакциями являются тошнота, рвота, боли в эпигастральной области, диарея, анальный зуд, черный волосатый язык, кожные аллергические реакции, крапивница и другие реакции сывороточной болезни.
    Сообщаемые реакции гиперчувствительности включают кожные высыпания (от пятнисто-папулезного до эксфолиативного дерматита), крапивницу и другие реакции, подобные сывороточной болезни, отек гортани и анафилаксию. Лихорадка и эозинофилия часто могут быть единственными наблюдаемыми реакциями.
    Гемолитическая анемия, лейкопения, тромбоцитопения, невропатия и нефропатия являются редкими реакциями, обычно связанными с высокими дозами парентерального пенициллина.
    Анафилаксия является менее распространенной реакцией.

    Заболевания кожи и других подкожных тканей.
    У пациентов были зарегистрированы тяжелые кожные побочные реакции (SCAR), такие как синдром Стивенса-Джонсона (SJS), токсический эпидермальный некролиз (TEN), лекарственная реакция с эозинофилией и системными симптомами (DRESS) и острый генерализованный экзантематозный пустулез (AGEP). прием бета-лактамных антибиотиков.

    Сообщение о предполагаемых побочных эффектах.

    Сообщение о предполагаемых нежелательных реакциях после регистрации лекарственного средства имеет важное значение. Это позволяет осуществлять постоянный мониторинг соотношения пользы и риска лекарственного средства. Медицинских работников просят сообщать о любых предполагаемых побочных реакциях на сайте www.tga.gov.au/reporting-problems.

    4.9 Передозировка

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

    Лечение.

    Лечение передозировки должно включать мониторинг электролитного баланса, сердечно-сосудистого статуса и функции почек. Пенициллины обычно трудно удаляются диализом.
    Для получения информации о лечении передозировки обращайтесь в Информационный центр по отравлениям по телефону 13 11 26 (Австралия).

    5 Фармакологические свойства

    5.1 Фармакодинамические свойства

    Механизм действия.

    Феноксиметилпенициллин оказывает бактерицидное действие на чувствительные к пенициллину микроорганизмы на стадии активного размножения за счет ингибирования биосинтеза мукопептидов клеточной стенки. Спектр антибактериального действия феноксиметилпенициллина подобен спектру бензилпенициллина, однако он имеет то преимущество, что он устойчив к кислотам и, следовательно, лучше всасывается из желудочно-кишечного тракта, чем бензилпенициллин. Он устойчив к инактивации желудочной кислотой. Его можно давать во время еды; однако уровень в крови немного выше, если принимать его натощак. Средние уровни в крови в два-пять раз выше, чем уровни после перорального приема той же дозы пенициллина G, и имеют гораздо меньшие индивидуальные различия.

    Микробиология. Пенициллин V оказывает бактерицидное действие на чувствительные к пенициллину микроорганизмы на стадии активного размножения. Он не активен в отношении бактерий, продуцирующих пенициллиназу, к которым относятся многие штаммы стафилококков.
    К чувствительным организмам относятся следующие:
    грамположительные кокки, напр. Стрептококки (группы A, C, G, H, L и M) и не-пенициллиназопродуцирующие Staphylococcus pyogenes.
    Грамположительные бациллы, напр. Clostridium tetani, Cl. perfrigens, Corynebacterium diphtheriae и Bacillus anthracis.
    Грамотрицательные бактерии: некоторые изоляты Neisseria meningitidis и N. gonorrhoeae остаются чувствительными к пенициллинам, в то время как большинство штаммов Haemophilus influenzae и Moraxella catarrhalis теперь устойчивы. Другие аэробные грамотрицательные бациллы обладают высокой устойчивостью.
    Treponema pallidum чувствительна, но лечение сифилиса пероральными пенициллинами не рекомендуется.
    Тест на чувствительность.
    Методы разбавления или диффузии – либо количественные (МИК), либо пограничные, следует использовать в соответствии с регулярно обновляемым, общепризнанным и стандартизированным методом (например, NCCLS). Стандартные процедуры тестирования чувствительности требуют использования лабораторных контрольных микроорганизмов для контроля технических аспектов лабораторных процедур.
    Отчет «чувствительный» указывает на то, что патоген, вероятно, будет подавлен, если противомикробное соединение в крови достигнет обычно достижимых концентраций.
    Отчет «промежуточный» указывает на то, что результат следует считать сомнительным, и если микроорганизм не полностью чувствителен к альтернативным, клинически осуществимым препаратам, тест следует повторить. Эта категория подразумевает возможную клиническую применимость в тех участках тела, где препарат физиологически сконцентрирован, или в ситуациях, когда можно использовать высокие дозы препарата. Эта категория также обеспечивает буферную зону, которая не позволяет небольшим неконтролируемым техническим факторам вызывать серьезные расхождения в интерпретации.
    Сообщение об «резистентности» указывает на то, что патоген вряд ли будет ингибирован, если противомикробное соединение в крови достигает обычно достижимых концентраций; следует выбрать другую терапию.
    Примечание.
    распространенность резистентности может различаться географически для отдельных видов, и желательна местная информация о резистентности, особенно при лечении тяжелых инфекций.

    Клинические испытания.

    Нет доступных данных.

    5.2 Фармакокинетические свойства

    Поглощение.

    Обычно до 60% препарата всасывается в кровоток после приема внутрь. Всасывание обычно быстрое и может привести к пиковым концентрациям в сыворотке в течение 30 минут, а доказуемые уровни сохраняются в течение 4 часов.

    Распределение.

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

    Метаболизм.

    Приблизительно 80% феноксиметилпенициллина связывается с белками сыворотки. Около 56% пероральной дозы 500 мг метаболизируется в неактивный метаболит. Период полувыведения из плазмы крови при приеме внутрь составляет около 30 минут у здоровых взрослых и от 1 до 3 часов у новорожденных. Период полувыведения значительно увеличивается у пациентов с почечной или печеночной недостаточностью.

    Выделения.

    Около 23–36% препарата быстро выводится в неизмененном виде с мочой. Выделение желчи зависит от функции почек, оно низкое при нормальной функции почек и высокое при почечной недостаточности.
    Препарат выводится так же быстро, как и всасывается у лиц с нормальной функцией почек; однако выделение препарата из мочи указывает на то, что всасывается только около 25% введенной дозы. У новорожденных, детей раннего возраста и лиц с нарушением функции почек экскреция значительно задерживается.

    5.3 Доклинические данные по безопасности

    Генотоксичность.

    Генотоксический потенциал феноксиметилпенициллина не изучался.

    Канцерогенность.

    Долгосрочные исследования на животных не проводились.

    6 Фармацевтическая информация

    6.1 Список вспомогательных веществ

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

    6.2 Несовместимости

    Несовместимости либо не оценивались, либо не идентифицировались при регистрации этого лекарственного средства.

    6.3 Срок годности

    В Австралии информацию о сроке годности можно найти в общедоступной сводке Австралийского реестра терапевтических товаров (ARTG). Срок годности можно найти на упаковке.

    6.4 Особые меры предосторожности при хранении

    Хранить при температуре ниже 25°C. Хранить в сухом месте.

    6.5 Тип и содержимое контейнера

    Тип контейнера: блистерная упаковка (ПВХ/ПВДХ/Алюминий).
    Размер упаковки: 50.
    Некоторые дозировки, размеры упаковки и/или типы упаковки могут не продаваться.

    6.6 Особые меры предосторожности при утилизации

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

    6.7 Физико-химические свойства

    Химическая структура.


    Феноксиметилпенициллин (или пенициллин V) калия представляет собой калиевую соль феноксиметильного аналога пенициллина G. Это белый кристаллический порошок, растворимый в воде и полярных органических растворителях, но практически нерастворимый в растительных маслах и жидких парафинах.
    Химическое название: калия (6R)-6-(2-феноксиацетамидо)пеницилнат.
    Молекулярная формула: C 16 H 17 KN 2 О 5 С.
    Молекулярная масса: 388,5.

    Номер CAS.

    132-98-9.

    7 Список лекарств (стандарт ядов)

    S4 (лекарства, отпускаемые только по рецепту).

    Сводная таблица изменений

    50+ Впечатляющая статистика ВКонтакте за 2022 год