Оформляем сообщество в новом дизайне ВК

Тема в разделе "Вконтакте", создана пользователем Molodoy, 12.09.16.

  1. Molodoy

    Molodoy Участник

    Сообщения:
    10
    Репутация:
    5
    Рейтинг:
    +0 / -0
    С момента перевода всех на новый дизайн, многие так и не смогли разобраться, какие же размеры для картинок при оформлении сообщества наиболее оптимальны. Так что сегодня мы будем разбираться и делать для Вас своеобразный гайд, который будет полезен как для администраторов сообществ, так и для тех, кто арбитражит в ВК. Итак, поехали.

    [​IMG]


    Казалось бы, всё отлично смотрится, можно использовать. Однако появилосьжирное "НО": при клике на закреплённую картинку на моём 22х дюймовом экране она выглядела вообще крохотулей:
    [​IMG]


    При клике на аватар с размером 200х500px всё тоже было как-то грустно:
    [​IMG]


    "Надо масштабировать!", -- подумал я и просто увеличил картинки вдвое. В этот раз получилось очень даже прилично:
    [​IMG]


    Аватар 400х1000px уже смотрелся совершенно по-другому:
    [​IMG]

    Где-то проскакивала инфа, что ВК рекомендует ширину картинки 1280px, поэтому я решил попробовать максимально приблизиться к этому значению. Умножив исходный размер на 2.5 я получил ширину 1275px и не прогадал, т.к. картинка стала открываться на максимум. Это именно то, что я пытался найти!
    [​IMG]

    Аватар 500х1250px ничем не отличался от прошлого варианта. Однако именно такой размер надо использовать, если мы работаем по сетке и делаем слитные закреп и аватар.

    [​IMG]

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

    [​IMG]


    2. Закидываем в самый верх слой с готовым дизайном, либо пилим дизайн внутри шаблона;
    3. Когда всё готово, удаляем слой "основа" и жмём ctrl+shift+e (склеиваем все слои)
    4. Жмём букву М (включает инструмент "прямоугольное выделение") и выделяем нужный нам участок по сетке:
    [​IMG]


    5. Жмём ctrl+c (скопировать выделенный участок), ctrl+n (создать новое изображение (там уже сразу будет предложен размер скопированного участка, поэтому не запариваемся и жмём enter)), ctrl+v (вставляем скопированный фрагмент), ctrl+alt+shift+s(сохранить для Web) и выставляем значения из принтскрина (в дальнейшем это делать не придется, т.к. эти параметры будут предлагаться "по умолчанию"):
    [​IMG]


    6. Теперь проделываем те же самые махинации с аватаром:
    [​IMG]

    Готово! Вы превосходны [​IMG]

    [​IMG]


    В-третьих, жмём "добавить фото" и НЕ загружаем его, а просто перетаскиваем в это окошко:
    [​IMG]


    С загрузкой аватара делаем тоже самое:
    [​IMG]


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

    P.S. Шаблон встанет ровно в том случае, если в паблике есть какой-то статус. Без него съедет вёрстка.
    Юзайте горячие клавиши, которые я использую в статье. Всего за день можно это дело довести до автоматизма, а время экономят и облегчают жизнь эти штуки очень даже заметно.


    Как бы не было грустно, но на сегодня всё.