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

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

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

Вступление

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

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

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

    Шаблон, укомплектованный в файл формата PSD для программки Photoshop;
    архив с нарезанными частями меню;
    готовый wiki-Cod.

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

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

Ежели вы имеете готовый PSD-шаблон для группы, примерный метод его установки, ежели кратко, будет содержать последующие пункты:

    Вырезка PSD-шаблона на нужное количество частей;
    загрузка нарезанных частей в фотоальбом вашей группы ВКонтакте;
    создание wiki-Codа и его размещение в меню вашей группы.

Применяемый софт

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

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

Аннотация по установке шаблонов графического меню в группу ВКонтакте

Аннотация начинается с работы с PSD-файлом в программке Photoshop. Ежели вы скачали с веба уже нарезанное меню либо готовый wiki-Cod, просто пропустите пару пт в данной аннотации. Итак, приступаем.

Шаг 1-ый – разрезание PSD-исходника на части

    Открываем программку Photoshop и дожидаемся полной загрузки:

    пуск программки photoshop
    открываем исходник нашего PSD-меню ВКонтакте:

    открытые psd-исходника меню вконтакте
    активируем линейку, ежели она не активирована. Сделать это можно, перейдя в меню «Просмотр», а потом кликнув на «Линейки». Или просто нажмите сочетание кнопок «Ctrl R»:

    активация линейки в photoshop
    избираем инструмент «Перемещение» на левой панели инструментов программки:

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

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

    дальше избираем инструмент «Раскройка» на левой панели инструментов программки:

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

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

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

    приготовленное к разрезанию меню вконтакте в photoshop
    опосля, кликаем в верхнем меню программки Photoshop на пункт «Файл» и избираем «Сохранить для Web и устройств…». В британском варианте это будет смотреться приблизительно так: «File» -> «Save for Web…».

    в показавшемся окне, справа, находим графу «Набор» и избираем формат изображения. Я, обычно, выбираю PNG-24:

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

На этом заканчивается 1-ый шаг аннотации по установке меню ВКонтакте, который будет полезен юзерам, скачавшим меню в формате PSD. Но разрезание меню на части – лишь третья часть дела. Ещё необходимо загрузить рисунки в альбом и сделать wiki-меню. О этом можно прочесть дальше.

Шаг 2-ой – загрузка нарезанных изображений в группу

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

    Войдите на веб-сайт социальной сети ВКонтакте, авторизуйтесь логином и паролем от вашего аккаунта и войдите в своё общество, в которое будете устанавливать графическое меню. В качестве примера я буду применять пустую группу, сделанную специально для тестов:

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

    переход на страничку альбомов общества вконтакте
    потом, в правом верхнем углу нажмите на «Сделать альбом»:

    переход к созданию новейшего альбома в обществе вконтакте
    введите заглавие для вашего альбома (идеальнее всего именовать Меню) и нажмите «Сделать альбом»:

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

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

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

Готово! 2-ой шаг аннотации завершён. Остался самый крайний – сделать wiki-Cod, который и будет результатом нашей долгой и упрямой работы.

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

Шаг 3-ий – создание wiki-Codа меню и его установка

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

    Зайдите на главную страничку вашего общества, наведите курсор на блок «Свежайшие анонсы» и нажмите на ссылку «Редактировать».

    переход к редактированию головного меню общества вконтакте

    в открывшемся вики-редакторе удалите всё содержимое. Дальше мы будем применять по шаблону две строчки с вики-Codом:

    Cod[[photo-123456_987654|370x227px;nolink;noborder;nopadding|здесь будет текст]]
    [[photo-123456_987655|370x37px;noborder;nopadding;|здесь будет ссылка]]
    Ежели кратко, 1-ая строчка нужна для картинок без ссылок, 2-ая со ссылками. Сейчас давайте разберём назначение каждого параметра в этом Codе:

      Photo-123456_987654 – это формат ссылки на картину. Получить эту ссылку можно, открыв на просмотр подходящую картину и из адресной строчки скопировав аналогичный участок:

      получение ссылки на фрагмент меню вконтакте
      370x227px – это размер рисунки. Для каждой рисунки размер собственный. Идеальнее всего размеры замерить в Windows, наводя курсором на каждый кусок меню:

      измерение размеров каждого куска меню вконтакте
      Nolink – это параметр, который делает изображение некликабельным.
      Noborder – это параметр, запрещающий разметке выставлять рамки вокруг изображения.
      Nopadding – это параметр, запрещающий разметке создавать отступы от изображения.
      Тут будет текст – текст, который будет отображаться при наведении ссылки на некликабельный участок меню.
      Тут будет ссылка – ссылка на наружный веб-сайт либо объект снутри социальной сети ВКонтакте. Ссылка на наружный веб-сайт указывается стопроцентно, а ссылка на внутренний объект ВКонтакте указывается в формате: Page-123456_345345345.

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

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

    У меня вышел вот таковой Cod:

    Cod[[photo-84747234_368533116|370x227px;nolink;noborder;nopadding|Меню]]
    [[photo-84747234_368533118|185x56px;noborder;nopadding|page-84747234_48858482]][[photo-84747234_368533120|185x56px;noborder;nopadding|page-84747234_48858483]]
    [[photo-84747234_368533123|185x56px;noborder;nopadding|page-84747234_48858484]][[photo-84747234_368533107|185x56px;noborder;nopadding|page-84747234_48858485]]
    [[photo-84747234_368533109|185x55px;noborder;nopadding|page-84747234_48858486]][[photo-84747234_368533110|185x55px;noborder;nopadding|page-84747234_48858487]]
    [[photo-84747234_368533113|370x206px;nolink;noborder;nopadding|Меню]]
    Ещё раз о содержимом: верхняя и нижняя рисунки некликабельны, потому там стоит Nolink. При наведении на их будет появляться текст «Меню». Другие 6 изображений кликабельные и ссылаются на уже сделанные внутренние странички, которые я сделал в собственной группе заблаговременно. Codы картинок, стоящих рядом на одной полосы, стоит писать слитно (видно на снимке экрана ниже).

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

    ежели вы окончили писать Cod и всё кропотливо проверили, можно сохранить сделанный вики-Cod меню, нажав на клавишу «Сохранить страничку»:

    сохранение готового Codа графического меню вконтакте
    Готово! Сейчас на главной страничке общества в блоке «Свежие новости», а это и есть меню группы, отображается установленное нами графическое меню:

    установленное в группе графическое меню вконтакте

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

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

Ежели для вас трудно разобраться в этом уроке и для вас требуется видео-урок, пожалуйста, напишите в комментах ниже и я его запишу! Всего неплохого для вас и фортуны! Для вас приглянулся материал? 55

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *