Как показывает статистика и личный опыт огромного количества блоггеров, если подойти ответственно и креативно к выполнению задания, как сделать меню группы ВКонтакте, то за короткое время количество полезных действий пользователей в паблике возрастает в несколько раз. Для коммерческих групп это позволяет продавать товары и услуги более эффективно, а для развлекательных – привлечь новых подписчиков.
Существует два типа меню групп ВКонтакте: закрытое (в основное время скрыто, открывается при нажатии на «Откройте меню группы») и открытое (пост, закрепленный вверху страницы, с активными ссылками). В обоих случаях используется Wiki-разметка (встроенный инструмент ВК, позволяющий редактировать внешний вид паблика) но второй вариант является более полезным и эффективным.
Пошаговое оформление меню группы ВКонтакте
Шаг 1. Скачать утилиту «Русский фотошоп».
Программа для фотошопа фотографий на русском языке совместима с ОС Windows, начиная с версии XP. Перейдите на страницу загрузки, введите адрес электронной почты, щелкните по ссылке, и дождитесь окончания скачивания дистрибутива. Установите утилиту на компьютер, добавьте в нее фотографию.
Оформляю группу ВК в Фотошопе (Меню, Товары, Виджеты)
Шаг 2. Отредактировать изображение.
Через вкладку «Изображение» измените яркость и цветовой баланс картинки, сделайте коррекцию оттенков и насыщенности. Когда вы нажимаете на функцию, то справа в меню появляются маркеры, для выставления нужных вам значений. После редактирования нажмите «ОК».
Шаг 2. Ввести текст для меню.
В верхней части меню нажмите на изображение буквы «А», справа измените настройки текста – стиль, цвет, шрифт. Напишите новый текст – названия разделов на фото, обратите внимание, что правое поле изображения будет использоваться для аватарки паблика, поэтому вводите названия слева.
Шаг 3. Разрезать изображение.
Перед тем, как сделать меню в группе ВКонтакте, его нужно разрезать. Нажмите вкладку «Изображение» и «Кадрировать», отделите правую часть картинки, которая предназначена для аватара, далее на дискету в верхней части меню, и сохраните изображение на компьютере. Нажмите на «Исходное изображение», аналогичным образом разрежьте картинку на отдельные блоки с названиями разделов.
Через меню «Файл» откройте картинку для аватара. Нажмите «Оформление» и «Фотомонтаж». Добавьте логотип группы и новые украшения, подробнее об этой функции читайте здесь: «Как в фотошопе наложить одну картинку на другую».
Шаг 4. Опубликовать новое меню.
Перейдите на сайт ВКонтакте, далее на страницу группы, раздел «Управление сообществом», «Материалы» – изменить на «Открытые» или «Ограниченные». На главной странице появится блок «Материалы», нажмите рядом с ним на ссылку «Редактировать».
ПРОСТОЙ СПОСОБ Как сделать оформление меню ВКонтакте в фотошопе
Аватар группы добавляется также, как и главное фото на обычной странице. Просто Загрузить фото > Обрезать > Выбрать миниатюру > Сохранить. Возможно, потребуется перезагрузить и по-разному обрезать аватар несколько раз, чтобы он сошелся с меню.
Помимо статьи как сделать меню группы ВКонтакте: пошаговая инструкция, прочитайте другие материалы на сайте, и фотомонтаж станет для вас простым и приятным занятием. Программа Фотошоп на русском обладает широким набором функций, с помощью которых можно за несколько шагов создавать коллажи, открытки, календари, и любые другие изделия из фото. Это лучший софт инструмент для вашей работы.
Источник: rus-fotoshop.ru
Делаем меню для «ВКонтакте»
Создадим изображение с размером 500×600. Зальем Градиентом (нужным вам цветом).
Подпишем нужные нам кнопки с помощью инструмента «Текст». Я взял самые банальные: «Связь», «Обсуждения», «Видео», «Фото».
Дальше идем в «Изображение — Направляющие — Создать направляющую по %».
Делаем так до тех пор пока не разделим все кнопки после этого «Изображение — Преобразования — Гильотина». Выйдет такое:
Далее загружаем наши фотографии (кнопки) в группу, а точнее в новости группы. Дальше все зависит от wiki разметки.
Основы для ВКонтакте:
[[photo83894238_289809000|370×74px;nopadding|ссылка ]] — это код для вставки картинки со ссылкой во ВКонтакте.
- 370px — это ширина фотографии. Можно cделать меньше, но не больше, так как все равно они автоматически уменьшаться.
- photo5634052_195301019 — это ссылка на фотографию. Ее идентификатор в адресной строке браузерa.
- nopadding — это тег, убирающий пробелы между картинками.
- — это ссылка, на которую будут переходить, щелкая на данной картинке. Ее адрес можно узнать также как и ссылку на фотографию, просто открыв нужную страницу и скопировав ее из адресной строки браузера.
Таким образом добавляем все фотографии (не забываем про ссылки).
Если у вас ничего не появилось, то обновите страницу (Ctrl+R или F5).
25 ноября 2012 3
В избранном у 3 человек:
Похожие уроки
19 комментариев
Валентин Борисенко 25 ноября 2012 в 14:56 Личное сообщение
Да, ширина меню должна быть 370px, но вы указываете 400)
Макс Шевченко 25 ноября 2012 в 22:59 Личное сообщение
Как в тему..) Не далее как вчера ночью делал и запиливал меню в одну из групп. Отсюда дополнения:
Ширина меню = 382 px.
Зачастую выставлять направляющие по процентам — лишний геморрой (да и непропорционально получается, судя по скриншотам, если пунктов более двух-трёх), поэтому лично мой совет — вытягивать из линеек и располагать вручную.
И да, проверку орфографии в текстовых редакторах ещё никто не отменял. Граммар-наци негодуют.
P.S. Урок, которым руководствовался я при создании: http://bit.ly/rrOWlO
Используемый шрифт можно было бы и назвать 🙂
Валентин Борисенко 26 ноября 2012 в 03:54 Личное сообщение
Макс, я руководствовался оф.группой Вики ВКонтакте, и там 370)
Артем Рощин 26 ноября 2012 в 10:05 Личное сообщение
Макс твоя ссылка показывает шикарный пример! А по уроку! Урок полезный! Но не забываем про фантазию.
Myron Channel 26 ноября 2012 в 15:42 Личное сообщение
Макс, ну да с орфографией у меня не все нормально.
Александр, a_BremenCapsNr Bold Italic.
Давно хотел узнать как так сделать) Спасибо 🙂
Всегда оставался в стороне от комментариев, но в данном случае не могу удержаться
Уважаемые, а почему никто визуальную эстетику не критикует?
В конце концов это сайт графического редактора.
Я конечно понимаю, что человек старался, НО как не стыдно такое выкладывать. Уроки подразумевают под собой использование каких то «прикольных фишек» , создание полезных текстур, что то такое, чем можно обогатить свой запас знаний по работе с этим программным продуктом. Я вот ЭТО могу в , извините , в пэинте сделать, причем тут ГИМП. ГИМП — позиционирует себе как альтернатива Фотошопу.
Какая тут альтернатива? Уважаемая Администрация, если вы действительно хотите заработать популярность среди ГИМП порталов, фильтруйте укроки. Этому порталу необходимы КАЧЕСТВЕННЫЕ уроки. Если речь идет об альтернативе, то взять например «крутую» картинку сделанную в фотошопе и сделать урок как сделать то же самое, только средствами ГИМП. Самой большой барьер для тех, кто хочет использовать ГИМП, непонимание как сделать тоже самое что они делали в фотошопе.
Пока что все. Спасибо.
Макс Шевченко 27 ноября 2012 в 14:14 Личное сообщение
«Анонимус — безлик, и имя ему — Легион!» (с)
В целом же предыдущий пост справедлив. Другое дело, что если выставлять только КАЧЕСТВЕННЫЕ уроки (коих сейчас, как мне кажется, почти не присылается), то контент пополняться будет ещё медленнее и мучительнее, чем сейчас. Почему так?
Возможно, из-за того, что пользователи, которые умеют писать интересные уроки хорошего качества, заняты в данный период своей жизни более насущными проблемами и делами. Или же просто потеряли интерес к процессу. Это не оправдание появления остальных уроков, это объективная причина.
А так да, согласен.
Myron Channel 27 ноября 2012 в 17:21 Личное сообщение
Unnamed User, этот урок был не для того что-бы сделать «фишки», текстуры и прочее что можно сделать, а то как же поставить меню. А вот насчет визуальной эстетики я могу и лучше, но здесь это было не обязательно.
Валентин Борисенко 27 ноября 2012 в 18:21 Личное сообщение
Собственно, Unnamed был прав, ибо данный ресурс предназначен для обучения работе в программе, а не wiki-верстке, о которой очень много статей и групп ВКонтакте. Я с ним абсолютно согласен.
Аленка В 27 ноября 2012 в 23:04 Личное сообщение
Unnamed, «гимп как альтернатива фотошопа», но почему. Получив возможность, а главное время, поучиться рисовать, мне, кроме гимпа, ничего и не нравится. Уроки интересные, а главное доступные, да и применить полученные навыки можно) вот даже не представляла, что даже при создании меню в контакте можно использовать гимп
Макс Шевченко 27 ноября 2012 в 23:12 Личное сообщение
Алёська, тебе ещё многое предстоит для себя открыть) И это здорово..)
Филипп Ткачёв 28 ноября 2012 в 00:44 Личное сообщение
Unnamed User у вас 0 выполненных уроков. Здесь самых лучших по результатам конкурсов за все время существования сайта 22:
/articles/best-tuts/
Выполните их все для начала.
Потом можете спокойно сделать еще пару десятков отсюда /articles/ctr/
И когда вы сделаете штук 50 уроков на достойном уровне, начинайте плакать, что все уроки плохи и т.д.
Для хорошего урока нужна неделя времени. А не 20 минут. Тут мало идеи и ее реализации. Тут нужно учитывать методологию и психологию обучаемого, урок должен быть таким, чтобы делать его было интересно. Это не просто инструкция, это нечто большее, что должно оставлять в голове понимание того, зачем ты проделываешь эти операции, а не просто шаблон нажал-получил.
Люди — не роботы, они должны думать головой, а не тупо выполнять инструкции. Тем более, что большая часть здешних обитателей натуры творческие, им нужно давать пищу для мозгов.
Мое мнение таково, что уроки в первую очередь должны научить человека понимаю процесса обработки графика. А в чем он дальше будет работать, уже не столь важно. Что Гимп, что фотошоп, те же слои, маски, контуры, кисти, даже фильтры похожи. Ну кнопки выглядят по-другому, ну менюшки и названия отличаются, а принципальной разницы нет. Все тоже самое.
Так что хотите качественные уроки — ищите их здесь. У нас уроки на любой вкус и цвет. Выбор предостаточный. Наверно, нужно просто уметь искать.
Уважаемый, Филипп,
Количество выполненных мною уроком никак не связаны с качеством данного урока.
В моем высказывании нет фразы, что «все уроки плохи». Мой пост был написан относительно данного урока.
Я прекрасно понимаю кто такие творческие натуры. И абсолютно осознаю ценность результата творчества. Не надо мне рассказывать про психологию, мы с Вами далеки от этой науки. А вот насчет «чтобы делать его было интересно» — с этим спорить не стану. Не очень понимаю для чего был написан 2ой абзац Вашего поста, т.к. по сути это вода. объясняющая логичные вещи, не относящиеся к моему посту и тем более к данному уроку.
Вы меня конечно извините, но Вы программист, а не дизайнер и не около того. Об этом говорит не только перечень языков программирования, которые Вы знаете, а так же обилие красок на Вашем же сайте http://www.zoonman.com/ .
Если бы ГИМП — это было бы тоже самое, что и Фотошоп, было бы просто великолепно. Но могу Вам с уверенностью сказать, что поработав несколько лет на фотошопе , для меня было мучением перейти на ГИМП, т.к. то, что можно сделать в Фотошопе в 2 клика, а ГИМП делается за 10. И это реально пугает.
Меня всегда привлекали красочные картинки, сделанные в фотошопе, и глядя на них, понимаешь потенциал программы, в голове появляются идеи и найти ответ на вопрос как сделать тот или другой элемент — это вопрос времени, интернет пестрит великолепными уроками, которые показываю как сделать реалистичнее, красивее, ярче. Как данный урок может вызвать желание к творчеству. Взглянул на картинку, мне не хочется скачивать этот графический редактор,и в голове всплывает немой вопрос,а может ли он называться так?
Если это инструкция по созданию меню, то это не сюда. Таких инструкций , как было уже выше сказано пол интернета завалено.
Это было спровоцированное лирическое отступление для Уважаемого, который почему то никак не может понять суть моего поста.
Хотя я, наверное, догадываюсь почему. Не Вы ли, являясь одним из разработчиков этого проекта, пропустили данный урок ?
Уважаемая Лена в, видимо Вы совсем недавно начали использовать ГИМП, если для Вас было новым то, как порезать картинку на части.
Филипп Ткачёв 28 ноября 2012 в 21:11 Личное сообщение
Да. Разрешил публикацию урока я.
Тема популярная, урок демонстрирует, зачем нужен инструмент Гильотина.
Аленка В 28 ноября 2012 в 23:41 Личное сообщение
Unnamed, очень порадовало, что после стольких лет работы на фотошопе, вы пришли к гимпу, значит не зря пытаюсь в нем разобраться)) Чтобы использовать гимп, надо хотя бы научиться им пользоваться, и вот такие несложные, не очень длинные уроки помогают таким как я в этом. Вы скажите — возьмите руководство, почитайте, но ведь сколько ни читай, а практика есть практика. И почему бы Вам, уважаемый User, не озвучить свое имя?
Олег Бутарев 29 ноября 2012 в 02:04 Личное сообщение
Я полностью согласен с Unnamed User и Максом Шевченко. Последнее время заходишь на сайт, а там серость беспросветная.
А по уроку. если это инструкция о том как поставить меню, так это не здесь.
Макс Шевченко 29 ноября 2012 в 08:33 Личное сообщение
Мда, и вправду пропустил много интересного. )
Подытожу, с вашего позволения: урок актуален по идее, но не особо хорош с эстетической и репрезентативной точки зрения, что в определённом смысле делает негатив сайту и редактору.
Вывод: искать новых талантливых урокотворцев, холить их и лелеять, подкармливать пряниками, тортиками и прочими няшностями. А во время написания уроков подгонять кожаным хлыстом, да-а. Шутка)
И тем не менее. за сентябрь-октябрь на данный момент есть 13 уроков, из которых лично для себя я бы отметил 3-4 (я не беру в расчёт сложность, сужу по подаче материала и оформлению). В августе всё было несколько радужнее. Надеюсь, это только временный «спад» и в скором времени мы будем радовать друг друга и всё творческое сообщество новыми отличными уроками.
Чтобы участвовать в обсуждении вы должны войти или зарегистрироваться .
Источник: www.progimp.ru
LiveInternetLiveInternet
Интервью с Богом Делаем на весь экран и смотрим Серия сообщений «Религия»: Часть 1 .
Разведчики-нелегалы. Командировка длиною в жизнь «Карьера нелегала» фильм из.
#Тайны Петербурга# 1..Соловки. Петр 1. Гиперборея Городские легенды. Васильевский ост.
-Ссылки
-Музыка
-Приложения
- Музыкальный плеер
Скачать музыку с LiveInternet.ruПростая скачивалка песен по заданным урлам
Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
ОткрыткиПерерожденный каталог открыток на все случаи жизни
Я — фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
-Поиск по дневнику
-Постоянные читатели
-Статистика
Создан: 06.04.2013
Записей:
Комментариев:
Написано: 7893
Как сделать меню группы ВКонтакте за 5 минут
Как сделать меню группы ВКонтакте за 5 минут + PSD шаблоны меню
Категория: Социальные сети Опубликовано: 09 Март 2016
Данная статья будет представлять собой подробный мануал и я расскажу, как сделать меню группы вконтакте. Красиво оформленное меню группы вконтакте способствует реальному увеличению посетителей и рост продаж на сайте.
- Открытое с активными пунктами;
- Закрытое в виде закрепленной записи;
- С отдельными картинками или общей смежной картинкой баннера и меню.
Суть создания обоих вариантов одна и та же. Только основное отличие в дополнительных элементах и типов записи и об этом подробнее будет в этой статье.
Для работы с меню нам поможет wiki-разметка, которая встроена сегодня в текстовый редактор ВКонтакте. От обычного она отличается тем, что для нее будут использоваться стандартные команды для вывода той или иной картинки и вставки ссылок на нужные элементы. Сама wiki-разметка дает возможность вставки кода для отображения изображений, видео и прочих элементов.
Закрытое меню группы ВК
В данном случае мы будем наблюдать слева от основной аватарки группы гиперссылку в виде надписи «меню группы» при нажатии на которую у нас будет открываться наше меню с активными пунктами и изображениями.
Вид меню, будет следующим:
Открытое меню группы (закрепленный материал)
Суть заключается в создании уже открытых пунктов меню, которые будут отображаться в описание самой группы, где обычно и отображается по всем условиям. В описание будет закреплена наша картинка, которую мы подготовим заранее и свяжем ее со страницей, на которой у нас будут активные пункты. Данное меню стало очень популярно в последнее время и пользуется спросом у заказчиков. Выглядит они следующим образом:
Как сделать открытое меню группы вконтакте за 5 минут
Итак, в первую очередь нам необходимо будет создать главную аватарку группы которую мы разместим справа и заглушку нашего меню в виде баннера.
Я рекомендую использовать следующие размеры:
- Для аватарки 200х332 пикселя;
- Для основного баннера меню 395х282 пикселей.
Как вы могли заметить высота изображений отличается и это сделано для того, чтобы картинки не съезжали по высоте и были на одном уровне так как высота названия сообщества и статус занимают около 50 px и как раз эту величину нам необходимо будет убрать из высоты меню.
Чтобы было понятно если высота главной аватарки группы 332, то от нее мы отнимаем 50 и получаем высоту основного меню равную 282. Если же размеры не имеют значения, то высоту можно будет выставлять произвольную.
Следующим шагом после создания сообщества будет настройка материалов и тут нам необходимо запретить участникам создавать дополнительные страницы и блоки, а только писать на стене. Для этого необходимо будет перейти в раздел под аватаркой группы под названием «управление сообществом» где нам необходимо сделать наши материалы «ограниченными» как показано ниже.
Теперь давайте займемся созданием общей композиции. Можно конечно просто вставить картинку вместо аватарки и в описание, но не будем дилетантами и покажу как сделать профессионально, чтобы это была одна полноценная картинка, переходящая одна в другую.
Создадим новое полотно в фотошопе размерами 600х350 пикселей которое мы будем использовать в качестве трафарета вырезав в нем проемы для наших картинок. Для работы нам необходимо перевести размеры всех элементов и линеек в пикселе и делается это по следующему пути: «Редактировать-установка-основное» и тут уже выставляем пиксели.
Следующим шагом создания, открытого меню необходимо сделать вырезки под баннер и аватарку которые мы потом получим для загрузки. Для этого переходим в раздел левого вертикального меню и выбираем раскройка.
Используя левую кнопку мыши, как будто вы выделяете область, необходимо выделить блоки нужных нам размеров и после каждого выделения нажимаем кнопку удалить «Delete» и выбираем 50% серого. Такие действия приведут к тому, что блоки будут нужных размеров и выделены цветом отличным от основного фона.
Должно получиться следующее:
А теперь просто выбираем ластик и функцией «волшебный ластик» жмем на каждый серый блок и получим трафарет с вырезами. Следующим шагом мы выбираем наше основное изображение и подкладываем под фон и получим готовые картинки на который можно будет написать текст с названием меню ли прочие рекламные элементы.
Отлично. После того как вы поместили картинку нашего дизайна нам остается выбрать «сохранить для Web» и на выходи мы получаем 2 наши картинки. Теперь идем снова в нашу группу и можем заливать главную аватарку (вертикальную). Баннер для меню мы будем использовать чуть позже при работе с кодом wiki-разметки.
Давайте создадим само меню, с активными пунктами, которые будут перенаправлять пользователя на нужные разделы стороннего сайта или же на альбомы и каталоги в самой группе. Использовать будем новое изображение для разнообразия -))).
Итак, переходим снова в фотошоп и создаем новый холст с размерами 400х300 пикселей. После чего выбираем в разделе: файл-поместить и выбираем картинку для фона меню.
На картинке размещаем кнопки нашей будущей менюшки и нарезаем картинку как мы делали выше путем выделения нужных блоков. После чего также выбираем «сохранить для web» и получаем папку с нашими нарезками. В моем случае получилось 4 картинки в отдельной папке.
Теперь нам необходимо выгруженные из фотошопа картинки залить в отдельный альбом и скрыть от посторонних глаз. После загрузки каждая картинка получит свое новое название и уникальный id.
Обратите внимание что у вас должно быть:
- Открыты материалы в режиме «ограниченные»;
- Включены обсуждения;
- Папка с фотографиями открыта для всех.
Теперь остается настроить нашу страницу где и будет отображаться на менюшка. Для этого переходим на главную страницу сообщества и выбираем свежие материалы и редактировать и называем «НАШЕ МЕНЮ».
Далее нам необходимо вставить картинки, которые мы получили при нарезке в фотошопе. Кто-то использует коды разметки, но, чтобы не мудрить голову предлагаю просто выбрать вставку картинки нажав на иконку фотоаппарата и поочередно загрузить друг за другом.
Работая в текстовом редакторе если после загрузки картинок, мы нажмем на иконку в виде скобок в правом верхнем углу то должны увидеть вот такой код:
Совет: Важным моментом после загрузки изображений является удаление отступов. Решается это вставкой «nopadding» перед размерами изображений.
Для пояснения ниже расписано что откуда берется, но учитывая, что все будет вставлено автоматически и не нужно мудрить, и открывать как некоторые пишут каждую картинку и брать id, то просто загружаем и сохраняем.
[[photoxxxxx|nopadding;yyyyypx|ваша ссылка]]
где xxxxx — id вашей картинки
yyyyy — ширина в пикселях (не более 388)
Должно в итоге получиться вот так:
Теперь наши картинки собраны в отдельный баннер. А для того, чтобы добавить каждому пункту ссылку просто нажимаем при отключенной разметке на картинку и в разделе ссылка вставляем скопированный url.
И вот мы подошли к самому важному и последнему пункту создания нашего меню вконтакте. Теперь нам необходимо сохранить нашу страницу с картинками и скопировать ее адрес. В моем случае он выглядит вот так:
Помните мы в начале статьи делали заглушку меню, которое будет являться продолжением нашей главной аватарки и под нее как раз и делали трафарет. Вот как раз сейчас нам и понадобится.
Переходим на главную страницу и делаем следующее:
Шаг №1.
Вставляем адрес станицы в текстовое поле для новой записи на стене, после чего она преобразуется в ссылку.
Шаг №2.
К записи прикрепляем изображение нашей заглушки для меню и нажимаем отправить.
Шаг №3.
Теперь после публикации записи нажимаем на время создания в нижней левой части записи и выбираем «ЗАКРЕПИТЬ».
Отлично. На этом заканчиваем. Теперь вы умеете создавать классные меню и можете зарабатывать на этом неплохие деньги. Советую все делать в следующем порядке:
- Придумываем структуру и заказываем дизайн изображений меню;
- Делаем подгонку размеров и нарезку всех изображений;
- Вставляем в альбомы картинки;
- Редактируем в редакторе все нарезки и публикуем на главные страницы группы.
В итоге работы мы получим вот такое меню.
А вот само меню при нажатии оно будет выскакивать с активными ссылками. Стоит поиграть с размерами и подогнать под свой экран, но не забываем и про отображение в мобильных устройствах.
Скачать шаблон меню группы ВК + все исходники урока
Надеюсь материал был полезен, и вы с легкостью теперь поняли, как сделать меню группы вконтакте. Подписывайтесь на обновления блога и до скорых встреч в новых постах. Если остались вопросы пишите их в комментариях, и я обязательно помогу Вам.
Прикладываю видеоролик для закрепления прочитанного -))).
С уважением, Галиулин Руслан
Источник: www.liveinternet.ru