Как создать меню в контакте. Как сделать меню группы в Вконтакте? Экспортируем графические элементы
Доброго времени суток уважаемые посетители. Вы желаете научиться делать красивое меню для свое группы В Контакте, но не знаете как сделать. Тогда обучающий видео урок «Как создать меню В Контакте» поможет вам пошагово создать данное меню.
Данный урок является продолжением предыдущего видео урока «Оформление группы В Контакте» который вы сможете посмотреть . Также для создание меню нам потребуется программа Adobe Photoshop. О том как установить и работать с данной программой вы сможете узнать из раздела .
Также можете скачать шаблоны которые применяются в данном видео уроке https://yadi.sk/d/EFuM8IjjO3zVUA .
1. Создание меню в фотошопе
В программе фотошоп перейдем в вкладу файл, нажимаем создать или клавишу Ctrl+N. Создадим документ новый документ шириной 600 пикселей, высота 420 пикселей, разрешение 100 пикселей на дюйм. Далее нажимаем файл открыть и выбираем любое понравившиеся изображение с компьютера.
Выбирайте инструмент прямоугольная область или клавиша M на клавиатуре, выделяем картинку. Далее нажимаем в меню на вкладку редактирование и выбираем копировать или сочетание клавиш Ctrl+C. Переходим в наш созданный документ и выбираем редактирование в меню вставить или сочетание кнопок Ctrl+V.
Выбираем инструмент перемещение или клавиша V. В меню редактирование выбираем свободное трансформирование или клавиши Ctrl+T. Потянув один из углов удерживая клавишу Shift для равномерного изменения размера, удерживаем нашу картинку.
1.1. Создаем кнопки
Выбираем инструмент прямоугольник или клавишу U. Подбираем цвет, а далее создаем кнопку. В боковой панели с право можете задать параметры радиуса округления. Допустим сделаем 5 пикселей. Во вкладке просмотр убедитесь, что вспомогательные элементы были включены. Переместим нашу кнопку на середину картинки.
Нажмем на слой кнопки, правой кнопкой мыши выбираем параметры. Накладываем эффект тень для лучшего выделения кнопки на светлом фоне. При помощи инструмента перемещения, зажав клавишу Alt на клавиатуре, перетянем кнопку чуть ниже тем самым её скопировав. Таким образом создаем третью кнопку, отдалив её на такое расстояние, о чем нам подскажут вспомогательные элементы. Зажав клавишу Ctrl мы выделим слои, выбираем инструмент перемещение и размещаем их по центру документа.
Выбираем инструмент горизонтальный текст или клавишу T. Далее нажимаем левой кнопки мыши обязательно за пределами будущих кнопок. Пиши нужный нам текст, переносим текст примерно по центру кнопки или Ctrl+V. После задаем название другим кнопокам.
Вбираем инструмент раскройка или клавиша C. Поочередно выделаем наши созданные кнопки. Выделяем первую нашу кнопку и наводим в один из углов. При этом значок раскройки должен оставаться неизменным. Далее выделяем вторую и третью кнопку. Нажимаем в меню файл и сохраняем документ у себя на компьютере. После этого нажимаем сохранить для web. Сохраняем кнопки на компьютер.
2. Редактирование меню В Контакте
Переходим в нашу группу В Контакте. После автарки сообщества переходим в группу статистики. В адресной строке браузера имеются цифр сообщества, они как раз и нужны для дальнейшего редактирование группы. Для редактирование группы нам потребуется следующая ссылка которую вам нужно будет скопировать https://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
Вместо надписи страницы, может создать произвольное название нашей будущей страницы. Назовем её к примеру меню группы. Нажимаем карандаш и переходим в режим вики-разметки. Теперь можно добавить фотографии которые только что создали в программе Adobe Photoshop. Сохраняем страницу и нажимаем кнопку предпросмотр и смотрим как выглядит наше меню. Если вы заметили кнопки является очень маленьким, а также между кнопками имеются пробелы.
Переходим в визуальным режим редактирования. Нажимаем на каждую кнопку по очереди и выбираем размеры кнопок ширина 610 пикселей, а высота выравнивается автоматический. Это является самым максимальным значением в контакте.
Убираем проблемы между кнопками. Для этого переходим в меню редактирование и визуальном редакторе прописываем в конце каждой записи;nopadding. Копируем данный текст и вставляем в остальные картинки. Нажимаем сохранить страницу и смотрим что у нас получилось нажимая кнопку предпросмотр. Теперь наши кнопки стали одним целым.
Данная статья будет представлять собой подробный мануал и я расскажу, как сделать меню для группы вконтакте. Красиво оформленное меню группы ВК способствует реальному увеличению посетителей и рост продаж на сайте.
Здравствуйте, мои уважаемые читатели. Давайте сегодня я расскажу, как сделать красивое меню для группы ВКонтакте и совершенно бесплатно. Кстати научившись создавать такие темы можно немного заработать на этом -))). Уже ни один коммерческий сайт не работает без создания своего сообщества в социальных сетях в особенности ВК, что гарантированно помогает привести новых клиентов, а также раскрутить свой бизнес.
Но если Ваше сообщество будет не привлекательно и как у всех то, кто захочет там остаться? Я думаю никто!!! Так давайте украсим свои группы качественным дизайном и научимся делать это очень быстро. Перед тем как начать создавать графику и наше будущее меню необходимо установить программу фотошоп на свой компьютер для дальнейшей нарезки картинок. Многие спросят зачем вообще нужно нарезать картинки. Тут дело в том, что для каждой ссылки меню мы должны будем создать отдельную полоску из общего баннера.
Существует на сегодня несколько видов создаваемого меню:
- Открытое с активными пунктами;
- Закрытое в виде закрепленной записи;
- С отдельными картинками или общей смежной картинкой баннера и меню.
Суть создания обоих вариантов одна и та же. Только основное отличие в дополнительных элементах и типов записи и об этом подробнее будет в этой статье.
Для работы с меню нам поможет 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.
И вот мы подошли к самому важному и последнему пункту создания нашего меню вконтакте. Теперь нам необходимо сохранить нашу страницу с картинками и скопировать ее адрес. В моем случае он выглядит вот так:
https://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit
Помните мы в начале статьи делали заглушку меню, которое будет являться продолжением нашей главной аватарки и под нее как раз и делали трафарет. Вот как раз сейчас нам и понадобится.
Переходим на главную страницу и делаем следующее:
Шаг №1.
Вставляем адрес станицы в текстовое поле для новой записи на стене, после чего она преобразуется в ссылку.
Шаг №2.
К записи прикрепляем изображение нашей заглушки для меню и нажимаем отправить.
Шаг №3.
Теперь после публикации записи нажимаем на время создания в нижней левой части записи и выбираем «ЗАКРЕПИТЬ».
Отлично!!! На этом заканчиваем. Теперь вы умеете создавать классные меню и можете зарабатывать на этом неплохие деньги. Советую все делать в следующем порядке:
- Придумываем структуру и заказываем дизайн изображений меню;
- Делаем подгонку размеров и нарезку всех изображений;
- Вставляем в альбомы картинки;
- Редактируем в редакторе все нарезки и публикуем на главные страницы группы.
В итоге работы мы получим вот такое меню.
А вот само меню при нажатии оно будет выскакивать с активными ссылками. Стоит поиграть с размерами и подогнать под свой экран, но не забываем и про отображение в мобильных устройствах.
ВАЖНО: После смены дизайна ВК в 2016 году внесены новые изменения при создании изображений и требования к картинкам о которых .
Скачать шаблон меню группы ВК + все исходники урока
Надеюсь материал был полезен, и вы с легкостью теперь поняли, как сделать красивое меню для группы ВКонтакте. Подписывайтесь на обновления блога и до скорых встреч в новых постах. Если остались вопросы пишите их в комментариях, и я обязательно помогу Вам.
Прикладываю видеоролик для закрепления прочитанного -))).
В моем уроке « » было вскользь упомянуто о создании графического меню. Сегодня я хочу подробно рассказать о том, как его можно сделать. Сначала с помощью прямоугольника со скругленными краями мы создадим фигуру. Потом наложим на нее стиль слоя для придания объема. Далее оформим круглый маркер навигационного меню. Потом с помощью текста создадим указатель-стрелку. В заключении раскопируем созданную кнопку и напишем на каждой из них свой текст.
Шаг 1.
Создаем в фотошопе новый документ, заливаем его цветом #0c1b26.
Шаг 2.
На панели инструментов выбираем инструмент «Прямоугольник со скругленными краями» (Rounded Rectangle Tool). В строке настроек под верхним меню выставляем «Радиус» (Radius) 50 пикселей и создаем фигуру как на рисунке ниже, цвет любой.
Шаг 3.
Шаг 4.
Далее стиль слоя «Внутренняя тень» (Inner Shadow).
Шаг 6.
Получили такой результат.
Шаг 7.
На новом слое создаем небольшой кружок, цвет любой.
Шаг 8.
К созданной фигуре применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет слева #6d78a5, справа #9ea4c4.
Шаг 9.
Далее стиль слоя «Внутренняя тень» (Inner Shadow), цвет #0a1a28.
Шаг 11.
Получили такой результат.
Шаг 12.
Выбираем и настраиваем шрифт, как на рисунке ниже, и с помощью знака «больше» (или треугольная скобка) на английской клавиатуре делаем указатель для меню.
Шаг 13.
Выбираем и настраиваем шрифт, как на рисунке ниже, и пишем текст на кнопке. В данном случае «Практика для новичков».
Шаг 14.
Применим к тексту стиль слоя «Тень» (Shadow).
Шаг 15.
Получили такой результат.
Шаг 16.
Теперь аналогичным образом создаем еще четыре кнопки, пишем на них текст и получаем готовое меню навигации.
P.S. Постовой. А вы знаете, что автор блога hronofag.ru Drive Alienn пишет очень интересные и познавательные статьи для веб-дизайнеров. Например о том, как сделать сайт в фотошопе или симпатичную визитку в иллюстраторе.
В этом уроке будем создавать оригинальную кнопку для сайта.
Шаг 1.
Создайте новый документ, цвет фона задайте показателем: #f7f5f6. Активизируйте инструмент Rounded reqtangle Tool (Прямоугольник со скругленными углами ) с радиусом скругления 10 пикселей. В качестве цвета для переднего плана установите цвет с показателем: #2f88bb. На новом слое создайте небольшой скругленный прямоугольник.
Шаг 2.
Теперь перейдите в Layer Style (Стили слоя) и примените для нарисованного прямоугольника Outer Glow (Внешнее свечение) и Inner Glow (Внутреннее свечение) со следующими настройками:
Шаг 3.
Удерживая клавишу
Активизируйте инструмент Elliptical marquee Tool
(Овальная область выделения
) и, удерживая нажатой клавишу
Шаг 4.
Создайте новый слой и, используя инструмент Elliptical marquee Tool (Овальная область выделения ), создайте эллипс, как показано на рисунке. Теперь, используя инструмент Gradient (Градиент ), стиль - от основного к прозрачному, и создайте градиентную заливку по овальному выделению. Этот градиент будет выполнять функцию тени.
Шаг 5.
Далее, удерживая клавишу
Шаг 6.
Установите непрозрачность для слоя с кнопкой до 32%. Удерживая клавишу
Шаг 7.
Залейте созданное выделение белым цветом, и измените непрозрачность до 11%.
Шаг 8.
Теперь создайте новый слой, и нарисуйте круг, как показано ниже.
Шаг 9.
В этой статье мы рассмотрим структуру команд верхней строки меню программы Photoshop CS5. Строка меню (1) расположена в верхней части программы и содержит меню (2) и вложенные подменю (3) .
Некоторые подменю неактивны. Почему неактивны? Потому что для этого нужно создать определенные условия или выполнить определенные действия — это является хорошей подсказкой. Чтобы раскрыть меню (2) , нужно щелкнуть по соответствующему названию и переходить уже можно будет без щелчка. Также если допустим, у вас нет мыши, можно воспользоваться следующим способом: нажимаем клавишу Alt и у вас появятся вот такие подчеркивания (4) около названий пунктов меню.
И для того, чтобы открыть любое название, просто нужно нажать соответствующую букву на клавиатуре. Например, для меню «Файл» — это буква ф. Нажимаю букву ф, открывается меню «Файл». Переходить по нему можно с помощью стрелок на клавиатуре. Чтобы переходить по меню или к другому пункту меню, нужно нажать стрелку в соответствующую сторону. Клавиша Esc отменяет меню. Повторное нажатие клавиши Alt выводит нас из режима работы с клавиатурой. После ее нажатия, подчеркивание в командах исчезнет. Это на случай того, если у вас нет мыши.
В меню (2) и подменю (3) находятся команды, которые обеспечивают доступ практически ко всем регулировкам и командам программы Photoshop. Многим часто используемым, а также труднодоступным командам назначены соответствующие комбинации клавиш, указанные справа от команд. Это так называемые горячие клавиши.
Их использование очень облегчает и ускоряет работу. Поэтому с самого начала лучше запоминать и пользоваться горячими клавишами. Чтобы воспользоваться комбинацией клавиш, нужно нажать первую клавишу и, не отпуская ее, нажать затем следующие клавиши. То есть одновременно в конце должно быть нажато несколько клавиш. Тогда команда сработает.
Некоторые пункты меню не похожи на команды, а напоминают флажки (5) , устанавливаемые щелчком мыши. Например, показать «Вспомогательные элементы» или «Линейки». Такие команды, как правило, предназначены для отображения или скрытия каких-либо элементов интерфейса или установки работы программы в каком-либо специальном режиме. На рисунке видно, что у меня включены вспомогательные элементы, линейки и привязка.
Основные команды Photoshop
Все команды Photoshop сгруппированы по сходным признакам и отделяются друг от друга горизонтальной чертой. Теперь давайте рассмотрим основные и наиболее частые команды.
1) Меню «Файл» — это команды создания нового документа и его открытие, а также команды закрытия и сохранения документа в различных вариациях (простое сохранение, сохранение как с возможностью выбора формата и сохранение для Web и устройств, которые оптимизируют файл для корректного его отображения в Интернете либо на каком-либо устройстве ). Это основные команды, которые нам нужны. Дальнейшие команды используются не так часто, и мы их рассмотрим немного позднее.
2) Меню «Редактирование» — понадобиться, если мы производим какое-либо действие. Например, я использую «Карандаш». В меню «Редактирование» можно отменить данный шаг, сделать шаг назад либо если мне нужно снова перейти к данному действию, можно сделать шаг вперед. Можно также отменить состояние и вернуться назад. Также в меню «Редактирование» представлены стандартные для большинства программ операции — это вырезание в буфер обмена, копирование, копирование совмещенных данных и различные вставки.
Еще здесь очень часто используются команды выполнить заливку, обводку. Чуть ниже расположены команды изменения масштаба и трансформация, а также работа со слоями. С помощью этого меню также определяется кисть, узор, который мы сами создаем. Ниже производится настройка программы, настройка цветов и основные установки меню (мы их также рассмотрим немного позднее ).
3) Команда «Изображение» — это наиболее развитая команда. Здесь у нас находятся все команды корректировки изображения и инструменты, такие как уровни, кривые и другие инструменты для работы с изображением. С помощью нее можно также изменять размер изображения, работать с размерами холста, поворачивать изображение на разный угол и также работать с каналами изображения.
4) Меню «Слои» говорит само за себя. Оно предназначено для различных операций со слоями. Первое, что нам может понадобиться — это создание нового слоя, дублирования слоя, создание новых корректирующих слоев, а также смарт-объектов. Все это можно создать и другим способом через палитру «Слои» (рассмотрим чуть позже ).
5) Команда «Выделение» предназначена для работы с выделенными областями. С помощью нее также можно создавать выделенные области на основе какого-либо диапазона цветов или в режиме быстрой маски.
6) В меню «Фильтр» находятся все фильтры программы Photoshop. Как встроенные фильтры (6) , так и внешние фильтры (7) сторонних производителей, которые называются «плагины». Плагины устанавливаются в определенные папки (рассмотрим чуть позже ) и с ними можно работать, как и с фильтрами. С помощью фильтров (6) можно изменять изображение различным образом. Например, сделать размытие изображения, добавить шум на него, усилить резкость и так далее.
7) Меню «Анализ» предназначен для специальных работ — это меню нам практически не понадобиться. Здесь можно подсчитать определенное количество объектов, измерить какую-либо длину, задать шкалу измерений.
8) Меню «3D» предназначено для работы с 3D файлами и 3D объектами.
9) В меню «Просмотр» можно настраивать режимы экрана, просматривать изображение в различных размерах (масштабирование изображения ), включать и отключать линейки, выводить направляющие в определенных местах изображения и также выполнять различные специальные операции.
10) Меню «Окно» предназначено для управления рабочими средами и вызова различных палитр.