Как оформить группу в контакте и создать красивое графическое меню: Графическое меню группы. Оформление группы Вконтакте: как сделать вики разметку | Дропшиппинг

Содержание

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

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

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

1. Начинать создавать такое меню надо в графическом редакторе (я использовал Photoshop) – продумать дизайн, написать текстом будущие кнопки. У меню получилось вот так:

2. Теперь, используя инструмент «Раскройка»,

я режу картинку на части – эти части станут кнопками в будущем. Я разрезал на 4 полоски — получилось следующее:

3. Выбираю в меню «Файл» строку «Сохранить для Web и устройств» (можно использовать комбинацию клавиш Al+Ctrl+Shift+S).

4. В настройках сохранения выбираю тип файла JPEG, ставлю максимальное качество, выбираю галочками «Постепенно» (загрузка картинок на страницу) и «ICC-профиль» (это профиль цветовой компенсации).

5. Нажимаю кнопку «Сохранить». — это ширина фотографии. Можно делать меньше, но не больше – все равно они автоматически уменьшаться.

nopadding — это тег, убирающий пробелы между картинками.

page-11053617_29800171 — это ссылка, на которую будут переходить, щелкая на данной картинке. Узнать ее можно также как и ссылку на фотографию, просто открыв нужную страницу и скопировав ее из адресной строки браузера.

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

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

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

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

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

[[photo11111_11111]]

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

[[photo11111_11111|options|text/link]], где на месте options может находиться одно из таких значений:

plain — ссылка на фотографию оформляется в виде текста, без картинки;
noborder — убирает рамку вокруг фото;
box — открывает изображение в окне;
nolink — убирает ссылку на фото;
nopadding — убирает пробелы между фото;

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

{| знак начала таблицы, является обязательным атрибутом любой таблицы;
|+ знак расположения названия таблицы по центру, ставится сразу после знака начала таблицы и не является обязательным атрибутом;
|- знак начала новой строки, в т.ч. и строки ячеек;
| знак, отвечающий за прозрачность ячейки;
! знак, отвечающий за темный цвет ячейки; если отсутствует – обязательно применение предыдущего знака;
|} знак конца таблицы, необязательный атрибут, используется для предотвращения возникновения ошибок.

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

Приведем пример оформления меню группы с помощью wiki-разметки.

wiki-разметка

Это меню было создано применением следующего кода:

{|
|-
|

”’Новости”’||”’Основное”’||”’Все серии”’
|-
![[photo708176_168310200|nolink;noborder;90x80px| ]]!![[photo-4489985_130746672|nolink;noborder;90x80px| ]]!![[photo708176_168309890|nolink;noborder;90x80px| ]]
|-
|
[[Новости из жизни актеров сериала|Новости]]

[[Биографии]]

|
[[Аудио]]

[[Видео]]

[[Книги]]

[[Обсуждения]]

|
Сезоны:

[[1 сезон|1]] | [[2 сезон|2]] | [[3 сезон|3]] | [[4 сезон|4]]

[[5 сезон|5]] | [[6 сезон|6]] | [[7 сезон|7]] | [[8 сезон|8]]

|-
|}
Как мы видим в примере, изображения наделены такими опциями, как nolink и noborder, которые убирают ссылку и рамку картинки. Также были изменены размеры изображений.
Вторая строка ячеек таблицы создавалась с атрибутом !, поэтому и имеет темный цвет заливки.
При переходе на новую строку внутри третей ячейки был использован тег
, а для центрирования текста в ячейках – тег .
Наверняка вы видели красивые графические меню и кнопки в группах и хотели бы сделать такое меню у себя? Вот алгоритм действий.
Для создания красивого меню нужно немного знать фотошоп и немного вики-разметку:

1. Нарезаем картинку в фотошопе и жмём “Сохранить для веб”
2. Загружаем картинки через Стандартный загрузчик т.к. флеш-загрузчик может ухудшить качество
3. Собираем меню тегом nopadding
4. Прописываем ссылки
По итогу получится что-то типа:

[[photo-177777777_18888888|noborder;370px;nopadding|Правила]]
[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Магазин]]
[[photo-177777777_18888888|noborder;370px;nopadding|Полезное]]
[[photo-177777777_18888888|noborder;370px;nopadding|Админы]]
[[photo-177777777_18888888|noborder;370px;nopadding|F. Приложение, которое дает возможность пользователям проверить свои способности и знания wiki-разметки. Принцип приложения довольно прост: Вам дается уже оформленное меню, к которому необходимо восстановить код разметки, после чего сравнить свою версию с правильной.
Вики редактор Приложение-редактор, который поможет Вам оформить группу без каких-либо знаний wiki-разметки: Вам достаточно просто кликать мышкой в визуальном редакторе, а всё остальное приложение сделает за Вас!

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

Wiki-разметки в контакте по ссылке http://vkontakte.ru/app1755280.

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

: Оформить группу в контакте? Да, пожалуйста! 😉

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

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

Вопрос 1: Первый и самый распространенный: «где код в меню?» или «если нет закладки при редактировании «Исходный код» как добавить внутреннюю страницу?» или «Я все равно не понимаю, что сделать, если не появляется код!»

Ответ 1: ВК изменил редактор, теперь для переключения между визуальным редактором и кодом всего один клик (правый верхний угол редактора):

Что бы проверить в каком вы редакторе: подведите мышкой на эту кнопку, напишите какой-нибудь текст и выделите его жирным — если появляются не обычные символы, значит — это код
Вопрос 2: Второй, реально проблематичный: «а как убрать пробелы между картинками??»
Ответ 2: Признаю, сама испугалась, когда впервые у клиента «поехала» менюшка. Сейчас я это быстро правлю, а тогда было не весело. Смотрите:
Добавь тег nopadding; и все станет на свои места!
Между картинками вкрадывается пространство и меню выглядит битым. Для несведущих, может это и не нормально, а для SMM специалиста, это как минимум не профессионально. Так в чем же тут дело? А, все очень просто! В ВК постоянно происходят какие-то обновления, вводятся новые алгоритмы… да еще и редактор кривоват… бывает ни с того, ни с сего из кода выпадают важные теги и тогда мы видим такую картину. Что бы исправить это, нужно заглянуть в код и внести необходимые коррективы. Формат кода, должен быть вот таким:
Шаблон: [[photoцифры_цифры|ширинаxвысотаpx;nopadding;|ссылка на внутреннюю страницу]]
Пример: [[photo7632142_296911703|370x45px;nopadding;|page-32734125_44298120]]
Обычно картинки меню раздвигаются потому, что из кода выпадает nopadding; — вставляем его на место и все выравнивается. Перед тем как сохранять результат, жмите на кнопку «Предпросмотр», что бы убедиться в том, что все ровно стало.
Вопрос 3: Новость. В октябре 2012г., в принудительном порядке, Вконтакте обрезал автары групп и пабликов. Теперь их размер имеет общий стандарт 200х500 пикселей. Так, что если у вас в группе аватар был больше, то сделайте апдейт (обновите аватар).
Кстати, вмести с обрезкой, ВК ввел еще одно нововведение относительно фотографий групп: теперь кликнув на аватар, мы так же как в аккаунте, сможем увидеть все альбомы сообщества. Это удобно! И из этого рисуется новый функционал в коммуникациях группы.

Та-а-ак, с вопросами закончили… теперь переходим к самому созданию меню!
Шаг 1. Как создать меню в контакте и сделать вложенные страницы:
Первым делом убедимся в том, что вы знаете, как создать меню группы в контакте и пробежимся по небольшой инструкции:
Как вам моя шпаргалка? 🙂
Вот такая шпаргалка у меня получилась! 🙂 Для большей ясности, распишу каждую цифру:
Управление сообществом. Переходим в настройки группы.
Включаем материалы. Сохраняем изменения (если еще не включили).
Теперь на главной страницы группы, появилась дополнительная вкладка «Новости группы». Наведем мышкой в правый угол, нажмем на стрелку «Редактировать».
Изменим название вкладки. Здесь будет у нас меню, поэтому напишем, что-то соответствующее и привлекающее.

Эта кнопочки переключения между визуальным редактором и кодом. Мы будем производить все работы с кодом wiki разметки, поэтому перейдите именно в этот режим.
Создадим внутренние, вложенные страницы. Для этого определимся со списком меню, каждое слово меню, возьмем в двойные квадратные кавычки — [[слово]].
Нажмем кнопку «Предпросмотр».
Слова станут ссылками!
Сохраним результат. Не переключайтесь в другой режим, пока не сохранили результат. Кстати, рекомендую периодически сохранять код меню к себе на компьютер.
Отступление. Доступ к странице. Для открытых групп, эта функция больше не работает.
Теперь заполним вложенные страницы контентом. Откроем ссылку меню в новом окне. Убедимся, что мы попали именно на ту страницу. Добавив нужное нам слово в квадратные кавычки, мы уже дали вложенной странице название.
Наполним содержанием эту страницу. Здесь можно добавить как обычный текст, так и новые вложенные страницы, уводящее посетителя вглубь мини сайта. В любом случае, выбор за вами!
Добавив нужный контент на страницу, сохраним результат.
Теперь нам нужно, прописать адрес этой страницы. Иначе, если этого не сделать, в адресе страницы будут кракозябрики и в какой-то момент, вы можете потерять все свои вложенные страницы. Для этого копируем подчеркнутые цифры – от слэша до вопросительного знака…
…и несем этот адрес страницы в наше меню! Помните, оно открыто у вас в соседней вкладке?! 🙂 Вставляем адрес в нужное место.
Проделайте, эту операцию со всеми вложенными страницами и ваше меню будет готово.
Есть! Меню создали, внутренние страницы сделали, заполнили их, теперь перейдем к созданию красивого графического меню. 🙂
Шаг 2. Как создать красивое графическое меню в контакте и поставить его:
Всю теорию о том, как устроена wiki разметка в контакте, я вам давать не буду, у нас сейчас другие цели. Для создания визуального меню в группе ВК, всей вики-разметки знать не нужно. Перейдем к созданию визуального меню!
Для начала покажу вам код и результат своего меню:
Признаюсь, я его сделала специально, что бы написать эту статью. Все «руки не доходили», знаете, как «сапожник без сапог». Но теперь и я с визуальным меню в группе ВК! 🙂
Как рисовать картинку для меню, я рассказывать не буду, это дело дизайнеров, я сама рисую, но не столь профессионально. Здесь, в конце статьи, я давала видео о том, как в фотошопе рисовать простенькое меню, ознакомьтесь, возможно вы справитесь своими силами. Если нет закажите картинку меню у фрилансера.
Я покажу вам средний по сложности вариант установки меню. Разница в количестве элементов. Меню, которое разрезается просто на полоски, является самым простым его исполнением. Чем больше кликабельных кнопок в строке, тем более сложно его исполнение. Хотя, зная особенность, все просто! Дело только во времени. Итак, ширина картинки должна быть:
— 370 px – если в строке у вас будет два и более объектов, как у меня кнопочки соц сетей
— и max 388 px – если разрезаем картинку по-простому, только на строки, не разделяя на мелкие объекты. Вот это та особенность, которую нужно знать, при нарезании меню на кнопки. У меня размер картинки всего меню получился 370х456 px.
После того как картинка разрезана на нужное количество объектов и сохранена в отдельный альбом, загружаем этот альбом в ВК. Загружаем в профиль аккаунта, а не в группу! Так как в альбомах группы больше нет возможности скрывать альбомы. Технических альбом в корпоративной (например) группе, совсем не нужен, поэтому прячем элементы меню в альбом аккаунта:
Технический альбом ВК
После того как вы настроили конфиденциальность «Только Я». Переходим к установке самого меню. Дам вам пример кода, что бы был для вас шаблоном и разберем из чего он состоит:
[[photo7632142_296911699|370x101px;nopadding;|http://frilka.com]]
где, photo7632142_296911699 – это адрес картинки! Его мы смотрим в адресной строке картинки:
С первой картинки, начнем вставлять меню в группу вконтакте
Вам нужен короткий адрес картинки, для этого перейдите в сам альбом:
Перейдите в сам альбом, что бы получить нужный адрес картинки!
…и начиная с первой картинки, переносите их в меню группы.
Далее, идет разделительная черта «|» и размер картинки 370x101px; — что бы его узнать, нужно открыть альбом на компьютере, выделить нужную картинку и посмотреть какого она размера:
Добавляем размер картинки в код меню!
Итак, адрес картинки добавили, размер указали, теперь ставим, тег nopadding; — он нужен для того, что бы наши картинки плотно прилегали друг к другу. И последним этапом ставим ссылочку на страницу, куда будет попадать посетитель, после того как кликнет на картинку.
Здесь небольшое уточнение! Внешние ссылки, ссылки на альбомы ВК и обсуждения пишем полностью, а ссылки на внутренние страницы в формате page-32734125_44298120 . В начале и конце строки, не забываем ставить по две квадратные кавычки и без пробелов.
Уточнение 2: когда мы ссылаемся на внутренние страницы без картинок, то для обсуждений, альбомов и внешних ссылок ставим одинарные квадратные кавычки.
Строчки, в которых у вас два и более элемента, в код вставляем без пробелов. Вставляйте каждую строку картинки друг за другом. Потому, что если вы нажмете Enter после строки с картинкой, то картинка перепрыгнет на новую строку и меню сдвинется. Нам нужно, что бы меню отображалось цельным, поэтому ни каких лишних пробелов и «иртеров» нам не надо! 🙂
После того как вы перенесли все картинки в меню и оформили их (размер, ссылка), сохраняем результат и любуемся своей работой! Все! Готово!
Буду рада, если я смогла вам донести информацию. Расскажите, как у вас получилось с установкой меню! Ответила ли я на ваши вопросы или нет? Может кто, что хочет добавить? Буду рада общению в комментариях. Источник статьи — Копилка Фрилансера Марины Лазаревой http://frilka.com/
Графическое меню группы вк. Как сделать графическое меню вконтакте

Чтобы создать меню в группе Вконтакте, вам необходимо иметь у себя какой-нибудь графический редактор. Наиболее распространенный это adobe photoshop. С его помощью возможно сделать меню для группы Вконтакте.
В интернете есть множество шаблонов и заготовок, можете воспользоваться ими, если не можете создать сами.
Создание меню в графическом редакторе
Для начала вам необходимо создать заготовку меню, а уж потом добавить его Вконтакте. Ширина фона меню должна быть не больше 370 пикселей. Если она будет больше, то все равно уменьшится до этого размера. Высоту уже можете выставлять пропорционально ширине, чтобы у вас все влезло, и в то же время оно не было очень длинным. Перед тем как создавать меню, продумайте фон, текст, который должен быть на кнопках меню.
Запускаем фотошоп, создаем новый документ (файл — создать или ctrl+N). Выставляем параметры создаваемого файла. Максимальная ширина 370 пикс., я сделал 200 пикс., высоту 250 пикс. Можно делать его намного меньше и компактней. Добавляем в созданный файл картинку, которая будет фоном. Теперь создаем текст. Пример у меня самый простой, вы сможете сделать намного красивее, компактнее.
Я создал такое меню. Выбрал инструмент Раскройка и вырезал им на картинке три части, обозначены цифрами 1,2,3 — будут кнопками. После того, как вы вырезали, сохраняем созданное меню. Нажимаем Файл — сохранить для web и устройств.
В появившемся окне ничего не меняем, нажимаем сохранить. Выбрать место сохранения и нажать сохранить.
Все, в фотошопе работу закончили.
Добавление меню в контакт
Теперь созданные изображения, после сохранения будут в папке images. Загружаем их в контакт с помощью стандартного загрузчика фотографий. Можно загрузить эти файлы в фотоальбом группы. Простыми словами – добавляется как обычная фотография, которые вы загружали в контакт. Теперь смотрите, чтобы у вас в настройках группы было включено следующее. Заходите в свою группу, нажимаете управление сообществом (находится под главной фотографией группы, с правой стороны). Затем внизу находим пункт материалы, там должно стоять подключены. После того, когда выбрали подключены, нажимаем сохранить. Если не нажмете сохранить, изменения не вступят в силу.
После этого заходим на главную страницу своей группы, и там, где находится информация о группе (описание, местоположение), есть строчка свежие новости. Наводим на надпись свежие новости, с левой стороны нажимаем редактировать.
В появившемся окне вам необходимо указать код []. Можете его прямо из статьи скопировать и вставить себе. Теперь вам только останется изменить на свои данные.
photo-40781312_285935465– код фотографии. Его можно посмотреть в адресной строке. Этот код видно, когда вы зашли на фотографию. Сам адрес там намного больше, но вам необходимо скопировать ту часть кода, которая начинается со слова photo и заканчивается цифрами. Обычно после цифр может стоять, например, знак процентов.
Nopadding – эта команда убирает пробелы между картинками.
100px – ширина меню (если это отдельная кнопка, значит, такой будет ширина кнопки).
club40781312 — ссылка в тот раздел, куда будет переходить человек, нажав на эту кнопку (картинку). Также находится в адресной строке браузера, в тот момент, когда вы том разделе, куда должен будет попадать человек при нажатии на кнопку. Вам необходима только последняя часть кода, которая идет после последней наклонной линии / (называется еще слэш). У меня в данном случае, при нажатии кнопки (картинки) в моей группе будет происходить переход на главную страницу группы. Вы ставите свой код, который будет в вашем разделе.
Также можно изменить заголовок. Я, например, вместо свежие новости, написал меню группы. Вы пишите что хотите. После того, как закончили редактирование своего кода, нажимаем сохранить. Проделываем с каждой кнопкой, которую вы создали для меню в контакте. Если будете располагать код под кодом, такое же расположение будут занимать и кнопки. Если будете располагать следующий код справа от кода, значит, кнопки меню также будут располагаться точно так, как вы вставили код
Если вы не получили ответ на вопрос как сделать меню группы
Не удалось получить ответ на вопрос как сделать меню в группе Вконтакте по той инструкции, которую вы прочитали, напишите нам в , нажав задать вопрос . Напишите вашу проблему и действия, которые вы проделали. Ответим лично.
Видео по созданию меню группы
Учитывая, что это меню не в группе, а на странице (паблике) вконтакте, я решила показать вам как все это делается! Давно меня уже дергали вопросами: как сделать меню в паблике, как сделать так, что бы меню было открытым, как сделать закреп и т.д.. Вот вам и инструкция!
Итак, как же вообще можно сделать меню на публичной странице в контакте ? Все мы знаем, что возможность добавления встроенного вики-меню есть только в группе , я об это писала и . Но как же сделать менюшку в паблике, если там нет такой функции в настройках? Для пытливого ума и не бывает никаких ограничений ! Вот так выглядит менюшка в нашем корпоративном паблике:
Меню в паблике? Проще простого!
Пересмотрите еще раз статьи: и , сейчас нам пригодятся эти знания!
3 шага к красивому меню паблика!
Вероятно вы уже догадались, что основу такого меню составляет… закрепленный пост с внутренней страницей! Лично мне этот способ очень нравится, даже в группе моего блога я отказалась от встраивания и использую именно «меню в закрепе». И сейчас я дам вам четкую инструкцию «как это сделать»!
Шаг №1: Создаем внутреннюю страницу меню
Итак, для того, чтобы в нашей группе появилась менюшка, её нужно создать на отдельной внутренней страничке. А как помните, в пабликах у нас нет возможности добавить меню, но мы пойдем другим путем и создадим внутреннюю страницу. Для того,чтобы создать её, мы должны правильно прописать адрес в строке браузера. Вот вам шаблон ссылки:
Вариант 1: (обычный)
http://vk.com/pages?oid=- XXX &p=Нaзвание_страницы
где XXX — ID Вашей публичной страницы,
а «Название_страницы» — любое слово, которым будет названа страница
Вариант 2: (облегченный, но )
Итак, мы создаем вики-страничку и заполняем её точно так же, как если бы мы заполняли меню для группы. То есть прописываем там все изображения и переходы. У нас должно получиться примерно следующее:
Это вики-код меню
Внимание! Если вы еще не умеете создавать визуальные менюшки в контакте, то повторюсь, статью! Если все ок. то у вас получится подобная картинка:
А это готовая страничка меню
Шаг №2: Создаем пост на стене
Теперь мы должны добавить наше меню на стену сообщества вконтакте. Для этого копируем ссылку на внутреннюю страницу и добавляем её в пост, вот так:
Вероятно вы уже знаете, ссылка к посту прикрепляется автоматически и после того как ссылка прикрепилась из самого поста адрес страницы можно удалить. Если опубликовать ссылку, то меню на стене не появится, а будет просто ссылка, кликнув на которую человек попадет в наше меню. Это только пол дела! Нам нужно, что бы меню было заметным и висело в закрепе, т.е. на самом видном месте.
Итак, теперь мы должны удалить ссылку из «тела» поста (прикрепившаяся страница останется), и добавить к посту изображение , которое будут видеть подписчики. Фишка в том, что если в одной записи присутствуют ссылка и изображение, то при нажатии на картинку будет совершаться переход по ссылке ! Все гениальное просто!
Картинка может частично или полностью повторять само меню, здесь уже вам решать. Если будете заказывать меню для паблика, то вам нужен еще и банер, т.е. картинку, которая будет висеть в закрепе. Вот что мы получим при публикации поста:
Картинка повторяет меню и привлекает внимание посетителей страницы
Шаг №3: Закрепляем пост
Наконец-то у нас все готово и пост висит с картинкой и ссылкой на стене! Теперь нам нужно перенести его в шапку группы, закрепить пост на главной, сделать закреп… Для этого щелкаем на дату/время поста (под каждым постом есть дата публикации), мы попадаем на внутреннюю страницу поста, листаем его вниз и ищем там кнопку «закрепить». Смотрите на картинке, что вам нужно найти:
Нажимаем на эту кнопку и обновляем страницу. Вуаля, все готово! Наслаждаемся красивым меню!
vk.com/frilkacom
Можно даже подобрать такую картинку, которая стала бы продолжением вашего аватара — такое оформление смотрится очень симпатично.
Вот так, с помощью трех не сложных шагов нам удалось создать красивое меню, которое можно использовать в любом ВК сообществе!
У меня на это все! Делитесь статьей с друзьями, добавляйте в избранное и следите за обновлениями блога, чтобы не пропустить новые интересные статьи!
Итак, для создания открытого меню, нам понадобится изображение, которое будет играть роль открытого меню. Изображения, которые мы добавляли в статье о создании графического меню не подойдут, так как необходимо изображение развернутого меню, а не каждого пункта в отдельности. Кроме того, можно использовать абсолютно любое изображение, которое будет указывать, что оно скрывает меню группы. Например, изображение с надписью: «Меню группы». Или что-то в этом роде.
После того, как мы подобрали изображение, которое будем использовать. При этом размер изображения может быть практически любой, который возможно загрузить в фотоальбом. (UPD: Это не совсем точная информация. Точнее о размерах можно прочитать в комментарии ниже. Для этого, просто нажмите на ссылку: /otkrytoe-menyu-gruppy-vkontakte/#comment-7633)
Переходим в группу вконтакте. И правой кнопкой мыши открываем меню, если оно уже создано, в новой вкладке.
После этого, на странице с меню, нужно нажать на ссылку «Редактирование».
Но при этом не нужно изменять код. Просто нажимаем на ссылку «Вернуться к странице». Это нужно, для получения ссылки на страницу с меню.
Теперь, когда мы вернулись обратно на страницу с меню. В адресной строке мы увидим ссылку на эту страницу, без различным дополнений в адресе. Иначе говоря — чистую ссылку. Она-то нам и нужна.
Оставляем эту страницу открытой и возвращаемся в группу Вконтакте. Здесь нам необходимо создать запись, в которую добавить изображение, которое будет играть роль открытого . Для этого, внизу выберем «прикрепить фотографию». И выбираем изображение либо из альбома, либо загружаем с компьютера.
Когда изображение добавлено в запись, мы ее пока не публикуем.
А возвращаемся на страницу меню и из адресной строки копируем адрес страницы меню группы вконтакте. И вставляем скопированный адрес меню, в запись, которую мы еще не сохранили. Выглядеть конечный результат должен примерно так:
После того, как мы добавили ссылку, внизу появилось название страницы и адрес на нее. Когда внизу появилась страница, мы можем удалить ссылку, которую только что вставили в запись. После чего, нажимаем на кнопку «Отправить». Тем самым, мы опубликовали нашу запись на стене группы.
Теперь нажимаем на дату новости.
После чего, закрываем запись и обновляем страницу группы вконтакте. Теперь в самом верху, если все сделано правильно, у вас появится изображение меню, которое играет роль открытого меню вконтакте. При этом, ссылки в меню неактивны. А активна одна ссылка на данную запись.
Теперь, когда пользователь окажется в нашей группе он увидит имитацию меню. А после нажатия на открытое меню группы вконтакте, он окажется в самом меню, которое будет функционировать, как и должно.
Других способов, как сделать открытое меню контакте, я к сожалению не знаю. Но все же такой вариант намного лучше, чем просто ссылка, для раскрытия полного меню.
Надеюсь, данная статья поможет Вам разобраться, как сделать открытое меню вконтакте. А у меня на этом все.
Как выглядит отрытое меню группы можно посмотреть в моей группе.
Социальные сети давно вошли в жизнь большинства людей и являются важной составляющей в ней. Многие люди даже умудряются создавать свои виртуальные бизнесы в них: накрутка лайков, подписчиков, продажа товаров как из других стран, так и авторских. Почти все они имеют группу. А как пользователям донести быстрее всего, чем занимается человек или даже целая организация? Создать специальное меню, в котором будет содержаться самая необходимая информация. И именно здесь нам понадобится Wiki-разметка. Как сделать меню группы ВК? Что добавить в неё? В статье будут рассмотрены правила создания и примеры.
Чем является Wiki-разметка?
Как сделать меню группы ВК? Вики-разметка — вот хороший помощник! Это очень эффективный и удобный способ оформления группы в социальной сети «ВКонтакте». Эта разметка по принципу своего действия очень напоминает html код. Но для людей, не связанных с программированием, она будет более понятной благодаря простоте реализации. Своё название вики-разметка получила благодаря «Википедии», где многие пользователи впервые смогли ознакомиться с основными особенностями её функционирования. Вики-разметка позволяет людям без знаний в программировании быстро и легко оформлять внешний вид группы:
Создавать графические спойлеры и таблицы.
Форматировать текст и изображения.
Работать с якорями и ссылками.
Как сделать меню группе ВК? Рекомендации бывают так нужны, но в целом, можно разобраться и с помощью хорошего руководства. Если говорить о html, то для его изучения и работы с ним необходимо было посидеть несколько суток или даже неделю. Вики-разметка при хорошей памяти требует только совсем немного времени. Как же её можно создать? Какие есть подходы? Вот мы будет говорить о технологии, а кто её сделал? Мы разберемся, как сделать меню группе ВК. Уорд Каннингем же впервые ввёл понятие «вики» (в переводе с гавайского значит «быстрый»).
Способы создания вики-разметок
Нужно задать себе не только вопрос: «Как сделать меню в группе в ВК», но и уточнить, как это реализовать. Можно выбрать несколько путей. Каждый из них зависит от направленности и цели группы. Итак, что может быть:
Если группа имеет социальное направления, то можно создать текстовое меню. Преимущества ему отдают благодаря более серьезному внешнему виду.
Группам коммерческого и развлекательного характера желательно сделать ставку на графическое меню. Использование в нём изображений позволит обратить внимание пользователей на то, что должно быть на виду. Применение такого подхода позволит вам также сделать пребывание в группе более приятным и расслабляющим.
В качестве примера работы будет рассмотрена работа с картинками и фотографиями, как делать таблицы, вставлять ссылки, открывать и многое другое. Конечно, это далеко не весь функционал, но оформить меню своей группы таким образом можно будет легко и с довольно значительным размахом.
Работа с изображениями
Как сделать меню в группе в ВК, которое было бы красивым? В социальной сети «ВКонтакте» вставить фотографию или картинку при помощи вики-разметки предоставляется возможным только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем нужную фотографию и копируем её адрес. К примеру, пускай он будет такой: photo12345_67890. Теперь необходимо его взять в двойные Должен получиться такой результат: []. А что, если к фотографии или картинке следует прикрепить текст или ссылку? А может, есть желание немного отредактировать внешний вид? Тогда с этим поможет следующее: необходимо, чтобы у файла был такой вид — [[ photo12345_67890|options|text/link]]. Вместо трех последних слов подставляется то, что надо. Text — пишем то, что нужно. Думается, особенных объяснений не надо. Link переводится с английского как «ссылка». Указывается для того, чтобы машина пользователя знала, куда ей необходимо идти. Options — здесь могут устанавливаться такие значения:
Plain — ссылка на изображение оформлена как текст, в ней отсутствует картинка.
Noborder — убирается рамка около фотографии.
Box — изображение открывается в окне.
Nolink — ссылка на фотографию убирается.
Nopadding — пробелы между изображениями не отображаются.
NNNxYYYpx или NNNpx — указывают, какой размер будет иметь картинка в пикселях. Первый вариант предусматривает ширину и высоту. При желании можно «сжать» картинку. И второй вариант предусматривает редактирования ширины.
Как создавать таблицы с использованием вики-разметки?
Обычно и графическому, и текстовому меню необходим элемент, который позволяет представить данные в удобном виде, а именно таблицы. Без них мало какая группа в «ВКонтакте» обходится. Чтобы создать таблицу в вики-разметке, необходимо использовать определённый набор символов. Предлагаем ознакомиться, за какой функционал они отвечают:
{| — так обозначается начало таблицы. Обойтись без него при создании данного элемента невозможно, он является обязательным атрибутом.
| — используется, чтобы давать ячейкам эффект прозрачности.
|+ — с помощью этого набора символов располагают название таблицы по центру. Это не обязательный атрибут, но он должен быть размещен сразу после знаков, что обозначают начало.
|- — так обозначают новые строки (в том числе и для ячеек).
! — даёт тёмный цвет. При эго отсутствии необходимо использовать знак из пункта №2.
|} — набор символов, которые обозначает конец таблицы. Он является необязательным атрибутом. Но использовать его всё же рекомендуется, чтобы предотвратить возникновение ошибки.
Как же проводится заполнение ячейки? Все данные, которые должны быть внесены в них, помещают после знаков |. При желании отделить ячейки одну от другой необходимо просто продублировать его таким образом: ||. Всё рассказанное до этого момента может выглядеть не слишком понятно, но это сейчас будет исправлено с помощью примера.
Создание меню группы в социальной сети «ВКонтакте» с помощью вики-разметки: пример реализации
Здесь будут использованы опции noborder и nolink. Они уберут рамку картинки и ссылку. Также у изображений будет изменён размер, а вторая строка ячеек таблицы будет иметь тёмную заливку, благодаря использованию атрибута!. А вот и сам пример:
{|
|-
|
”’Новое в науке”’||
|-
![]!!
|-
|
[[Новости науки|Новости]]
[[Открытия]]
|

[[Конференции]]
[[Разработки]]
[[Книги]]
[[Симпозиумы]]
|

Разделы:
[[Медицина|1]] | [[Физика|2]] | [[Математика|3]] | [[Экономика|4]]
[[Химия|5]] | [[Биология|6]] | [[Программирование|7]] | [[Электротехника|8]]
|-
|}
Как видите, ответ на вопрос: «Как сделать меню в группе в ВК?» весьма лёгок.
Важность Wiki-разметки при продвижении своего проекта
Использование данных наработок позволяет придать группе свой атмосферный вид и создать чувство уюта. Конечно, для полноценного оформления следовало бы иметь ещё возможность устанавливать тему страницы, но это пока не реализовано в социальной сети. Поэтому знайте, читающие эти строки, что вы не зря заинтересовались тем, как сделать меню в группе в ВК.
Заключение
Вот, теперь читателям известно, как сделать меню в группе ВК, чтоб было красиво. Как видите, данный функционал является полезным и одновременно достаточно легким в реализации. Но прежде чем создавать меню, необходимо продумать, что и как должно быть организовано, и что следует выделить. Ведь неправильная оптимизация может сделать только хуже.
Привет, друзья!
Хотите сделать группу ВКонтакте максимально привлекательной для своих подписчиков? Не знаете с чего начать? Если у вас уже есть высококачественный контент, тогда сконцентрируйте свое внимание на оформлении сообщества. Я не говорю о простом подборе аватара. Создание меню в группе ВКонтакте – это один из главных моментов, который нужно учесть при оформлении. Именно этот пункт мы сегодня рассмотрим.
Что такое меню ВКонтакте и для чего оно нужно?
Меню – это лицо группы. Первое на что наталкивается любой посетитель вашего сообщества это меню. Поэтому ваша задача продумать его максимально удобно и привлекательно. Во-первых, вы должны определиться с тем, что вы именно хотите донести своим подписчикам. Это зависит от миссии самого сообщества. Ведь бывают совершенно разные цели создания группы: познавательная, развлекательная или же цель продать товар/услугу. Отталкиваясь от этого, решите, какая информация наиболее важна для ваших будущих подписчиков.
Например, если ориентировано на развлечение пользователей или информировании их о чем либо, то возможно сфокусируйтесь на удобстве поиска нужной им информации. Это касается групп, где контент можно поделить на отдельные темы, например, здоровье, мода и т.д.
Если же ваше сообщество создано в виде интернет-магазина, то подход должен быть совершенно иным. Удобство поиска товаров или услуг конечно должно присутствовать, но также сделайте упор на акции, новинки, условия доставки, а также ваши контакты.
Поэтому обязательно учитывайте тематику сообщества при создании меню.
Способы создания меню для групп ВКонтакте
Первым делом нужно определиться со способом создания вашего меню: автоматически или вручную. Если Вы выбрали способ быстрый и простой, но при этом качественный, представляю Вашему вниманию сервис по созданию меню для сообществ ВК ВикиМэйкер , с ним Вы легко и быстро разберётесь, сделав свою группу более удобной. Если же Вы хотите взять создание меню полностью под свой контроль, далее идет пошаговая инструкция.
Как сделать привлекательное оформление?
Я хочу объединить в инструкции создание двух важных элементов группы: меню и аватара. Поскольку не желательно создавать их отдельно, ведь пользователь должен видеть гармоничность между этими двумя графическими элементами.
Для начала вам нужно установить программу Photoshop, если ранее на компьютере у вас не была установлена эта программа.
Открываем Фотошоп и создаем два файла-шаблоны для аватара и для меню. Задаем нужные размеры. Например, для аватара – 200×500 пикселей, а меню 389×600 пикселей. Залейте их каким-нибудь одним цветом для того, чтобы их было отчетливо видно и сохраняем два созданных отдельных файла.
Загружаем в группу шаблон на место аватара, выделяя всю область.
Загрузка меню происходит немного сложнее. Для этого вам понадобится в «Управлении сообществом» включить материалы. После этого станет доступна возможность добавлять меню. Зайдите в появившуюся вкладку под описанием группы «Свежие новости» и нажмите в панели инструментов на кнопку в виде фотоаппарата и загружайте файл с компьютера. Получилось?
Сразу после загрузки вам станет доступна ссылка, которую придется немного доработать. После слова «noborder» впишите знак «;» и слово«nopadding». Это функция не даст вашему меню опускаться при добавлении новостей в сообщество.
Делаем Prnt Scrn основной страницы вашей группы. Для чего? Чтобы понять свои ошибки. Дело в том, что сейчас это черновой вариант – все не ровно и не так красиво. Ваша цель состоит в том, чтобы нижние границы меню и аватара идеально совпадали. Тогда возможно у вас появится вопрос «Почему я не даю вам точных размеров?». А дело в том, что каждый админ использует разное количество текста в описании группы, от чего меняется высота меню, а ширина меню — это дело вкуса и как мы знаем у всех он разный.
Входим в Фотошоп, и создаем новый файл, вставляя туда скриншот.
Теперь, работая с этим файлом, выделяем область аватара с помощью «прямоугольного выделения» — им можно максимально точно выделить конкретную область. Далее, кликаем правой клавишей мыши и выбираем «вырезать на новый слой».
То же самое прорабатываем с картинкой меню, только при выделении нужно отсечь ненужное внизу. Сделать так, чтобы низ меню и аватара полностью совпадали.
Теперь, зажав кнопку Ctrl, выбираем два, созданные нами слои. Кликаем правой клавишей мыши по ним и выбираем функцию «Объединить слои». Перед нами появляются два наших идеально подогнанных друг под друга шаблона на одной странице.
Следующий этап – загружаем фото обложки. Оно появляется поверх наших шаблонов. Теперь справа в инструментах для слоев кликаем по файлу-обложке, зажав клавишу Alt. После данной процедуры, обложка будет видна только на шаблонах и станет невидимым за их границами. Но это не помешает вам передвигать обложку и подбирать нужную видимую ее часть.
Теперь важный пункт создания меню – кнопки. К этому моменту вы должны уже знать точные названия будущих кнопок. Например, «Здоровье», «Дети», «Наши контакты». Для облегчения задачи создаем первую кнопку, следующие лишь дублируем и меняем текст.
Добавляем логотип на аватарку или словесный призыв, или же и то, и другое. Это добавит вашей группе живости, а также отличительную черту.
Сохраняем общий файл в качестве картинки на свой компьютер. Что дальше?
Открываем в Фотошопе созданный только что нами файл. Далее создаем новый пустой файл с точными размерами нашего аватара, вставляем в него созданную нами картинку с логотипом и кнопками. Выбираем нужную нам область под аватар и идеально подгоняем под выбранные размеры. После чего сохраняем наше творение.
То же самое делаем с меню. Но опять же здесь есть свое дополнение. Для начала нужно узнать высоту меню, так как она не совпадает с черновым вариантом. Используя линейку, измеряем высоту до единого пикселя (а лучше всего несколько раз измерить, чтобы не ошибиться). Создаем новый файл со старой шириной и новой высотой, подгоняем картинку под размер и нажимаем кнопку «Сохранить».
Загружаем новый аватар, выделяя всю область и подбираем миниатюру.
Закачиваем меню через кнопку «Свежие новости». Удаляем предыдущую ссылку, загружаем новое фото и добавляем «;nopadding».
Теперь раскраиваем наш макет меню. Применяем инструмент Фотошопа «Раскройка» или «Нож». В разных версиях Фотошопа он называется по разному. Под каждой кнопкой проводим линию, чтобы сделать отдельные прямоугольники, наводя на которые пользователь сможет в будущем переходить на конкретные ссылки.
Заходим в редактирование меню через «Свежие новости» и загружаем каждую нашу вырезку из меню по очереди. При просмотре будут показаны пропуски между нашими картинками. Для того чтобы от них избавиться, нужно добавить в каждую ссылку слово»;nopadding».
Теперь чтобы ваши ссылки были активны и вы могли вставить нужную вам информацию, то напишите по ссылками картинок в редактировании меню — название одной из ваших кнопок — например Доставка. Но это слово нужно написать четко по установленным правилам, выглядеть оно должно так [[Доставка]]. Далее сохраняем страницу, переходим по этой ссылке и наполняем ее нужным контентом.
Последним действием, чтобы все заработало, является вставка копии ссылки на страницу Доставка в ссылку кнопки, например — page-123456_456789, то есть инфа между словами «vk.com/» до «?». Все, теперь каждую кнопку оформляйте также и ваше меню будет успешно привлекать вам целевую аудиторию.
Подписывайтесь на обновления блога и делитесь информацией с друзьями. Создавайте побольше прекрасного в вашей жизни!
Как вконтакте оформить красиво группу – самое подробное руководство в рунете
Как создать группу ВКонтакте и правильно оформить её
Содержание:
Шаг 1 — создание сообщества.
Шаг 2 — вид сообщества.
Шаг 3 — оформление.
Шаг 4 — описание сообщества.
Шаг 5 — аватар.
Шаг 6 — настройки сообщества.
Шаг 7 — вики-меню.
Шаг 8 — оформление изображений.

В этой статье мы пошагово рассмотрим, как правильно создать, настроить и качественно оформить сообщество «ВКонтакте»
Создание сообщества
Создать сообщество ВКонтакте можно перейдя во вкладку «группы», «управление», «создать сообщество».
Вид сообщества и тематика
Для начала вам необходимо будет определиться с видом сообщества, в зависимости от ваших целей и выбрать тематику сообщества.
Оформление группы
После выбора вида сообщества можно переходить к наиболее важному, это к оформлению. Оформление вашего сообщества — это своего рода визитная карточка компании, в зависимости от того насколько качественно будет оформление, ваши потенциальные подписчики будут делать выводы о вашей работе.
Загрузить обложку можно перейдя в «настройки», далее нажать «загрузить».
На обложке можно разместить:
название
логотип
девиз
контактную информацию
акции или призыв к действию
Важный момент: обложка – это первое что увидит клиент при переходе в вашу группу, поэтому обложка должна быть яркой и привлекать внимание.
Обложка в сообществе «МТС»
Обложка в сообществе «Тинькофф Банк»
Обложка в сообществе «HeadShot»
Размеры изображений для оформления сообщества ВКонтакте.
Размер обложки для группы ВКонтакте 1590x400px
Размер миниатюры аватара — круг диаметром 200px
Также ВКонтакте не так давно появились динамические обложки для сообществ.
Динамические обложки имеют очень богатый функционал, с помощью которого вы сможете вывести на обложку последнего подписчика, лучшего комментатора, настроить смену фонов по вашему желанию, добавить виджет погоды, времени и многое другое.
Описание сообщества
В описании главное максимально коротко описать главные преимущества компании.
Важный момент: не нужно расписывать всё, чем ваша компания занималась, занимается или будет заниматься. Длинное описание никто не будет читать. У вас есть несколько секунд чтобы привлечь внимание до того, как клиент начнет смотреть посты на стене сообщества. Поэтому в описании должны быть только ключевые моменты, отражающие суть сообщества/компании.
Лайфхак: Для того, чтобы сделать описание сообщества более подробно (с фото, ссылками и красивой версткой), необходимо поставить в закрепленную запись вики-пост, в котором будет яркая картинка и призыв к действию.
Примеры вики-постов:
Аватар группы
Аватар сообщества — это важная деталь в общем построении качественного оформления, в этой статье мы выделили несколько очень важных моментов, которые нужно учесть при создании аватара сообщества.
С учетом того, что сейчас преимущественно используют обложки сообществ, то сам автар в группе отображается как миниатюра. Поэтому здесь мы поговорим о том, как важно оформить именно миниатюру аватара. Как уже говорилось выше, размер миниатюры аватара — круг диаметром 200px.
Текст
Если вы размещаете текст на миниатюре аватара, важно, чтобы он был крупным и не выходил за пределы аватара.
Понимание
На аватаре необходимо разместить изображение, на котором будет понятно, что изображено.
Минимализм
Для того, чтобы вашa аватаркa смотрелась актуально, можно сделать её в стиле минимализм: меньше слов и излишних элементов, не несущих практически никакой смысловой нагрузки. Миниатюра аватара обязана быть максимум простой и читабельной.
Привлечь внимание
Чтобы миниатюра аватарки привлекала внимание. Нужно оформить её так, чтобы она не была слишком белой и скучной, иначе она потеряется на фоне более красочных аватарок конкурентов.
Что разместить на миниатюре аватара?
Рассмотрим варианты использования миниатюры аватара в качестве привлечения подписчиков в сообщество.
Акции
Конкурсы
Выгодные цены
Анонс нового мероприятия или новой услуги
Настройки сообщества
Перейдя во вкладку «управление сообществом», вы можете придумать короткий адрес страницы и указать дополнительную информацию.
Далее во вкладке «ссылки» указать ссылки на вашу страницу в других соцсетях и ссылку на ваш сайт.
Во вкладке «разделы» включить необходимое. Стену сообщества удобнее ставить ограниченную, чтобы в дальнейшем не разгребать её от публикаций спам-ботов.
Включить товары, если ваше сообщество для продажи товаров или услуг.
Также в сообщество можно добавить приложения и настроить их для своих целей. Например, приложение «Заявки» наиболее удобное для работы с лидами. Это онлайн-запись и прием заказов. Или, например, приложение «Карты», с адресами ваших магазинов, офисов, мероприятий. С помощью приложения «Купить билет» можно продавать билеты на мероприятия прямо на странице сообщества, т.е. подписчики/клиенты смогут купить билет, не переходя на ваш сайт.
Вики-меню — красиво и информативно
Это ещё один способ показать уникальность своего сообщества, привлечь внимание клиентов, а также структурировать услуги, товары и всю информацию о странице. Плюс ко всему с помощью вики-меню вы можете настроить прямые ссылки для перехода непосредственно на сайт компании.
Примеры вики-меню:
Подробное руководство по созданию вики-меню вы можете посмотреть тут — https://vk.com/wiki
Оформление изображений
Оформление изображений к постам.
Если у вас в штате нет специально обученного веб-дизайнера или вы таковым не являетесь, вы можете придумать фирменный стиль и сделать для себя несколько шаблонов, в которых будете менять текст и, при необходимости, цвета.
Важный момент: Оформление всех постов должно быть в одном стиле.
Оформление сообщества «Knorr»
Оформление сообщества «Нетология»
Оформление сообщества «HeadShot»
Где найти качественные изображения?
Подборка бесплатных ресурсов уникальных изображений для оформления.
Пользуясь данными ресурсами можно искать изображения, по ключевым словам, ресурсы бесплатные и все изображения в хорошем качестве.
Здесь у вас может возникнуть вопрос как же это сделать, не имея навыков работы с Photoshop или специализации в веб-дизайне?
Для этого мы подобрали для вас несколько сервисов, которые значительно могут упростить задачу по созданию качественного оформления.
Данные сервисы очень просты в использовании и уже имеют готовые шаблоны для любых социальных сетей, вам останется только выбрать понравившийся шаблон и поменять текст или фон, при необходимости.
И в заключении, оформить сообщество на самом деле не так сложно, главное подойти к задаче осознанно и сделать это качественно, тогда это даст вам возможность выделиться среди конкурентов в социальных сетях.
smmheadshot.ru
Как оформить красиво группу в ВК

Привет, друзья! Сегодня мы с вами поговорим о том, как оформить группу в ВК красиво и наполнить её быстро нужным контентом, чтобы в дальнейшем продвигать нашу группу и зарабатывать на ней. После того, как мы с вами в предыдущей статье создали группу Вконтакте, мы переходим к наполнению группы Вконтакте. Это самая важная часть в создании своей группы Вконтакте, поэтому сегодня мы с вами подробно разберём эту тему и на практике будем наполнять группу контентом.
Как оформить группу в ВК
Для удобства, чтобы вы знали, какие использовать размеры для изображений для наполнения группы Вконтакте смотрите ниже на картинку:
Добавление аватара группы
Самое первое, что мы делаем, это придумываем аватарку для группы. Аватарка должна быть тематической (в тему). Например, если моя группа – «Маникюр Балашиха», значит на моей аватарке должны быть красивый маникюр на ногтях. Картинку ищем в картинках Гугла или Яндекса. Ищем самые яркие и привлекательные, чтобы цепляло глаз человека.
Аватарка должна быть качественная и она должна сочетаться с обложкой группы по цветовой гамме. На аватарке должна быть самая важная информация. Например:
Номер телефона
Адрес офиса
Адрес сайта
Название организации
Преимущества компании
Логотип компании
Адрес страницы группы Вконтакте
Можно на аватарке добавить сверху текст, который можно сделать в редакторе Canva. Если вы не знаете, как пользоваться сервисом Canva, то смотрите эту видеоинструкцию.
Вот я выбрала нужную картинку и теперь эту картинку мы загрузим на аватарку. Для этого, мы заходим в нашу группу и нажимаем на аватарке «Загрузить фотографию»:
Далее вы выбираете файл для загрузки и нажимаете открыть:
Теперь вы выбираете миниатюру фотографии, которая будет видна в списке групп:
Картинка появится справа в углу группы:

В аватар можно добавлять изображения разных размеров. Минимальный размер аватара 200×200, а максимальный размер — 200×500. Ниже я дам вам несколько примеров таких аватаров. Вы можете выбрать тот, который вам нравится больше всего.

Минимальный размер аватарки 200×200:

Максимальный размер аватарки 200×500:

Добавление обложки в группу ВК

После добавления аватара группы, вы можете также сделать красивую горизонтальную обложку (смотрите пример такой обложки на скриншоте ниже):

Размеры обложки 1590×400. Такую обложку вы можете тоже сделать в сервисе Canva. Если вы не знаете, как пользоваться этим сервисом, то смотрите видеоинструкцию ниже:

**

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

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

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

Название группы вы придумываете так, чтобы в названии было ключевое слово вашей услуги или товара. Для подбора ключевых слов можете использовать сервис ЯндексВордстат.
Описание группы вы пишете подробно о вашем товаре или услуге: кто вы, что предлагаете, что за товар/услуга, какие проблемы решает ваш товар/услуга.
Тип группы вы можете выбрать открытый или закрытый. В открытую группу могут добавиться все пользователи социальной сети Вконтакте, а в закрытую группу пользователи подают заявку и вы её либо одобряете, либо нет.
Обложку вы загружаете по этой видеоинструкции
Адрес страницы вы можете поменять, просто удалив ID группы и написать своё название латинскими буквами (смотрите скриншот ниже):

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

Создание Вики страницы в группе Вконтакте

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

После того, как он кликнет по кнопке, он попадает вот на такую страничку:

Вики страница – это небольшой веб сайт вконтакте, который создаётся с помощью html кодов (wiki разметка). С помощью таких страниц можно создавать объёмные статьи с изображениями, видео, заголовками, кнопками и т.д. Также можно создавать красивые навигационные меню для групп и пабликов вконтакте, которые привлекают внимание.
Создать такую вики страничку можно очень легко с помощью одного сервиса, который называется Вики Постер.
Смотрите ниже видеоинструкцию по созданию вики страницы в этом редакторе:

**
Закрепление постов в группе

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

Закреплять в своей группе вы можете:
Различные важные новости
Презентации
Конкурсы
Анонсы
Информацию о скидках или акциях
Отзывы клиентов
Кейсы
Рекламу
Правила группы
Информацию о себе
Различные объявления
Добавление фотографий в группу

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

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

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

Далее вы нажимаете «Создать альбом» сверху:

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

После того, как вы создали группу, теперь нужно добавить в неё фотографии:

После добавления фотографий в альбом, у вас появятся внизу вкладка «Фотоальбомы«:

Добавление видеозаписей в группу ВК

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

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

Теперь выбираем видео на копьютере и нажимаем «Открыть»:

Теперь пока наше видео загружается, мы заполним поля под видео с описанием и настройками. В описании мы можем оставить ссылки на свой товар или сайт. Либо какое-то подробное описание вашего товара/услуги. После редактирования нажимайте кнопку «Готово»:

Теперь ваша видеозапись должна появится в «Видеозаписи»:

Добавление обсуждений в группу Вконтакте

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

Добавляем обсуждение. Заходим в группу и нажимаем «Добавить обсуждение»:

Далее, перед вами появляется окошко, где вы должны написать заголовок и текст. Например, заголовок «Об авторе» и текст, где вы пишете о себе и нажимаете «Создать тему»:

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

Вот пример моих обсуждений в моей группе:

Виджеты в группе

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

Можете посмотреть мою видеоинструкцию по сервису Senler и сделать в своей группе такие же виджеты ( на 25 минуте рассказываю, как создать виджет в группе ВК).
Рассылка в группе Вконтакте

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

**
Как писать посты в группе ВК

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

Вот увидите, после таких действий, ваша группу будет очень активной и постоянно будут приходить новые подписчики и клиенты.
Если у вас нет идей для контента или вы не можете что-то придумать советую скачать бесплатную книгу моего коллеги Дмитрия Воробьёва «Генератор контента», где собрано более 100 идей для ваших постов.
А вообще, порекомендую вам одного хорошего тренера по созданию продающей группы Вконтакте — Михаил Христосенко, который обучает людей создавать продающее сообщество Вконтакте, которое приносит стабильный ежемесячный доход. Сама у него обучалась и знаю, что он даёт хорошее обучение. Можете посмотреть его бесплатный урок по привлечению клиентов Вконтакте.
Картинки для постов в группу ВК

Конечно, же очень важным моментом является изображения к постам, которые вы добавляете. Они должны быть качественные и не замыленные глазом. Очень часто владельцы групп добавляют в посты картинки с Яндекса или Гугла, которые уже намозолили всем глаза. Не советую это делать.
Ваши картинки должны быть уникальные. Возможно, там будет ваша фотография, ваш логотип, ваш продукт или можно совместить несколько картинок. Можно придумать определённый дизайн для своих картинок с помощью сервисов:
Canva.com
Crello.com
desygner.com

Пример уникальной картинки в группе ВК:

Есть также специальные фотостоки, где вы можете бесплатно скачивать очень качественные и профессиональные фотографии. Вот список бесплатных фотостоков:

https://pixabay.com/
https://www.dreamstime.com
https://unsplash.com/
Home
http://imcreator.com
https://stockphotos.io/
https://foter.com/

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

**
Добавление товаров в группу ВК

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

Теперь вам надо заполнить все поля по данному товару. Товаров вы можете добавлять сколько угодно и на главной странице группы всегда будут показываться последние три добавленные товара. После заполнения нажмите «Создать товар»:

Теперь товар появился в вашей группе Вконтакте:

Если вы хотите, чтобы в группе были выставлены определённые товары, то вы заходите в «Товары» и создаёте подборку, куда добавляете эти три товара и они будут всегда на главной странице группы:

Добавление документов в группу Вконтакте

Также вы можете добавлять в группу ВК различные документы, которые могут посмотреть или изучить подписчики и посетители группы. Это могут быть каталоги товаров, различные инструкции, чек листы и многое другое.
Чтобы добавить документ в группу, нажмите «Добавить документ«:

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

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

Помимо всего этого, вы можете загружать различные свои ссылки на главную страницу группы, которые ведут на какой-либо ваш товар или подписную страницу, где человек сможет оставить свои данные.
Чтобы добавить такую ссылку, нажмите внизу группы «Добавить ссылку«:

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

И в следующем окошке вы вставляете свою ссылку и нажимаете «Сохранить«:

Теперь я могу вас поздравить, ваша группа Вконтакте готова к продвижению, вам осталось добавить несколько интересных постов с креативными картинками.
Надеюсь, эта статья была для вас полезной и вы смогли красиво оформить свою группу Вконтакте вместе со мной. Если у вас есть вопросы, пишите в комментариях. И напишите, что бы вы хотели видеть на моём блоге в качестве контента.
Если вам понравилась статья и была полезна, поделитесь ей со своими друзьями в социальных сетях (внизу статьи)!
Если вы хотите научиться работать с сайтами, научиться их создавать, а также начать зарабатывать в интернете с помощью партнерских программ и комплектов для перепродажи, то предлагаю ознакомиться с моим мини видеокурсом «Бизнес на диване», где вы с помощью готового инфопродукта для перепродажи начнёте зарабатывать первые деньги в интернете, превращая всё это в стабильный доход.
Благодарю вас за внимание к моей статье!
P.S. Не забудьте скачать мою бесплатную pdf инструкцию «5 шагов до первых денег на партнерках«, где я рассказываю о своём опыте заработка на партнерских программах и делюсь очень важными фишками. Благодаря подробной пошаговой инструкции вы сможете заработать свои первые деньги на партнерках и превратить это в прибыльный инфобизнес.
Я вам желаю удачи и до встречи с вами в следующих моих статьях!
С любовью, Вера Ангел

verangel.ru
Как сделать красивую группу Вконтакте: пошаговая инструкция
Доброго времени суток, уважаемые читатели моего блога. В предыдущей статье мы с вами учились делать очаровательное меню для группы Вконтакте. Сейчас переходим ко второй части. Будем создавать красивую единую картинку для аватарки и подумаем над эффектным переходом.
Если вы впервые оказались в моем блоге, то вам не обязательно начинать с первого урока. Можете прочитать сначала эту публикацию и приступить к оформлению, начиная с этого шага. Сейчас я расскажу как сделать красивую группу Вконтакте, а использовать ли дополнительные возможности, вы сможете решить потом.
К концу этой статьи у вас получится эффектная и единая картинка.
Метод для ленивых
Чтобы не отвлекать от важный дел тех, кто уже все умеет, торопится или элементарно не хочет заморачиваться, могу предложить видеоурок. Он подскажет как сделать все то же самое, о чем я собираюсь поведать, только без фотошопа через сервис www.vkprofi.ru.
Я им не пользовался и не могу сказать платный он или нет. Буду благодарен тем, кто проверит эту информацию и оставит комментарий к этой статье с ответом на этот животрепещущий вопрос.
Для тех, кто хочет научиться
Если решитесь остаться и пойти длинным путем, то вас ждет увлекательная работа. Она будет весьма полезна, если вы только начинаете свой путь в интернет-бизнесе.
Вы узнаете множество трюков, на которые способен фотошоп, я дам полезные рекомендации по работе с рекламой, а также вы получите полезные навыки и опыт.
Вам понадобится…
Фотошоп.
Базовая картинка.
Фотография должна быть большой и качественной, если вы ищете в поисковых системах, то обращайте внимание на обои для рабочего стола. Если же работаете для крутого сообщества, в особенности связанного с бизнесом, то рекомендую использовать сервис http://ru.depositphotos.com. Там вы найдете именно рекламные изображения.
Выбрать картинку, которая будет продвигать товар не так-то просто. Если она используется для бизнес-сообщества, то должна соответствовать многим требованиям. Не все это понимают. Если вы продвигаете отель, гостиницу, бар или клуб, то не рекомендуется брать фотки пустых помещений.
В первую очередь мы должны продавать не место, где человек может прибухнуть, а показывать эмоции, которые он получит от посещения заведения. Красотой интерьеров сейчас никого не удивить. Нужно создать неповторимую атмосферу, в которую покупателю захочется окунуться.
Затасканные фотографии никто не любит. Если они используются сплошь и рядом, то шанс получить клиентов уменьшается. Про качество, грамотно выставленный свет и т.д. я даже говорить не буду. Надеюсь, вы это и так понимаете. Такие варианты, как на фото ниже, уже лет 5 не катят.
Из личного опыта… над одним из проектов я работал с очень крутым менеджером по рекламе. Каждую картинку мы разбирали по косточкам. Объект должен находиться на определенном расстоянии от центра, под специфическим углом, желательно еще в правильной оптимистичной гамме.
Нам приходилось менять цвет рамы, в которой висела картина в самом дальнем углу! Первое время я думал, что все это лишние заморочки, а потом мне показали для сравнения конверсию после работы с подобными мелочами.
Если же вы не хотите мучиться, то рекомендую брать для аватара картинки с DepositPhotos. Здесь точно долго думать не придется. Все эмоции очевидны, а акценты расставлены верно.
Делаем шаблон будущей красивой группы
Итак, когда все готово, нужно определиться с размерами и подготовить шаблон для будущего изображения. Кстати, если научитесь это делать, то потом можете использовать этот прием для множества других задач и создавать прям невероятные картины Вконтакте. Скоро поймете о чем я говорю.
Так-с, открываем контакт. Если вы поищите стандартные размеры постов Вконтакте, то увидите 200х500 и 700х500. Однако, если воспользоваться линейкой, то можно убедиться, что миниатюры не соответствуют этим показателям. Сервис сжимает их при загрузке.
С картинкой на аву все так, она действительно 200х500.
С постом все иначе.
В любом случае вам нужно или скачать подготовленный мною шаблон, или сделать свой скриншот. Советую выбирать второй вариант. Почему? Так вы сможете сами делать шаблоны для разных задач. Например, если у вас на главной отражается галерея товаров или «Свежие новости».
Мой вариант подходит только для закрепленных постов. Самый простой и популярный метод оформления.
Откройте свою или любую другую группу, где сверху закреплен пост с фотографией. Как на моем рисунке. Можете забрать и эту фотографию, нажав на нее правой клавишей мыши и «Сохранить как…». Правда я не уверен что у вас в результате все получится верно. Есть время на эксперимент? Поделитесь результатами в комментариях.
Для других пошаговая инструкция будет отличаться. Прежде всего увеличьте изображение в браузере до 100% (нажимаете кнопку Ctrl и двигаете колесиком мыши). Откровенно говоря, не особенно понимаю зачем это было делать, но при первой моей попытке как раз из-за масштаба у меня ничего не вышло.
Теперь нажимаете кнопку PrtSc. Она находится в самом верхнем ряду на клавиатуре, после бесчисленных «F». После того как вы по ней кликните ничего не произойдет. Все нормально, 100 раз клацать не надо, открывайте фотошоп.
Нажмите на Ctrl+V, тем самым вы вставите свой скрин в рабочее поле программы. Теперь берете инструмент «Прямоугольное выделение» и работаете с левым блоком.
Ведите прямо по краю изображения. У вас не должно получиться на рисунке внизу. Это неправильно.
Двигайтесь строго по краю.
Схватитесь курсором за левый верхний угол прямоугольника и ведите в правый нижний. Чтобы не морочить голову с лупой используйте увеличение при помощи кнопки Alt и колесика мыши.
Теперь нажмите на Ctrl+J. Тем самым вы перенесете выделенный фрагмент на новый слой, он появится над фоном.
То же самое нужно проделать и с аватаркой. Выделяем и переносим на новый слой (Ctrl+J)
Когда будете переносить на новый слой, активным должен быть фон, а не тот, который вы только что создали. Следите, чтобы он подсвечивался.
Затем от фона можно будет избавиться. Нажмите на замок рядом с этим слоем, это позволит производить над ним манипуляции.
Перетаскиваем слой в корзину, как обычный файл с рабочего стола.
С этим закончили. Шаблон создан.
Уникальное изображение для группы
Недавно я писал статью о том, как правильно увеличивать изображения в фотошопе. Неправильное открытие и дальнейшая работа с размером может в разы ухудшить качество самой крутой картинки, если интересно, можете прочитать статью об этом в моем блоге.
Перетаскиваем фото, которое будем использовать в качестве основного.
Он отражается неправильно.
Если у вас произошла такая же ерунда, просто сделайте его самым верхним. Затем при нажатой кнопке Alt кликните по слою 1 и слою 2. Чтобы оба они подсветились.
Их нужно объединить при помощи правой клавиши мыши и соответствующей опции. В этом случае работать нам дальше будет удобнее. Не придется накладывать и вырезать фото сначала для аватара, а потом еще и поста.
Если вы нажмете на Ctrl, а затем на эскиз только что созданного слоя. По краям объектов с нового слоя забегают муравьи, которые подскажут как выставлять нижнюю картинку. Убрать их можно нажав Ctrl+D. То, что сейчас находится во внутренней части, впоследствии будет вставлено в вк.
Если вы начнете перемещать фотографию, то вместе с ней «поедут» и бегающие муравьи. Могу посоветовать вам выставить направляющие. Не умеете работать с ними? Посмотрите вот это видео.
После того как выставите все как надо, можно переходить к следующему шагу. Покажу два варианта добиться одного и того же эффекта. Первый простой. На верхнем слое нажимаете правую кнопку мыши и выбираете «Создать обтравочную маску».
Но я люблю второй. Он быстрее. Нажмите на Alt и наведите курсор между двумя слоями, он визуально изменится. Затем кликните левой мышкой.
В результате получилось вот такое фото.
Каждую часть можно вырезать при помощи инструмента «Рамка», а затем сохранить в jpeg. Правое фото добавляем как аватар. Левое вы можете просто добавить как обычную запись, а затем закрепить ее.
Это не сложно, но если у вас возникают проблемы, могу порекомендовать вам прочитать третью публикацию из этой серии, в которой я подробно рассказываю как сделать так, чтобы читатель, кликнув на ваше фото отправлялся на сайт.
Или его переносило в меню вашей группы.
Если вас заинтересовал вариант с меню, но оно у вас еще не создано, то советую прочитать для начала первую часть, а затем уже переходить к завершающему этапу.
И еще, могу рекомендовать интересный сервис по продвижению в социальных сетях — SocLike.
Ну что ж, подписывайтесь на рассылку, чтобы получать больше знаний о заработке в интернете.
До новых встреч.
start-luck.ru
Как красиво оформить группу в вк (вконтакте) своими руками
Всем привет, дорогие читатели блог in4wp.ru . Я продолжаю свою тему про SMM — на самом деле, тут не все так сложно, как кажется, да и изучать тут особо нечего. Ваш профессионализм полностью зависит от практики. Ну да ладно, сегодня мы с вами поговорим о красоте ваших групп, о красоте меню в ваших группах и о том, как меню и сами группы красиво оформить причем своими руками, т.е. бесплатно!
К слову о простоте smm индустрии — даже в SEO есть больше всяких ответвлений и фишечек, которые нужно знать в теории чтобы добиться результата. Ну да ладно, я также допускаю тот факт что я еще, возможно, слишком слаб в этих сферах, хотя и имею в обоих своих клиентов.
НУ что же, поехали составлять оформлять меню для групп вконтакте?
Как оформить меню в группе вконтакте самостоятельно
Да, именно самостоятельно, ведь после прочтения данной статьи, вам не понадобятся услуги фрилансеров. Хотя это дело не дорогое, за 1500 вам смогут сделать сделать меню на workzila (подробный опыт о работе с этой биржей я писал тут).
Так вот, что нам потребуется для оформления группы в вк:
1. Макет (графическое расположение элементов) — мы ведь должны знать где что должно находиться.
2. Базовые знания wiki-разметки. (о самых самых стандартных вещах мы поговорим чуть ниже, а для подробного изучения — рекомендую [urlspan]эту группу[/urlspan]).
3. Базовые навыки работы с фотошопом. Нужно будет вырезать куски макета нужного размера.
Вот и всё. Ну а теперь, я рекомендую перейти непосредственно к практике.
Где брать макеты для меню?
Макеты для оформления меню вконтакте можно брать разными способами, например:
1. На фрилансе или томже Workzilla.
2. Можно создать самому, если у вас есть навыки работы с фотошопом. Если нет — рекомендую курсы [urlspan]Евгения Попова[/urlspan] , вот один из них, как раз по Фотошопу — [urlspan]кликай[/urlspan].
3. Можно загуглить и скачать уже готовые. Поверьте, таких не мало.
Ну с другой стороны… Зачем гуглить? Просто подпишитесь на обновления моего сайта. И покликайте по кнопкам соц сетей ниже.
Я специально для вас подготовил архив, в котором более 100 различных вариантов дизайнов для оформления групп вконтакте!. В распакованном виде архив занимает около 2.5 гигабайт.
Главное условия — быть подписчиком и пройтись по соц кнопкам.!
[sociallocker]
Спасибо. Теперь вы можете скачать архив [urlspan]по этой ссылке[/urlspan].
Не забудьте пройтись по остальным соц кнопкам.
[/sociallocker]
Размеры аватаров и меню, которые пригодятся для оформления групп вк
Для того чтобы правильно оформить группу или паблик — нужно знать о размерах картинок, которые нужно использовать. Вот прошу обратить внимание на эту картинку.
Как видите, в группе для аватарки нужен размер 200 в ширину и 500 пикселей в высоту. А для картинки основного меню — 395 пикселей ширины и 289 пикселей высоты.
Вот, в принципе и все что нужно. Есть макеты, есть понимание размеров.
Творческая часть закончилась — осталось дело за малым. Начинаем техническую часть всего процесса создания меню для групп.
Как самостоятельно оформить группу вконтакте, имея макеты на руках
Итак, у нас есть макеты дизайна группы. Сейчас нужно вырезать нужные части.
Для аватара группы, конечно ничего не нужно. Вырезаем нужную часть из макета или картинки — и вставили в группу. Думаю, вставить вы уже и сами сможете? Ну, я на это надеюсь. Если нет — пишите комментарии, я добавлю этот раздел в статью.
Теперь меню, его нужно вырезать. Не само меню конечно, но каждую часть для меню (кнопки) точно нужно повырезать.
Сначала немного ликбеза.
Чем отличается меню группы от меню паблика?
Отличаются они тем, что меню группы — это уже и есть по сути набор кнопок. Но это меню всегда скрыто! Всегда! А меню паблика — всегда открыто и по сути — это закрепленный пост-ссылка, ведущий на страницу с разделами самого меню (кнопками).
Итак, еще раз: в группе — чтобы увидеть меню , нужно нажать на кнопку «Меню группы» , по-умолчанию эта кнопка называется «Свежие новости».
А в паблике (в группе, кстати, тоже можно) — меню — всегда открыто. Но эта картинка — это одна большая и красивая ссылка, которая ведет на более крупной отдельное меню. Вот: Эта картинка-кнопка на меню создается через закрепленный пост. Это просто пост в группе, который мы закрепляем навсегда! Этот пост-ссылка ведет на отдельную страницу, которую мы нежно, предварительно создадим.
Как создать отдельную страницу для меню вконтакте
Чтобы создать страницу для будущего меню (навигации) — нужно отправить запрос в вк следующий:
http://vk.com/pages?oid=-XXX&p=YYY
http://vk.com/pages?oid=-XXX&p=YYY
где XXX – номер группы, YYY – название страницы (здесь все знаки вопросов и тире обязательны).
Причем название рекомендую делать нормальным, привлекательным и осмысленным, потому что оно будет светиться и люди будут складывать о вас и вашей группе определенное впечатление по этому названию. Например «Навигация» или «Меню группы» — это нормальные названия, но вроде банальные. Используйте свою фантазию.
Я ввёл следующий запрос
http://vk.com/pages?oid=-97062010&p=навигация
http://vk.com/pages?oid=-97062010&p=навигация
И у меня открылась сразу созданная страница с возможностью её редактирования.
Вот здесь-то и нужно будет вставлять ваш код самого меню с помощью wiki-разметки. Но об этом чуть позже.
Кстати, расскажу секрет, если у вас группа (а не паблик) — стандартное меню, которое уже есть по умолчанию — оно уже само по себе — страница. Так что можно его и использовать, если будут проблемы с созданием дополнительных страниц.
Как делать закрепленный пост в группе или паблике
Да, и в любом типе сообщества закрепленный пост создается одинаково! Делается всё очень просто.
Как только пост опубликован — нажимаем на дату публикации.
И в появившемся окне нажимаем кнопку «Закрепить» — все просто! Многие группы, кстати, используют закрепленные посты как объявления. Если время актуальности этого объявления прошло — вы просто нажимаете опять на дату публикации и на кнопку «Открепить».
На самом деле все сейчас используют именно этот способ меню.
Угадайте почему?
Так, мы уже умеем создавать страницы и закреплять посты. Круто. Возвращаемся к нашим ~~баранам~~ макетам.
Нарезка макета для оформления группы или паблика
Так, для аватарки всё понятно, мы тут ничего не нарезаем. Мы создали картинку нужного размера и залили её в ВК. Всё. С аватаркой для группы мы закончили!
Теперь меню.
Для примера я взял меню из [urlspan]этой группы[/urlspan]. Я его делал сам, и до сих пор имею к нему доступ, поэтому даже могу показать код страниц.
Итак, как основную картинку для меню сделать вы уже в курсе — это просто закрепленный пост.
Нажимаем на меню, видим картинку.
Нам нужно выделить «кликабельные» зоны.
т.е. выделить сами кнопки. Давайте я выделю эти зоны для вас красными линиями.
У нас получается сколько? 5 картинок. И не каждая из картинок будет кнопкой!! Как видим верхняя большая картинка — это не кнопка, а сама по себе…
Так, мы по этим линиям вырезали картинки. Теперь нужно из «залить» в ВК.
Если вы создавали для меню отдельную страницу, то нажимайте на кнопку «Наполнить содержимым» на только что созданной странице.
Если вы не создавали этой страницы, а использовали уже готовую страницу для меню — то перед вами сразу редактор страницы и вы сразу можете заливать фотографии: Залили и у вас должно появится следующее: Возможно у вас появится просто код, как на картинке ниже. Если нет — нажмите кнопку «Исходный код» , эту кнопку я выделил на верхней картинке. И увидите следующее: Здесь нам нужно выстроить все картинки в ряд, чтобы не путаться (ну, я так делаю).
И, чтобы между картинками не было отступов — вписать тег «nopadding», выглядеть это должно вот так:
[[photo6230191_313682566|607x418px;nopadding| ]]
[[photo6230191_313682566|607x418px;nopadding| ]]
После этого на нужные картинки нужно поставить ссылки.
Как создавать отдельные страницы — вы уже знаете. Теперь нужно грамотно вписать эти ссылки.
Не буду сильно мучать. Вот как я вставил ссылки на страницы в ВК:
[[photo6230191_313682327|195x106px;nopadding|page-58190479_45419120]]
[[photo6230191_313682327|195x106px;nopadding|page-58190479_45419120]]
вот это вот page-58190479_45419120 — это адрес самой страницы вконтакте, вы этот идентификатор найдете в адресной строке вашего браузера.
Вот и всё 🙂 Правда не сложно?
Вот что получилось в коде у меня в итоге. Если у вас нечто подобное — значит всё в порядке.
Если у вас с каким-то из пунктов возникли проблемы — прошу, обращайтесь. Буду рад помочь.
Пользуясь случаем, хочу напомнить вам о том, что есть замечательные сервисы для любой раскрутки и накрутки, это:
prospero | sociate | socialtools
Возможно, я рассказал не все секреты, которые надо было рассказать. Допускаю, что я что-то пропустил, все-таки статья не маленькая получилась — напишите мне если заметите явные пропуски. Заранее благодарен.
[bye]
in4wp.ru
Оформление группы ВКонтакте — объясняем на удачных примерах
В данной статье подобраны рекомендации по аудиту группы или личного профиля на социальной площадке ВКонтакте.
Шапка группы ВКонтакте
Она включает в себя название сообщества, URL, статус, описание. Эти блоки отыгрывают немаловажную роль, поскольку влияют на ранжирование (внутренний поиск социальной сети + поисковики). А еще они являются визитной карточкой любого сообщества. Это именно то, на что обращает внимание пользователь при первом посещении группы. В шапке необходимо указать ключевую информацию о деятельности компании. Гостю страницы сразу должно быть понятно, чем вы занимаетесь, и какие услуги/товары предлагаете.
Название группы ВК
Лимит системы – 48 символов. Название – это ключевик, с помощью которого вы продвигаете свое сообщество в сети. Вместе с ключевой фразой можно написать название бренда/магазина/мастерской.
При написании названия запрещено использовать Caps Lock. Это не сыграет вам на руку при продвижении сообщества, а только разозлит подписчиков и клиентов. Также необходимо соблюдать элементарные правила русского языка. Не старайтесь быть хитрее системы.
Ошибка:
Статус сообщества
Это специальное поле, которое размещается под названием группы. В нем можно написать что-нибудь заманчивое, интересное или важное. Например:
Оповестить аудиторию о новых акциях и скидках;
Оставить контактные данные для обратной связи с менеджером.
Лимит системы – 140 символов (с пробелами). Да, это маленькое пространство, но его можно заполнить разумно. В статусе также можно разместить ключевик (если есть такая необходимость). Как уже говорилось, это положительно повлияет на ранжирование.
В статусах многих сообществ можно найти мудрые и красивые цитаты писателей, философов и успешных людей. Это одна из самых распространенных ошибок при продвижении группы ВКонтакте. Совет: оставьте цитаты для личных аккаунтов.
URL-адрес группы ВКонтакте
После создания новой группы ей автоматически будет присвоен адрес. Он представляет собой ряд цифр. Это не очень красиво, да и запоминать их никто не захочет. Именно поэтому важно позаботиться об эстетичности и хорошей узнаваемости названия. Замените цифры буквенными символами. Придумайте маленькое название или слово, характеризующее ваш бренд.
Для этого откройте раздел «Управление сообществом». Далее перейдите в «Настройки». Там вы найдете изначальный URL-адрес. Сотрите все лишнее и добавьте новый вариант названия (оно должно быть написано на латинице).
Согласитесь, аудитории будет проще запомнить буквенную комбинацию символов, нежели хаотичный набор цифр.
Описание группы
Вы указали название группы. Теперь настало время рассказать, чему/кому она посвящена. Чем вы занимаетесь? С кем сотрудничаете? Сколько лет на рынке? Многие владельцы или администраторы сообществ игнорируют эти вполне логичные вопросы, ответы на которые могут стать идеальным описанием. Вместо этого они создают нечто подобное:
Пример №1
Пример №2
Пример №3
В каждом из этих примеров не хватает ключевой информации. Где-то забыли указать название компании. Где-то не сочли нужным рассказать о предлагаемых услугах. А где-то «отделались» набором слов, похожих на ключевые запросы в сети. Как бы прискорбно это ни звучало, но такие группы ежедневно создаются целыми пачками.
И даже если ключевики сработают при ранжировании, это рисковая тактика. Вы всегда должны помнить о комфорте своих подписчиков и клиентов. Думаете, им понравится подобный текст в описании?
Одарят ли они доверием компанию, которая даже рассказать о себе внятно не может?
Самое время поговорить о том, как создать грамотное и красивое описание сообщества. Придерживайтесь следующих рекомендаций при заполнении информации:
Нейтральное приветствие или плавное введение в курс дела. Оно должно быть связано непосредственно с деятельностью компании. Не бойтесь начинать с ключевых слов;
Краткое перечисление основных услуг. Чтобы пользователям было удобно читать, оформите его в виде списка;
Особенности вашей компании. Кратко расскажите о ключевых преимуществах бренда. Что отличает вас от конкурентов? (по факту, а не в самых смелых фантазиях). Если занимаетесь самовосхвалением, всегда добавляйте подтверждающие аргументы;
Укажите контактные данные (желательно несколько вариантов).
Постарайтесь создать компактное описание. Вы еще успеете развернуто рассказать о себе. И было бы хорошо, если бы у аудитории хватало терпения для того, чтобы целиком осилить ознакомление с шапкой группы. Опытные пользователи социальной сети ВКонтакте указали свой рекомендуемый объем для описания группы – 500-1000 символов без пробелов.
Вы уже имели возможность ознакомиться с неудачными вариантами описания. Теперь изучите хороший пример:
Оформление группы ВК
Ломаете голову над тем, что лучше выбрать – аватарку или обложку? Сейчас вы поймете, почему обложка является наиболее удачным вариантом. На это есть свои причины:
Обложка красиво располагается по всему периметру шапки. Это добавляет сообществу эстетичности и привлекательности. Разумеется, если обложка сделана качественно.
На ней можно указать множество различной информации, и этот текст не будет рябить в глазах, как это обычно случается с аватаркой (когда на маленьком изображении пишут целую диссертацию).
Аватарка останется в группе и будет фигурировать на миниатюре. Кликнув по аватарке, пользователь сможет посмотреть на неё вблизи.
Что рекомендуется размещать на обложке?
Контактные данные
Информация о компании (преимущества)
Название и логотип
Вы можете указать все блоки, если это будет смотреться органично. Либо выберите наиболее важную информацию, подходящую под ваши конкретные цели.
Позаботьтесь о том, чтобы фон обложки вызывал у публики приятные эмоции. Разумеется, всем угодить не получится. Но речь здесь идет скорее о том, что не стоит загружать какие-то мрачные и несимпатичные изображения. Вы же не хотите спугнуть своих потенциальных покупателей.
Также важно учитывать сферу деятельности при выборе фона. Если вы продвигаете юридические услуги, то картинку с фиалками и бабочками вряд ли можно будет считать подходящим вариантом.
Просто взгляните на удачный пример обложки для сообщества ВКонтакте (кулинарная тематика). Красота, не правда ли?
Стильно, уместно, радует глаз.
Разумеется, оформление группы не может ограничиваться выбором обложки и аватарки. При необходимости придется создать красивое меню, иллюстрированный каталог продукции, подобрать тематические обложки для альбомов с фотографиями. Прекрасно, если вы сумеете придерживаться единого стиля при оформлении группы. Владельцы сайтов нередко стилизуют сообщество ВКонтакте по идентичному принципу.
Но достаточно обойтись стандартным сочетанием: Обложка + Аватарка + Меню. Вот что из этого может получиться:
Контент группы ВКонтакте
С разделами сообщества все более или менее ясно. Теперь переходим к ключевому блоку, которым придется заниматься на постоянной основе. Это разнообразный контент.
Собственно, для размещения этой информации и предпринимались все предыдущие действия. Самое время отправляться в дальнее плаванье! Идеальный контент в сообществе ВК – это 80% полезной/познавательной/важной информации, и 20% рекламы.
Вы принялись за создание контента. Учтите следующие нюансы:
Доступность языка
Не грех, если вы умеете писать красивым литературным языком. Но постарайтесь не усложнять его заумными оборотами и узкопрофильной терминологией. Пишите легко, душевно, ненавязчиво.
Аудитория не всегда желает напрягать мозги, ведь соцсети созданы скорее для отдыха и развлечений.
Цепляющие детали
Новостная лента активных пользователей переполнена контентом на любой вкус. Вы должны выделяться из толпы, быть хорошо узнаваемыми. При прокрутке ленты юзер обращает внимание на такие элементы поста, как заголовок и изображение.
Публикуйте авторский, уникальный и оригинальный контент. Ищите или создавайте что-нибудь редкое, особенное. Если используете картинки из Интернета, убедитесь в их актуальности. Хотите добавить мем? Сделайте это! Но он должен быть на пике своей популярности. Котики? Не вопрос! Подберите удачную фотографию.
Форматы контента
Здесь можно выделить лишь одно правило: РАЗНООБРАЗИЕ. Чередуйте фотографии, видеозаписи, аудио-файлы, инфографику и многое другое. Взаимодействуйте с публикой, отвечайте на вопросы, проводите конкурсы и онлайн-трансляции.
Оформление текста
В последнее время в социальных сетях вернулась мода на лонгриды. Но оформлять их нужно грамотно, иначе пользователям будет сложно воспринимать такой поток информации. Обязательно делайте разбивку текста на абзацы. Используйте списки, подзаголовки, смайлы.
Правильные ссылки
Часто бывает так, что сообщество ВКонтакте создается для привлечения трафика на сайт. Стало быть, контент группы содержит ссылки для перехода на различные страницы. Чтобы ссылка была правильной, у неё должна быть URL-метка. Также рекомендуется использовать сокращатели ссылок. Метки созданы для вас (чтобы отслеживать трафик), а сокращенные адреса – для комфорта участников сообщества.
Оптимальное время для размещения контента
Нет такого времени суток, когда контент выстреливает во всех группах социальной сети. Все индивидуально. Все зависит от вашей целевой аудитории. Постарайтесь понять одну простую истину: школьники, студенты, молодые мамы, пенсионеры и деловые люди посещают социальные сети в разное время. И вы должны его выявить самостоятельно.
Заключение
Повторим основные рекомендации по аудиту сообщества в социальной сети ВКонтакте.
Создайте грамотную и привлекательную шапку;
Позаботьтесь об оригинальном и стильном оформлении группы;
Оптимизируйте все ключевые разделы в сообществе;
Публикуйте правильный контент.
Мне нравится 0
cashbox.ru
Как оформить группу В Контакте
Прочитав эту статью, вы узнаете, как правильно оформить группу Вконтатке самостоятельно, не прибегая к помощи специалиста. Так же узнаете, как избежать частых ошибок, которые негативно повлияют в дальнейшем, на раскрутку группы.
Создавая группу Вконтакте, большинство не подозревают о том, что не все так просто, как это представляется. Большая часть групп создаются для коммерческих целей. На каждую коммерческую тему приходится от 10 до нескольких тысяч конкурентов. Мыслимо ли раскрутить группу по Москве, если на эту же тематику уже существует более 500 раскрученных групп?
Известно ли вам, что 30% групп Вконтакте – это заброшенные группы, владельцы которых, не смогли осилить свою идею. Причина кроется в том, что большая часть этих людей, просто не знала, как правильно начать. Итог – малая отдача от вложенного времени, разочарование и остывание.
Что же делать? Может не стоит и начинать? Если тематика конкурентная, и вас нет достаточных средств, для раскрутки, то не стоит тратить время и деньги. Возможно, есть другой путь, более экономичный и быстрый. Может быть лучше создать сайт или посадочную страницу и привлекать трафик с Директа и ПС.
Если же ваша тематика Вконтакте не конкурентная и есть возможность обойти конкурентов, группу создавать надо. Но это необходимо сделать правильно, чтобы получить результат как можно быстрей. Время – деньги.
Как оформить группу В Контакте
Итак, что нужно сделать с самого начала. Сначала необходимо создать и правильно оформить группу. Название группы, описание, контактные данные, аватар – все это должно быть сделано красиво и соответствующим образом (посмотрите размеры для оформления в группы в ВК).
Когда в заголовок группы пытаются вписать, все свои мысли и идеи, при этом еще и не соблюдая пунктуации – это не есть хорошо. Это есть, очень плохо. Неграмотный и не эффективный заголовок отталкивает более 50% приглашенных. Не знаете, как составить красивый и привлекательный заголовок, посмотрите, как это сделали конкуренты.
Ещё советую загрузить обложку для сообщества Вконтакте.
В статусе, дополните мысль заголовка. Расширьте ее. В разделе «Описание», напишите, для какого создана данная группа. Соблюдайте пунктуацию. Обязательно укажите место положения и телефон. Если есть веб сайт, укажите.
Аватар, если сами не можете сделать, то лучше закажите. Не надо брать в интернете картинку и загружать ее в качестве аватара. Он должен соответствовать определенным правилам. Должна быть отображена коммерческая мысль. Так же и в миниатюре, все должно отображаться четко.
Если у вас есть несколько видов товаров или услуг, то теперь не нужно создавать фотоальбомы. Для это существует новая функция — товары в группе, где можно загрузить фото, добавить описание и указать цену того или иного товара (услуги).
Если у вас есть видео материалы, обязательно загрузите их аналогично товарам.
Если у вас есть сайт с разделами на продукцию или услуги, добавьте ссылки с этих страниц в раздел группы «Ссылки».
В разделе «Обсуждения», можно добавить нужные страницы. Например, раздел — «О нас» (Обо мне), «Наши клиенты», «Условия Доставки» (Сотрудничества) и т.д. и т.п.
Живая обложка в группе в ВК привлечёт внимание посетителей.
Оформив группу, таким образом, можно сказать, что полдела уже сделано. Остается теперь лента. Лента играет такую же немаловажную роль, какую играет то оформление, о котором говорилось выше.
Что нужно публиковать в ленте и как это делать. В ленте нужно публиковать два вида публикаций – это информативные, раскрывающие полезность и необходимость вашей продукции или услуг для общества, и коммерческие – продающие ваши товары или услуги. О том, как составлять эффективные посты, в двух словах не скажешь. Это отдельная тема.
Опубликовав примерно 20-25 постов, уже можно будет приглашать участников в группу. Это можно сделать через специалистов или же настроить таргетинговую рекламу.
Вот мы и рассмотрели, как правильно оформить группу Вконтакте. Если же данная информация вам ни о чем не говорит, обратитесь, в таком случае, к специалисту. Но тогда придется заплатить деньги.
online-vkontakte.ru
Как оформить группу В Контакте с закрепленным верхним меню под новый дизайн ВК | DesigNonstop
Как оформить группу В Контакте с закрепленным верхним меню под новый дизайн ВК
9
Сегодня мы опять возвращаемся к теме оформления групп В Контакте. Ранее мы уже научились делать графическое раскрывающееся меню. Сегодня мы будем учиться делать графическое меню с закрепленным верхним баннером и ссылкой на внутреннюю страницу с пунктам расширенного меню. В общем то, на внутренней странице может быть любая информация. Особенно удобно там располагать, например каталоги с ассортиментом продукции. И у раскрывающегося меню и у закрепленного меню есть свои плюсы и минусы. Основной минус раскрывающегося меню — то, что он по умолчанию находится в закрытом состоянии. Но зато на нем можно разместить сразу несколько ссылок.

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

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

Шаг 1
Создаем в фотошопе новый документ размером примерно 900х700 пикселей, заливаем его белым цветом. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя (аватар) и нажимаем Del. Потом выделяем прямоугольник размером 510х352 (выравниваем по нижней линии аватара и делаем расстояние между фигурами 50 пикселей) и также нажимаем Del.
После очередного апдейта дизайна ВКонтактом (31.10.2016) размеры баннера стали 510х307 (а не 510х352).
Шаг 2
Теперь ниже белого слоя кладем какую-нибудь единую картинку, которая и будет составлять основу оформления.
Шаг 3
После этого дополняем картинку различными элементами — логотипом, текстовыми надписями и кнопкой, призывающей кликнуть по меню. Затем сохраняем на компьютере две отдельных картинки — одна аватар (справа), вторая меню с кнопкой кликнуть (слева).
Шаг 4
Также в фотошопе создаем графическое меню, состоящее из нескольких пунктов. Ширина этого меню должна быть 600 пикселей, высота по усмотрению, в зависимости от количества пунктов. В помощь используйте урок «Как в фотошопе создать несколько кнопок навигационного меню«.
Шаг 5
Нарезаем наше меню на несколько горизонтальных полосок в соответствии с количеством пунктов меню. Сохраняем в виде отдельных файлов.
Шаг 6
Заходим в нашу группу Вконтакте, нажимаем «Управление сообществом» (при нажатии на три точки под автаром открывается выпадающее меню) и проверяем правильность установок. Группа должна быть открытая и материалы тоже открыты.
Шаг 7
Теперь загружаем новый аватар. Подводим мышкой к месту аватара и на всплывающем меню выбираем «Обновить фотографию». Загружаем правую фотографию из Шага 3, растягиваем область выделения вверх и вниз до краев картинки, нажимаем «Сохранить» и потом выбираем область для круглой миниатюры.
Шаг 8
Теперь нужно создать внутреннюю страницу. О том, как это сделать, подробно расписано в уроке Как сделать внутреннюю страницу для меню группы В Контакте. Еще один альтернативный способ создания внутренней страницы расписан в уроке «Как Вконтакте создать динамическое меню с эффектом навигации» в Шаге 5 и 6.
Шаг 9
После того, как мы создали внутреннюю страницу, можно перейти на нее. Для этого нужно нажать на раскрывающееся меню группы (по умолчанию этот пункт называется «Свежие новости» — я переименовала в «Меню») и там нажать на ссылку «Меню». После этого мы перейдем на вновь созданную пустую страницу.
Шаг 10
Теперь нам надо создать графическое меню из пяти пунктов. Для этого мы загружаем в альбом группы наши пять картинок из Шага 5. Мы нажимаем на значок фотоаппарата и загружаем нарезанные картинки с компьютера. Хранится картинки будут где-то на серверах ВКонтакта с привязкой к группе, поэтому создавать отдельный альбом для картинок-нарезок не обязательно. Загружать картинки нужно в режими Вики-разметки.
Шаг 11
Теперь в режиме вики-разметки мы будем создавать графическое меню. Очень важно создавать именно в режиме вики-разметки (иконка в правом верхнем углу из двух треугольных скобочек), а не в визуальном режиме редактирования. Подробнее о создании кода в вики-разметке рассказано в Шаге 4 и Шаге 5 урока «Как оформить группу В Контакте и создать красивое графическое меню«. Там же приведен шаблон кода для вставки. Если все сделано правильно, то должно получиться готовое графическое меню, как на рисунке ниже.
Шаг 12
Теперь возвращаемся на главную страницу группы, берем урл нашей внутренней страницы (он должен быть такого вида https://vk.com/page-78320145_49821289) и вставляем в окошко, где создаются новости. Автоматически должно прикрепиться окошко со ссылкой на эту самую внутреннюю страницу. После этого мы подводим курсор к надписи «Прикрепить» и прикрепляем к записи фотографию, а именно нашу картинку слева из Шага 3. После этого стираем строку с урл внутренней страницы, оставив пустое место. Важно! На данном шаге надо поставить галочку (если есть такие права, в основном это касается групп с открытой стеной) в чекбоксе «От имени группы». Если эту галочку не поставить, то запись невозможно будет закрепить. В конце нажимаем «Отправить».
Шаг 13
Подводим курсор к трем точкам рядом с заголовком поста и в выпадающем окошке выбираем пункт «Закрепить». Соответственно также новость и открепляется, если необходимо.
Шаг 14
Есть один нюанс. Иногда, после того, как открепляешь новость, она уходит далеко вниз ленты, согласно дате создания, и бывает достаточно трудно вновь ее отыскать. Поэтому лучше сразу где-нибудь записать урл закрепленной новости. Для этого надо подвести курсор ко времени создания новости и нажать на ссылку.
Шаг 15
Теперь обновляем главную страницу группы. Наше графическое меню будет вверху соседствовать рядом с аватаром. А при нажатии на картинку, мы попадаем на внутреннюю страницу с меню из пяти пунктов.
www.designonstop.com
Как можно создать группу в контакте. Как создать группу «Вконтакте»?
Сегодня разберемся с вопросом — как создать группу в ВКонтакте быстро и красиво. Надеюсь данная пошаговая инструкция будет полезной и в ВК появится больше хороших сообществ.
Цель : создать не просто сообщество, а уже готовую группу к работе и раскрутке внутри Контакта. Поэтому проведем все необходимые для этого шаги.
Пошаговая инструкция 2016 :

Как создать группу в ВКонтакте
Для создания группы в ВКонтакте потребуется всего лишь 10 секунд! Однако в этом процессе есть некоторые нюансы, которые стоит учитывать в самом начале.
Группа имеет целый ряд преимуществ, где вы можете управлять доступом сообщества для других, иметь блок вначале группы, добавлять креативное меню и конечно же можно размещать товары.
Настройка группы в ВК
Благодаря правильной настройки группы ВК вы сможете получать дополнительные просмотры и потенциальных подписчиков из поиска по группам ВКонтакте, а так же из поисковых системах Google и Яндекс.
Основная настройка
1. Первое поле касается выбора правильного названия группы, оно должно быть в пределах 50 символов и отображать ключевую задумку. Название должно быть точным и лаконичным, отображая содержимое группы.
К примеру, наша группа будет о музыке, тогда переходим в поиск по группам и смотрим самое популярные группы в этом направлении. Это даст понять, что хочет слушать и видеть большинство людей в ВК.
Если посмотреть первые 50 групп, то станет видно, что большинство людей хотят слушать популярную и новую музыку. Поэтому можно сделать название «Новинки музыки 2016 | Самое популярное» .
2. Второе поле «Описание сообщества» должно быть заполнено, чуть-чуть на 150-200 символов. Где должно хотя бы раз повторяться слова «популярная» , «новая» , «музыка» . Это нужно для привлечения посетителей из поисковых систем.
Зачастую люди в поисковиках набирают такое словосочетание, как «популярная музыка ВКонтакте» , «Новинки музыки ВК» . А это дает шанс, что люди перейдут именно в вашу группу из поиска и подпишутся.
3. Существует 3 типа группы:
Открытая — где любой пользователь может подписаться на вашу группу;
Закрытая — где набор осуществляется по заявкам в группу и приглашениям от администраторов;
Частная — набор подписчиков ведется исключительно через приглашения администраторов.
Люди не охотно делают заявки в закрытую группу, поэтому лучше всего выбирать открытую. Таким образом вам удастся больше получить подписчиков.
4 . Выбираем url-адрес для группы. Нужно написать короткое и запоминающиеся название, которое будет схожим с названием группы. В моем случаем «new_popular_music» . Так же подошел бы вариант «novaja_pipularnaya_musica» .
Красивое оформление группы ВКонтакте (новое 2016)
Грамотная настройка группы помогает привлекать лишь внимание к сообществу, однако что бы народу понравилась группа, ее нужно красиво оформить и только тогда будет наплыв новых подписчиков.
Благодаря новым введением в оформление ВКонтакте 2016 года, теперь изменились размеры контента, а так же появилась возможность добавить обложку для группы. Но как лучше всего оформить группу?
Что лучше аватарка или обложка?

— это картинка, которая делает сообщество уникальным и запоминающимся и может даже вызывать желания подписаться, как на примере выше. Из аватара создается миниатюра для новостей и комментариев.
Размеры аватарки для группы могут быть от 200х300 до 200х500 (ширина х высота в пикселях). При этом миниатюра будет 200х200 (квадрат).

— это нововведение 2016 года, которое заменяет стандартный аватар группы. Обложка располагается на всю ширину вверху экрана (сделано для экономии места и акцентирование внимания на контенте).
Размер обложки может быть от 795х200 px до 1590×400 px (под экраны с повышенной четкостью). Однако миниатюра из обложки пока что не доступна.
Создания меню для группы ВКонтакте
Наверное вы замечали, что некоторые группы ВКонтакте имеют красивое графическое меню и конечно же хотели бы сделать такое же у себя в группе, но как его создать?
Для этого потребуются умения работы с графическим редактором, например PhotoShop. И правильно разметить размеры будущего меню (все зависит от количества пунктов в меню).
В любой случае для этого была написана отдельная статья — как создать меню для группы ВКонтакте , где вы более детально можете ознакомиться и сотворить его в своей группе.
И последним этапом нужно приступать к раскрутке группы ВКонтакте. Существует очень много способов о которых, вы так же можете узнать из отдельной статьи.
Все чаще появляются новые фишки в ВК, которые позволяют делать группу более эффектной и красивой. Надеюсь, что данная пошаговая инструкция поможет вам создать группу в ВКонтакте своей мечты!
Приветствую вас, дорогие читатели. Социальные сети уже давно вошли в нашу жизнь, поэтому всем владельцам абсолютно любого бизнеса, как традиционного, так и удалённого, просто жизненно необходимо вести их, чтобы быть успешными, поэтому сегодня мы поговорим о том, как создать группу в ВК.

ВКонтакте, несмотря на рост Одноклассников и Фейсбука, и даже несмотря на инстаграм, остаётся лидером по продвижению, этому есть простое объяснение.
Преимущества соц. сети ВКонтакте:
Разные сегменты аудитории.
Мы знаем, что в ОК основная аудитория — женщины старше 30 лет, преимущественно из регионов, на ФБ — наиболее обеспеченная аудитория, в Инстаграм — продвинутая молодёжь. ВК есть все эти сегменты от детей до банкиров.
Привычка покупать онлайн.
ВК у людей сформировано понимание онлайн-шоппинга, они с удовольствием покупают товары, прямо не выходя из любимой соц. сети, это так называемая автономная торговля, т. е. когда мы не переводим человека на внешние сайты.
Итак, нам нужно продавать через соц. сеть ВКонтакте, что для этого нужно делать?
Есть 2 вектора продвижения через ВК:
Создание и раскрутка своего сообщества.
Закупка рекламы в уже существующих.
Мы будем рассматривать оба варианта, а сегодня речь пойдёт о первом.
У многих здесь появляется вопрос — сколько их создавать: одно или несколько?
Сколько сообществ создавать для бизнеса?
В одних случаях нужно создавать одно, в других — несколько разных, здесь всё индивидуально и зависит от вашего бизнеса.
Чаще всего для одного бизнеса всё-таки лучше создавать одну группу или публичную страницу, какую из них лучше выбрать, разберём дальше. Например, если у вас туристическое агентство, то не нужно делать несколько сообществ под разные туры, например, «Туры в Египет», «Туры в Болгарию» и т. д., потому что их продвижение будет не таким эффективным, как если бы это было одно сообщество.
Нужно создавать несколько сообществ в следующих случаях:
Разная аудитория.
Если ваш продукт потребляют разные аудитории, например, если под вашим брендом действуют несколько бизнесов, здесь является ошибкой создать одно сообщество типа «Грузоперевозки по Перми и рефераты дёшево».
В данном случае нужно создавать отдельные сообщества, потому что это абсолютно разные предложения для разной аудитории и здесь нужен разный контент.
Если подписчик получает более 40 % контента, который не соответствует его интересам, то он выйдет из такого сообщества.
Двуязычный бизнес.
Если у вас есть интересы, например, не только в России, но и в странах СНГ, в таком случае нельзя вести одно сообщество на разных языках.
Разница между предложениями в разных регионах.
Например, так поступают провайдеры, предоставляющие интернет, так как у них в разных городах отличаются тарифы.
Очень насыщенная маркетинговая политика.
К примеру, магазин Wildberries, у него много подписчиков, магазин ведёт много активности, рекламируется, в таком случае можно выделять разные направления, они так и поступают, у них есть общее сообщество, есть отдельный паблик для продажи товаров для дома и группа с детскими товарами, также есть разделение по странам (Беларусь, Казахстан) и т. д.
Чем более прицельную информацию получает подписчик, тем выше вероятность, что он совершит целевое для нас действие.
Когда мы определились с необходимым количеством сообществ для развития вашего бизнеса, переходим непосредственно к его (их) созданию.
Как создать группу в ВКонтакте по шагам?
Шаг 1. Заходим на свою страничку ВКонтакте, выбираем в левом меню «Группы» и жмём кнопку «Создать сообщество».

Появляется такое окно.

Шаг 2. Придумываем название.
Советую выбирать лаконичное и запоминающееся название, которое будет привлекать внимание и раскрывать суть самой группы. В следующей статье я подробно расскажу о том, как правильно выбрать название, и вы сможете его скорректировать.
Шаг 3. Выбираем вид сообщества.
Что же выбрать группу, публичную страницу или мероприятие? На сегодняшний день разница между ними становится не так заметна, есть плюсы у первого, второго и третьего формата.
Ниже представлена таблица, в которой видно, чем различаются разные форматы.
Возможности Группа Публичная страница Мероприятие
Участники пишут на стене Нет
Есть возможность отключения этой функции
Участники могут «предложить новость» сообществу Нет Нет
Участники могут добавить новые фотоальбомы, видеозаписи, аудиозаписи, документы
Есть возможность отключения этой функции
Нет
Есть возможность отключения этой функции
Ограничение доступа к материалам сообщества
Можно настроить так, чтобы мог вступить любой желающий, чтобы вступали только по приглашению или подав заявку, и только по приглашению руководителей
Нет
Можно настроить, чтобы могли участвовать все пользователи или только приглашённые администратором
Блок с товарами, который отображается на главной странице сообщества Есть Есть Нет
Время начала и окончания мероприятия Нет Нет
Такой формат подходит, действительно, только для каких-то встреч, за день до начала вылезает напоминание о мероприятии
Отображение на личных страницах участников
Список групп отображается в личной информации, только если участник не скрыл его настройками приватности, в любом случае, никто его не просматривает
Если участник часто заходит в ваш паблик, то он появляется в топ-5 в блоке «Интересные страницы», там видна аватарка странички и больше шансов, что кто-то из его друзей увидит ваше сообщество и зайдёт в него
Список мероприятий отображается в личной информации, только если участник не скрыл его настройками приватности, в любом случае, никто его не просматривает
Приглашения в сообщество
Можно приглашать 40 друзей в день
Нет
Можно приглашать участников своих сообществ по 5000 в день
Подумайте и выберите то, что лучше подходит под ваш бизнес: группа или публичная страница. Здесь, конечно, ошибкой будет создать паблик типа «Эффективное лечение геморроя», потому что не каждый захочет, чтобы такое отображалось на его личной странице, в данном случае, нужно делать группу.
Мой совет — на начальном этапе создавайте группу, так вы сможете пригласить в неё своих друзей, а когда все те из них, кто захотел, вступят, то можете перевести группу в публичную страницу. Создатель сообщества может сменить его тип самостоятельно, не прибегая к запросам в тех. поддержку, в случае, если количество участников не превышает 10 000. Точно так же, как в случае перевода паблика в группу, менять тип сообщества разрешено не чаще 1 раза в месяц.
Шаг 4. Нажимаем кнопку «Создать сообщество».
Ваша группа ВКонтакте создана, и вы находитесь в меню «Редактирование информации».
Настройки группы
Название — оно у нас уже есть.
Описание сообщества — здесь пишем описание группы, указав чем она занимается.
Адрес страницы — меняем адрес на более красивый, чем тот набор цифр, что идёт по умолчанию, желательно делать его как можно короче, чтобы подписчики могли с лёгкостью запомнить его и найти вас.
Тематика сообщества — выберите из списка наиболее подходящую тематику и укажите возрастные ограничения.
Веб-сайт — вписываем адрес вашего веб-сайта, он будет отображаться на главной странице группы.
Фильтр комментариев — автоматически удаляет комментарии, содержащие мат или заданные вами слова.
Местоположение — указываем адрес, если у вас есть офис или у вас региональная группа, или вы хотите продвигать какой-то товар в определённом городе, например, если у вас магазин или вы делаете маникюр на дому.
Комната в Snapster — указываем, если она есть (там делятся фото, подобие Instagram).
Сообщения сообщества — при необходимости подключаем сообщения сообщества. Это очень удобная вещь, сообщения адресованы напрямую к сообществу, а отвечать на них могут все руководители. Подписчику не нужно искать администратора группы, которые зачастую скрывают себя из блока с контактами, чтобы задать вопрос. А администраторы не запутаются по какому из их нескольких сообществ задан вопрос. Чтобы на своей личной страничке сразу увидеть, что сообществу поступило сообщение, нужно добавить свою группу в левое меню.

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

Если у вас интернет-магазин, то подключаем «Товары», тогда карточки с созданными вами товарами будут отображаться на главной странице сообщества.
Поздравляю, теперь у вас есть своё сообщество ВКонтакте, следующее, что необходимо предпринять, это его .
Если вам что-то непонятно и остались вопросы, то задавайте их, пожалуйста, в комментариях, буду рада на них ответить. Также подписывайтесь на новости блога, чтобы не пропустить новые статьи.
Нет такого интернет пользователя, который не слышал бы о социальной сети вконтакте. Это довольно просто объяснить – вконтакте позволяет не только общаться с друзьями, находить единомышленников, просматривать видео и слушать музыку, но и создать собственные сообщества. Любой пользователь вконтакте может создать своё сообщество определённой тематики. Давайте разберемся, как создавать сообщества вконтакте?
Как создать сообщество вконтакте?
Первое, что нам потребуется, для создания сообщества – ввести логин и пароль и войти на свою страничку. Далее мы переходим на вкладку – «Группы» .
Справа вверху страницы вы увидите вкладку «Создать сообщество». После того, когда вы нажмете на неё — перед вами появится меню:

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

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

Перед вами пример, сделанный за пару секунд. Отнеситесь максимально ответственно к заполнению этого поля!
Тематика сообщества. Для чего нам нужно заполнять это поле? Каждое сообщество вк имеет определенную тематику, которая учитывается при поиске. Если мы решили создать группу « », не желательно выбирать тематику «Кулинария» или «Спорт». Идеальный вариант – «Развлечения».
Веб сайт. Если у вас есть веб сайт, вы можете указать ссылку на него. Все пользователи вашей группы смогут переходить на него после вашего посещения. У нас нет веб сайта, поэтому это поле мы оставим незаполненным.
Местоположение. В местоположении вы можете указать страну, город и даже улицу, на которой расположены.
Стена. Как мы помним на стене администраторы групп могут создать любые сообщения. В некоторых группах сами пользователи могут оставлять посты.

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

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

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

Аналогичным образом загружаем музыку, видео, документы и создаем обсуждения .
При заполнении текстовых постов стоит обращать внимание на их уникальность. Если ваша группа будет состоять полностью из неуникального контента, стать успешной и популярной она не сможет. тоже высоко ценится.
Любой пользователь вконтакте может создать собственную группу. Но мало кто понимает, как сложно заниматься её раскруткой. Не стоит думать, что пользователи сами начнут вступать в новое сообщество – вы должны самостоятельно их привлечь. Вконтакте существует тысячи групп – вы должны выделиться и проделать немалый труд, чтобы достичь успеха.
А вы уже создали себе сообщество?
Хочешь быть умнее, чем другие? Зарабатывать больше? Читай еще:
. Вы пробовали уже создавать их?
. Берите пока лежат.
. Реально ли?
Социальная сеть «Вконтакте» — популярнейший сервис, который ежедневно посещает до 50 миллионов человек. Активность во многом формируется за счёт популярных групп и официальных страниц, где публикуются новости, музыка, фильмы, фотографии и другой развлекательный и познавательный контент. Сервисы для автоматической публикации и программы для раскрутки позволяют минимизировать своё участие в этом процессе и тратить минимум времени на администрирование собственного ресурса.
Цели создания группы:
1. Продвижение товаров и услуг коммерческих организаций.
2. Поиск единомышленников и формирование объединений по интересам.
3. Создание корпоративного сообщества образовательного учреждения, компании, спортивного клуба.
4. Популяризация политических партий и общественных объединений.
5. Формирование обратной связи государственных органов и общества.
6. Извлечение прибыли за счёт раскрутки страницы и публикации рекламы.
7. Продвижение музыки, литературы и других видов творчества.
Процесс создания группы:
1. Кликните по вкладке «Мои группы» и нажмите «Создать сообщество».
2. Выберите вид сообщества и название. «Мероприятие» подходит для рекламирования разового события (концерт, выпускной вечер, поездка), «Публичная страница» — для презентации личности, компании, бренда, «Группа» — для остальных целей.
3. В дальнейшем, в зависимости от выбранной позиции, нужно ответить на дополнительные вопросы.
4. Именно класс «Группа» даёт создателю самые широкие возможности, поэтому стоит остановиться на ней. Вы сможете создать оригинальный дизайн, использовать другие полезные сервисы.
5. Укажите важные параметры: название, тематику, введите описание будущей группы. Выберите себе короткий адрес, который сделает страничку уникальной и упростит её поиски, если пользователь по каким-то причинам не сможет найти страничку. Не используйте спецсимволы в названии, так как в дальнейшем это усложнит поиск сообщества.
6. Активируйте необходимые модули (тип стены – открытая или закрытая, фотографии, видео- и аудиозаписи и другое). При необходимости, укажите веб-сайт и местоположение группы (это очень важно для продвижения коммерческой продукции и рекламы мероприятий).
8. Группа готова. Теперь Вы можете публиковать любые новости в ленте, добавить аудио- и видеозаписи, создать виртуальный каталог с помощью вставки новых фотоальбомов, назначить руководителей, приглашать в группу новых пользователей.
Продвижение группы
Своё сообщество можно продвигать несколькими способами:
1. Приглашение друзей. Раньше администратору была доступна такая опция, как рассылка приглашений случайным людям. Сейчас это запрещено из-за многочисленных злоупотреблений и спама. Однако выход есть – находить новых друзей и рекламировать сообщество среди них.
2. Покупка рекламы. Необходимо выбрать вкладку «Рекламировать сообщество», пополнить счёт, используя раздел «Бюджет», а затем – приступить к созданию объявления. Его можно привязать к определённому региону (страна, город), что идеально подходит для коммерческих групп.
3. Реклама в других сообществах. Популярные группы охотно рекламируют ссылки на своих коллег в новостной ленте.
Также можно использовать другие методы продвижения: вирусный маркетинг, СЕО-оптимизация (в настоящий момент группы с уникальным контентом хорошо раскручиваются в поисковых машинах), публикация видеоматериалов со ссылкой на Вашу страницу.
Создание собственного меню группы
Уникальный дизайн сообщества «Вконтакте» позволяет выделить его на фоне конкурентов и упростить навигацию по материалам группы. Однако эта задача требует несколько больше времени, а также установки программы – Photoshop.
1. Войдите в управление группой и сделайте добавление материалов ограниченным (только администраторы смогут выполнять это действие).
2. Теперь нужно создать картинку и с будущей навигацией и сохранить её в необходимом формате (GIF, JPEG).
3. Нарежьте картинку навигации на отдельные сегменты, каждый из которых станет гиперссылкой, с помощью инструмента «раскройка», а затем сохраните шаблон в формате GIF.
4. Если Вам лень использовать Photoshop или Вы не хотите устанавливать его на свой компьютер, скачайте готовые шаблоны, которых в интернете предостаточно.
5. Для примера возьмём универсальный шаблон, выполненный с помощью wiki-разметки. Его загрузка ещё проще и быстрее.
6. Нажмите «свежие новости» и выберите «Режим вики-разметки», а затем вставьте туда готовый код, взятый из шаблонного оформления.
7. Чтобы включить в код фотографии, нужно загрузить их в альбом, а затем вставить на нужное место ссылку.
Таким образом, группу в контакте можно создать всего за несколько часов работы, при этом тратить деньги на чужой труд совсем не обязательно. Вам доступны не только основные опции, но и собственный дизайн, который сделает сообщество уникальным и неповторимым. Ответы на любые вопросы можно найти в интернете и в социальной сети «Вконтакте»: очень удобно и просто.
Вы решили найти новых друзей через интернет, единомышленников в бизнесе или увлечение с помощью сообщества в социальной сети ВКонтакте, но совсем не знаете, как создать группу в контакте? Если вы думаете, что создание группы в контакте очень сложная процедура, то могу вас заверить, что вы ошибаетесь.
Чтобы в этом убедиться, давайте, на примере, разберемся с этим вопросом.
Итак, для начала вам нужно зайти на свою страницу в контакте. В вертикальном списке справа выбираете пункт «Мои группы».
Теперь обратите внимание на верхнюю правую часть страницы. Нажмите на строчку «Создать сообщество».
В открывшимся окне для создания сообщества, вам необходимо ввести её название. Назовите так, чтобы посетитель вашей группы сразу понял, какую полезную информацию он здесь найдёт.
Подтверждаете предыдущие действия нажатием кнопки «Создать сообщество».

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

Дальнейшие настройки пояснять не буду, думаю, что вы итак поймёте.
Теперь подбираете картинку под тематику нашей группы, чтобы сразу было визуально видно, про что наша группа.
Для этого в правом верхнем углу находите фразу «Загрузить фотографию» и нажимаете на неё.
Перед вами появится окно, где нажимаете «Выбрать файл». Картинка должна быть нужного формата: JPG, GIF или PNG.

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

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

Для того,чтобы сделать красивое графическое меню для группы или публичной страницы, вам понадобится картинка, на которой будет нарисовано меню целиком с пропорциями примерно 500*1000 пикселей и базовые навыки работы в Adobe Photoshop. Предположим, вы уже нарисовали своё меню – прямоугольную картинку с основными кнопками. Но как разместить его на странице ВКонтакте и сделать функциональным, то есть работающим по нажатию на определенную область? Откройте свой макет в Adobe Photoshop, при помощи инструмента нарезки (Slice tool) разрежьте картинку на несколько отдельных горизонтальных частей, каждая из которых будет кнопкой. Затем сохраните нарезанное изображение для интернета (Save – Save for Web), желательно в формате .jpg. Вы получите несколько отдельных картинок-кнопок, которые затем можно будет разместить на странице ВКонтакте. Первая часть работы сделана!
Теперь вам предстоит самая ответственная часть работы: верстка и оформление. Для того чтобы создать меню, необходимо обладать правами администратора в данном сообществе. Зайдите в свою группу, справа выберите пункт «Управление сообществом». Напротив пункта «Материалы» выставьте значение «ограниченные». Вернитесь на главную страницу, теперь под описанием сообщества появился дополнительный развертывающийся значок «Свежие новости». Подсветите его, затем выберите «редактировать». Откроется окно редактирования блока. В верхней его части кликните по пиктограмме «Добавить фотографию» и загрузите заранее подготовленные изображения. После загрузки распределите их в правильном порядке. Теперь кликните на каждое изображение по очереди и в поле «ссылка» введите адрес страницы, на которую требуется переадресация при нажатии. Но это еще не всё, при предпросмотре и сохранении окажется, что между изображениями есть значительные промежутки. Это необходимо исправить.
Кликните на пиктограмму с кавычками в правом верхнем углу меню редактирования страницы. Вы увидите, что ваши изображения имеют собственный код, который выглядит примерно так: [[photo169452_381609123|422px|page-6574936_174936]]. Чтобы убрать пробелы, добавьте специальный тег: nopadding, вписав его через точку с запятой после размера изображения. Результат должен выглядеть примерно так: [[photo169452_381609123|422px;nopadding;|page-6574936_174936]]. Повторите эту процедуру для всех картинок и сохраните готовое меню.
Красивое оформление группы Вконтакте – полезные рекомендации
Только что созданная группа Вконтакте — тусклое и ничем не примечательное место. Вряд ли кто-то захочет стать ее участником, ведь сообществ сейчас в сети существует великое множество на любой вкус и выбирать есть из чего.
Чтобы в вашу группу с охотой вступали новые посетители, необходимо ее грамотно оформить. Правильное и красивое оформление группы Вконтакте важно по нескольким причинам. Профессиональное оформление:
вызывает доверие;
побуждает к взаимовыгодному сотрудничеству;
способствует продажам вашего товара, услуг или продвижению сайта;
делает группу узнаваемой и запоминаемой.
Оформление можно разделить на текстовое и графическое. К первому пункту относится: название группы и ее описание. Графическое оформление включает в себя аватар и меню.
Как назвать сообщество
Название наравне с аватаром – это визитная карточка группы. Идеальный вариант, когда оно цепляет и хорошо запоминается. Посетитель, видя название, должен понимать, чему посвящена ваша группа. Чтобы быстрее подняться в топ, стоит добавлять в него подходящие ключевые слова, соответствующее вашей теме.
Подсмотреть конкурентные запросы можно в сервисе Яндекса wordstat.yandex.ru.
Грамотно составляем описание
Описание также должно привлекать внимание и быть полезным. Однако не делайте его слишком длинным. В социальные сети люди приходят в основном за отдыхом и развлечениями и напрягаться, читая длинные описания, мало у кого возникнет желание. Заинтригуйте посетителя, покажите сильные стороны своего проекта, которые выделяют его среди конкурентов.
Аватар – без него никуда
Стильное оформление сообщества Вконтакте немыслимо без графических элементов, в первую очередь, аватарки. Если в вашей группе нет аватара, вряд ли вообще в нее кто-то заглянет. Без яркого баннера страница выглядит унылой и заброшенной.
Миниатюра аватарки – первое, что бросается в глаза, когда ваша группа находится в поиске среди множества других подобных. А потому если хотите привлекать новых посетителей – аватар просто обязателен.
Однако мало просто поставить красивую картинку на аватар. Существуют рекомендации, каким он должен быть, чтобы потенциальные участники заинтересовались группой. Помещать сюда первую попавшуюся в интернете картинку не стоит. В первую очередь он должен отражать суть вашей сообщества, интересы, которые объединяют его участников. На аватарке неплохо сразу оставить призыв вступать в группу. А вот рекламные ссылки или логотип компании здесь будет больше отпугивать людей.

Также оформление зависит от возрастной категории вашей аудитории. Если ваши потенциальные участники – люди более старшего возраста, следует отдать предпочтение более солидному стилю.
Для тинэйджеров подбирайте молодежное креативное оформление сообщества. Ваши посетители должны с первого взгляда понимать, что группа создана именно для них.
Усложняем задачу – добавляем меню
Оформить красиво группу в Вконтакте поможет и графическое меню – это уже продвинутый уровень и встречается он не так и часто. Однако с ним страница выглядит более профессионально. Кроме того, меню облегчает навигацию посетителям по группе — всего лишь с помощью одного-двух кликов они оказываются в нужном разделе.
Особенно это касается сообществ, цель которых – продавать товары и услуги и продвигать компанию в сети. В таком случае в меню в обязательном порядке выносятся контакты, способы доставки и оплаты и каталог товаров, а также акции, если таковые имеются. В группе с развлекательным контентом меню – элемент необязательный.
Меню добавляется в разделе группы «Свежие новости». Чтобы этот пункт появился, необходимо включить в настройках отображение материалов. Сделать ли их открытыми либо ограниченными – на ваш выбор. После загрузки меню его необходимо закрепить наверху.
Если разбираетесь в графическом дизайне, создать аватарку и меню можно самостоятельно с помощью любого графического редактора, например, Photoshop. Также неплохо нужно разбираться в нюансах wiki разметки — освоить ее труда не составит.
Однако если с графическими программами вы не дружите и разбираться с разметкой желания нет, заказываем графические элементы у профессионалов – либо на одной из фрилансерских бирж, либо даже в тематических группах вк, где предлагают подобные услуги.
Дальнейшее оформление – это уже скорее наполнение полезным и интересным контентом. Альбомы с фотографиями, видео, статьи – чем интереснее будут материалы и чем чаще вы будете их добавлять, тем активнее будут привлекаться новые участники.
Принцип близости в визуальном дизайне
Принципы гештальта были открыты в первой половине 20-го века гештальт-психологами, которые пытались понять, как люди визуально воспринимают мир — в частности, как люди решают, являются ли определенные элементы частью мира. та же группа или нет. Эти принципы включают в себя близость, сходство и закрытость, которые важны в визуальном дизайне цифровых интерфейсов. Позже к первоначальному гештальт-списку было добавлено больше групповых принципов (таких как общая область).
Дизайн пользовательского интерфейса
в значительной степени зависит от близости и других принципов группировки, поскольку правильная интерпретация связанных элементов имеет решающее значение для успешного взаимодействия с интерфейсом.
Определение : Принцип близости гласит, что элементы, расположенные близко друг к другу, вероятно, будут восприниматься как часть одной и той же группы, обладающей схожими функциями или характеристиками.
Расположите связанные элементы рядом друг с другом
Близость — один из наиболее важных принципов группирования, который может подавлять конкурирующие визуальные признаки, такие как сходство цвета или формы.Практику размещения связанных элементов близко друг к другу и , разделяющих несвязанные элементы , можно увидеть почти повсюду в дизайне пользовательского интерфейса.
Пробел разделяет фигуры на две отдельные группы по принципу близости. Даже при включении разных фигур в каждую группу эти две группы все равно остаются четкими.
Использование различного количества пробелов для объединения или разделения элементов является ключом к передаче значимых группировок.Например, в области заголовка веб-сайта городского совета Веллингтона функция Search расположена в той же строке, что и основная навигация по сайту при просмотре на большом экране. Однако лишний пробел между основной навигацией и Search указывает на то, что они принадлежат к разным группам и, таким образом, имеют отличительные функции. Этот пробел имеет решающее значение для выделения функции Search из остальной части главного меню.
Веб-сайт городского совета Веллингтона, как видно на настольном мониторе: дополнительный пробел слева от кнопки Search отделяет его от остальной части основной навигации и идентифицирует его как другой тип функциональности, даже если он использует тот же шрифт обращение с основными категориями в меню навигации.
Однако на экранах меньшего размера поддержание этого интервала невозможно. Чтобы эти области не воспринимались как единая группа, Search сдвинут вверх, в сторону от основной навигации. (Да, другие аспекты этой конструкции могут быть дополнительно улучшены, например, группировка метки Search и соответствующего значка с использованием либо близости, либо общей области.)
На планшете недостаточно места на экране, чтобы поддерживать это разделение, поэтому, чтобы Search не выглядел как часть основной навигации, он был сдвинут вверх и сгруппирован с другими пунктами служебного меню.
Использование близости для создания значимых групп отражается даже при представлении основного текстового содержания: предложения группируются вместе в абзацы, разделенные сверху и снизу пробелами. Кроме того, пробелы вокруг хорошо продуманных заголовков сигнализируют, с какими абзацами они связаны — текст из соответствующего раздела обычно помещается ближе к заголовку, чем текст из предыдущего раздела.
(слева) Proximity определяет группы связанного текста (абзацы и разделы) и помогает сканировать.(Справа) Эти группы различимы даже без просмотра фактического текста.
Разделение на части применимо и к дизайну форм: когда связанные поля отображаются сгруппированными вместе, форма кажется более простой для сканирования и менее сложной для заполнения. Например, одна форма с 12 полями может показаться слишком сложной для заполнения, в то время как форма из 3 частей с 4 полями каждая кажется простой по сравнению. (Принцип близости применяется во многих отношениях в хорошем дизайне формы. Например, минимальное расстояние между выровненной по верхнему краю меткой и соответствующим ей полем формы делает эту взаимосвязь очевидной по сравнению с большим полем перед следующей парой метка-поле. .)
12 полей формы в одной большой группе (слева) кажутся более сложными, чем такое же количество полей, разбитых на три группы (справа). (Очевидно, предполагая, что группы значимы — например, информация о доставке в одной группе и информация о выставлении счетов в другой.)
С другой стороны, , объединяющие несвязанные элементы, могут скрыть их от пользователей. Например, на веб-сайте California EDD кнопка Добавить для перечисления информации о работодателе, необходимой для формы, скрыта среди несвязанных кнопок для перехода к этапу процесса Next , Сохранить как черновик и Отменить .При просмотре страницы пользователи могут смотреть только на один элемент в пределах воспринимаемой группы и использовать это, чтобы сделать суждение о том, какими должны быть другие элементы в этой группе . (Напротив, Предыдущий и Следующий связаны, поэтому их группировка повысила бы удобство использования.)
CA.gov: Кнопка Добавить была размещена в непосредственной близости от несвязанных кнопок, вдали от основной области формы, что затрудняло ее поиск.
Далекие элементы кажутся не связанными, их легко не заметить
Когда пользователи полностью пропускают ссылку, кнопку или фрагмент информации, даже если они находятся прямо перед ними, часто виновата близость (или, скорее, ее отсутствие).Поскольку элементы, разделенные пробелами, воспринимаются как менее связанные, удаленные элементы могут быть легко упущены из виду пользователями, ориентированными на задачи, которые ожидают, что вся соответствующая информация и интерактивные элементы будут размещены близко друг к другу. Такое поведение иногда называют «туннельным зрением»: пользователи выборочно обращают внимание на определенные области экрана по мере выполнения своей задачи и пропускают вещи «на виду», поскольку находятся за пределами этой целевой области.
Например, в наших исследованиях удобства использования мобильных устройств участники часто разочаровываются, когда приложения требуют от них создания учетной записи перед получением доступа к контенту.Однако во многих из этих проектов создание учетной записи можно пропустить — этот вариант просто трудно найти, потому что он расположен в верхнем углу страницы, вдали от основных призывов к действию.
Мобильное приложение Kayak: ссылка Skip представлена в верхнем левом углу экрана, вдали от основного контента и наиболее заметных призывов к действию. Такое размещение позволяет легко не заметить и заставить пользователей думать, что они должны войти в систему.
Точно так же приложение Hulu на Apple TV представляет инструкции о том, как полностью взаимодействовать с содержимым текущего экрана в правом нижнем углу экрана. экран, вдали от релевантного контента.Кроме того, текст закрывается фоном фотографии выбранного шоу. Это отсутствие близости заставило моего мужа поверить, что нет возможности получить доступ к экрану Details (где были перечислены другие эпизоды сезона) — к счастью, он попросил меня исправить его!
Hulu на Apple TV: инструкции для Нажмите и удерживайте: (для) Подробности представлены в правом нижнем углу экрана, вдали от информации о следующем эпизоде для просмотра.Такое расположение делает его незаметным, особенно на большом экране телевизора.
Близость может измениться в адаптивном дизайне
Обращение внимания на близость элементов особенно важно при разработке адаптивных макетов, поскольку эти группировки могут изменяться по мере адаптации к различным размерам экрана . Уменьшение масштаба до устройств меньшего размера может минимизировать расстояние между элементами или может раздвинуть элементы дальше друг от друга, разрушая отношения группировки.
Например, на странице Transport for London Driving на рабочем столе ссылки на информацию о зоне со сверхнизким уровнем выбросов и зоне с низким уровнем выбросов отображаются рядом в двух разных столбцах.Расположение этих двух ссылок в непосредственной близости позволяет пользователям легко просматривать и сравнивать их, чтобы решить, по какой из них они хотят щелкнуть. Однако на маленьких экранах эти ссылки отображаются далеко друг от друга, потому что два столбца расположены друг над другом, а не бок о бок. Такое неудачное размещение может привести к тому, что мобильные пользователи никогда не обнаружат второй тип зоны излучения.
Транспорт для Лондона: Информация о двух типах зон с низким уровнем выбросов отображается в непосредственной близости на большом экране (слева).На мобильном устройстве (справа) разделы, соответствующие двум зонам, были далеко друг от друга из-за того, как столбцы располагались друг над другом в адаптивном макете.
Заключение
Размещение связанных элементов в непосредственной близости и использование пробелов для создания значимых групп — основополагающий принцип визуального дизайна. Пользователи сосредоточены на задачах и могут сканировать страницы довольно быстро, поэтому визуальная наглядность этих группировок повышает удобство использования, помогая пользователям быстро найти и сосредоточиться только на тех элементах пользовательского интерфейса, которые больше всего связаны с их текущей задачей.
Узнайте больше о визуальном восприятии, его применении в дизайне пользовательского интерфейса и других принципах психологии в нашем учебном курсе «Человеческий разум и удобство использования».
Разработка графического интерфейса Swing в IDE NetBeans
Теперь, когда мы создали новый проект для нашего приложения, давайте займемся минутой, чтобы ознакомиться с интерфейсом GUI Builder.
Когда мы добавили контейнер JFrame, среда IDE открыла вновь созданную форму ContactEditorUI на вкладке «Редактор» с панелью инструментов, содержащей несколько кнопок, как показано на предыдущем рисунке.Форма ContactEditor открылась в представлении «Дизайн» GUI Builder, и три дополнительных окна автоматически появились по краям среды IDE, что позволяет вам перемещаться, организовывать и редактировать формы графического интерфейса пользователя по мере их создания.
Различные окна GUI Builder включают:
* Зона проектирования. * Главное окно GUI Builder для создания и редактирования форм графического интерфейса Java. Кнопка «Источник» на панели инструментов позволяет просматривать исходный код класса, кнопка «Дизайн» позволяет просматривать графическое представление компонентов графического интерфейса пользователя, кнопка «История» позволяет получить доступ к локальной истории изменений файла.Дополнительные кнопки панели инструментов обеспечивают удобный доступ к общим командам, таким как выбор между режимами «Выбор» и «Соединение», выравнивание компонентов, настройка поведения автоматического изменения размера компонентов и предварительный просмотр форм.
* Навигатор. * Обеспечивает представление всех компонентов, как визуальных, так и невизуальных, в вашем приложении в виде древовидной иерархии. Навигатор также обеспечивает визуальную обратную связь о том, какой компонент в дереве в настоящее время редактируется в GUI Builder, а также позволяет вам упорядочивать компоненты на доступных панелях.
* Палитра. * Настраиваемый список доступных компонентов, содержащий вкладки для компонентов JFC / Swing, AWT и JavaBeans, а также менеджеров компоновки. Кроме того, вы можете создавать, удалять и переупорядочивать категории, отображаемые в палитре, с помощью настройщика.
* Окно свойств. * Отображает свойства компонента, выбранного в данный момент в GUI Builder, окне навигатора, окне проектов или окне файлов.
Если вы нажмете кнопку «Источник», среда IDE отобразит исходный код Java приложения в редакторе с разделами кода, которые автоматически генерирует GUI Builder, обозначенными серыми областями (при выборе они становятся синими), называемыми защищенными блоками.Охраняемые блоки — это защищенные области, которые нельзя редактировать в режиме просмотра исходного кода. Вы можете редактировать код, отображаемый в белых областях редактора, только в режиме просмотра исходного кода. Если вам нужно внести изменения в код в защищенном блоке, нажатие кнопки «Дизайн» возвращает редактор IDE в GUI Builder, где вы можете внести необходимые изменения в форму. Когда вы сохраняете изменения, IDE обновляет источники файла.
Для опытных разработчиков доступен диспетчер палитры, который позволяет добавлять в палитру пользовательские компоненты из JAR-файлов, библиотек или других проектов.Чтобы добавить пользовательские компоненты через диспетчер палитры, выберите «Инструменты»> «Палитра»> «Компоненты Swing / AWT».
Как создать отличную графику без навыков дизайна
Запуганы дизайном? Ты не одинок. Написание и кодирование само по себе достаточно сложно; визуальный контент может казаться новой (и, честно говоря, подавляющей) территорией.
Но не бойтесь: вам не нужно иметь ученую степень или тысячи часов, проведенных в пакете Adobe, чтобы создавать привлекательные дизайны. При наличии нужных ресурсов и четкого плана каждый может создать привлекательное оформление для сообщения в блоге, твита, веб-сайта, приложения или другого проекта.Это означает, что вместо того, чтобы просить вашего дизайнера или нанимать фрилансера для разработки базовых изображений, вы можете сделать их самостоятельно.
Восхитительный дизайн начинается с самого необходимого. В этом руководстве рассматриваются основные элементы дизайна, включая линии, форму, цвет, текстуру и шрифт, а затем исследуются более сложные принципы, такие как баланс, контраст, ритм и пустое пространство. Мы научим вас, как они могут легко сочетаться друг с другом для создания великолепной графики, подходящей к вашему контенту.
Мы также рассмотрим инструменты и ресурсы, которые можно использовать для стимулирования творчества и более быстрого создания красивой графики.
Готовы превзойти свои дизайнерские навыки? Давайте начнем.
Основные элементы дизайна
Дизайн — это план расположения элементов таким образом, чтобы наилучшим образом достичь определенной цели.
Чарльз Имс, дизайнер
Дизайн — это не что-то загадочное, и его могут освоить только вундеркинды. Даже самый простой дизайн можно разбить на отдельные части или «элементы». Эти элементы включают линию, форму, цвет, текстуру и шрифт.
Дизайн — это просто «план расположения элементов таким образом, чтобы наилучшим образом достичь определенной цели», как сказал Чарльз Имс, самый влиятельный дизайнер ISDA 20-го века. Разбейте основные элементы дизайна на части, и вы сможете собрать из них любое количество творений.
Но будьте осторожны: если вы используете элементы дизайна произвольно, ваш дизайн тоже будет произвольным. Понимание того, как каждый элемент влияет на ваш дизайн — и их соответствующее использование — позволяет вам создавать что-то, что вызывает определенные эмоции, дополняет ваш контент и соответствует вашему бренду.
Давайте заложим фундамент, изучив основные элементы дизайна: линии, форму, цвет, текстуру и типографику.
Линия
Вы знаете, что такое линия: все, что соединяет две точки. Линии выполняют несколько важных функций в дизайне: разделяют контент и привлекают внимание к определенному месту.
Взгляните на домашнюю страницу MailChimp. Линия отделяет меню вверху (также известное как панель навигации) от центра страницы. Под основным разделом у нас есть еще одна линия, представляющая Mailchimp Pro.Этот линейный макет позволяет посетителю понять, что происходит.
Между тем, Digiday использует линии, чтобы привлечь ваше внимание к ключевым областям сайта. Благодаря всем окружающим линиям выделяется раздел «подписаться» на главной странице, что побуждает больше посетителей вводить свой адрес электронной почты.
Разные линии тоже вызывают разные чувства.
Горизонтальные линии вызывают чувство неподвижности и устойчивости (представьте себе солнце, медленно скользящее за горизонт).
Вертикальные линии , напротив, энергичны (изобразите настороженного, стоящего человека).
Если вы хотите создать ощущение драмы, используйте диагональных линий — они передают беспокойное, даже грубое ощущение движения.
Взгляните на целевую страницу Vibrant Composites в качестве примера. Он содержит два типа линий: вертикальные линии руки и диагональную линию в правом углу. Поскольку оба типа динамичны, эта домашняя страница кажется захватывающей и мощной.
Линии могут показаться упрощенным инструментом, но они имеют решающее значение для организации визуальной информации и задания тона дизайна.
Дополнительная литература:
Форма
Когда вы читаете слово «форма», вы, вероятно, думаете о квадрате или треугольнике. Это геометрических фигур . Но есть также естественные формы « органических «, которые имеют неправильную форму и часто содержат кривые (например, круги попадают в эту категорию, хотя технически они геометрически).Затем есть абстрактных фигур, которые узнаваемы, но не реалистичны (например, фигурка).
Подобно линиям, каждый тип формы производит различные эмоциональные эффекты. Геометрические формы предполагают структуру, контроль и порядок. С другой стороны, органические формы более удобны и дружелюбны. Абстрактные формы очень быстро передают информацию.
На домашней странице Visage используются чисто геометрические формы, поэтому она выглядит профессионально и надежно.
На домашней странице Basecamp, напротив, используются органические округлые формы, вызывающие тепло и детское любопытство.
Домашняя страница Lyft — хороший пример использования как органических, так и абстрактных форм. Круги приятные и безопасные, а значки помогают быстро и наглядно передать сообщение Lyft.
Когда вы разрабатываете что-то новое, не забывайте об основных формах — они обеспечивают основу для нашего взаимодействия в сети, а формы, которые вы выбираете, сообщают больше, чем кажется на первый взгляд.
Дополнительная литература:
Цвет
Психология и теория цвета чрезвычайно важны для маркетинга.В конце концов, люди решают, что они думают о продукте, в течение 90 секунд — и исследователи обнаружили, что до 90% этого суждения основывается исключительно на цвете. Кроме того, дальнейшие исследования показали, что потребители с большей вероятностью купят, если цвет кажется «подходящим» для бренда.
В конечном счете, у двух людей не будет одинаковой реакции на цвет: у всех нас есть личные предпочтения, уникальное происхождение и культурные влияния, которые влияют на то, что цвет означает для нас. Но есть общие тенденции, которые можно использовать.
Теплые цвета , такие как красный, оранжевый, желтый и их вариации, излучают страсть, тепло, счастье, силу и энергию.
Холодные цвета , включая синий, зеленый и фиолетовый, более спокойные и успокаивающие.
Нейтральные цвета включают белый, черный и серый. Технически, они не оказывают эмоционального воздействия (но я бы сказал, что «отсутствие эффекта» — это эффект сам по себе!)
Также существует вариация в пределах цветов. Например, вы, вероятно, думаете о зеленом охотнике как о более серьезном и мрачном, чем неоново-зеленый.К счастью, легко взглянуть на цвет и инстинктивно понять, какой эффект он произведет — по крайней мере, на людей с таким же опытом, как у вас.
Взгляните на сайт Prezi в поисках доказательств. Ярко-синий цвет выглядит энергичным, ярким и современным.
В резком контрасте (буквально) у нас есть домашняя страница Revelator. Как видите, простой переход с черного на белый оказывает огромное влияние на ваше восприятие продукта и бренда. Этот дизайн выглядит урбанистическим, мощным и насыщенным.
Цвет придаст вашему дизайну эффектность и эмоции, но увлечься этим тоже легко.Если вы создаете что-то для сопровождения текста, удобочитаемость — это цель №1: избегайте цветовых комбинаций, которые конфликтуют с другими элементами или отвлекают от вашего сообщения. Ваши глаза, как правило, являются хорошей лакмусовой бумажкой для определения цвета; если что-то не так, поиграйте с разными оттенками.
Дополнительная литература:
Текстура
Может показаться странным говорить о текстуре в цифровом дизайне — в конце концов, вы не можете прикоснуться к чему-либо через экран компьютера. Но вы все еще можете представить , как что-то будет ощущаться.
По словам авторов Smashing Magazine Джона Сэвиджа и Саймона Х., «Текстура становится неотъемлемой частью дизайна. Она может направлять взгляд пользователя и подчеркивать важность ключевых элементов».
Вы можете использовать текстуру в качестве фона, как это сделал Houndstooth Coffee.
Вы также можете добавлять текстуру через изображения.
На сайте, рекламирующем [Uncharted] ((http://uncharted.sunbrella.com/), документальный фильм об олимпийской сборной США по парусному спорту, текстурный аспект волн заставляет вас чувствовать себя частью сцены.
При этом плоский дизайн в настоящее время переживает возрождение, отказавшись от текстуры, падающих теней, градиентов и всего, что делает дизайн трехмерным. Вместо этого они используют простые иллюстрации и значки, двухмерные фигуры и яркие цвета.
Этот минимализм может показаться освежающим и современным.
Например, посмотрите целевую страницу Make This Year. Благодаря анимации набора текста и яркой цветовой комбинации, этот дизайн определенно не требует текстуры, чтобы сделать его интересным.
Текстура добавляет глубину дизайну, хотя при смешивании материалов следует соблюдать осторожность. Объединение противоречивых текстур, таких как дерево и стеклянные поверхности, может превратить физическую связь с вашим искусством в более неприятное ощущение.
Дополнительная литература:
Типографика
Распространение вашего сообщения по вопросам. И типографика — или искусство и техника расположения букв и символов — имеет огромное влияние на то, понимает ли ваша аудитория это сообщение.
Во-первых, давайте проясним разницу между «гарнитуром» и «шрифтом». Думайте о каждом шрифте как о семействе, а о шрифтах как о отдельных членах этого семейства. Например, в гарнитуре (или семействе) Helvetica шрифты (или члены семейства) включают Helvetica Regular, Helvetica Light, Helvetica Bold, Helvetica Compressed и Helvetica Rounded.
Helvetica Light, Roman и Oblique
Можно также классифицировать гарнитуры шрифтов. Хотя существует несколько вариантов, два наиболее важных — это шрифт с засечками и без засечек.
Serif относится к гарнитурам с небольшими декоративными отметками, отходящими от каждой буквы. Популярные шрифты с засечками включают Times New Roman, Rockwell, Georgia и Baskerville. Шрифты с засечками обычно считаются более легкими для чтения, поскольку отдельные буквы более различимы, и они также кажутся более традиционными или классическими.
Sans serif включает шрифты, на которых, как вы уже догадались, нет мелких декоративных знаков. В это семейство входят Helvetica, Arial, Futura и Franklin Gothic.Эти шрифты кажутся чище и современнее, но их труднее читать.
Есть также моноширинных шрифтов , включая Courier, Courier New и Lucida Console. Каждый символ моноширинного шрифта имеет одинаковую ширину. Они выглядят как машинописный текст и обычно используются для кода, сценариев и в некоторых письменных приложениях, особенно для первого черновика. Однако они могут быть хуже для глаз, чем пропорциональные шрифты, поэтому они обычно не используются для длинных фрагментов текста в дизайне.
Также полезно понимать другие факторы, влияющие на читаемость вашего текста:
Отслеживание : сколько места между буквами. Чем больше места, тем удобочитаемее будет ваш шрифт.
Ведущий : сколько места существует между каждой строкой. Используйте ведущее значение, которое в 1,25–1,5 раза больше размера шрифта. Размер : Размер шрифта — это сложный вопрос, поскольку он меняется в зависимости от того, какое устройство использует кто-то, насколько велик экран, примененные настройки и т. Д.Якоб Нильсен, эксперт по удобству использования в Интернете, предлагает использовать размер шрифта не менее 10 пунктов или, возможно, увеличить его до 12 пунктов для лучшей читаемости.
Иерархия : демонстрирует относительную важность каждой части информации. Вы можете создать иерархию с помощью шкалы — заметили, что заголовок этого сообщения больше моего имени внизу? Это потому, что , о чем контент, вероятно, больше заботит вас, чем , кто его написал . Традиционно заголовки имеют наибольший размер шрифта, за ними следуют подзаголовки, за которыми следует текст.
Толщина : вы также можете создать иерархию, используя различную толщину шрифта. Толщина шрифта описывает толщину шрифта и обычно описывается как более светлый, нормальный, полужирный или более жирный. В целом, более легкие веса выглядят более утонченными, изящными и современными, в то время как тяжелые веса передают мощь и силу. Чтобы увидеть, как изменение толщины шрифта влияет на его внешний вид, попробуйте этот редактор кода.
Стиль : Как и вес, стиль шрифта добавляет акцента.«Вертикальный» или «нормальный» является наиболее распространенным, за ним следует «курсив». Наклонный шрифт, похожий на курсив, встречается реже, поскольку некоторые веб-браузеры его не поддерживают.
Длина строки : Как следует из названия, длина строки определяет ширину текста по горизонтали. После подробного исследования того, как люди читают, оптимальная длина строки кажется от 45 до 85 символов.
Так же, как вино и сыр, одни шрифты работают вместе лучше, чем другие.Шрифт с засечками и без засечек — это классическое сочетание, но вы определенно можете поиграть.
Typewolf — тщательно подобранная коллекция «шрифтов в дикой природе» — отличный источник вдохновения для подборки шрифтов. Typefinder также очень полезен: ответьте на ряд вопросов о том, где вы будете использовать этот шрифт и какой стиль вам нравится (например, «веб», «современный», «выразительный» и т. Д.), И получите предложения по соответствию.
И если вы хотите по-настоящему погрузиться в типографику, вам понравится Typeface.Это приложение для Mac хранит все ваши шрифты, поэтому вы можете сравнивать их как бок о бок, так и через наложения. Вы сможете уловить даже самые тонкие различия.
Дополнительная литература:
Основные принципы дизайна
Теперь, когда вы понимаете основные строительные блоки проекта, давайте рассмотрим рекомендации по их объединению. Вот основные принципы, которые помогут вам создать последовательный и привлекательный дизайн: баланс, контраст, ритм и пространство.
Balance
Мы всегда стремимся к балансу: в работе и жизни, в диете и физических упражнениях и, конечно же, в дизайне.
Для визуального баланса представьте вертикальную линию, проходящую через центр вашего дизайна. Для симметрии по обе стороны от линии должно быть одинаковое количество «материала».
У этого «материала» есть технический термин: «визуальный вес». Вы должны интуитивно понимать, какие элементы имеют больший визуальный вес, чем другие; например, чем крупнее что-то, тем тяжелее на ощупь.
Мы видим принцип баланса в действии на домашней странице Everlane. Невидимая линия начинается между первой буквой «E» и «L» в Everlane и отделяет модель слева от текста справа. Она уравновешивает текст, создавая визуальную симметрию, которую так жаждут наши глаза.
Еще один пример баланса можно увидеть в еженедельной рассылке новостей InVision по электронной почте. Посмотрите, как фокус дизайна сужается, когда ваш взгляд движется вниз по странице. Верхний заголовок уравновешивается изображением ниже, которое уравновешивается заголовком, который уравновешивается подзаголовком, что приводит вас прямо к кнопке с призывом к действию.
Everlane и InVision используют вертикальную и горизонтальную балансировку соответственно. Но баланс не обязательно должен быть вертикальным.
Посетите домашнюю страницу Webydo для подтверждения. Разделите эту страницу между двумя iPad, и вы получите два почти одинаковых треугольника. (О, и помните, как диагональные линии передают энергию и волнение? Вы определенно можете уловить эту атмосферу здесь!)
Хотите знать, как выглядит отсутствие баланса? Правительство США славится своим непригодным для использования и устаревшим дизайном и, к сожалению, MyMoney.gov оправдывает эту репутацию.
Как видите, столбец «Основные моменты» простирается вдвое дальше по странице, чем вращающаяся карусель изображений, что делает всю страницу однобокой.
Этот сайт также нарушает принцип визуальной симметрии, так как невозможно разделить пополам поровну.
Дополнительная литература:
Контраст
Расположение разнородных элементов рядом или рядом друг с другом позволяет выявить их различия. Вот почему фотографии до и после настолько эффективны — вы сразу видите, насколько сильно изменился человек.
Контрастом можно не только выделить различия, но и сделать дизайн более приятным для глаз. Представьте, что вы пытаетесь прочитать светло-серый текст на белом фоне. Было бы довольно сложно, правда? Но добавление немного большего количества черного к серому делает его более разборчивым.
Показательный пример: монетный двор.
Черный текст на белом — популярное сочетание именно по этой причине (к тому же оно выглядит современным и чистым). Однако, если вы хотите создать разные высококонтрастные пары, используйте этот инструмент проверки контрастности — после того, как вы подключите два цвета, он скажет вам, насколько читабельной будет эта пара.
Дополнительная литература:
Rhythm
Как и при прослушивании хорошей песни, взгляд на «ритмичный» дизайн заставит вашу аудиторию почувствовать себя взволнованной, заинтересованной и непринужденной.
К счастью, создать ритм легко: думайте о своем дизайне как о серии повторяющихся блоков. Не только каждый блок должен быть похож, но и каждый элемент каждого блока должен повторяться.
Чтобы показать, что я имею в виду, вот домашняя страница Product Hunt. Раздел продуктов «Tech» дублируется разделом «Games» внизу.Если вы продолжите прокрутку, вы найдете разделы «Подкасты» и «Книги» с одинаковым форматом.
Дизайнеры не только повторили общий формат, но и повторили шрифт, размер изображения, интервал, параметры навигации, варианты взаимодействия и значки. В результате интерфейс невероятно прост для прокрутки — даже немного гипнотизирует. Вы можете создать ритм, повторно используя элементы дизайна, от макета до значков.
Сайт Valio Conference 2016 в равной степени завораживает, но по другой причине: карточки с биографическими данными выступающих накладываются друг на друга по схеме слева направо и слева направо.Этот визуальный прием буквально заставляет ваши глаза плясать из стороны в сторону страницы.
Вывод: установка и соблюдение шаблона для вашего макета позволяет вашей аудитории предугадывать, где будет находиться контент, еще до того, как они его увидят.
Дополнительная литература:
Пробел
Каждый раз, когда вы видите пустую или незаполненную часть дизайна, вы смотрите на пустое пространство. Белое пространство (также известное как отрицательное пространство) относится ко всему, что находится вокруг других элементов дизайна и между ними.И не думайте о пустом пространстве как о «потраченном впустую» пространстве; как объяснил известный типограф Ян Чихольд, «пустое пространство следует рассматривать как активный элемент, а не как пассивный фон».
Пустое пространство дает другим элементам на странице «пространство для дыхания». Он позволяет выделить наиболее важную информацию, повысить удобочитаемость и создать ощущение упорядоченности и простоты.
Домашняя страница Clio показывает, насколько эффективным может быть белое пространство. Обратите внимание, насколько освежающе чиста эта страница, и как ваши глаза сразу же обращаются к двум блокам текста.
Poppies Flowers также использует достаточно свободного места на своем сайте.
Как видите, пустое пространство не обязательно должно быть белым . Это любая часть дизайна, которая не привлекает ваше внимание — например, мелкий фон в этом примере, который притягивает взгляд к центральным элементам и тексту.
Дополнительная литература:
Как быстро создавать эффективный дизайн
Теперь, когда вы ознакомились с основными принципами, вы можете применять их для создания графики для своего блога, информационного бюллетеня, веб-сайта и т. Д.
Шаг 1. Выберите фон
Хорошо подобранный фон необходим для создания отличной графики. В конце концов, ваш фон получает больше визуальной реальности, чем любая другая часть вашего дизайна, плюс, правильный вариант подскажет вашей аудитории, чего ожидать от вашего контента.
Для наших целей существует два основных типа фонов: изображения и сплошные цвета.
Изображения
Будьте разборчивы при поиске фоновой фотографии. По словам Нила Пателя, случайно выбранные стоковые фотографии получают наименьшее количество репостов в социальных сетях, чем любой визуальный элемент блога.Итак, убедитесь, что тот, который вы выберете, точно соответствует вашей теме или теме.
Он должен вызывать правильные эмоции и ассоциации, которые вы можете определить, используя принципы дизайна.
Например, если вам нужен визуальный элемент для сообщения в блоге «37 умственных приемов для мгновенной безмятежности», вы можете поискать изображения с горизонтальными линиями, органическими формами, холодными цветами, небольшим количеством белого пространства и сильной визуальной симметрией. Каждый из этих элементов вызывает чувство спокойствия — эмоцию, которая идеально соответствует вашей теме.
Это изображение горного хребта было бы отличным выбором.
Где искать изображения
Вы, вероятно, не хотите взбираться на гору и покупать модную камеру только для того, чтобы сделать снимок для своего сообщения в блоге. К счастью, есть много ресурсов для бесплатных высококачественных стоковых фотографий.
Альбумариум содержит тысячи красивых изображений для частного и коммерческого использования. Это особенно хорошо для фотографий людей без лишних слов.
Death to the Stock Photo — это информационный бюллетень по электронной почте, который ежемесячно отправляет 10 новых изображений в ваш почтовый ящик.Выборки созданы для творческих людей, поэтому здесь много офисных и рабочих картинок.
Unsplash каждые 10 дней добавляет в свою коллекцию 10 новых фотографий с высоким разрешением. Создав учетную запись, вы можете создавать коллекции, что очень удобно, когда вам нужно найти несколько изображений для публикации или серии. Кроме того, вы можете создать коллекцию «будущего использования» для всех фотографий, которые случайным образом бросаются в глаза.
Гратистография — отличный, но относительно менее известный сайт для стоковых фотографий.Поскольку он не пользуется большой популярностью, вам не нужно беспокоиться о том, что выбранное изображение появится на восьми других сайтах.
New Old Stock хранит старинные фотографии, которые являются частью общественного достояния. Это означает, что вы можете получить олдскульный вид и использовать изображения для чего угодно — без указания авторства.
Если вы ищете универсальный магазин, обратите внимание на Pexels. В настоящее время он содержит более 10 000 стоковых фотографий (в том числе многие из Unsplash, Death to the Stock Photo и Gratistography), плюс около 1 500 новых добавляются каждый месяц.Воспользуйтесь преимуществами мощных фильтров поиска: вы можете исключить слово, поставив перед ним тире (например, «офис — люди»), или выполнить поиск по цвету, включив «цвет:», за которым следует название цвета (например, «офис» цвет: красный «).
Чтобы узнать о последних сайтах стоковых фотографий, следите за коллекцией стоковых фотографий на Product Hunt. Также стоит добавить в закладки: Дастин Сенос, бывший руководитель отдела дизайна Medium, ведет постоянный список источников стоковых фотографий.
Сплошные цвета
Сплошные цвета фона могут быть проще, чем изображения, но они не менее полезны.В конце концов, если вы хотите включить несколько значков или строк текста, эти элементы могут быть затенены фоном фотографии. С другой стороны, однотонный фон привлечет внимание аудитории именно туда, куда вы хотите.
При выборе определенного цвета помните о «настроении», которое создает каждый цвет. Вам нужны цвета, которые соответствуют как вашему контенту, так и бренду.
Help Scout отлично справился с этим. Его команда использует яркий монохромный фон для визуальных эффектов:
Эти цвета кажутся энергичными, простыми и даже игривыми, что отражает миссию Help Scout — сделать обслуживание клиентов приятным.Также посмотрите, насколько четко сплошные цвета выделяются на иллюстрациях.
Вместо того, чтобы выбирать цвета на основе их имени в Pantone (например, небесно-голубой, фиолетовый, кирпично-красный и другие названия цветов, к которым вы можете привыкнуть по кусочкам краски или образцам ткани), вам следует выбирать их по шестнадцатеричному коду.
Шестнадцатеричный код — это, по сути, числовое представление цвета. Например, шестнадцатеричный код Pantone Dark Blue C — # 00239c .
Преимущество шестнадцатеричных кодов в том, что они выглядят одинаково независимо от того, какой браузер, устройство или дисплей использует ваша аудитория.Это особенно важно для цветов, которые вы будете использовать снова и снова, например для цветов вашего бренда.
Где найти цвета
Цветовая палитра Google включает сотни основных и акцентных цветов, которые созданы для гармоничного сочетания. Google рекомендует выбрать основной основной цвет, например «Индиго» (или # 3F51B5), и использовать его в качестве основного цвета. Затем, если вы хотите добавить больше цветов, вы можете использовать предложенные акценты.
Если вы уже знаете, какой цвет Pantone вам нужен для своего дизайна, попробуйте rgb.к. Этот инструмент позволяет искать шестнадцатеричный код любого цвета в библиотеке Pantone. Если вы хотите сравнить несколько цветов, чтобы увидеть, насколько хорошо они будут выглядеть вместе, используйте Color Hex, который позволяет создавать и сохранять цветовые палитры.
В вашем арсенале также должны быть Coolors. Этот сайт случайным образом генерирует красивые цветовые палитры, которые вы можете использовать для оптовой продажи или настроить по своему вкусу. Более того, он создаст цветовые палитры из любого загружаемого вами изображения.
Наконец, вы можете использовать Image Color Summarizer.Это бесплатная услуга, которая обрабатывает ваше изображение и определяет его средний цветовой оттенок, насыщенность и ценность, а также наиболее характерные цвета изображения и то, как человек мог бы их описать (лаванда, золото и т. Д.). Определенно удобно для получения объективного представления о том, насколько визуально брендовый имидж.
Шаг 2. Выберите инструмент
После того, как вы выбрали фон, пора открыть инструмент дизайна. Эти приложения варьируются от довольно простых, как Pablo, до чрезвычайно мощных, как Photoshop.Инструмент для работы зависит от того, насколько сложной будет ваша графика.
Pablo by Buffer — один из самых простых вариантов. Вы можете импортировать собственное изображение или выбрать одно из библиотеки Buffer из 50 000 стоковых фотографий.) Поскольку Buffer предоставляет только три шаблона разных размеров (высокий, квадратный или широкий), это отличный выбор для графики в социальных сетях. Однако, если вы хотите настроить размеры визуального элемента или использовать сплошной цвет в качестве фона, рассмотрите другой инструмент.
Designfeed, еще одно приложение для создания графики, похоже на то, что Пабло поднял до 11. Загрузите свое изображение, введите до трех уровней текста (заголовок, подзаголовок и кнопка) и выберите размер, оптимизированный для платформы (Facebook, Tumblr, Pinterest и др.).
Приложение создает несколько версий вашего изображения. Если что-то бросается в глаза, вы можете мгновенно поделиться им, сохранить или настроить в соответствии с вашими предпочтениями. А если вы не копаетесь ни в одном из дизайнов, просто продолжайте прокручивать — Designfeed будет выпускать неограниченное количество вариантов.
Если вам нужно изображение для твита, попробуйте Spruce. Как и другие инструменты, он позволяет загружать изображения, добавлять и стилизовать текст, а также загружать или делиться результатом. Но Spruce специально предназначен для Twitter, поэтому он соответствующим образом изменяет размер ваших изображений.
Stencil предлагает немного больше гибкости: есть 34 предустановки размера изображения (включая параметры для социальных сетей, рекламы и баннеров), более 200 000 бесплатных значков и графики, а также несколько фотофильтров. Да, и Stencil также позволяет использовать однотонный фон.
Если вы выходите за рамки базовой графики, Canva — лучший выбор. Он загружен шаблонами практически для любого мыслимого дизайна — от эскизов YouTube и обложек для Kindle до фотографий в Google+ и графики Tumblr.
У Canva более миллиона стоковых фотографий, но большинство из них стоит 1 доллар. К счастью, вы также можете загружать свои собственные фотографии.
В отличие от других инструментов, Canva позволяет добавлять бесконечное количество фотографий в визуализацию. Это отличная функция для создания фотоколлажей; Кроме того, эта функция позволяет вам придать изображениям особый вид, который, возможно, уже используется в множестве других блогов.
Piktochart — это одна ступенька лестницы сложности. Существует четыре основных категории графики — инфографика, отчеты, презентации и плакаты — и множество шаблонов для каждой.
Вероятно, вы больше всего будете использовать Piktochart для создания инфографики. Однако, если вы хотите использовать этот инструмент для создания других визуальных ресурсов (таких как заголовки блогов, сообщения в социальных сетях и баннеры информационных бюллетеней), выберите шаблон из списка плакатов и задайте ему индивидуальные размеры.
Как и в Canva, вы можете использовать однотонный, узорчатый или фото-фон.Однако Piktochart предлагает гораздо больше бесплатных вариантов фона, чем Canva, что является хорошим преимуществом, когда вы создаете контент на лету.
Если другие варианты, которые я упомянул, варьируются по функциональности от велосипедов до мотоциклов, Photoshop был бы вашим Corvette. Вы можете использовать его для создания графики, но это также отличный инструмент для редактирования фотографий, создания веб-страниц, работы с видео и многого другого.
Поскольку Photoshop довольно сложен и требует крутого обучения — и начинается с 10 долларов в месяц, — я бы не рекомендовал его, если вас не интересуют его другие варианты использования.
Но, допустим, да. Процесс такой же: загрузите изображение, затем (при желании) примените фильтры. Этот учебник Adobe по фильтрам станет хорошей стартовой площадкой.
Если ваша основная цель — веб-дизайн, а не фотография, обратите внимание на Sketch. Он предназначен для создания макетов интерфейса и работы с фигурами и может лучше соответствовать графическому стилю вашего сайта.
Шаг 3. Выберите надстройки
Тип и стиль шрифта
Самая простая графика, которую только можно себе представить, — это фон + текст.
Когда вы выбираете, какие шрифты использовать, нужно помнить о нескольких вещах: где будет жить этот рисунок и какие шрифты будут вокруг него?
Допустим, вы разрабатываете заголовок для своей электронной рассылки. Если в вашем информационном бюллетене используется Lucida Grande (без засечек), вам следует выбрать дополнительный шрифт, например Garamond (шрифт с засечками).
Вам нужна не только внешняя согласованность: также важно, чтобы шрифты в вашей графике не конфликтовали.
Если вы не хотите играть с парами шрифтов, выберите один шрифт и используйте его для всего текста. Вы можете создать визуальную иерархию, увеличив более важный текст (например, заголовок); выделение жирным шрифтом, курсивом или подчеркиванием; или заглавными буквами.
Можно добавить еще один шрифт в микс, но остановимся на двух. А если вы не уверены, с какими шрифтами сочетать, выберите классическую комбинацию шрифтов с засечками для заголовка и без засечек для основного текста. (Вы также можете выбрать один шрифт и посмотреть, какие пары рекомендует Google Fonts.)
Вот что я сделал для этого рисунка. После того, как я выбрал Raleway в качестве заголовка, я просмотрел предложенные пары и остановился на Open Sans.
Значки
Когда вы пытаетесь создать визуальное резюме или сделать свой дизайн более привлекательным, значки работают очень хорошо. Но они, как правило, выглядят неуместно или заняты поверх фоновых фотографий, поэтому используйте их только на сплошном фоне.
Некоторые инструменты редактирования (например, Canva, Piktochart и Stencil) имеют встроенные библиотеки значков.Однако, если вы используете Pablo или Photoshop или вам не нравятся какие-либо доступные варианты, есть несколько высококачественных ресурсов значков.
Noun Project, который позволяет загружать сколько угодно значков за 9,99 долларов в месяц (примечание: вы можете использовать большинство значков бесплатно, если вы укажете автора). Кроме того, вы можете подписаться на Icon Finder. Это примерно такая же цена, но вы ограничены 25 загрузками в месяц.
Бесплатные наборы значков Smashing Magazine также очень удобны.Чтобы отсортировать параметры и найти значок, который можно использовать, потребуется некоторое время, но они качественные и бесплатные!
Разное
Окружение текста геометрической формой — это быстрый и простой способ придать вашему дизайну профессиональный вид.
Это также удобно, когда вам нужно сделать копию более разборчивой.
(Вы не сможете добавлять геометрические фигуры в Pablo или Designfeed, поэтому, если вы хотите использовать этот эффект, воспользуйтесь другим инструментом.)
Другой вариант — загрузить логотип вашего бренда.Хорошие дизайны иногда становятся вирусными, и если вы создали фантастическую инфографику или вдохновляющие цитаты, вы должны заслужить это признание. Кроме того, наличие незаметных водяных знаков на всей вашей графике помогает добиться визуальной согласованности.
Возможно, у вас нет прозрачной версии вашего логотипа. К счастью, вы можете создать его в Photoshop или Canva for Work.
Изучение дизайна дальше
Если вы хотите углубиться в мир дизайна, эти ресурсы являются одними из лучших, которые помогут вам начать работу:
Дизайн для основателей : эта коллекция из более чем 55 статей о дизайне нацелена на основателей, но любой, кто только начинает заниматься дизайном, извлечет выгоду из его тщательного изучения веб-дизайна.
Подводные камни дизайна : Подпишитесь на эту бесплатную рассылку по электронной почте, чтобы избежать «ошибок дизайнера n00b».
Designer Mill : воспользуйтесь потрясающими бесплатными предложениями, от значков и бесплатных шрифтов до шаблонов Illustrator и Sketch.
Crayon : Этот сайт, специально разработанный для маркетологов, содержит более 20 миллионов дизайнов, включая цены, команды, вакансии и пробные страницы.
GoodUI : сборник из 51 принципа интерфейса, обеспечивающий высокий коэффициент конверсии.Музыка для ушей каждого маркетолога!
Дизайн для стартапа : Этот набор адаптирован к базовым потребностям стартапа.
Вы сделали это — вы знаете основы дизайна и готовы приступить к созданию собственной великолепной графики. Совместите это с контентом, и вы получите потрясающую комбинацию. Вот несколько других руководств по Zapier, которые помогут вам создавать контент, создавать графику и превращать их в сообщения в блогах и книги.
Что такое визуальный дизайн? | Фонд дизайна взаимодействия (IxDF)
Визуальный дизайн — это создание и согласование общей эстетики продукта.Чтобы создать эстетичный стиль веб-сайта или приложения, мы работаем с основными элементами визуального дизайна, упорядочивая их в соответствии с принципами дизайна. Эти элементы и принципы вместе образуют строительные блоки визуального дизайна, и четкое их понимание имеет решающее значение при создании визуального дизайна любого продукта.
Здесь мы познакомим вас с элементами визуального дизайна: линия, форма, отрицательное / пустое пространство, объем, значение, цвет и текстура. В то время как тщательное изучение каждого элемента обычно не требуется в вашей повседневной работе в качестве дизайнера, принципы дизайна — как разместить элементы вместе для оптимального построения страниц и экранов приложений — играют решающую роль в вашей роли.Изучение того, как достичь единства, гештальта, иерархии, баланса, контраста, масштаба, доминирования и сходства, будет вознаграждать вас снова и снова. Здесь мы также покажем вам, как вам следует подумать о размещении этих незаменимых визуальных элементов, чтобы добиться максимального эффекта. Итак, приступим.
Элементы визуального дизайна
Любой продукт — от программных продуктов, таких как веб-сайты и приложения, до аппаратных продуктов, таких как тостеры и фены, — можно разбить на фундаментальные элементы визуального дизайна, как описано Аланом Хашимото, доцентом графического дизайна и компьютерное искусство в Университете штата Юта, а также Майк Клейтон, директор и доцент кафедры компьютерной графики Университета воплощенного слова, в их книге Основы визуального дизайна: цифровой подход .Эти элементы являются основными инструментами, которые мы, визуальные дизайнеры, используем в нашей повседневной работе, и их базовое понимание, безусловно, является необходимым условием для работы.
Линия
Линии — это штрихи, соединяющие две точки, и самый основной элемент визуального дизайна. Мы можем использовать их для создания форм, а когда мы их повторяем, мы можем формировать узоры, создающие текстуры.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Линия соединяет две точки и является самым простым элементом дизайна. Иначе говоря, в мире дизайна вы не сможете разобрать что-либо ниже одномерного объекта. (В науке можно, но это уже другая история.)
Несмотря на простоту, линии могут обладать большим разнообразием свойств, которые позволяют нам передавать множество выражений. Например, линии могут быть толстыми или тонкими, прямыми или изогнутыми, иметь одинаковую ширину или сужаться, быть геометрическими (т.д., выглядят так, как будто они нарисованы линейкой или циркулем) или органическими (т.е. выглядят так, как будто они нарисованы от руки).
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Линии просты, но могут передавать разные эмоции, используя разные свойства.
Линия также может подразумеваться: то есть предлагал , образуя невидимую связь между другими элементами.Например, в логотипе Interaction Design Foundation слова «Interaction Design Foundation» вокруг дерева соединяются, образуя предполагаемую полукруглую линию.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Слова «Interaction Design Foundation» образуют подразумеваемую полукруглую линию в нашем логотипе.
Форма
Фигуры — это автономные области, обычно образованные линиями (хотя они также могут быть сформированы с использованием другого цвета, значения или текстуры).У фигуры есть два измерения: длина и ширина.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Мы можем формировать фигуры, используя линии (как указано выше) или используя различия в цвете, текстуре или значении.
Мы склонны определять объекты по их основным формам и при ближайшем рассмотрении сосредотачиваемся только на деталях (таких как линии, значения, цвета и текстуры).По этой причине формы являются важнейшими элементами, которые мы, дизайнеры, используем для быстрого и эффективного общения.
Негатив / пустое пространство
Негативное пространство (также известное как белое пространство) — это пустая область вокруг (положительной) фигуры. Связь между формой и пространством называется фигура / фон , где фигура — это фигура, а область вокруг фигуры — это земля. Мы должны знать, что, проектируя позитивные формы, мы одновременно проектируем и негативные пространства.Негативное пространство так же важно, как и сама позитивная форма — потому что оно помогает определить границы позитивного пространства и привносит баланс в композицию.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Отрицательное пространство, также называемое белым пространством, — это пустая область вокруг положительной формы. Вы можете увидеть это как синий шар на фоне голубого прямоугольника — или это будет голубой прямоугольник с дырой в нем?
В некоторых дизайнах используется негативное пространство для создания интересных визуальных эффектов.Например, знаменитый логотип Всемирного фонда дикой природы (WWF) использует путаницу между положительной формой и отрицательным пространством для создания образа панды.
Автор / правообладатель: Всемирный фонд дикой природы (WWF). Условия авторских прав и лицензия: Добросовестное использование
Логотип WWF не выделяет явно всю панду: он умело использует отрицательное (белое) пространство вокруг черных фигур, чтобы обозначить остальную часть панды.
Объем
Объем применяется к трехмерным визуальным элементам, имеющим длину, ширину и глубину.Мы редко используем объем в визуальном дизайне, потому что большинство цифровых продуктов в конечном итоге просматривается на 2D-экране, хотя некоторые приложения и веб-сайты действительно используют 3D-модели и графику. (Однако технически 3D-изображения, просматриваемые на 2D-экране, остаются 2D-изображениями.)
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Объем имеет 3 измерения: длину, ширину и глубину. Это изображение представляет собой имитацию объема в 2D-графике.
Значение
Значение просто описывает свет и тьму.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Соотношение яркости и темноты: значение характеризует светлый и темный свет.
Дизайн с высоким контрастом значений (т. Е. Тот, который использует светлые и темные значения) создает ощущение ясности , в то время как дизайн с аналогичными значениями создает ощущение утонченности .Мы также можем использовать значение для имитации объема в 2D, например, используя более светлые значения, когда свет падает на объект, и более темные значения для теней.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Различия в значениях создают четкий дизайн, в то время как дизайны, использующие аналогичные значения, обычно выглядят тонкими.
Цвет
Цвет — это элемент света.Теория цвета — это отрасль дизайна, ориентированная на смешивание и использование разных цветов в дизайне и искусстве. В теории цвета существует важное различие между цветами, которые смешиваются субтрактивно, и цветами, которые смешиваются аддитивно.
В краске цвета смешиваются субтрактивно , потому что пигменты в красках поглощают свет. Когда разные пигменты смешиваются вместе, смесь поглощает более широкий спектр света, что приводит к более темному цвету. Вычитающее сочетание голубого, пурпурного и желтого цветов даст черный цвет.Вычитающее сочетание цветов в краске и печати дает цветовую систему CMYK (т.е. C yan, M agenta, Y ellow и blac K ).
В цифровом дизайне, когда продукт отображается на экране, цвета смешиваются аддитивно , поскольку экран излучает свет, и цвета соответственно складываются друг с другом. Когда разные цвета смешиваются на экране, смесь излучает более широкий диапазон света, что приводит к более светлому цвету. Аддитивная смесь красного, синего и зеленого цветов на экранах дает белый свет.Аддитивное сочетание цветов на цифровых экранах дает цветовую систему RGB (т. Е. R ed, G reen, B lue).
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Вычитающее сочетание цветов в краске и печати дает цветовую систему CMYK. Аддитивное сочетание цветов на цифровых экранах дает цветовую систему RGB.
Мы используем цвета в визуальном дизайне, чтобы передать эмоции и добавить разнообразия и интереса в наш дизайн, выделить отдельные области страницы и выделить нашу работу среди конкурентов.
Текстура
Текстура — это качество поверхности объекта.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Текстура может быть создана с помощью повторяющегося рисунка линий или с использованием мозаичных изображений текстур. Выше диагональные линии добавляют эффект «захвата» к «гладкому» прямоугольнику.
Как дизайнер, вы можете работать с двумя типами текстур: тактильных, текстур, где вы можете почувствовать текстуру, и подразумеваемых текстур , где вы можете только видеть — i.е., не чувствуешь — фактура. Большинство визуальных дизайнеров будут работать с подразумеваемыми текстурами, поскольку экраны (по крайней мере, в той мере, в какой они были продвинуты к середине 2010-х годов) не могут создавать тактильные текстуры.
Дизайн значков приложений в iOS 6 и более ранних версиях имитирует глянцевую текстуру стекла, побуждая пользователей нажимать на них. Позже Apple (in) классно представила текстуру льняной ткани для большей части своего пользовательского интерфейса. С ростом популярности плоского дизайна (минималистский стиль с чистыми пространствами и двумерными плоскими иллюстрациями) использование текстур в визуальном дизайне значительно уменьшится к середине 2010-х годов — хотя они могут по-прежнему быть очень полезными.
Автор / правообладатель: Неизвестен. Условия авторских прав и лицензия: Добросовестное использование
Значки приложений iOS 1-6 имеют глянцевую текстуру, поэтому они выглядят как настоящие кнопки.
Автор / правообладатель: Неизвестен. Условия авторских прав и лицензия: Добросовестное использование
Примерно в 2011 году Apple представила широкое использование льняной текстуры (которая впервые появилась на iOS) во всех своих операционных системах.
Принципы дизайна
Элементы визуального дизайна — линия, форма, негативное / пустое пространство, объем, значение, цвет и текстура — описывают строительных блоков эстетики продукта. С другой стороны, принципы дизайна говорят нам, как эти элементы могут и должны сочетаться друг с другом для достижения наилучших результатов. Многие из приведенных ниже принципов тесно связаны и дополняют друг друга.
Насколько важны принципы дизайна для работы визуального дизайнера? Партнер и главный специалист по исследованиям и разработкам в Институте прикладных управленческих наук Уильям Лидвелл в своей знаменательной и широко известной книге Универсальные принципы дизайна объясняет:
«Лучшие дизайнеры иногда пренебрегают принципами дизайна.Однако, когда они так поступают, обычно за это нарушение достигается некоторая компенсационная заслуга. Если вы не уверены, что поступите так же, лучше всего придерживаться принципов ». — Уильям Лидвелл
Unity
Unity создает ощущение гармонии между всеми элементами на странице. Страница с элементами, которые визуально или концептуально расположены вместе, скорее всего, создаст ощущение единства.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation.Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Отсутствие единства в дизайне может вызвать чувство беспокойства и хаоса. Наши глаза управляют нашими суждениями.
Когда мы разрабатываем веб-сайты, мы можем использовать сетку для достижения чувства единства, поскольку элементы, организованные в сетку, будут следовать упорядоченному расположению. Однако нам нужно ввести в нашу работу некоторую разновидность , чтобы найти баланс между скучным и хаотичным дизайном.
Гештальт
Гештальт относится к нашей тенденции воспринимать сумму всех частей в противоположность отдельным элементам. Человеческий глаз и мозг воспринимают единую форму иначе, чем отдельные части таких форм. В частности, мы склонны сначала воспринимать общую форму объекта, прежде чем воспринимать детали (линии, текстуры и т. Д.) Объекта.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation.Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Гештальт — это причина того, что мы можем видеть квадрат, круг и треугольник, даже если линии не полные. Сначала мы видим целое, образованное пунктирными линиями, прежде чем воспринимать отдельные пунктирные линии на каждом из изображений.
Логотип WWF, показанный ранее, является примером использования принципа гештальта для создания интересных дизайнов. Размещая части панды рядом друг с другом и стратегически, дизайн использует нашу тенденцию рассматривать изображение целиком, а не его части, тем самым создавая иллюзию панды.
Гештальт важен, например, для выделения отдельных разделов веб-сайта путем увеличения белого пространства между ними. Как дизайнеры, мы должны убедиться, что части веб-сайта, которые мы группируем вместе, используя принципы гештальта, то есть если они расположены близко друг к другу, имеют одинаковую форму и / или одинаковый размер, действительно концептуально сгруппированы вместе. «Случайное» группирование элементов, которые концептуально не похожи, приведет к путанице пользователей.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation.Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Дизайны с четкими разделами легче обрабатывать и сканировать, чем дизайны без четких различий между разделами, особенно если разделы концептуально отличаются.
Иерархия
Иерархия показывает разницу в важности элементов в дизайне. Цвет и размер — это наиболее распространенные способы создания иерархии, например, путем выделения основной кнопки или использования более крупных шрифтов для заголовков.Элементы, которые отображаются вверху страницы или приложения, также обычно рассматриваются как имеющие более высокую иерархию, чем те, которые отображаются ниже.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Размер и стиль шрифта — один из способов установления иерархии.
Баланс
Баланс — это принцип, определяющий, как мы равномерно распределяем элементы дизайна .Сбалансированный дизайн обычно кажется спокойным, стабильным и естественным, в то время как несбалансированный дизайн заставляет нас чувствовать себя неловко.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Сбалансированные конструкции кажутся стабильными, а несбалансированные — неустойчивыми и неестественными.
Баланса можно достичь за счет симметрии в дизайне (например, наличия веб-страницы с централизованным текстом и изображениями).Однако вы также можете достичь баланса без симметрии — возможно, неудивительно, что это известно как асимметричный баланс. Мы достигаем асимметричного баланса, когда размещаем элементы разного размера так, чтобы они были единым целым. Мы можем представить центральную точку дизайна и распределить элементы таким образом, чтобы создать баланс.
Контраст
Мы используем контраст, чтобы выделить элемент , манипулируя различиями в цвете, значении, размере и других факторах.Например, как дизайнеры (будь то дизайн логотипа, дизайн пользовательского интерфейса и т. Д.), Мы часто используем красный цвет, чтобы выделить определенные элементы. В iOS красный цвет часто появляется в действии «Удалить», чтобы обозначить, что (часто) необратимое действие вот-вот произойдет. С другой стороны, зеленый цвет часто используется нами (по крайней мере, в западном дизайне) в таких позитивных действиях, как «Пойти» и «Принять», тем самым подчеркивая, что мы не можем игнорировать культурное значение цветов при проектировании для контраста. Если вы разрабатываете для клиента из далекой страны, узнайте о своей работе и измените ее, чтобы она соответствовала культурным соображениям.Например, спросите себя: «Их красное везет или злится?» или «Их черный бизнес по-деловому или на похоронах?»
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Красный, цвет с высокой контрастностью, широко используется в iOS для функции «Удалить».
Масштаб
Масштаб описывает относительных размеров элементов конструкции.Используя масштаб, чтобы сделать элемент больше, чем другие, появляющиеся вместе с ним, вы можете выделить этот элемент. Таким образом можно не только выделить элемент — вы также можете использовать масштаб, чтобы создать ощущение глубины (поскольку более близкие объекты кажутся больше человеческому глазу). Увеличенные масштабы изображений также добавляют им определенный уровень интереса и драматизма.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation. Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Масштаб можно использовать для создания иерархии и выделения определенных элементов дизайна.
Доминирование
Доминирование создает фокус на одиночном элементе . Для этого мы можем использовать цвет, форму, контраст, масштаб и / или позиционирование. Например, у большинства веб-сайтов есть изображение главного «героя», которое использует доминирование, чтобы привлечь внимание пользователей, естественным образом привлекая их к себе.
Автор / правообладатель: Teo Yu Siang and Interaction Design Foundation.Условия авторских прав и лицензия: CC BY-NC-SA 3.0
Доминирование может быть установлено с помощью расположения, формы и цвета среди многих других факторов.
При работе с визуальным дизайном мы должны убедиться, что мы используем доминирование, сохраняя при этом единство и баланс веб-сайтов — в противном случае дизайн потенциально может дезориентировать пользователей.
Примеры для выделения элементов и принципов дизайна
Помня об элементах визуального дизайна и принципах дизайна, мы проанализируем несколько веб-сайтов, чтобы увидеть, , как они объединяются, и , почему дизайны работают.
Домашняя страница Google
Домашняя страница Google — одна из самых посещаемых веб-страниц в мире. Простота страницы отчасти объясняет, почему она так хорошо спроектирована, но есть и другие факторы, благодаря которым эта страница работает великолепно:
Автор / правообладатель: Google Inc., https://www.google.com/. Условия авторского права и лицензия: Добросовестное использование.
Доминирование : большой логотип Google и поле поиска придают ему доминирующее значение, делая его основным (и, по большей части, единственным) центром всей страницы.
Контраст (и цвет) : в логотипе Google используются яркие (в основном основные) цвета, которые хорошо сочетаются, образуя визуально приятный логотип. Логотип также имеет достаточный контраст на белом фоне, что выделяет его на странице.
Форма : в поле поиска используется прямоугольная форма, очерчивающая поле поиска, что делает его очень удобным.
Минус-пространство : главная страница Google в основном состоит из отрицательного пространства, что делает окно поиска (основная функция страницы) центром внимания.Отрицательное пространство также хорошо подходит для страницы, поскольку оно действует как чистый лист бумаги, прежде чем пользователи вводят свои условия поиска.
Balance : страница почти вертикально симметрична, что создает ощущение баланса, на которое приятно и спокойно смотреть.
Домашняя страница Quartz
Quartz — информационное агентство, ориентированное прежде всего на цифровые и мобильные устройства, с глобальной аудиторией, созданное в 2012 году компанией Atlantic Media, которая также издает The Atlantic .У него жирная домашняя страница, которая помещает избранные новости в центр внимания. Вот как сочетаются принципы дизайна и элементы дизайна:
Автор / правообладатель: Quartz, http://qz.com/. Условия авторского права и лицензия: Добросовестное использование.
Легко восхищаться эффектом в целом, не глядя сквозь пальцы на гайки и болты — элементы, которые собраны вместе так хорошо и в соответствии с вековыми принципами, чтобы создать эффект «вау».
Dominance : Основная новость сразу бросается в глаза, потому что ее большой жирный шрифт делает ее доминирующей на главной странице.
Иерархия : Домашняя страница использует четкую иерархию для определения относительной важности различных элементов. Основной сюжет с самым большим текстом и жирным шрифтом имеет высшую иерархию. Следующие четыре истории, расположенные под основным сюжетом, имеют более мелкий шрифт, чтобы показать подчиненную иерархию под основным сюжетом.
Масштаб, значение и цвет : на главной странице Quartz есть большая (во всю высоту страница) буква «Q», которая представляет собой маску изображения главного героя основного сюжета. Большая буква «Q» быстро определяет идентичность веб-сайта (поскольку «Q» означает «кварц») с помощью шкалы. Однако из-за относительной освещенности и серого цвета буквы «Q» она исчезает на заднем плане, тем самым привлекая внимание к заголовку основного сюжета.
Негативное пространство : Большая часть домашней страницы — это негативное пространство, позволяющее просвечивать содержимое.При наведении курсора мыши на заголовок основного сюжета маска «Q» исчезает, заполняя отрицательное пространство показанным изображением. Это пример того, как уникальная игра отрицательного пространства может стимулировать интерес к дизайну веб-сайта.
Unity : Quartz использует систему сеток на своем веб-сайте, чтобы создать ощущение единства. Например, четыре этажа имеют одинаковую ширину и равномерно расположены, что создает ощущение упорядоченности и структуры.
The Take Away
Элементы визуального дизайна составляют фундаментальные строительные блоки продукта.Хотя нам, как визуальным дизайнерам, на самом деле не нужно внимательно изучать каждый элемент в нашей повседневной работе, принципы дизайна — как разместить элементы вместе для оптимального построения страниц и экранов приложений — действительно играют решающую роль в том, что мы делаем. Изучение того, как достичь единства, гештальта, иерархии, баланса, контраста, масштаба, доминирования и сходства, будет чрезвычайно полезно при работе с визуальным дизайном.
Итак, используя ваши элементы, а именно:
Линия
Форма
Негативное пространство
Том
Значение
Цвет
Текстура
и привязывая их к принципам, а именно:
Единство
Гештальт
Иерархия
Весы
Контраст
Масштаб
Доминирование
—позволяет вам стабильно добиваться выигрышных результатов.
Ссылки и где узнать больше
Алан Хашимото и Майк Клейтон, Основы визуального дизайна: цифровой подход , 2004
Уильям Лидвелл, Универсальные принципы дизайна , 2003
Отдел цифровых коммуникаций Министерства здравоохранения и социальных служб США, Основы визуального дизайна: https://www.usability.gov/what-and-why/visual-design.html
Как создать приложение Python с графическим интерфейсом пользователя с помощью wxPython — Real Python
Первый шаг при создании чего-то нового — это выяснить, что вы хотите создать.В данном случае я взял на себя смелость принять это решение за вас. Вы узнаете, как создать редактор тегов MP3! Следующий шаг при создании чего-то нового — выяснить, какие пакеты могут помочь вам в выполнении вашей задачи.
Если вы выполните поиск в Google по запросу Python mp3 tagging , вы обнаружите, что у вас есть несколько вариантов:
Я попробовал несколько из них и решил, что eyeD3 имеет хороший API, который вы можете использовать, не увязнув со спецификацией MP3 ID3.Вы можете установить eyeD3 , используя pip , например:
При установке этого пакета на macOS вам может потребоваться установить libmagic с использованием brew . У пользователей Windows и Linux не должно возникнуть проблем с установкой eyeD3.
Проектирование пользовательского интерфейса
Когда дело доходит до разработки интерфейса, всегда приятно просто набросать набросок того, как, по вашему мнению, должен выглядеть пользовательский интерфейс.
Вам необходимо уметь делать следующее:
Откройте один или несколько файлов MP3
Показать текущие теги MP3
Редактировать тег MP3
Большинство пользовательских интерфейсов используют меню или кнопку для открытия файлов или папок.Для этого вы можете использовать меню File . Поскольку вы, вероятно, захотите увидеть теги для нескольких файлов MP3, вам нужно будет найти виджет, который может сделать это в удобной форме.
Что-то табличное со столбцами и строками было бы идеально, потому что тогда вы можете иметь помеченные столбцы для тегов MP3. В наборе инструментов wxPython есть несколько виджетов, которые подойдут для этого, из которых два верхних — следующие:
В этом случае вам следует использовать wx.ListCtrl , поскольку виджет Grid является излишним, и, честно говоря, он также немного сложнее.Наконец, вам понадобится кнопка для редактирования выбранного тега MP3.
Теперь, когда вы знаете, что хотите, можете оформить:
Иллюстрация выше дает нам представление о том, как должно выглядеть приложение. Теперь, когда вы знаете, что хотите сделать, пора писать код!
Создание пользовательского интерфейса
Есть много разных подходов к написанию нового приложения. Например, нужно ли вам следовать шаблону проектирования модель-представление-контроллер? Как разделить классы? Один класс на файл? Таких вопросов много, и по мере того, как вы набираетесь опыта в дизайне графического интерфейса, вы будете знать, как вы хотите на них ответить.
В вашем случае вам действительно нужны только два класса:
A ш. Панель класс
A wx. Рама класс
Вы также можете спорить о создании модуля типа контроллера, но для чего-то вроде этого он вам действительно не нужен. Также можно было бы поместить каждый класс в отдельный модуль, но чтобы он оставался компактным, вы создадите один файл Python для всего вашего кода.
Начнем с импорта и класса панели:
импортные 3 импортный глобус импорт wx класс Mp3Panel (wx.Панель): def __init __ (я, родитель): super () .__ init __ (родитель) main_sizer = wx.BoxSizer (wx.VERTICAL) self.row_obj_dict = {} self.list_ctrl = wx.ListCtrl ( self, size = (- 1, 100), style = wx.LC_REPORT | wx.BORDER_SUNKEN ) self.list_ctrl.InsertColumn (0, 'Художник', ширина = 140) self.list_ctrl.InsertColumn (1, 'Альбом', ширина = 140) self.list_ctrl.InsertColumn (2, 'Заголовок', ширина = 200) main_sizer.Add (self.list_ctrl, 0, wx.ВСЕ | wx.EXPAND, 5) edit_button = wx.Button (self, label = 'Изменить') edit_button.Bind (wx.EVT_BUTTON, self.on_edit) main_sizer.Add (edit_button, 0, wx.ALL | wx.CENTER, 5) self.SetSizer (main_sizer) def on_edit (себя, событие): print ('в on_edit') def update_mp3_listing (self, folder_path): печать (путь_папки)
Здесь вы импортируете пакет eyed3 , пакет Python glob и пакет wx для своего пользовательского интерфейса.Затем вы создаете подкласс wx.Panel и создаете свой пользовательский интерфейс. Вам нужен словарь для хранения данных о ваших MP3-файлах, который вы можете назвать row_obj_dict .
Затем вы создаете wx.ListCtrl и устанавливаете его в режим отчета ( wx.LC_REPORT ) с утопленной рамкой ( wx.BORDER_SUNKEN ). Элемент управления списком может принимать несколько других форм в зависимости от флага стиля, который вы передаете, но флаг отчета является наиболее популярным.
Чтобы у ListCtrl были правильные заголовки, вам нужно будет позвонить по номеру .InsertColumn () для каждого заголовка столбца. Затем вы указываете индекс столбца, его метку и ширину столбца в пикселях.
Последний шаг — добавить кнопку Edit , обработчик событий и метод. Вы можете создать привязку к событию и пока оставить метод, который он вызывает, пустым.
Теперь нужно написать код для фрейма:
класс Mp3Frame (wx.Frame): def __init __ (сам): super () .__ init __ (parent = None, title = 'Редактор тегов Mp3') себя.панель = Mp3Panel (самостоятельно) self.Show () если __name__ == '__main__': app = wx.App (Ложь) frame = Mp3Frame () app.MainLoop ()
Этот класс намного проще первого в том, что все, что вам нужно сделать, это установить заголовок фрейма и создать экземпляр класса панели, Mp3Panel . Когда вы закончите, ваш пользовательский интерфейс должен выглядеть так:
Пользовательский интерфейс выглядит почти правильно, но у вас нет меню Файл . Это делает невозможным добавление файлов MP3 в приложение и редактирование их тегов!
Давайте исправим это сейчас.
Создание работающего приложения
Первый шаг к тому, чтобы ваше приложение работало, — это обновить приложение, чтобы оно имело меню File , потому что тогда вы можете добавлять файлы MP3 в свое творение. Меню почти всегда добавляются к классу wx.Frame , поэтому вам нужно изменить этот класс.
Примечание: Некоторые приложения отказались от меню в своих приложениях. Одним из первых, кто сделал это, был Microsoft Office, когда они добавили панель ленты.В наборе инструментов wxPython есть настраиваемый виджет, который можно использовать для создания лент в wx.lib.agw.ribbon .
Другой тип приложений, в которых в последнее время отсутствуют меню, — это веб-браузеры, такие как Google Chrome и Mozilla Firefox. Сейчас они просто используют панели инструментов.
Давайте узнаем, как добавить строку меню в наше приложение:
класс Mp3Frame (wx.Frame): def __init __ (сам): wx.Frame .__ init __ (self, parent = None, title = 'Редактор тегов Mp3') себя.панель = Mp3Panel (самостоятельно) self.create_menu () self.Show () def create_menu (сам): menu_bar = wx.MenuBar () file_menu = wx.Menu () open_folder_menu_item = file_menu.Append ( wx.ID_ANY, "Открыть папку", "Открыть папку с MP3" ) menu_bar.Append (file_menu, '& Файл') self.Bind ( event = wx.EVT_MENU, handler = self.on_open_folder, source = open_folder_menu_item, ) себя.SetMenuBar (панель_меню) def on_open_folder (я, событие): title = "Выберите каталог:" dlg = wx.DirDialog (self, title, style = wx.DD_DEFAULT_STYLE) если dlg.ShowModal () == wx.ID_OK: self.panel.update_mp3_listing (dlg.GetPath ()) dlg.Destroy ()
Здесь вы добавляете вызов .create_menu () внутри конструктора класса. Затем в самом .create_menu () вы создадите экземпляр wx.MenuBar и wx.Экземпляр меню .
Чтобы добавить пункт меню в меню, вы вызываете .Append () экземпляра меню и передаете ему следующее:
Уникальный идентификатор
Ярлык для нового пункта меню
Строка справки
Затем вам нужно добавить меню в строку меню, поэтому вам нужно будет вызвать строку меню .Append () . Требуется экземпляр меню и метка для меню. Этот ярлык немного странный, потому что вы назвали его и файл вместо файл .Амперсанд указывает wxPython создать сочетание клавиш Alt + F , чтобы открыть меню Файл , используя только вашу клавиатуру.
Примечание: Если вы хотите добавить сочетания клавиш в свое приложение, вам нужно будет использовать экземпляр wx.AcceleratorTable для их создания. Вы можете узнать больше о таблицах Accerator в документации wxPython.
Чтобы создать привязку события, вам нужно вызвать self.Bind () , который привязывает фрейм к wx.EVT_MENU . Когда вы используете self.Bind () для события меню, вам нужно не только указать wxPython, какой обработчик использовать, но также и к какому источнику привязать обработчик.
Наконец, вы должны вызвать фрейм .SetMenuBar () и передать ему экземпляр строки меню, чтобы он был показан пользователю.
Теперь, когда у вас есть меню, добавленное к вашему фрейму, давайте рассмотрим обработчик событий элемента меню, который снова воспроизводится ниже:
def on_open_folder (self, event): title = "Выберите каталог:" dlg = wx.DirDialog (я, заголовок, стиль = wx.DD_DEFAULT_STYLE) если dlg.ShowModal () == wx.ID_OK: self.panel.update_mp3_listing (dlg.GetPath ()) dlg.Destroy ()
Поскольку вы хотите, чтобы пользователь выбирал папку, содержащую файлы MP3, вам нужно использовать wxPython wx.DirDialog . wx.DirDialog позволяет пользователю открывать только каталоги.
Вы можете установить заголовок диалога и различные флаги стиля. Чтобы отобразить диалоговое окно, вам нужно будет вызвать .ShowModal () .Это приведет к тому, что диалоговое окно будет отображаться модально, что означает, что пользователь не сможет взаимодействовать с вашим основным приложением, пока отображается диалоговое окно.
Если пользователь нажимает кнопку диалогового окна OK , вы можете получить выбор пути пользователя с помощью диалогового окна .GetPath () . Вы захотите передать этот путь своему классу панели, что вы можете сделать здесь, вызвав панель .update_mp3_listing () .
Наконец, вам нужно закрыть диалог. Чтобы закрыть диалоговое окно, рекомендуется вызвать его .Уничтожить () .
В диалогах
есть метод .Close () , но он в основном просто скрывает диалог, и он не уничтожает себя при закрытии приложения, что может привести к странным проблемам, таким как ваше приложение теперь закрывается должным образом. Чтобы предотвратить эту проблему, проще вызвать в диалоговом окне .Destroy () .
Теперь давайте обновим ваш класс Mp3Panel . Вы можете начать с обновления .update_mp3_listing () :
def update_mp3_listing (self, folder_path): себя.current_folder_path = путь_папки self.list_ctrl.ClearAll () self.list_ctrl.InsertColumn (0, 'Художник', ширина = 140) self.list_ctrl.InsertColumn (1, 'Альбом', ширина = 140) self.list_ctrl.InsertColumn (2, 'Заголовок', ширина = 200) self.list_ctrl.InsertColumn (3, 'Год', ширина = 200) mp3s = glob.glob (путь_папки + '/*.mp3') mp3_objects = [] индекс = 0 для mp3 в mp3: mp3_object = eyed3.load (mp3) self.list_ctrl.InsertItem (индекс, mp3_object.tag.artist) себя.list_ctrl.SetItem (индекс, 1, mp3_object.tag.album) self.list_ctrl.SetItem (индекс, 2, mp3_object.tag.title) mp3_objects.append (mp3_object) self.row_obj_dict [индекс] = mp3_object индекс + = 1
Здесь вы устанавливаете текущий каталог в указанную папку, а затем очищаете элемент управления списком. Это сохраняет контроль списка свежим и показывает только те файлы MP3, над которыми вы в данный момент работаете. Это также означает, что вам нужно снова вставить все столбцы.
Затем вам нужно взять переданную папку и использовать модуль Python glob для поиска файлов MP3.
Затем вы можете перебрать MP3-файлы и превратить их в объекты eyed3 . Вы можете сделать это, вызвав .load () из eyed3 . Предполагая, что у MP3-файлов уже есть соответствующие теги, вы можете добавить исполнителя, альбом и название MP3 в элемент управления списком.
Интересно, что метод добавления новой строки в объект управления списком — это вызов .InsertItem () для первого столбца и SetItem () для всех последующих столбцов.
Последний шаг — сохранить объект MP3 в словаре Python, row_obj_dict .
Теперь вам нужно обновить обработчик событий .on_edit () , чтобы вы могли редактировать теги MP3:
def on_edit (self, event): selection = self.list_ctrl.GetFocusedItem () если выбор> = 0: mp3 = self.row_obj_dict [выбор] dlg = EditDialog (mp3) dlg.ShowModal () self.update_mp3_listing (self.current_folder_path) dlg.Destroy ()
Первое, что вам нужно сделать, это получить выбор пользователя, вызвав элемент управления списком .GetFocusedItem () .
Если пользователь ничего не выбрал в элементе управления списком, он вернет -1 . Предполагая, что пользователь что-то выбрал, вы захотите извлечь объект MP3 из своего словаря и открыть диалоговое окно редактора тегов MP3. Это будет настраиваемый диалог, который вы будете использовать для редактирования тегов исполнителя, альбома и заголовка файла MP3.
Как обычно, показывать диалог модально. Когда диалог закроется, будут выполнены две последние строки в .on_edit () . Эти две строки обновят элемент управления списком, чтобы отобразить текущую информацию тега MP3, которую пользователь только что отредактировал, и уничтожить диалоговое окно.
Создание диалогового окна редактирования
Последний фрагмент головоломки — создание диалогового окна редактирования тегов MP3. Для краткости мы не будем рисовать этот интерфейс, так как он представляет собой серию строк, содержащих метки и текстовые элементы управления.В текстовых элементах управления должна быть предварительно заполнена информация о существующих тегах. Вы можете создать метку для текстовых элементов управления, создав экземпляры wx.StaticText .
Когда вам нужно создать собственный диалог, класс wx.Dialog — ваш друг. Вы можете использовать это для создания редактора:
класс EditDialog (wx.Dialog): def __init __ (self, mp3): title = f'Editing "{mp3.tag.title}" ' super () .__ init __ (родительский = Нет, заголовок = заголовок) себя.mp3 = mp3 self.main_sizer = wx.BoxSizer (wx.VERTICAL) self.artist = wx.TextCtrl ( self, value = self.mp3.tag.artist) self.add_widgets ('Художник', self.artist) self.album = wx.TextCtrl ( self, value = self.mp3.tag.album) self.add_widgets ('Альбом', self.album) self.title = wx.TextCtrl ( self, value = self.mp3.tag.title) self.add_widgets ('Заголовок', self.title) btn_sizer = wx.BoxSizer () save_btn = wx.Кнопка (self, label = 'Сохранить') save_btn.Bind (wx.EVT_BUTTON, self.on_save) btn_sizer.Add (save_btn, 0, wx.ALL, 5) btn_sizer.Add (wx.Button ( self, id = wx.ID_CANCEL), 0, wx.ALL, 5) self.main_sizer.Add (btn_sizer, 0, wx.CENTER) self.SetSizer (self.main_sizer)
Здесь вы хотите начать с подкласса wx.Dialog и присвоения ему настраиваемого заголовка на основе заголовка MP3, который вы редактируете.
Затем вы можете создать размер, который хотите использовать, и виджеты.Чтобы упростить задачу, вы можете создать вспомогательный метод с именем .add_widgets () для добавления виджетов wx.StaticText в виде строк с экземплярами текстовых элементов управления. Единственным другим виджетом здесь является кнопка Сохранить .
Давайте напишем метод add_widgets следующим образом:
def add_widgets (self, label_text, text_ctrl): row_sizer = wx.BoxSizer (wx.ГОРИЗОНТАЛЬНО) label = wx.StaticText (self, label = label_text, размер = (50, -1)) row_sizer.Добавить (метка, 0, wx.ALL, 5) row_sizer.Add (text_ctrl, 1, wx.ALL | wx.EXPAND, 5) self.main_sizer.Add (row_sizer, 0, wx.EXPAND)
add_widgets () принимает текст метки и экземпляр элемента управления текстом. Затем он создает горизонтально ориентированный BoxSizer .
Затем вы создадите экземпляр wx.StaticText , используя переданный текст для его параметра метки. Вы также установите его размер равным 50 пикселей в ширину, а высоту по умолчанию — -1 .Поскольку вам нужна метка перед текстовым элементом управления, вы сначала добавите виджет StaticText в свой BoxSizer, а затем добавите текстовый элемент управления.
Наконец, вы хотите добавить горизонтальный измеритель размера к вертикальному измерителю верхнего уровня. Вложив измерители размеров друг в друга, вы можете разрабатывать сложные приложения.
Теперь вам нужно создать обработчик событий on_save () , чтобы вы могли сохранить свои изменения:
def on_save (себя, событие): self.mp3.tag.artist = self.artist.GetValue () self.mp3.tag.album = self.album.GetValue () self.mp3.tag.title = self.title.GetValue () self.mp3.tag.save () self.Close ()
Здесь вы устанавливаете теги для содержимого текстовых элементов управления, а затем вызываете объект eyed3 .save () . Наконец, вы вызываете .Close () диалогового окна. Причина, по которой вы звоните. Close () здесь вместо .Destroy () — это то, что вы уже вызываете .Destroy () в .on_edit () вашего подкласса панели.
Теперь ваша заявка готова!
Создание пользовательского интерфейса с помощью редактора макетов | Разработчики Android
Редактор макетов позволяет быстро создавать макеты, перетаскивая элементы пользовательского интерфейса. в редактор визуального дизайна вместо того, чтобы вручную писать XML макета. Дизайн редактор может предварительно просмотреть ваш макет на разных устройствах Android и версиях, а также вы можете динамически изменять размер макета, чтобы убедиться, что он хорошо работает на разных размеры экрана.
Редактор макетов особенно эффективен, когда создание макета с помощью ConstraintLayout , менеджер компоновки, совместимый с Android 2.3 (уровень API 9) и выше.
На этой странице представлен обзор редактора макета. Чтобы узнать больше о макете основы, см. Макеты.
Введение в редактор макетов
Редактор макета появляется при открытии файла макета XML.
Рисунок 1. Редактор макета
Палитра : содержит различные представления и группы представлений, которые можно перетаскивать ваш макет.
Дерево компонентов : показывает иерархию компонентов в вашем макете.
Панель инструментов : Нажмите эти кнопки, чтобы настроить внешний вид макета в редактор и изменить атрибуты макета.
Редактор дизайна : редактируйте макет в представлении «Дизайн», «Чертеж» или в обоих режимах.
Атрибуты : элементы управления для выбранных атрибутов представления.
Режим просмотра : просмотр макета в любом из Код , Проект , или Split режимы. Режим разделения показывает как Код и Одновременное проектирование окон .
Элементы управления масштабированием и панорамированием : Управление размером и положением предварительного просмотра в редактор.
Когда вы открываете файл макета XML, редактор дизайна открывается по умолчанию, как показано на рисунке 1. Чтобы отредактировать XML макета в текстовом редакторе, щелкните Code в правом верхнем углу окна. Обратите внимание, что окна Palette , Component Tree и Attributes недоступны при редактировании макета в представлении Код .
Совет: Вы можете переключаться между дизайнерским и текстовым редакторами, нажимая Alt + Shift + стрелка вправо / влево ( Control + Shift + стрелка вправо / влево на Mac).
Изменить внешний вид предварительного просмотра
Кнопки в верхнем ряду редактора дизайна позволяют настроить внешний вид вашего макета в редакторе.
Рисунок 2. Кнопки на панели инструментов редактора макета, которые настроить внешний вид макета
Доступны следующие кнопки, соответствующие номерам на рисунке 2:
Дизайн и план : Выберите, как вы хотите видеть свой макет в редактор.Выберите Дизайн , чтобы увидеть предварительный просмотр вашего макета. Выбирать Blueprint , чтобы видеть только контуры для каждого вида. Выбирать Design + Blueprint для одновременного просмотра обоих представлений. Вы также можете нажать B для циклического просмотра этих типов просмотра.
Варианты ориентации и компоновки экрана : Выберите альбомную или портретная ориентация экрана или выберите другие режимы экрана, для которых ваше приложение предоставляет альтернативные макеты, например ночной режим.Это меню также содержит команды для создания нового варианта раскладки. Вы также можете нажать O , чтобы изменить ориентацию.
Тип и размер устройства : выберите тип устройства (телефон / планшет, Android TV, или Wear OS) и конфигурацию экрана (размер и плотность). Вы можете выбрать из несколько предварительно настроенных типов устройств и ваши собственные определения AVD, или вы можете создайте новый AVD, выбрав Добавить определение устройства из списка. Ты можно изменить размер устройства, перетащив правый нижний угол макета.Вы также можете нажать D , чтобы просмотреть список устройств.
API версии : выберите версию Android, на которой следует предварительно просмотреть макет.
Тема приложения : выберите, какую тему пользовательского интерфейса применить к предварительному просмотру. Обратите внимание, что это работает только для поддерживаемых стилей макета, поэтому многие темы в этом списке приводят к ошибка.
Язык : выберите язык для отображения строк пользовательского интерфейса. Этот список отображает только языки, доступные в ваших строковых ресурсах.Если хочешь для редактирования переводов щелкните Редактировать переводы в раскрывающемся списке. меню. Подробнее о работе с переводами см. Локализуйте пользовательский интерфейс с помощью редактора переводов.
Примечание: Если вы не решите добавить новый файл макета из вариантов макета , эти конфигурации не влияют на код или манифест вашего приложения. Они влияют только на предварительный просмотр макета.
Создать новый макет
При добавлении нового макета для вашего приложения сначала создайте файл макета по умолчанию в каталог по умолчанию layout / вашего проекта, чтобы он применялся ко всем устройствам конфигурации.Если у вас есть макет по умолчанию, вы можете создавать варианты компоновки для конкретных конфигураций устройств, например, для больших экранов.
Вы можете создать новый макет одним из следующих способов:
В окне Project щелкните модуль, в который вы хотите добавить макет.
В главном меню выберите Файл> Создать> XML> Файл макета XML .
В открывшемся диалоговом окне укажите имя файла, корневой тег макета и исходный набор, в который входит макет.
Щелкните Finish , чтобы создать макет.
Использовать представление проекта
Выберите вид Project в окне Project .
Щелкните правой кнопкой мыши каталог макета, в который вы хотите добавить макет.
В появившемся контекстном меню щелкните New> Layout Resource File .
Используйте представление Android
Выберите представление Android в окне Project .
Щелкните правой кнопкой мыши папку layout .
В появившемся контекстном меню выберите New> Layout Resource File .
Используйте диспетчер ресурсов
В диспетчере ресурсов выберите Макет вкладка.
Нажмите кнопку + , а затем щелкните Файл ресурсов макета .
Используйте варианты компоновки для оптимизации для разных экранов
Вариант компоновки — это альтернативная версия существующей компоновки, которая оптимизирован для определенного размера или ориентации экрана.
Использовать предлагаемый вариант компоновки
Android Studio включает общие варианты компоновки, которые вы можете использовать в своем проекте. Чтобы использовать предложенный вариант компоновки, выполните следующие действия:
Откройте исходный файл макета, щелкните значок Design в правом верхнем углу окна.
Щелкните Ориентация для предварительного просмотра () на панели инструментов.
В раскрывающемся списке выберите предлагаемый вариант, например Создать вариант ландшафта .
Создайте свой вариант компоновки
Если вы хотите создать свой собственный вариант макета, сделайте следующее:
Откройте исходный файл макета и щелкните значок Design () в правом верхнем углу окна.
Щелкните Ориентация для предварительного просмотра на панели инструментов.
В раскрывающемся списке выберите Создать другое … .
В открывшемся диалоговом окне определите квалификаторы ресурсов для варианта.Выберите квалификатор из списка Доступные квалификаторы и нажмите Добавить кнопка. Повторите этот шаг, чтобы добавить другие квалификаторы по мере необходимости.
После добавления всех квалификаторов щелкните OK .
Если у вас есть несколько вариантов одного и того же макета, вы можете переключаться между их, нажав Варианты макета и выбирая из появившегося списка.
Для получения дополнительной информации о том, как создавать макеты для разных экранов, см. Поддержка экранов разных размеров.
Преобразование вида или компоновки
Вы можете преобразовать вид в другой вид, а также преобразовать макет. к другому виду макета.
Нажмите кнопку Design в правом верхнем углу окна редактора.
В дереве компонентов щелкните правой кнопкой мыши вид или макет, а затем щелкните Преобразовать вид … .
В открывшемся диалоговом окне выберите новый тип вида или макета, а затем нажмите Применить .
Преобразование макета в ConstraintLayout
Для повышения производительности макета вам следует преобразовать старые макеты в ConstraintLayout . ConstraintLayout использует система макета на основе ограничений, которая позволяет создавать большинство макетов без любые вложенные группы представлений.
Чтобы преобразовать существующий макет в ConstraintLayout , выполните следующие действия:
Откройте существующий макет в Android Studio и нажмите кнопку Design в правом верхнем углу окна редактора.
В дереве компонентов щелкните макет правой кнопкой мыши и выберите Преобразуйте your-layout-type в ConstraintLayout .
Чтобы узнать больше о ConstraintLayout , см. Создайте отзывчивый пользовательский интерфейс с помощью ConstraintLayout.
Найти предметы в палитре
Для поиска представления или группы представлений по имени в палитре щелкните значок Найти кнопку в верхней части палитры. В качестве альтернативы вы можете ввести название элемента всякий раз, когда окно Palette находится в фокусе.
Часто используемые элементы можно найти в категории Обычный в разделе Поддон . Чтобы добавить элемент в эту категорию, щелкните правой кнопкой мыши представление или представление в палитре , а затем щелкните Favorite в контекстном меню.
Открыть документацию из Палитры
Чтобы открыть справочную документацию для разработчиков Android для представления или группы представлений, выберите элемент пользовательского интерфейса в палитре и нажмите Shift + F1 .
Чтобы просмотреть документацию Руководства по материалам для представления или группы представлений, щелкните правой кнопкой мыши элемент пользовательского интерфейса в Palette и выберите Material Guidelines из контекстное меню. Если для элемента не существует конкретной записи, откроется команда. домашняя страница Документация по материалам Руководства.
Добавьте виды к макету
Чтобы начать создание макета, просто перетащите представления и группы представлений из Палитра в редактор дизайна.Когда вы размещаете вид на макете, редактор отображает информацию об отношениях представления с остальной частью макет.
Если вы используете ConstraintLayout , вы можете автоматически создавать ограничения с помощью функций Infer Constraints и Autoconnect.
Изменить атрибуты вида
Рисунок 3. Атрибуты Окно
Вы можете редактировать атрибуты вида в окне Атрибуты в правой части окна. Редактор макета.Это окно доступно только при открытом редакторе дизайна, поэтому убедитесь, что вы используете режим Design или Split для просмотра макет.
Когда вы выбираете представление, щелкая ли оно в дереве компонентов или в редакторе дизайна в окне Attributes отображается следующее, как обозначено на рисунке 3:
В разделе Объявленные атрибуты перечислены атрибуты, указанные в макете. файл. Чтобы добавить атрибут, нажмите Добавить кнопку в правом верхнем углу раздела.
Раздел Layout содержит элементы управления шириной и высотой Посмотреть. Если представление находится в ConstraintLayout , в этом разделе также отображается смещение ограничения и перечисляет ограничения, которые использует представление. Для большего информацию о работе с ConstraintLayout см. Создайте отзывчивый пользовательский интерфейс с помощью ConstraintLayout.
В разделе Общие атрибуты перечислены общие атрибуты для выбранных Посмотреть. Чтобы увидеть все доступные атрибуты, разверните раздел Все атрибуты внизу окна.
Нажмите кнопку Search для поиска определенного атрибута представления.
Значки справа от каждого значения атрибута показывают, значения атрибутов являются ссылками на ресурсы. Эти показатели солидные когда значение является ссылкой на ресурс и пусто когда значение жестко запрограммировано. Эти индикаторы помогут вам с первого взгляда распознать жестко запрограммированные значения. Щелкнув индикаторы в любом состоянии открывает диалоговое окно Resources , в котором вы может выбрать ссылку на ресурс для соответствующего атрибута.
Красная подсветка вокруг значения атрибута указывает на ошибку в значении. Ошибка может указывать на недопустимую запись для атрибута, определяющего макет, как показано красным цветом на рисунке 3.
Оранжевая подсветка указывает на предупреждение для значения. Предупреждение может появляются, когда вы используете жестко запрограммированное значение, когда ссылка на ресурс ожидается, например.
Добавьте пример данных в представление
Поскольку многие макеты Android полагаются на данные времени выполнения, может быть трудно визуализировать внешний вид макета при разработке приложения.В Android Studio 3.2 и новее, вы можете добавить образец данных предварительного просмотра в TextView , ImageView или RecyclerView из редактора макета.
Примечание: Когда вы добавляете образцы данных в View , Android Studio вносит изменения в ваш проект, как если бы вы использовали свои собственные данные. Затем вы можете изменить эти изменения по мере необходимости.
Вы можете щелкнуть правой кнопкой мыши по одному из этих типов представления и выбрать Set Sample Data to отобразить окно Design-time View Attributes , как показано на рисунке 4.
Рисунок 4. Атрибуты представления времени разработки Окно
В TextView вы можете выбирать между различными типами текстовых категорий. Когда используя образец текста, Android Studio заполняет текст атрибута TextView с выбранными вами образцами данных. Обратите внимание, что вы можете выбрать образец текста через окно Design-time View Attributes , только если атрибут text пустой.
Рисунок 5. A TextView с образцами данных
В ImageView вы можете выбирать между различными образцами изображений. Когда ты выберите образец изображения, Android Studio заполняет атрибут tools: src ImageView (или tools: srcCompat при использовании библиотеки поддержки).
Рис. 6. Изображение ImageView с образцами данных
В RecyclerView вы можете выбирать между набором шаблонов, содержащих образцы изображений и текстов.При использовании этих шаблонов Android Studio добавляет файл в каталог res / layout , recycler_view_item.xml , который содержит макет для демонстрационных данных. Android Studio также добавляет метаданные в RecyclerView для правильного отображения данных образца.
Рисунок 7. A RecyclerView с образцами данных
Показать предупреждения и ошибки макета
Редактор макета уведомляет вас о любых проблемах с макетом рядом с соответствующим просмотреть в дереве компонентов с помощью восклицательного значка с красным кружком при ошибках или восклицательный знак оранжевого треугольника для предупреждений.Щелкните значок, чтобы увидеть подробности.
Чтобы просмотреть все известные проблемы в окне под редактором, щелкните Показать предупреждения и ошибки ( или ) на панели инструментов.
Загрузите шрифты и примените их к тексту
При использовании Android 8.0 (уровень API 26) или Android Support Library 26.0.0 или выше, вы можете выбрать один из сотен шрифтов, выполнив следующие действия:
В редакторе макетов щелкните значок Design кнопку, чтобы просмотреть макет в редакторе дизайна.
Щелкните по текстовому окну.
В окне Атрибуты разверните textAppearance , а затем разверните fontFamily box.
Прокрутите список до конца и щелкните More Fonts , чтобы открыть Ресурсы диалоговое окно.
В диалоговом окне ресурсов выберите шрифт, просмотрев список или набрав в строку поиска вверху. Если вы выберете шрифт в Downloadable , затем вы можете либо щелкнуть Создать загружаемый шрифт , чтобы загрузить шрифт по адресу время выполнения как загружаемый шрифт, или щелкните Добавить шрифт в проект , чтобы упаковать файл шрифта TTF в APK.Обратите внимание, что шрифты, перечисленные в Android , предоставляются Android system, поэтому их не нужно загружать или объединять в APK.
Щелкните OK для завершения.
Создание графического элемента SmartArt из списка
С помощью SmartArt вы можете быстро преобразовать текст в красивую графику.
Преобразовать текст в SmartArt
Выделите свой текст.
Выберите Home > Преобразовать в SmartArt .
Выберите нужный SmartArt.
Вставка рисунков в SmartArt
Сначала выберите вариант SmartArt с изображениями, а затем вставьте изображения.
Выделите свой текст.
Выберите Home > Преобразовать в SmartArt .
Выберите More SmartArt Graphics , а затем выберите Picture .
Выберите нужный SmartArt и нажмите OK .
Чтобы вставить изображение, выберите значок изображения, перейдите туда, где находится изображение, а затем выберите его.
Выберите Вставьте .
Хотите больше?
Узнать больше о графике SmartArt
Обучение работе с Excel
Тренировка слов
Обучение работе с PowerPoint
С помощью SmartArt вы можете быстро преобразовать текст в красивую графику.
Просто выделите текст, выберите Home > Преобразовать в SmartArt , а затем выберите понравившийся SmartArt.
Некоторые параметры также позволяют добавлять изображения.
Выберите Преобразовать в Smart Art , Еще графика SmartArt , Рисунок , а затем выберите нужный вариант.
Чтобы вставить изображение, выберите значок изображения, выберите место, где находится изображение, которое вы хотите вставить, а затем выберите нужное изображение.
Сделайте свой список привлекательным с помощью SmartArt.
.

Возможности	Группа	Публичная страница	Мероприятие
Участники пишут на стене		Нет	Есть возможность отключения этой функции
Участники могут «предложить новость» сообществу	Нет		Нет
Участники могут добавить новые фотоальбомы, видеозаписи, аудиозаписи, документы	Есть возможность отключения этой функции	Нет	Есть возможность отключения этой функции
Ограничение доступа к материалам сообщества	Можно настроить так, чтобы мог вступить любой желающий, чтобы вступали только по приглашению или подав заявку, и только по приглашению руководителей	Нет	Можно настроить, чтобы могли участвовать все пользователи или только приглашённые администратором
Блок с товарами, который отображается на главной странице сообщества	Есть	Есть	Нет
Время начала и окончания мероприятия	Нет	Нет	Такой формат подходит, действительно, только для каких-то встреч, за день до начала вылезает напоминание о мероприятии
Отображение на личных страницах участников	Список групп отображается в личной информации, только если участник не скрыл его настройками приватности, в любом случае, никто его не просматривает	Если участник часто заходит в ваш паблик, то он появляется в топ-5 в блоке «Интересные страницы», там видна аватарка странички и больше шансов, что кто-то из его друзей увидит ваше сообщество и зайдёт в него	Список мероприятий отображается в личной информации, только если участник не скрыл его настройками приватности, в любом случае, никто его не просматривает
Приглашения в сообщество	Можно приглашать 40 друзей в день	Нет	Можно приглашать участников своих сообществ по 5000 в день